Merge pull request #6 from hashicorp/chore-button

Chore button

addons/rose/README.md

@@ -11,6 +11,8 @@ Project Watchtower UIs.
 - [Installation](#installation)
 - [Yarn Commands](#yarn-commands)
 - [Linting](#linting)
+- [Formatting](#formatting)
+- [Building Components](#building-components)
 - [Running tests](#running-tests)
 - [Running the dummy application](#running-the-dummy-application)
 - [Contributing](#contributing)
@@ -44,6 +46,7 @@ List of available project commands.  `yarn run <command-name>`
 | format:js | Auto-formats `js` files using Prettier. |
 | format:sass | Auto-formats `scss` files using Prettier. |
 | start | Runs the dummy app local server. |
+| storybook | Runs the Storybook local server on port 6006.  Be sure to start the standard server (see above) in a separate terminal. |
 | test | Runs all tests. |
 | test:all | Runs tests across multiple Ember versions with ember-try. |
 | doc:toc | Automatically generates a table of contents for this README file. |
@@ -63,6 +66,13 @@ Before submitting your work, be sure to run auto-formatters
 
 * `yarn format`
 
+## Building Components
+
+To build a new component, start by generating it on the command line with
+`ember g component rose/component-name`.  Then manually add a Storybook story in
+`stories/component-name.stories.js`.  Use the Storybook UI during component
+development (see Yarn commands).
+
 ## Running tests
 
 * `yarn test` – Runs the test suite on the current Ember version

addons/rose/addon/styles/rose/components/_button.scss

@@ -54,3 +54,83 @@
     box-shadow: none,
   )
 );
+
+@include button.button-style(
+  'warning',
+  (
+    color: var(--failure),
+    background-color: var(--subtle),
+    border-color: var(--failure),
+    box-shadow: 0px 4px 4px rgba(var(--stark-components), var(--opacity-2)),
+  ),
+  (
+    color: var(--white),
+    border-color: var(--failure-starker-1),
+    background-color: var(--failure),
+    box-shadow: (
+      0px 4px 4px rgba(var(--stark-components), var(--opacity-3)),
+      0px 4px 8px rgba(var(--stark-components), var(--opacity-4)),
+    ),
+    text-shadow: 0px 1px 1px rgba(var(--black-components), var(--opacity-2)),
+  ),
+  (
+    color: var(--white),
+    border-color: var(--ui-gray-starker-2),
+    background-color: var(--failure-starker-1),
+    box-shadow: (
+      0px 4px 4px rgba(var(--stark-components), var(--opacity-3)),
+      0px 4px 8px rgba(var(--stark-components), var(--opacity-4)),
+    ),
+    text-shadow: 0px 1px 1px rgba(var(--black-components), var(--opacity-2)),
+  ),
+  (
+    border-color: var(--ui-gray-subtler-2),
+    opacity: var(--opacity-1),
+    box-shadow: none,
+  )
+);
+
+@include button.button-style(
+  'ghost',
+  (
+    color: var(--info),
+    border-color: transparent,
+    background-color: var(--subtle)
+  ),
+  (
+    background-color: var(--ui-gray-subtler-5),
+  ),
+  (
+    background-color: var(--ui-gray-subtler-4),
+  ),
+  (
+    opacity: var(--opacity-1),
+  )
+);
+
+.rose-button-inline-link-action {
+  color: var(--info);
+  border: 0;
+  background: none;
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
+  display: inline;
+  font-size: 1rem;
+  font-weight: 600;
+
+  &:not(:disabled) {
+    &:hover {
+      text-decoration: underline;
+    }
+    &:active {
+      color: var(--info-starker-1);
+    }
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: var(--opacity-1);
+  }
+
+}

addons/rose/addon/styles/rose/utilities/_button.scss

@@ -68,6 +68,9 @@
     @if $disabled {
       &:disabled {
         cursor: not-allowed;
+        @if map.get($disabled, 'border-color') {
+          border-color: map.get($disabled, 'border-color');
+        }
         @if map.get($disabled, 'opacity') {
           opacity: map.get($disabled, 'opacity');
         }

addons/rose/addon/styles/rose/variables/color/_css.scss

@@ -110,8 +110,8 @@
 
     --failure-subtler-2: #{color(red, 900)};
     --failure-subtler-1: #{color(red, 800)};
-    --failure: #{color(red)};
-    --failure-starker-1: #{color(red, 200)};
+    --failure: #{color(red, 400)};
+    --failure-starker-1: #{color(red, 300)};
 
     --success-subtler-2: #{color(green, 900)};
     --success-subtler-1: #{color(green, 800)};

addons/rose/addon/styles/rose/variables/color/_sass.scss

@@ -35,8 +35,10 @@ $color-values: (
     100: #ebeef2,
     200: #dce0e6,
     300: #bac1cc,
+    400: #8e96a3,
     500: map.get($colors, ui-gray),
     600: #626873,
+    700: #525761,
     800: #373a42,
     900: #1f2124,
   ),
@@ -78,6 +80,9 @@ $color-values: (
   red: (
     010: #fdfafb,
     100: #efc7cc,
+    200: #e5a2aa,
+    300: #db7d88,
+    400: #d15866,
     500: map.get($colors, red),
     800: #5b1820,
   ),

addons/rose/stories/button.stories.js

@@ -28,6 +28,7 @@ export const Normal = () => ({
         secondary: 'secondary',
         warning: 'warning',
         ghost: 'ghost',
+        'inline-link-action': 'inline-link-action',
       },
       'primary'
     ),