Add testimonial refinements

thisisdano · thisisdano · commit 86a8181b1975 · 2024-03-20T23:37:31.000-07:00
diff --git a/_includes/sxs/02-extending/part-one.html b/_includes/sxs/02-extending/part-one.html
@@ -13,6 +13,7 @@ <h3 class="step">View available theme settings.</h3>
   <p class="step-description">
     Visit the <a href="https://designsystem.digital.gov/components/card/#component-settings-card">USWDS Card component settings table</a> to see a list of available settings. Settings allow you to apply a global theme to USWDS components and styles without modifying CSS. Today's we're going to give our card a light golden look. 
   </p>
+
   <h3 class="step">Customize border settings</h3>
   <p class="step-description">
     Let's start but updating the border to remove the border and give the card a rounder border radius.
@@ -30,9 +31,10 @@ <h4 class="filename"><span class="material-icons" aria-hidden="true">description
 </pre>
 <pre class="blur">);</pre>
   </div>
+
   <h3 class="step">Customize type settings</h3>
   <p class="step-description">
-    Next lets update the typesetting of our header to use a <strong>sans</strong> font, increase the size ("xl"), and use a tight line height (2).
+    Next, let's update the typesetting of our header to use a <strong>sans</strong> font, increase the size ("xl"), and use a tight line height (2).
   </p>
   <div class="editor">
     <h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> _theme/_uswds-theme.scss</h4>
@@ -45,9 +47,51 @@ <h4 class="filename"><span class="material-icons" aria-hidden="true">description
 </pre><pre class="blur">);</pre>
   </div>
   <p class="step-description">
