fix: resolve comments

gravity-ui · Feb 28, 2024 · ddcbe4c · ddcbe4c
1 parent 75c36fd
commit ddcbe4c
Show file tree

Hide file tree

Showing 18 changed files with 169 additions and 99 deletions.
diff --git a/src/sub-blocks/BackgroundCard/BackgroundCard.scss b/src/sub-blocks/BackgroundCard/BackgroundCard.scss
@@ -55,14 +55,6 @@ $block: '.#{$ns}background-card';
             object-position: left;
         }
     }
-
-    &__footer {
-        margin-top: 0px;
-    }
-    &__links,
-    &__buttons {
-        margin-top: $indentXS;
-    }
 }
 
 a#{$block} {

diff --git a/src/sub-blocks/BackgroundCard/BackgroundCard.tsx b/src/sub-blocks/BackgroundCard/BackgroundCard.tsx
@@ -1,12 +1,14 @@
-import React from 'react';
+import React, {useMemo} from 'react';
 
 import {useUniqId} from '@gravity-ui/uikit';
 
-import {BackgroundImage, Buttons, CardBase, Links} from '../../components/';
+import {BackgroundImage, CardBase} from '../../components/';
 import {useTheme} from '../../context/theme';
 import {BackgroundCardProps} from '../../models';
 import {block, getThemedValue} from '../../utils';
+import renderContentControls from '../../utils/renderContentControls/renderContentControls';
 import Content from '../Content/Content';
+import renderCardFooterControlsContainer from '../renderCardFooterControlsContainer/renderCardFooterControlsContainer';
 
 import './BackgroundCard.scss';
 
