TET-132 storybook docs (#68)

* feat: TET-169 Badge docs component * Merge branch 'development' into feat/TET-132/storybook-docs * feat: TET-170 add Button helper functions * feat: TET-170 add all configuration of buttons to docs * feat: TET-170 finish styling Button docs * feat: TET-171 add ChcekboxDocs and create Section * fix: TET-170 fix styling in ButtonDocs * fix: TET-169 fix BadgeDocs styling bug * fix: TET-168 fix AvatarDocs styling bug * feat: TET-170 CheckboxDocs ready * feat: TET-171 add States to CheckboxDocs * feat: TET-303 add header to each component, create files for each component Docs * feat: TET-319 create CheckboxGroupDocs * feat: TET-320 add HelperTextDocs * feat: TET-321 add StatusDotDocs * fix: NO-JIRA remove emphases object from BadgeProps * fix: NO-JIRA add key to a maping * fix: NO-JIRA add key to States component * feat: TET-303: add empty SocialButtonDocs * fix: NO-JIRA: remove docs link from SocialButton * fix: NO-JIRA fix lint error * chore: NO-JIRA refactor ButtonDocs component
VirtusLab · Sep 20, 2023 · 4582c7d · 4582c7d
1 parent b156ade
commit 4582c7d
Show file tree

Hide file tree

Showing 65 changed files with 1,077 additions and 321 deletions.
diff --git a/package.json b/package.json
@@ -60,7 +60,8 @@
     "vite": "^4.4.2",
     "vite-plugin-dts": "^3.2.0",
     "vite-tsconfig-paths": "^4.2.0",
-    "vitest": "^0.34.2"
+    "vitest": "^0.34.2",
+    "zod": "^3.22.2"
   },
   "exports": {
     ".": {

diff --git a/...onents/AlertBanner/AlertBanner.stories.ts → ...nents/AlertBanner/AlertBanner.stories.tsx b/...onents/AlertBanner/AlertBanner.stories.ts → ...nents/AlertBanner/AlertBanner.stories.tsx
@@ -3,8 +3,11 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { AlertBanner } from './AlertBanner';
 
+import { AlertBannerDocs } from '@/docs-components/AlertBannerDocs';
+import { TetDocs } from '@/docs-components/TetDocs';
+
 const meta = {
-  title: 'Components/AlertBanner',
+  title: 'AlertBanner',
   component: AlertBanner,
   tags: ['autodocs'],
   args: {
@@ -20,6 +23,19 @@ const meta = {
       },
     ],
   },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Prominent element used to display important messages or notifications to users. Alert Banners can convey various levels of urgency, such as success, warning, or error. They are designed to capture the user's attention and provide a clear and concise message.",
+      },
+      page: () => (
+        <TetDocs docs="https://docs.tetrisly.com/components/list/alertbanner">
+          <AlertBannerDocs />
+        </TetDocs>
+      ),
+    },
+  },
 } satisfies Meta<typeof AlertBanner>;
 
 export default meta;

diff --git a/src/components/Avatar/Avatar.stories.tsx b/src/components/Avatar/Avatar.stories.tsx
@@ -7,6 +7,7 @@ import { TetDocs } from '@/docs-components/TetDocs';
 import { appearances } from '@/types/Appearance';
 
 const meta = {
+  title: 'Avatar',
   component: Avatar,
   tags: ['autodocs'],
   args: {

diff --git a/src/components/Badge/Badge.stories.tsx b/src/components/Badge/Badge.stories.tsx
@@ -2,38 +2,26 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { Badge } from './Badge';
 
-import { tet } from '@/tetrisly';
-
-const APPEARANCES = [
-  'blue',
-  'green',
-  'grey',
-  'red',
-  'orange',
-  'raspberry',
-  'magenta',
-  'purple',
-  'grape',
-  'violet',
-  'cyan',
-  'teal',
-  'aquamarine',
-  'emerald',
-  'outline',
-] as const;
-
-const INTENTS = [
-  'neutral',
-  'informative',
-  'positive',
-  'warning',
-  'negative',
-] as const;
+import { BadgeDocs } from '@/docs-components/BadgeDocs';
+import { TetDocs } from '@/docs-components/TetDocs';
 
 const meta = {
-  title: 'Components/Badge',
+  title: 'Badge',
   component: Badge,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A small, visually distinct element used to display numbers, small pieces of information, or statuses. Badges are often paired with icons or other components to convey relevant information or updates.',
+      },
+      page: () => (
+        <TetDocs docs="https://docs.tetrisly.com/components/list/badge">
+          <BadgeDocs />
+        </TetDocs>
+      ),
+    },
+  },
 } satisfies Meta<typeof Badge>;
 
 export default meta;
