fix: updated CartSummary component with styles to match design

Signed-off-by: Erik Kieckhafer <ek@ato.la>
reactioncommerce · Feb 22, 2019 · e02dea8 · e02dea8
1 parent 9da5dfb
commit e02dea8
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 16 deletions.
diff --git a/package/src/components/CartSummary/v1/CartSummary.js b/package/src/components/CartSummary/v1/CartSummary.js
@@ -24,7 +24,7 @@ const Thr = styled.th`
 `;
 
 const Td = styled.td`
-  ${addTypographyStyles("CartSummaryLeftColumn", "bodyText")}
+  ${addTypographyStyles("CartSummaryLeftColumn", "labelText")}
   border-top-color: ${applyTheme("CartSummary.borderColor")};
   border-top-style: solid;
   border-top-width: ${(props) => (props.isBordered ? applyTheme("CartSummary.borderWidth")(props) : "0")};
@@ -36,7 +36,7 @@ const Td = styled.td`
 `;
 
 const TdValue = styled(Td)`
-  ${addTypographyStyles("CartSummaryRightColumn", "bodyText")}
+  ${addTypographyStyles("CartSummaryRightColumn", "labelText")}
   text-align: right;
 `;
 
@@ -45,11 +45,48 @@ const Title = styled.span`
 `;
 
 const Discount = styled.span`
-  ${addTypographyStyles("CartSummaryDiscount", "bodyTextBold")}
+  ${addTypographyStyles("CartSummaryDiscount", "labelTextBold")}
+`;
+
+
+const TdTax = styled.td`
+  ${addTypographyStyles("CartSummaryLeftColumn", "labelText")}
+  border-top-color: ${applyTheme("CartSummary.borderColor")};
+  border-top-style: solid;
+  border-top-width: ${(props) => (props.isBordered ? applyTheme("CartSummary.borderWidth")(props) : "0")};
+  padding-bottom: ${applyTheme("CartSummary.rowPaddingBottom")};
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: ${(props) => (props.isDense ? applyTheme("CartSummary.rowDensePaddingTop")(props) : applyTheme("CartSummary.rowPaddingTop")(props))};
+  text-align: left;
+`;
+
+const TdTaxValue = styled(Td)`
+  ${addTypographyStyles("CartSummaryRightColumn", "labelText")}
+  padding-bottom: ${applyTheme("CartSummary.rowPaddingBottom")};
+  text-align: right;
+`;
+
+const TdTotal = styled.td`
+  ${addTypographyStyles("CartSummaryLeftColumn", "labelText")}
+  border-top-color: ${applyTheme("CartSummary.borderColor")};
+  border-top-style: solid;
+  border-top-width: ${(props) => (props.isBordered ? applyTheme("CartSummary.borderWidth")(props) : "0")};
+  padding-bottom: ${applyTheme("CartSummary.rowPaddingBottom")};
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: ${applyTheme("CartSummary.rowPaddingTop")};
+  text-align: left;
+`;
+
+const TdTotalValue = styled(Td)`
+  text-align: right;
+  padding-bottom: ${applyTheme("CartSummary.rowPaddingBottom")};
+  padding-top: ${applyTheme("CartSummary.rowPaddingTop")};
 `;
 
 const Total = styled.span`
-  ${addTypographyStyles("CartSummaryTotal", "bodyTextBold")}
+  ${addTypographyStyles("CartSummaryTotal", "subheadingTextBold")}
 `;
 
 class CartSummary extends Component {
@@ -119,7 +156,7 @@ class CartSummary extends Component {
 
     return (
       <tr>
-        <Td isDense={isDense}>Promo code applied</Td>
+        <Td isDense={isDense}>Promo code applied:</Td>
         <TdValue isDense={isDense}>
           <Discount>{displayDiscount}</Discount>
         </TdValue>
@@ -152,27 +189,27 @@ class CartSummary extends Component {
         {header}
         <tbody>
           <tr>
-            <Td isDense={isDense}>Item total</Td>
+            <Td isDense={isDense}>Items:</Td>
             <TdValue isDense={isDense}>{displaySubtotal}</TdValue>
           </tr>
           <tr>
-            <Td isDense={isDense}>Shipping</Td>
+            <Td isDense={isDense}>Shipping:</Td>
             <TdValue isDense={isDense}>{shipping}</TdValue>
           </tr>
           {discount}
           <tr>
-            <Td isDense={isDense}>Surcharge</Td>
+            <Td isDense={isDense}>Surcharges:</Td>
             <TdValue isDense={isDense}>{surcharge}</TdValue>
           </tr>
           <tr>
-            <Td isDense={isDense}>Tax</Td>
-            <TdValue isDense={isDense}>{tax}</TdValue>
+            <TdTax isDense={isDense}>Tax:</TdTax>
+            <TdTaxValue isDense={isDense}>{tax}</TdTaxValue>
           </tr>
           <tr>
-            <Td isDense={isDense} isBordered>Order total</Td>
-            <TdValue isDense={isDense} isBordered>
+            <TdTotal isDense={isDense} isBordered>Order total:</TdTotal>
+            <TdTotalValue isDense={isDense} isBordered>
               <Total>{displayTotal}</Total>
-            </TdValue>
+            </TdTotalValue>
           </tr>
         </tbody>
       </Table>

diff --git a/package/src/components/CartSummary/v1/CartSummary.md b/package/src/components/CartSummary/v1/CartSummary.md
@@ -99,8 +99,8 @@ Assume that any theme prop that does not begin with "rui" is within `rui_compone
 
 - The left column header uses `bodyText` style with `rui_components.CartSummaryLeftColumnHeader` override
 - The right column header uses `bodyText` style with `rui_components.CartSummaryRightColumnHeader` override
-- The left column uses `bodyText` style with `rui_components.CartSummaryLeftColumn` override
-- The right column uses `bodyText` style with `rui_components.CartSummaryRightColumn` override
+- The left column uses `labelText` style with `rui_components.CartSummaryLeftColumn` override
+- The right column uses `labelText` style with `rui_components.CartSummaryRightColumn` override
 - The title uses `bodyTextBold` style with `rui_components.CartSummaryTitle` override
 - The discount value uses `bodyTextBold` style with `rui_components.CartSummaryDiscount` override
-- The total value uses `bodyTextBold` style with `rui_components.CartSummaryTotal` override
+- The total value uses `subheadingTextBold` style with `rui_components.CartSummaryTotal` override