From 388e687857345c85ee550cd5da472675e05a6ff5 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 26 Sep 2023 18:43:11 +0200
Subject: refactor(components): rewrite Button and ButtonLink components

Both:
* move styles to Sass placeholders

Button:
* add `isPressed` prop to Button
* add `isLoading` prop to Button (to differentiate state from
disabled)

ButtonLink:
* replace `external` prop with `isExternal` prop
* replace `href` prop with `to` prop
---
 src/components/atoms/buttons/button.stories.tsx | 172 ------------------------
 1 file changed, 172 deletions(-)
 delete mode 100644 src/components/atoms/buttons/button.stories.tsx

(limited to 'src/components/atoms/buttons/button.stories.tsx')

diff --git a/src/components/atoms/buttons/button.stories.tsx b/src/components/atoms/buttons/button.stories.tsx
deleted file mode 100644
index ba09a0d..0000000
--- a/src/components/atoms/buttons/button.stories.tsx
+++ /dev/null
@@ -1,172 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Button } from './button';
-
-/**
- * Button - Storybook Meta
- */
-export default {
-  title: 'Atoms/Buttons/Button',
-  component: Button,
-  args: {
-    disabled: false,
-    type: 'button',
-  },
-  argTypes: {
-    'aria-label': {
-      control: {
-        type: 'text',
-      },
-      description: 'An accessible label.',
-      table: {
-        category: 'Accessibility',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    children: {
-      control: {
-        type: 'text',
-      },
-      description: 'The button body.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the button wrapper.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    disabled: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Render button as disabled.',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-    kind: {
-      control: {
-        type: 'select',
-      },
-      description: 'Button kind.',
-      options: ['primary', 'secondary', 'tertiary', 'neutral'],
-      table: {
-        category: 'Options',
-        defaultValue: { summary: 'secondary' },
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    onClick: {
-      control: {
-        type: null,
-      },
-      description: 'A callback function to handle click.',
-      table: {
-        category: 'Events',
-      },
-      type: {
-        name: 'function',
-        required: false,
-      },
-    },
-    shape: {
-      control: {
-        type: 'select',
-      },
-      description: 'The link shape.',
-      options: ['circle', 'rectangle', 'square', 'initial'],
-      table: {
-        category: 'Options',
-        defaultValue: { summary: 'rectangle' },
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    type: {
-      control: {
-        type: 'select',
-      },
-      description: 'Button type attribute.',
-      options: ['button', 'reset', 'submit'],
-      table: {
-        category: 'Options',
-        defaultValue: { summary: 'button' },
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-  },
-} as ComponentMeta<typeof Button>;
-
-const Template: ComponentStory<typeof Button> = (args) => {
-  const { children, type, ...props } = args;
-
-  const getBody = () => {
-    if (children) return children;
-
-    switch (type) {
-      case 'reset':
-        return 'Reset';
-      case 'submit':
-        return 'Submit';
-      case 'button':
-      default:
-        return 'Button';
-    }
-  };
-
-  return (
-    <Button type={type} {...props}>
-      {getBody()}
-    </Button>
-  );
-};
-
-/**
- * Button Story - Primary
- */
-export const Primary = Template.bind({});
-Primary.args = {
-  kind: 'primary',
-};
-
-/**
- * Button Story - Secondary
- */
-export const Secondary = Template.bind({});
-Secondary.args = {
-  kind: 'secondary',
-};
-
-/**
- * Button Story - Tertiary
- */
-export const Tertiary = Template.bind({});
-Tertiary.args = {
-  kind: 'tertiary',
-};
-- 
cgit v1.2.3

