From c7bcd95e0b8239bcc8abc21a337ecab7591df659 Mon Sep 17 00:00:00 2001 From: Scott Vandehey Date: Thu, 14 Jul 2022 13:31:17 -0700 Subject: [PATCH 1/5] Add `size` and `muted` props to Icon This PR adds two new props to the Icon component: `muted`, which will render the icon slightly opaque, and `size` which will scale the icon to the requested icon size token. --- src/components/icon/icon.scss | 26 +++++++ src/components/icon/icon.stories.mdx | 70 +++++++++++++++++-- src/components/icon/icon.twig | 8 +++ .../no-content/example/example.scss | 13 ---- .../no-content/example/example.twig | 2 +- .../no-content/no-content.stories.js | 1 - src/tokens/size/sizing.js | 4 ++ 7 files changed, 103 insertions(+), 21 deletions(-) delete mode 100644 src/prototypes/no-content/example/example.scss diff --git a/src/components/icon/icon.scss b/src/components/icon/icon.scss index ada62deb6..82dc314f5 100644 --- a/src/components/icon/icon.scss +++ b/src/components/icon/icon.scss @@ -1,4 +1,6 @@ @use 'sass:math'; +@use '../../compiled/tokens/scss/opacity'; +@use '../../compiled/tokens/scss/size'; @use '../../mixins/svg'; @use '../../mixins/icon'; @@ -18,3 +20,27 @@ .c-icon--inline { @include icon.inline; } + +/** + * Muted modifier + */ + +.c-icon--muted { + opacity: opacity.$muted; +} + +/** + * Size modifiers + */ + +.c-icon--medium { + --icon-size: #{size.$icon-medium}; +} + +.c-icon--large { + --icon-size: #{size.$icon-large}; +} + +.c-icon--x-large { + --icon-size: #{size.$icon-x-large}; +} diff --git a/src/components/icon/icon.stories.mdx b/src/components/icon/icon.stories.mdx index ec01d43fa..0c14bfe2c 100644 --- a/src/components/icon/icon.stories.mdx +++ b/src/components/icon/icon.stories.mdx @@ -20,6 +20,15 @@ const iconStory = (args) => { } return template(args); }; +const defaultArgs = { + name: { type: { name: 'string' } }, + fallback: { type: { name: 'string' } }, + inline: { type: { name: 'boolean' } }, + class: { type: { name: 'string' } }, + title: { type: { name: 'string' } }, + muted: { type: { name: 'boolean' } }, + size: { type: { name: 'string' } }, +}; @@ -36,13 +45,62 @@ For a list of available icons, visit [the Icons page](/docs/design-icons--page). name: 'heart', inline: false, }} - argTypes={{ - name: { type: { name: 'string' } }, - fallback: { type: { name: 'string' } }, - inline: { type: { name: 'boolean' } }, - class: { type: { name: 'string' } }, - title: { type: { name: 'string' } }, + argTypes={defaultArgs} + > + {(args) => iconStory(args)} + + + +## Muted + +By setting the `muted` property to `true`, the icon will become slightly opaque. + + + + {(args) => iconStory(args)} + + + +## Sizes + +By setting the `size` property to the [name of a `size.$icon` token](/docs/design-tokens-size--page), such as `large`, the icon will be scaled to the appropriate size. + + + + {(args) => iconStory(args)} + + + {(args) => iconStory(args)} + + {(args) => iconStory(args)} diff --git a/src/components/icon/icon.twig b/src/components/icon/icon.twig index 68b7c9a85..d93be90a5 100644 --- a/src/components/icon/icon.twig +++ b/src/components/icon/icon.twig @@ -11,6 +11,14 @@ {% set _class = _class ~ ' c-icon--inline' %} {% endif %} +{% if size %} + {% set _class = _class ~ ' c-icon--' ~ size %} +{% endif %} + +{% if muted %} + {% set _class = _class ~ ' c-icon--muted' %} +{% endif %} + {% if class %} {% set _class = _class ~ ' ' ~ class %} {% endif %} diff --git a/src/prototypes/no-content/example/example.scss b/src/prototypes/no-content/example/example.scss deleted file mode 100644 index e604e30f6..000000000 --- a/src/prototypes/no-content/example/example.scss +++ /dev/null @@ -1,13 +0,0 @@ -@use "../../../compiled/tokens/scss/color"; -@use "../../../mixins/ms"; - -#no-content { - .large-icon { - color: #{color.$base-gray-light}; - font-size: ms.step(5); - } - - .u-text-center { - text-align: center; - } -} diff --git a/src/prototypes/no-content/example/example.twig b/src/prototypes/no-content/example/example.twig index 33f11034b..06b342988 100644 --- a/src/prototypes/no-content/example/example.twig +++ b/src/prototypes/no-content/example/example.twig @@ -44,7 +44,7 @@ {% block content %} {% include '@cloudfour/components/icon/icon.twig' with { name: 'magnifying-glass', - class: 'large-icon' + class: 'c-icon--x-large c-icon--muted' } %} {% include '@cloudfour/components/heading/heading.twig' with { "level": 2, diff --git a/src/prototypes/no-content/no-content.stories.js b/src/prototypes/no-content/no-content.stories.js index 35aa8b940..456ce3bdd 100644 --- a/src/prototypes/no-content/no-content.stories.js +++ b/src/prototypes/no-content/no-content.stories.js @@ -1,5 +1,4 @@ import examplePrototype from './example/example.twig'; -import './example/example.scss'; export default { title: 'Prototypes/No Content', diff --git a/src/tokens/size/sizing.js b/src/tokens/size/sizing.js index 9d5c9ad81..fd9a059ce 100644 --- a/src/tokens/size/sizing.js +++ b/src/tokens/size/sizing.js @@ -21,6 +21,10 @@ module.exports = { value: modularEm(2), comment: 'The large icon size.', }, + 'x-large': { + value: modularEm(5), + comment: 'The x-large icon size.', + }, }, width: { card_column: { From 67d425e169aa0dd714780f263d07586c4326aadd Mon Sep 17 00:00:00 2001 From: Scott Vandehey Date: Thu, 14 Jul 2022 13:36:08 -0700 Subject: [PATCH 2/5] Create chilled-frogs-lick.md --- .changeset/chilled-frogs-lick.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/chilled-frogs-lick.md diff --git a/.changeset/chilled-frogs-lick.md b/.changeset/chilled-frogs-lick.md new file mode 100644 index 000000000..d48d57d61 --- /dev/null +++ b/.changeset/chilled-frogs-lick.md @@ -0,0 +1,5 @@ +--- +"@cloudfour/patterns": minor +--- + +Add `size` and `muted` props to Icon From 4880df0b39ba0b6fe945e656d4b59c0e4d387e9a Mon Sep 17 00:00:00 2001 From: Scott Vandehey Date: Thu, 14 Jul 2022 15:59:52 -0700 Subject: [PATCH 3/5] Update src/components/icon/icon.stories.mdx Co-authored-by: Gerardo Rodriguez --- src/components/icon/icon.stories.mdx | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/components/icon/icon.stories.mdx b/src/components/icon/icon.stories.mdx index 0c14bfe2c..0767e71b3 100644 --- a/src/components/icon/icon.stories.mdx +++ b/src/components/icon/icon.stories.mdx @@ -21,15 +21,16 @@ const iconStory = (args) => { return template(args); }; const defaultArgs = { - name: { type: { name: 'string' } }, - fallback: { type: { name: 'string' } }, - inline: { type: { name: 'boolean' } }, - class: { type: { name: 'string' } }, - title: { type: { name: 'string' } }, - muted: { type: { name: 'boolean' } }, - size: { type: { name: 'string' } }, + name: { type: 'string' }, + fallback: { type: 'string' }, + inline: { type: 'boolean' }, + class: { type: 'string' }, + title: { type: 'string' }, + muted: { type: 'boolean' }, + size: { type: 'string' }, }; + # Icon From cd2e8288df6729804d8881411e0dc9660a17b474 Mon Sep 17 00:00:00 2001 From: Scott Vandehey Date: Thu, 14 Jul 2022 16:01:45 -0700 Subject: [PATCH 4/5] document props --- src/components/icon/icon.stories.mdx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/icon/icon.stories.mdx b/src/components/icon/icon.stories.mdx index 0767e71b3..3dec69b7f 100644 --- a/src/components/icon/icon.stories.mdx +++ b/src/components/icon/icon.stories.mdx @@ -146,6 +146,8 @@ The component template supports the following unique properties: - `inline`: When `true`, the inline modifier will be applied. - `name`: The name of the intended icon [in our library](/docs/design-icons--page). - `title`: If provided, a `title` element will be prepended to the icon source with the contents of this property. This will also set the `role` to `img` unless it is already specified. ([More info](https://css-tricks.com/accessible-svgs/#aa-example-1-standalone-icon-meaningful)) +- `muted`: When `true`, the icon will be displayed in a muted color. +- `size`: The size to display the icon, taken from the `size.$icon` tokens. Additional SVG properties will be passed to the Twig template for the asset itself: From dd41aca219d2293effce26fc198a6aa20b4eb7ce Mon Sep 17 00:00:00 2001 From: Scott Vandehey Date: Thu, 14 Jul 2022 16:06:26 -0700 Subject: [PATCH 5/5] lint fix --- src/components/icon/icon.stories.mdx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/icon/icon.stories.mdx b/src/components/icon/icon.stories.mdx index 3dec69b7f..313323fb0 100644 --- a/src/components/icon/icon.stories.mdx +++ b/src/components/icon/icon.stories.mdx @@ -30,7 +30,6 @@ const defaultArgs = { size: { type: 'string' }, }; - # Icon