From eb23f772e96b9fcd0660c5cf88a07654392ce83e Mon Sep 17 00:00:00 2001
From: Artur Miglio <artur.miglio@free-now.com>
Date: Wed, 7 Aug 2024 15:51:34 +0200
Subject: [PATCH] feat(experimental): add Button WIP

---
 src/components/experimental/Button/Button.tsx | 24 +++++
 .../Button/docs/Button.stories.tsx            | 90 +++++++++++++++++++
 2 files changed, 114 insertions(+)
 create mode 100644 src/components/experimental/Button/Button.tsx
 create mode 100644 src/components/experimental/Button/docs/Button.stories.tsx

diff --git a/src/components/experimental/Button/Button.tsx b/src/components/experimental/Button/Button.tsx
new file mode 100644
index 00000000..61cb9a40
--- /dev/null
+++ b/src/components/experimental/Button/Button.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import styled, { ThemeProvider } from 'styled-components';
+import { Button as BaseButton } from '../../Button/Button';
+import { theme as experimentalTheme, theme } from '../../../essentials/experimental/theme';
+import { get } from '../../../utils/experimental/themeGet';
+
+const ButtonStyled = styled(BaseButton).attrs({ theme })`
+    border-radius: ${get('radii.3')};
+    padding: ${get('space.6')} ${get('space.4')};
+
+    // TODO: HOVER
+    // TODO: SECONDARY VARIANT
+`;
+
+function Button() {
+    return (
+        <ThemeProvider theme={experimentalTheme}>
+            <ButtonStyled />
+        </ThemeProvider>
+    );
+}
+
+export default Button;
+export { Button };
diff --git a/src/components/experimental/Button/docs/Button.stories.tsx b/src/components/experimental/Button/docs/Button.stories.tsx
new file mode 100644
index 00000000..56f0c14f
--- /dev/null
+++ b/src/components/experimental/Button/docs/Button.stories.tsx
@@ -0,0 +1,90 @@
+import { StoryObj, Meta } from '@storybook/react';
+import React from 'react';
+import { Button } from '../Button';
+import TrashIcon from '../../../../icons/actions/TrashIcon';
+
+const meta: Meta = {
+    title: 'Experimental/Components/Button',
+    component: Button,
+    args: {
+        children: 'Button title'
+    },
+    argTypes: {
+        children: {
+            description: 'Button caption'
+        },
+        variant: {
+            control: 'radio',
+            options: ['primary', 'secondary', 'danger']
+        },
+        size: {
+            control: 'radio',
+            options: ['small', 'medium']
+        },
+        as: {
+            description: 'html tag to use',
+            control: 'text',
+            table: {
+                defaultValue: {
+                    summary: 'button'
+                }
+            }
+        },
+        ref: {
+            table: {
+                disable: true
+            }
+        },
+        theme: {
+            table: {
+                disable: true
+            }
+        },
+        forwardedAs: {
+            table: {
+                disable: true
+            }
+        }
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Default: Story = {};
+
+export const Secondary: Story = {
+    args: {
+        variant: 'secondary'
+    }
+};
+
+export const Danger: Story = {
+    args: {
+        variant: 'danger'
+    }
+};
+
+export const Disabled: Story = {
+    args: {
+        disabled: true
+    }
+};
+
+export const Small: Story = {
+    args: {
+        size: 'small'
+    }
+};
+
+export const WithIcon: Story = {
+    args: {
+        children: (
+            <>
+                <TrashIcon size={20} /> Remove
+            </>
+        ),
+        variant: 'danger'
+    }
+};