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 <daniel.sil@kiwi.com> * chore(docs): prettify md and mdx files Automatically changed via github action --------- Co-authored-by: Daniel Sil <daniel.sil@kiwi.com> Co-authored-by: mainframev <mainframev@users.noreply.github.com>
kiwicom · Jun 28, 2023 · f8c9ee1 · f8c9ee1
1 parent 8dc2873
commit f8c9ee1
Show file tree

Hide file tree

Showing 6 changed files with 128 additions and 15 deletions.
diff --git 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<string, string>) => {
   const TEMPLATE = fs.readFileSync(templatePath, "utf8");
 
@@ -19,7 +22,7 @@ const generateTypeFile = async (templatePath: string, replacements: Record<strin
   fs.writeFileSync(path.join(path.dirname(templatePath), "types.d.ts"), replacedTemplate);
 };
 
-const templateFiles = [
+const templateIllustrationFiles = [
   {
     path: path.join(__dirname, "..", "src", "AirportIllustration", "TYPESCRIPT_TEMPLATE.template"),
     names: AIRPORT_ILLUSTRATION_NAMES,
@@ -38,8 +41,21 @@ const templateFiles = [
   },
 ];
 
-templateFiles.forEach(arr => {
+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
@@ -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
@@ -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 (
     <Separator color={color} align={align} indent={indent} spaceAfter={spaceAfter} type={type} />

diff --git a/packages/orbit-components/src/Separator/TYPESCRIPT_TEMPLATE.template 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
@@ -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 (
     <StyledContainer $align={align} $indent={indent}>
-      <StyledSeparator $type={type} spaceAfter={spaceAfter} $color={color && theme.orbit[color]} />
+      <StyledSeparator
+        $type={type}
+        spaceAfter={spaceAfter}
+        $color={color && (theme.orbit[color] as Props["color"])}
+      />
     </StyledContainer>
   );
 };

diff --git 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;
 }