README creation for Paragon components

openedx · Oct 16, 2017 · 5dd244c · 5dd244c
1 parent fd4b1bd
commit 5dd244c
Show file tree

Hide file tree

Showing 29 changed files with 807 additions and 9,317 deletions.
diff --git a/.gitattributes b/.gitattributes
diff --git a/.npmignore b/.npmignore
@@ -1,4 +1,6 @@
 .DS_Store
 .eslintcache
+.storybook
 node_modules
 npm-debug.log
+.travis.yml
diff --git a/.storybook/__snapshots__/Storyshots.test.js.snap b/.storybook/__snapshots__/Storyshots.test.js.snap
@@ -476,7 +476,11 @@ exports[`Storyshots Modal basic usage 1`] = `
           onKeyDown={[Function]}
           type="button"
         >
-          ×
+          <span
+            aria-hidden="true"
+          >
+            ×
+          </span>
         </button>
       </div>
       <div
@@ -534,7 +538,11 @@ exports[`Storyshots Modal configurable buttons 1`] = `
           onKeyDown={[Function]}
           type="button"
         >
-          ×
+          <span
+            aria-hidden="true"
+          >
+            ×
+          </span>
         </button>
       </div>
       <div
@@ -619,7 +627,11 @@ exports[`Storyshots Modal configurable buttons that perform actions 1`] = `
           onKeyDown={[Function]}
           type="button"
         >
-          ×
+          <span
+            aria-hidden="true"
+          >
+            ×
+          </span>
         </button>
       </div>
       <div
@@ -686,7 +698,11 @@ exports[`Storyshots Modal configurable close button 1`] = `
           onKeyDown={[Function]}
           type="button"
         >
-          ×
+          <span
+            aria-hidden="true"
+          >
+            ×
+          </span>
         </button>
       </div>
       <div
@@ -744,7 +760,11 @@ exports[`Storyshots Modal configurable title and body 1`] = `
           onKeyDown={[Function]}
           type="button"
         >
-          ×
+          <span
+            aria-hidden="true"
+          >
+            ×
+          </span>
         </button>
       </div>
       <div
@@ -812,7 +832,11 @@ exports[`Storyshots Modal modal invoked via a button 1`] = `
             onKeyDown={[Function]}
             type="button"
           >
-            ×
+            <span
+              aria-hidden="true"
+            >
+              ×
+            </span>
           </button>
         </div>
         <div
@@ -880,7 +904,11 @@ exports[`Storyshots Modal modal with element body 1`] = `
           onKeyDown={[Function]}
           type="button"
         >
-          ×
+          <span
+            aria-hidden="true"
+          >
+            ×
+          </span>
         </button>
       </div>
       <div
@@ -982,6 +1010,210 @@ exports[`Storyshots Paragon Welcome 1`] = `
 </div>
 `;
 
+exports[`Storyshots StatusAlert Non-dismissible alert 1`] = `
+<div
+  className="alert fade alert-danger show"
+  hidden={false}
+  role="alert"
+>
+  <div
+    className="alert-dialog"
+  >
+    You can't get rid of me!
+  </div>
+</div>
+`;
+
+exports[`Storyshots StatusAlert alert invoked via a button 1`] = `
+<div>
+  <div
+    className="alert fade alert-dismissible alert-success"
+    hidden={true}
+    role="alert"
+  >
+    <button
+      aria-label="Close"
+      className="btn close"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onKeyDown={[Function]}
+      type="button"
+    >
+      <span
+        aria-hidden="true"
+      >
+        ×
+      </span>
+    </button>
+    <div
+      className="alert-dialog"
+    >
+      Success! You triggered the alert!
+    </div>
+  </div>
+  <button
+    className="btn btn-light"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    type="button"
+  >
+    Click me to open a Status Alert!
+  </button>
+</div>
+`;
+
+exports[`Storyshots StatusAlert alert with a link 1`] = `
+<div
+  className="alert fade alert-dismissible alert-info show"
+  hidden={false}
+  role="alert"
+>
+  <button
+    aria-label="Close"
+    className="btn close"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    type="button"
+  >
+    <span
+      aria-hidden="true"
+    >
+      ×
+    </span>
+  </button>
+  <div
+    className="alert-dialog"
+  >
+    <div>
+      <span>
+        Love cats? 
+      </span>
+      <a
+        href="https://www.factretriever.com/cat-facts"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        Click me!
+      </a>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots StatusAlert basic usage 1`] = `
+<div
+  className="alert fade alert-dismissible alert-warning show"
+  hidden={false}
+  role="alert"
+>
+  <button
+    aria-label="Close"
+    className="btn close"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    type="button"
+  >
+    <span
+      aria-hidden="true"
+    >
+      ×
+    </span>
+  </button>
+  <div
+    className="alert-dialog"
+  >
+    You have a status alert!
+  </div>
+</div>
+`;
+
+exports[`Storyshots StatusAlert danger alert 1`] = `
+<div
+  className="alert fade alert-dismissible alert-danger show"
+  hidden={false}
+  role="alert"
+>
+  <button
+    aria-label="Close"
+    className="btn close"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    type="button"
+  >
+    <span
+      aria-hidden="true"
+    >
+      ×
+    </span>
+  </button>
+  <div
+    className="alert-dialog"
+  >
+    Error!
+  </div>
+</div>
+`;
+
+exports[`Storyshots StatusAlert informational alert 1`] = `
+<div
+  className="alert fade alert-dismissible alert-info show"
+  hidden={false}
+  role="alert"
+>
+  <button
+    aria-label="Close"
+    className="btn close"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    type="button"
+  >
+    <span
+      aria-hidden="true"
+    >
+      ×
+    </span>
+  </button>
+  <div
+    className="alert-dialog"
+  >
+    Get some info here!
+  </div>
+</div>
+`;
+
+exports[`Storyshots StatusAlert success alert 1`] = `
+<div
+  className="alert fade alert-dismissible alert-success show"
+  hidden={false}
+  role="alert"
+>
+  <button
+    aria-label="Close"
+    className="btn close"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    type="button"
+  >
+    <span
+      aria-hidden="true"
+    >
+      ×
+    </span>
+  </button>
+  <div
+    className="alert-dialog"
+  >
+    Success!
+  </div>
+</div>
+`;
+
 exports[`Storyshots Table default heading 1`] = `
 <table
   className="table"

