Merge pull request #42 from edx/fsheets/status-alert

Create new StatusAlert accessible component. Bump to version 0.1.0.
openedx · Oct 16, 2017 · c046e63 · c046e63
2 parents a4e492b + 3049dae
commit c046e63
Show file tree

Hide file tree

Showing 10 changed files with 668 additions and 11 deletions.
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/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@edx/paragon",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "src/index.js",
   "author": "arizzitano",
@@ -21,7 +21,8 @@
     "classnames": "^2.2.5",
     "prop-types": "^15.5.8",
     "react": "^15.5.4",
-    "react-dom": "^15.5.4"
+    "react-dom": "^15.5.4",
+    "react-proptype-conditional-require": "^1.0.4"
   },
   "devDependencies": {
     "@storybook/addon-actions": "^3.2.12",

diff --git a/src/Button/Button.scss b/src/Button/Button.scss
@@ -1 +1,2 @@
 @import "~bootstrap/scss/_buttons";
+@import "~bootstrap/scss/_close";
diff --git a/src/Button/index.jsx b/src/Button/index.jsx
@@ -10,6 +10,7 @@ function Button(props) {
     className,
     display,
     inputRef,
+    isClose,
     onBlur,
     onClick,
     onKeyDown,
@@ -24,6 +25,8 @@ function Button(props) {
         styles.btn,
       ], {
         [styles[`btn-${buttonType}`]]: buttonType !== undefined,
+      }, {
+        [styles.close]: isClose,
       })}
       onBlur={onBlur}
       onClick={onClick}
@@ -40,8 +43,9 @@ function Button(props) {
 export const buttonPropTypes = {
   buttonType: PropTypes.string,
   className: PropTypes.arrayOf(PropTypes.string),
-  display: PropTypes.string.isRequired,
+  display: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
   inputRef: PropTypes.func,
+  isClose: PropTypes.bool,
   onBlur: PropTypes.func,
   onClick: PropTypes.func,
   onKeyDown: PropTypes.func,
@@ -54,6 +58,7 @@ Button.defaultProps = {
   buttonType: undefined,
   className: [],
   inputRef: () => {},
+  isClose: false,
   onBlur: () => {},
   onClick: () => {},
   onKeyDown: () => {},

diff --git a/src/Modal/index.jsx b/src/Modal/index.jsx
@@ -96,7 +96,7 @@ class Modal extends React.Component {
             <div className={styles['modal-header']}>
               <h5 className={styles['modal-title']} id={this.headerId}>{this.props.title}</h5>
               <Button
-                display="&times;"
+                display={<span aria-hidden="true">&times;</span>}
                 aria-label={this.props.closeText}
                 buttonType="light"
                 onClick={this.close}

diff --git a/src/StatusAlert/README.md b/src/StatusAlert/README.md
@@ -0,0 +1,23 @@
+# StatusAlert
+
+Provides a status alert component with customizable dialog options. StatusAlert has an X button on the right by default (see dismissible option).
+
+## API
+
+### `alertType` (string; optional)
+`alertType` specifies the type of alert that is being diplayed. It defaults to "warning".  See the other available [bootstrap](https://v4-alpha.getbootstrap.com/components/alerts/) options.
+
+### `className` (string array; optional)
+`className` is a string array that defines the classes to be used within the status alert.
+
+### `dialog` (string or element; required)
+`dialog` is a string or an element that is rendered inside of the status alert as the main data.
+
+### `dismissible` (boolean; optional)
+`dismissible` specifies if the status alert will include the dismissible X button to close the alert. It defaults to true.
+
+### `onClose` (function; conditionally required)
+`onClose` is a function that is called on close. It can be used to perform actions upon closing of the status alert, such as restoring focus to the previous logical focusable element.  It is only required if `dismissible` is set to `true` and not required if the alert if not `dismissible`.
+
+### `open` (boolean; optional)
+`open` specifies whether the status alert renders open or closed on the initial render. It defaults to false.
diff --git a/src/StatusAlert/StatusAlert.scss b/src/StatusAlert/StatusAlert.scss
@@ -0,0 +1,4 @@
+@import "~bootstrap/scss/_alert";
+@import "~bootstrap/scss/_buttons";
+@import "~bootstrap/scss/_close";
+@import "~bootstrap/scss/_transitions.scss";
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		@import "~bootstrap/scss/_buttons";
		@import "~bootstrap/scss/_close";