fix: comments

gravity-ui · Feb 27, 2024 · f257426 · f257426
1 parent 34ef8b1
commit f257426
Show file tree

Hide file tree

Showing 11 changed files with 81 additions and 74 deletions.
diff --git a/src/components/Buttons/Buttons.tsx b/src/components/Buttons/Buttons.tsx
@@ -27,14 +27,7 @@ function getButtonSize(size: ContentSize) {
     }
 }
 
-export const Buttons: React.FC<ButtonsProps> = ({
-    className,
-    titleId,
-    buttons,
-    size = 's',
-    qa,
-    buttonQa,
-}) =>
+const Buttons: React.FC<ButtonsProps> = ({className, titleId, buttons, size = 's', qa, buttonQa}) =>
     buttons ? (
         <div className={b({size}, className)} data-qa={qa}>
             {buttons.map((item) => (
@@ -52,3 +45,5 @@ export const Buttons: React.FC<ButtonsProps> = ({
             ))}
         </div>
     ) : null;
+
+export default Buttons;
diff --git a/src/components/CardBase/CardBase.tsx b/src/components/CardBase/CardBase.tsx
@@ -1,4 +1,11 @@
-import React, {Children, Fragment, HTMLAttributeAnchorTarget, ReactElement} from 'react';
+import React, {
+    Children,
+    Fragment,
+    HTMLAttributeAnchorTarget,
+    PropsWithChildren,
+    ReactElement,
+    isValidElement,
+} from 'react';
 
 import {Link} from '@gravity-ui/uikit';
 
@@ -19,11 +26,10 @@ import RouterLink from '../RouterLink/RouterLink';
 
 import './CardBase.scss';
 
-export interface CardBaseProps extends AnalyticsEventsBase, CardBaseParams {
+export interface CardBaseProps extends AnalyticsEventsBase, CardBaseParams, PropsWithChildren {
     className?: string;
     bodyClassName?: string;
     contentClassName?: string;
-    children: ReactElement | ReactElement[];
     url?: string;
     urlTitle?: string;
     target?: HTMLAttributeAnchorTarget;
@@ -86,11 +92,11 @@ export const Layout = (props: CardBaseProps) => {
         }
     }
 
-    if (Children.count(children) === 1) {
-        handleChild(children as ReactElement);
-    } else {
-        Children.forEach(children, handleChild);
-    }
+    Children.toArray(children).forEach((child) => {
+        if (isValidElement(child)) {
+            handleChild(child);
+        }
+    });
 
     const cardContent = (
         <Fragment>

diff --git a/src/components/Links/Links.tsx b/src/components/Links/Links.tsx
@@ -27,7 +27,7 @@ type LinksProps = {
     linkQa?: string;
 };
 
-export const Links: React.FC<LinksProps> = ({className, titleId, links, size = 's', qa, linkQa}) =>
+const Links: React.FC<LinksProps> = ({className, titleId, links, size = 's', qa, linkQa}) =>
     links ? (
         <div className={b({size}, className)} data-qa={qa}>
             {links?.map((link) => (
@@ -45,3 +45,5 @@ export const Links: React.FC<LinksProps> = ({className, titleId, links, size = '
             ))}
         </div>
     ) : null;
+
+export default Links;
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -6,7 +6,7 @@ export {default as BackLink} from './BackLink/BackLink';
 export {default as BalancedMasonry} from './BalancedMasonry/BalancedMasonry';
 export {default as BlockBase} from './BlockBase/BlockBase';
 export {default as Button} from './Button/Button';
-export {Buttons} from './Buttons/Buttons';
+export {default as Buttons} from './Buttons/Buttons';
 export {default as CardBase} from './CardBase/CardBase';
 export {default as ErrorWrapper} from './ErrorWrapper/ErrorWrapper';
 export {default as FileLink} from './FileLink/FileLink';
@@ -17,7 +17,7 @@ export {default as HeaderBreadcrumbs} from './HeaderBreadcrumbs/HeaderBreadcrumb
 export {default as Image} from './Image/Image';
 export {default as ImageBase} from './ImageBase/ImageBase';
 export {default as Link} from './Link/Link';
-export {Links} from './Links/Links';
+export {default as Links} from './Links/Links';
 export {default as Media} from './Media/Media';
 export {default as OutsideClick} from './OutsideClick/OutsideClick';
 export {default as ReactPlayer} from './ReactPlayer/ReactPlayer';

diff --git a/src/models/constructor-items/common.ts b/src/models/constructor-items/common.ts
@@ -392,11 +392,16 @@ export type MediaView = 'fit' | 'full';
 // card
 export type MediaBorder = 'shadow' | 'line' | 'none';
 export type CardBorder = MediaBorder;
+export type ControlPosition = 'content' | 'footer';
 
 export interface CardBaseProps {
     border?: CardBorder;
 }
 
+export type CardLayoutProps = {
+    controlPosition?: ControlPosition;
+};
+
 //price
 export interface PriceDescriptionProps {
     title: string;

diff --git a/src/models/constructor-items/sub-blocks.ts b/src/models/constructor-items/sub-blocks.ts
@@ -9,6 +9,7 @@ import {
     ButtonPixel,
     ButtonProps,
     CardBaseProps,
+    CardLayoutProps,
     ContentTheme,
     DividerSize,
     ImageCardMargins,
@@ -134,25 +135,25 @@ export interface QuoteProps extends Themable, CardBaseProps {
 export interface BackgroundCardProps
     extends CardBaseProps,
         AnalyticsEventsBase,
+        CardLayoutProps,
         Omit<ContentBlockProps, 'colSizes' | 'centered'> {
     url?: string;
     urlTitle?: string;
     background?: ThemeSupporting<ImageObjectProps>;
     paddingBottom?: 's' | 'm' | 'l' | 'xl';
     backgroundColor?: string;
-    controlPosition?: 'content' | 'footer';
 }
 
 export interface BasicCardProps
     extends CardBaseProps,
         AnalyticsEventsBase,
+        CardLayoutProps,
         Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size' | 'theme'> {
     url: string;
     urlTitle?: string;
     icon?: ImageProps;
     target?: string;
     iconPosition?: IconPosition;
-    controlPosition?: 'content' | 'footer';
 }
 
 export interface BannerCardProps {
@@ -168,7 +169,10 @@ export interface BannerCardProps {
 
 export interface MediaCardProps extends MediaProps, AnalyticsEventsBase, CardBaseProps {}
 
-export interface PriceCardProps extends CardBaseProps, Pick<ContentBlockProps, 'theme'> {
+export interface PriceCardProps
+    extends CardBaseProps,
+        CardLayoutProps,
+        Pick<ContentBlockProps, 'theme'> {
     title: string;
     price: string;
     pricePeriod?: string;
@@ -178,17 +182,15 @@ export interface PriceCardProps extends CardBaseProps, Pick<ContentBlockProps, '
     links?: LinkProps[];
     backgroundColor?: string;
     list?: string[];
-    controlPosition?: 'content' | 'footer';
 }
 
-export interface LayoutItemProps extends ClassNameProps, AnalyticsEventsBase {
+export interface LayoutItemProps extends ClassNameProps, CardLayoutProps, AnalyticsEventsBase {
     content: Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size'>;
     media?: MediaProps;
     metaInfo?: string[];
     border?: boolean;
     fullscreen?: boolean;
     icon?: PositionedIcon;
-    controlPosition?: 'content' | 'footer';
 }
 
 export interface ImageCardProps extends CardBaseProps, Pick<ContentBlockProps, 'title' | 'text'> {

diff --git a/src/sub-blocks/BackgroundCard/BackgroundCard.tsx b/src/sub-blocks/BackgroundCard/BackgroundCard.tsx
@@ -1,4 +1,4 @@
-import React, {Fragment} from 'react';
+import React from 'react';
 
 import {useUniqId} from '@gravity-ui/uikit';
 
@@ -35,6 +35,7 @@ const BackgroundCard = (props: BackgroundCardProps) => {
     const theme = useTheme();
     const hasBackgroundColor = backgroundColor || cardTheme !== 'default';
     const borderType = hasBackgroundColor ? 'none' : border;
+    const areControlsInFooter = controlPosition === 'footer';
 
     return (
         <CardBase
@@ -44,7 +45,7 @@ const BackgroundCard = (props: BackgroundCardProps) => {
             analyticsEvents={analyticsEvents}
             urlTitle={urlTitle}
         >
-            <CardBase.Content>
+            <CardBase.Content key="content">
                 <BackgroundImage
                     className={b('image')}
                     {...getThemedValue(background, theme)}
@@ -57,24 +58,22 @@ const BackgroundCard = (props: BackgroundCardProps) => {
                     additionalInfo={additionalInfo}
                     size="s"
                     theme={cardTheme}
-                    links={controlPosition === 'content' ? links : undefined}
-                    buttons={controlPosition === 'content' ? buttons : undefined}
+                    links={areControlsInFooter ? undefined : links}
+                    buttons={areControlsInFooter ? undefined : buttons}
                     colSizes={{all: 12, md: 12}}
                 />
             </CardBase.Content>
-            <CardBase.Footer className={b('footer')}>
-                {controlPosition === 'footer' && (
-                    <Fragment>
-                        <Links className={b('links')} size="s" links={links} titleId={titleId} />
-                        <Buttons
-                            className={b('buttons')}
-                            size="s"
-                            buttons={buttons}
-                            titleId={titleId}
-                        />
-                    </Fragment>
-                )}
-            </CardBase.Footer>
+            {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>
+            )}
         </CardBase>
     );
 };

diff --git a/src/sub-blocks/BasicCard/BasicCard.tsx b/src/sub-blocks/BasicCard/BasicCard.tsx
@@ -1,11 +1,8 @@
-import React, {Fragment} from 'react';
+import React from 'react';
 
 import {useUniqId} from '@gravity-ui/uikit';
 
-import {Buttons} from '../../components/Buttons/Buttons';
-import CardBase from '../../components/CardBase/CardBase';
-import IconWrapper from '../../components/IconWrapper/IconWrapper';
-import {Links} from '../../components/Links/Links';
+import {Buttons, CardBase, IconWrapper, Links} from '../../components';
 import {BasicCardProps} from '../../models';
 import {IconPosition} from '../../models/constructor-items/sub-blocks';
 import {block} from '../../utils';
@@ -30,42 +27,41 @@ const BasicCard = (props: BasicCardProps) => {
     } = props;
     const titleId = useUniqId();
     const descriptionId = useUniqId();
+    const areControlsInFooter = controlPosition === 'footer';
 
     return (
         <CardBase
             className={b()}
             {...cardParams}
             extraProps={{'aria-describedby': descriptionId, 'aria-labelledby': titleId}}
         >
-            <CardBase.Content>
+            <CardBase.Content key="content">
                 <IconWrapper icon={icon ? {value: icon, position: iconPosition} : undefined}>
                     <Content
                         title={title}
                         titleId={titleId}
                         text={text}
                         textId={descriptionId}
                         additionalInfo={additionalInfo}
-                        links={controlPosition === 'content' ? links : undefined}
+                        links={areControlsInFooter ? undefined : links}
                         list={list}
-                        buttons={controlPosition === 'content' ? buttons : undefined}
+                        buttons={areControlsInFooter ? undefined : buttons}
                         size="s"
                         colSizes={{all: 12, md: 12}}
                     />
                 </IconWrapper>
             </CardBase.Content>
-            <CardBase.Footer className={b('footer')}>
-                {controlPosition === 'footer' && (
-                    <Fragment>
-                        <Links className={b('links')} size="s" links={links} titleId={titleId} />
-                        <Buttons
-                            className={b('buttons')}
-                            size="s"
-                            buttons={buttons}
-                            titleId={titleId}
-                        />
-                    </Fragment>
-                )}
-            </CardBase.Footer>
+            {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>
+            )}
         </CardBase>
     );
 };

diff --git a/src/sub-blocks/Content/Content.tsx b/src/sub-blocks/Content/Content.tsx
@@ -2,9 +2,7 @@ import React from 'react';
 
 import {useUniqId} from '@gravity-ui/uikit';
 
-import {ContentList, Title, YFMWrapper} from '../../components';
-import {Buttons} from '../../components/Buttons/Buttons';
-import {Links} from '../../components/Links/Links';
+import {Buttons, ContentList, Links, Title, YFMWrapper} from '../../components';
 import {Col} from '../../grid';
 import {ClassNameProps, ContentBlockProps, ContentSize, TitleItemProps} from '../../models';
 import {QAProps} from '../../models/common';

diff --git a/src/sub-blocks/LayoutItem/LayoutItem.tsx b/src/sub-blocks/LayoutItem/LayoutItem.tsx
@@ -25,10 +25,11 @@ const LayoutItem = ({
     controlPosition = 'content',
 }: LayoutItemProps) => {
     const normalizedLinks = useMemo(() => getLayoutItemLinks(links), [links]);
+    const areControlsInFooter = controlPosition === 'footer';
 
     const contentProps: ContentBlockProps = {
         ...content,
-        ...(controlPosition === 'content' ? {links: normalizedLinks, buttons} : {}),
+        ...(areControlsInFooter ? {} : {links: normalizedLinks, buttons}),
         size: 's',
         colSizes: {all: 12, md: 12},
     };
@@ -66,7 +67,7 @@ const LayoutItem = ({
                     <Content {...contentProps} titleId={titleId} />
                 </IconWrapper>
             </div>
-            {controlPosition === 'footer' && (links || buttons) && (
+            {areControlsInFooter && (links || buttons) && (
                 <Fragment>
                     <Links
                         className={b('links')}

diff --git a/src/sub-blocks/PriceCard/PriceCard.tsx b/src/sub-blocks/PriceCard/PriceCard.tsx
@@ -25,7 +25,8 @@ const PriceCard = (props: PriceCardProps) => {
         backgroundColor,
         controlPosition = 'content',
     } = props;
-    const controls = (
+    const areControlsInFooter = controlPosition === 'footer';
+    const controls = (buttons || links) && (
         <Fragment>
             <Buttons className={b('buttons')} buttons={buttons} size="s" />
             <Links className={b('links')} links={links} size="s" />
@@ -34,7 +35,7 @@ const PriceCard = (props: PriceCardProps) => {
 
     return (
         <CardBase className={b({theme})} border={border}>
-            <CardBase.Content>
+            <CardBase.Content key="content">
                 <BackgroundImage className={b('background')} style={{backgroundColor}} />
                 <div className={b('content', {theme})}>
                     <div className={b('info')}>
@@ -63,12 +64,14 @@ const PriceCard = (props: PriceCardProps) => {
                             </div>
                         ) : null}
                     </div>
-                    {controlPosition === 'content' && controls}
+                    {!areControlsInFooter && controls}
                 </div>
             </CardBase.Content>
-            <CardBase.Footer className={b('footer')}>
-                {controlPosition === 'footer' && controls}
-            </CardBase.Footer>
+            {areControlsInFooter && controls && (
+                <CardBase.Footer className={b('footer')} key="footer">
+                    {controls}
+                </CardBase.Footer>
+            )}
         </CardBase>
     );
 };