Quickfix: Add disabled button styles to the button in the design syst…

…em (#329)

* Add disabled button styles to the button in the design system

* add changeset

* comment that should have been removed

.changeset/happy-moles-play.md

@@ -0,0 +1,5 @@
+---
+'@qualifyze/design-system': patch
+---
+
+Add disabled button styles to the ds

src/components/Button/index.jsx

@@ -21,6 +21,12 @@ const Base = styled('button')(
       outline: 'none',
       boxShadow: props.theme.shadows.focusRing,
     },
+    '&:disabled': {
+      // these are important to stop variants overriding them
+      backgroundColor: `${props.theme.colors.grey[200]} !important;`,
+      color: `${props.theme.colors.grey[500]} !important;`,
+      cursor: 'not-allowed',
+    },
   }),
   variant({
     prop: 'variant',

src/components/Button/index.stories.jsx

@@ -32,6 +32,24 @@ Default.story = {
   name: 'default',
 }
 
+export const Disabled = () => {
+  const variant = select(
+    'Variant',
+    ['primary', 'secondary', 'danger'],
+    'primary'
+  )
+  return (
+    <Inline>
+      <Button disabled variant={variant} onClick={action('Button clicked')}>
+        Cant touch this
+      </Button>
+    </Inline>
+  )
+}
+Disabled.story = {
+  name: 'disabled',
+}
+
 function simulateNetworkRequest() {
   return new Promise(resolve => setTimeout(resolve, 3000))
 }