Repository: reactioncommerce/reaction-component-library
Pull request #93 (2018-06-22 22:19:55)

Add mini cart summary component.
Add mini cart summary component as specified here:  https://github.com/reactioncommerce/reaction/issues/4322


Patch:
diff --git a/package/src/components/MiniCartSummary/v1/MiniCartSummary.js b/package/src/components/MiniCartSummary/v1/MiniCartSummary.js
new file mode 100644
index 00000000..6dc7a9ce
--- /dev/null
+++ b/package/src/components/MiniCartSummary/v1/MiniCartSummary.js
@@ -0,0 +1,65 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+import { applyTheme } from "../../../utils";
+
+const Table = styled.table`
+  width: 100%;
+  padding: 1rem;
+`;
+
+const Td = styled.td`
+  padding: 0.5rem 0.3rem 0.5rem 0.5rem;
+  color: ${applyTheme("color_coolGrey400")};
+  text-align: right;
+`;
+
+const TdValue = styled.td`
+  text-align: left;
+  padding: 0.5rem 0.5rem 0.5rem 0.3rem;
+  color: ${applyTheme("color_coolGrey500")};
+  font-weight: ${applyTheme("font_weight_bold")};
+`;
+
+class MiniCartSummary extends Component {
+  static propTypes = {
+    /**
+     * The subtotal for the items in the cart.
+     */
+    displaySubtotal: PropTypes.string.isRequired,
+    /**
+     * The computed taxes for items in the cart.
+     */
+    displayTax: PropTypes.string
+  };
+
+  renderTax = () => {
+    const { displayTax } = this.props;
+
+    return (
+      <tr>
+        <Td>Tax</Td>
+        <TdValue>{displayTax}</TdValue>
+      </tr>
+    );
+  }
+
+  render() {
+    const { displaySubtotal, displayTax } = this.props;
+    const taxes = displayTax && this.renderTax();
+
+    return (
+      <Table>
+        <tbody>
+          <tr>
+            <Td>Subtotal</Td>
+            <TdValue>{displaySubtotal}</TdValue>
+          </tr>
+          {taxes}
+        </tbody>
+      </Table>
+    );
+  }
+}
+
+export default MiniCartSummary;
diff --git a/package/src/components/MiniCartSummary/v1/MiniCartSummary.md b/package/src/components/MiniCartSummary/v1/MiniCartSummary.md
new file mode 100644
index 00000000..5b2d3482
--- /dev/null
+++ b/package/src/components/MiniCartSummary/v1/MiniCartSummary.md
@@ -0,0 +1,19 @@
+### MiniCartSummary
+
+### Overview
+Displays a summary of the current current items in the mini cart view. This version of the cart summary is intended to be displayed when a user hovers over the cart icon in the main navigation.
+
+#### Basic usage, only renders subtotal
+```jsx
+<MiniCartSummary
+  displaySubtotal="$275.77"
+/>
+```
+
+#### Render subtotal + taxes
+```jsx
+<MiniCartSummary
+  displaySubtotal="$275.77"
+  displayTax="$5.42"
+/>
+```
diff --git a/package/src/components/MiniCartSummary/v1/index.js b/package/src/components/MiniCartSummary/v1/index.js
new file mode 100644
index 00000000..aa99cc0f
--- /dev/null
+++ b/package/src/components/MiniCartSummary/v1/index.js
@@ -0,0 +1,1 @@
+export { default } from "./MiniCartSummary";
diff --git a/styleguide.config.js b/styleguide.config.js
index 0158938b..160c3202 100644
--- a/styleguide.config.js
+++ b/styleguide.config.js
@@ -98,7 +98,7 @@ module.exports = {
           name: "Product"
         }),
         generateSection({
-          componentNames: ["CartCheckoutButton", "CartEmptyMessage", "CartSummary"],
+          componentNames: ["CartCheckoutButton", "CartEmptyMessage", "CartSummary", "MiniCartSummary"],
           content: "styleguide/src/sections/Cart.md",
           name: "Cart"
         }),


Test patch:
diff --git a/package/src/components/MiniCartSummary/v1/MiniCartSummary.test.js b/package/src/components/MiniCartSummary/v1/MiniCartSummary.test.js
new file mode 100644
index 00000000..64f00205
--- /dev/null
+++ b/package/src/components/MiniCartSummary/v1/MiniCartSummary.test.js
@@ -0,0 +1,21 @@
+import React from "react";
+import renderer from "react-test-renderer";
+import MiniCartSummary from "./MiniCartSummary";
+
+test("Renders only subtotal", () => {
+  const component = renderer.create((
+    <MiniCartSummary displaySubtotal="$24.42"/>
+  ));
+
+  const tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test("Renders only subtotal + computed taxes", () => {
+  const component = renderer.create((
+    <MiniCartSummary displaySubtotal="$24.42" displayTax="$4.44"/>
+  ));
+
+  const tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+});
diff --git a/package/src/components/MiniCartSummary/v1/__snapshots__/MiniCartSummary.test.js.snap b/package/src/components/MiniCartSummary/v1/__snapshots__/MiniCartSummary.test.js.snap
new file mode 100644
index 00000000..ec80415d
--- /dev/null
+++ b/package/src/components/MiniCartSummary/v1/__snapshots__/MiniCartSummary.test.js.snap
@@ -0,0 +1,91 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renders only subtotal + computed taxes 1`] = `
+.c0 {
+  width: 100%;
+  padding: 1rem;
+}
+
+.c1 {
+  padding: 0.5rem 0.3rem 0.5rem 0.5rem;
+  color: #3c5d6f;
+  text-align: right;
+}
+
+.c2 {
+  text-align: left;
+  padding: 0.5rem 0.5rem 0.5rem 0.3rem;
+  color: #3c3c3c;
+  font-weight: 700;
+}
+
+<table
+  className="c0"
+>
+  <tbody>
+    <tr>
+      <td
+        className="c1"
+      >
+        Subtotal
+      </td>
+      <td
+        className="c2"
+      >
+        $24.42
+      </td>
+    </tr>
+    <tr>
+      <td
+        className="c1"
+      >
+        Tax
+      </td>
+      <td
+        className="c2"
+      >
+        $4.44
+      </td>
+    </tr>
+  </tbody>
+</table>
+`;
+
+exports[`Renders only subtotal 1`] = `
+.c0 {
+  width: 100%;
+  padding: 1rem;
+}
+
+.c1 {
+  padding: 0.5rem 0.3rem 0.5rem 0.5rem;
+  color: #3c5d6f;
+  text-align: right;
+}
+
+.c2 {
+  text-align: left;
+  padding: 0.5rem 0.5rem 0.5rem 0.3rem;
+  color: #3c3c3c;
+  font-weight: 700;
+}
+
+<table
+  className="c0"
+>
+  <tbody>
+    <tr>
+      <td
+        className="c1"
+      >
+        Subtotal
+      </td>
+      <td
+        className="c2"
+      >
+        $24.42
+      </td>
+    </tr>
+  </tbody>
+</table>
+`;