Merge pull request #426 from reactioncommerce/424-docs-naming

chore: rename title to Storefront Component Library
reactioncommerce · Aug 1, 2019 · 3c4214d · 3c4214d
2 parents a45f8e3 + 58212d2
commit 3c4214d
Show file tree

Hide file tree

Showing 25 changed files with 95 additions and 77 deletions.
diff --git a/.gitignore b/.gitignore
@@ -15,4 +15,6 @@ styleguide/favicon.png
 styleguide/fonts/
 styleguide/index.html
 styleguide/manifest.json
-styleguide/reaction-design-system-logo.svg
+styleguide/storefront-component-library-logo.svg
+
+.DS_Store
diff --git a/Dockerfile b/Dockerfile
@@ -1,7 +1,7 @@
 FROM node:8-alpine
 
 ARG NAME=styleguide
-ARG DESCRIPTION="Reaction Components Style Guide"
+ARG DESCRIPTION="Reaction Commerce's Example Storefront Component Library"
 ARG URL=https://github.com/reactioncommerce/reaction-component-library
 ARG DOC_URL=https://github.com/reactioncommerce/reaction-component-library
 ARG VCS_URL=https://github.com/reactioncommerce/reaction-component-library

diff --git a/README.md b/README.md
@@ -1,28 +1,26 @@
-# Reaction Component Library & Design System
+# Reaction Storefront Component Library
 
 [![npm (scoped)](https://img.shields.io/npm/v/@reactioncommerce/components.svg)](https://www.npmjs.com/package/@reactioncommerce/components)
  [![CircleCI](https://circleci.com/gh/reactioncommerce/reaction-component-library.svg?style=svg)](https://circleci.com/gh/reactioncommerce/reaction-component-library)
 
-![Reaction Design System](https://blog.reactioncommerce.com/content/images/2018/09/style-guide-artwork.jpg)
-
-This is a single project with a package of commerce-focused React UI components and the code for the Reaction Design System website:
+This is a single project with a package of React components for the [Example Storefront](https://github.com/reactioncommerce/example-storefront/):
 
 - [`@reactioncommerce/components`](https://www.npmjs.com/package/@reactioncommerce/components): See the [package.json](https://github.com/reactioncommerce/reaction-component-library/blob/master/package/package.json) in [`/package`](https://github.com/reactioncommerce/reaction-component-library/tree/master/package) folder.
-- [Reaction Design System](https://designsystem.reactioncommerce.com/): See the root [package.json](https://github.com/reactioncommerce/reaction-component-library/blob/master/package.json).
+- [Reaction Storefront Component Library](https://designsystem.reactioncommerce.com/): See the root [package.json](https://github.com/reactioncommerce/reaction-component-library/blob/master/package.json).
 
-We use the [React Styleguidist](https://react-styleguidist.js.org/) package to run and build the Reaction Design System website, and running the style guide locally doubles as an interactive playground for developing and testing the components.
+We use the [React Styleguidist](https://react-styleguidist.js.org/) package to run and build the documentation website, and running the style guide locally doubles as an interactive playground for developing and testing the components.
 
-## Use the React components in your project
+## Use the React components in your storefront
 
-Refer to the [Reaction Design System docs](https://designsystem.reactioncommerce.com/#!/Using%20Components)
+Refer to the [Reaction Storefront Component Library docs](https://designsystem.reactioncommerce.com/#!/Using%20Components)
 
 ## Contribute to this project
 
 Refer to the [contributor docs](./docs)
 
 ## License
 
-Copyright 2018 Reaction Commerce
+Copyright 2019 Reaction Commerce
 
 Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
 

diff --git a/docs/README.md b/docs/README.md
@@ -1,4 +1,4 @@
-# Reaction Design System and Component Library - Contributor Docs
+# Reaction Storefront Component Library - Contributor Docs
 
 ## Getting Started
 

diff --git a/docs/developing.md b/docs/developing.md
@@ -1,6 +1,6 @@
 # Running and Developing Locally
 
-These instructions are the same regardless of whether you're developing components within the Reaction Design System or developing the Reaction Design System website itself.
+These instructions are the same regardless of whether you're developing components within the Reaction Storefront Component Library or developing the Reaction Storefront Component Library website itself.
 
 ## Run for Development
 
@@ -115,4 +115,4 @@ Be sure to familiarize yourself with the [Repo Structure](./repo-structure.md).
 
 If you're going to create components, learn the [Component Development Guidelines](./component-development-guidelines.md) and read about [Creating a New Component](./creating-new-component.md).
 
-If you're going to work on the Reaction Design System website, check out the [Style Guide Development](./style-guide-development.md) docs.
+If you're going to work on the Reaction Storefront Component Library website, check out the [Style Guide Development](./style-guide-development.md) docs.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@reactioncommerce/styleguide",
   "version": "0.1.0",
-  "description": "Reaction Commerce Style Guide",
+  "description": "Reaction Commerce - Example Storefront Component Library",
   "homepage": "https://github.com/reactioncommerce/reaction-component-library",
   "main": "index.js",
   "repository": "https://github.com/reactioncommerce/reaction-component-library",

diff --git a/package/package.json b/package/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@reactioncommerce/components",
   "version": "0.0.0-development",
-  "description": "Reaction Components",
+  "description": "Reaction Commerce - Example Storefront Component Library",
   "homepage": "https://github.com/reactioncommerce/reaction-component-library",
   "repository": "https://github.com/reactioncommerce/reaction-component-library",
   "author": {

diff --git a/package/src/components/BadgeOverlay/v1/BadgeOverlay.md b/package/src/components/BadgeOverlay/v1/BadgeOverlay.md
@@ -16,7 +16,7 @@ When sold out, the overlay and its children are faded to 50% visibility.
     isBestseller: false
   }}
 >
-  <img src="/reaction-design-system-logo.svg" width="200" height="200" alt="Reaction Design System Logo" />
+  <img src="/storefront-component-library-logo.svg" width="200" height="200" alt="Reaction Storefront Component Library logo" />
 </BadgeOverlay>
 ```
 
@@ -32,7 +32,7 @@ When sold out, the overlay and its children are faded to 50% visibility.
     isBestseller: false
   }}
 >
-  <img src="/reaction-design-system-logo.svg" width="200" height="200" alt="Reaction Design System Logo" />
+  <img src="/storefront-component-library-logo.svg" width="200" height="200" alt="Reaction Storefront Component Library logo" />
 </BadgeOverlay>
 ```
 
@@ -48,7 +48,7 @@ When sold out, the overlay and its children are faded to 50% visibility.
     isBestseller: false
   }}
 >
-  <img src="/reaction-design-system-logo.svg" width="200" height="200" alt="Reaction Design System Logo" />
+  <img src="/storefront-component-library-logo.svg" width="200" height="200" alt="Reaction Storefront Component Library" />
 </BadgeOverlay>
 ```
 
@@ -64,7 +64,7 @@ When sold out, the overlay and its children are faded to 50% visibility.
     isBestseller: false
   }}
 >
-  <img src="/reaction-design-system-logo.svg" width="200" height="200" alt="Reaction Design System Logo" />
+  <img src="/storefront-component-library-logo.svg" width="200" height="200" alt="Reaction Storefront Component Library" />
 </BadgeOverlay>
 ```
 
@@ -80,7 +80,7 @@ When sold out, the overlay and its children are faded to 50% visibility.
     isBestseller: true
   }}
 >
-  <img src="/reaction-design-system-logo.svg" width="200" height="200" alt="Reaction Design System Logo" />
+  <img src="/storefront-component-library-logo.svg" width="200" height="200" alt="Reaction Storefront Component Library" />
 </BadgeOverlay>
 ```
 
@@ -96,7 +96,7 @@ When sold out, the overlay and its children are faded to 50% visibility.
     isBestseller: false
   }}
 >
-  <img src="/reaction-design-system-logo.svg" width="200" height="200" alt="Reaction Design System Logo" />
+  <img src="/storefront-component-library-logo.svg" width="200" height="200" alt="Reaction Storefront Component Library" />
 </BadgeOverlay>
 ```
 
@@ -112,7 +112,7 @@ When sold out, the overlay and its children are faded to 50% visibility.
     isBestseller: true
   }}
 >
-  <img src="/reaction-design-system-logo.svg" width="200" height="200" alt="Reaction Design System Logo" />
+  <img src="/storefront-component-library-logo.svg" width="200" height="200" alt="Reaction Storefront Component Library" />
 </BadgeOverlay>
 ```
 
@@ -128,7 +128,7 @@ When sold out, the overlay and its children are faded to 50% visibility.
     isBestseller: true
   }}
 >
-  <img src="/reaction-design-system-logo.svg" width="200" height="200" alt="Reaction Design System Logo" />
+  <img src="/storefront-component-library-logo.svg" width="200" height="200" alt="Reaction Storefront Component Library" />
 </BadgeOverlay>
 ```
 

diff --git a/package/src/components/BadgeOverlay/v1/BadgeOverlay.test.js b/package/src/components/BadgeOverlay/v1/BadgeOverlay.test.js
@@ -13,7 +13,7 @@ test("BadgeOverlay with sold out primary badge", () => {
         isBestseller: false
       }}
     >
-      <img src="/reaction-design-system-logo.svg" width="200" height="200" alt="Reaction Design System Logo" />
+      <img src="/storefront-component-library-logo.svg" width="200" height="200" alt="Reaction Storefront Component Library logo" />
     </BadgeOverlay>
   ));
 
@@ -32,7 +32,7 @@ test("BadgeOverlay with backorder primary badge", () => {
         isBestseller: false
       }}
     >
-      <img src="/reaction-design-system-logo.svg" width="200" height="200" alt="Reaction Design System Logo" />
+      <img src="/storefront-component-library-logo.svg" width="200" height="200" alt="Reaction Storefront Component Library logo" />
     </BadgeOverlay>
   ));
 
@@ -51,7 +51,7 @@ test("BadgeOverlay with on sale primary badge", () => {
         isBestseller: false
       }}
     >
-      <img src="/reaction-design-system-logo.svg" width="200" height="200" alt="Reaction Design System Logo" />
+      <img src="/storefront-component-library-logo.svg" width="200" height="200" alt="Reaction Storefront Component Library logo" />
     </BadgeOverlay>
   ));
 