@@ -62,51 +50,3 @@ export const LabelIcons: Story = {
     afterIcon: '16-bolt',
   },
 };
-
-export const All = () => (
-  <tet.div spaceY="component-gap-small">
-    <tet.p>High emphasis</tet.p>
-    <tet.div display="flex" spaceX="component-gap-small">
-      {APPEARANCES.filter((a) => a !== 'outline').map((appearance) => (
-        <Badge appearance={appearance} icon="16-bolt" key={appearance} />
-      ))}
-    </tet.div>
-    <tet.div display="flex" spaceX="component-gap-small">
-      {INTENTS.map((intent) => (
-        <Badge intent={intent} icon="16-bolt" key={intent} />
-      ))}
-    </tet.div>
-    <tet.p>Medium emphasis</tet.p>
-    <tet.div display="flex" spaceX="component-gap-small">
-      {APPEARANCES.map((appearance) => (
-        <Badge
-          appearance={appearance}
-          emphasis="medium"
-          icon="16-bolt"
-          key={appearance}
-        />
-      ))}
-    </tet.div>
-    <tet.div display="flex" spaceX="component-gap-small">
-      {INTENTS.map((intent) => (
-        <Badge intent={intent} emphasis="medium" icon="16-bolt" key={intent} />
-      ))}
-    </tet.div>
-    <tet.p>Low emphasis</tet.p>
-    <tet.div display="flex" spaceX="component-gap-small">
-      {APPEARANCES.filter((a) => a !== 'outline').map((appearance) => (
-        <Badge
-          appearance={appearance}
-          emphasis="low"
-          icon="16-bolt"
-          key={appearance}
-        />
-      ))}
-    </tet.div>
-    <tet.div display="flex" spaceX="component-gap-small">
-      {INTENTS.map((intent) => (
-        <Badge intent={intent} emphasis="low" icon="16-bolt" key={intent} />
-      ))}
-    </tet.div>
-  </tet.div>
-);
diff --git a/src/components/Badge/Badge.styles.ts b/src/components/Badge/Badge.styles.ts
@@ -27,7 +27,7 @@ export const defaultConfig = {
   display: 'flex',
   w: 'fit-content',
   h: 'xSmall',
-  borderRadius: 'large',
+  borderRadius: 'medium',
   flexShrink: 0,
   alignItems: 'center',
   gap: 'component-gap-xSmall',

diff --git a/src/components/Badge/BadgeAppearance.type.ts b/src/components/Badge/BadgeAppearance.type.ts
@@ -1,16 +1,19 @@
-export type BadgeAppearance =
-  | 'blue'
-  | 'green'
-  | 'grey'
-  | 'red'
-  | 'orange'
-  | 'raspberry'
-  | 'magenta'
-  | 'purple'
-  | 'grape'
-  | 'violet'
-  | 'cyan'
-  | 'teal'
-  | 'aquamarine'
-  | 'emerald'
-  | 'outline';
+export const badgeAppearances = [
+  'blue',
+  'green',
+  'grey',
+  'red',
+  'orange',
+  'raspberry',
+  'magenta',
+  'purple',
+  'grape',
+  'violet',
+  'cyan',
+  'teal',
+  'aquamarine',
+  'emerald',
+  'outline',
+] as const;
+
+export type BadgeAppearance = (typeof badgeAppearances)[number];