Merge pull request #37 from uswds/jm-typos

Extending: fix typos

_includes/sxs/02-extending/part-intro.html

@@ -2,7 +2,7 @@
   <h1>Part Two</h1>
   <h2>Theming, customizing, extending</h2>
   <p class="subhed">Take USWDS and make it your own.</p>
-  <p class="subhed">In this section of the tutorial, you'll expand on theming components. Then you'll learn creating custom project styles for our components. Finally, you'll exend a component to create a custom component!</p>
+  <p class="subhed">In this section of the tutorial, you'll expand on theming components. Then you'll learn creating custom project styles for our components. Finally, you'll extend a component to create a custom component!</p>
   <h3>Contents</h3>
   <ul class="contents">
     <li>

_includes/sxs/02-extending/part-three.html

@@ -1,6 +1,6 @@
 <section class="part three" id="part-three">
   <h2><span>Part Three</span> Create a custom component</h2>
-  <p>In this section we'll explore extending USWDS by creating a custom <strong>testmionial</strong> component not offered by the design system.</p>
+  <p>In this section we'll explore extending USWDS by creating a custom <strong>testimonial</strong> component not offered by the design system.</p>
   <h3 class="step">Create a the markup for a new component.</h3>
   <p class="step-description">
     Visit <strong>_includes/sxs/02-extending/testimonial.html</strong>. This will be where we will add the markup for our new component. Once the markup is filled out, it will appear beneath our custom card component!
@@ -59,7 +59,7 @@ <h4 class="filename"><span class="material-icons" aria-hidden="true">description
       &lt;/use&gt;
   &lt;/svg&gt;</pre><pre class="blur">&lt;div class="ut-testimonial__body"&gt;&lt;/div&gt;</pre>
   </div>
-  <h3 class="step">Add styleheet partial.</h3>
+  <h3 class="step">Add stylesheet partial.</h3>
   <p class="step-description">
     Create a new stylesheet partial for our new component.
   </p>
@@ -73,7 +73,7 @@ <h3 class="step">Add styleheet partial.</h3>
     <h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> _theme/_uswds-theme-custom-styles.scss</h4>
 <pre class="blur">@use "uswds-core" as *;
   @forward "../assets/css/styles.scss";
-  @forward "../assets/css/_ut-card.scss"; 
+  @forward "../assets/css/_ut-card.scss";
 </pre><pre class="add">  @forward "../assets/css/_ut-testimonial.scss";</pre>
   </div>
   <h3 class="step">Start styling the component.</h3>
@@ -84,34 +84,34 @@ <h3 class="step">Start styling the component.</h3>
     <h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> assets/css/components/ut-testimonial.scss</h4>
 <pre class="add">
   @use "uswds-core" as *;
-  
+
   .ut-testimonial {
     background-color: color("indigo-10");
     padding: units(3);
   }
-  
+
   .ut-testimonial__body p {
     text-align: center;
   }
-  
+
   .ut-testimonial__footer {
     display: flex;
     flex-direction: row;
     margin-top: units(3);
   }
-  
+
   .ut-testimonial img {
     @include u-circle(10);
   }
-  
+
   .ut-testimonial__profile {
     margin-left: units(3)
   }
-  
+
   .ut-testimonial__profile-name {
     color: color("indigo-70v");
   }
-  
+
   .ut-testimonial__profile-title {
     margin-top: units(0);
   }

_includes/sxs/02-extending/part-two.html

@@ -19,7 +19,7 @@ <h4 class="filename"><span class="material-icons" aria-hidden="true">description
   </div>
   <h3 class="step">Create a custom stylesheet for our custom card component.</h3>
   <p class="step-description">
-    To help keep things organized, we'll create a custom stylesheet with styles specific to our customized card component. In later excercises, we'll use this same stylesheet to extend the card component into a new custom component. First, lets add a <strong>components</strong> directory to our css assets.
+    To help keep things organized, we'll create a custom stylesheet with styles specific to our customized card component. In later exercises, we'll use this same stylesheet to extend the card component into a new custom component. First, lets add a <strong>components</strong> directory to our css assets.
   </p>
   <div class="terminal">
     <pre>mkdir assets/css/components</pre>
@@ -37,15 +37,15 @@ <h3 class="step">Import the new stylesheet into USWDS custom styles.</h3>
   <div class="editor">
     <h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> _theme/_uswds-theme-custom-styles.scss</h4>
 <pre class="blur">@use "uswds-core" as *;
-@forward "../assets/css/styles.scss";  
+@forward "../assets/css/styles.scss";
 </pre><pre class="add">@forward "../assets/css/_ut-card.scss";</pre>
   </div>
   <p class="step-description">
     Once you've updated this file, you can save and close it. Since we've added our project Sass source directory to our gulpfile in the first part of the tutorial, it should already be compiling correctly!
   </p>
   <h3 class="step">Use USWDS utilities in custom styles</h3>
   <p class="step-description">
-    Now that our stylesheet is being imported, lets write some customs styles to really make this card stand out! 
+    Now that our stylesheet is being imported, lets write some customs styles to really make this card stand out!
   </p>
   <p class="step-description">
     We'll want to use USWDS design tokens in our stylesheets using USWDS functions and mixins. To do this, lets add <strong>uswds-core</strong> to the top of our new stylesheet with the <strong>use</strong> Sass directive.
@@ -56,7 +56,7 @@ <h4 class="filename"><span class="material-icons" aria-hidden="true">description
   </div>
   <h3 class="step">Add custom class and styles</h3>
   <p class="step-description">
-    Next lets create a custom class for our personalized component and use some USWDS utiltities. We'll start by updating the background color of the card. We can use the <a href="https://designsystem.digital.gov/design-tokens/color/system-tokens/#using-color-tokens-2"><strong>color()</strong> function</a> to set the text and background color with USWDS <a href="https://designsystem.digital.gov/design-tokens/color/overview/">color tokens</a>.
+    Next lets create a custom class for our personalized component and use some USWDS utilities. We'll start by updating the background color of the card. We can use the <a href="https://designsystem.digital.gov/design-tokens/color/system-tokens/#using-color-tokens-2"><strong>color()</strong> function</a> to set the text and background color with USWDS <a href="https://designsystem.digital.gov/design-tokens/color/overview/">color tokens</a>.
   </p>
   <div class="editor">
     <h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> assets/css/components/ut-card.scss</h4>

_includes/sxs/part-end.html

@@ -5,7 +5,7 @@ <h2><span>Next steps</span>Extending USWDS</h2>
   </p>
 
   <p>
-    Before we go, we'll need to add a little additonal functionality to our stylesheets. We'll need USWDS Utilities and the USWDS Layout Grid for the next part of the tutorial, so let's add them now, just before custom styles. Give it a save and head on to Part Two!
+    Before we go, we'll need to add a little additional functionality to our stylesheets. We'll need USWDS Utilities and the USWDS Layout Grid for the next part of the tutorial, so let's add them now, just before custom styles. Give it a save and head on to Part Two!
   </p>
 
   <div class="editor">