@@ -70,7 +70,7 @@ test("BadgeOverlay with on sale primary badge and low quantity secondary badge",
         isBestseller: false
       }}
     >
-      <img src="/reaction-design-system-logo.svg" width="200" height="200" alt="Reaction Design System Logo" />
+      <img src="/storefront-component-library-logo.svg" width="200" height="200" alt="Reaction Storefront Component Library logo" />
     </BadgeOverlay>
   ));
 
@@ -89,7 +89,7 @@ test("BadgeOverlay with on sale primary badge and best seller secondary badge",
         isBestseller: true
       }}
     >
-      <img src="/reaction-design-system-logo.svg" width="200" height="200" alt="Reaction Design System Logo" />
+      <img src="/storefront-component-library-logo.svg" width="200" height="200" alt="Reaction Storefront Component Library logo" />
     </BadgeOverlay>
   ));
 
@@ -108,7 +108,7 @@ test("BadgeOverlay with low quantity primary badge", () => {
         isBestseller: false
       }}
     >
-      <img src="/reaction-design-system-logo.svg" width="200" height="200" alt="Reaction Design System Logo" />
+      <img src="/storefront-component-library-logo.svg" width="200" height="200" alt="Reaction Storefront Component Library logo" />
     </BadgeOverlay>
   ));
 
