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 ( + + + + ); +} + +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; + +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: ( + <> + Remove + + ), + variant: 'danger' + } +};