Skip to content

Commit

Permalink
cleanup stories
Browse files Browse the repository at this point in the history
  • Loading branch information
@daibhin
daibhin committed Dec 29, 2023
1 parent 4cbe6d7 commit b883bc0
Show file tree
Hide file tree
Showing 2 changed files with 61 additions and 84 deletions.
141 changes: 61 additions & 80 deletions frontend/src/lib/lemon-ui/LemonButton/LemonButton.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,81 +66,19 @@ const TypesAndStatusesTemplate: StoryFn<typeof LemonButton> = (props) => {
)
}

const ButtonVariants3000 = ({
type = 'primary',
active = false,
}: {
type?: LemonButtonProps['type']
active?: LemonButtonProps['active']
}): JSX.Element => {
export const TypesAndStatuses: Story = () => {
return (
<div className="flex gap-2 flex-wrap">
{statuses.map((status, index) => (
<LemonButton key={index} active={active} type={type} status={status} icon={<IconCalculate />}>
<span className="capitalize">{status}</span>
</LemonButton>
))}
</div>
)
}

export const Types3000: Story = () => {
return (
<div className="space-y-2">
<h5>type=PRIMARY</h5>
<div className="border rounded">
<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">
<ButtonVariants3000 />
</div>
</div>
<div className="space-y-12">
<div className="p-2 rounded-lg border">
<TypesAndStatusesTemplate />
</div>
<h5>type=SECONDARY</h5>
<div className="border rounded">
<div className="p-2">
<ButtonVariants3000 type="secondary" />
</div>
<div className="p-2">
<h5>Active</h5>
<ButtonVariants3000 active type="secondary" />
</div>
<div className="p-2 bg-bg-light rounded-b">
<h5>Light background</h5>
<div className="flex gap-2 flex-wrap">
<ButtonVariants3000 type="secondary" />
</div>
</div>
</div>
<h5>type=TERTIARY</h5>
<div className="border rounded">
<div className="p-2">
<ButtonVariants3000 type="tertiary" />
</div>
<div className="p-2">
<h5>Active</h5>
<ButtonVariants3000 active type="tertiary" />
</div>
<div className="p-2 bg-bg-light rounded-b">
<h5>Light background</h5>
<div className="flex gap-2 flex-wrap">
<ButtonVariants3000 type="tertiary" />
</div>
</div>
<div className="p-2 bg-bg-light rounded-lg border">
<TypesAndStatusesTemplate />
</div>
</div>
)
}
Types3000.args = { ...Default.args }

export const TypesAndStatuses: Story = TypesAndStatusesTemplate.bind({})
TypesAndStatuses.args = { ...Default.args }

type PopoverStory = StoryObj<typeof LemonButtonWithDropdown>
Expand Down Expand Up @@ -230,41 +168,83 @@ export const Active = (): JSX.Element => {
<LemonButton>I am not active</LemonButton>
<LemonButton active>I am active</LemonButton>
</div>
<div className="flex items-center gap-2">
<LemonButton type="primary">I am not active</LemonButton>
<LemonButton type="primary" active>
I am active
</LemonButton>
</div>
<div className="flex items-center gap-2">
<LemonButton type="primary" status="alt">
I am not active
</LemonButton>
<LemonButton type="primary" status="alt" active>
I am active
</LemonButton>
</div>
<div className="flex items-center gap-2">
<LemonButton type="secondary">I am not active</LemonButton>
<LemonButton type="secondary" active>
I am active
</LemonButton>
</div>
<div className="flex items-center gap-2">
<LemonButton type="secondary" status="alt">
I am not active
</LemonButton>
<LemonButton type="secondary" status="alt" active>
I am active
</LemonButton>
</div>
</div>
)
}

export const PseudoStates = (): JSX.Element => {
return (
<div className="space-y-2">
<div className="border rounded p-2">
<div className="space-y-8">
<div>
<div>
<h5>TYPE=3D STATE=DEFAULT</h5>
<ButtonVariants3000 />
<StatusesTemplate type="primary" />
</div>
<div id="hover">
<h5>TYPE=3D STATE=HOVER</h5>
<ButtonVariants3000 />
<StatusesTemplate type="primary" />
</div>
<div id="active">
<h5>TYPE=3D STATE=HOVER,ACTIVE</h5>
<ButtonVariants3000 />
<StatusesTemplate type="primary" />
</div>
</div>
{/* <div className="border rounded p-2">
<div>
<div>
<h5>TYPE=SECONDARY STATE=DEFAULT</h5>
<StatusesTemplate type="secondary" />
</div>
<div id="hover">
<h5>TYPE=SECONDARY STATE=HOVER</h5>
<StatusesTemplate type="secondary" />
</div>
<div id="active">
<h5>TYPE=SECONDARY STATE=HOVER,ACTIVE</h5>
<StatusesTemplate type="secondary" />
</div>
</div>
<div>
<div>
<h5>TYPE=TERTIARY STATE=DEFAULT</h5>
<ButtonVariants3000 tertiary />
<StatusesTemplate type="tertiary" />
</div>
<div id="hover">
<h5>TYPE=TERTIARY STATE=HOVER</h5>
<ButtonVariants3000 tertiary />
<StatusesTemplate type="tertiary" />
</div>
<div id="active">
<h5>TYPE=TERTIARY STATE=HOVER,ACTIVE</h5>
<ButtonVariants3000 tertiary />
<StatusesTemplate type="tertiary" />
</div>
</div> */}
</div>
</div>
)
}
Expand All @@ -278,7 +258,6 @@ PseudoStates.parameters = {
export const MenuButtons = (): JSX.Element => {
return (
<div className="space-y-2">
<p>When a button is used inside a menu item it should have the special status **stealth**</p>
<div className="border rounded-lg flex flex-col p-2 space-y-1">
<LemonButton active>Active item</LemonButton>
<LemonButton>Item 1</LemonButton>
Expand Down Expand Up @@ -443,7 +422,9 @@ export const More_ = (): JSX.Element => {
<LemonButton fullWidth>View</LemonButton>
<LemonButton fullWidth>Edit</LemonButton>
<LemonDivider />
<LemonButton fullWidth>Delete</LemonButton>
<LemonButton status="danger" fullWidth>
Delete
</LemonButton>
</>
}
/>
Expand Down
4 changes: 0 additions & 4 deletions frontend/src/styles/utilities.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -581,10 +581,6 @@ $decorations: underline, overline, line-through, no-underline;
text-transform: uppercase;
}

.capitalize {
text-transform: capitalize;
}

.float-right {
float: right;
}
Expand Down

0 comments on commit b883bc0

Please sign in to comment.