Merge pull request #308 from 18F/ms-global_error

Global notification and button refactoring
cloud-gov · Feb 22, 2017 · 3461fcc · 3461fcc
2 parents 3d852ee + f6475f0
commit 3461fcc
Show file tree

Hide file tree

Showing 17 changed files with 242 additions and 120 deletions.
diff --git a/docs/src/components/_preview-bg-dark.html b/docs/src/components/_preview-bg-dark.html
@@ -2,7 +2,7 @@
 <html>
 <head>
     <meta charset="utf-8">
-    <link media="all" rel="stylesheet" href="{{ '/css/cloudgov-style-min.css' | path }}">
+    <link media="all" rel="stylesheet" href="{{ '/css/cloudgov-style.css' | path }}">
     <link media="all" rel="stylesheet" href="{{  '/css/main.css' | path }}">
     <title>Cloud.gov Pattern Library</title>
 </head>

diff --git a/docs/src/components/_preview-bg.html b/docs/src/components/_preview-bg.html
@@ -2,7 +2,7 @@
 <html>
 <head>
     <meta charset="utf-8">
-    <link media="all" rel="stylesheet" href="{{ '/css/cloudgov-style-min.css' | path }}">
+    <link media="all" rel="stylesheet" href="{{ '/css/cloudgov-style.css' | path }}">
     <link media="all" rel="stylesheet" href="{{  '/css/main.css' | path }}">
     <title>Cloud.gov Pattern Library</title>
 </head>

diff --git a/docs/src/components/_preview-layout.html b/docs/src/components/_preview-layout.html
@@ -2,7 +2,7 @@
 <html>
 <head>
     <meta charset="utf-8">
-    <link media="all" rel="stylesheet" href="{{ '/css/cloudgov-style-min.css' | path }}">
+    <link media="all" rel="stylesheet" href="{{ '/css/cloudgov-style.css' | path }}">
     <link media="all" rel="stylesheet" href="{{  '/css/main.css' | path }}">
     <title>Cloud.gov Pattern Library</title>
 </head>

diff --git a/docs/src/components/components/action/button-outline/button-outline.html b/docs/src/components/components/action/button-outline/button-outline.html
@@ -1,3 +1,3 @@
 {% if isOutline %}
-<button class="usa-button usa-button-outline action action-{{ buttonStatus }}">{{ buttonText }}</button>
+<button class="action action-outline action-{{ buttonStatus }}">{{ buttonText }}</button>
 {% endif %}
diff --git a/docs/src/components/components/action/button/button.html b/docs/src/components/components/action/button/button.html
@@ -1,3 +1,3 @@
 {% if isDefault %}
-<button class="usa-button action action-{{ buttonStatus }} usa-button-{{ buttonStatus }}">{{ buttonText }}</button>
+<button class="action action-{{ buttonStatus }} usa-button usa-button-{{ buttonStatus }}">{{ buttonText }}</button>
 {% endif %}
diff --git a/docs/src/components/components/action/link/link.html b/docs/src/components/components/action/link/link.html
@@ -1,3 +1,3 @@
 {% if isLink %}
-<a class="action action-link action-{{ buttonStatus }}" href="javascript:void(0)">{{ buttonText }}</a>
+<a class="action-link action-{{ buttonStatus }}" href="javascript:void(0)">{{ buttonText }}</a>
 {% endif %}
