Skip to content

Commit

Permalink
chore: pseudo state snapshots for buttons (#19047)
Browse files Browse the repository at this point in the history
  • Loading branch information
@daibhin
daibhin authored Dec 4, 2023
1 parent b62e3be commit 16587d0
Show file tree
Hide file tree
Showing 7 changed files with 84 additions and 56 deletions.
Binary file added frontend/__snapshots__/lemon-ui-lemon-button--pseudo-states--dark.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/__snapshots__/lemon-ui-lemon-button--pseudo-states--light.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/__snapshots__/lemon-ui-lemon-button--pseudo-states.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified frontend/__snapshots__/lemon-ui-lemon-button--types-3000--dark.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified frontend/__snapshots__/lemon-ui-lemon-button--types-3000--light.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified frontend/__snapshots__/lemon-ui-lemon-button--types-3000.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
140 changes: 84 additions & 56 deletions frontend/src/lib/lemon-ui/LemonButton/LemonButton.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,78 +74,65 @@ const TypesAndStatusesTemplate: StoryFn<typeof LemonButton> = (props) => {
)
}

const ButtonVariants3000 = ({
tertiary = false,
active = false,
}: {
tertiary?: boolean
active?: LemonButtonProps['active']
}): JSX.Element => {
const variants: LemonButtonProps[] = tertiary
? [
{ type: 'tertiary', children: 'Primary' },
{ type: 'tertiary', status: 'danger', children: 'Danger' },
]
: [
{ type: 'primary', children: 'Primary' },
{ type: 'primary', status: 'primary-alt', children: 'Primary alt' },
{ type: 'secondary', children: 'Secondary' },
{ type: 'secondary', status: 'danger', children: 'Danger' },
{ type: 'secondary', stealth: true, status: 'primary', children: 'Stealth' },
]
return (
<div className="flex gap-2 flex-wrap">
{variants.map((props, index) => (
<LemonButton key={index} active={active} {...props} icon={<IconCalculate />} />
))}
</div>
)
}

export const Types3000: Story = () => {
return (
<div className="space-y-2">
<h5>type=BLOCK</h5>
<h5>type=3D</h5>
<div className="border rounded">
<div className="flex gap-2 flex-wrap p-2">
<LemonButton type={'primary'} icon={<IconCalculate />}>
Primary
</LemonButton>
<LemonButton type={'primary'} status="primary-alt" icon={<IconCalculate />}>
Primary Alt
</LemonButton>
<LemonButton type={'secondary'} icon={<IconCalculate />}>
Secondary
</LemonButton>
<LemonButton type={'secondary'} status="danger" icon={<IconCalculate />}>
Destroy
</LemonButton>
<LemonButton stealth type={'secondary'} status="primary" icon={<IconCalculate />}>
Stealth
</LemonButton>
<div className="p-2">
<ButtonVariants3000 />
</div>
<div className="p-2">
<h5>Active</h5>
<ButtonVariants3000 active />
</div>
<div className="p-2 bg-bg-light rounded-b">
<h5>Light background</h5>
<div className="flex gap-2 flex-wrap">
<LemonButton active type={'primary'} icon={<IconCalculate />}>
Primary
</LemonButton>
<LemonButton active type={'primary'} status="primary-alt" icon={<IconCalculate />}>
Primary Alt
</LemonButton>
<LemonButton active type={'secondary'} icon={<IconCalculate />}>
Secondary
</LemonButton>
<LemonButton active type={'secondary'} status="danger" icon={<IconCalculate />}>
Destroy
</LemonButton>
<LemonButton active stealth type={'secondary'} status="primary" icon={<IconCalculate />}>
Stealth
</LemonButton>
<ButtonVariants3000 />
</div>
</div>
</div>
<h5>type=TERTIARY</h5>
<div className="border rounded">
<div className="p-2">
<ButtonVariants3000 tertiary />
</div>
<div className="p-2 bg-bg-light rounded-b">
<h5>Light background</h5>
<div className="flex gap-2 flex-wrap">
<LemonButton type={'primary'} icon={<IconCalculate />}>
Primary
</LemonButton>
<LemonButton type={'primary'} status="primary-alt" icon={<IconCalculate />}>
Primary Alt
</LemonButton>
<LemonButton type={'secondary'} icon={<IconCalculate />}>
Secondary
</LemonButton>
<LemonButton type={'secondary'} status="danger" icon={<IconCalculate />}>
Destroy
</LemonButton>
<LemonButton stealth type={'secondary'} status="primary" icon={<IconCalculate />}>
Stealth
</LemonButton>
<ButtonVariants3000 tertiary />
</div>
</div>
</div>
<h5>type=MENU</h5>
<div className="flex gap-2 border rourounded p-2 flex-wrap">
<LemonButton type="tertiary" icon={<IconCalculate />}>
Primary
</LemonButton>
<LemonButton type="tertiary" status="danger" icon={<IconCalculate />}>
Danger
</LemonButton>
</div>
</div>
)
}
Expand Down Expand Up @@ -245,6 +232,47 @@ export const Active = (): JSX.Element => {
)
}

export const PseudoStates = (): JSX.Element => {
return (
<div className="space-y-2">
<div className="border rounded p-2">
<div>
<h5>TYPE=3D STATE=DEFAULT</h5>
<ButtonVariants3000 />
</div>
<div id="hover">
<h5>TYPE=3D STATE=HOVER</h5>
<ButtonVariants3000 />
</div>
<div id="active">
<h5>TYPE=3D STATE=HOVER,ACTIVE</h5>
<ButtonVariants3000 />
</div>
</div>
<div className="border rounded p-2">
<div>
<h5>TYPE=TERTIARY STATE=DEFAULT</h5>
<ButtonVariants3000 tertiary />
</div>
<div id="hover">
<h5>TYPE=TERTIARY STATE=HOVER</h5>
<ButtonVariants3000 tertiary />
</div>
<div id="active">
<h5>TYPE=TERTIARY STATE=HOVER,ACTIVE</h5>
<ButtonVariants3000 tertiary />
</div>
</div>
</div>
)
}
PseudoStates.parameters = {
pseudo: {
hover: ['#hover .LemonButton', '#active .LemonButton'],
active: ['#active .LemonButton'],
},
}

export const MenuButtons = (): JSX.Element => {
return (
<div className="space-y-2">
Expand Down

0 comments on commit 16587d0

Please sign in to comment.