Add size prop for <Card> (#110)

ekaterinburgdev · Jun 19, 2024 · 66cc61f · 66cc61f
1 parent 3e3d953
commit 66cc61f
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 15 deletions.
diff --git a/client/api/main-page/main-page.types.ts b/client/api/main-page/main-page.types.ts
@@ -1,4 +1,5 @@
 export type TCardType = "public" | "car" | "pedestrian" | "other";
+export type TCardSize = "large" | "small";
 
 export type background = {
     data: {
@@ -32,6 +33,7 @@ export interface Card {
         backgroundImage: background;
         backgroundImageHover: background;
         type: TCardType;
+        size: TCardSize;
         priority: number;
         cardId: null;
         headerCaption: null | string;

diff --git a/client/components/MainPage/Card/Card.module.css b/client/components/MainPage/Card/Card.module.css
@@ -42,6 +42,18 @@
     }
 }
 
+.Card_Size-small {
+    aspect-ratio: 1 / 1;
+    max-width: 100%;
+}
+
+.Card_Size-large {
+    grid-area: span 1 / span 2;
+    aspect-ratio: 2 / 1;
+    align-self: stretch;
+}
+
+
 .Card_Public {
     background-color: var(--cards-public-bg);
     color: var(--cards-public-text);

diff --git a/client/components/MainPage/Card/Card.tsx b/client/components/MainPage/Card/Card.tsx
@@ -22,6 +22,7 @@ export function Card({
     titleBackgroundColor,
     type,
     url,
+    size,
     backgroundImage,
     backgroundImageHover,
     dynamicContent,
@@ -39,7 +40,7 @@ export function Card({
 
     return (
         <a
-            className={cn(styles.Card, CARD_TYPES_CLASSNAMES[type])}
+            className={cn(styles.Card, CARD_TYPES_CLASSNAMES[type], { [`${styles[`Card_Size-${size}`]}`]: size })}
             href={url}
             onClick={onClick}
             ref={cardRef}

diff --git a/client/components/MainPage/Card/Card.types.ts b/client/components/MainPage/Card/Card.types.ts
@@ -1,12 +1,13 @@
 import React, { ReactElement } from 'react';
 
-import { TCardType } from 'api/main-page/main-page.types';
+import { TCardSize, TCardType } from 'api/main-page/main-page.types';
 
 export type CardProps = {
     type: TCardType | undefined;
     title: string;
     titleBackgroundColor: string;
     url: string;
+    size: TCardSize | undefined,
     backgroundImage: string;
     backgroundImageHover: string;
     headerCaption: string;

diff --git a/client/components/MainPage/MainPage.module.css b/client/components/MainPage/MainPage.module.css
@@ -88,19 +88,6 @@
     }
 }
 
-.MainPageCardGrid > * {
-    aspect-ratio: 1 / 1;
-    max-width: 100%;
-}
-
-.MainPageCardGrid > *:first-child,
-.MainPageCardGrid > *:nth-last-child(3) {
-    grid-area: span 1 / span 2;
-    aspect-ratio: 2 / 1;
-    align-self: stretch;
-}
-
-
 @media screen and (min-width: 991px) {
     .MainPageLogo {
         margin: 0 auto 0.7em 0.5em;

diff --git a/client/components/MainPage/MainPage.tsx b/client/components/MainPage/MainPage.tsx
@@ -122,6 +122,7 @@ export function MainPage({ cards, cardsDynamicData, marqueeItems, articles }: Ma
                                     headerCaption={attributes.headerCaption}
                                     footerCaption={attributes.footerCaption}
                                     dynamicContent={getDynamicContent(attributes.dynamicId)}
+                                    size={attributes.size}
                                     key={id}
                                     onClick={
                                         attributes.url.startsWith('/')