fix(Content): revert renderСontentControls adding (#840)

* fix(Content): revert renderСontentControls adding * fix(LayoutItem): simplify controls layout
gravity-ui · Mar 4, 2024 · bce23b3 · bce23b3
1 parent 58e98ea
commit bce23b3
Show file tree

Hide file tree

Showing 12 changed files with 84 additions and 152 deletions.
diff --git a/src/sub-blocks/BackgroundCard/BackgroundCard.scss b/src/sub-blocks/BackgroundCard/BackgroundCard.scss
@@ -55,6 +55,15 @@ $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,14 +1,12 @@
-import React, {useMemo} from 'react';
+import React from 'react';
 
 import {useUniqId} from '@gravity-ui/uikit';
 
-import {BackgroundImage, CardBase} from '../../components/';
+import {BackgroundImage, Buttons, CardBase, Links} 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';
 
@@ -39,20 +37,6 @@ 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})}
@@ -79,7 +63,17 @@ const BackgroundCard = (props: BackgroundCardProps) => {
                     colSizes={{all: 12, md: 12}}
                 />
             </CardBase.Content>
-            {footerControls}
+            {areControlsInFooter && (links || buttons) && (
+                <CardBase.Footer>
+                    <Links className={b('links')} size="s" links={links} titleId={titleId} />
+                    <Buttons
+                        className={b('buttons')}
+                        size="s"
+                        buttons={buttons}
+                        titleId={titleId}
+                    />
+                </CardBase.Footer>
+            )}
         </CardBase>
     );
 };

diff --git a/src/sub-blocks/BasicCard/BasicCard.scss b/src/sub-blocks/BasicCard/BasicCard.scss
@@ -7,4 +7,13 @@ $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,14 +1,12 @@
-import React, {useMemo} from 'react';
+import React from 'react';
 
 import {useUniqId} from '@gravity-ui/uikit';
 
-import {CardBase, IconWrapper} from '../../components';
+import {Buttons, CardBase, IconWrapper, Links} 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';
 
@@ -30,19 +28,6 @@ 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
@@ -66,7 +51,17 @@ const BasicCard = (props: BasicCardProps) => {
                     />
                 </IconWrapper>
             </CardBase.Content>
-            {footerControls}
+            {areControlsInFooter && (buttons || links) && (
+                <CardBase.Footer className={b('footer')}>
+                    <Links className={b('links')} size="s" links={links} titleId={titleId} />
+                    <Buttons
+                        className={b('buttons')}
+                        size="s"
+                        buttons={buttons}
+                        titleId={titleId}
+                    />
+                </CardBase.Footer>
+            )}
         </CardBase>
     );
 };

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

diff --git a/src/sub-blocks/Content/Content.tsx b/src/sub-blocks/Content/Content.tsx
@@ -1,14 +1,13 @@
-import React, {useMemo} from 'react';
+import React from 'react';
 
 import {useUniqId} from '@gravity-ui/uikit';
 
-import {ContentList, Title, YFMWrapper} from '../../components';
+import {Buttons, ContentList, Links, 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';
 
@@ -54,18 +53,6 @@ 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, qaAttributes],
-    );
-
     return (
         <Col
             className={b({size, centered, theme}, className)}
@@ -107,7 +94,26 @@ const Content = (props: ContentProps) => {
                     />
                 </div>
             )}
-            {controls}
+            {links && (
+                <Links
+                    className={b('links', {size})}
+                    size={size}
+                    links={links}
+                    titleId={titleId}
+                    qa={qaAttributes.links}
+                    linkQa={qaAttributes.link}
+                />
+            )}
+            {buttons && (
+                <Buttons
+                    className={b('buttons', {size})}
+                    size={size}
+                    buttons={buttons}
+                    titleId={titleId}
+                    qa={qaAttributes.buttons}
+                    buttonQa={qaAttributes.button}
+                />
+            )}
         </Col>
     );
 };

diff --git a/src/sub-blocks/LayoutItem/LayoutItem.scss b/src/sub-blocks/LayoutItem/LayoutItem.scss
@@ -30,4 +30,9 @@ $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
@@ -2,10 +2,9 @@ import React, {useMemo} from 'react';
 
 import {useUniqId} from '@gravity-ui/uikit';
 
-import {FullscreenMedia, IconWrapper, Media, MetaInfo} from '../../components';
+import {Buttons, FullscreenMedia, IconWrapper, Links, 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';
@@ -35,16 +34,6 @@ 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;
@@ -77,7 +66,12 @@ const LayoutItem = ({
                     <Content {...contentProps} titleId={titleId} />
                 </IconWrapper>
             </div>
-            {footerControls}
+            {areControlsInFooter && links && (
+                <Links className={b('links')} size="s" links={links} titleId={titleId} />
+            )}
+            {areControlsInFooter && buttons && (
+                <Buttons className={b('buttons')} size="s" buttons={buttons} titleId={titleId} />
+            )}
         </div>
     );
 };

diff --git a/src/sub-blocks/renderCardFooterControlsContainer/CardFooterControlsContainer.scss b/src/sub-blocks/renderCardFooterControlsContainer/CardFooterControlsContainer.scss
diff --git a/src/sub-blocks/renderCardFooterControlsContainer/renderCardFooterControlsContainer.tsx b/src/sub-blocks/renderCardFooterControlsContainer/renderCardFooterControlsContainer.tsx
diff --git a/src/utils/renderContentControls/ContentControls.scss b/src/utils/renderContentControls/ContentControls.scss
diff --git a/src/utils/renderContentControls/renderContentControls.tsx b/src/utils/renderContentControls/renderContentControls.tsx