Revert "CAPY[909] Remove min width & height on BpkDividedCard (#3658)" (

#3659) This reverts commit 5678801.
Skyscanner · Oct 31, 2024 · af4433c · af4433c
1 parent 5678801
commit af4433c
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 11 deletions.
diff --git a/examples/bpk-component-card/examples.js b/examples/bpk-component-card/examples.js
@@ -110,11 +110,14 @@ const DefaultDividedCardExample = () => (
 );
 
 const VerticalDividedCardExample = () => (
-  <BpkDividedCard
-    primaryContent={longMessage}
-    secondaryContent={shortContent}
-    orientation={ORIENTATION.vertical}
-  />
+
+  <div style={{ width: 343 }}>
+    <BpkDividedCard
+      primaryContent={longMessage}
+      secondaryContent={shortContent}
+      orientation={ORIENTATION.vertical}
+    />
+  </div>
 );
 const WithHrefDividedCardExample = () => (
   <BpkDividedCard
@@ -125,12 +128,15 @@ const WithHrefDividedCardExample = () => (
 );
 
 const NonElevatedDividedCardExample = () => (
-  <BpkDividedCard
-    primaryContent={longMessage}
-    secondaryContent={shortContent}
-    orientation={ORIENTATION.vertical}
-    isElevated={false}
-  />
+
+  <div style={{ width: 343 }}>
+    <BpkDividedCard
+      primaryContent={longMessage}
+      secondaryContent={shortContent}
+      orientation={ORIENTATION.vertical}
+      isElevated={false}
+    />
+  </div>
 );
 
 const CardWrapperExample = () => (

diff --git a/packages/bpk-component-card/src/BpkDividedCard.module.scss b/packages/bpk-component-card/src/BpkDividedCard.module.scss
@@ -19,9 +19,16 @@
 @use '../../unstable__bpk-mixins/tokens';
 @use '../../unstable__bpk-mixins/utils';
 
+$min-vertical-width: 240;
+$max-vertical-width: 720;
+$min-horizontal-width: $max-vertical-width + 1;
+$min-horizontal-height: 292;
+$fixed-secondary-width: 216;
+
 .bpk-divided-card {
   &--content {
     display: flex;
+    height: 100%;
     align-items: stretch;
   }
 
@@ -31,10 +38,14 @@
 
   &--vertical-container {
     display: flex;
+    min-width: tokens.$bpk-one-pixel-rem * $min-vertical-width;
+    max-width: tokens.$bpk-one-pixel-rem * $max-vertical-width;
   }
 
   &--horizontal-container {
     display: flex;
+    min-width: tokens.$bpk-one-pixel-rem * $min-horizontal-width;
+    min-height: tokens.$bpk-one-pixel-rem * $min-horizontal-height;
   }
 
   &__primary {
@@ -49,6 +60,7 @@
     }
 
     &--horizontal {
+      width: tokens.$bpk-one-pixel-rem * $fixed-secondary-width;
       border-left: tokens.$bpk-input-border;
 
       @include utils.bpk-rtl {