feat: add section for templates (#152)

* feat: add section for templates * feat: layout improvement and add scroll to templates * feat: add background for Templates * fix: code-review * fix: code-review * fix: layout fixes * fix: layout
gravity-ui · Dec 18, 2023 · cfb9516 · cfb9516
1 parent 9ed7bcf
commit cfb9516
Show file tree

Hide file tree

Showing 21 changed files with 342 additions and 281 deletions.
diff --git a/src/assets/icons/cra-logo.svg b/src/assets/icons/cra-logo.svg
diff --git a/src/assets/icons/next-logo.svg b/src/assets/icons/next-logo.svg
diff --git a/src/assets/icons/rocket.svg b/src/assets/icons/rocket.svg
diff --git a/src/assets/icons/vite-logo.svg b/src/assets/icons/vite-logo.svg
diff --git a/src/blocks/CustomBanner/CustomBanner.scss b/src/blocks/CustomBanner/CustomBanner.scss
diff --git a/src/blocks/CustomBanner/CustomBanner.tsx b/src/blocks/CustomBanner/CustomBanner.tsx
diff --git a/src/blocks/Examples/Examples.scss b/src/blocks/Examples/Examples.scss
@@ -12,30 +12,29 @@ $block: '.#{variables.$ns}examples';
     &__header-wrapper {
         display: flex;
         align-items: center;
+        flex-wrap: nowrap;
+        justify-content: space-between;
+        gap: 16px;
+        min-width: 270px;
 
-        @media (max-width: map-get(pcVariables.$gridBreakpoints, 'sm') - 1) {
-            flex-direction: column;
-            align-items: stretch;
+        @media (max-width: map-get(pcVariables.$gridBreakpoints, 'md') - 1) {
+            flex-wrap: wrap;
         }
     }
 
     &__header-title {
         @include pcStyles.heading2();
-        flex: 1;
-        margin-right: 20px;
         padding: 0;
-
-        @media (max-width: map-get(pcVariables.$gridBreakpoints, 'sm') - 1) {
-            margin-right: 0;
-        }
     }
 
     &__controls {
         display: flex;
         align-items: center;
-
-        @media (max-width: map-get(pcVariables.$gridBreakpoints, 'sm') - 1) {
+        order: 0;
+        @media (max-width: map-get(pcVariables.$gridBreakpoints, 'md') - 1) {
             margin-top: 32px;
+            order: 3;
+            flex-grow: 1;
         }
     }
 
@@ -47,41 +46,27 @@ $block: '.#{variables.$ns}examples';
         }
 
         &_type_color {
-            width: 184px;
+            min-width: 200px;
 
             @media (max-width: map-get(pcVariables.$gridBreakpoints, 'md') - 1) {
-                width: 140px;
+                width: auto;
+                flex-grow: 1;
             }
-
             @media (max-width: map-get(pcVariables.$gridBreakpoints, 'sm') - 1) {
-                width: auto;
+                min-width: unset;
+                flex-grow: 1;
             }
         }
 
         &_type_theme {
             --g-color-base-background: rgba(37, 27, 37, 0.8);
 
-            @media (max-width: map-get(pcVariables.$gridBreakpoints, 'md') - 1) {
-                .yc-radio-button_size_l .yc-radio-button__option-text {
-                    margin: 0 8px;
-                }
-            }
-
             @media (max-width: map-get(pcVariables.$gridBreakpoints, 'sm') - 1) {
-                .yc-radio-button_size_l {
-                    width: 100%;
-                }
-
-                .yc-radio-button__option {
-                    display: flex;
-                    justify-content: center;
+                .yc-radio-button_size_xl .yc-radio-button__option-text {
+                    margin: 0 8px;
                 }
             }
         }
-
-        @media (max-width: map-get(pcVariables.$gridBreakpoints, 'sm') - 1) {
-            flex: 1;
-        }
     }
 
     &__color-option {

diff --git a/src/blocks/Examples/Examples.tsx b/src/blocks/Examples/Examples.tsx
@@ -1,5 +1,5 @@
 import {Animatable, AnimateBlock, HTML} from '@gravity-ui/page-constructor';
-import {Icon, RadioButton, Select, SelectOption, Theme} from '@gravity-ui/uikit';
+import {Button, Icon, RadioButton, Select, SelectOption, Theme} from '@gravity-ui/uikit';
 import React from 'react';
 
 import darkThemeIcon from '../../assets/icons/dark-theme.svg';
@@ -61,7 +61,7 @@ export const Examples: React.FC<ExamplesProps> = ({animated, title, colors}) =>
                             renderOption={renderOption}
                             renderSelectedOption={renderOption}
                             onUpdate={([newValue]) => setColor(newValue)}
-                            size="l"
+                            size="xl"
                             width="max"
                         >
                             {colors.map((item) => {
@@ -86,10 +86,21 @@ export const Examples: React.FC<ExamplesProps> = ({animated, title, colors}) =>
                             onUpdate={(newValue) => {
                                 setTheme(newValue);
                             }}
-                            size="l"
+                            size="xl"
                         />
                     </div>
                 </div>
+                <div>
+                    <Button
+                        size="xl"
+                        pin="circle-circle"
+                        view="outlined"
+                        href="https://preview.gravity-ui.com/uikit"
+                        target="_blank"
+                    >
+                        Storybook
+                    </Button>
+                </div>
             </div>
 
             <div className={b('showcase-wrapper')}>

diff --git a/src/blocks/TemplatesBlock/TemplatesBlock.scss b/src/blocks/TemplatesBlock/TemplatesBlock.scss
@@ -0,0 +1,13 @@
+@use '~@gravity-ui/page-constructor/styles/styles.scss' as pcStyles;
+@use '~@gravity-ui/page-constructor/styles/variables.scss' as pcVariables;
+@use '../../variables.scss';
+
+$block: '.#{variables.$ns}templates-block';
+
+#{$block} {
+    @include pcStyles.animate();
+    &__title {
+        @include pcStyles.heading2();
+        margin-bottom: pcVariables.$indentM;
+    }
+}