Repository: reactioncommerce/reaction-component-library (js)

Issue:
Checkout TopHat Component
# Checkout TopHat
## Overview / Summary
Create a Checkout TopHat
This component should display a centered message if provided.

## Expected use cases
This component will potentially be used any time the checkout is rendered

### Where should this component live
This component should be created in the Component Library.

## Images
<img width="433" alt="image" src="https://user-images.githubusercontent.com/1203639/42117030-b71f0c82-7bb7-11e8-8357-22e563e1224d.png">


```jsx
// Pseudo-markup for the checkout TopHat
<div>
  <span>TopHat Message</span>
</div>
```

## Data
### Props
```js
propTypes: {
  checkoutMessage: PropTypes.string,
}
```

### Render Criteria
The Checkout TopHat should be rendered with the Checkout Page generally if and only if the checkoutMessage is present


## UI States
### Desktop
#### Normal
Zeplin:
https://app.zeplin.io/project/5afc82f5e8d73e250ff9d855/screen/5b02f4fa90d3b184213318da

### Mobile
#### Normal
Zeplin:
https://app.zeplin.io/project/5afc82f5e8d73e250ff9d855/screen/5b02f55b5650607e22fdbaf6


Pull request:
feat: CheckoutTopHat component
Resolves #106 
Impact: **minor**  
Type: **feature**

## Component
CheckoutTopHat component will display at the top of the checkout page, if a message is provided to it. If no message is provided, it will not show.

## Screenshots
<img width="1245" alt="checkouttophat_ _reaction_design_system" src="https://user-images.githubusercontent.com/4482263/42698331-d6253f52-867a-11e8-9c01-58b315e79b92.png">


## Breaking changes
None

## Testing
See that the TopHat component matches [designs](https://app.zeplin.io/project/5afc82f5e8d73e250ff9d855/screen/5b02f4fa90d3b184213318da). See that it does not render if no message is displayed.

Patch:
diff --git a/package/src/components/CheckoutTopHat/v1/CheckoutTopHat.js b/package/src/components/CheckoutTopHat/v1/CheckoutTopHat.js
new file mode 100644
index 00000000..86f1c4e8
--- /dev/null
+++ b/package/src/components/CheckoutTopHat/v1/CheckoutTopHat.js
@@ -0,0 +1,42 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+import { applyTheme } from "../../../utils";
+
+const TopHatContainer = styled.div`
+  background-color: ${applyTheme("color_black05")};
+  display: flex;
+  height: 30px;
+  justify-content: center;
+  width: 100%;
+`;
+
+const TopHatMessage = styled.div`
+  align-items: center;
+  color: ${applyTheme("color_coolGrey500")};
+  display: flex;
+  font-size: 12px;
+  font-weight: ${applyTheme("font_weight_bold")};
+`;
+
+class CheckoutTopHat extends Component {
+  static propTypes = {
+    checkoutMessage: PropTypes.string
+  };
+
+  render() {
+    const { checkoutMessage } = this.props;
+
+    if (checkoutMessage) {
+      return (
+        <TopHatContainer>
+          <TopHatMessage>{checkoutMessage}</TopHatMessage>
+        </TopHatContainer>
+      );
+    }
+
+    return null;
+  }
+}
+
+export default CheckoutTopHat;
diff --git a/package/src/components/CheckoutTopHat/v1/CheckoutTopHat.md b/package/src/components/CheckoutTopHat/v1/CheckoutTopHat.md
new file mode 100644
index 00000000..e2505f8f
--- /dev/null
+++ b/package/src/components/CheckoutTopHat/v1/CheckoutTopHat.md
@@ -0,0 +1,11 @@
+### CheckoutTopHat
+
+### Overview
+Displays a message in a "Top hat" at the top of the checkout page.
+
+#### Basic usage
+```jsx
+<CheckoutTopHat
+  checkoutMessage="Free Shipping + Free Returns"
+/>
+```
diff --git a/package/src/components/CheckoutTopHat/v1/index.js b/package/src/components/CheckoutTopHat/v1/index.js
new file mode 100644
index 00000000..307a0012
--- /dev/null
+++ b/package/src/components/CheckoutTopHat/v1/index.js
@@ -0,0 +1,1 @@
+export { default } from "./CheckoutTopHat";
diff --git a/styleguide.config.js b/styleguide.config.js
index a3b21b20..dc3f0c46 100644
--- a/styleguide.config.js
+++ b/styleguide.config.js
@@ -278,15 +278,20 @@ module.exports = {
     {
       name: "Storefront Components",
       sections: [
-        generateSection({
-          componentNames: ["Price", "StockWarning"],
-          content: "styleguide/src/sections/Product.md",
-          name: "Product"
-        }),
         generateSection({
           componentNames: ["CartEmptyMessage", "CartSummary", "CartItem", "CartItems", "CartItemDetail", "MiniCartSummary", "MiniCart"],
           content: "styleguide/src/sections/Cart.md",
           name: "Cart"
+        }),
+        generateSection({
+          componentNames: ["CheckoutTopHat"],
+          content: "styleguide/src/sections/Checkout.md",
+          name: "Checkout"
+        }),
+        generateSection({
+          componentNames: ["Price", "StockWarning"],
+          content: "styleguide/src/sections/Product.md",
+          name: "Product"
         })
       ]
     }
diff --git a/styleguide/src/sections/Checkout.md b/styleguide/src/sections/Checkout.md
new file mode 100644
index 00000000..2f6797d4
--- /dev/null
+++ b/styleguide/src/sections/Checkout.md
@@ -0,0 +1,1 @@
+TODO: Add information related to the Checkout


Test patch:
diff --git a/package/src/components/CheckoutTopHat/v1/CheckoutTopHat.test.js b/package/src/components/CheckoutTopHat/v1/CheckoutTopHat.test.js
new file mode 100644
index 00000000..80a25b34
--- /dev/null
+++ b/package/src/components/CheckoutTopHat/v1/CheckoutTopHat.test.js
@@ -0,0 +1,17 @@
+import React from "react";
+import renderer from "react-test-renderer";
+import CheckoutTopHat from "./CheckoutTopHat";
+
+test("render Top Hat with message", () => {
+  const component = renderer.create(<CheckoutTopHat checkoutMessage="Free Shipping + Free Returns" />);
+
+  const tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test("render nothing when no message is present", () => {
+  const component = renderer.create(<CheckoutTopHat />);
+
+  const tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+});