Skip to content

Commit 3f4c7ca

Browse files
thisisdanothisisdano
committed
Update and refine testimonial steps
1 parent 86a8181 commit 3f4c7ca

2 files changed

Lines changed: 147 additions & 108 deletions

File tree

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

Lines changed: 106 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ <h4 class="filename"><span class="material-icons" aria-hidden="true">description
1818
</pre>
1919
</div>
2020
<p class="step-description">
21-
Now lets add a quote to our testimonial body.
21+
Now let's add a quote to our testimonial body.
2222
</p>
2323
<div class="editor">
2424
<h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> _includes/testimonial.html</h4>
@@ -33,7 +33,7 @@ <h4 class="filename"><span class="material-icons" aria-hidden="true">description
3333
</pre>
3434
</div>
3535
<p class="step-description">
36-
Now lets create a profile section which will feature a profile picture, name, and title.
36+
Now let's create a profile section which will feature a profile picture, name, and title.
3737
</p>
3838
<div class="editor">
3939
<h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> _includes/testimonial.html</h4>
@@ -49,7 +49,7 @@ <h4 class="filename"><span class="material-icons" aria-hidden="true">description
4949
<pre class="blur">&lt;/div&gt;</pre>
5050
</div>
5151
<p class="step-description">
52-
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.
52+
Lastly, let's 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.
5353
</p>
5454
<div class="editor">
5555
<h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> _includes/testimonial.html</h4>
@@ -98,59 +98,61 @@ <h4 class="filename"><span class="material-icons" aria-hidden="true">description
9898
</div>
9999
<h3 class="step">Start styling the component.</h3>
100100
<p class="step-description">
101-
Just like using the <strong>color()</strong> function to use USWDS color tokens, we can use <strong>units()</strong> to allow native CSS properties to make use of USWDS spacing tokens. To get our base styles for our new component, add the following styles to the new stylesheet.
101+
Just like using the <strong>color()</strong> function to use USWDS color tokens, we can use <strong>units()</strong> and other token functions to use USWDS tokens in native CSS properties. To get our base styles for our new component, add the following styles to the new stylesheet:
102102
</p>
103103
<div class="editor">
104-
<h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> assets/css/components/my-testimonial.scss</h4>
104+
<h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> assets/css/components/_my-testimonial.scss</h4>
105105
<pre class="add">
106-
@use "uswds-core" as *;
107-
108-
.my-testimonial {
109-
background-color: color("indigo-10");
110-
padding: units(3);
111-
}
112-
113-
.my-testimonial__icon {
114-
fill: color("indigo-30");
115-
stroke: color("indigo-30");
116-
}
117-
118-
.my-testimonial__body p {
119-
text-align: center;
120-
}
121-
122-
.my-testimonial__footer {
123-
display: flex;
124-
flex-direction: row;
125-
margin-top: units(3);
126-
}
127-
128-
.my-testimonial img {
129-
@include u-circle(10);
130-
}
131-
132-
.my-testimonial__profile {
133-
margin-left: units(3)
134-
}
135-
136-
.my-testimonial__profile-name {
137-
color: color("indigo-70v");
138-
}
139-
140-
.my-testimonial__profile-title {
141-
margin-top: units(0);
142-
}
106+
@use "uswds-core" as *;
107+
108+
.my-testimonial {
109+
background-color: color("indigo-10");
110+
margin-left: units(1);
111+
margin-right: units(1);
112+
padding: units(2);
113+
}
114+
115+
.my-testimonial__icon {
116+
fill: color("indigo-30");
117+
stroke: color("indigo-30");
118+
}
119+
120+
.my-testimonial__body p {
121+
font-size: size("heading", "xl");
122+
font-weight: font-weight("bold");
123+
text-align: center;
124+
}
125+
126+
.my-testimonial__footer {
127+
display: flex;
128+
flex-direction: row;
129+
margin-top: units(3);
130+
}
131+
132+
.my-testimonial img {
133+
@include u-circle(10);
134+
}
135+
136+
.my-testimonial__profile {
137+
margin-left: units(3)
138+
}
139+
140+
.my-testimonial__profile-title {
141+
font-size: font-size("body", 5);
142+
margin-top: units(0);
143+
}
143144
</pre>
144145
</div>
145146
<p class="step-description">
146147
Can you spot all the uses of USWDS tokens?
147148
</p>
149+
148150
<h3 class="step">Styling the testimonial icon</h3>
149151
<p class="step-description">
150152
USWDS uses variables to maintain consistent styles across different definitions. Let's create a variable for our icon stroke and fill at the top of our stylesheet.
151153
</p>
152154
<div class="editor">
153-
<h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> assets/css/components/my-testimonial.scss</h4>
155+
<h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> assets/css/components/_my-testimonial.scss</h4>
154156
<pre class="blur">@use "uswds-core" as *;
155157

