feat: add md breackpoint to cta-block (#45)

* feat: add md breackpoint to cta-block
gravity-ui · May 16, 2023 · e859b0b · e859b0b
1 parent 3bffaa2
commit e859b0b
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 69 deletions.
diff --git a/src/blocks/CTA/CTA.scss b/src/blocks/CTA/CTA.scss
@@ -15,62 +15,33 @@ $block: '.#{$namespace}cta';
         flex-direction: column;
         flex-grow: 1;
         padding: $indentM;
-    }
-
-    &__button {
-        display: flex;
-        padding-bottom: $indentXS;
+        width: calc((100% / 3) - (#{$indentM} / 2));
     }
 
     &__content {
         display: flex;
-        flex-direction: column;
+        flex-flow: row wrap;
+        gap: $indentXS;
     }
 
-    @media (min-width: map-get($gridBreakpoints, 'sm')) {
+    @media (max-width: map-get($gridBreakpoints, 'md')) {
         &__content {
-            display: flex;
-            flex-direction: row;
+            flex-wrap: wrap;
         }
 
-        &__button {
-            padding-bottom: 0px;
-
-            &_layout {
-                width: 100%;
-                max-width: 100%;
-                margin-right: 0px;
-
-                &_2 {
-                    width: calc((100% / 2) - (#{$indentXS} / 2));
-                    max-width: 50%;
-                    margin-right: $indentXS;
-                }
-
-                &_2:nth-child(2n) {
-                    margin-right: 0px;
-                }
-
-                &_3 {
-                    width: calc((100% / 3) - (#{$indentM} / 3));
-                    $max-width: 50%;
-                    margin-right: $indentXS;
-                }
-
-                &_3:nth-child(3n) {
-                    margin-right: 0px;
-                }
+        &__card {
+            width: calc((100% / 2) - #{$indentXS});
+            flex-grow: 1;
+        }
+    }
 
-                &_4 {
-                    width: calc((100% / 4) - (#{$indentL} / 4));
-                    max-width: 50%;
-                    margin-right: $indentXS;
-                }
+    @media (max-width: map-get($gridBreakpoints, 'sm')) {
+        &__content {
+            flex-direction: column;
+        }
 
-                &_4:nth-child(4n) {
-                    margin-right: 0px;
-                }
-            }
+        &__card {
+            width: 100%;
         }
     }
 }
diff --git a/src/blocks/CTA/CTA.tsx b/src/blocks/CTA/CTA.tsx
@@ -13,19 +13,7 @@ import './CTA.scss';
 
 const b = block('cta');
 
-const MAX_COLUMN_COUNT = 4,
-    MIN_COLUMN_COUNT = 2,
-    DEFAULT_COLUMN_COUNT = 3;
-
 export const CTA: React.FC<CTAProps> = ({items, paddingTop, paddingBottom}) => {
-    let count = items ? items.length : DEFAULT_COLUMN_COUNT;
-
-    if (count < MIN_COLUMN_COUNT) {
-        count = MIN_COLUMN_COUNT;
-    } else if (count > MAX_COLUMN_COUNT) {
-        count = MAX_COLUMN_COUNT;
-    }
-
     /**
      * @deprecated Metrika will be deleted after launch of analyticsEvents
      */
@@ -43,7 +31,7 @@ export const CTA: React.FC<CTAProps> = ({items, paddingTop, paddingBottom}) => {
             className={b('content')}
             dataQa="blog-cta-content"
         >
-            {items.slice(0, count).map((content: ContentBlockProps, index: number) => {
+            {items.map((content: ContentBlockProps, index: number) => {
                 const contentData = updateContentSizes(content);
 
                 contentData.links?.forEach((link) => {
@@ -52,16 +40,8 @@ export const CTA: React.FC<CTAProps> = ({items, paddingTop, paddingBottom}) => {
                 });
 
                 return (
-                    <div
-                        key={index}
-                        className={b('button', {
-                            ['layout']: count,
-                        })}
-                        data-qa="blog-cta-card"
-                    >
-                        <div className={b('card')}>
-                            <Content {...contentData} />
-                        </div>
+                    <div key={index} className={b('card')} data-qa="blog-cta-card">
+                        <Content {...contentData} />
                     </div>
                 );
             })}

diff --git a/src/blocks/CTA/__stories__/CTA.stories.tsx b/src/blocks/CTA/__stories__/CTA.stories.tsx
@@ -34,9 +34,44 @@ const DefaultTemplate: Story<CTAModel> = (args) => (
 );
 
 export const Default = DefaultTemplate.bind({});
+export const OneItem = DefaultTemplate.bind({});
+export const TwoItems = DefaultTemplate.bind({});
+export const FourItems = DefaultTemplate.bind({});
+export const FiveItems = DefaultTemplate.bind({});
+export const SixItems = DefaultTemplate.bind({});
 
 Default.args = {
     type: BlockType.CTA,
     ...getDefaultStoryArgs(),
-    items: contentBlocks,
+    items: contentBlocks.slice(0, 3),
+};
+
+OneItem.args = {
+    type: BlockType.CTA,
+    ...getDefaultStoryArgs(),
+    items: contentBlocks.slice(0, 1),
+};
+
+TwoItems.args = {
+    type: BlockType.CTA,
+    ...getDefaultStoryArgs(),
+    items: contentBlocks.slice(0, 2),
+};
+
+FourItems.args = {
+    type: BlockType.CTA,
+    ...getDefaultStoryArgs(),
+    items: contentBlocks.slice(0, 4),
+};
+
+FiveItems.args = {
+    type: BlockType.CTA,
+    ...getDefaultStoryArgs(),
+    items: contentBlocks.slice(0, 5),
+};
+
+SixItems.args = {
+    type: BlockType.CTA,
+    ...getDefaultStoryArgs(),
+    items: contentBlocks.slice(0, 6),
 };