Skip to content

Add icon list component #3876

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mejiaj merged 93 commits into from
Mar 12, 2021
Merged

Add icon list component #3876

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
93 commits
Select commit Hold shift + click to select a range
eb916fa
Merge branch 'accelerator/icons' into accelerator/3774-Icon-List
mitchmoccia Dec 3, 2020
1518eef
Merge branch 'accelerator/3777-fancy-ordered-list' into accelerator/3…
mitchmoccia Dec 3, 2020
c9ea6a3
3772 Icon list initial commit
mitchmoccia Dec 3, 2020
95521c1
Merge branch 'develop' into accelerator/3772-icon-list
mitchmoccia Dec 8, 2020
487e6df
Merge branch 'develop' into accelerator/3772-icon-list
mitchmoccia Dec 9, 2020
78a49fb
3772 Icon list initial commit
mitchmoccia Dec 9, 2020
7565cb7
Use framed template instead of hardcoded container
thisisdano Dec 9, 2020
1695c58
Use config data to drive component content
thisisdano Dec 9, 2020
2532c17
Strip whitespace in template
thisisdano Dec 9, 2020
1dc81ff
Use standard utility for layout container
thisisdano Dec 9, 2020
1585745
Use framed layout to avoid prose scope
thisisdano Dec 9, 2020
d209207
Override prose scope for all component items
thisisdano Dec 9, 2020
7927453
Use flex not float for items
thisisdano Dec 9, 2020
0b4798a
Use space-above instead of space-below for item-item spacing
thisisdano Dec 9, 2020
0bf84a7
Use block display for icons for more predictable spacing
thisisdano Dec 9, 2020
7975f1b
Use relative position to facilitate custom vertical allignment with b…
thisisdano Dec 9, 2020
4ea7486
Generate list-level variants for all project theme and state colors...
thisisdano Dec 10, 2020
8609a4f
Add list-level variants for icon size...
thisisdano Dec 10, 2020
17e998d
Add color and size variants to data and template
thisisdano Dec 10, 2020
af4bc0e
Add do-list and dont-list examples
thisisdano Dec 10, 2020
1e7c75c
Use a better default size for the icon and tighter item-item padding
thisisdano Dec 10, 2020
7efc333
Add some more custom style to the do/dontlist
thisisdano Dec 10, 2020
09ab5c0
Tie icon/content spacing to the content size
thisisdano Dec 10, 2020
9f023e3
Use a long string of text in one of the do-list items
thisisdano Dec 10, 2020
361cbcd
Lighten the border to focus on the content
thisisdano Dec 10, 2020
b2c5176
Add smart punctuation
thisisdano Dec 10, 2020
2f2d3a3
Add a default max-width of measure-5
thisisdano Dec 10, 2020
8a9987c
Improve mobile performance of column layout
thisisdano Dec 10, 2020
1ef92f5
Remove top-margin from the first child to correct spacing
thisisdano Dec 10, 2020
a4ba3e2
Add a complex list example with long text
thisisdano Dec 10, 2020
d1a1811
Remove prose override — no longer needed with override-prose()
thisisdano Dec 10, 2020
127cd03
Use standard disc for content uls
thisisdano Dec 10, 2020
3235942
Don't allow custom sizing at icon level to preserve left alignment
thisisdano Dec 10, 2020
2f78b16
Allow manual icon positioning
thisisdano Dec 10, 2020
1471757
Configure complex list content
thisisdano Dec 10, 2020
5e2067e
Merge pull request #3879 from uswds/dw-icon-list-changes
mitchmoccia Dec 10, 2020
2530633
Update sample text to exclude words like first and last
mitchmoccia Dec 11, 2020
54cc13c
Merge branch 'develop' into accelerator/3772-icon-list
thisisdano Dec 15, 2020
bb10e68
Merge branch 'develop' into accelerator/3772-icon-list
thisisdano Dec 16, 2020
599b2a2
Small change to invoke more recent Federalist build
mitchmoccia Dec 22, 2020
831dd0d
Merge branch 'develop' into accelerator/3772-icon-list
mitchmoccia Jan 14, 2021
50fb6c5
Update Icon list examples
mitchmoccia Jan 22, 2021
1ab4234
Update snyk to try to get valid build
mitchmoccia Jan 22, 2021
fbca5fc
Add new variant class usa-icon-list__heading that changes the size of…
mitchmoccia Jan 27, 2021
f869f12
Merge lastest from develop and resolve conflict with .snyk
mitchmoccia Jan 27, 2021
d461cb7
Update each examples with suggestions from weekly sync with Dan
mitchmoccia Jan 27, 2021
888459c
Reduce adjacent p tag top margin to reduce space between heading and …
mitchmoccia Jan 27, 2021
19017c3
Tie the Icon list size variant to specific font size tokens
mitchmoccia Jan 29, 2021
ed6fc98
The usa-icon-list__heading class now gets the font family from the th…
mitchmoccia Jan 29, 2021
7ee1ce8
A margin top factor was added to account for smaller icon size varian…
mitchmoccia Jan 29, 2021
df6b611
Change the size variant class from number based to t-shirt token base…
mitchmoccia Feb 2, 2021
9eddc5d
Improve Icon list font size and padding between content area and icon
mitchmoccia Feb 3, 2021
38aedbb
Change __heading to __title in the class name designation
mitchmoccia Feb 3, 2021
fe97882
Fine tune the title text and icons sizes to better match the Sketch file
mitchmoccia Feb 3, 2021
f11943c
Add comments to Icon list Sass file
mitchmoccia Feb 4, 2021
becc24e
Allow "none" to be passed to at-media(), resulting in no MQ output
thisisdano Feb 10, 2021
d196dfd
Don't give examples of long, complex text — this is running text not …
thisisdano Feb 10, 2021
7649742
[see details]
thisisdano Feb 10, 2021
a2ce0a1
Simplify rich content
thisisdano Feb 10, 2021
4cb2d75
Autoformat only untagged text in content areas
thisisdano Feb 10, 2021
48679f5
Return the balanced space under content titles
thisisdano Feb 10, 2021
060abd7
[see details]
thisisdano Feb 10, 2021
1bbb427
[see details]
thisisdano Feb 10, 2021
c9016a5
Clean up comments; use var for magic padding number
thisisdano Feb 10, 2021
c73deba
Use appropriate data
thisisdano Feb 10, 2021
2fb7137
[see details]
thisisdano Feb 10, 2021
97927ba
Refine scaling factors
thisisdano Feb 10, 2021
eef7801
Use conventional colors for icons
thisisdano Feb 10, 2021
634d7b1
Be specific about the elements meant not to get custom sizing
thisisdano Feb 10, 2021
6622b3a
Fix typo
thisisdano Feb 10, 2021
7d3118c
Clarify block-level element comment
thisisdano Feb 10, 2021
1521123
Use alpha order for rules
thisisdano Feb 10, 2021
4cbcf9a
Merge pull request #3991 from uswds/dw-icon-list-modifications
mitchmoccia Feb 11, 2021
274e9ec
Use theme defaults for icon list defaults
thisisdano Feb 19, 2021
aaedca1
Merge branch 'develop' into accelerator/3772-icon-list
mitchmoccia Feb 19, 2021
4134228
Update icon list examples to new spec
mitchmoccia Feb 19, 2021
a00a74e
update package-lock.json
jaredcunha Feb 19, 2021
fbe4886
Merge branch 'accelerator/3772-icon-list' of https://github.com/uswds…
thisisdano Mar 4, 2021
478ca5b
Merge branch 'uswds-2.11.0' into accelerator/3772-icon-list
thisisdano Mar 4, 2021
d4bebc8
Use theme font family
thisisdano Mar 11, 2021
dc09846
Get fixed size for icon, based on non-normalized size token
thisisdano Mar 11, 2021
5f4973a
Use proper keys for component data
thisisdano Mar 11, 2021
b7ad8f3
Removed unused size key from individual item icons
thisisdano Mar 11, 2021
42fa829
Move or remove styles that aren't affected by specific MQs
thisisdano Mar 11, 2021
b806ae7
[see details]
thisisdano Mar 11, 2021
4031206
[see details]
thisisdano Mar 12, 2021
4ca3437
Sync settings
thisisdano Mar 12, 2021
d68b735
Add usa-icon-list package
thisisdano Mar 12, 2021
c6ea22e
Merge branch 'uswds-2.11.0' into accelerator/3772-icon-list
thisisdano Mar 12, 2021
df23ae9
Update component status
thisisdano Mar 12, 2021
8dc2132
Use alpha order for icon list settings
thisisdano Mar 12, 2021
f4acd53
Consolidate media queries
thisisdano Mar 12, 2021
4a49f5c
Remove custom color from example icons
thisisdano Mar 12, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
3772 Icon list initial commit
  • Loading branch information
