chore: updated storybook styles

core-ds · Sep 12, 2023 · 1731bf3 · 1731bf3
1 parent dccf90e
commit 1731bf3
Show file tree

Hide file tree

Showing 41 changed files with 384 additions and 349 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,61 @@
 @import '../../../packages/vars/src/index.css';
 
 .changelog {
-    &:not(.root) {
-        & h1:global(.sbdocs):first-child {
-            display: none;
-
-            & + 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
@@ -7,17 +7,21 @@
     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/components-overview/index.module.css b/.storybook/pages/components-overview/index.module.css
@@ -42,8 +42,4 @@
     body {
         @mixin custom-scrollbar;
     }
-
-    .cardContainer {
-        grid-template-columns: repeat(4, 1fr);
-    }
 }
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) {
@@ -49,6 +49,6 @@
     }
 
     .description {
-        @mixin promo_small;
+        margin-top: var(--gap-xs);
     }
 }
diff --git a/.storybook/pages/intro/index.module.css b/.storybook/pages/intro/index.module.css
@@ -9,7 +9,7 @@
     text-align: center;
     width: 100%;
     height: 390px;
-    border-radius: 20px;
+    border-radius: var(--border-radius-xxl);
     background-color: var(--color-light-bg-secondary);
     background-repeat: no-repeat;
     background-size: cover;
@@ -110,7 +110,7 @@ div[data-mode='dark'] .intro {
     }
 
     .intro {
-        height: 606px;
+        height: 478px;
         background-image: url('./assets/intro_bg.webp');
     }
 
@@ -119,24 +119,24 @@ div[data-mode='dark'] .intro {
     }
 
     .logo {
-        width: 404px;
-        height: 86px;
-        margin-top: 110px;
+        width: 304px;
+        height: 65px;
+        margin-top: 80px;
     }
 
     .desc {
-        @mixin promo_small;
+        @mixin promo-mobile_small;
 
-        margin: var(--gap-3xl) auto 0;
-        max-width: 540px;
+        margin: var(--gap-2xl) auto 0;
+        max-width: 438px;
     }
 
     .ghButton {
-        margin-top: var(--gap-3xl);
+        margin-top: var(--gap-2xl);
     }
 
     .introFooter {
-        height: 93px;
+        height: 80px;
     }
 
     .supportDesc {

diff --git a/.storybook/pages/intro/index.tsx b/.storybook/pages/intro/index.tsx
@@ -74,7 +74,7 @@ export const Intro = () => {
                 <Button
                     className={styles.ghButton}
                     view='primary'
-                    size='s'
+                    size='xs'
                     href='https://github.com/core-ds/core-components'
                     target='_blank'
                     rel='noopener noreferrer'

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 */
@@ -387,7 +387,7 @@ select[name] {
 }
 
 .sbdocs.sbdocs-content {
-    max-width: 1024px;
+    max-width: 768px;
     width: 100%;
 }
 
@@ -497,7 +497,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 +606,38 @@ table.docblock-argstable td {
     --plate-background: url('./images/docs-background.png');
 }
 
+.sbdocs div[class^='plate__component'] {
+    margin: var(--gap-l) 0;
+}
+
+.sbdocs div[class^='plate__component'] + 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[class^='plate__component'] {
+    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;