Feat/tet 304/storybook docs (#69)

* 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 * feat: TET-322 add AlertBanner to Docs * feat: TET-323 * fix: NO-JIRA delete DividerDocs and LabelDocs * chore: NO-JIRA refactor ButtonDocs component * feat: TET-325 create IconButtonDocs * feat: TET-326 create InlineBannerDocs * feat: TET-327 add inline message docs * feat: TET-328 add InlineSearchInputDocs * feat: TET-331 add Popover Docs * feat: TET-330 Add LoaderDocs, update Hero Section * feat: TET-332 add RadioButtonDocs * feat: TET-333 add RadioButtonDocs * feat: TET-334 SearchInputDocs added * feat: TET-304 visual corrections * fix: TET-304 correct BadgeDocs * fix(badge): storybook docs jsx TET-304 * style(storybook): mobile view docs paddings and sidebar category margin TET-304 --------- Co-authored-by: Adrian Potępa <[email protected]>
VirtusLab · Sep 27, 2023 · d33d8b6 · d33d8b6
1 parent 4582c7d
commit d33d8b6
Show file tree

Hide file tree

Showing 30 changed files with 751 additions and 85 deletions.
diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html
@@ -19,6 +19,10 @@
     margin: 0 0 4px !important;
   }
 
+  .sidebar-subheading[data-nodetype='root'] {
+    margin-top: 24px !important;
+  }
+
   .sidebar-subheading [data-action='collapse-root'] {
     padding: 0 0 0 16px !important;
     color: #4a545e !important;

diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -4,3 +4,8 @@
   href="https://fonts.googleapis.com/css2?family=Inter:wght@400;450;600&display=swap"
   rel="stylesheet"
 />
+<style>
+  .sbdocs-wrapper {
+    padding: 0 !important;
+  }
+</style>
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -63,11 +63,7 @@ export const Button: FC<ButtonProps & MarginProps> = ({
       {...rest}
     >
       {state === 'loading' && (
-        <Loader
-          appearance={appearance === 'inverted' ? 'white' : 'greyscale'}
-          size="small"
-          shape="circle"
-        />
+        <Loader appearance="greyscale" size="small" shape="circle" />
       )}
       {beforeIcon && state !== 'loading' && <Icon name={beforeIcon} />}
       {children}

diff --git a/src/components/Divider/Divider.stories.tsx b/src/components/Divider/Divider.stories.tsx
@@ -2,7 +2,6 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { Divider } from './Divider';
 
-import { DividerDocs } from '@/docs-components/DividerDocs';
 import { TetDocs } from '@/docs-components/TetDocs';
 import { tet } from '@/tetrisly';
 
@@ -17,9 +16,7 @@ const meta = {
           'A visual separator that breaks up content or UI elements within a layout. Dividers help to create hierarchy and structure, improving readability and organization of content on the page.',
       },
       page: () => (
-        <TetDocs docs="https://docs.tetrisly.com/components/in-progress/divider">
-          <DividerDocs />
-        </TetDocs>
+        <TetDocs docs="https://docs.tetrisly.com/components/in-progress/divider" />
       ),
     },
   },

diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx
@@ -1,26 +1,24 @@
-import { MarginProps } from '@xstyled/styled-components';
 import { FC } from 'react';
 
 import { IconButtonProps } from './IconButton.props';
 import { defaultConfig } from './IconButton.styles';
 import { Button, ButtonProps } from '../Button';
 
 import { mergeConfigWithCustom } from '@/services';
+import { MarginProps } from '@/types';
 
 const mapperIconButtonPropsToButtonProps = ({
   children,
   ...props
 }: IconButtonProps): ButtonProps => {
   const appearance =
     props.appearance === 'primary' ? 'secondary' : props.appearance;
-  const intent = props.intent === 'negative' ? 'destructive' : props.intent;
-  const beforeIcon = props.icon;
 
   return {
     ...props,
     appearance,
-    intent,
-    beforeIcon,
+    intent: props.intent,
+    beforeIcon: props.icon,
     label: '',
   } as ButtonProps;
 };

diff --git a/src/components/IconButton/types/PartialDefaultIconButtonProps.type.ts b/src/components/IconButton/types/PartialDefaultIconButtonProps.type.ts
@@ -1,6 +1,6 @@
 type DefaultPrimary = {
   appearance?: 'primary';
-  intent?: 'none' | 'success' | 'negative';
+  intent?: 'none' | 'success' | 'destructive';
 };
 
 type DefaultInverted = {

diff --git a/src/components/InlineBanner/InlineBanner.tsx b/src/components/InlineBanner/InlineBanner.tsx
@@ -1,5 +1,4 @@
 import { Icon } from '@virtuslab/tetrisly-icons';
-import type { MarginProps } from '@xstyled/styled-components';
 import { FC, useMemo } from 'react';
 
 import type { InlineBannerProps } from './InlineBanner.props';
@@ -10,6 +9,7 @@ import { IconButton } from '../IconButton';
 
 import { useAction } from '@/hooks';
 import { tet } from '@/tetrisly/tetrisly';
+import type { MarginProps } from '@/types';
 
 export const InlineBanner: FC<InlineBannerProps & MarginProps> = ({
   title,

diff --git a/src/components/InlineSearchInput/InlineSearchInput.stories.tsx b/src/components/InlineSearchInput/InlineSearchInput.stories.tsx
@@ -3,13 +3,21 @@ import { ChangeEventHandler, useState } from 'react';
 
 import { InlineSearchInput } from './InlineSearchInput';
 
+import { InlineSearchInputDocs } from '@/docs-components/InlineSearchInputDocs';
 import { TetDocs } from '@/docs-components/TetDocs';
 
 const meta = {
   title: 'InlineSearchInput',
   component: InlineSearchInput,
   tags: ['autodocs'],
-  argTypes: {},
+  argTypes: {
+    state: {
+      control: {
+        type: 'select',
+        options: ['normal', 'disabled'],
+      },
+    },
+  },
   parameters: {
     docs: {
       description: {
@@ -18,7 +26,7 @@ const meta = {
       },
       page: () => (
         <TetDocs docs="https://docs.tetrisly.com/components/in-progress/searchinput">
-          <InlineSearchInput />
+          <InlineSearchInputDocs />
         </TetDocs>
       ),
     },

diff --git a/src/components/Label/Label.stories.tsx b/src/components/Label/Label.stories.tsx
@@ -2,7 +2,6 @@ import { Meta, StoryObj } from '@storybook/react';
 
 import { Label } from './Label';
 
-import { LabelDocs } from '@/docs-components/LabelDocs';
 import { TetDocs } from '@/docs-components/TetDocs';
 
 const meta = {
@@ -14,11 +13,7 @@ const meta = {
   },
   parameters: {
     docs: {
-      page: () => (
-        <TetDocs docs={null}>
-          <LabelDocs />
-        </TetDocs>
-      ),
+      page: () => <TetDocs docs={null} />,
     },
   },
 } satisfies Meta<typeof Label>;

diff --git a/src/components/Popover/Popover.stories.tsx b/src/components/Popover/Popover.stories.tsx
@@ -13,10 +13,33 @@ const meta = {
   title: 'Popover',
   component: Popover,
   tags: ['autodocs'],
+
   args: {
-    content:
-      'Everything in Tetrisly contains Auto Layout. Moreover, we’ve redefined all variants and we have created brand-new components.',
-    width: '320px',
+    content: (
+      <tet.div display="flex" gap="12px" alignItems="center">
+        <Avatar
+          appearance="image"
+          img={{
+            src: 'https://thispersondoesnotexist.com/',
+            alt: 'Random person',
+          }}
+        />
+        <tet.div display="flex" flexDirection="column">
+          <tet.span color="content-primary" text="body-strong-large">
+            John Doe
+          </tet.span>
+          <tet.span color="content-tertiary" text="body-medium">
+            [email protected]
+          </tet.span>
+        </tet.div>
+        <Button
+          appearance="secondary"
+          size="small"
+          beforeIcon="20-check-large"
+          label="Following"
+        />
+      </tet.div>
+    ),
   },
   parameters: {
     docs: {
@@ -40,7 +63,7 @@ const meta = {
       alignItems="center"
     >
       <Popover {...props}>
-        <Button label="Click me" />
+        <Button label="John Doe" />
       </Popover>
     </tet.div>
   ),

diff --git a/src/components/RadioButtonGroup/RadioButtonGroup.stories.tsx b/src/components/RadioButtonGroup/RadioButtonGroup.stories.tsx
@@ -10,7 +10,6 @@ const meta = {
   component: RadioButtonGroup,
   tags: ['autodocs'],
   args: {
-    name: 'radiobuttons',
     label: 'Label',
     helperText: 'Helper text',
     children: [
@@ -46,11 +45,13 @@ type Story = StoryObj<typeof meta>;
 export const Horizontal: Story = {
   args: {
     column: 4,
+    name: 'my-radio-group',
   },
 };
 
 export const Vertical: Story = {
   args: {
     column: 1,
+    name: 'another-radio-group',
   },
 };
diff --git a/src/docs-components/AlertBannerDocs.tsx b/src/docs-components/AlertBannerDocs.tsx
@@ -1,3 +1,47 @@
+import { action } from '@storybook/addon-actions';
+import { capitalize } from 'lodash';
+
+import { SectionHeader } from './common/SectionHeader';
+
+import { AlertBanner } from '@/components/AlertBanner';
 import { tet } from '@/tetrisly';
 
-export const AlertBannerDocs = () => <tet.div />;
+const intents = ['none', 'positive', 'warning', 'negative'] as const;
+
+export const AlertBannerDocs = () => (
+  <>
+    {intents.map((intent) => (
+      <tet.section key={intent}>
+        <SectionHeader px={{ md: '1000', _: '500' }} py="500" variant="H1">
+          Intent: {capitalize(intent)}
+        </SectionHeader>
+        <tet.div px={{ md: '1000', _: '500' }}>
+          <SectionHeader py="500" variant="H2">
+            Action: No
+          </SectionHeader>
+          <AlertBanner text="Alert text" intent={intent} />
+        </tet.div>
+        <tet.div px={{ md: '1000', _: '500' }}>
+          <SectionHeader py="500" variant="H2">
+            Action: Yes
+          </SectionHeader>
+          <AlertBanner
+            text="Alert text"
+            intent={intent}
+            my="500"
+            action={[
+              {
+                label: 'Click me',
+                onClick: action('onClick'),
+              },
+              {
+                label: 'Or click me',
+                onClick: action('onClick'),
+              },
+            ]}
+          />
+        </tet.div>
+      </tet.section>
+    ))}
+  </>
+);
diff --git a/src/docs-components/AvatarDocs.tsx b/src/docs-components/AvatarDocs.tsx
@@ -1,5 +1,6 @@
 import { capitalize } from 'lodash';
 
+import { Cols } from './common/Cols';
 import { SectionHeader } from './common/SectionHeader';
 import { Avatar } from '../components/Avatar/Avatar';
 import { AvatarProps } from '../components/Avatar/Avatar.props';
@@ -29,15 +30,10 @@ export const AvatarDocs = () => (
   <>
     {emphasises.map((emphasis) => (
       <tet.section key={emphasis} pb="component-padding-4xLarge" py="500">
-        <SectionHeader variant="H1" as="h2">
+        <SectionHeader px={{ md: '1000', _: '500' }} variant="H1" as="h2">
           {capitalize(emphasis)} Emphasis
         </SectionHeader>
-        <tet.div
-          display="flex"
-          gap="80px"
-          justifyContent="space-between"
-          px="1000"
-        >
+        <Cols gap="80px" px={{ md: '1000', _: '500' }}>
           {shapes.map((shape) => (
             <tet.div key={shape} display="flex" flexDirection="column">
               <SectionHeader variant="H2" as="h3" py="500">
@@ -73,7 +69,7 @@ export const AvatarDocs = () => (
               </tet.div>
             </tet.div>
           ))}
-        </tet.div>
+        </Cols>
       </tet.section>
     ))}
   </>

diff --git a/src/docs-components/BadgeDocs.tsx b/src/docs-components/BadgeDocs.tsx
@@ -3,7 +3,7 @@ import { capitalize } from 'lodash';
 import { SectionHeader } from './common/SectionHeader';
 import { States } from './common/States';
 
-import { Badge } from '@/index';
+import { Badge } from '@/components/Badge';
 import { tet } from '@/tetrisly';
 import { appearances } from '@/types/Appearance';
 import { basicIntents } from '@/types/BasicIntent';
@@ -18,10 +18,8 @@ export const BadgeDocs = () => (
         display="flex"
         padding="40px 0px"
         flexDirection="column"
-        borderBottomWidth="1px"
-        borderBottomColor="#9747FF"
       >
-        <SectionHeader variant="H1" my="auto" as="h2">
+        <SectionHeader px="1000" variant="H1" my="auto" as="h2">
           {capitalize(emphasis)} Emphasis
         </SectionHeader>
         <tet.div
@@ -32,14 +30,17 @@ export const BadgeDocs = () => (
           <SectionHeader variant="H2" as="h3" py="500">
             Intent
           </SectionHeader>
-          <States states={basicIntents} gap="500" itemWidth="96px" />
-          <tet.div py="500" display="flex" gap="39px">
+          <States states={basicIntents} gap="500" flexBasis="100" />
+          <tet.div py="500" display="flex" gap="500">
             {basicIntents.map((intent) => (
               <tet.div
                 key={intent}
                 display="flex"
                 flexDirection="column"
                 gap="400"
+                flexBasis="100"
+                flexShrink="0"
+                flexGrow="1"
               >
                 <Badge intent={intent} label="Badge Text" />
                 <Badge intent={intent} icon="16-bolt" />

diff --git a/src/docs-components/CheckboxDocs.tsx b/src/docs-components/CheckboxDocs.tsx
@@ -16,13 +16,8 @@ const getLabels = (label: boolean, helperText: boolean) => [
 export const CheckboxDocs: FC = () => (
   <tet.div>
     {['Unchecked', 'Checked', 'Indeterminate'].map((state) => (
-      <tet.section
-        key={state}
-        borderBottomWidth="1px"
-        borderBottomColor="#9747FF"
-        py="500"
-      >
-        <SectionHeader variant="H1" as="h2">
+      <tet.section key={state} py="500">
+        <SectionHeader variant="H1" as="h2" px="1000" py="500">
           {state}
         </SectionHeader>
 

diff --git a/src/docs-components/CheckboxGroupDocs.tsx b/src/docs-components/CheckboxGroupDocs.tsx
@@ -6,7 +6,7 @@ import { tet } from '@/tetrisly';
 export const CheckboxGroupDocs = () => (
   <>
     <tet.section display="flex" flexDirection="column" justifyContent="center">
-      <SectionHeader variant="H1" as="h2">
+      <SectionHeader variant="H1" as="h2" px="1000" py="500">
         Horizontal Group
       </SectionHeader>
       <CheckboxGroup
@@ -28,7 +28,7 @@ export const CheckboxGroupDocs = () => (
     </tet.section>
 
     <tet.section display="flex" flexDirection="column" justifyContent="center">
-      <SectionHeader variant="H1" as="h2">
+      <SectionHeader variant="H1" as="h2" px="1000" py="500">
         Vertical Group
       </SectionHeader>
       <CheckboxGroup