diff --git a/src/blocks/CTA/CTA.scss b/src/blocks/CTA/CTA.scss index 92275625..e06c4fb7 100644 --- 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 index fa8adfd1..80efd1f7 100644 --- 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 = ({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 = ({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 = ({items, paddingTop, paddingBottom}) => { }); return ( -
-
- -
+
+
); })} diff --git a/src/blocks/CTA/__stories__/CTA.stories.tsx b/src/blocks/CTA/__stories__/CTA.stories.tsx index a5d2d081..4f764d91 100644 --- a/src/blocks/CTA/__stories__/CTA.stories.tsx +++ b/src/blocks/CTA/__stories__/CTA.stories.tsx @@ -34,9 +34,44 @@ const DefaultTemplate: Story = (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), };