feat: active state for button component

nl-design-system · Sep 19, 2021 · 09283e0 · 09283e0
1 parent 26c7061
commit 09283e0
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 2 deletions.
diff --git a/components/button/bem.js b/components/button/bem.js
@@ -7,6 +7,7 @@
 import clsx from 'clsx';
 
 export const defaultArgs = {
+  active: false,
   busy: false,
   disabled: false,
   focus: false,
@@ -16,14 +17,16 @@ export const defaultArgs = {
 };
 
 export const Button = ({
-  textContent = '',
+  active = false,
   busy = false,
+  disabled = false,
   focus = false,
   hover = false,
-  disabled = false,
+  textContent = '',
   type = 'button',
 }) =>
   `<button class="${clsx('utrecht-button', {
+    'utrecht-button--active': active,
     'utrecht-button--busy': busy,
     'utrecht-button--hover': hover,
     'utrecht-button--focus': focus,

diff --git a/components/button/bem.scss b/components/button/bem.scss
@@ -46,6 +46,12 @@
   cursor: var(--utrecht-action-disabled-cursor);
 }
 
+.utrecht-button:active,
+.utrecht-button--active {
+  background-color: var(--utrecht-button-active-background-color, var(--utrecht-button-background-color));
+  color: var(--utrecht-button-active-color, var(--utrecht-button-color));
+}
+
 .utrecht-button--focus,
 .utrecht-button:not(.utrecht-button--disabled):focus {
   @include utrecht-focus;

diff --git a/components/button/bem.stories.mdx b/components/button/bem.stories.mdx
@@ -63,6 +63,22 @@ Styling via the `.utrecht-button` class name:
 
 ## States
 
+### Active
+
+Styling via the `.utrecht-button--active` class name:
+
+<Canvas>
+  <Story
+    name="Button active"
+    args={{
+      active: true,
+      textContent: "Read more...",
+    }}
+  >
+    {Button.bind({})}
+  </Story>
+</Canvas>
+
 ### Hover
 
 Styling via the `.utrecht-button--hover` class name:

diff --git a/components/button/modifier.tokens.json b/components/button/modifier.tokens.json
@@ -1,6 +1,20 @@
 {
   "utrecht": {
     "button": {
+      "active": {
+        "background-color": {
+          "css": {
+            "syntax": "<color>",
+            "inherits": true
+          }
+        },
+        "color": {
+          "css": {
+            "syntax": "<color>",
+            "inherits": true
+          }
+        }
+      },
       "disabled": {
         "color": {
           "css": {