Some feedback resolutions

Amsterdam · Feb 7, 2024 · f69cd3e · f69cd3e
1 parent 05288f0
commit f69cd3e
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 12 deletions.
diff --git a/packages/css/src/components/button/button.scss b/packages/css/src/components/button/button.scss
@@ -3,7 +3,7 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@mixin amsterdam-button {
+.amsterdam-button {
   border: none;
   cursor: var(--amsterdam-action-activate-cursor);
   display: inline-flex;
@@ -21,14 +21,14 @@
     line-height: var(--amsterdam-breadcrumb-compact-line-height);
   }
 
+  &:hover {
+    cursor: var(--amsterdam-action-activate-cursor);
+  }
+
   &:disabled,
   &[aria-disabled="true"] {
     cursor: var(--amsterdam-action-disabled-cursor);
   }
-
-  &:hover:not(:disabled, [aria-disabled="true"]) {
-    cursor: var(--amsterdam-action-activate-cursor);
-  }
 }
 
 @mixin amsterdam-button-forced-color-mode {
@@ -37,24 +37,26 @@
   }
 }
 
-.amsterdam-button--busy {
+.amsterdam-button--busy:hover {
   cursor: var(--amsterdam-action-busy-cursor);
 }
 
 .amsterdam-button--primary {
   background-color: var(--amsterdam-button-primary-background-color);
+  box-shadow: var(--amsterdam-button-primary-box-shadow);
   color: var(--amsterdam-button-primary-color);
 
   &:disabled,
   [aria-disabled="true"] {
     background-color: var(--amsterdam-button-primary-disabled-background-color);
+    box-shadow: var(--amsterdam-button-primary-disabled-box-shadow);
   }
 
   &:hover:not(:disabled, [aria-disabled="true"]) {
     background-color: var(--amsterdam-button-primary-hover-background-color);
+    box-shadow: var(--amsterdam-button-primary-hover-box-shadow);
   }
 
-  @include amsterdam-button;
   @include amsterdam-button-forced-color-mode;
 }
 
@@ -75,7 +77,6 @@
     color: var(--amsterdam-button-secondary-hover-color);
   }
 
-  @include amsterdam-button;
   @include amsterdam-button-forced-color-mode;
 }
 
@@ -93,6 +94,4 @@
     box-shadow: var(--amsterdam-button-tertiary-hover-box-shadow);
     color: var(--amsterdam-button-tertiary-hover-color);
   }
-
-  @include amsterdam-button;
 }
diff --git a/proprietary/tokens/src/components/amsterdam/button.tokens.json b/proprietary/tokens/src/components/amsterdam/button.tokens.json
@@ -18,12 +18,15 @@
       },
       "primary": {
         "background-color": { "value": "{amsterdam.color.primary-blue}" },
+        "box-shadow": { "value": "inset 0 0 0 2px {amsterdam.color.primary-blue}" },
         "color": { "value": "{amsterdam.color.primary-white}" },
         "disabled": {
-          "background-color": { "value": "{amsterdam.color.neutral-grey2}" }
+          "background-color": { "value": "{amsterdam.color.neutral-grey2}" },
+          "box-shadow": { "value": "inset 0 0 0 2px {amsterdam.color.neutral-grey2}" }
         },
         "hover": {
-          "background-color": { "value": "{amsterdam.color.dark-blue}" }
+          "background-color": { "value": "{amsterdam.color.dark-blue}" },
+          "box-shadow": { "value": "inset 0 0 0 2px {amsterdam.color.dark-blue}" }
         }
       },
       "secondary": {

diff --git a/storybook/storybook-react/src/Button/Button.docs.mdx b/storybook/storybook-react/src/Button/Button.docs.mdx
@@ -60,3 +60,17 @@ Use tertiary buttons for unimportant calls to action – as many as necessary.
 ### Tertiary
 
 <Canvas of={ButtonStories.TertiaryDisabled} />
+
+## Busy
+
+### Primary
+
+<Canvas of={ButtonStories.PrimaryBusy} />
+
+### Secondary
+
+<Canvas of={ButtonStories.SecondaryBusy} />
+
+### Tertiary
+
+<Canvas of={ButtonStories.TertiaryBusy} />
diff --git a/storybook/storybook-react/src/Button/Button.stories.tsx b/storybook/storybook-react/src/Button/Button.stories.tsx
@@ -108,3 +108,26 @@ export const TertiaryDisabled: Story = {
     variant: 'tertiary',
   },
 }
+
+export const PrimaryBusy: Story = {
+  args: {
+    children: 'Primary',
+    busy: true,
+  },
+}
+
+export const SecondaryBusy: Story = {
+  args: {
+    children: 'Secondary',
+    busy: true,
+    variant: 'secondary',
+  },
+}
+
+export const TertiaryBusy: Story = {
+  args: {
+    children: 'Tertiary',
+    busy: true,
+    variant: 'tertiary',
+  },
+}