From 64342e321dbc8943100b790291c868201a1046fa Mon Sep 17 00:00:00 2001 From: Navin Moorthy Date: Wed, 15 Jun 2022 16:39:15 +0530 Subject: [PATCH] =?UTF-8?q?feat(divider):=20=E2=9C=A8=20finish=20divider?= =?UTF-8?q?=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/divider/Divider.tsx | 31 +++++++++++++----- src/divider/__tests__/Divider.test.tsx | 14 ++++++++ src/divider/stories/DividerBasic.stories.tsx | 32 ++++++++++++++++--- .../stories/DividerVertical.component.tsx | 2 +- .../stories/DividerVertical.stories.tsx | 32 ++++++++++++++++--- src/theme/defaultTheme/divider.ts | 21 +++++++++--- 6 files changed, 111 insertions(+), 21 deletions(-) create mode 100644 src/divider/__tests__/Divider.test.tsx diff --git a/src/divider/Divider.tsx b/src/divider/Divider.tsx index 46f0bcfa..e6ef5fa4 100644 --- a/src/divider/Divider.tsx +++ b/src/divider/Divider.tsx @@ -9,27 +9,33 @@ import { import { As, Props } from "ariakit-utils/types"; import { useTheme } from "../theme"; -import { cx, RenderProp, runIfFn } from "../utils"; +import { cx, RenderProp, runRenderFn } from "../utils"; export const useDivider = createHook( - ({ label, orientation = "horizontal", ...props }) => { + ({ + orientation = "horizontal", + label, + labelPosition = "center", + ...props + }) => { const theme = useTheme("divider"); const className = cx( theme.base, - orientation === "horizontal" ? theme.horizontal : theme.vertical, + theme.orientation[orientation], props.className, ); - const labelClassName = theme.label; props = useWrapElement( props, element => { if (label) { + const labelClassName = cx(theme.label[orientation]?.[labelPosition]); + return (
{element} - {runIfFn(label as React.ReactNode, { orientation })} + {runRenderFn(label, { orientation, label, labelPosition })}
); @@ -37,7 +43,7 @@ export const useDivider = createHook( return element; }, - [label, labelClassName, orientation], + [label, orientation, labelPosition], ); props = { ...props, className }; @@ -53,11 +59,20 @@ export const Divider = createComponent(props => { return createElement("hr", htmlProps); }); -export type DividerOptions = SeparatorOptions & { +export type DividerState = { + orientation: SeparatorOptions["orientation"]; /** * Provide a label to name the divider at the center to mark it as a section. */ - label?: RenderProp; + label?: RenderProp; + + /** + * Position of the given label. + */ + labelPosition?: "start" | "center" | "end"; }; +export type DividerOptions = SeparatorOptions & + Partial; + export type DividerProps = Props>; diff --git a/src/divider/__tests__/Divider.test.tsx b/src/divider/__tests__/Divider.test.tsx new file mode 100644 index 00000000..987992e7 --- /dev/null +++ b/src/divider/__tests__/Divider.test.tsx @@ -0,0 +1,14 @@ +import { render } from "../../utils/testUtils"; +import { Divider } from "../Divider"; + +describe("Divider", () => { + it("should render properly", () => { + const { asFragment } = render( +
+ +
, + ); + + expect(asFragment()).toMatchSnapshot(); + }); +}); diff --git a/src/divider/stories/DividerBasic.stories.tsx b/src/divider/stories/DividerBasic.stories.tsx index febd8e2c..2d26bd6b 100644 --- a/src/divider/stories/DividerBasic.stories.tsx +++ b/src/divider/stories/DividerBasic.stories.tsx @@ -1,6 +1,6 @@ import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; -import { createPreviewTabs } from "../../../.storybook/utils"; +import { createControls, createPreviewTabs } from "../../../.storybook/utils"; import { Button } from "../../button"; import js from "./templates/DividerBasicJsx"; @@ -18,10 +18,34 @@ export default { options: { showPanel: true }, preview: createPreviewTabs({ js, ts }), }, + argTypes: createControls("divider", { + ignore: ["wrapElement", "as", "ref"], + }), } as Meta; -export const Default: Story = {}; +export const Default: Story = { + args: { orientation: "horizontal", labelPosition: "center" }, +}; + +export const LabelCenter: Story = { + ...Default, + args: { ...Default.args, label: }, +}; -export const Label: Story = { - args: { label: }, +export const LabelStart: Story = { + ...Default, + args: { + ...Default.args, + label: , + labelPosition: "start", + }, +}; + +export const LabelEnd: Story = { + ...Default, + args: { + ...Default.args, + label: , + labelPosition: "end", + }, }; diff --git a/src/divider/stories/DividerVertical.component.tsx b/src/divider/stories/DividerVertical.component.tsx index dbe3ad32..5f866047 100644 --- a/src/divider/stories/DividerVertical.component.tsx +++ b/src/divider/stories/DividerVertical.component.tsx @@ -7,7 +7,7 @@ export type DividerVerticalProps = DividerProps & {}; export const DividerVertical: React.FC = props => { return (
- +
); }; diff --git a/src/divider/stories/DividerVertical.stories.tsx b/src/divider/stories/DividerVertical.stories.tsx index e6cc5b2e..b6dd6626 100644 --- a/src/divider/stories/DividerVertical.stories.tsx +++ b/src/divider/stories/DividerVertical.stories.tsx @@ -1,6 +1,6 @@ import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; -import { createPreviewTabs } from "../../../.storybook/utils"; +import { createControls, createPreviewTabs } from "../../../.storybook/utils"; import { Button } from "../../button"; import js from "./templates/DividerVerticalJsx"; @@ -18,10 +18,34 @@ export default { options: { showPanel: true }, preview: createPreviewTabs({ js, ts }), }, + argTypes: createControls("divider", { + ignore: ["wrapElement", "as", "ref"], + }), } as Meta; -export const Default: Story = {}; +export const Default: Story = { + args: { orientation: "vertical", labelPosition: "center" }, +}; + +export const LabelCenter: Story = { + ...Default, + args: { ...Default.args, label: }, +}; -export const Label: Story = { - args: { label: }, +export const LabelStart: Story = { + ...Default, + args: { + ...Default.args, + label: , + labelPosition: "start", + }, +}; + +export const LabelEnd: Story = { + ...Default, + args: { + ...Default.args, + label: , + labelPosition: "end", + }, }; diff --git a/src/theme/defaultTheme/divider.ts b/src/theme/defaultTheme/divider.ts index f94eab2d..6c72d426 100644 --- a/src/theme/defaultTheme/divider.ts +++ b/src/theme/defaultTheme/divider.ts @@ -1,6 +1,19 @@ export const divider = { - base: " border-grey-300", - horizontal: "w-full", - vertical: "border-l border-t-0 h-full", - label: "absolute -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2", + base: "border-gray-300", + orientation: { + horizontal: "w-full", + vertical: "border-l border-t-0 h-full", + }, + label: { + horizontal: { + start: "absolute -translate-y-1/2 top-1/2 left-4", + center: "absolute -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2", + end: "absolute -translate-y-1/2 top-1/2 right-4", + }, + vertical: { + start: "absolute -translate-x-1/2 left-1/2 top-4", + center: "absolute -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2", + end: "absolute -translate-x-1/2 left-1/2 bottom-4", + }, + }, };