feat(button): added storybook for button

Author: codebender828

src/App.vue

@@ -9,11 +9,11 @@
       align-items="center"
       bg="gray.50"
     >
-      <Button @click="alert" mx="3" disabled variant-color="green">Solid</Button>
-      <Button variant="outline" mx="3" variant-color="green">Outlined</Button>
-      <Button variant="ghost" mx="3" variant-color="green">Ghost</Button>
-      <Button variant="flat" mx="3" variant-color="green">Flat</Button>
-      <Button variant="link" mx="3" variant-color="green">Link</Button>
+      <Button mx="3" variant-color="blue">Solid</Button>
+      <Button variant="outline" mx="3" variant-color="blue">Outlined</Button>
+      <Button variant="ghost" mx="3" variant-color="blue">Ghost</Button>
+      <Button variant="flat" mx="3" variant-color="blue">Flat</Button>
+      <Button variant="link" mx="3" variant-color="blue">Link</Button>
     </Box>
   </theme-provider>
 </template>

src/components/Box/index.js

@@ -36,7 +36,6 @@ const clamp = props => {
 }
 
 const decorate = props => {
-  console.log({ textDecoration: props.textDecoration, textDecor: props.textDecor })
   if (props.textDecoration || props.textDecor) {
     return {
       'text-decoration': `${props.textDecoration || props.textDecor}`
@@ -70,7 +69,6 @@ const Box = styled('div', {
   ...baseProps
 })`
   ${props => {
-    console.log(props)
     const sanitizedProps = cleanProps(props)
     return system(sanitizedProps)
   }}

src/components/Button/button.styles.js

@@ -13,6 +13,47 @@ const baseStyles = {
   outline: 'none'
 }
 
+/**
+ * @description Determine whether button should ripple
+ * @param {Object} props - Props object
+ * @returns {Object} Ripple styles object
+ */
+const ripple = (props) => {
+  console.log(props)
+  if (props.ripple) {
+    return {
+      position: 'relative',
+      overflow: 'hidden',
+      transform: 'translate3d(0, 0, 0)',
+      _after: {
+        content: '',
+        display: 'block',
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+        top: '0',
+        left: '0',
+        pointerEvents: 'none',
+        backgroundImage: 'radial-gradient(circle, rgb(255, 255, 255) 10%, transparent 10.01%)',
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: '50%',
+        transform: 'scale(10, 10)',
+        opacity: '0',
+        transition: 'transform .5s, opacity 1s'
+      },
+      _active: {
+        _after: {
+          transform: 'scale(0, 0)',
+          opacity: '.2',
+          transition: '0s'
+        }
+      }
+    }
+  } else {
+    return {}
+  }
+}
+
 /**
  * Size values
  */
@@ -223,7 +264,8 @@ const createButtonStyles = (props) => {
     ...baseStyles,
     ...focusStyles,
     ...sizeProps(props),
-    ...getVariantStyles(props)
+    ...getVariantStyles(props),
+    ...ripple(props)
   }
 }
 

src/components/Button/index.js

@@ -68,7 +68,7 @@ export default {
       default: false
     },
     ripple: {
-      type: Boolean,
+      type: [String, Boolean],
       default: true
     },
     ...styleProps
@@ -78,6 +78,7 @@ export default {
       color: this.variantColor || this.cast,
       variant: this.variant,
       theme: this.$theme,
+      ripple: this.ripple,
       colorMode: this.$colorMode,
       size: this.size || 'md'
     })

stories/1-Box.stories.js

@@ -7,18 +7,21 @@ storiesOf('UI | Box', module)
   .add('Box', () => ({
     components: { Box },
     template: `
-      <Box
-        :w="['auto']"
-        px="5"
-        py="5"
-        shadow="lg"
-        my="5"
-        mb="5"
-        rounded="sm"
-        background-color="blue.200"
-        color="blue.700"
-      >
-        This is box component
-      </Box>
+      <div>
+        <Box
+          :w="['auto']"
+          px="5"
+          py="5"
+          shadow="lg"
+          my="5"
+          mb="5"
+          rounded="sm"
+          font-family="body"
+          background-color="blue.200"
+          color="blue.700"
+        >
+          This is box component
+        </Box>
+      </div>
     `
   }))

stories/3-Button.stories.js

@@ -5,7 +5,20 @@ import Button from '../src/components/Button'
 
 storiesOf('UI | Button', module)
   .addDecorator(centered)
-  .add('Primary', () => ({
+  .add('Unstyled', () => ({
+    components: { Button },
+    template: `
+      <div>
+        <Button @click="action">Solid</Button>
+        <Button variant="outline" @click="action">Outlined</Button>
+        <Button variant="ghost" @click="action">Ghost</Button>
+        <Button variant="flat" @click="action">Flat</Button>
+        <Button variant="link" @click="action">Link</Button>
+      </div>
+    `,
+    methods: { action: action('Button Clicked') }
+  }))
+  .add('Variant Colors | Blue', () => ({
     components: { Button },
     template: `
       <div>
@@ -16,5 +29,38 @@ storiesOf('UI | Button', module)
         <Button variant="link" variant-color="blue" @click="action">Link</Button>
       </div>
     `,
-    methods: { action: action('clicked') }
+    methods: { action: action('Button Clicked') }
+  }))
+  .add('Sizes', () => ({
+    components: { Button },
+    template: `
+      <div>
+        <Button @click="action" variant-color="blue" size="lg">Large</Button>
+        <Button variant-color="blue" size="md" @click="action">Medium</Button>
+        <Button variant-color="blue" size="sm" @click="action">Small</Button>
+      </div>
+    `,
+    methods: { action: action('Button Clicked') }
+  }))
+  .add('Rounded', () => ({
+    components: { Button },
+    template: `
+      <div>
+        <Button @click="action" rounded="none" variant-color="indigo">No rounded</Button>
+        <Button @click="action" rounded="sm" variant-color="indigo">Small rounded</Button>
+        <Button @click="action" rounded="md" variant-color="indigo">Medium rounded</Button>
+        <Button @click="action" rounded="lg" variant-color="indigo">Large rounded</Button>
+        <Button @click="action" rounded="full" variant-color="indigo">Full rounded</Button>
+      </div>
+    `,
+    methods: { action: action('Button Clicked') }
+  }))
+  .add('Ripple', () => ({
+    components: { Button },
+    template: `
+      <div>
+        <Button @click="action" ripple variant-color="orange">No rounded</Button>
+      </div>
+    `,
+    methods: { action: action('Button Clicked') }
   }))