diff --git a/docs/src/components/components/notification/README.md b/docs/src/components/components/notification/README.md
@@ -0,0 +1,3 @@
+# Notification
+
+Write documentation
diff --git a/docs/src/components/components/notification/notification.config.yml b/docs/src/components/components/notification/notification.config.yml
@@ -0,0 +1,22 @@
+title: notification
+preview: '@preview-bg'
+status: prototype
+variants:
+  - name: error
+    context:
+      status: 'error'
+      message: 'Something bad happened, please try again.'
+      actionText: 'Refresh'
+  - name: warning
+    context:
+      status: 'warning'
+      message: 'Something bad might happen, check this.'
+      actionText: 'Check thing'
+  - name: info
+    context:
+      status: 'info'
+      message: 'Here is some information'
+  - name: finish
+    context:
+      status: 'finish'
+      message: 'This is complete'
diff --git a/docs/src/components/components/notification/notification.html b/docs/src/components/components/notification/notification.html
@@ -0,0 +1,14 @@
+
+<div class="notification notification-{{ status }}">
+  <div class="notification-wrap">
+    <p class="notification-message">{{ message }}</p>
+    {% if actionText %}
+    <button href="#" class="notification-action action action-outline action-white">
+      {{ actionText }}
+    </button>
+    {% endif %}
+    <a href="#" class="notification-dismiss" title="Dismiss notification">
+      <span class="usa-sr-only">Close</span>
+    </a>
+  </div>
+</div>
diff --git a/package.json b/package.json
@@ -13,14 +13,14 @@
     "build-prefix": "postcss --use autoprefixer css/cloudgov-style.css -o ./css/cloudgov-style.css",
     "build-img": "mkdir -p ./img && npm run copy-img && npm run svg",
     "build-library": "npm run build-library-assets && fractal build && cp nginx.conf docs/build/",
-    "build-library-assets": "npm run clean && npm run build-css && npm run compile-css && npm run build-font && npm run build-img && npm run copy-library-assets",
+    "build-library-assets": "npm run clean && npm run build-css && npm run build-font && npm run build-img && npm run copy-library-assets",
     "check-publish": "publish",
     "compile-css": "cleancss ./css/cloudgov-style.css -o ./css/cloudgov-style-min.css",
     "compile-js": "uglifyjs ./js/cloudgov-style.js -o ./js/cloudgov-style-min.js",
     "copy-img": "cp -r node_modules/uswds/dist/img/*  img/ && cp ./src/img/* ./img",
     "copy-font": "mkdir -p ./fonts && cp node_modules/uswds/dist/fonts/* fonts/ && cp ./src/font/* ./fonts",
     "copy-library-assets": "npm-run-all copy-library-assets-*",
-    "copy-library-assets-css": "mkdir -p ./docs/assets/css && cp ./css/cloudgov-style-min.css ./docs/src/main.css ./docs/assets/css",
+    "copy-library-assets-css": "mkdir -p ./docs/assets/css && cp ./css/cloudgov-style.css ./docs/src/main.css ./docs/assets/css",
     "copy-library-assets-font": "mkdir -p ./docs/assets/fonts && cp ./fonts/* ./docs/assets/fonts",
     "copy-library-assets-img": "mkdir -p ./docs/assets/img && cp -R ./img/* ./docs/assets/img",
     "lint": "node node_modules/.bin/18f-stylelint-rules './src/css/**/*.scss'",

diff --git a/src/css/components/actions.scss b/src/css/components/actions.scss
@@ -4,129 +4,101 @@
 @import '../../../node_modules/uswds/src/stylesheets/core/utilities.scss';
 @import '../../../node_modules/uswds/src/stylesheets/core/defaults.scss';
 
