Merge pull request #42 from uswds/cm-mc-additional-refinement

March MC: Additional refinement

Author: James Mejia

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

@@ -54,10 +54,23 @@ <h4 class="filename"><span class="material-icons" aria-hidden="true">description
   <div class="editor">
     <h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> _includes/testimonial.html</h4>
 <pre class="blur">&lt;div class="my-testimonial"&gt;</pre>
-  <pre class="add">  &lt;svg class="usa-icon my-testimonial__icon" aria-hidden="true" focusable="false" role="img"&gt;
+  <pre class="add">  &lt;svg class="usa-icon" aria-hidden="true" focusable="false" role="img"&gt;
     &lt;use xlink:href="/assets/img/sprite.svg#format_quote"&gt;
     &lt;/use&gt;
   &lt;/svg&gt;</pre><pre class="blur">&lt;div class="my-testimonial__body"&gt;
+...</pre>
+  </div>
+  <p class="step-description">
+    Next, add a class to the svg element for styling later, as well as height and width attributes to natively define the size of the icon.
+  </p>
+  <div class="editor">
+    <h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> _includes/testimonial.html</h4>
+<pre class="blur">&lt;div class="my-testimonial"&gt;</pre>
+  <pre class="remove">  &lt;svg class="usa-icon" aria-hidden="true" focusable="false" role="img"&gt;</pre>
+  <pre class="add">  &lt;svg class="usa-icon my-testimonial__icon" height="50px" width="50px" aria-hidden="true" focusable="false" role="img"&gt;</pre>
+  <pre class="blur">    &lt;use xlink:href="/assets/img/sprite.svg#format_quote"&gt;
+    &lt;/use&gt;
+  &lt;/svg&gt&lt;div class="my-testimonial__body"&gt;
 ...</pre>
   </div>
   <p class="step-description">
@@ -66,7 +79,7 @@ <h4 class="filename"><span class="material-icons" aria-hidden="true">description
   <div class="editor">
     <h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> _includes/testimonial.html</h4>
 <pre class="blur">&lt;div class="my-testimonial"&gt;
-  &lt;svg class="usa-icon my-testimonial__icon" aria-hidden="true" focusable="false" role="img"&gt;</pre><pre class="remove">
+  &lt;svg class="usa-icon my-testimonial__icon" height="50px" width="50px" aria-hidden="true" focusable="false" role="img"&gt;</pre><pre class="remove">
     &lt;use xlink:href="/assets/img/sprite.svg#format_quote"&gt;</pre><pre class="add">
     &lt;use xlink:href="/assets/uswds/img/sprite.svg#format_quote"&gt;</pre><pre class="blur">
     &lt;/use&gt;
@@ -84,7 +97,7 @@ <h3 class="step">Add stylesheet partial.</h3>
     Create a new stylesheet partial for our new component by entering the following in the free terminal window:
   </p>
   <div class="terminal">
-    <pre>touch assets/css/components/_my-testimonial.scss</pre>
+    <pre>touch _theme/components/_my-testimonial.scss</pre>
   </div>
   <p class="step-description">
     And then we'll import this new stylesheet into our USWDS custom styles.

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

@@ -40,7 +40,7 @@ <h3 class="step">Create a custom stylesheet for our custom card component.</h3>
     Now let's add our new <strong>my-card</strong> stylesheet. It's standard naming convention to prefix SCSS partials with an underscore (as we've already seen in <strong>_uswds-theme</strong> and <strong>_uswds-theme-custom-styles</strong>).
   </p>
   <div class="terminal">
-    <pre>touch assets/css/components/_my-card.scss</pre>
+    <pre>touch _theme/components/_my-card.scss</pre>
   </div>
 
   <h3 class="step">Import the new stylesheet into USWDS custom styles.</h3>