generated from adobe/aem-boilerplate
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
03d0c25
commit 06befb3
Showing
8 changed files
with
226 additions
and
87 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,82 @@ | ||
| import clsx from 'clsx'; | ||
|
|
||
| type Icon = React.FunctionComponent< | ||
| React.SVGProps<SVGSVGElement> & { | ||
| title?: string | undefined; | ||
| } | ||
| >; | ||
|
|
||
| export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { | ||
| variant?: 'primary' | 'secondary' | 'link'; | ||
| size?: 'default' | 'small' | 'large' | 'tiny'; | ||
| label: string; | ||
| /** | ||
| * import { ReactComponent as YourIcon } from '/assets/icons/...svg | ||
| */ | ||
| IconLeft?: Icon; | ||
| /** | ||
| * import { ReactComponent as YourIcon } from '/assets/icons/...svg | ||
| */ | ||
| IconRight?: Icon; | ||
| } | ||
|
|
||
| export const Button = ({ variant = 'primary', size = 'default', onClick, label, ...props }: ButtonProps) => { | ||
| return <button onClick={onClick}>{label}</button>; | ||
| const common = 'btn font-gellix flex items-center gap-5px rounded-full font-semibold disabled:opacity-25'; | ||
| const defaultSize = 'text-xl leading-5 py-15px px-25px'; | ||
| const small = 'leading-4 px-5 py-3'; | ||
| const large = 'text-25px leading-25px px-31.25px py-18.75px'; | ||
| const tiny = 'text-xs leading-3 px-15px py-9px'; | ||
|
|
||
| const primary = | ||
| 'bg-dark-teal text-midnight-blue hover:bg-medium-teal active:bg-light-teal focus:outline focus:outline-2 focus:outline-offset-1 focus:outline-link-blue'; | ||
| const secondary = | ||
| 'btn-secondary border-2 border-link-blue border-solid text-link-blue hover:text-midnight-blue hover:border-midnight-blue focus:outline focus:outline-2 focus:outline-offset-1 focus:outline-link-blue'; | ||
| const link = `${secondary} !p-0 !border-none focus:!outline-none`; | ||
|
|
||
| export const Button = ({ | ||
| variant = 'primary', | ||
| size = 'default', | ||
| onClick, | ||
| label, | ||
| IconRight, | ||
| IconLeft, | ||
| disabled, | ||
| ...props | ||
| }: ButtonProps) => { | ||
| return ( | ||
| <button | ||
| className={clsx(common, { | ||
| [defaultSize]: size === 'default', | ||
| [small]: size === 'small', | ||
| [large]: size === 'large', | ||
| [tiny]: size === 'tiny', | ||
| [primary]: variant === 'primary', | ||
| [secondary]: variant === 'secondary', | ||
| [link]: variant === 'link', | ||
| })} | ||
| disabled={disabled} | ||
| {...props} | ||
| > | ||
| {IconLeft && ( | ||
| <IconLeft | ||
| className={clsx({ | ||
| 'size-5': size === 'default', | ||
| 'size-4': size === 'small', | ||
| 'size-25px': size === 'large', | ||
| 'size-3': size === 'tiny', | ||
| })} | ||
| /> | ||
| )} | ||
| {label} | ||
| {IconRight && ( | ||
| <IconRight | ||
| className={clsx({ | ||
| 'size-5': size === 'default', | ||
| 'size-4': size === 'small', | ||
| 'size-25px': size === 'large', | ||
| 'size-3': size === 'tiny', | ||
| })} | ||
| /> | ||
| )} | ||
| </button> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,108 @@ | ||
| import type { Meta, StoryObj } from '@storybook/react'; | ||
|
|
||
| import { Button } from '../components/Button'; | ||
|
|
||
| const meta = { | ||
| title: 'Button', | ||
| component: Button, | ||
| parameters: { | ||
| layout: 'centered', | ||
| }, | ||
| tags: ['autodocs'], | ||
| } satisfies Meta<typeof Button>; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj<typeof meta>; | ||
|
|
||
| // --- PRIMARY --- | ||
| export const PrimaryDefault: Story = { | ||
| args: { | ||
| label: 'Button', | ||
| variant: 'primary', | ||
| }, | ||
| }; | ||
|
|
||
| export const PrimaryLarge: Story = { | ||
| args: { | ||
| label: 'Button', | ||
| size: 'large', | ||
| }, | ||
| }; | ||
|
|
||
| export const PrimarySmall: Story = { | ||
| args: { | ||
| label: 'Button', | ||
| size: 'small', | ||
| }, | ||
| }; | ||
|
|
||
| export const PrimaryTiny: Story = { | ||
| args: { | ||
| label: 'Button', | ||
| size: 'tiny', | ||
| }, | ||
| }; | ||
|
|
||
| // --- SECONDARY --- | ||
| export const SecondaryDefault: Story = { | ||
| args: { | ||
| label: 'Button', | ||
| variant: 'secondary', | ||
| }, | ||
| }; | ||
|
|
||
| export const SecondaryLarge: Story = { | ||
| args: { | ||
| label: 'Button', | ||
| variant: 'secondary', | ||
| size: 'large', | ||
| }, | ||
| }; | ||
|
|
||
| export const SecondarySmall: Story = { | ||
| args: { | ||
| label: 'Button', | ||
| variant: 'secondary', | ||
| size: 'small', | ||
| }, | ||
| }; | ||
|
|
||
| export const SecondaryTiny: Story = { | ||
| args: { | ||
| label: 'Button', | ||
| variant: 'secondary', | ||
| size: 'tiny', | ||
| }, | ||
| }; | ||
|
|
||
| // --- LINK --- | ||
| export const LinkDefault: Story = { | ||
| args: { | ||
| label: 'Button', | ||
| variant: 'link', | ||
| }, | ||
| }; | ||
|
|
||
| export const LinkLarge: Story = { | ||
| args: { | ||
| label: 'Button', | ||
| variant: 'link', | ||
| size: 'large', | ||
| }, | ||
| }; | ||
|
|
||
| export const LinkSmall: Story = { | ||
| args: { | ||
| label: 'Button', | ||
| variant: 'link', | ||
| size: 'small', | ||
| }, | ||
| }; | ||
|
|
||
| export const LinkTiny: Story = { | ||
| args: { | ||
| label: 'Button', | ||
| variant: 'link', | ||
| size: 'tiny', | ||
| }, | ||
| }; |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters