Skip to content

Commit

Permalink
feat(Separator): add label prop
Browse files Browse the repository at this point in the history
  • Loading branch information
@DSil
DSil committed Nov 26, 2024
1 parent 9551ae3 commit 8c8a3bb
Show file tree
Hide file tree
Showing 4 changed files with 65 additions and 46 deletions.
17 changes: 9 additions & 8 deletions packages/orbit-components/src/Separator/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
13 changes: 11 additions & 2 deletions packages/orbit-components/src/Separator/Separator.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 ".";

Expand Down Expand Up @@ -32,6 +33,8 @@ export const Default: Story = {
};

export const Playground: Story = {
render: args => <Separator {...args} label={<Text>{args.label}</Text>} />,

parameters: {
info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
},
Expand All @@ -42,6 +45,7 @@ export const Playground: Story = {
type: "solid",
spaceAfter: "none",
color: "border-cloud-normal",
label: "",
},

argTypes: {
Expand All @@ -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",
},
Expand All @@ -77,13 +81,18 @@ export const Playground: Story = {
type: "select",
},
},
label: {
control: {
type: "text",
},
},
},
};

export const Rtl: Story = {
render: args => (
<RenderInRtl>
<Separator {...args} />
<Separator {...args} label={args.label ? <Text>{args.label}</Text> : undefined} />
</RenderInRtl>
),

Expand Down
78 changes: 42 additions & 36 deletions packages/orbit-components/src/Separator/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
},
};

Expand All @@ -80,18 +80,24 @@ const Separator = ({
spaceAfter,
type = "solid",
color,
label,
}: Props) => {
return (
<div className={cx("box-border w-full", getSideOffsetAmount(sideOffset, align))}>
<div className={cx("relative min-h-px", spaceAfter && getSpaceAfterClasses(spaceAfter))}>
<hr
className={cx(
"orbit-separator",
"mt-0 box-border h-0 border-t",
"absolute start-0 top-1/2 mt-0 box-border -translate-y-1/2 border-t",
color || "border-elevation-flat-border-color",
getSideOffsetAmount(sideOffset, align),
BORDER_TYPE_CLASSES[type],
spaceAfter && getSpaceAfterClasses(spaceAfter),
)}
/>
{label && (
<span className="bg-white-normal px-100 absolute left-1/2 top-1/2 min-w-max -translate-x-1/2 -translate-y-1/2">
{label}
</span>
)}
</div>
);
};
Expand Down
3 changes: 3 additions & 0 deletions packages/orbit-components/src/Separator/types.d.ts
View file
Original file line number Diff line number Diff line change
@@ -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 =
Expand Down Expand Up @@ -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;
}

0 comments on commit 8c8a3bb

Please sign in to comment.