Add disabled state

Amsterdam · Jan 10, 2024 · 698549f · 698549f
1 parent f9d322e
commit 698549f
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 2 deletions.
diff --git a/packages/css/src/components/icon-button/icon-button.scss b/packages/css/src/components/icon-button/icon-button.scss
@@ -4,7 +4,7 @@
  */
 
 .amsterdam-icon-button {
-  background-color: var(--amsterdam-icon-button-background-color);
+  background-color: transparent;
   border: 0;
   color: var(--amsterdam-icon-button-color);
   cursor: pointer;
@@ -17,6 +17,12 @@
     background-color: var(--amsterdam-icon-button-hover-background-color);
     color: var(--amsterdam-icon-button-hover-color);
   }
+
+  &:disabled {
+    background-color: transparent;
+    color: var(--amsterdam-icon-button-disabled-color);
+    cursor: not-allowed;
+  }
 }
 
 .amsterdam-icon-button--on-background-light {
@@ -26,6 +32,11 @@
     background-color: var(--amsterdam-icon-button-on-background-light-hover-background-color);
     color: var(--amsterdam-icon-button-on-background-light-hover-color);
   }
+
+  &:disabled {
+    background-color: transparent;
+    color: var(--amsterdam-icon-button-on-background-light-disabled-color);
+  }
 }
 
 .amsterdam-icon-button--on-background-dark {
@@ -36,4 +47,9 @@
     background-color: var(--amsterdam-icon-button-on-background-dark-hover-background-color);
     color: var(--amsterdam-icon-button-on-background-dark-hover-color);
   }
+
+  &:disabled {
+    background-color: var(--amsterdam-icon-button-on-background-dark-disabled-background-color);
+    color: var(--amsterdam-icon-button-on-background-dark-disabled-color);
+  }
 }
diff --git a/proprietary/tokens/src/components/amsterdam/icon-button.tokens.json b/proprietary/tokens/src/components/amsterdam/icon-button.tokens.json
@@ -1,18 +1,23 @@
 {
   "amsterdam": {
     "icon-button": {
-      "background-color": { "value": "transparent" },
       "color": { "value": "{amsterdam.color.primary-blue}" },
       "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
       "hover": {
         "background-color": { "value": "rgba(0, 70, 153, 0.125)" },
         "color": { "value": "{amsterdam.color.dark-blue}" }
       },
+      "disabled": {
+        "color": { "value": "{amsterdam.color.neutral-grey2}" }
+      },
       "on-background-light": {
         "color": { "value": "{amsterdam.color.primary-black}" },
         "hover": {
           "background-color": { "value": "rgba(0, 0, 0, 0.125)" },
           "color": { "value": "{amsterdam.color.primary-black}" }
+        },
+        "disabled": {
+          "color": { "value": "{amsterdam.color.neutral-grey2}" }
         }
       },
       "on-background-dark": {
@@ -21,6 +26,10 @@
         "hover": {
           "background-color": { "value": "{amsterdam.color.dark-blue}" },
           "color": { "value": "{amsterdam.color.primary-white}" }
+        },
+        "disabled": {
+          "color": { "value": "{amsterdam.color.primary-white}" },
+          "background-color": { "value": "{amsterdam.color.neutral-grey2}" }
         }
       }
     }

diff --git a/storybook/storybook-react/src/IconButton/IconButton.stories.tsx b/storybook/storybook-react/src/IconButton/IconButton.stories.tsx
@@ -14,6 +14,9 @@ const meta = {
     label: 'Sluiten',
   },
   argTypes: {
+    disabled: {
+      control: 'boolean',
+    },
     onBackground: {
       control: {
         type: 'radio',