Merge branch 'MDS-1644' of github.com:coingaming/moon-light into MDS-…

…1644

.changeset/wicked-houses-breathe.md

@@ -0,0 +1,5 @@
+---
+"docs": minor
+---
+
+feat: add Typography documentation [MDS-1642]

docs/.storybook/preview.ts

@@ -0,0 +1,20 @@
+import type { Preview } from "@storybook/react";
+import "../app/globals.css";
+
+const preview: Preview = {
+  parameters: {
+    options: {
+      storySort: {
+        order: ["Typography", "Components"],
+      },
+    },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

docs/stories/TypographyCaptions.stories.tsx

@@ -0,0 +1,43 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { captionsSizes } from "./constants";
+
+type Size = { size: string };
+
+const meta: Meta<Size> = {
+  title: "Typography/Caption",
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      table: {
+        type: {
+          summary: captionsSizes.join(" | "),
+        },
+      },
+      description:
+        "By default, there are just two caption sizes with different letter-spacing, and are defined with text-moon-XX-caption class names. You also need to make them uppercase.",
+      control: {
+        type: "select",
+      },
+      options: captionsSizes,
+    },
+  },
+  render: ({ size }: Size) => {
+    const match = size.match(/-(\d+)-/);
+    const sizeValue = match ? Number(match[1]) : null;
+    return (
+      <span className={`text-moon-${sizeValue}-caption uppercase`}>
+        Size {sizeValue}
+      </span>
+    );
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<Size>;
+
+export const Caption: Story = {
+  args: {
+    size: "text-moon-9-caption",
+  },
+};

docs/stories/TypographyCustom.stories.tsx

@@ -0,0 +1,77 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { COLORS, FONT_WEIGHTS, TEXT_DECORATIONS } from "./constants";
+
+const colorsValues = COLORS.map((color) => `text-${color}`);
+type Color = (typeof colorsValues)[number];
+type FontWeightType = (typeof FONT_WEIGHTS)[number];
+type TextDecorationType = (typeof TEXT_DECORATIONS)[number];
+
+type CustomType = {
+  weight: FontWeightType;
+  color: Color;
+  textDecoration: TextDecorationType;
+};
+
+const meta: Meta<CustomType> = {
+  title: "Typography/Custom",
+  tags: ["autodocs"],
+  argTypes: {
+    color: {
+      description: "Class name to set color",
+      control: {
+        type: "select",
+      },
+      options: colorsValues,
+      table: {
+        type: {
+          summary: colorsValues.join(" | "),
+        },
+      },
+    },
+    weight: {
+      description: "Class name to set font-weight",
+      control: {
+        type: "select",
+      },
+      options: FONT_WEIGHTS,
+      table: {
+        type: {
+          summary: FONT_WEIGHTS.join(" | "),
+        },
+      },
+    },
+    textDecoration: {
+      description: "Class name to set text-decoration",
+      control: {
+        type: "select",
+      },
+      options: TEXT_DECORATIONS,
+      table: {
+        type: {
+          summary: TEXT_DECORATIONS.join(" | "),
+        },
+      },
+    },
+  },
+  render: ({ color, textDecoration, weight }: CustomType) => {
+    return (
+      <div className="grid grid-flow-col">
+        <p className={color}>Color: {color}</p>
+        <p className={weight}>Font-weight: {weight}</p>
+        <p className={textDecoration}>Text-transform: {textDecoration}</p>
+      </div>
+    );
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<CustomType>;
+
+export const Custom: Story = {
+  args: {
+    color: "text-piccolo",
+    weight: "font-medium",
+    textDecoration: "underline",
+  },
+};

docs/stories/TypographySize.stories.tsx

@@ -0,0 +1,42 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { textSizes } from "./constants";
+
+type SizeType = {
+  size: string;
+};
+
+const meta: Meta<SizeType> = {
+  title: "Typography/Size",
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      description:
+        "To change font size, use one of the predefined class names such as text-moon-XX. Those class names include a combination of font-size, line-height, and letter-spacing properties where applicable.",
+      control: {
+        type: "select",
+      },
+      table: {
+        type: {
+          summary: textSizes.join(" | "),
+        },
+      },
+      options: textSizes,
+    },
+  },
+  render: ({ size }: { size: string }) => {
+    const match = size.match(/-(\d+)$/);
+    const sizeValue = match ? Number(match[1]) : null;
+
+    return <p className={size}>Size {sizeValue}</p>;
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<SizeType>;
+
+export const Size: Story = {
+  args: {
+    size: "text-moon-20",
+  },
+};

docs/stories/constants.ts

@@ -44,7 +44,8 @@ export const SUPPORTIVE_COLORS = [
 ];
 
 export const COLORS = [...MAIN_COLORS, ...SUPPORTIVE_COLORS];
-
+export const FONT_WEIGHTS = ["font-normal", "font-medium", "font-semibold"];
+export const TEXT_DECORATIONS = ["underline", "overline", "line-through"];
 export const SEARCH_CDMK_ITEMS = [
   { label: "Aurum" },
   { label: "Argentum" },
@@ -149,6 +150,28 @@ export type ThemeType = typeof DARK_THEME | typeof LIGHT_THEME;
 export type TextDirectionType = typeof LTR | typeof RTL;
 
 export const iconButtonSizes = ["xs", "sm", "md", "lg", "xl"] as const;
+export const textSizes = [
+  "text-moon-9",
+  "text-moon-10",
+  "text-moon-12",
+  "text-moon-14",
+  "text-moon-16",
+  "text-moon-18",
+  "text-moon-20",
+  "text-moon-24",
+  "text-moon-32",
+  "text-moon-40",
+  "text-moon-48",
+  "text-moon-56",
+  "text-moon-64",
+  "text-moon-72",
+] as const;
+
+export const captionsSizes = [
+  "text-moon-9-caption",
+  "text-moon-10-caption",
+] as const;
+
 export type IconButtonSize = (typeof iconButtonSizes)[number] | undefined;
 
 export const iconButtonAnimations = [