-
Notifications
You must be signed in to change notification settings - Fork 8
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
42a941e
commit c8380c2
Showing
6 changed files
with
175 additions
and
19 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| import { Button } from ".."; | ||
| import { Flyout, FlyoutProps } from "./Flyout"; | ||
|
|
||
| interface Props extends FlyoutProps { | ||
| title: string; | ||
| description?: string; | ||
| showClose?: boolean; | ||
| } | ||
|
|
||
| const FlyoutExample = ({ title, description, showClose, ...props }: Props) => { | ||
| return ( | ||
| <Flyout {...props}> | ||
| <Flyout.Trigger>Flyout Trigger</Flyout.Trigger> | ||
| <Flyout.Content strategy="fixed"> | ||
| <Flyout.Header | ||
| title={title} | ||
| description={description} | ||
| /> | ||
| <Flyout.Body> | ||
| <Flyout.Element>Content1 long text content</Flyout.Element> | ||
| </Flyout.Body> | ||
| <Flyout.Footer showClose={showClose}> | ||
| <Button>Test Primary</Button> | ||
| </Flyout.Footer> | ||
| </Flyout.Content> | ||
| </Flyout> | ||
| ); | ||
| }; | ||
| export default { | ||
| component: FlyoutExample, | ||
| title: "Display/Flyout", | ||
| tags: ["form-field", "select", "autodocs"], | ||
| argTypes: { | ||
| title: { control: "text" }, | ||
| description: { control: "text" }, | ||
| showClose: { control: "boolean" }, | ||
| }, | ||
| }; | ||
|
|
||
| export const Playground = { | ||
| args: { | ||
| title: "Title", | ||
| description: "Description", | ||
| showClose: true, | ||
| }, | ||
| parameters: { | ||
| docs: { | ||
| source: { | ||
| transform: (_: string, story: { args: Props; [x: string]: unknown }) => { | ||
| const { title, description, showClose, ...props } = story.args; | ||
| return `<Flyout\n | ||
| ${Object.entries(props) | ||
| .flatMap(([key, value]) => | ||
| typeof value === "boolean" | ||
| ? value | ||
| ? ` ${key}` | ||
| : [] | ||
| : ` ${key}=${typeof value == "string" ? `"${value}"` : `{${value}}`}` | ||
| ) | ||
| .join("\n")} | ||
| > | ||
| <Flyout.Header | ||
| title="${title}" | ||
| description="${description}" | ||
| /> | ||
| <Flyout.Body> | ||
| <Flyout.Element>Content1 long text content</Flyout.Element> | ||
| </Flyout.Body> | ||
| <Flyout.Footer showClose={${showClose}}> | ||
| <Button>Test Primary</Button> | ||
| </Flyout.Footer> | ||
| </Flyout> | ||
| `; | ||
| }, | ||
| }, | ||
| }, | ||
| }, | ||
| }; |
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,69 @@ | ||
| import { fireEvent } from "@testing-library/react"; | ||
| import { Flyout } from "./Flyout"; | ||
| import { renderCUI } from "@/utils/test-utils"; | ||
| import { Button } from ".."; | ||
| import { DialogProps } from "@radix-ui/react-dialog"; | ||
|
|
||
| describe("Flyout", () => { | ||
| const renderFlyout = (props: DialogProps) => { | ||
| return renderCUI( | ||
| <Flyout {...props}> | ||
| <Flyout.Trigger> | ||
| <Button iconLeft="user">Flyout Fixed</Button> | ||
| </Flyout.Trigger> | ||
| <Flyout.Content strategy="fixed"> | ||
| <Flyout.Header | ||
| title="test1" | ||
| description="test2" | ||
| /> | ||
| <Flyout.Body>Flyout Text</Flyout.Body> | ||
| <Flyout.Footer showClose> | ||
| <Button type="primary">Primary Button</Button> | ||
| </Flyout.Footer> | ||
| </Flyout.Content> | ||
| </Flyout> | ||
| ); | ||
| }; | ||
| it("should open flyout on click", () => { | ||
| const { queryByText } = renderFlyout({}); | ||
| const selectTrigger = queryByText("Flyout Fixed"); | ||
| expect(selectTrigger).not.toBeNull(); | ||
| expect(queryByText("Flyout Text")).toBeNull(); | ||
| selectTrigger && fireEvent.click(selectTrigger); | ||
|
|
||
| expect(queryByText("Flyout Text")).not.toBeNull(); | ||
| expect(queryByText("test1")).not.toBeNull(); | ||
| }); | ||
|
|
||
| it("should open on updating open param", () => { | ||
| const { queryByText } = renderFlyout({ | ||
| open: true, | ||
| }); | ||
| expect(queryByText("Flyout Text")).not.toBeNull(); | ||
| }); | ||
|
|
||
| it("should close flyout on clicking close Button in header", () => { | ||
| const { queryByText, getByTestId } = renderFlyout({}); | ||
| const selectTrigger = queryByText("Flyout Fixed"); | ||
| expect(selectTrigger).not.toBeNull(); | ||
| expect(queryByText("Flyout Text")).toBeNull(); | ||
| selectTrigger && fireEvent.click(selectTrigger); | ||
|
|
||
| expect(queryByText("Flyout Text")).not.toBeNull(); | ||
| expect(queryByText("test1")).not.toBeNull(); | ||
| fireEvent.click(getByTestId("flyout-header-close-btn")); | ||
| expect(queryByText("Flyout Text")).toBeNull(); | ||
| }); | ||
|
|
||
| it("should close flyout on clicking close Button in footer", () => { | ||
| const { queryByText, getByText } = renderFlyout({}); | ||
| const selectTrigger = queryByText("Flyout Fixed"); | ||
| expect(selectTrigger).not.toBeNull(); | ||
| expect(queryByText("Flyout Text")).toBeNull(); | ||
| selectTrigger && fireEvent.click(selectTrigger); | ||
|
|
||
| expect(queryByText("Flyout Text")).not.toBeNull(); | ||
| fireEvent.click(getByText("Cancel")); | ||
| expect(queryByText("Flyout Text")).toBeNull(); | ||
| }); | ||
| }); |
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