Skip to content

Commit c1c0247

Browse files
author
James Mejia
authored
Merge pull request #3876 from uswds/accelerator/3772-icon-list
Add icon list component
2 parents bdf35a6 + 4a49f5c commit c1c0247

File tree

9 files changed

+318
-5
lines changed

9 files changed

+318
-5
lines changed

‎src/components/_uswds-content.njk‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{% extends '_uswds.njk' %}
22
{% block body %}
3-
<div class="grid-container usa-prose" style="padding-top: 2em; padding-bottom: 2em;">
3+
<div class="grid-container usa-prose padding-y-4">
44
{{ yield | safe }}
55
</div>
66
{% endblock %}

‎src/components/icon-list/icon-list.config.yml‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
label: Icon list
2+
status: ready
3+
preview: "@uswds-content"
4+
context:
5+
items:
6+
- icon:
7+
name: check_circle
8+
color: green
9+
content: Wash your hands for 20 seconds with soap
10+
- icon:
11+
name: check_circle
12+
color: green
13+
content: Stay six feet away from others
14+
- icon:
15+
name: cancel
16+
color: red
17+
content: Avoid large gatherings
18+
19+
variants:
20+
- name: simple
21+
label: Simple content
22+
context:
23+
color: primary
24+
items:
25+
- icon:
26+
name: thumb_up_alt
27+
utilities:
28+
content: No processing lines
29+
- icon:
30+
name: thumb_up_alt
31+
utilities:
32+
content: Access to expedited entry benefits in other countries
33+
- icon:
34+
name: thumb_up_alt
35+
utilities:
36+
content: Available at major U.S. airports
37+
- icon:
38+
name: thumb_up_alt
39+
utilities:
40+
content: Reduced wait times
41+
42+
- name: rich
43+
label: Rich content
44+
context:
45+
items:
46+
- icon:
47+
name: check_circle
48+
color: ink
49+
utilities:
50+
content: |
51+
<h3 class="usa-icon-list__title">Donate cash when possible.</h3>
52+
<p>Financial contributions to recognized disaster relief organizations are the fastest, most flexible and most effective method of donating. Organizations on the ground know what items and quantities are needed, often buy in bulk with discounts and, if possible, purchase through businesses local to the disaster, which supports economic recovery.</p>
53+
54+
- icon:
55+
name: check_circle
56+
color: ink
57+
utilities:
58+
content: |
59+
<h3 class="usa-icon-list__title">Confirm what donations are needed.</h3>
60+
<p>Unneeded and unsolicited goods burden local organizations’ ability to meet survivors’ confirmed needs, drawing away valuable volunteer labor, transportation and warehouse space.</p>
61+
62+
- icon:
63+
name: check_circle
64+
color: ink
65+
utilities:
66+
content: |
67+
<h3 class="usa-icon-list__title">Talk to trusted organizations about volunteering.</h3>
68+
<p>Financial contributions to recognized disaster relief organizations are the fastest, most flexible and most effective method of donating. Organizations on the ground know what items and quantities are needed, often buy in bulk with discounts and, if possible, purchase through businesses local to the disaster, which supports economic recovery.</p>
69+
- name: custom-size
70+
label: Custom size
71+
context:
72+
size: lg
73+
items:
74+
- icon:
75+
name: help
76+
color: blue
77+
utilities:
78+
content: <span class="text-bold">Timing.</span> Is now the right time to start a business?
79+
- icon:
80+
name: help
81+
color: blue
82+
utilities:
83+
content: <span class="text-bold">Funding.</span> Do I have enough money to launch a business?
84+
- icon:
85+
name: help
86+
color: blue
87+
utilities:
88+
content: <span class="text-bold">Need.</span> Will this business fill a real need for my customers?
89+
- name: custom-size-rich
90+
label: Custom size with rich content
91+
context:
92+
size: lg
93+
items:
94+
- icon:
95+
name: attach_money
96+
color: green
97+
utilities:
98+
content: |
99+
<h3 class="usa-icon-list__title">Let the sun shine.</h3>
100+
<p>On sunny days, open your curtains to allow the sun to naturally warm the rooms of your home without using electricity. Natural sunlight can also lift your mood to help brighten your day. On warm days, close your curtains to help keep your house cool.</p>
101+
102+
- icon:
103+
name: attach_money
104+
color: green
105+
utilities:
106+
content: |
107+
<h3 class="usa-icon-list__title">Adjust your schedule.</h3>
108+
<p>Instead of running high-energy-use appliances such as dishwashers and clothes dryers during mid-afternoon or early evening hours, operate them early in the morning or late at night. Some utilities charge less at off-peak times, which will help reduce your costs.</p>
109+
110+
- icon:
111+
name: attach_money
112+
color: green
113+
utilities:
114+
content: |
115+
<h3 class="usa-icon-list__title">Fill it up.</h3>
116+
<p>Wash full loads, whether it’s clothes or dishes. Washing multiple small loads means you’re using and heating more water, which can increase your expenses. Using cold water for clothes washing can also help lower your costs.</p>