@@ -127,7 +127,7 @@ test("BadgeOverlay with low quantity primary badge and best seller secondary bad
         isBestseller: true
       }}
     >
-      <img src="/reaction-design-system-logo.svg" width="200" height="200" alt="Reaction Design System Logo" />
+      <img src="/storefront-component-library-logo.svg" width="200" height="200" alt="Reaction Storefront Component Library logo" />
     </BadgeOverlay>
   ));
 
@@ -146,7 +146,7 @@ test("BadgeOverlay with best seller primary badge", () => {
         isBestseller: true
       }}
     >
-      <img src="/reaction-design-system-logo.svg" width="200" height="200" alt="Reaction Design System Logo" />
+      <img src="/storefront-component-library-logo.svg" width="200" height="200" alt="Reaction Storefront Component Library logo" />
     </BadgeOverlay>
   ));
 

diff --git a/package/src/components/BadgeOverlay/v1/__snapshots__/BadgeOverlay.test.js.snap b/package/src/components/BadgeOverlay/v1/__snapshots__/BadgeOverlay.test.js.snap
@@ -59,9 +59,9 @@ exports[`BadgeOverlay with backorder primary badge 1`] = `
     </span>
   </div>
   <img
-    alt="Reaction Design System Logo"
+    alt="Reaction Storefront Component Library logo"
     height="200"
-    src="/reaction-design-system-logo.svg"
+    src="/storefront-component-library-logo.svg"
     width="200"
   />
 </div>
@@ -126,9 +126,9 @@ exports[`BadgeOverlay with best seller primary badge 1`] = `
     </span>
   </div>
   <img
