Everest 1044 storybook typography (#714)

* EVEREST-1044-storybook-typography creating a story in Storybook for the typography component * EVEREST-1044-storybook-typography specifying properties for the history of the Typography component * using the "pnpm format" command * EVEREST-1044-storybook-typography installing mui/types * EVEREST-1044-storybook-typography updating variant type * EVEREST-1044-storybook-typography changing the key * EVEREST-1044-storybook-typography creating a story in storybook for the Typography component * [UI] EVEREST-1044 Grouping stories * Move documentation to `Typography.mdx` * fix dependencies --------- Co-authored-by: X6uddy <sashavolkov_03@mail.ru> Co-authored-by: aElDi <varfst1995s@gmail.com>
percona · Sep 24, 2024 · cad06f6 · cad06f6
1 parent d312a6a
commit cad06f6
Show file tree

Hide file tree

Showing 5 changed files with 620 additions and 0 deletions.
diff --git a/ui/packages/ui-lib/package.json b/ui/packages/ui-lib/package.json
@@ -37,6 +37,7 @@
     "react-hook-form": "^7.47.0"
   },
   "devDependencies": {
+    "@mui/types": "^7.2.17",
     "@percona/eslint-config-react": "workspace:*",
     "@percona/prettier-config": "workspace:*",
     "@percona/tsconfig": "workspace:*",
@@ -76,6 +77,7 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.14.15",
     "@mui/material": "^5.14.14",
+    "@mui/types": "^7.2.17",
     "@mui/x-date-pickers": "^7.6.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

diff --git a/ui/packages/ui-lib/src/stories/Typography/Typography.data.ts b/ui/packages/ui-lib/src/stories/Typography/Typography.data.ts
@@ -0,0 +1,173 @@
+import { TypographyPropsVariantOverrides } from '@mui/material';
+import { Variant } from '@mui/material/styles/createTypography';
+import { OverridableStringUnion } from '@mui/types';
+
+type Typography = Array<{
+  variant: OverridableStringUnion<
+    Variant | 'inherit',
+    TypographyPropsVariantOverrides
+  >;
+  text: string;
+  style?: {
+    fontFamily?: string;
+    fontSize?: string;
+    fontWeight?: string;
+    lineHeight?: string;
+    color?: string;
+    textDecoration?: string;
+  };
+}>[];
+export const TYPOGRAPHY: Typography = [
+  [
+    {
+      variant: 'h1',
+      text: 'Disregard and contempt',
+    },
+    {
+      variant: 'h2',
+      text: 'Whereas disregard and contempt for human rights',
+    },
+    {
+      variant: 'h3',
+      text: 'Whereas disregard and contempt for human rights have resulted',
+    },
+    {
+      variant: 'h4',
+      text: 'No one shall be held in slavery or servitude; slavery and the slave trade shall be prohibited',
+    },
+    {
+      variant: 'h5',
+      text: 'No one shall be held in slavery or servitude; slavery and the slave trade shall be prohibited in all their forms',
+    },
+    {
+      variant: 'h6',
+      text: 'Everyone has the right to an effective remedy by the competent national tribunals for acts violating the fundamental rights granted him by the constitution or by law',
+    },
+  ],
+  [
+    {
+      variant: 'subHead1',
+      text: 'Everyone has the right to an effective remedy by the competent national tribunals for acts violating the fundamental rights granted him by the constitution or by law.',
+    },
+    {
+      variant: 'subHead2',
+      text: 'No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality to a fair and public hearing by an independent and impartial tribunal, in the determination of his rights and obligations and of any criminal charge against him.',
+    },
+    {
+      variant: 'overline',
+      text: 'Everyone has the right to an effective remedy',
+    },
+    {
+      variant: 'sectionHeading',
+      text: 'Everyone is entitled in full equality to a fair and public hearing.',
+    },
+  ],
+  [
+    {
+      variant: 'body1',
+      text: 'No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality to a fair and public hearing by an independent and impartial tribunal, in the determination of his rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary interference with his privacy, family, home or correspondence, nor to attacks upon his honour and reputation. Everyone has the right to the protection of the law against such interference or attacks.',
+    },
+    {
+      variant: 'body2',
+      text: 'No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality to a fair and public hearing by an independent and impartial tribunal, in the determination of his rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary interference with his privacy, family, home or correspondence, nor to attacks upon his honour and reputation. Everyone has the right to the protection of the law against such interference or attacks.',
+    },
+    {
+      variant: 'caption',
+      text: 'No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality to a fair and public hearing by an independent and impartial tribunal, in the determination of his rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary interference with his privacy, family, home or correspondence, nor to attacks upon his honour and reputation. Everyone has the right to the protection of the law against such interference or attacks.',
+    },
+  ],
+  [
+    {
+      variant: 'button',
+      text: 'Whereas recognition',
+      style: {
+        fontFamily: 'Poppins',
+        fontSize: '15px',
+        fontWeight: '600',
+        lineHeight: '15.94px',
+        color: '#2C323E',
+      },
+    },
+    {
+      variant: 'button',
+      text: 'Whereas recognition',
+      style: {
+        fontFamily: 'Poppins',
+        fontSize: '13px',
+        fontWeight: '600',
+        lineHeight: '14.82px',
+        color: '#2C323E',
+      },
+    },
+    {
+      variant: 'button',
+      text: 'Whereas recognition',
+      style: {
+        fontFamily: 'Poppins',
+        fontSize: '13px',
+        fontWeight: '600',
+        lineHeight: '14.82px',
+        color: '#2C323E',
+      },
+    },
+    {
+      variant: 'menuText',
+      text: 'Whereas recognition',
+      style: {
+        fontFamily: 'Poppins',
+        fontSize: '14px',
+        fontWeight: '600',
+        lineHeight: '17.5px',
+        color: '#2C323E',
+      },
+    },
+    {
+      variant: 'body1',
+      text: 'Whereas recognition',
+      style: {
+        fontFamily: 'Poppins',
+        fontSize: '16px',
+        fontWeight: '400',
+        lineHeight: '22px',
+        color: '#4B5468',
+        textDecoration: 'underline',
+      },
+    },
+    {
+      variant: 'body2',
+      text: 'Whereas recognition',
+      style: {
+        fontFamily: 'Poppins',
+        fontSize: '15px',
+        fontWeight: '600',
+        lineHeight: '15.94px',
+        color: '#4B5468',
+        textDecoration: 'underline',
+      },
+    },
+  ],
+  [
+    {
+      variant: 'button',
+      text: 'Whereas recognition',
+    },
+    {
+      variant: 'menuText',
+      text: 'Whereas recognition',
+    },
+  ],
+  [
+    {
+      variant: 'inputText',
+      text: 'Whereas recognition',
+    },
+    {
+      variant: 'inputLabel',
+      text: 'Whereas recognition',
+    },
+    {
+      variant: 'helperText',
+      text: 'Whereas recognition',
+    },
+  ],
+];
diff --git a/ui/packages/ui-lib/src/stories/Typography/Typography.mdx b/ui/packages/ui-lib/src/stories/Typography/Typography.mdx
@@ -0,0 +1,57 @@
+import * as TypographyStories from './Typography.stories.tsx';
+import { Meta, Title, Subheading, Canvas } from '@storybook/blocks';
+
+<Meta title="Typography/Docs" of={TypographyStories} />
+
+<Title />
+
+# Heading
+
+    <Subheading>H1</Subheading>
+    <Canvas of={TypographyStories.H1} />
+    <Subheading>H2</Subheading>
+    <Canvas of={TypographyStories.H2} />
+    <Subheading>H3</Subheading>
+    <Canvas of={TypographyStories.H3} />
+    <Subheading>H4</Subheading>
+    <Canvas of={TypographyStories.H4} />
+    <Subheading>H5</Subheading>
+    <Canvas of={TypographyStories.H5} />
+    <Subheading>H6</Subheading>
+    <Canvas of={TypographyStories.H6} />
+
+# Titling
+
+    <Subheading>Subhead 1</Subheading>
+    <Canvas of={TypographyStories.Subhead1} />
+    <Subheading>Subhead 2</Subheading>
+    <Canvas of={TypographyStories.Subhead2} />
+    <Subheading>Overline</Subheading>
+    <Canvas of={TypographyStories.Overline} />
+    <Subheading>Section Heading</Subheading>
+    <Canvas of={TypographyStories.SectionHeading} />
+
+# Body
+
+    <Subheading>Body 1</Subheading>
+    <Canvas of={TypographyStories.Body1} />
+    <Subheading>Body 2</Subheading>
+    <Canvas of={TypographyStories.Body2} />
+    <Subheading>Caption</Subheading>
+    <Canvas of={TypographyStories.Caption} />
+
+# Actions
+
+    <Subheading>Button</Subheading>
+    <Canvas of={TypographyStories.Button} />
+    <Subheading>Menu Text</Subheading>
+    <Canvas of={TypographyStories.MenuText} />
+
+# Inputs
+
+    <Subheading>Input Text</Subheading>
+    <Canvas of={TypographyStories.InputText} />
+    <Subheading>Input Label</Subheading>
+    <Canvas of={TypographyStories.InputLabel} />
+    <Subheading>Helper Text</Subheading>
+    <Canvas of={TypographyStories.HelperText} />