156158
</pre>
@@ -173,40 +175,80 @@ <h4 class="filename"><span class="material-icons" aria-hidden="true">description
173175
</pre>
174176
<pre class="blur">}</pre>
175177
</div>
176-
<h3 class="step">Using USWDS utility mixins.</h3>
178+
179+
<h3 class="step">Using USWDS theme tokens with mixins</h3>
177180
<p class="step-description">
178-
USWDS also offers an extensive library of utility mixins which you can use to simplify style setting. Let's use some of the typeset mixins to customize our font weight and size. It's standard convention to include your mixins at the top of each style definition.
181+
Using a combination of utility mixins and USWDS theme settings can help add uniformity across your project. In this example, we'll add the border settings and padding settings from earlier to help our new component sit nicely with the original card. The <strong>u-margin-x()</strong> mixin lets you set left and right margin at the same time.
179182
</p>
180183
<div class="editor">
181-
<h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> assets/css/components/my-testimonial.scss</h4>
182-
<pre class="blur">.my-testimonial__body p {
183-
</pre>
184-
<pre class="add"> font-size: size("heading", "xl");
185-
font-weight: font-weight("bold");</pre>
186-
<pre class="blur"> text-align: center;
187-
}
184+
<h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> assets/css/components/_my-testimonial.scss</h4>
185+
<pre class="blur">.my-testimonial {</pre>
186+
<pre class="add"> @include u-border($theme-card-border-width);
187+
@include u-margin-x(1);
188+
@include u-padding($theme-card-padding-perimeter);
189+
@include u-radius($theme-card-border-radius);</pre>
190+
<pre class="blur"> background-color: color("indigo-10");</pre><pre class="remove">
191+
margin-left: units(1);
192+
margin-right: units(1);
193+
padding: units(2);</pre><pre class="blur">
194+
}</pre>
195+
</div>
188196

189-
...
197+
<h3 class="step">Color, background, and contrast</h3>
198+
<p class="step-description">
199+
Finally, let's change the color of our testimonial component. The traditional way to set background and color is to use two separate rules. If we want to use our primary colors in this component, we can use the following two rules:
200+
</p>
201+
<div class="editor">
202+
<h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> assets/css/components/_my-testimonial.scss</h4>
203+
<pre class="blur">.my-testimonial {
204+
@include u-border($theme-card-border-width);
205+
@include u-margin-x(1);
206+
@include u-padding($theme-card-padding-perimeter);
207+
@include u-radius($theme-card-border-radius);</pre>
208+
<pre class="remove"> background-color: color("indigo-10");</pre><pre class="add">
209+
background-color: color("primary-dark");
210+
color: color("primary-light");</pre><pre class="blur">
211+
}</pre>
212+
</div>
213+
<p class="step-description">
214+
If you save and reload, you might not be sure if the colors you've added have proper color contrast. Upon closer inspection, these colors <strong>fail</strong> AA color contrast requirements! USWDS uses a color grading system. Using this system, a grade difference of 50+ ensures 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.)
215+
</p>
216+
<p class="step-description">
217+
However, when you use theme tokens in your rules, like <strong>"primary-dark"</strong>, it's not as obvious what numerical grade you're using and it can lead to contrast errors.
218+
</p>
219+
<p class="step-description">
220+
When we build components internally, we use a more advanced tool to automatically check color contrast. If we replace our text and background color definitions with the combined <strong>set-text-and-bg()</strong> mixin, we can not only set the background color and the text color in the same mixin, but USWDS will check the contrast and provide a compile warning if there isn't AA contrast.
221+
</p>
190222

