From f8c9ee10aa0160818e3b6a45439dee2baca902ad Mon Sep 17 00:00:00 2001 From: Victor Genaev Date: Wed, 28 Jun 2023 16:53:34 +0200 Subject: [PATCH] docs(Separator): extend description for color prop (#3904) * docs(Separator): extend description for color prop * docs(Separator): add typescript template to generate token type * Update packages/orbit-components/src/Separator/README.md Co-authored-by: Daniel Sil * chore(docs): prettify md and mdx files Automatically changed via github action --------- Co-authored-by: Daniel Sil Co-authored-by: mainframev --- .../orbit-components/config/typeFiles.mts | 20 ++++- .../orbit-components/src/Separator/README.md | 16 ++-- .../src/Separator/Separator.stories.tsx | 4 +- .../Separator/TYPESCRIPT_TEMPLATE.template | 15 ++++ .../orbit-components/src/Separator/index.tsx | 8 +- .../orbit-components/src/Separator/types.d.ts | 80 ++++++++++++++++++- 6 files changed, 128 insertions(+), 15 deletions(-) create mode 100644 packages/orbit-components/src/Separator/TYPESCRIPT_TEMPLATE.template diff --git a/packages/orbit-components/config/typeFiles.mts b/packages/orbit-components/config/typeFiles.mts index d8e136d681..623885fcc3 100644 --- a/packages/orbit-components/config/typeFiles.mts +++ b/packages/orbit-components/config/typeFiles.mts @@ -1,5 +1,6 @@ import { path, fs } from "zx"; import filedirname from "filedirname"; +import { defaultTokens } from "@kiwicom/orbit-design-tokens"; import { NAMES as ILLUSTRATION_NAMES } from "../src/Illustration/consts.mjs"; import { NAMES as AIRPORT_ILLUSTRATION_NAMES } from "../src/AirportIllustration/consts.mjs"; @@ -8,6 +9,8 @@ import { NAME_OPTIONS as FEATURE_ICONS_NAMES } from "../src/FeatureIcon/consts.m const [, __dirname] = filedirname(); +const PALETTE_TOKENS = Object.keys(defaultTokens).filter(token => token.startsWith("palette")); + const generateTypeFile = async (templatePath: string, replacements: Record) => { const TEMPLATE = fs.readFileSync(templatePath, "utf8"); @@ -19,7 +22,7 @@ const generateTypeFile = async (templatePath: string, replacements: Record { +const templateTokensColors = [ + { + path: path.join(__dirname, "..", "src", "Separator", "TYPESCRIPT_TEMPLATE.template"), + tokens: Object.values(PALETTE_TOKENS), + }, +]; + +templateIllustrationFiles.forEach(arr => { generateTypeFile(arr.path, { NAMES: `${arr.names.map(item => `\n | "${String(item)}"`).join("")};`, }); }); + +templateTokensColors.forEach(arr => { + generateTypeFile(arr.path, { + TOKENS: `${arr.tokens.map(item => `\n | "${String(item)}"`).join("")};`, + }); +}); diff --git a/packages/orbit-components/src/Separator/README.md b/packages/orbit-components/src/Separator/README.md index 2fd2c0e4e0..16eb079e81 100644 --- a/packages/orbit-components/src/Separator/README.md +++ b/packages/orbit-components/src/Separator/README.md @@ -16,14 +16,14 @@ 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 | -| :--------- | :-------------- | :------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| indent | [`enum`](#enum) | `"none"` | Amount of padding expressed as [spacing tokens](https://orbit.kiwi/foundation/spacing/) in the 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. [See this docs](https://github.com/kiwicom/orbit/tree/master/packages/orbit-components/src/common/getSpacingToken) | -| dataTest | `string` | | Optional prop for testing purposes. | -| type | [`enum`](#enum) | `"none"` | The type of the separator. | -| color | `string` | | The color of the separator. | +| Name | Type | Default | Description | +| :--------- | :-------------- | :------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| indent | [`enum`](#enum) | `"none"` | Amount of padding expressed as [spacing tokens](https://orbit.kiwi/foundation/spacing/) in the 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. [See this docs](https://github.com/kiwicom/orbit/tree/master/packages/orbit-components/src/common/getSpacingToken) | +| dataTest | `string` | | Optional prop for testing purposes. | +| type | [`enum`](#enum) | `"none"` | The type of the separator. | +| color | `string` | | The color of the separator. You will need to pass a value different than `"none"` to the `type` property, as it's required for color to be shown. The value should be a string name of the token, for instance: "paletteBlueNormal" or "paletteProductNormal" | ### enum diff --git a/packages/orbit-components/src/Separator/Separator.stories.tsx b/packages/orbit-components/src/Separator/Separator.stories.tsx index b844b1b942..7cb314abe6 100644 --- a/packages/orbit-components/src/Separator/Separator.stories.tsx +++ b/packages/orbit-components/src/Separator/Separator.stories.tsx @@ -3,7 +3,7 @@ import { select, text } from "@storybook/addon-knobs"; import SPACINGS_AFTER from "../common/getSpacingToken/consts"; import RenderInRtl from "../utils/rtl/RenderInRtl"; -import type { Indent } from "./types"; +import type { PaletteTokens, Indent } from "./types"; import Separator from "."; @@ -24,7 +24,7 @@ export const Playground = () => { const align = select("align", ["left", "right", "center"], "left"); const indentOptions: Indent[] = ["none", "small", "medium", "large", "XLarge", "XXLarge"]; const type = select("type", ["solid", "dashed", "dotted", "double", "none"], "none"); - const color = text("color", ""); + const color = text("color", "paletteBlueNormal") as PaletteTokens; const indent = select("indent", indentOptions, "none"); return ( diff --git a/packages/orbit-components/src/Separator/TYPESCRIPT_TEMPLATE.template b/packages/orbit-components/src/Separator/TYPESCRIPT_TEMPLATE.template new file mode 100644 index 0000000000..db7bfdd2e6 --- /dev/null +++ b/packages/orbit-components/src/Separator/TYPESCRIPT_TEMPLATE.template @@ -0,0 +1,15 @@ +// Type definitions for @kiwicom/orbit-components +// Project: http://github.com/kiwicom/orbit +import type * as Common from "../common/types"; + +export type Indent = "none" | "small" | "medium" | "large" | "XLarge" | "XXLarge"; +export type Align = "left" | "center" | "right"; + +export type PaletteTokens =%TOKENS% + +export interface Props extends Common.SpaceAfter { + indent?: Indent; + type?: "solid" | "dashed" | "dotted" | "double" | "none"; + color?: PaletteTokens; + align?: Align; +} diff --git a/packages/orbit-components/src/Separator/index.tsx b/packages/orbit-components/src/Separator/index.tsx index 91d08c1bbe..3fa0011fdc 100644 --- a/packages/orbit-components/src/Separator/index.tsx +++ b/packages/orbit-components/src/Separator/index.tsx @@ -37,7 +37,7 @@ const StyledContainer = styled.div<{ $align: Align; $indent: Indent }>` export const StyledSeparator = styled.hr<{ spaceAfter?: Common.SpaceAfterSizes; $type: Props["type"]; - $color: Props["color"]; + $color?: Props["color"]; }>` ${({ theme, $type, $color }) => css` height: ${theme.orbit.heightSeparator}; @@ -64,7 +64,11 @@ const Separator = ({ const theme = useTheme(); return ( - + ); }; diff --git a/packages/orbit-components/src/Separator/types.d.ts b/packages/orbit-components/src/Separator/types.d.ts index 0290ec6785..95445aa5db 100644 --- a/packages/orbit-components/src/Separator/types.d.ts +++ b/packages/orbit-components/src/Separator/types.d.ts @@ -5,9 +5,87 @@ import type * as Common from "../common/types"; export type Indent = "none" | "small" | "medium" | "large" | "XLarge" | "XXLarge"; export type Align = "left" | "center" | "right"; +export type PaletteTokens = + | "paletteProductLight" + | "paletteProductLightHover" + | "paletteProductLightActive" + | "paletteProductNormal" + | "paletteProductNormalHover" + | "paletteProductNormalActive" + | "paletteProductDark" + | "paletteProductDarkHover" + | "paletteProductDarkActive" + | "paletteProductDarker" + | "paletteWhite" + | "paletteWhiteHover" + | "paletteWhiteActive" + | "paletteCloudLight" + | "paletteCloudLightHover" + | "paletteCloudLightActive" + | "paletteCloudNormal" + | "paletteCloudNormalHover" + | "paletteCloudNormalActive" + | "paletteCloudDark" + | "paletteCloudDarkHover" + | "paletteCloudDarkActive" + | "paletteInkLight" + | "paletteInkLightHover" + | "paletteInkLightActive" + | "paletteInkDark" + | "paletteInkDarkHover" + | "paletteInkDarkActive" + | "paletteInkNormal" + | "paletteInkNormalHover" + | "paletteInkNormalActive" + | "paletteOrangeLight" + | "paletteOrangeLightHover" + | "paletteOrangeLightActive" + | "paletteOrangeNormal" + | "paletteOrangeNormalHover" + | "paletteOrangeNormalActive" + | "paletteOrangeDark" + | "paletteOrangeDarkHover" + | "paletteOrangeDarkActive" + | "paletteOrangeDarker" + | "paletteRedLight" + | "paletteRedLightHover" + | "paletteRedLightActive" + | "paletteRedNormal" + | "paletteRedNormalHover" + | "paletteRedNormalActive" + | "paletteRedDark" + | "paletteRedDarkHover" + | "paletteRedDarkActive" + | "paletteRedDarker" + | "paletteGreenLight" + | "paletteGreenLightHover" + | "paletteGreenLightActive" + | "paletteGreenNormal" + | "paletteGreenNormalHover" + | "paletteGreenNormalActive" + | "paletteGreenDark" + | "paletteGreenDarkHover" + | "paletteGreenDarkActive" + | "paletteGreenDarker" + | "paletteBlueLight" + | "paletteBlueLightHover" + | "paletteBundleBasic" + | "paletteBundleMedium" + | "paletteBlueLightActive" + | "paletteBlueNormal" + | "paletteBlueNormalHover" + | "paletteBlueNormalActive" + | "paletteBlueDark" + | "paletteBlueDarkHover" + | "paletteBlueDarkActive" + | "paletteBlueDarker" + | "paletteSocialFacebook" + | "paletteSocialFacebookHover" + | "paletteSocialFacebookActive"; + export interface Props extends Common.SpaceAfter { indent?: Indent; type?: "solid" | "dashed" | "dotted" | "double" | "none"; - color?: string; + color?: PaletteTokens; align?: Align; }