-.action-link {
-  color: $color-blue;
-  font-size: inherit;
-  font-weight: bold;
-  text-decoration: underline;
-
-  &:visited { color: $color-blue; }
+/* stylelint-disable plugin/name-format */
+@mixin button-color ($main_color, $hover_color) {
+  background-color: $main_color;
 
   &:hover {
-    color: $color-textblack;
+    background-color: $hover_color;
   }
 
-  &.usa-button {
-    padding-bottom: 0.55rem;
-    padding-top: 0.55rem;
+  &.action-link,
+  &.action-outline,
+  &.usa-button-outline {
+    color: $main_color;
+
+    &:focus,
+    &:active,
+    &:hover {
+      color: $hover_color;
+    }
   }
+}
+/* stylelint-enable */
 
-  & + .action {
-    margin-left: $grid-1;
+// TODO remove once usa-button deprecated
+.usa-button {
+  &:hover {
+    background: $color-textblack;
   }
 }
 
-// Extra specificity due to WDS.
 .action {
-
-  &.action-cautious {
-    background-color: $color-lightgray;
-
-    &.action-link {
-      background-color: transparent;
-      color: $color-lightgray;
-    }
-
-    &.usa-button-outline {
-      background-color: transparent;
-      box-shadow: inset 0 0 0 1px $color-lightgray;
-      color: $color-lightgray;
-    }
+  &:hover {
+    background: $color-textblack;
   }
+}
 
-  &.action-warning {
-    background-color: $color-warning;
-
-    &:hover {
-      background-color: $color-textblack;
-    }
-
-    &.action-link {
-      background-color: transparent;
-      color: $color-warning;
-      &:hover {
-        color: $color-textblack;
-      }
-    }
+/* stylelint-disable selector-no-qualifying-type */
+a.action {
+  padding-bottom: 0.55rem;
+  padding-top: 0.55rem;
+}
+/* stylelint-enable */
 
-    &.usa-button-outline {
-      background-color: $color-white;
-      box-shadow: inset 0 0 0 1px $color-warning;
-      color: $color-warning;
+.action-primary {
+  @include button-color($color-primary, $color-textblack);
+}
 
-      &:hover {
-        box-shadow: inset 0 0 0 1px $color-textblack;
-        color: $color-textblack;
-      }
-    }
-  }
+.action-base {
+  @include button-color($color-textblack, $color-primary);
+}
 
-  &.action-finish {
-    background-color: $color-finish;
+.action-cautious {
+  @include button-color($color-lightgray, $color-lightgray);
+}
 
-    &:hover {
-      background-color: $color-textblack;
-      color: $color-white;
-    }
+.action-warning {
+  @include button-color($color-warning, $color-textblack);
+}
 
-    &.action-link {
-      background-color: transparent;
-      color: $color-finish;
+.action-finish {
+  @include button-color($color-textgreen, $color-textblack);
+}
 
-      &:hover {
-        color: $color-textblack;
-      }
-    }
+.action-white {
+  @include button-color(white, $color-primary);
+}
 
-    &.usa-button-outline {
-      background-color: $color-white;
-      box-shadow: inset 0 0 0 1px $color-finish;
-      color: $color-finish;
+.action-outline {
+  box-shadow: inset 0 0 0 1px;
+  background-color: transparent;
 
-      &:hover {
-        box-shadow: inset 0 0 0 1px $color-textblack;
-        color: $color-textblack;
-      }
+  &.action-outline {
+    &:focus,
+    &:hover,
+    &:active {
+      background-color: transparent;
+      box-shadow: inset 0 0 0 1px;
     }
   }
+}
 
-  &.action-base {
-    background-color: $color-textblack;
-
-    &:hover {
-      background-color: $color-blue;
-      color: $color-white;
-    }
-
-    &.action-link {
-      background-color: transparent;
-      color: $color-textblack;
-
-      &:hover {
-        color: $color-blue;
-      }
-    }
+.action-link {
+  background-color: transparent;
+  color: $color-blue;
+  font-size: inherit;
+  font-weight: bold;
+  text-decoration: underline;
 
-    &.usa-button-outline {
-      background-color: $color-white;
-      box-shadow: inset 0 0 0 1px $color-textblack;
-      color: $color-textblack;
+  &:hover {
+    background-color: transparent;
+    color: $color-textblack;
+  }
 
-      &:hover {
-        box-shadow: inset 0 0 0 1px $color-blue;
-        color: $color-blue;
-      }
-    }
+  & + .action-link,
+  & + .action {
+    margin-left: $grid-1;
   }
 }
 

diff --git a/src/css/components/all.scss b/src/css/components/all.scss
@@ -24,6 +24,7 @@
 @import 'nav.scss';
 @import 'nav-breadcrumb.scss';
 @import 'nav_toggle.scss';
+@import 'notification.scss';
 @import 'overview.scss';
 @import 'page_header.scss';
 @import 'panel.scss';

diff --git a/src/css/components/nav.scss b/src/css/components/nav.scss
@@ -17,6 +17,7 @@
     justify-content: flex-end;
   }
   .action {
+    &.action-outline,
     &.usa-button-outline {
       margin: -.25rem 0 0 0;
       padding: .55rem 1rem;