fix: card improvments (#180)

HCRC-116
City-of-Helsinki · Jun 18, 2024 · 3877900 · 3877900
1 parent d11cb5d
commit 3877900
Show file tree

Hide file tree

Showing 6 changed files with 138 additions and 46 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-helsinki-headless-cms",
-  "version": "1.0.0-alpha280",
+  "version": "1.0.0-alpha283",
   "description": "React components for displaying Headless CMS content according to guidelines set by HDS",
   "main": "cjs/index.js",
   "module": "index.js",

diff --git a/src/core/card/Card.stories.tsx b/src/core/card/Card.stories.tsx
@@ -86,11 +86,22 @@ export const CardWithImageLabel = {
   },
 };
 
+export const CardCentered = {
+  render: Template,
+  args: {
+    ...card,
+    alignment: 'center-left',
+    text: 'Custom text contents',
+  },
+};
+
 export const CardDelimited = {
   render: Template,
   args: {
     ...card,
-    isDelimited: true,
+    alignment: 'delimited-left',
+    withBorder: false,
     text: 'Custom text contents',
+    direction: 'responsive-reverse',
   },
 };
diff --git a/src/core/card/Card.tsx b/src/core/card/Card.tsx
@@ -13,6 +13,20 @@ import { BackgroundImage } from '../image/BackgroundImage';
 import { getColor, getTextFromHtml, isWhiteText } from '../utils/string';
 import { useConfig } from '../configProvider/useConfig';
 
