fix(core-price-lockup): add padding to fix misalignment

add padding bottom to strikethrough price lockups to accommodate difference in font size
telus · Nov 4, 2020 · e535250 · e535250
1 parent f48a96c
commit e535250
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 5 deletions.
diff --git a/packages/PriceLockup/PriceLockup.jsx b/packages/PriceLockup/PriceLockup.jsx
@@ -76,6 +76,15 @@ const hasStrikethrough = strikethroughValue => {
   return undefined
 }
 
+const addStrikethroughPadding = strikethroughValue => {
+  if (strikethroughValue) {
+    return {
+      paddingBottom: '3px',
+    }
+  }
+  return undefined
+}
+
 const StyledRateText = styled.span(({ size }) => {
   if (size === 'large') {
     return large
@@ -128,6 +137,7 @@ const StyledRateTextWrapper = styled.div(({ strikethrough }) => {
   return {
     display: 'flex',
     color: strikethrough ? colorGreyRaven : undefined,
+    ...addStrikethroughPadding(strikethrough),
   }
 })
 

diff --git a/packages/PriceLockup/PriceLockup.md b/packages/PriceLockup/PriceLockup.md
@@ -43,19 +43,59 @@
 
 ```jsx
 <FlexGrid>
-  <FlexGrid.Row verticalAlign="bottom">
-    <FlexGrid.Col xs={2}>
+  <FlexGrid.Row>
+    <FlexGrid.Col xs={12} md={5}>
+      <Card variant="defaultWithBorder">
+        <Box between={3}>
+          <Heading level="h3">Internet 15 - Special Offer</Heading>
+          <FlexGrid>
+            <FlexGrid.Row verticalAlign="bottom" horizontalAlign="start">
+              <FlexGrid.Col xs={5}>
+                <PriceLockup
+                  topText="Starting at"
+                  size="medium"
+                  price="25"
+                  signDirection="left"
+                  rateText="/mo."
+                />
+              </FlexGrid.Col>
+              <FlexGrid.Col xs={5}>
+                <PriceLockup
+                  size="small"
+                  strikethrough
+                  ariaLabel="price without discount"
+                  price="50"
+                  signDirection="left"
+                  rateText="/mo."
+                />
+              </FlexGrid.Col>
+            </FlexGrid.Row>
+          </FlexGrid>
+          <Text size="medium">Good for basic browsing, and posting to social media.</Text>
+          <Button>Add to cart</Button>
+          <ChevronLink href="#">Learn more</ChevronLink>
+        </Box>
+      </Card>
+    </FlexGrid.Col>
+  </FlexGrid.Row>
+</FlexGrid>
+```
+
+```jsx
+<FlexGrid>
+  <FlexGrid.Row verticalAlign="bottom" horizontalAlign="start">
+    <FlexGrid.Col xs={3}>
       <PriceLockup
         topText="Starting at"
-        size="medium"
+        size="large"
         price="25"
         signDirection="left"
         rateText="/mo."
       />
     </FlexGrid.Col>
-    <FlexGrid.Col xs={1}>
+    <FlexGrid.Col xs={2}>
       <PriceLockup
-        size="small"
+        size="medium"
         strikethrough
         ariaLabel="price without discount"
         price="50"