@mitchmoccia
mitchmoccia committed Dec 9, 2020
commit 78a49fbecb4210f1ded0d25507314312e95d85cd
54 changes: 32 additions & 22 deletions src/components/icon-list/icon-list.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,40 @@
<div class="grid-container">
<svg class="usa-icon usa-icon--size-4" aria-hidden="true" role="img">
<use xlink:href="../../dist/img/sprite.svg#check"></use>
</svg>

<svg class="usa-icon usa-icon--size-4" aria-hidden="true" role="img">
<use xlink:href="../../dist/img/sprite.svg#arrow_forward"></use>
</svg>

<ol class="usa-icon-list">
<ul class="usa-icon-list">
<li class="usa-icon-list__item">
<h4 class="usa-icon-list__heading">Icon list item</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.</li>
<li>Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum.</li>
<li>Aliquam erat volutpat. Sed quis velit.</li>
</ul>
<div class="usa-icon-list__icon">
<svg class="usa-icon usa-icon--size-4" aria-hidden="true" role="img">
<use xlink:href="../../dist/img/sprite.svg#star"></use>
</svg>
</div>
<div class="usa-icon-list__content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.</li>
<li>Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum.</li>
<li>Aliquam erat volutpat. Sed quis velit.</li>
</ul>
</div>
</li>
<li class="usa-icon-list__item">
<h4 class="usa-icon-list__heading">Icon list item</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</p>
<div class="usa-icon-list__icon">
<svg class="usa-icon usa-icon--size-4" aria-hidden="true" role="img">
<use xlink:href="../../dist/img/sprite.svg#check"></use>
</svg>
</div>
<div class="usa-icon-list__content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</p>
</div>
</li>
<li class="usa-icon-list__item">
<h4 class="usa-icon-list__heading">Icon list item</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</p>
<div class="usa-icon-list__icon">
<svg class="usa-icon usa-icon--size-4" aria-hidden="true" role="img">
<use xlink:href="../../dist/img/sprite.svg#alarm"></use>
</svg>
</div>
<div class="usa-icon-list__content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</p>
</div>
</li>
</ol>
</ul>
</div>
75 changes: 13 additions & 62 deletions src/stylesheets/components/_icon-list.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,74 +1,25 @@
// PROCESS LIST
$theme-icon-list-counter-border-width: units(
$theme-icon-list-connector-width
) / 2;
$theme-icon-list-counter-content-padding: (
units($theme-icon-list-counter-size) / 2
) - units(0.5);
$theme-icon-list-counter-line-x-position: (
(units($theme-icon-list-counter-size) / 2) -
(units($theme-icon-list-connector-width) / 2)
);