+export type CardDirection =
+  | 'fixed-horisontal'
+  | 'fixed-vertical'
+  | 'responsive'
+  | 'responsive-reverse';
+
+export type CardAlignment =
+  | 'left'
+  | 'right'
+  | 'center-left'
+  | 'center-right'
+  | 'delimited-left'
+  | 'delimited-right';
+
 export type CardProps = {
   id?: string;
   ariaLabel?: string;
@@ -30,13 +44,8 @@ export type CardProps = {
   url?: string;
   withBorder?: boolean;
   withShadow?: boolean;
-  direction?:
-    | 'fixed-horisontal'
-    | 'fixed-vertical'
-    | 'responsive'
-    | 'responsive-reverse';
-  imagePosition?: 'image-left' | 'image-right';
-  isDelimited?: boolean;
+  direction?: CardDirection;
+  alignment?: CardAlignment;
   clampText?: boolean;
   openLinkInNewTab?: boolean;
   style?: React.CSSProperties;
@@ -46,6 +55,7 @@ export type CardProps = {
 
 export function Card({
   id,
+  alignment,
   ariaLabel,
   className,
   imageUrl,
@@ -62,8 +72,6 @@ export function Card({
   withBorder,
   withShadow,
   direction = 'responsive',
-  imagePosition = 'image-left',
-  isDelimited = false,
   clampText,
   openLinkInNewTab,
   style,
@@ -72,6 +80,17 @@ export function Card({
 }: CardProps) {
   const [isHovered, setIsHovered] = useState(false);
   const handleToggleActive = () => setIsHovered((val) => !val);
+  const isDelimited = alignment?.startsWith('delimited');
+  const isCentered = alignment?.startsWith('center');
+
+  const getImagePosition = () => {
+    if (alignment === undefined) {
+      return 'image-left';
+    }
+    return alignment.indexOf('left') === -1 ? 'image-right' : 'image-left';
+  };
+
+  const imagePosition = getImagePosition();
 
   const {
     utils: { redirectToUrl, getIsHrefExternal },
@@ -102,14 +121,13 @@ export function Card({
         primaryContent === 'image' && styles['primary-image'],
         imagePosition && styles[imagePosition],
         isHovered && styles.isHovered,
-        backgroundColor
-          ? colorStyles[`background${getColor(backgroundColor)}`]
-          : isDelimited && colorStyles.backgroundFog,
+
         backgroundColor && styles.horizontalBorder,
         backgroundColor &&
           isWhiteText(backgroundColor) &&
           colorStyles.whiteText,
         isDelimited && styles.isDelimited,
+        isCentered && styles.isCentered,
       )}
       style={style}
       onMouseEnter={handleToggleActive}
@@ -123,13 +141,16 @@ export function Card({
           styles.imageWrapper,
           direction && styles[direction],
           isDelimited && styles.isDelimited,
+          isCentered && styles.isCentered,
+          imagePosition.includes('left') ? styles.left : styles.right,
         )}
       />
 
       <div
         className={classNames(
           styles.contentWrapper,
           isDelimited && styles.isDelimited,
+          isCentered && styles.isCentered,
         )}
         onClick={handleClick}
       >
@@ -138,11 +159,12 @@ export function Card({
             styles.content,
             backgroundColor
               ? colorStyles[`background${getColor(backgroundColor)}`]
-              : isDelimited && colorStyles.backgroundFog,
+              : colorStyles.backgroundDefault,
             backgroundColor &&
               isWhiteText(backgroundColor) &&
               colorStyles.whiteText,
             isDelimited && styles.isDelimited,
+            isCentered && styles.isCentered,
           )}
         >
           <div className={styles.textWrapper}>
@@ -157,7 +179,18 @@ export function Card({
                 {withTitleIcon && titleIcon}
               </div>
             )}
-            {subTitle && <div className={styles.subTitle}>{subTitle}</div>}
+            {subTitle && (
+              <div
+                className={classNames(
+                  styles.subTitle,
+                  backgroundColor &&
+                    isWhiteText(backgroundColor) &&
+                    colorStyles.whiteText,
+                )}
+              >
+                {subTitle}
+              </div>
+            )}
             {text && (
               <div
                 className={classNames(
@@ -180,10 +213,10 @@ export function Card({
               styles.buttonWrapper,
               backgroundColor
                 ? colorStyles[`background${getColor(backgroundColor)}`]
-                : isDelimited && colorStyles.backgroundFog,
+                : (isDelimited || isCentered) && colorStyles.backgroundDefault,
               backgroundColor &&
                 isWhiteText(backgroundColor) &&
-                colorStyles.whiteText,
+                colorStyles.whiteLink,
             )}
           >
             <Link

diff --git a/src/core/card/card.module.scss b/src/core/card/card.module.scss
@@ -14,6 +14,7 @@
 
   @include respond_above(s) {
     word-break: unset;
+    &.isCentered,
     &.isDelimited {
       overflow-y: hidden;
       --height-image-desktop: 100%;
@@ -41,18 +42,25 @@
   }
 
   &.fixed-horisontal {
-    display: flex;
-    flex-direction: row;
+    &.isCentered,
     &.isDelimited {
       flex-direction: row-reverse;
     }
 
     &.image-right {
       flex-direction: row-reverse;
+      &.isCentered,
       &.isDelimited {
         flex-direction: row;
       }
     }
+    &.image-left {
+      flex-direction: row;
+      &.isCentered,
+      &.isDelimited {
+        flex-direction: row-reverse;
+      }
+    }
   }
 
   & > :first-child {
@@ -73,21 +81,20 @@
     }
   }
 
+  &.isCentered,
   &.isDelimited {
-    & > :first-child {
-      flex: none;
-    }
-
-    & > :last-child {
-      flex: none;
-    }
+    @include respond_above(s) {
+      & > :first-child {
+        flex: none;
+      }
 
-    @include respond_below(s) {
-      background-color: var(--color-white);
+      & > :last-child {
+        flex: none;
+      }
     }
   }
 
-  background-color: var(--color-white);
+  // background-color: var(--color-white);
   height: 100%;
   width: 100%;
   text-decoration: none;
@@ -107,17 +114,27 @@
       flex-direction: column;
       &.image-right {
         flex-direction: column;
+        &.isCentered,
+        &.isDelimited {
+          flex-direction: row;
+        }
+      }
+      &.isCentered,
+      &.isDelimited {
+        flex-direction: row-reverse;
       }
     }
 
     &.responsive-reverse {
       flex-direction: row;
+      &.isCentered,
       &.isDelimited {
         flex-direction: row-reverse;
       }
 
       &.image-right {
         flex-direction: row-reverse;
+        &.isCentered,
         &.isDelimited {
           flex-direction: row;
         }
@@ -154,13 +171,13 @@
     }
 
     &.responsive,
+    &.isCentered,
     &.isDelimited {
       &.horizontalBorder {
         // overriding withborder param
         border: 1px solid var(--color-black-30);
         @include respond_below(s) {
           border: none;
-          // border: 1px solid var(--color-black-30);
         }
       }
     }
@@ -202,13 +219,35 @@
       }
     }
 
+    &.isCentered,
     &.isDelimited {
       @include respond_above(s) {
         position: absolute;
         width: 100%;
       }
     }
 
+    &.isDelimited {
+      @include respond_above(s) {
+        width: 62.5%;
+        &.left {
+          margin-right: 37.5%;
+        }
+        &.right {
+          margin-left: 37.5%;
+        }
+        @include respond_above(l) {
+          width: 80%;
+          &.left {
+            margin-right: 20%;
+          }
+          &.right {
+            margin-left: 20%;
+          }
+        }
+      }
+    }
+
     @include respond_above(s) {
       min-height: var(--height-image-desktop);
     }
@@ -227,26 +266,33 @@
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    height: 100%;
     position: relative;
+    align-self: stretch;
 
     @include respond_below(s) {
       background-color: var(--color-white) !important;
     }
 
     @include respond_above(s) {
+      &.isCentered,
       &.isDelimited {
         margin: 24px;
         width: 37.5%;
         z-index: 1;
       }
+      &.isDelimited {
+        width: 62.5%;
+        max-width: 460px;
+        margin: 42px 24px;
+      }
     }
   }
 
   .content {
+    flex: 1;
     @include respond_above(s) {
-      min-height: var(--height-image-desktop);
-      height: 100%;
+      // min-height: var(--height-image-desktop);
+      // height: 100%;
     }
   }
 
@@ -256,7 +302,7 @@
     padding: var(--spacing-s) var(--spacing-m);
 
     @include respond_below(s) {
-      background-color: var(--color-white);
+      // background-color: var(--color-white);
     }
 
     .title {
@@ -336,10 +382,6 @@
     padding-bottom: var(--spacing-2-xs);
     color: var(--link-arrow-color);
 
-    @include respond_below(s) {
-      background-color: var(--color-white);
-    }
-
     @include respond_above(s) {
       padding-bottom: var(--spacing-s);
     }