-    alt="Reaction Design System Logo"
+    alt="Reaction Storefront Component Library logo"
     height="200"
-    src="/reaction-design-system-logo.svg"
+    src="/storefront-component-library-logo.svg"
     width="200"
   />
 </div>
@@ -193,9 +193,9 @@ exports[`BadgeOverlay with low quantity primary badge 1`] = `
     </span>
   </div>
   <img
-    alt="Reaction Design System Logo"
+    alt="Reaction Storefront Component Library logo"
     height="200"
-    src="/reaction-design-system-logo.svg"
+    src="/storefront-component-library-logo.svg"
     width="200"
   />
 </div>
@@ -290,9 +290,9 @@ exports[`BadgeOverlay with low quantity primary badge and best seller secondary
     </span>
   </div>
   <img
-    alt="Reaction Design System Logo"
+    alt="Reaction Storefront Component Library logo"
     height="200"
-    src="/reaction-design-system-logo.svg"
+    src="/storefront-component-library-logo.svg"
     width="200"
   />
 </div>
@@ -357,9 +357,9 @@ exports[`BadgeOverlay with on sale primary badge 1`] = `
     </span>
   </div>
   <img
-    alt="Reaction Design System Logo"
+    alt="Reaction Storefront Component Library logo"
     height="200"
-    src="/reaction-design-system-logo.svg"
+    src="/storefront-component-library-logo.svg"
     width="200"
   />
 </div>
@@ -454,9 +454,9 @@ exports[`BadgeOverlay with on sale primary badge and best seller secondary badge
     </span>
   </div>
   <img
-    alt="Reaction Design System Logo"
+    alt="Reaction Storefront Component Library logo"
     height="200"
-    src="/reaction-design-system-logo.svg"
+    src="/storefront-component-library-logo.svg"
     width="200"
   />
 </div>