diff --git a/.travis.yml b/.travis.yml
@@ -3,16 +3,9 @@ language: node_js
 node_js:
   - 6
 
-before_install:
-  - yarn global add greenkeeper-lockfile@1
-
-before_script:
-  - greenkeeper-lockfile-update
-
 script:
-  - yarn run lint
-  - yarn run test
+  - npm run lint
+  - npm run test
 
 after_script:
-  - greenkeeper-lockfile-upload
-  - yarn run coveralls
+  - npm run coveralls
diff --git a/CNAME b/CNAME
diff --git a/README.md b/README.md
@@ -10,12 +10,12 @@ Components' markup, keyboard triggers, and behavior are based on the [WAI-ARIA 1
 
 ## Development
 
-First, clone the repo and install dependencies. You must be running Node 6 or newer. We recommend [Yarn](https://yarnpkg.com) for installation.
+First, clone the repo and install dependencies. You must be running Node 6 or newer.
 
 ```
 $ git clone git@github.com:edx/paragon.git
 $ cd paragon
-$ yarn install
+$ npm install
 ```
 
 ### Storybook
@@ -25,7 +25,7 @@ Paragon uses [Storybook](https://storybook.js.org/) to generate and serve its do
 To start the Storybook server locally, run the following:
 
 ```
-$ yarn run start
+$ npm run start
 ```
 
 Storybook will serve at http://localhost:6006. It's important to note that the Storybook server uses its own [webpack config file](https://github.com/edx/paragon/blob/master/.storybook/webpack.config.js) which is separate from the project root config.
@@ -43,7 +43,7 @@ Make sure to define PropTypes and DefaultProps on your components, using the [pr
 Paragon runs ESLint as a pre-commit hook. If your code fails linting, you will not be able to commit. To avoid hitting a giant-wall-of-linter-failures when you try to commit, we recommend [configuring your editor to run ESLint](http://eslint.org/docs/user-guide/integrations). To run ESLint in the console at any time, run the following:
 
 ```
-$ yarn run lint
+$ npm run lint
 ```
 
 Paragon's ESLint config is based off [eslint-config-edx](https://github.com/edx/eslint-config-edx/tree/master/packages/eslint-config-edx), which itself is based off [eslint-config-airbnb](https://www.npmjs.com/package/eslint-config-airbnb). Paragon uses ESLint 3 (and will upgrade to v4 as soon as eslint-config-airbnb releases a supported version), which itself comes with a number of built-in rules. This configuration is highly opinionated and may contain some rules with which you aren't yet familiar, like [comma-dangle](http://eslint.org/docs/rules/comma-dangle), but rest assured, you're writing modern, best-practice JS 💅
@@ -63,7 +63,7 @@ Paragon also uses Airbnb's [Enzyme](http://airbnb.io/enzyme/) library to help re
 To run the unit tests, run:
 
 ```
-yarn run test
+npm run test
 ```
 
 To add unit tests for a component, create a file in your component's directory named `<ComponentName>.test.js`. Jest will automatically pick up this file and run the tests as part of the suite. Take a look at [Dropdown.test.jsx](https://github.com/edx/paragon/blob/master/src/Dropdown/Dropdown.test.jsx) or [CheckBox.test.jsx](https://github.com/edx/paragon/blob/master/src/CheckBox/CheckBox.test.jsx) for examples of good component unit tests.
@@ -75,7 +75,7 @@ Jest has built-in [snapshot testing](http://facebook.github.io/jest/docs/en/snap
 When you modify components or stories (or add new components or stories), make sure to update the snapshots or else the snapshot tests will fail. It's easy to do -- just run:
 
 ```
-$ yarn run snapshot
+$ npm run snapshot
 ```
 
 If the snapshot tests fail, it's generally pretty easy to tell whether it's happening because of a bug or because the snapshots need to be updated. Don't be afraid to inspect the test output for clues!

diff --git a/dist/Dropdown.js b/dist/Dropdown.js
diff --git a/dist/Dropdown.js.map b/dist/Dropdown.js.map