CAPY-889 Add xsmall to BpkPrice component (#3643)

* CAPY-889 Add 16 px size to BpkPrice component * CAPY-889 Add stories * CAPY-889 fix accidental deletion --------- Co-authored-by: Tove-Adamsson <Tove.Adamsson@skyscanner.net>
Skyscanner · Oct 17, 2024 · 6a54c82 · 6a54c82
1 parent d572964
commit 6a54c82
Show file tree

Hide file tree

Showing 6 changed files with 370 additions and 24 deletions.
diff --git a/examples/bpk-component-price/examples.js b/examples/bpk-component-price/examples.js
@@ -18,6 +18,63 @@
 
 import BpkPrice, { SIZES, ALIGNS } from '../../packages/bpk-component-price';
 
+const XSmallExample = () => <BpkPrice size={SIZES.xsmall} price="£1,830" />;
+
+const XSmallWithTrailingTextExample = () => (
+  <BpkPrice size={SIZES.xsmall} price="£1,830" trailingText="per day" />
+);
+
+const XSmallWithLeadingAndTrailingTextExample = () => (
+  <BpkPrice
+    size={SIZES.xsmall}
+    leadingText="from"
+    price="£1,830"
+    trailingText="per day"
+  />
+);
+
+const XSmallWithPreviousPriceExample = () => (
+  <BpkPrice
+    size={SIZES.xsmall}
+    previousPrice="£2,033"
+    price="£1,830"
+    trailingText="per day"
+  />
+);
+
+const XSmallWithPreviousPriceLeadingTextExample = () => (
+  <BpkPrice
+    size={SIZES.xsmall}
+    previousPrice="£2,033"
+    leadingText="Web only deal"
+    price="£1,830"
+    trailingText="per day"
+  />
+);
+
+const XSmallRightExample = () => (
+  <BpkPrice size={SIZES.xsmall} price="£1,830" align={ALIGNS.right} />
+);
+
+const XSmallRightWithTrailingTextExample = () => (
+  <BpkPrice
+    size={SIZES.xsmall}
+    price="£1,830"
+    trailingText="per day"
+    align={ALIGNS.right}
+  />
+);
+
+const XSmallRightWithLeadingandTrailingTextExample = () => (
+  <BpkPrice
+    size={SIZES.xsmall}
+    leadingText="from"
+    price="£1,830"
+    trailingText="per day"
+    align={ALIGNS.right}
+  />
+);
+
 const SmallExample = () => <BpkPrice price="£1,830" />;
 
 const SmallWithTrailingTextExample = () => (
@@ -103,7 +160,6 @@ const LargeWithPreviousPriceLeadingTextExample = () => (
 );
 
 const LargeLongPriceExample = () => (
-
   <div style={{ width: 184 }}>
     <BpkPrice
       size={SIZES.large}
@@ -122,6 +178,14 @@ const LargeLongPriceExample = () => (
 
 const MixedExample = () => (
   <div>
+    <XSmallExample />
+    <XSmallWithTrailingTextExample />
+    <XSmallWithLeadingAndTrailingTextExample />
+    <XSmallWithPreviousPriceExample />
+    <XSmallWithPreviousPriceLeadingTextExample />
+    <XSmallRightExample />
+    <XSmallRightWithTrailingTextExample />
+    <XSmallRightWithLeadingandTrailingTextExample />
     <SmallExample />
     <SmallWithTrailingTextExample />
     <SmallWithLeadingAndTrailingTextExample />
@@ -141,6 +205,14 @@ const MixedExample = () => (
 );
 
 export {
+  XSmallExample,
+  XSmallWithTrailingTextExample,
+  XSmallWithLeadingAndTrailingTextExample,
+  XSmallWithPreviousPriceExample,
+  XSmallWithPreviousPriceLeadingTextExample,
+  XSmallRightExample,
+  XSmallRightWithTrailingTextExample,
+  XSmallRightWithLeadingandTrailingTextExample,
   SmallExample,
   SmallWithTrailingTextExample,
   SmallWithLeadingAndTrailingTextExample,

diff --git a/examples/bpk-component-price/stories.js b/examples/bpk-component-price/stories.js
@@ -19,6 +19,14 @@
 import BpkPrice from '../../packages/bpk-component-price/src/BpkPrice';
 
 import {
+  XSmallExample,
+  XSmallWithTrailingTextExample,
+  XSmallWithLeadingAndTrailingTextExample,
+  XSmallWithPreviousPriceExample,
+  XSmallWithPreviousPriceLeadingTextExample,
+  XSmallRightExample,
+  XSmallRightWithTrailingTextExample,
+  XSmallRightWithLeadingandTrailingTextExample,
   SmallExample,
   SmallWithTrailingTextExample,
   SmallWithLeadingAndTrailingTextExample,
@@ -42,6 +50,17 @@ export default {
   component: BpkPrice,
 };
 
+export const XSmall = XSmallExample;
+export const XSmallWithTrailingText = XSmallWithTrailingTextExample;
+export const XSmallWithLeadingAndTrailingText =
+  XSmallWithLeadingAndTrailingTextExample;
+export const XSmallWithPreviousPrice = XSmallWithPreviousPriceExample;
+export const XSmallWithPreviousPriceLeadingText =
+  XSmallWithPreviousPriceLeadingTextExample;
+export const XSmallRight = XSmallRightExample;
+export const XSmallRightWithTrailingText = XSmallRightWithTrailingTextExample;
+export const XSmallRightWithLeadingandTrailingText =
+  XSmallRightWithLeadingandTrailingTextExample;
 export const Small = SmallExample;
 export const SmallWithTrailingText = SmallWithTrailingTextExample;
 export const SmallWithLeadingAndTrailingText =
@@ -66,5 +85,5 @@ export const LargeLongPrice = LargeLongPriceExample;
 export const VisualTest = MixedExample;
 export const VisualTestWithZoom = VisualTest.bind({});
 VisualTestWithZoom.args = {
-  zoomEnabled: true
+  zoomEnabled: true,
 };
diff --git a/packages/bpk-component-price/src/BpkPrice-test.js b/packages/bpk-component-price/src/BpkPrice-test.js
@@ -29,6 +29,7 @@ const trailingText = 'per day';
 let props;
 
 describe.each([
+  [SIZES.xsmall, ALIGNS.left],
   [SIZES.small, ALIGNS.left],
   [SIZES.large, ALIGNS.left],
   [SIZES.small, ALIGNS.right],

diff --git a/packages/bpk-component-price/src/BpkPrice.js b/packages/bpk-component-price/src/BpkPrice.js
@@ -43,6 +43,26 @@ type Props = {
 
 const getClassName = cssModules(STYLES);
 
+const getPriceTextStyle = (size: $Values<typeof SIZES>) => {
+  if (size === SIZES.small) {
+    return TEXT_STYLES.heading4;
+  }
+
+  if (size === SIZES.large) {
+    return TEXT_STYLES.xxl;
+  }
+
+  return TEXT_STYLES.heading5;
+};
+
+const getDefaultTextStyle = (size: $Values<typeof SIZES>) => {
+  if (size === SIZES.large) {
+    return TEXT_STYLES.sm;
+  }
+
+  return TEXT_STYLES.xs;
+};
+
 const BpkPrice = (props: Props) => {
   const {
     align,
@@ -56,7 +76,8 @@ const BpkPrice = (props: Props) => {
     ...rest
   } = props;
 
-  const isSmall = size === SIZES.small;
+  const defaultTextStyle = getDefaultTextStyle(size);
+  const priceTextStyle = getPriceTextStyle(size);
   const isAlignRight = align === ALIGNS.right;
 
   return (
@@ -78,51 +99,41 @@ const BpkPrice = (props: Props) => {
       >
         {previousPrice && (
           <span className={getClassName('bpk-price__previous-price')}>
-            <BpkText
-              textStyle={isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm}
-              tagName="span"
-            >
+            <BpkText textStyle={defaultTextStyle} tagName="span">
               {previousPrice}
             </BpkText>
           </span>
         )}
         {previousPrice && leadingText && (
           <span className={getClassName('bpk-price__separator')}>
-            <BpkText
-              textStyle={isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm}
-              tagName="span"
-            >
+            <BpkText textStyle={defaultTextStyle} tagName="span">
               &#67871;
             </BpkText>
           </span>
         )}
 
         {leadingText && (
-          <BpkText
-            textStyle={isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm}
-            tagName="span"
-          >
+          <BpkText textStyle={defaultTextStyle} tagName="span">
             {leadingText}
           </BpkText>
         )}
       </div>
       <div
         className={getClassName(isAlignRight && 'bpk-price__column-container')}
       >
-        <span className={getClassName('bpk-price__price', !isAlignRight && 'bpk-price__spacing')}>
-          <BpkText
-            textStyle={isSmall ? TEXT_STYLES.heading4 : TEXT_STYLES.xxl}
-            tagName="span"
-          >
+        <span
+          className={getClassName(
+            'bpk-price__price',
+            !isAlignRight && 'bpk-price__spacing',
+          )}
+        >
+          <BpkText textStyle={priceTextStyle} tagName="span">
             {price}
           </BpkText>
         </span>
         {trailingText && (
           <span className={getClassName('bpk-price__trailing')}>
-            <BpkText
-              textStyle={isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm}
-              tagName="span"
-            >
+            <BpkText textStyle={defaultTextStyle} tagName="span">
               {trailingText}
             </BpkText>
           </span>