191-
.my-testimonial__profile-title {
192-
margin-top: units(0);
193-
</pre><pre class="add"> font-size: font-size("body", 5)</pre>
194-
<pre class="blur">}</pre>
223+
<div class="editor">
224+
<h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> assets/css/components/_my-testimonial.scss</h4>
225+
<pre class="blur">.my-testimonial {
226+
@include u-border($theme-card-border-width);
227+
@include u-margin-x(1);
228+
@include u-padding($theme-card-padding-perimeter);
229+
@include u-radius($theme-card-border-radius);</pre>
230+
<pre class="add"> @include set-text-and-bg("primary-dark", "primary-light");</pre>
231+
<pre class="remove"> background-color: color("primary-dark");
232+
color: color("primary-light");</pre><pre class="blur">
233+
}</pre>
195234
</div>
196-
<h3 class="step">Using uswds theme tokens with mixins</h3>
197235
<p class="step-description">
198-
Finally, lets use a combination of utility mixins and uswds theme settings to display how you can add uniformity across your project! In this example, we'll add the border settings from step one to help our new component sit nicely with the original card.
236+
This time, when you save and compile you'll see a warning in the terminal. Let's update our code to use <strong>primary-lighter</strong> as our text color.
199237
</p>
200238
<div class="editor">
201-
<h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> assets/css/components/my-testimonial.scss</h4>
202-
<pre class="blur">.my-testimonial {</pre>
203-
<pre class="add"> @include u-margin-x(1);
239+
<h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> assets/css/components/_my-testimonial.scss</h4>
240+
<pre class="blur">.my-testimonial {
204241
@include u-border($theme-card-border-width);
242+
@include u-margin-x(1);
243+
@include u-padding($theme-card-padding-perimeter);
205244
@include u-radius($theme-card-border-radius);</pre>
206-
<pre class="blur"> background-color: color("indigo-10");
207-
padding: units(3);
245+
<pre class="remove"> @include set-text-and-bg("primary-dark", "primary-light");</pre>
246+
<pre class="add"> @include set-text-and-bg("primary-dark", "primary-lighter");</pre><pre class="blur">
208247
}</pre>
209248
</div>
249+
<p class="step-description">
250+
This time, we don't get a warning, and our component looks even better. Not bad!
251+
</p>
210252
<p class="step-description">
211253
And voila! You've used theme settings, custom styles, USWDS tokens, and utility mixins to theme, customize, and extend USWDS into creating our very own component! Great work!
212254
</p>

‎assets/css/components/_my-testimonial.scss‎

Lines changed: 41 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,43 @@
11
@use "uswds-core" as *;
22

3-
// $my-testimonial-icon-color: color("indigo-30");
4-
5-
// .my-testimonial {
6-
// @include u-margin-x(1);
7-
// @include u-border($theme-card-border-width);
8-
// @include u-radius($theme-card-border-radius);
9-
// background-color: color("indigo-10");
10-
// padding: units(3);
11-
// }
12-
13-
// .my-testimonial__icon {
14-
// @include u-square(7);
15-
// fill: $my-testimonial-icon-color;
16-
// stroke: $my-testimonial-icon-color;
17-
// }
18-
19-
// .my-testimonial__body p {
20-
// @include u-font-size("heading", "xl");
21-
// font-weight: font-weight("bold");
22-
// text-align: center;
23-
// }
24-
25-
// .my-testimonial__footer {
26-
// display: flex;
27-
// flex-direction: row;
28-
// margin-top: units(3);
29-
// }
30-
31-
// .my-testimonial img {
32-
// @include u-circle(10);
33-
// }
34-
35-
// .my-testimonial__profile {
36-
// margin-left: units(3);
37-
// }
38-
39-
// .my-testimonial__profile-name {
40-
// color: color("indigo-70v");
41-
// }
42-
43-
// .my-testimonial__profile-title {
44-
// margin-top: units(0);
45-
// font-size: font-size("body", 5);
46-
// }
3+
$my-testimonial-icon-color: color("indigo-40");
4+
5+
.my-testimonial {
6+
@include u-border-width($theme-card-border-width);
7+
@include u-margin-x(1);
8+
@include u-padding($theme-card-padding-perimeter);
9+
@include u-radius($theme-card-border-radius);
10+
@include set-text-and-bg("primary-dark", "primary-lighter");
11+
// background-color: color("primary-dark");
12+
// color: color("primary-light");
13+
}
14+
15+
.my-testimonial__icon {
16+
fill: $my-testimonial-icon-color;
17+
stroke: $my-testimonial-icon-color;
18+
}
19+
20+
.my-testimonial__body p {
21+
font-size: size("heading", "xl");
22+
font-weight: font-weight("bold");
23+
text-align: center;
24+
}
25+
26+
.my-testimonial__footer {
27+
display: flex;
28+
flex-direction: row;
29+
margin-top: units(3);
30+
}
31+
32+
.my-testimonial img {
33+
@include u-circle(10);
34+
}
35+
36+
.my-testimonial__profile {
37+
margin-left: units(3)
38+
}
39+
40+
.my-testimonial__profile-title {
41+
font-size: font-size("body", 5);
42+
margin-top: units(0);
43+
}

0 commit comments

Comments
 (0)