fix(button): update button component, docs, and story

.storybook/main.js

@@ -1,4 +1,8 @@
 module.exports = {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  addons: [
+    '@storybook/addon-controls',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+  ],
 };

.storybook/preview.js

@@ -1,4 +1,4 @@
-
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-}
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: { expanded: true },
+};

CHANGELOG.md

@@ -2,6 +2,28 @@
 
 `Camara` strictly follows [semantic versioning](https://semver.org/)
 
+## v1.0.0-beta.9 (Sat Mar 27, 2021)
+
+A change has been made to how the project gets updated. Going forward every new `beta` version is going to focus solely on a single component and try to improve on the component across its Storybook stories, docs, test, and real-world usage. This way we can move incrementally while knowing that we are thinking about each component in a comprehensive manner.
+
+- `Button` component:
+  - ❌ remove `primary` prop option for setting the type of button.
+  - 🆕 `variant` prop is now used for setting the type of button from `primary`, `secondary` or `ghost`.
+  - ✨ `size` prop now updated with `large`, `small` and `medium` options.
+  - 🆕 `block` prop sets the option to fit button width to the full width of the parent
+  - 🆕 `loading` prop add a loading spinner indicator to be used when users have to wait for the result of their action after pressing a button.
+  - 🆕 `disabled` prop adds a visual indicator that a button is not interactive and restricts it from being pressed.
+  - 🆕 `danger` prop adds a visual indicator that the button action is destructive and irreversible in some case
+  - ❌ remove `orientation` prop.
+  - ✨ rename `rounded` prop to `pill` to accurately describe the button shape
+  - ✨ hover, active and focused state has been improved.
+
+### Authors: 1
+
+- ᑭᖇᗴᔕᕼ ᗝᑎƳᗴᗴ ([@Preshonyee](https://github.com/Preshonyee))
+
+---
+
 ## v1.0.0-beta.8 (Thur Feb 04, 2021)
 
 - minor package update

docs/pages/docs/components/button.mdx

@@ -56,3 +56,11 @@ render(
   </Button>
 );
 ```
+
+## API
+
+Button properties
+
+| Property | Description                          | Type      | Default | Version |
+| -------- | ------------------------------------ | --------- | ------- | ------- |
+| loading  | Set the loading status of the button | `boolean` | false   |         |

package.json

@@ -49,6 +49,7 @@
     "@rollup/plugin-commonjs": "^17.1.0",
     "@rollup/plugin-node-resolve": "^11.1.1",
     "@storybook/addon-actions": "^6.0.27",
+    "@storybook/addon-controls": "^6.1.21",
     "@storybook/addon-essentials": "^6.0.27",
     "@storybook/addon-links": "^6.0.27",
     "@storybook/react": "^6.1.16",

src/components/button/button.stories.tsx

@@ -1,68 +1,152 @@
 import React from 'react';
-import { Button } from '.';
+import { Story, Meta } from '@storybook/react/types-6-0';
+import { Box, Flex } from '../layout';
 
-export default {
-  title: 'Button',
-};
+import { Button, ButtonProps } from '.';
 
-// variants
-export const Primary = () => <Button variant='primary'>Primary</Button>;
-
-export const Secondary = () => <Button variant='secondary'> Secondary</Button>;
+export default {
+  title: 'Components/Button',
+  component: Button,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+    color: { control: 'color' },
+    children: { control: 'text' },
+  },
+} as Meta;
 
-export const Ghost = () => <Button variant='ghost'>Ghost</Button>;
+const Template: Story<ButtonProps> = (args) => <Button {...args} />;
 
-// sizes
+// Base default button
+export const Base = Template.bind({});
+Base.args = {
+  children: 'Say Hello',
+  onClick: () => alert('Hello Camara'),
+};
 
-export const Large = () => (
-  <Button variant='primary' size='large'>
-    Large
-  </Button>
+// Variants
+export const Variants = (args: ButtonProps) => (
+  <Flex>
+    <Button {...args} variant='primary'>
+      Primary
+    </Button>
+    <Button {...args} variant='secondary'>
+      Secondary
+    </Button>
+    <Button {...args} variant='ghost'>
+      Ghost
+    </Button>
+  </Flex>
 );
 
-export const Medium = () => (
-  <Button variant='primary' size='medium'>
-    Medium
-  </Button>
+// sizes
+export const Sizes = (args: ButtonProps) => (
+  <Flex>
+    <div>
+      <Button {...args} size='large'>
+        Large
+      </Button>
+    </div>
+    <div>
+      <Button {...args} size='medium'>
+        Medium
+      </Button>
+    </div>
+    <div>
+      <Button {...args} size='small'>
+        Small
+      </Button>
+    </div>
+  </Flex>
 );
 
-export const Small = () => (
-  <Button variant='primary' size='small'>
-    Small
-  </Button>
+// disabled buttons
+export const Disabled = (args: ButtonProps) => (
+  <Flex>
+    <div>
+      <Button {...args} disabled variant='primary'>
+        Primary
+      </Button>
+    </div>
+    <div>
+      <Button {...args} disabled variant='secondary'>
+        Secondary
+      </Button>
+    </div>
+    <div>
+      <Button {...args} disabled variant='ghost'>
+        Ghost
+      </Button>
+    </div>
+  </Flex>
 );
 
-// disabled button
-export const Disabled = () => (
-  <Button variant='primary' disabled>
-    Disabled
-  </Button>
+// danger buttons
+export const Danger = (args: ButtonProps) => (
+  <Flex>
+    <div>
+      <Button {...args} danger variant='primary'>
+        Primary
+      </Button>
+    </div>
+    <div>
+      <Button {...args} danger variant='secondary'>
+        Secondary
+      </Button>
+    </div>
+    <div>
+      <Button {...args} danger variant='ghost'>
+        Ghost
+      </Button>
+    </div>
+  </Flex>
 );
 
-// danger button
-export const Danger = () => (
-  <Button variant='primary' danger>
-    Danger
-  </Button>
+// pill-shaped button
+export const Pill = (args: ButtonProps) => (
+  <Flex>
+    <div>
+      <Button {...args} pill variant='primary'>
+        Primary
+      </Button>
+    </div>
+    <div>
+      <Button {...args} pill variant='secondary'>
+        Secondary
+      </Button>
+    </div>
+    <div>
+      <Button {...args} pill variant='ghost'>
+        Ghost
+      </Button>
+    </div>
+  </Flex>
 );
 
-// pill-shaped button
-export const Pill = () => (
-  <Button variant='primary' pill>
-    Camara
-  </Button>
+// full width button
+export const Block = (args: ButtonProps) => (
+  <Box width={30}>
+    <Button {...args} block variant='primary'>
+      Primary
+    </Button>
+    <Button {...args} block variant='secondary'>
+      Secondary
+    </Button>
+    <Button {...args} block variant='ghost'>
+      Ghost
+    </Button>
+  </Box>
 );
 
 // With background color
-export const BackgroundColor = () => (
-  <Button variant='primary' pill backgroundColor='green'>
+export const BackgroundColor = (args: ButtonProps) => (
+  <Button {...args} pill backgroundColor='green'>
     Camara
   </Button>
 );
 
 // With color
-export const Color = () => (
-  <Button variant='primary' pill backgroundColor='#ffc108' color='#000000'>
+export const Color = (args: ButtonProps) => (
+  <Button {...args} pill backgroundColor='#ffc108' color='#000000'>
     Camara
   </Button>
 );