-
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.
feat(Option): enable passing children flexibly without disturbance fr…
…om icon prop
- Loading branch information
1 parent
33ccb66
commit dba167f
Showing
6 changed files
with
124 additions
and
42 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "@einride/ui": minor | ||
| --- | ||
|
|
||
| Option: Enable passing children flexibly without disturbance from icon prop. |
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
92 changes: 82 additions & 10 deletions
92
packages/einride-ui/src/components/menus/Option/Option.stories.tsx
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,45 +1,117 @@ | ||
| import { expect } from "@storybook/jest" | ||
| import { Meta, StoryObj } from "@storybook/react" | ||
| import { within } from "@storybook/testing-library" | ||
| import { Icon } from "../../content/Icon/Icon" | ||
| import { Text } from "../../typography/Text/Text" | ||
| import { Option } from "./Option" | ||
|
|
||
| const meta = { | ||
| component: Option, | ||
| argTypes: { | ||
| as: { | ||
| control: "text", | ||
| }, | ||
| children: { | ||
| control: false, | ||
| }, | ||
| }, | ||
| } satisfies Meta<typeof Option> | ||
|
|
||
| export default meta | ||
| type Story = StoryObj<typeof meta> | ||
|
|
||
| export const Basic = { | ||
| args: { | ||
| children: "Option", | ||
| icon: <Icon name="arrowRight" />, | ||
| children: "Label", | ||
| }, | ||
| } satisfies Story | ||
| play: async ({ canvasElement, step }) => { | ||
| const canvas = within(canvasElement) | ||
|
|
||
| export const Selected = { | ||
| args: { | ||
| ...Basic.args, | ||
| selected: true, | ||
| await step("Expect children to show", async () => { | ||
| expect(canvas.getByText(Basic.args.children)).toBeInTheDocument() | ||
| }) | ||
| }, | ||
| } satisfies Story | ||
|
|
||
| /** Change the variant with the `variant` prop. */ | ||
| export const Secondary = { | ||
| args: { | ||
| ...Basic.args, | ||
| variant: "secondary", | ||
| }, | ||
| play: async ({ canvasElement, step }) => { | ||
| const canvas = within(canvasElement) | ||
|
|
||
| await step("Expect children to show", async () => { | ||
| expect(canvas.getByText(Secondary.args.children)).toBeInTheDocument() | ||
| }) | ||
| }, | ||
| } satisfies Story | ||
|
|
||
| export const SecondarySelected = { | ||
| export const WithEndIcon = { | ||
| args: { | ||
| ...Secondary.args, | ||
| selected: true, | ||
| children: ( | ||
| <> | ||
| <Text as="span">Label</Text> | ||
| <Icon name="arrowRight" /> | ||
| </> | ||
| ), | ||
| }, | ||
| play: async ({ canvasElement, step }) => { | ||
| const canvas = within(canvasElement) | ||
|
|
||
| await step("Expect children to show", async () => { | ||
| expect(canvas.getByText("Label")).toBeInTheDocument() | ||
| }) | ||
| }, | ||
| } satisfies Story | ||
|
|
||
| /** Use `children` to render content on the other side of the option. */ | ||
| export const WithEndText = { | ||
| args: { | ||
| children: ( | ||
| <> | ||
| <Text as="span">Label</Text> | ||
| <Text as="span" color="secondary"> | ||
| Label | ||
| </Text> | ||
| </> | ||
| ), | ||
| }, | ||
| play: async ({ canvasElement, step }) => { | ||
| const canvas = within(canvasElement) | ||
|
|
||
| await step("Expect children to show", async () => { | ||
| expect(canvas.getAllByText("Label").length).toBe(2) | ||
| }) | ||
| }, | ||
| } satisfies Story | ||
|
|
||
| export const SecondaryWithEndLabel = { | ||
| args: { | ||
| ...WithEndText.args, | ||
| variant: "secondary", | ||
| }, | ||
| play: async ({ canvasElement, step }) => { | ||
| const canvas = within(canvasElement) | ||
|
|
||
| await step("Expect children to show", async () => { | ||
| expect(canvas.getAllByText("Label").length).toBe(2) | ||
| }) | ||
| }, | ||
| } satisfies Story | ||
|
|
||
| /** Use the `as` prop to change the rendered HTML element. */ | ||
| export const AsButton = { | ||
| args: { | ||
| ...Basic.args, | ||
| as: "button", | ||
| }, | ||
| play: async ({ canvasElement, step }) => { | ||
| const canvas = within(canvasElement) | ||
|
|
||
| await step("Expect children to show", async () => { | ||
| expect(canvas.getByRole("button", { name: AsButton.args.children })).toBeInTheDocument() | ||
| }) | ||
| }, | ||
| } satisfies Story |
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