-
Notifications
You must be signed in to change notification settings - Fork 334
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add page layout, header, panel
- Loading branch information
Showing
17 changed files
with
359 additions
and
78 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import { InkIcon } from "../.."; | ||
| import { InkHeader } from "../InkParts"; | ||
| import { InkPanel } from "../InkParts/InkPanel"; | ||
|
|
||
| const ExamplePanel = ({ | ||
| className, | ||
| text, | ||
| }: { | ||
| className?: string; | ||
| text: string; | ||
| }) => ( | ||
| <InkPanel className={className}> | ||
| <InkHeader title={text} icon={<InkIcon.Settings />} /> | ||
| <div className="ink:flex-1">{text}</div> | ||
| </InkPanel> | ||
| ); | ||
|
|
||
| export const ExampleDynamicContent = ({ | ||
| className, | ||
| columns, | ||
| }: { | ||
| className?: string; | ||
| columns?: number; | ||
| }) => { | ||
| if (!columns || columns === 1) | ||
| return <ExamplePanel className={className} text="Only Content" />; | ||
| return ( | ||
| <> | ||
| <ExamplePanel className={className} text="Column 1" /> | ||
| {columns > 1 && <ExamplePanel className={className} text="Column 2" />} | ||
| {columns > 2 && <ExamplePanel className={className} text="Column 3" />} | ||
| </> | ||
| ); | ||
| }; |
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,23 @@ | ||
| import { InkIcon } from "../.."; | ||
| import { InkLayoutSideNav } from "../InkLayout"; | ||
|
|
||
| export const ExampleSideNav = () => { | ||
| return ( | ||
| <InkLayoutSideNav | ||
| links={[ | ||
| { | ||
| children: "Home", | ||
| href: "#home", | ||
| icon: <InkIcon.Home />, | ||
| target: "_self", | ||
| }, | ||
| { | ||
| children: "Settings", | ||
| href: "#settings", | ||
| icon: <InkIcon.Settings />, | ||
| target: "_self", | ||
| }, | ||
| ]} | ||
| /> | ||
| ); | ||
| }; |
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,13 @@ | ||
| import { SegmentedControl } from "../../components"; | ||
|
|
||
| export const ExampleTopNav = () => { | ||
| return ( | ||
| <SegmentedControl | ||
| options={[ | ||
| { children: "Home", value: "home", selectedByDefault: true }, | ||
| { children: "Settings", value: "settings" }, | ||
| ]} | ||
| onOptionChange={() => {}} | ||
| /> | ||
| ); | ||
| }; |
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 |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import type { Meta, StoryObj } from "@storybook/react"; | ||
| import { InkHeader, InkHeaderProps } from "./InkHeader"; | ||
| import { InkIcon } from "../.."; | ||
|
|
||
| /** | ||
| * This component provides a unified header that can be used at the top of a page or a modal. | ||
| */ | ||
| const meta: Meta<InkHeaderProps> = { | ||
| decorators: [ | ||
| (Story) => ( | ||
| <div className="ink:w-full ink:p-3 ink:bg-background-container ink:rounded-lg"> | ||
| <Story /> | ||
| </div> | ||
| ), | ||
| ], | ||
| title: "Layouts/InkHeader", | ||
| component: InkHeader, | ||
| tags: ["autodocs"], | ||
| args: { | ||
| title: "Example Title", | ||
| }, | ||
| }; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj<typeof meta>; | ||
|
|
||
| export const Simple: Story = { | ||
| args: {}, | ||
| }; | ||
|
|
||
| export const WithIcon: Story = { | ||
| args: { | ||
| icon: <InkIcon.Home />, | ||
| }, | ||
| }; |
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,26 @@ | ||
| import { PropsWithChildren } from "react"; | ||
| import { classNames } from "../../util/classes"; | ||
|
|
||
| export interface InkHeaderProps extends PropsWithChildren { | ||
| title: React.ReactNode; | ||
| children?: React.ReactNode; | ||
| icon?: React.ReactNode; | ||
| } | ||
|
|
||
| export const InkHeader: React.FC<InkHeaderProps> = ({ | ||
| title, | ||
| icon, | ||
| children, | ||
| }) => { | ||
| return ( | ||
| <div | ||
| className={classNames( | ||
| "ink:w-full ink:flex ink:items-center ink:justify-between ink:font-default ink:box-border ink:gap-2 ink:text-text-default" | ||
| )} | ||
| > | ||
| <div className="ink:text-h4 ink:whitespace-nowrap">{title}</div> | ||
| {children} | ||
| <div className="ink:size-3 ink:shrink-0">{icon}</div> | ||
| </div> | ||
| ); | ||
| }; |
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,49 @@ | ||
| import type { Meta, StoryObj } from "@storybook/react"; | ||
| import { InkPageLayout, InkPageLayoutProps } from "./InkPageLayout"; | ||
| import { InkLayout } from "../InkLayout"; | ||
| import { ExampleDynamicContent } from "../ForStories/ExampleDynamicContent"; | ||
|
|
||
| /** | ||
| * This component provides a column layout for a page. | ||
| * The `columns` prop determines the number of columns to display. You must then pass the same number of children to the component. | ||
| * <br/> | ||
| * Note that the `InkLayout` component is included only as an example. It is not required for this component to function. | ||
| */ | ||
| const meta: Meta<InkPageLayoutProps> = { | ||
| parameters: { | ||
| layout: "fullscreen", | ||
| }, | ||
| decorators: [ | ||
| (Story, { args }) => ( | ||
| <InkLayout | ||
| sideNavigation={<div>Side Navigation</div>} | ||
| headerContent={<div>Header Content</div>} | ||
| > | ||
| <Story | ||
| args={{ | ||
| ...args, | ||
| children: args.children ?? ( | ||
| <ExampleDynamicContent | ||
| columns={args.columns} | ||
| className="ink:min-h-[500px]" | ||
| /> | ||
| ), | ||
| }} | ||
| /> | ||
| </InkLayout> | ||
| ), | ||
| ], | ||
| title: "Layouts/InkPageLayout", | ||
| component: InkPageLayout, | ||
| tags: ["autodocs"], | ||
| args: { | ||
| columns: 1, | ||
| }, | ||
| }; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj<typeof meta>; | ||
|
|
||
| export const Simple: Story = { | ||
| args: {}, | ||
| }; |
Oops, something went wrong.