‎src/components/icon-list/icon-list.njk‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<ul class="usa-icon-list{% if color %} usa-icon-list--{{ color }}{% endif %}{% if size %} usa-icon-list--size-{{ size }}{% endif %}">
2+
{%- for item in items -%}
3+
<li class="usa-icon-list__item">
4+
<div class="usa-icon-list__icon{% if item.icon.color %} text-{{ item.icon.color }}{% endif %}">
5+
<svg class="usa-icon{% if item.icon.utilities %} {{ item.icon.utilities }}{% endif %}" aria-hidden="true" role="img">
6+
<use xlink:href="../../dist/img/sprite.svg#{{ item.icon.name }}"></use>
7+
</svg>
8+
</div>
9+
<div class="usa-icon-list__content">
10+
{{ item.content | safe }}
11+
</div>
12+
</li>
13+
{%- endfor -%}
14+
</ul>

‎src/stylesheets/components/_icon-list.scss‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
// Variables
2+
3+
// Size icons based on the theme-type-scale-[size] number and this factor
4+
$icon-list-icon-size-factor: 1.5;
5+
// Center the icon to the title text, works for all size variants
6+
$icon-list-icon-margin-top: -1.5%;
7+
// Fine tune the space between the icon and content with this factor
8+
$icon-list-icon-padding-left-factor: 0.4;
9+
// Fine tune the title top padding given a line height of lh-2
10+
$icon-list-title-padding-top: 0.425ex;
11+
12+
$theme-body-font-sizes: (
13+
"xs": $theme-type-scale-xs,
14+
"sm": $theme-type-scale-sm,
15+
"md": $theme-type-scale-md,
16+
"lg": $theme-type-scale-lg,
17+
"xl": $theme-type-scale-xl,
18+
"2xl": $theme-type-scale-2xl,
19+
"3xl": $theme-type-scale-3xl,
20+
);
21+
22+
$type-scale: font-size($theme-icon-list-font-family, $theme-body-font-size);
23+
24+
// Get fixed size for icon, based on non-normalized size token
25+
$this-system-token: if(
26+
map-has-key($theme-body-font-sizes, $theme-body-font-size),
27+
map-get($theme-body-font-sizes, $theme-body-font-size),
28+
$theme-body-font-size
29+
);
30+
$this-icon-size-px: map-get($system-type-scale, $this-system-token);
31+
$icon-size: px-to-rem($this-icon-size-px);
32+
33+
@include override-prose {
34+
.usa-icon-list {
35+
@include typeset($theme-icon-list-font-family, $theme-body-font-size);
36+
@include unstyled-list;
37+
@include u-measure(5);
38+
}
39+
40+
.usa-icon-list__item {
41+
display: flex;
42+
position: relative;
43+
44+
& + .usa-icon-list__item {
45+
padding-top: units(1.5);
46+
}
47+
}
48+
}
49+
50+
// Allow setting icon color on the icon-list element
51+
.usa-icon-list {
52+
@each $color, $grades in $all-project-colors {
53+
@each $grade, $value in $grades {
54+
@if $value {
55+
$prefix: if($grade != "default", #{$color}-#{$grade}, #{$color});
56+
&--#{$prefix} {
57+
.usa-icon-list__icon {
58+
color: color($prefix);
59+
}
60+
}
61+
}
62+
}
63+
}
64+
}
65+
66+
.usa-icon-list__icon {
67+
.usa-icon {
68+
// Set the height and width of the icon based on the size variant and factor
69+
// Doesn't use u-square() because of non-token size
70+
display: block;
71+
height: $icon-size * $icon-list-icon-size-factor;
72+
// margin-top: $icon-list-icon-margin-top;
73+
position: relative;
74+
width: $icon-size * $icon-list-icon-size-factor;
75+
}
76+
}
77+
78+
// Don't resize any block-level element inside content
79+
.usa-icon-list__content {
80+
> p,
81+
> ul,
82+
> ol {
83+
@include u-font($theme-icon-list-font-family, $theme-body-font-size);
84+
@include u-measure(5);
85+
}
86+
}
87+
88+
.usa-icon-list[class*="usa-icon-list--size-"] {
89+
@include u-measure("none");
90+
}
91+
92+
// Generate responsive variants
93+
// Create a map for looping that includes a default or no-breakpoint version
94+
$this-null: (
95+
"none": null,
96+
);
97+
$icon-list-breakpoints: map-merge($this-null, $system-breakpoints);
98+
@each $mq-key, $mq-value in $icon-list-breakpoints {
99+
// Set the prefix
100+
// An empty string if "none"
101+
$prefix: false;
102+
@if $mq-key == "none" {
103+
$prefix: "";
104+
}
105+
// Or the standard prefix if the breakpoint is output
106+
@else if map-get($theme-utility-breakpoints, $mq-key) {
107+
$prefix: "#{$mq-key}\\:";
108+
}
109+
110+
@include at-media($mq-key) {
111+
@each $token, $val in $theme-body-font-sizes {
112+
@if $prefix {
113+
$this-type-scale: font-size($theme-icon-list-font-family, $token);
114+
.#{$prefix}usa-icon-list--size-#{$token} {
115+
.usa-icon-list__icon {
116+
.usa-icon {
117+
// Set the height and width of the icon based on the size variant and factor
118+
height: $this-type-scale * $icon-list-icon-size-factor;
119+
width: $this-type-scale * $icon-list-icon-size-factor;
120+
}
121+
}
122+
123+
.usa-icon-list__content {
124+
@include u-measure(5);
125+
// Resize simple (un-marked up) content
126+
font-size: size($theme-icon-list-font-family, $token);
127+
// Calculate the space between the icon and content based on the size variant and factor
128+
padding-left: $this-type-scale *
129+
$icon-list-icon-padding-left-factor;
130+
131+
.usa-icon-list__title {
132+
@include u-font($theme-icon-list-title-font-family, $token);
133+
}
134+
}
135+
}
136+
}
137+
}
138+
}
139+
}
140+
141+
.usa-icon-list__title {
142+
@include typeset(
143+
$theme-icon-list-title-font-family,
144+
$theme-body-font-size,
145+
2
146+
);
147+
margin-bottom: units(0);
148+
padding-top: $icon-list-title-padding-top;
149+
& + * {
150+
margin-top: units(1);
151+
}
152+
}
153+
154+
.usa-icon-list__content {
155+
font-size: $type-scale;
156+
padding-left: $type-scale * $icon-list-icon-padding-left-factor;
157+
> *:first-child {
158+
margin-top: 0;
159+
}
160+
> *:last-child {
161+
margin-bottom: 0;
162+
}
163+
164+
ul li {
165+
list-style-type: disc;
166+
}
167+
}

