chore: updated storybook styles

core-ds · Sep 6, 2023 · 5c909d5 · 5c909d5
1 parent dccf90e
commit 5c909d5
Show file tree

Hide file tree

Showing 38 changed files with 376 additions and 329 deletions.
diff --git a/.storybook/blocks/args-tabs/component.tsx b/.storybook/blocks/args-tabs/component.tsx
@@ -0,0 +1,41 @@
+import React, { FC, useState, ReactNode } from 'react';
+import { Tabs, Tab, TabsProps } from '@alfalab/core-components-tabs';
+import { ArgTypes } from '@storybook/addon-docs';
+
+import styles from './index.module.css';
+
+type Props = {
+    components: Record<string, ReactNode>;
+};
+
+export const ArgsTabs: FC<Props> = ({ components }) => {
+    const [selected, setSelected] = useState(0);
+
+    const handleChange: TabsProps['onChange'] = (_, { selectedId }) => {
+        setSelected(selectedId as number);
+    };
+
+    const keys = Object.keys(components);
+
+    return (
+        <Tabs
+            className='sb-unstyled'
+            selectedId={selected}
+            onChange={handleChange}
+            containerClassName={styles.tabsTypes}
+            view='secondary'
+            size='xxs'
+            scrollable={true}
+        >
+            {keys.map((key, index) => (
+                <Tab key={key} id={index} title={key}>
+                    {components[key] ? (
+                        <ArgTypes of={components[key]} />
+                    ) : (
+                        <div className={styles.error}>Что-то пошло не так </div>
+                    )}
+                </Tab>
+            ))}
+        </Tabs>
+    );
+};
diff --git a/.storybook/blocks/args-tabs/index.module.css b/.storybook/blocks/args-tabs/index.module.css
@@ -0,0 +1,16 @@
+@import '../../../packages/themes/src/default.css';
+
+.tabsTypes {
+    margin-top: var(--gap-xl);
+}
+
+.error {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 200px;
+    border: 1px solid var(--color-light-border-secondary);
+    border-radius: var(--border-radius-s);
+    margin-top: var(--gap-xl);
+    color: var(--color-light-text-secondary);
+}
diff --git a/.storybook/blocks/args-tabs/index.ts b/.storybook/blocks/args-tabs/index.ts
@@ -0,0 +1 @@
+export * from './component';
diff --git a/.storybook/blocks/changelog/index.module.css b/.storybook/blocks/changelog/index.module.css
@@ -3,57 +3,63 @@
 @import '../../../packages/vars/src/index.css';
 
 .changelog {
-    &:not(.root) {
-        & h1:global(.sbdocs):first-child {
-            display: none;
+    max-width: 860px;
 
-            & + p {
-                display: none;
-            }
-        }
+    & h1 {
+        display: none;
     }
 
-    & h1:global(.sbdocs) {
-        @mixin headline_medium;
-
-        margin: var(--gap-2xl) 0 var(--gap-m);
-        color: var(--color-light-text-primary);
-        border-bottom: 1px solid var(--color-light-border-secondary);
+    & h2 {
+        @mixin headline-mobile_small;
+        margin: var(--gap-4xl) 0 0;
+    }
 
-        & a {
-            @mixin headline_medium;
+    & h2:first-of-type {
+        margin: var(--gap-xl) 0 0;
+    }
 
-            border: none;
-        }
+    & h2:not(:first-of-type):before {
+        content: '';
+        display: block;
+        height: 1px;
+        background-color: var(--color-light-border-secondary);
+        position: relative;
+        bottom: var(--gap-xl);
     }
 
-    & h2:global(.sbdocs) {
-        @mixin headline_xsmall;
+    & h3,
+    & h4 {
+        @mixin headline-mobile_xsmall;
+        margin: var(--gap-m) 0 0;
+    }
 
-        border: 0;
-        box-shadow: none;
-        padding: 0;
-        margin: 0;
-        margin-bottom: var(--gap-s);
-        padding-bottom: var(--gap-xs);
-        border-bottom: 1px solid var(--color-light-border-secondary);
+    & ul,
+    & p,
+    & sup {
+        display: block;
+        @mixin paragraph_primary_medium;
+        margin: var(--gap-s) 0 0;
+    }
+}
 
-        &:after {
-            display: none;
+@media screen and (min-width: 768px) {
+    .changelog {
+        & h2 {
+            @mixin headline_small;
+            margin: var(--gap-5xl) 0 0;
         }
 
-        & a {
-            @mixin headline_xsmall;
-
-            border: none;
+        & h2:first-of-type {
+            margin: var(--gap-2xl) 0 0;
         }
 
-        & + p {
-            margin-bottom: var(--gap-xl);
+        & h2:not(:first-of-type):before {
+            bottom: var(--gap-2xl);
         }
-    }
 
-    & h3:global(.sbdocs) {
-        margin-top: var(--gap-m);
+        & h3 {
+            @mixin headline_xsmall;
+            margin: var(--gap-m) 0 0;
+        }
     }
 }
diff --git a/.storybook/blocks/component-header/ComponentHeader.module.css b/.storybook/blocks/component-header/ComponentHeader.module.css
@@ -1,23 +1,28 @@
 .component {
     position: relative;
     margin: 0;
+    max-width: 640px;
 }
 
 .component h1 {
     display: inline-block;
 }
 
-.text {
-    margin: var(--gap-xl) 0;
+.title {
+    margin-bottom: var(--gap-xl);
 }
 
-.textMobile {
-    margin-top: var(--gap-s);
+.titleMobile {
+    margin-bottom: var(--gap-s);
+}
+
+.text {
+    margin-bottom: var(--gap-xl);
 }
 
 .info {
     display: flex;
-    margin-top: var(--gap-xs);
+    margin-top: var(--gap-s);
 }
 
 .commonLink {

diff --git a/.storybook/blocks/component-header/ComponentHeader.tsx b/.storybook/blocks/component-header/ComponentHeader.tsx
@@ -32,14 +32,18 @@ export const ComponentHeader: React.FC<ComponentHeaderProps> = ({ name, design,
 
     return (
         <div className={cn('sb-unstyled', styles.component)}>
-            <Title tag='h1' view='xlarge'>
+            <Title
+                tag='h1'
+                view='xlarge'
+                className={cn(styles.title, { [styles.titleMobile]: !isDesktop })}
+            >
                 {name}
             </Title>
             {children && (
                 <Typography.Text
                     tag='p'
                     view='primary-medium'
-                    className={cn(styles.text, { [styles.textMobile]: !isDesktop })}
+                    className={styles.text}
                 >
                     {children}
                 </Typography.Text>

diff --git a/.storybook/blocks/index.ts b/.storybook/blocks/index.ts
@@ -3,3 +3,4 @@ export { CssVars } from './css-vars';
 export { ComponentHeader } from './component-header';
 export { Row, Col, Container } from './grid';
 export { Tabs } from './tabs';
+export { ArgsTabs } from './args-tabs';
diff --git a/.storybook/pages/intro/components/plate/index.module.css b/.storybook/pages/intro/components/plate/index.module.css
@@ -3,7 +3,7 @@
 .plate {
     padding: var(--gap-m) var(--gap-l);
     background-color: var(--color-light-bg-secondary);
-    border-radius: 20px;
+    border-radius: var(--border-radius-xxl);
     color: var(--color-light-text-primary);
     text-decoration: none;
     transition: background-color 0.2s ease;
@@ -36,7 +36,7 @@
 .description {
     @mixin promo-mobile_small;
 
-    margin-top: var(--gap-xs);
+    margin-top: 6px;
 }
 
 @media screen and (min-width: 600px) {
@@ -50,5 +50,6 @@
 
     .description {
         @mixin promo_small;
+        margin-top: var(--gap-xs);
     }
 }
diff --git a/.storybook/public/global.css b/.storybook/public/global.css
@@ -54,7 +54,7 @@ body.sb-show-main.sb-main-padded {
 }
 
 #storybook-docs > .sbdocs-wrapper {
-    padding: var(--gap-5xl) var(--gap-l);
+    padding: var(--gap-3xl) var(--gap-m) var(--gap-7xl);
 }
 
 /* plugins */
@@ -395,6 +395,16 @@ div.github-doc {
     display: none;
 }
 
+/* Ограничение максимальной ширины для текстовых блоков в доке компонента */
+div[role='tabpanel'] > :not(div) {
+    max-width: 860px;
+}
+
+/* Ограничение максимальной ширины для текстовых блоков в сторях сайдбара (Tokens & assets, Accessibility и тд) */
+.sbdocs > :not(div):not(iframe):not(table) {
+    max-width: 860px;
+}
+
 h1.sbdocs-h1 {
     margin: 0 0 var(--gap-xl);
     color: var(--color-light-text-primary);
@@ -497,7 +507,8 @@ button.tabbutton-active {
 }
 
 div.sbdocs table.docblock-argstable {
-    margin: var(--gap-3xl) 0;
+    margin: var(--gap-xl) 0 0;
+    padding-bottom: var(--gap-xl);
 }
 
 .sbdocs > table {
@@ -605,17 +616,39 @@ table.docblock-argstable td {
     --plate-background: url('./images/docs-background.png');
 }
 
+/* компонент Plate (div.sbdocs-plate) - служебный класс, необходим при добавлении плашки в документацию */
+.sbdocs div.sbdocs-plate {
+    margin: var(--gap-l) 0;
+}
+
+.sbdocs div.sbdocs-plate + div[data-role='wrapper'] {
+    margin-top: 0;
+}
+
 .sbdocs div[data-role='wrapper'] {
     margin: var(--gap-xl) 0;
 }
 
+.sbdocs div[data-role='wrapper'] + h2,
+.sbdocs div[data-role='wrapper'] + h3 {
+    margin-top: var(--gap-4xl);
+}
+
+.sbdocs div[data-role='wrapper'] + div.sbdocs-plate {
+    margin-top: 0;
+}
+
 @media (max-width: 599px) {
     .sbdocs div[data-role='wrapper'] {
         margin: var(--gap-xl) var(--gap-m-neg);
     }
 }
 
 @media screen and (min-width: 768px) {
+    #storybook-docs > .sbdocs-wrapper {
+        padding: var(--gap-5xl) var(--gap-l) var(--gap-8xl);
+    }
+
     h1.sbdocs-h1 {
         font-size: 48px;
         line-height: 64px;