// ICON LIST
.usa-icon-list {
@include typeset($theme-icon-list-font-family);
@include unstyled-list;
counter-reset: usa-numbered-list;
padding: 20px 0 0 $theme-icon-list-counter-line-x-position;
position: relative;
}

.usa-icon-list__item {
border-left: units($theme-icon-list-connector-width) solid
color($theme-icon-list-connector-color);
font-size: size(
$theme-icon-list-font-family,
$theme-icon-list-font-size
);
font-size: size($theme-icon-list-font-family, $theme-icon-list-font-size);
padding-bottom: units(4);
padding-left: calc(#{$theme-icon-list-counter-content-padding} * 2);
&:last-child {
border-left: units($theme-icon-list-connector-width) solid transparent;
}
&::before {
@include u-flex("row", "align-center", "justify-center");
$half-of-font-size: -0.4rem;
@include u-circle($theme-icon-list-counter-size);
background-color: color($theme-icon-list-counter-background-color);
box-shadow: 0 0 0 $theme-icon-list-counter-border-width
color($theme-icon-list-counter-border-color);
color: color($theme-icon-list-counter-text-color);
content: counter(usa-numbered-list, decimal);
counter-increment: usa-numbered-list;
display: flex;
font-family: family($theme-icon-list-counter-font-family);
font-size: size(
$theme-icon-list-counter-font-family,
$theme-icon-list-counter-font-size
);
font-weight: font-weight("bold");
height: units($theme-icon-list-counter-size);
left: 0;
line-height: lh($theme-icon-list-counter-font-family, 1);
margin-top: $half-of-font-size;
position: absolute;
width: units($theme-icon-list-counter-size);
}
padding-left: 0;
}

.usa-prose {
> .usa-icon-list {
padding-left: $theme-icon-list-counter-content-padding;
}
.usa-icon-list__icon {
float: left;
}

.usa-icon-list__heading {
color: color($theme-icon-list-heading-color);
font-family: family($theme-icon-list-heading-font-family);
font-size: size(
$theme-icon-list-heading-font-family,
$theme-icon-list-heading-font-size
);
font-weight: font-weight("bold");
margin: 0;
.usa-icon-list__content {
padding-left: units(6);
}

.usa-prose {
> .usa-icon-list {
padding-left: 0;
}
}
11 changes: 0 additions & 11 deletions src/stylesheets/settings/_settings-components.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,19 +96,8 @@ $theme-header-min-width: "desktop" !default;
$theme-hero-image: "#{$theme-image-path}/hero.png" !default;

// Icon List
$theme-icon-list-counter-background-color: "primary" !default;
$theme-icon-list-counter-border-color: "white" !default;
$theme-icon-list-counter-font-family: "ui" !default;
$theme-icon-list-counter-font-size: "lg" !default;
$theme-icon-list-counter-size: 5 !default;
$theme-icon-list-counter-text-color: "white" !default;
$theme-icon-list-connector-color: "base-lighter" !default;
$theme-icon-list-connector-width: 1 !default;
$theme-icon-list-font-family: "ui" !default;
$theme-icon-list-font-size: "sm" !default;
$theme-icon-list-heading-color: "ink" !default;
$theme-icon-list-heading-font-family: "ui" !default;
$theme-icon-list-heading-font-size: "md" !default;

// Identifier
$theme-identifier-font-family: "ui" !default;
Expand Down
11 changes: 0 additions & 11 deletions src/stylesheets/theme/_uswds-theme-components.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,19 +96,8 @@ $theme-header-min-width: "desktop";
$theme-hero-image: "#{$theme-image-path}/hero.png";

// Icon List
$theme-icon-list-counter-background-color: "primary";
$theme-icon-list-counter-border-color: "white";
$theme-icon-list-counter-font-family: "ui";
$theme-icon-list-counter-font-size: "lg";
$theme-icon-list-counter-size: 5;
$theme-icon-list-counter-text-color: "white";
$theme-icon-list-connector-color: "base-lighter";
$theme-icon-list-connector-width: 1;
$theme-icon-list-font-family: "ui";
$theme-icon-list-font-size: "sm";
$theme-icon-list-heading-color: "ink";
$theme-icon-list-heading-font-family: "ui";
$theme-icon-list-heading-font-size: "md";

// Identifier
$theme-identifier-font-family: "ui";
Expand Down