From 8c8a3bb0c65b6b52934f3627c1e797e63c5dd706 Mon Sep 17 00:00:00 2001 From: Daniel Sil Date: Mon, 25 Nov 2024 11:13:19 +0100 Subject: [PATCH] feat(Separator): add label prop --- .../orbit-components/src/Separator/README.md | 17 ++-- .../src/Separator/Separator.stories.tsx | 13 +++- .../orbit-components/src/Separator/index.tsx | 78 ++++++++++--------- .../orbit-components/src/Separator/types.d.ts | 3 + 4 files changed, 65 insertions(+), 46 deletions(-) diff --git a/packages/orbit-components/src/Separator/README.md b/packages/orbit-components/src/Separator/README.md index bd5c8351fb..d64cfc0b78 100644 --- a/packages/orbit-components/src/Separator/README.md +++ b/packages/orbit-components/src/Separator/README.md @@ -16,14 +16,15 @@ After adding import to your project you can use it simply like: The table below contains all types of props available in the Separator component. -| Name | Type | Default | Description | -| :--------- | :-------------- | :-------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| sideOffset | [`enum`](#enum) | `"none"` | Amount of padding expressed as [spacing tokens](https://orbit.kiwi/foundation/spacing/) in the opposite direction depending on the `align` prop. | -| align | [`enum`](#enum) | `"left"` | The direction of indentation. If `"center"` then it's indented from both sides. | -| spaceAfter | `enum` | | Additional `margin-bottom` after component. | -| dataTest | `string` | | Optional prop for testing purposes. | -| type | [`enum`](#enum) | `"solid"` | The type of the separator. | -| color | `string` | | The color of the separator. The value should be a string with the value of a Tailwind border color class valid in Orbit. For instance: "border-blue-normal" or "border-product-normal" | +| Name | Type | Default | Description | +| :--------- | :---------------- | :-------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| sideOffset | [`enum`](#enum) | `"none"` | Amount of padding expressed as [spacing tokens](https://orbit.kiwi/foundation/spacing/) in the opposite direction depending on the `align` prop. | +| align | [`enum`](#enum) | `"left"` | The direction of indentation. If `"center"` then it's indented from both sides. | +| spaceAfter | `enum` | | Additional `margin-bottom` after component. | +| dataTest | `string` | | Optional prop for testing purposes. | +| type | [`enum`](#enum) | `"solid"` | The type of the separator. | +| color | `string` | | The color of the separator. The value should be a string with the value of a Tailwind border color class valid in Orbit. For instance: "border-blue-normal" or "border-product-normal" | +| label | `React.ReactNode` | | The label of the separator. | ### enum diff --git a/packages/orbit-components/src/Separator/Separator.stories.tsx b/packages/orbit-components/src/Separator/Separator.stories.tsx index 9a3f38bafc..bf5ca268de 100644 --- a/packages/orbit-components/src/Separator/Separator.stories.tsx +++ b/packages/orbit-components/src/Separator/Separator.stories.tsx @@ -4,6 +4,7 @@ import type { Meta, StoryObj } from "@storybook/react"; import { SPACINGS_AFTER } from "../common/consts"; import RenderInRtl from "../utils/rtl/RenderInRtl"; import defaultTheme from "../defaultTheme"; +import Text from "../Text"; import Separator from "."; @@ -32,6 +33,8 @@ export const Default: Story = { }; export const Playground: Story = { + render: args => {args.label}} />, + parameters: { info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.", }, @@ -42,6 +45,7 @@ export const Playground: Story = { type: "solid", spaceAfter: "none", color: "border-cloud-normal", + label: "", }, argTypes: { @@ -58,7 +62,7 @@ export const Playground: Story = { }, }, sideOffset: { - options: ["none", "small", "medium", "large", "XLarge", "XXLarge"], + options: ["none", "300", "400", "600", "800", "1000"], control: { type: "select", }, @@ -77,13 +81,18 @@ export const Playground: Story = { type: "select", }, }, + label: { + control: { + type: "text", + }, + }, }, }; export const Rtl: Story = { render: args => ( - + {args.label} : undefined} /> ), diff --git a/packages/orbit-components/src/Separator/index.tsx b/packages/orbit-components/src/Separator/index.tsx index cd983bbc20..d138c0d20a 100644 --- a/packages/orbit-components/src/Separator/index.tsx +++ b/packages/orbit-components/src/Separator/index.tsx @@ -31,43 +31,43 @@ const enum Indent { function getSideOffsetAmount(indent: SideOffset, align: Align) { const classes = { left: { - [Indent.none]: "pe-0", - [Indent.THREE_HUNDRED]: "pe-300", - [Indent.small]: "pe-300", // deprecated - [Indent.FOUR_HUNDRED]: "pe-400", - [Indent.medium]: "pe-400", // deprecated - [Indent.SIX_HUNDRED]: "pe-600", - [Indent.large]: "pe-600", // deprecated - [Indent.EIGHT_HUNDRED]: "pe-800", - [Indent.XLarge]: "pe-800", // deprecated - [Indent.ONE_THOUSAND]: "pe-1000", - [Indent.XXLarge]: "pe-1000", // deprecated + [Indent.none]: "w-full", + [Indent.THREE_HUNDRED]: "w-[calc(100%_-_theme(spacing.300))]", + [Indent.small]: "w-[calc(100%_-_theme(spacing.300))]", // deprecated + [Indent.FOUR_HUNDRED]: "w-[calc(100%_-_theme(spacing.400))]", + [Indent.medium]: "w-[calc(100%_-_theme(spacing.400))]", // deprecated + [Indent.SIX_HUNDRED]: "w-[calc(100%_-_theme(spacing.600))]", + [Indent.large]: "w-[calc(100%_-_theme(spacing.600))]", // deprecated + [Indent.EIGHT_HUNDRED]: "w-[calc(100%_-_theme(spacing.800))]", + [Indent.XLarge]: "w-[calc(100%_-_theme(spacing.800))]", // deprecated + [Indent.ONE_THOUSAND]: "w-[calc(100%_-_theme(spacing.1000))]", + [Indent.XXLarge]: "w-[calc(100%_-_theme(spacing.1000))]", // deprecated }, right: { - [Indent.none]: "ps-0", - [Indent.THREE_HUNDRED]: "ps-300", - [Indent.small]: "ps-300", // deprecated - [Indent.FOUR_HUNDRED]: "ps-400", - [Indent.medium]: "ps-400", // deprecated - [Indent.SIX_HUNDRED]: "ps-600", - [Indent.large]: "ps-600", // deprecated - [Indent.EIGHT_HUNDRED]: "ps-800", - [Indent.XLarge]: "ps-800", // deprecated - [Indent.ONE_THOUSAND]: "ps-1000", - [Indent.XXLarge]: "ps-1000", // deprecated + [Indent.none]: "w-full", + [Indent.THREE_HUNDRED]: "ms-300 w-[calc(100%_-_theme(spacing.300))]", + [Indent.small]: "ms-300 w-[calc(100%_-_theme(spacing.300))]", // deprecated + [Indent.FOUR_HUNDRED]: "ms-400 w-[calc(100%_-_theme(spacing.400))]", + [Indent.medium]: "ms-400 w-[calc(100%_-_theme(spacing.400))]", // deprecated + [Indent.SIX_HUNDRED]: "ms-600 w-[calc(100%_-_theme(spacing.600))]", + [Indent.large]: "ms-600 w-[calc(100%_-_theme(spacing.600))]", // deprecated + [Indent.EIGHT_HUNDRED]: "ms-800 w-[calc(100%_-_theme(spacing.800))]", + [Indent.XLarge]: "ms-800 w-[calc(100%_-_theme(spacing.800))]", // deprecated + [Indent.ONE_THOUSAND]: "ms-1000 w-[calc(100%_-_theme(spacing.1000))]", + [Indent.XXLarge]: "ms-1000 w-[calc(100%_-_theme(spacing.1000))]", // deprecated }, center: { - [Indent.none]: "px-0", - [Indent.THREE_HUNDRED]: "px-300", - [Indent.small]: "px-300", // deprecated - [Indent.FOUR_HUNDRED]: "px-400", - [Indent.medium]: "px-400", // deprecated - [Indent.SIX_HUNDRED]: "px-600", - [Indent.large]: "px-600", // deprecated - [Indent.EIGHT_HUNDRED]: "px-800", - [Indent.XLarge]: "px-800", // deprecated - [Indent.ONE_THOUSAND]: "px-1000", - [Indent.XXLarge]: "px-1000", // deprecated + [Indent.none]: "w-full", + [Indent.THREE_HUNDRED]: "ms-300 w-[calc(100%_-_theme(spacing.300)*2)]", + [Indent.small]: "ms-300 w-[calc(100%_-_theme(spacing.300)*2)]", // deprecated + [Indent.FOUR_HUNDRED]: "ms-400 w-[calc(100%_-_theme(spacing.400)*2)]", + [Indent.medium]: "ms-400 w-[calc(100%_-_theme(spacing.400)*2)]", // deprecated + [Indent.SIX_HUNDRED]: "ms-600 w-[calc(100%_-_theme(spacing.600)*2)]", + [Indent.large]: "ms-600 w-[calc(100%_-_theme(spacing.600)*2)]", // deprecated + [Indent.EIGHT_HUNDRED]: "ms-800 w-[calc(100%_-_theme(spacing.800)*2)]", + [Indent.XLarge]: "ms-800 w-[calc(100%_-_theme(spacing.800)*2)]", // deprecated + [Indent.ONE_THOUSAND]: "ms-1000 w-[calc(100%_-_theme(spacing.1000)*2)]", + [Indent.XXLarge]: "ms-1000 w-[calc(100%_-_theme(spacing.1000)*2)]", // deprecated }, }; @@ -80,18 +80,24 @@ const Separator = ({ spaceAfter, type = "solid", color, + label, }: Props) => { return ( -
+
+ {label && ( + + {label} + + )}
); }; diff --git a/packages/orbit-components/src/Separator/types.d.ts b/packages/orbit-components/src/Separator/types.d.ts index 9b28c84f4f..13c759c859 100644 --- a/packages/orbit-components/src/Separator/types.d.ts +++ b/packages/orbit-components/src/Separator/types.d.ts @@ -1,5 +1,7 @@ // Type definitions for @kiwicom/orbit-components // Project: http://github.com/kiwicom/orbit +import type { ReactNode } from "react"; + import type * as Common from "../common/types"; export type SideOffset = @@ -100,4 +102,5 @@ export interface Props extends Common.SpaceAfter { readonly align?: Align; readonly color?: BorderColorClass; readonly type?: "solid" | "dashed" | "dotted" | "double" | "none"; + readonly label?: ReactNode; }