fix: card height in carousel (#202)

City-of-Helsinki · Dec 19, 2024 · cc27af1 · cc27af1
1 parent b626d7e
commit cc27af1
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 3 deletions.
diff --git a/src/core/card/Card.tsx b/src/core/card/Card.tsx
@@ -120,6 +120,10 @@ export type CardProps = {
    * Defines the width ratio for the text and image element in the card. Primary is wider.
    */
   primaryContent?: 'image' | 'text';
+  /**
+   * Boolean indicating whether flex attribute should be added to the container of the link.
+   */
+  flex?: boolean;
 };
 
 export function Card({
@@ -146,6 +150,7 @@ export function Card({
   style,
   backgroundColor,
   primaryContent = 'text',
+  flex,
 }: CardProps) {
   const [isHovered, setIsHovered] = useState(false);
   const handleToggleActive = () => setIsHovered((val) => !val);
@@ -316,6 +321,7 @@ export function Card({
         openInNewTab={openLinkInNewTab}
         onMouseEnter={handleToggleActive}
         onMouseLeave={handleToggleActive}
+        flex={flex}
       >
         {content}
       </LinkBox>

diff --git a/src/core/card/LargeCard.tsx b/src/core/card/LargeCard.tsx
@@ -69,6 +69,10 @@ export type LargeCardProps = {
    *  Boolean indicating whether the border styles should be applied to the Card.
    */
   withBorder?: boolean;
+  /**
+   * Boolean indicating whether flex attribute should be added to the container of the link.
+   */
+  flex?: boolean;
 };
 
 export function LargeCard({
@@ -87,6 +91,7 @@ export function LargeCard({
   clampText,
   openInNewTab,
   withBorder,
+  flex,
 }: LargeCardProps) {
   const [isHovered, setIsHovered] = useState(false);
   const handleToggleActive = () => setIsHovered((val) => !val);
@@ -142,6 +147,7 @@ export function LargeCard({
           openInNewTab={openInNewTab}
           onMouseEnter={handleToggleActive}
           onMouseLeave={handleToggleActive}
+          flex={flex}
         >
           {content}
         </LinkBox>

diff --git a/src/core/linkBox/LinkBox.module.scss b/src/core/linkBox/LinkBox.module.scss
@@ -3,6 +3,11 @@
   position: relative;
   height: 100%;
   width: 100%;
+
+  &.flex {
+    display: flex;
+  }
+
   a:focus {
     border: 2px solid var(--color-black-90);
     outline: none;

diff --git a/src/core/linkBox/LinkBox.tsx b/src/core/linkBox/LinkBox.tsx
@@ -18,18 +18,22 @@ export type LinkProps = Omit<React.ComponentPropsWithoutRef<'a'>, 'target'> & {
    * Boolean indicating whether the link should be opened in a new tab.
    */
   openInNewTab?: boolean;
+  /**
+   * Boolean indicating whether flex attribute should be added to the container of the link.
+   */
+  flex?: boolean;
 };
 
 // TODO: this component should be replaced with hds one, when all layouts and directions are supported
 // issue is created to hds: https://github.com/City-of-Helsinki/helsinki-design-system/issues/809
 
-export function LinkBox({ children, ...delegatedProps }: LinkProps) {
+export function LinkBox({ children, flex, ...delegatedProps }: LinkProps) {
   return (
-    <div className={styles.linkBoxWrapper}>
+    <div className={classNames(styles.linkBoxWrapper, flex && styles.flex)}>
       {children}
       <Link
         {...delegatedProps}
-        className={classNames(styles.linkBox)}
+        className={styles.linkBox}
         showExternalIcon={false}
       />
     </div>