@@ -551,9 +551,9 @@ exports[`BadgeOverlay with on sale primary badge and low quantity secondary badg
     </span>
   </div>
   <img
-    alt="Reaction Design System Logo"
+    alt="Reaction Storefront Component Library logo"
     height="200"
-    src="/reaction-design-system-logo.svg"
+    src="/storefront-component-library-logo.svg"
     width="200"
   />
 </div>
@@ -619,9 +619,9 @@ exports[`BadgeOverlay with sold out primary badge 1`] = `
     </span>
   </div>
   <img
-    alt="Reaction Design System Logo"
+    alt="Reaction Storefront Component Library logo"
     height="200"
-    src="/reaction-design-system-logo.svg"
+    src="/storefront-component-library-logo.svg"
     width="200"
   />
 </div>

diff --git a/package/src/components/Link/v1/Link.md b/package/src/components/Link/v1/Link.md
@@ -13,7 +13,7 @@ Link with image and custom onClick handler:
 
 ```jsx
 <Link href="http://google.com" onClick={() => alert("clicked")}>
-  <img src="/reaction-design-system-logo.svg" width="200" height="200" alt="Reaction Design System Logo" />
+  <img src="/storefront-component-library-logo.svg" width="200" height="200" alt="Reaction Storefront Component Library" />
 </Link>
 ```
 

diff --git a/package/src/components/Link/v1/Link.test.js b/package/src/components/Link/v1/Link.test.js
@@ -6,7 +6,7 @@ import Link from "./Link";
 test("Link component with image snapshot", () => {
   const component = renderer.create((
     <Link href="http://google.com">
-      <img src="/reaction-design-system-logo.svg" width="200" height="200" alt="Reaction Design System Logo" />
+      <img src="/storefront-component-library-logo.svg" width="200" height="200" alt="Reaction Storefront Component Library Logo" />
     </Link>
   ));
 

diff --git a/package/src/components/Link/v1/__snapshots__/Link.test.js.snap b/package/src/components/Link/v1/__snapshots__/Link.test.js.snap
@@ -12,9 +12,9 @@ exports[`Link component with image snapshot 1`] = `
   onClick={[Function]}
 >
   <img
-    alt="Reaction Design System Logo"
+    alt="Reaction Storefront Component Library Logo"
     height="200"
-    src="/reaction-design-system-logo.svg"
+    src="/storefront-component-library-logo.svg"
     width="200"
   />
 </a>

diff --git a/package/src/components/ProgressiveImage/v1/ProgressiveImage.md b/package/src/components/ProgressiveImage/v1/ProgressiveImage.md
@@ -10,7 +10,7 @@ ProgressiveImage can be used as a drop-in replacement for the HTML `<img />` tag
 
 ```jsx
 <div style={{ borderStyle: "dotted", borderWidth: "1px", borderColor: "#999999", width: 400 }}>
-  <ProgressiveImage src="/reaction-design-system-logo.svg" alt="Reaction Design System Logo" />
+  <ProgressiveImage src="/storefront-component-library-logo.svg" alt="Reaction Storefront Component Library Logo" />
 </div>
 ```
 

diff --git a/package/src/components/ProgressiveImage/v1/ProgressiveImage.test.js b/package/src/components/ProgressiveImage/v1/ProgressiveImage.test.js
@@ -4,7 +4,7 @@ import ProgressiveImage from "./ProgressiveImage";
 
 test("Basic ProgressiveImage snapshot", () => {
   const component = renderer.create((
-    <ProgressiveImage src="/reaction-design-system-logo.svg" alt="Reaction Design System Logo" />
+    <ProgressiveImage src="/storefront-component-library-logo.svg" alt="Reaction Storefront Component Library Logo" />
   ));
 
   const tree = component.toJSON();

diff --git a/package/src/components/StripeForm/v1/StripeForm.md b/package/src/components/StripeForm/v1/StripeForm.md
@@ -1,6 +1,6 @@
 ### Overview
 
-This form is intended to be used to integrate [react-stripe-elements](https://github.com/stripe/react-stripe-elements) into a storefront project easily, with it styled to look like other Reaction Design System forms.
+This form is intended to be used to integrate [react-stripe-elements](https://github.com/stripe/react-stripe-elements) into a storefront project easily.
 
 ### Usage
 

diff --git a/package/src/theme/colors.js b/package/src/theme/colors.js
@@ -1,5 +1,5 @@
 /**
- * Default Reaction Design System Colors
+ * Default Reaction Example Storefront Colors
  */
 
 export default {
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,7 +13,7 @@ Link with image and custom onClick handler: @@
     ```jsx
     <Link href="http://google.com" onClick={() => alert("clicked")}>
-      <img src="/reaction-design-system-logo.svg" width="200" height="200" alt="Reaction Design System Logo" />
+      <img src="/storefront-component-library-logo.svg" width="200" height="200" alt="Reaction Storefront Component Library" />
     </Link>
     ```
@@ Expand Down @@