‎src/stylesheets/core/mixins/_at-media.scss‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,20 @@
33
@mixin at-media($bp) {
44
$quoted-bp: smart-quote($bp);
55
$our-breakpoints: map-deep-get($system-properties, breakpoints, standard);
6-
@if map-has-key($our-breakpoints, $quoted-bp) {
6+
@if $quoted-bp == "none" {
7+
@content;
8+
} @else if map-has-key($our-breakpoints, $quoted-bp) {
79
@if $theme-respect-user-font-size {
810
$bp: rem-to-user-em(map-get($our-breakpoints, $quoted-bp));
911
} @else {
1012
$bp: rem-to-px(map-get($our-breakpoints, $quoted-bp));
1113
}
14+
@media all and (min-width: #{$bp}) {
15+
@content;
16+
}
1217
} @else {
1318
@warn '`#{$bp}` is not a valid USWDS project breakpoint. Valid values: #{map-keys($our-breakpoints)}';
1419
}
15-
@media all and (min-width: #{$bp}) {
16-
@content;
17-
}
1820
}
1921

2022
// Max-width media query

‎src/stylesheets/packages/_usa-icon-list.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
// dependencies
2+
@import "usa-icon";
3+
4+
// src
5+
@import "../components/icon-list";

‎src/stylesheets/packages/_uswds-components.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
@import "../components/header";
3636
@import "../components/hero";
3737
@import "../components/icon";
38+
@import "../components/icon-list";
3839
@import "../components/identifier";
3940
@import "../components/layout";
4041
@import "../components/media-block";

‎src/stylesheets/settings/_settings-components.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,10 @@ $theme-header-min-width: "desktop" !default;
9999
// Hero
100100
$theme-hero-image: "#{$theme-image-path}/hero.png" !default;
101101

102+
// Icon List
103+
$theme-icon-list-font-family: "body" !default;
104+
$theme-icon-list-title-font-family: "heading" !default;
105+
102106
// Identifier
103107
$theme-identifier-background-color: "base-darkest" !default;
104108
$theme-identifier-font-family: "ui" !default;

‎src/stylesheets/theme/_uswds-theme-components.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,10 @@ $theme-header-min-width: "desktop";
9999
// Hero
100100
$theme-hero-image: "#{$theme-image-path}/hero.png";
101101

102+
// Icon List
103+
$theme-icon-list-font-family: "body";
104+
$theme-icon-list-title-font-family: "heading";
105+
102106
// Identifier
103107
$theme-identifier-background-color: "base-darkest";
104108
$theme-identifier-font-family: "ui";

0 commit comments

Comments
 (0)