@@ -37,6 +39,20 @@ const BackgroundCard = (props: BackgroundCardProps) => {
     const borderType = hasBackgroundColor ? 'none' : border;
     const areControlsInFooter = !paddingBottom && controlPosition === 'footer';
 
+    const footerControls = useMemo(
+        () =>
+            renderContentControls(
+                {
+                    links: areControlsInFooter ? links : undefined,
+                    buttons: areControlsInFooter ? buttons : undefined,
+                    size: 's',
+                    titleId,
+                },
+                renderCardFooterControlsContainer,
+            ),
+        [areControlsInFooter, links, buttons, titleId],
+    );
+
     return (
         <CardBase
             className={b({padding: paddingBottom, theme: cardTheme})}
@@ -45,7 +61,7 @@ const BackgroundCard = (props: BackgroundCardProps) => {
             analyticsEvents={analyticsEvents}
             urlTitle={urlTitle}
         >
-            <CardBase.Content key="content">
+            <CardBase.Content>
                 <BackgroundImage
                     className={b('image')}
                     {...getThemedValue(background, theme)}
@@ -63,17 +79,7 @@ const BackgroundCard = (props: BackgroundCardProps) => {
                     colSizes={{all: 12, md: 12}}
                 />
             </CardBase.Content>
-            {areControlsInFooter && (links || buttons) && (
-                <CardBase.Footer className={b('footer')} key="footer">
-                    <Links className={b('links')} size="s" links={links} titleId={titleId} />
-                    <Buttons
-                        className={b('buttons')}
-                        size="s"
-                        buttons={buttons}
-                        titleId={titleId}
-                    />
-                </CardBase.Footer>
-            )}
+            {footerControls}
         </CardBase>
     );
 };

diff --git a/src/sub-blocks/BackgroundCard/__stories__/BackgroundCard.stories.tsx b/src/sub-blocks/BackgroundCard/__stories__/BackgroundCard.stories.tsx
@@ -107,7 +107,7 @@ const ControlPositionTemplate: StoryFn<BackgroundCardProps> = (args) => (
     <Grid>
         <ConstructorRow>
             <BlockBase>
-                <CardLayout title="With controlPosition = content" animated={false}>
+                <CardLayout title={data.cardLayout.contentTitle} animated={false}>
                     {data.cardLayout.items.map((item, index) => (
                         <BackgroundCard
                             key={index}
@@ -120,8 +120,8 @@ const ControlPositionTemplate: StoryFn<BackgroundCardProps> = (args) => (
             </BlockBase>
             <BlockBase>
                 <CardLayout
-                    title="With controlPosition = footer"
-                    description="Please note that the controlPosition prop manages the position of buttons and links only when paddingBottom = default."
+                    title={data.cardLayout.footerTitle}
+                    description={data.cardLayout.footerDescription}
                     animated={false}
                 >
                     {data.cardLayout.items.map((item, index) => (

diff --git a/src/sub-blocks/BackgroundCard/__stories__/data.json b/src/sub-blocks/BackgroundCard/__stories__/data.json
@@ -119,6 +119,9 @@
     ]
   },
   "cardLayout": {
+    "contentTitle": "With controlPosition = content",
+    "footerTitle": "With controlPosition = footer",
+    "footerDescription": "Please note that the controlPosition prop manages the position of buttons and links only when paddingBottom = default.",
     "items": [
       {
         "title": "Lorem ipsumt",

diff --git a/src/sub-blocks/BasicCard/BasicCard.scss b/src/sub-blocks/BasicCard/BasicCard.scss
@@ -7,12 +7,4 @@ $block: '.#{$ns}basic-card';
     @include add-specificity(&) {
         min-height: auto;
     }
-
-    &__footer {
-        margin-top: 0px;
-    }
-    &__links,
-    &__buttons {
-        margin-top: $indentXS;
-    }
 }
diff --git a/src/sub-blocks/BasicCard/BasicCard.tsx b/src/sub-blocks/BasicCard/BasicCard.tsx
@@ -1,12 +1,14 @@
-import React from 'react';
+import React, {useMemo} from 'react';
 
 import {useUniqId} from '@gravity-ui/uikit';
 
-import {Buttons, CardBase, IconWrapper, Links} from '../../components';
+import {CardBase, IconWrapper} from '../../components';
 import {BasicCardProps} from '../../models';
 import {IconPosition} from '../../models/constructor-items/sub-blocks';
 import {block} from '../../utils';
+import renderContentControls from '../../utils/renderContentControls/renderContentControls';
 import Content from '../Content/Content';
+import renderCardFooterControlsContainer from '../renderCardFooterControlsContainer/renderCardFooterControlsContainer';
 
 import './BasicCard.scss';
 
@@ -28,14 +30,27 @@ const BasicCard = (props: BasicCardProps) => {
     const titleId = useUniqId();
     const descriptionId = useUniqId();
     const areControlsInFooter = controlPosition === 'footer';
+    const footerControls = useMemo(
+        () =>
+            renderContentControls(
+                {
+                    links: areControlsInFooter ? links : undefined,
+                    buttons: areControlsInFooter ? buttons : undefined,
+                    size: 's',
+                    titleId,
+                },
+                renderCardFooterControlsContainer,
+            ),
+        [areControlsInFooter, links, buttons, titleId],
+    );
 
     return (
         <CardBase
             className={b()}
             {...cardParams}
             extraProps={{'aria-describedby': descriptionId, 'aria-labelledby': titleId}}
         >
-            <CardBase.Content key="content">
+            <CardBase.Content>
                 <IconWrapper icon={icon ? {value: icon, position: iconPosition} : undefined}>
                     <Content
                         title={title}
@@ -51,17 +66,7 @@ const BasicCard = (props: BasicCardProps) => {
                     />
                 </IconWrapper>
             </CardBase.Content>
-            {areControlsInFooter && (links || buttons) && (
-                <CardBase.Footer className={b('footer')} key="footer">
-                    <Links className={b('links')} size="s" links={links} titleId={titleId} />
-                    <Buttons
-                        className={b('buttons')}
-                        size="s"
-                        buttons={buttons}
-                        titleId={titleId}
-                    />
-                </CardBase.Footer>
-            )}
+            {footerControls}
         </CardBase>
     );
 };

diff --git a/src/sub-blocks/BasicCard/__stories__/BasicCard.stories.tsx b/src/sub-blocks/BasicCard/__stories__/BasicCard.stories.tsx
@@ -118,7 +118,7 @@ const ControlPositionTemplate: StoryFn<BasicCardProps> = (args) => (
     <Grid>
         <ConstructorRow>
             <BlockBase>
-                <CardLayout title="With controlPosition = content" animated={false}>
+                <CardLayout title={data.cardLayout.contentTitle} animated={false}>
                     {data.cardLayout.items.map((item, index) => (
                         <BasicCard
                             key={index}
@@ -130,7 +130,7 @@ const ControlPositionTemplate: StoryFn<BasicCardProps> = (args) => (
                 </CardLayout>
             </BlockBase>
             <BlockBase>
-                <CardLayout title="With controlPosition = footer" animated={false}>
+                <CardLayout title={data.cardLayout.footerTitle} animated={false}>
                     {data.cardLayout.items.map((item, index) => (
                         <BasicCard
                             key={index}

diff --git a/src/sub-blocks/BasicCard/__stories__/data.json b/src/sub-blocks/BasicCard/__stories__/data.json
@@ -72,6 +72,8 @@
     }
   },
   "cardLayout": {
+    "contentTitle": "With controlPosition = content",
+    "footerTitle": "With controlPosition = footer",
     "items": [
       {
         "icon": "/story-assets/icon_1_light.svg",

diff --git a/src/sub-blocks/Content/Content.scss b/src/sub-blocks/Content/Content.scss
@@ -87,9 +87,7 @@ $darkSecondary: var(--g-color-text-dark-secondary);
                 }
             }
 
-            #{$block}__list,
-            #{$block}__links,
-            #{$block}__buttons {
+            #{$block}__list {
                 margin-top: $indentXS;
             }
         }
@@ -112,9 +110,7 @@ $darkSecondary: var(--g-color-text-dark-secondary);
                 @include text-size(body-3);
             }
 
-            #{$block}__list,
-            #{$block}__links,
-            #{$block}__buttons {
+            #{$block}__list {
                 margin-top: $indentSM;
             }
         }

diff --git a/src/sub-blocks/Content/Content.tsx b/src/sub-blocks/Content/Content.tsx
@@ -1,13 +1,14 @@
-import React from 'react';
+import React, {useMemo} from 'react';
 
 import {useUniqId} from '@gravity-ui/uikit';
 
-import {Buttons, ContentList, Links, Title, YFMWrapper} from '../../components';
+import {ContentList, Title, YFMWrapper} from '../../components';
 import {Col} from '../../grid';
 import {ClassNameProps, ContentBlockProps, ContentSize, TitleItemProps} from '../../models';
 import {QAProps} from '../../models/common';
 import {block} from '../../utils';
 import {getQaAttrubutes} from '../../utils/blocks';
+import renderContentControls from '../../utils/renderContentControls/renderContentControls';
 
 import './Content.scss';
 
@@ -53,6 +54,18 @@ const Content = (props: ContentProps) => {
     const defaultTitleId = useUniqId();
     const titleId = titleIdFromProps || defaultTitleId;
 
+    const controls = useMemo(
+        () =>
+            renderContentControls({
+                size,
+                links,
+                buttons,
+                titleId,
+                qa: qaAttributes,
+            }),
+        [size, links, buttons, titleId, qa],
+    );
+
     return (
         <Col
             className={b({size, centered, theme}, className)}
@@ -94,22 +107,7 @@ const Content = (props: ContentProps) => {
                     />
                 </div>
             )}
-            <Links
-                className={b('links')}
-                size={size}
-                links={links}
-                titleId={titleId}
-                qa={qaAttributes.links}
-                linkQa={qaAttributes.link}
-            />
-            <Buttons
-                className={b('buttons')}
-                titleId={titleId}
-                buttons={buttons}
-                size={size}
-                qa={qaAttributes.buttons}
-                buttonQa={qaAttributes.button}
-            />
+            {controls}
         </Col>
     );
 };

diff --git a/src/sub-blocks/LayoutItem/LayoutItem.scss b/src/sub-blocks/LayoutItem/LayoutItem.scss
@@ -30,9 +30,4 @@ $block: '.#{$ns}layout-item';
             margin: 0;
         }
     }
-
-    &__links,
-    &__buttons {
-        margin-top: $indentXS;
-    }
 }
diff --git a/src/sub-blocks/LayoutItem/LayoutItem.tsx b/src/sub-blocks/LayoutItem/LayoutItem.tsx
@@ -1,10 +1,11 @@
-import React, {Fragment, useMemo} from 'react';
+import React, {useMemo} from 'react';
 
 import {useUniqId} from '@gravity-ui/uikit';
 
-import {Buttons, FullscreenMedia, IconWrapper, Links, Media, MetaInfo} from '../../components';
+import {FullscreenMedia, IconWrapper, Media, MetaInfo} from '../../components';
 import {ContentBlockProps, LayoutItemProps} from '../../models';
 import {block} from '../../utils';
+import renderContentControls from '../../utils/renderContentControls/renderContentControls';
 import Content from '../Content/Content';
 
 import {getLayoutItemLinks, hasFullscreen, showFullscreenIcon} from './utils';
@@ -34,7 +35,16 @@ const LayoutItem = ({
         colSizes: {all: 12, md: 12},
     };
     const titleId = useUniqId();
-
+    const footerControls = useMemo(
+        () =>
+            renderContentControls({
+                links: areControlsInFooter ? links : undefined,
+                buttons: areControlsInFooter ? buttons : undefined,
+                size: 's',
+                titleId,
+            }),
+        [areControlsInFooter, links, buttons, titleId],
+    );
     const renderMedia = () => {
         if (!media) {
             return null;
@@ -67,22 +77,7 @@ const LayoutItem = ({
                     <Content {...contentProps} titleId={titleId} />
                 </IconWrapper>
             </div>
-            {areControlsInFooter && (links || buttons) && (
-                <Fragment>
-                    <Links
-                        className={b('links')}
-                        links={normalizedLinks}
-                        size="s"
-                        titleId={titleId}
-                    />
-                    <Buttons
-                        className={b('buttons')}
-                        buttons={buttons}
-                        size="s"
-                        titleId={titleId}
-                    />
-                </Fragment>
-            )}
+            {footerControls}
         </div>
     );
 };

diff --git a/src/sub-blocks/LayoutItem/__stories__/LayoutItem.stories.tsx b/src/sub-blocks/LayoutItem/__stories__/LayoutItem.stories.tsx
@@ -40,7 +40,7 @@ const ControlPositionTemplate: StoryFn<LayoutItemProps> = (args) => (
     <Grid>
         <ConstructorRow>
             <BlockBase>
-                <CardLayout title="With controlPosition = content" animated={false}>
+                <CardLayout title={data.cardLayout.contentTitle} animated={false}>
                     {data.cardLayout.items.map((item, index) => (
                         <LayoutItem
                             key={index}
@@ -52,7 +52,7 @@ const ControlPositionTemplate: StoryFn<LayoutItemProps> = (args) => (
                 </CardLayout>
             </BlockBase>
             <BlockBase>
-                <CardLayout title="With controlPosition = footer" animated={false}>
+                <CardLayout title={data.cardLayout.footerTitle} animated={false}>
                     {data.cardLayout.items.map((item, index) => (
                         <LayoutItem
                             key={index}

diff --git a/src/sub-blocks/LayoutItem/__stories__/data.json b/src/sub-blocks/LayoutItem/__stories__/data.json
@@ -43,6 +43,8 @@
     }
   },
   "cardLayout": {
+    "contentTitle": "With controlPosition = content",
+    "footerTitle": "With controlPosition = footer",
     "items": [
       {
         "media": {

diff --git a/src/sub-blocks/renderCardFooterControlsContainer/CardFooterControlsContainer.scss b/src/sub-blocks/renderCardFooterControlsContainer/CardFooterControlsContainer.scss
@@ -0,0 +1,7 @@
+@import '../../../styles/variables.scss';
+
+$block: '.#{$ns}card-footer-controls';
+
+#{$block} {
+    margin-top: 0px;
+}