-    Save, wait for the Sass to compile, and reload. You'll see the the updated border and font settings shape the card component! All without having to write any custom CSS.
+    Save, wait for the Sass to compile, and reload. You'll see the updated border and font settings shape the card component! All without having to write any custom CSS.
+  </p>
+
+  <h3 class="step">Customize perimeter padding settings</h3>
+  <p class="step-description">
+    And while we're add it, let's add a bit more padding to help the component feel a little more comfortable and less cramped.
+  </p>
+  <div class="editor">
+    <h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> _theme/_uswds-theme.scss</h4>
+<pre class="blur">@use "uswds-core" with (
+  ...
+  $theme-border-radius-lg: 2,
+  $theme-card-border-radius: "lg",
+  $theme-card-border-width: 0,
+  $theme-card-header-typeset: ("sans", "xl", 2),
+</pre><pre class="add">  $theme-card-padding-perimeter: 4,</pre>
+  </div>
+  <p class="step-description">
+    Save and reload. Ah, that's nicer.
+  </p>
+
+
+  <h3 class="step">Customize primary color settings</h3>
+  <p class="step-description">
+    Finally, let's update our project's primary color, from blue to indigo.
+  </p>
+  <div class="editor">
+    <h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> _theme/_uswds-theme.scss</h4>
+<pre class="blur">@use "uswds-core" with (
+  ...
+  $theme-border-radius-lg: 2,
+  $theme-card-border-radius: "lg",
+  $theme-card-border-width: 0,
+  $theme-card-header-typeset: ("sans", "xl", 2),
+  $theme-card-padding-perimeter: 4,
+
+</pre><pre class="add">  $theme-color-primary-lighter: "indigo-20v",
+  $theme-color-primary-light: "indigo-40v",
+  $theme-color-primary: "indigo-60v",
+  $theme-color-primary-dark: "indigo-70v",
+  $theme-color-primary-darker: "indigo-80v",</pre><pre class="blur">);</pre>
+  </div>
+  <p class="step-description">
+    Save and reload. You'll see the card's button has gotten a bit purple-er.
   </p>
-  
   <p class="step-description">
     But maybe there are additional changes your team would like to make that are not available in theme settings. In the next section we'll take a look at adding custom styles.
   </p>
diff --git a/_includes/sxs/02-extending/part-three.html b/_includes/sxs/02-extending/part-three.html
@@ -3,29 +3,29 @@ <h2><span>Part Three</span> Create a custom component</h2>
   <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!
+    Visit <strong>_includes/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!
   </p>
   <p class="step-description">
     Start by adding the basic skeleton of the component. We'll need an outer div, a body, and footer section. We'll call this component <strong>my-testimonial</strong>.
   </p>
   <div class="editor">
-    <h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> _includes/sxs/02-extending/testimonial.html</h4>
+    <h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> _includes/testimonial.html</h4>
 <pre class="add">
-  &lt;div class="my-testimonial"&gt;
-    &lt;div class="my-testimonial__body"&gt;&lt;/div&gt;
-    &lt;div class="my-testimonial__footer"&gt;&lt;/div&gt;
-  &lt;/div&gt;
+&lt;div class="my-testimonial"&gt;
+  &lt;div class="my-testimonial__body"&gt;&lt;/div&gt;
+  &lt;div class="my-testimonial__footer"&gt;&lt;/div&gt;
+&lt;/div&gt;
 </pre>
   </div>
   <p class="step-description">
     Now lets add a quote to our testimonial body.
   </p>
   <div class="editor">
-    <h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> _includes/sxs/02-extending/testimonial.html</h4>
+    <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;div class="my-testimonial__body"&gt;
     &lt;p&gt;
-      "Wow, this component sure is great"
+      “One of the best USWDS tutorials I’ve followed all the way to the end.”
     &lt;/p&gt;
   &lt;/div&gt;</pre>
 <pre class="blur">  &lt;div class="my-testimonial__footer"&gt;&lt;/div&gt;
@@ -36,14 +36,14 @@ <h4 class="filename"><span class="material-icons" aria-hidden="true">description
     Now lets create a profile section which will feature a profile picture, name, and title.
   </p>
   <div class="editor">
-    <h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> _includes/sxs/02-extending/testimonial.html</h4>
+    <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;div class="my-testimonial__footer"&gt;</pre>
 <pre class="add">    &lt;img src="https://doodleipsum.com/100x100/avatar-5?bg=a5a8eb&shape=circle&n=1" class="my-testimonial__icon" alt="Profile pic"&gt;
     &lt;div class="my-testimonial__profile"&gt;
-      &lt;p class="my-testimonial__profile-name"&gt;Person McGuy&lt;/p&gt;
-      &lt;p class="my-testimonial__profile-title"&gt;USWDS User&lt;/p&gt;
+      &lt;p class="my-testimonial__profile-name"&gt;J. Fakename&lt;/p&gt;
+      &lt;p class="my-testimonial__profile-title"&gt;Participant&lt;/p&gt;
     &lt;/div&gt;
 </pre>
 <pre class="blur">&lt;/div&gt;</pre>
@@ -52,22 +52,42 @@ <h4 class="filename"><span class="material-icons" aria-hidden="true">description
     Lastly, lets add a quotation icon for some visual flare! Visit the <a href="https://designsystem.digital.gov/components/icon/">Icon component</a> page, search for <strong>quote</strong>, and click the search result to copy the icons markup. Paste this markup directly after the opening <strong>my-testimonial</strong> div.
   </p>
   <div class="editor">
-    <h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> _includes/sxs/02-extending/testimonial.html</h4>
+    <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;
-    &lt;use xlink:href="/assets/uswds/img/sprite.svg#format_quote"&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;&lt;/div&gt;</pre>
+  &lt;/svg&gt;</pre><pre class="blur">&lt;div class="my-testimonial__body"&gt;
+...</pre>
   </div>
+  <p class="step-description">
+    Unfortunately, when we reload, the icon image doesn't load. If you've recently done Part One of this tutorial, you probably remember why: we need to update the icon image path to point to its location in this project. We'll need to change the path we got when we copied the icon image from the USWDS website (/assets/img/sprite.svg) to the proper path in our project (/assets<strong>/uswds</strong>/img/sprite.svg).
+  </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;
+  &lt;svg class="usa-icon my-testimonial__icon" 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;
+  &lt;/svg&gt;
+  &lt;div class="my-testimonial__body"&gt;
+...</pre>
+  </div>
+  <p class="step-description">
+    Now we've got some markup, but it doesn't really have any styling. Let's change that.
+  </p>
+
+
   <h3 class="step">Add stylesheet partial.</h3>
   <p class="step-description">
-    Create a new stylesheet partial for our new component.
+    Create a new stylesheet partial for our new component by entering the following in the free temrinal window:
   </p>
   <div class="terminal">
     <pre>touch assets/css/components/_my-testimonial.scss</pre>
   </div>
   <p class="step-description">
-    Remember to import the new stylesheet into USWDS custom styles.
+    And then we'll import this new stylesheet into our USWDS custom styles.
   </p>
   <div class="editor">
     <h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> _theme/_uswds-theme-custom-styles.scss</h4>
diff --git a/_includes/sxs/02-extending/part-two.html b/_includes/sxs/02-extending/part-two.html
@@ -1,5 +1,5 @@
 <section class="part two" id="part-two">
-  <h2><span>Part Two</span> Customizing card using custom styles.</h2>
+  <h2><span>Part Two</span> Customizing a card using custom styles.</h2>
   <p>
     Using custom styles, we can customize our components beyond theme settings.
   </p>
@@ -68,49 +68,36 @@ <h3 class="step">Use USWDS core features in custom styles</h3>
     <h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> assets/css/components/_my-card.scss</h4>
 <pre class="add">@use "uswds-core" as *;</pre>
   </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 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>.
+    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 use color tokens in our CSS rules.
   </p>
   <div class="editor">
-    <h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> assets/css/components/my-card.scss</h4>
+    <h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> assets/css/components/_my-card.scss</h4>
 <pre class="add">.my-card .usa-card__container {
-  background-color: color("indigo-70v");
-  color: color("indigo-30");
+  background-color: color("yellow-10");
 }</pre>
   </div>
   <p class="step-description">
-    After recompiling we can see our changes have taken effect. <strong>But wait!</strong> Upon closer inspection, these colors <strong>fail</strong> AA color contrast requirements! Luckily, USWDS uses a color grading system. Using this system, a grade difference 50+ will ensure AA across any two color values. You can learn more about this on our <a href="https://designsystem.digital.gov/design-tokens/color/overview/#magic-number-2">Using Color</a> page.
-  </p>
-  <p class="step-description">
-    USWDS also utilizes more advanced tools to automatically check color contrast. Replace our text and background color definitions with the combined <strong>set-text-and-bg</strong> mixin.
+    After recompiling we can see our changes have taken effect. Let's refine this card a bit more by reducing the boldness of the header and adding bit more space before the call to action. We'll use <a href="https://designsystem.digital.gov/design-tokens/spacing-units/">units tokens</a> and <a href="https://designsystem.digital.gov/design-tokens/typesetting/font-weight/">font weight tokens</a> for this.
   </p>
   <div class="editor">
-    <h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> assets/css/components/my-card.scss</h4>
-<pre class="blur">.my-card .usa-card__container {</pre>
-<pre class="remove">
+    <h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> assets/css/components/_my-card.scss</h4>
+<pre class="blur">.my-card .usa-card__container {
   background-color: color("indigo-70v");
-  color: color("indigo-30");
-</pre><pre class="add">
-  @include set-text-and-bg("indigo-70v", "indigo-30");
-</pre>
-<pre class="blur">}</pre>
-  </div>
-  <p class="step-description">
-    If you inspect the compilation messages in the terminal, you'll actually see a warning these colors do not pass color contrast requirements! Lets use the magic number of 50+ to resolve this issue.
-  </p>
-  <div class="editor">
-    <h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> assets/css/components/my-card.scss</h4>
-<pre class="blur">.my-card .usa-card__container {</pre>
-<pre class="remove">
-  @include set-text-and-bg("indigo-70v", "indigo-30");
-</pre><pre class="add">
-  @include set-text-and-bg("indigo-70v", "indigo-20");
-</pre>
+}
+
+</pre><pre class="add">.my-card .usa-card__footer {
+    margin-top: units(1);
+}
+
+.my-card .usa-card__heading {
+    font-weight: font-weight("bold");
+}</pre>
   </div>
-  <h3 class="step">Adjust the layout of card.</h3>
   <p class="step-description">
-    Create steps to add separate footer styles and a variant.
+    Now we're making progress. This component is looking pretty good. 
   </p>
-  <p>In our next section, we'll take a look at using everything USWDS has to offer to create a custom component!</p>
+  <p class="step-description">In our next section, we'll take a look at using everything USWDS has to offer to create a custom component!</p>
 </section>
diff --git a/_includes/testimonial.html b/_includes/testimonial.html
@@ -1,17 +1,17 @@
-<!-- <div class="my-testimonial">
+<div class="my-testimonial">
   <svg class="usa-icon my-testimonial__icon" aria-hidden="true" focusable="false" role="img" height="50px" width="50px">
     <use xlink:href="/assets/uswds/img/sprite.svg#format_quote"></use>
   </svg>
   <div class="my-testimonial__body">
     <p>
-      "Wow, this component sure is great"
+      “One of the best USWDS tutorials I’ve followed all the way to the end.”
     </p>
   </div>
   <div class="my-testimonial__footer">
     <img src="https://doodleipsum.com/100x100/avatar-5?bg=a5a8eb&shape=circle&n=1" alt="Profile pic">
     <div class="my-testimonial__profile">
-      <p class="my-testimonial__profile-name">Person McGuy</p>
-      <p class="my-testimonial__profile-title">USWDS User</p>
+      <p class="my-testimonial__profile-name">J. Fakename</p>
+      <p class="my-testimonial__profile-title">Participant</p>
     </div>
   </div>
-</div> -->
+</div>
diff --git a/_theme/_uswds-theme.scss b/_theme/_uswds-theme.scss
@@ -16,9 +16,16 @@ in the form $setting: value,
   $theme-banner-max-width: none,
   $theme-identifier-max-width: none,
   
-  // $theme-border-radius-lg: 2,
-  // $theme-card-border-radius: "lg",
-  // $theme-card-border-width: 0,
-  // $theme-card-font-family: "sans",
-  // $theme-card-header-typeset: ("sans", "xl", 1)
+  $theme-border-radius-lg: 2,
+  $theme-card-border-radius: "lg",
+  $theme-card-border-width: 0,
+  $theme-card-font-family: "sans",
+  $theme-card-header-typeset: ("sans", "xl", 2),
+  $theme-card-padding-perimeter: 4,
+
+  $theme-color-primary-lighter: "indigo-20v",
+  $theme-color-primary-light: "indigo-40v",
+  $theme-color-primary: "indigo-60v",
+  $theme-color-primary-dark: "indigo-70v",
+  $theme-color-primary-darker: "indigo-80v",
 );
diff --git a/assets/css/components/_my-card.scss b/assets/css/components/_my-card.scss
@@ -1,9 +1,13 @@
 @use "uswds-core" as *;
 
 .my-card .usa-card__container {
-//   @include u-text("indigo-30");
-//   @include u-bg("indigo-70v");
-
-@include set-text-and-bg("indigo-70v", "indigo-20")
+    background-color: color("yellow-10");
+}
 
+.my-card .usa-card__footer {
+    margin-top: units(1);
 }
+
+.my-card .usa-card__heading {
+    font-weight: font-weight("bold");
+}
diff --git a/assets/css/components/_my-testimonial.scss b/assets/css/components/_my-testimonial.scss
diff --git a/assets/css/components/my-card.scss b/assets/css/components/my-card.scss
diff --git a/assets/css/components/my-testimonial.scss b/assets/css/components/my-testimonial.scss
