From e996244dd2da038698eba82fb146b514ff08cb0f Mon Sep 17 00:00:00 2001
From: Andres <andres99.dev@gmail.com>
Date: Fri, 28 Jul 2023 14:05:23 +0200
Subject: [PATCH] add polymorphic button

---
 src/components/index.ts                     |  1 +
 src/components/ui/button/button.module.scss | 19 ++++++
 src/components/ui/button/button.stories.tsx | 65 +++++++++++++++++++++
 src/components/ui/button/button.tsx         | 19 ++++++
 src/components/ui/button/index.ts           |  1 +
 src/components/ui/index.ts                  |  1 +
 6 files changed, 106 insertions(+)
 create mode 100644 src/components/index.ts
 create mode 100644 src/components/ui/button/button.module.scss
 create mode 100644 src/components/ui/button/button.stories.tsx
 create mode 100644 src/components/ui/button/button.tsx
 create mode 100644 src/components/ui/button/index.ts
 create mode 100644 src/components/ui/index.ts

diff --git a/src/components/index.ts b/src/components/index.ts
new file mode 100644
index 0000000..ed58495
--- /dev/null
+++ b/src/components/index.ts
@@ -0,0 +1 @@
+export * from './ui'
diff --git a/src/components/ui/button/button.module.scss b/src/components/ui/button/button.module.scss
new file mode 100644
index 0000000..d1c56f5
--- /dev/null
+++ b/src/components/ui/button/button.module.scss
@@ -0,0 +1,19 @@
+.primary {
+  background-color: red;
+}
+
+.secondary {
+  background-color: green;
+}
+
+.tertiary {
+  background-color: blue;
+}
+
+.link {
+  background-color: yellow;
+}
+
+.fullWidth {
+  width: 100%;
+}
diff --git a/src/components/ui/button/button.stories.tsx b/src/components/ui/button/button.stories.tsx
new file mode 100644
index 0000000..45907c6
--- /dev/null
+++ b/src/components/ui/button/button.stories.tsx
@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Button } from './'
+
+const meta = {
+  title: 'Components/Button',
+  component: Button,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      options: ['primary', 'secondary', 'tertiary', 'link'],
+      control: { type: 'radio' },
+    },
+  },
+} satisfies Meta<typeof Button>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+  args: {
+    variant: 'primary',
+    children: 'Primary Button',
+    disabled: false,
+  },
+}
+
+export const Secondary: Story = {
+  args: {
+    variant: 'secondary',
+    children: 'Secondary Button',
+    disabled: false,
+  },
+}
+export const Tertiary: Story = {
+  args: {
+    variant: 'tertiary',
+    children: 'Tertiary Button',
+    disabled: false,
+  },
+}
+export const Link: Story = {
+  args: {
+    variant: 'link',
+    children: 'Tertiary Button',
+    disabled: false,
+  },
+}
+
+export const FullWidth: Story = {
+  args: {
+    variant: 'primary',
+    children: 'Full Width Button',
+    disabled: false,
+    fullWidth: true,
+  },
+}
+
+export const AsLink: Story = {
+  args: {
+    variant: 'primary',
+    children: 'Link that looks like a button',
+    as: 'a',
+  },
+}
diff --git a/src/components/ui/button/button.tsx b/src/components/ui/button/button.tsx
new file mode 100644
index 0000000..3e703e0
--- /dev/null
+++ b/src/components/ui/button/button.tsx
@@ -0,0 +1,19 @@
+import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react'
+
+import s from './button.module.scss'
+
+export type ButtonProps<T extends ElementType = 'button'> = {
+  as?: T
+  children: ReactNode
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'link'
+  fullWidth?: boolean
+  className?: string
+} & ComponentPropsWithoutRef<T>
+
+export const Button = <T extends ElementType = 'button'>(props: ButtonProps<T>) => {
+  const { variant = 'primary', fullWidth, className, as: Component = 'button', ...rest } = props
+
+  return (
+    <Component className={`${s[variant]} ${fullWidth ? s.fullWidth : ''} ${className}`} {...rest} />
+  )
+}
diff --git a/src/components/ui/button/index.ts b/src/components/ui/button/index.ts
new file mode 100644
index 0000000..14757e7
--- /dev/null
+++ b/src/components/ui/button/index.ts
@@ -0,0 +1 @@
+export * from './button'
diff --git a/src/components/ui/index.ts b/src/components/ui/index.ts
new file mode 100644
index 0000000..14757e7
--- /dev/null
+++ b/src/components/ui/index.ts
@@ -0,0 +1 @@
+export * from './button'