fix(Button): role related styles (#21)

pure-js · Oct 18, 2023 · c994f2d · c994f2d
1 parent 8abbdea
commit c994f2d
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 39 deletions.
diff --git a/src/components/button/Button.stories.ts b/src/components/button/Button.stories.ts
@@ -12,10 +12,6 @@ const meta = {
   },
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
   tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
 } satisfies Meta<typeof Button>;
 
 export default meta;
@@ -49,10 +45,9 @@ export const Small: Story = {
   },
 };
 
-export const Warning: Story = {
+export const Disabled: Story = {
   args: {
-    primary: true,
-    label: 'Delete now',
-    backgroundColor: 'red',
+    label: 'Disabled button',
+    isDisabled: true,
   },
 };
diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx
@@ -5,10 +5,6 @@ interface ButtonProps {
    * Is this the principal call to action on the page?
    */
   primary?: boolean;
-  /**
-   * What background color to use
-   */
-  backgroundColor?: string;
   /**
    * How large should the button be?
    */
@@ -17,6 +13,8 @@ interface ButtonProps {
    * Button contents
    */
   label: string;
+  isDisabled?: boolean;
+  className?: string;
   /**
    * Optional click handler
    */
@@ -29,20 +27,19 @@ interface ButtonProps {
 export const Button = ({
   primary = false,
   size = 'medium',
-  backgroundColor,
   label,
+  isDisabled,
+  className,
   ...props
 }: ButtonProps) => {
-  const mode = primary
-    ? 'storybook-button--primary'
-    : 'storybook-button--secondary';
+  const mode = primary ? classes['btn--primary'] : classes['btn--secondary'];
   return (
     <button
       type="button"
-      className={[classes.btn, classes[`storybook-button--${size}`], mode].join(
+      className={[className, classes.btn, classes[`btn--${size}`], mode].join(
         ' ',
       )}
-      style={{ backgroundColor }}
+      disabled={isDisabled}
       {...props}
     >
       {label}

diff --git a/src/components/button/button.module.scss b/src/components/button/button.module.scss
@@ -6,26 +6,32 @@
   width: 100%;
   font-weight: 700;
   font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-}
 
-.storybook-button--primary {
-  background-color: #1ea7fd;
-  color: white;
-}
-.storybook-button--secondary {
-  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
-  background-color: transparent;
-  color: #333;
-}
-.storybook-button--small {
-  padding: 10px 16px;
-  font-size: 12px;
-}
-.storybook-button--medium {
-  padding: 11px 20px;
-  font-size: 14px;
-}
-.storybook-button--large {
-  padding: 12px 24px;
-  font-size: 16px;
+  &:disabled {
+    filter: invert(75%);
+    cursor: not-allowed;
+  }
+
+  &--primary {
+    background-color: #1ea7fd;
+    color: white;
+  }
+  &--secondary {
+    box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+    background-color: transparent;
+    color: #333;
+  }
+
+  &--small {
+    padding: 10px 16px;
+    font-size: 12px;
+  }
+  &--medium {
+    padding: 11px 20px;
+    font-size: 14px;
+  }
+  &--large {
+    padding: 12px 24px;
+    font-size: 16px;
+  }
 }