-
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.
✨ #25 - feat: implement datagrid sort and improve styling
- Loading branch information
1 parent
1dc92ce
commit a0c7f56
Showing
16 changed files
with
525 additions
and
156 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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,66 +1,118 @@ | ||
| import type { Meta, StoryObj } from "@storybook/react"; | ||
| import { userEvent } from "@storybook/test"; | ||
| import React from "react"; | ||
|
|
||
| import { Toolbar } from "../toolbar"; | ||
| import { Button, ButtonLink } from "./button"; | ||
|
|
||
| const meta = { | ||
| title: "Controls/Button", | ||
| component: Button, | ||
| render: ({ ...args }) => ( | ||
| <Toolbar> | ||
| <Button {...args} variant="primary"> | ||
| Primary Button | ||
| </Button> | ||
| <Button {...args} variant="transparent"> | ||
| Tranparent Button | ||
| </Button> | ||
| <Button {...args} variant="outline"> | ||
| Outline Button | ||
| </Button> | ||
| </Toolbar> | ||
| ), | ||
| } satisfies Meta<typeof Button>; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj<typeof meta>; | ||
|
|
||
| export const ButtonComponent: Story = { | ||
| export const Buttons: Story = { | ||
| args: {}, | ||
| }; | ||
|
|
||
| export const ActiveButtons: Story = { | ||
| args: { | ||
| children: "The quick brown fox jumps over the lazy dog.", | ||
| active: true, | ||
| }, | ||
| }; | ||
|
|
||
| export const TransparentButton: Story = { | ||
| export const BoldButtons: Story = { | ||
| args: { | ||
| children: "The quick brown fox jumps over the lazy dog.", | ||
| variant: "transparent", | ||
| bold: true, | ||
| }, | ||
| }; | ||
|
|
||
| export const ButtonAnimatesOnHoverAndClick: Story = { | ||
| export const JustifiedButtons: Story = { | ||
| args: { | ||
| children: "The quick brown fox jumps over the lazy dog.", | ||
| justify: true, | ||
| }, | ||
| play: async () => { | ||
| await userEvent.tab({ delay: 10 }); | ||
| }; | ||
|
|
||
| export const MutedButtons: Story = { | ||
| args: { | ||
| muted: true, | ||
| }, | ||
| }; | ||
|
|
||
| export const ButtonLinkComponent: StoryObj<typeof ButtonLink> = { | ||
| export const PadlessButtons: Story = { | ||
| args: { | ||
| children: "The quick brown fox jumps over the lazy dog.", | ||
| href: "https://www.example.com", | ||
| target: "_blank", | ||
| pad: false, | ||
| }, | ||
| render: (args) => <ButtonLink {...args} />, | ||
| }; | ||
|
|
||
| export const TransparentButtonLink: StoryObj<typeof ButtonLink> = { | ||
| export const HorizontallyPaddedButtons: Story = { | ||
| args: { | ||
| children: "The quick brown fox jumps over the lazy dog.", | ||
| href: "https://www.example.com", | ||
| target: "_blank", | ||
| variant: "transparent", | ||
| pad: "h", | ||
| }, | ||
| render: (args) => <ButtonLink {...args} />, | ||
| }; | ||
|
|
||
| export const ButtonLinkAnimatesOnHoverAndClick: StoryObj<typeof ButtonLink> = { | ||
| export const VerticallyPaddedButtons: Story = { | ||
| args: { | ||
| pad: "v", | ||
| }, | ||
| }; | ||
|
|
||
| export const SmallerButtonText: Story = { | ||
| args: { | ||
| size: "xs", | ||
| }, | ||
| }; | ||
|
|
||
| export const SquareButtons: Story = { | ||
| args: { | ||
| square: true, | ||
| }, | ||
| render: ({ ...args }) => ( | ||
| <Toolbar> | ||
| <Button {...args} variant="primary"> | ||
| 1 | ||
| </Button> | ||
| <Button {...args} variant="transparent"> | ||
| 2 | ||
| </Button> | ||
| <Button {...args} variant="outline"> | ||
| 3 | ||
| </Button> | ||
| </Toolbar> | ||
| ), | ||
| }; | ||
|
|
||
| export const ButtonLinkComponent: StoryObj<typeof ButtonLink> = { | ||
| args: { | ||
| children: "The quick brown fox jumps over the lazy dog.", | ||
| href: "https://www.example.com", | ||
| target: "_blank", | ||
| }, | ||
| play: async () => { | ||
| await userEvent.tab({ delay: 10 }); | ||
| }, | ||
| render: (args) => <ButtonLink {...args} />, | ||
| render: ({ ...args }) => ( | ||
| <Toolbar> | ||
| <ButtonLink {...args} variant="primary"> | ||
| Primary ButtonLink | ||
| </ButtonLink> | ||
| <ButtonLink {...args} variant="transparent"> | ||
| Tranparent ButtonLink | ||
| </ButtonLink> | ||
| <ButtonLink {...args} variant="outline"> | ||
| Outline ButtonLink | ||
| </ButtonLink> | ||
| </Toolbar> | ||
| ), | ||
| }; |
Oops, something went wrong.