Introduce Button 'is-slashed' CSS state class, remove aria-pressed logic

.changeset/famous-peaches-punch.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Introduce `is-slashed` CSS state class, remove `aria-pressed` logic

src/components/button/button.stories.mdx

@@ -12,6 +12,9 @@ import stylesDemo from './demo/styles.twig';
 // eslint-disable-next-line @cloudfour/import/no-webpack-loader-syntax
 import iconButtonCustomDemoSource from '!!raw-loader!./demo/icon-button-custom-demo.twig';
 import iconButtonCustomDemo from './demo/icon-button-custom-demo.twig';
+// eslint-disable-next-line @cloudfour/import/no-webpack-loader-syntax
+import slashedIconButtonCustomDemoSource from '!!raw-loader!./demo/slashed-icon-button-custom-demo.twig';
+import slashedIconButtonCustomDemo from './demo/slashed-icon-button-custom-demo.twig';
 import button from './button.twig';
 const iconControlConfig = {
   type: { name: 'string' },
@@ -57,10 +60,6 @@ const buttonStory = (args) => {
     disabled: { type: { name: 'boolean' }, defaultValue: false },
     content_start_icon: iconControlConfig,
     content_end_icon: iconControlConfig,
-    aria_pressed: {
-      type: { name: 'enum' },
-      control: { type: 'inline-radio', options: ['true', 'false'] },
-    },
   }}
 />
 
@@ -142,48 +141,52 @@ The `content_start`/`content_end` blocks override the
   </Story>
 </Canvas>
 
-## Toggling button
+## Icon with slash
 
-Pass an `aria_pressed` value (`'true'` or `'false'`) to enable a toggling button. If no `content_start_icon`/`content_end_icon` or `content_start`/`content_end` block content is passed in, the `'bell'` icon will be used by default as the `content_start_icon` value.
+To add a slash across the icon(s), use the `is-slashed` state modifier CSS class.
+
+If no `content_start_icon`/`content_end_icon` or `content_start`/`content_end` block content is passed in, the `'bell'` icon will be used by default as the `content_start_icon` value.
 
 You can override the `content_start_icon` value to a different icon.
 
 <Canvas>
   <Story
-    name="Toggling Button"
+    name="Slashed Icon"
     args={{
-      aria_pressed: 'true',
+      class: 'is-slashed',
     }}
   >
     {(args) => buttonStory(args)}
   </Story>
   <Story
-    name="Secondary Toggling Button"
+    name="Secondary Button with Slashed Icon"
     args={{
-      class: 'c-button--secondary',
-      aria_pressed: 'true',
+      class: 'c-button--secondary is-slashed',
     }}
   >
     {(args) => buttonStory(args)}
   </Story>
   <Story
-    name="Tertiary Toggling Button"
+    name="Tertiary Button with Slashed Icon"
     args={{
-      class: 'c-button--tertiary',
-      aria_pressed: 'true',
+      class: 'c-button--tertiary is-slashed',
     }}
   >
     {(args) => buttonStory(args)}
   </Story>
-  <Story name="Custom Icon Toggling Button" args={{ aria_pressed: 'true' }}>
-    {(args) => iconButtonCustomDemo(args)}
+  <Story
+    name="Slashed Custom Icon"
+    parameters={{
+      docs: { source: { code: slashedIconButtonCustomDemoSource } },
+    }}
+  >
+    {(args) => slashedIconButtonCustomDemo(args)}
   </Story>
 </Canvas>
 
 ## Template Properties
 
 - `aria_expanded` (string, `'true'`/`'false'`): Sets the button's `aria-expanded` attribute.
-- `aria_pressed` (string, `'true'`/`'false'`): Sets the button's `aria-pressed` attribute.
 - `class` (string): Append a class to the root element.
 - `content_start_icon` (string): The name of the [icon](/docs/design-icons--page) to render in the `content_start` block.
 - `content_end_icon` (string): The name of the [icon](/docs/design-icons--page) to render in the `content_end` block.

src/components/button/button.twig

@@ -1,12 +1,10 @@
 {% set tag_name = tag_name|default(href ? 'a' : 'button') %}
-{# aria_pressed only accepts 'true' or 'false' (string) values #}
-{% set is_aria_pressed_valid = aria_pressed == 'true' or aria_pressed == 'false' %}
 {# Check for 'content_start' and 'content_end' content #}
 {% set _content_start = block('content_start') %}
 {% set _content_end = block('content_end') %}
-{# Set a default icon if aria-pressed is set and no icon (or block content) was supplied #}
+{# Set a default icon if `is-slashed` exists and no icon (or block content) was supplied #}
 {% if
-  is_aria_pressed_valid and
+  'is-slashed' in class and
   content_start_icon is empty and
   content_end_icon is empty and
   _content_start|trim is empty and
@@ -20,9 +18,6 @@
   {% if aria_expanded %}
     aria-expanded="{{ aria_expanded }}"
   {% endif %}
-  {% if is_aria_pressed_valid %}
-    aria-pressed="{{ aria_pressed }}"
-  {% endif %}
   {% if tag_name == 'a' %}
     href="{{ href|default('#') }}"
   {% elseif tag_name == 'button' %}

src/components/button/demo/icon-button-custom-demo.twig

@@ -1,4 +1,4 @@
-{% embed '@cloudfour/components/button/button.twig' %}
+{% embed '@cloudfour/components/button/button.twig' only %}
   {% block content %}Button with a custom icon{% endblock %}
   {% block content_end %}
     <svg viewBox="0 0 24 24" width="24" height="24" class="c-icon">

src/components/button/demo/slashed-icon-button-custom-demo.twig

@@ -0,0 +1,10 @@
+{% embed '@cloudfour/components/button/button.twig' with {
+  class: 'is-slashed'
+} only %}
+  {% block content %}Button with a custom icon{% endblock %}
+  {% block content_end %}
+    <svg viewBox="0 0 24 24" width="24" height="24" class="c-icon">
+      <circle r="8" cx="12" cy="12"></circle>
+    </svg>
+  {% endblock %}
+{% endembed %}

src/mixins/_button.scss

@@ -109,11 +109,9 @@
   }
 
   /**
-   * Toggling button
-   * This adds a slash across the icon to visually show the state has changed
-   * when `aria-pressed` is `'true'`.
+   * Adds a slash across the "extra" content (most times "extra" content is an icon).
    */
-  &[aria-pressed='true'] {
+  &.is-slashed {
     .c-button__extra {
       &::after {
         background: currentColor;