Add size and muted props to Icon (#1951)

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.

Author: spaceninja

.changeset/chilled-frogs-lick.md

@@ -0,0 +1,5 @@
+---
+"@cloudfour/patterns": minor
+---
+
+Add `size` and `muted` props to Icon

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};
+}

src/components/icon/icon.stories.mdx

@@ -20,6 +20,15 @@ const iconStory = (args) => {
   }
   return template(args);
 };
+const defaultArgs = {
+  name: { type: 'string' },
+  fallback: { type: 'string' },
+  inline: { type: 'boolean' },
+  class: { type: 'string' },
+  title: { type: 'string' },
+  muted: { type: 'boolean' },
+  size: { type: 'string' },
+};
 
 <Meta title="Components/Icon" />
 
@@ -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)}
+  </Story>
+</Canvas>
+
+## Muted
+
+By setting the `muted` property to `true`, the icon will become slightly opaque.
+
+<Canvas>
+  <Story
+    name="Muted"
+    args={{
+      name: 'heart',
+      inline: false,
+      muted: true,
+    }}
+    argTypes={defaultArgs}
+  >
+    {(args) => iconStory(args)}
+  </Story>
+</Canvas>
+
+## 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.
+
+<Canvas>
+  <Story
+    name="Medium Size"
+    args={{
+      name: 'heart',
+      size: 'medium',
+    }}
+    argTypes={defaultArgs}
+  >
+    {(args) => iconStory(args)}
+  </Story>
+  <Story
+    name="Large Size"
+    args={{
+      name: 'heart',
+      size: 'large',
+    }}
+    argTypes={defaultArgs}
+  >
+    {(args) => iconStory(args)}
+  </Story>
+  <Story
+    name="X-Large Size"
+    args={{
+      name: 'heart',
+      size: 'x-large',
     }}
+    argTypes={defaultArgs}
   >
     {(args) => iconStory(args)}
   </Story>
@@ -87,6 +145,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:
 

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 %}

src/prototypes/no-content/example/example.scss

@@ -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,

src/prototypes/no-content/example/example.twig

@@ -1,5 +1,4 @@
 import examplePrototype from './example/example.twig';
-import './example/example.scss';
 
 export default {
   title: 'Prototypes/No Content',

src/prototypes/no-content/no-content.stories.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: {