From 6d29755ceea8abe7c68db02280158243965f95b7 Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Wed, 29 Apr 2020 10:21:03 -0400 Subject: [PATCH 1/4] =?UTF-8?q?chore:=20=F0=9F=A4=96=20add=20warning-style?= =?UTF-8?q?=20button?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../addon/styles/rose/components/_button.scss | 35 +++++++++++++++++++ .../addon/styles/rose/utilities/_button.scss | 3 ++ .../styles/rose/variables/color/_css.scss | 4 +-- .../styles/rose/variables/color/_sass.scss | 5 +++ 4 files changed, 45 insertions(+), 2 deletions(-) diff --git a/addons/rose/addon/styles/rose/components/_button.scss b/addons/rose/addon/styles/rose/components/_button.scss index 9e9909dd7..0fd7f871b 100644 --- a/addons/rose/addon/styles/rose/components/_button.scss +++ b/addons/rose/addon/styles/rose/components/_button.scss @@ -54,3 +54,38 @@ 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, + ) +); diff --git a/addons/rose/addon/styles/rose/utilities/_button.scss b/addons/rose/addon/styles/rose/utilities/_button.scss index b27db5a4e..42ca267fc 100644 --- a/addons/rose/addon/styles/rose/utilities/_button.scss +++ b/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'); } diff --git a/addons/rose/addon/styles/rose/variables/color/_css.scss b/addons/rose/addon/styles/rose/variables/color/_css.scss index aa6afa069..efd549ed6 100644 --- a/addons/rose/addon/styles/rose/variables/color/_css.scss +++ b/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)}; diff --git a/addons/rose/addon/styles/rose/variables/color/_sass.scss b/addons/rose/addon/styles/rose/variables/color/_sass.scss index 0adc3c887..1b11456b1 100644 --- a/addons/rose/addon/styles/rose/variables/color/_sass.scss +++ b/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, ), From f93546d6170a6855c0a34f27fa3b43b5285f40a5 Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Wed, 29 Apr 2020 10:28:20 -0400 Subject: [PATCH 2/4] =?UTF-8?q?chore:=20=F0=9F=A4=96=20add=20ghost-style?= =?UTF-8?q?=20button?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../addon/styles/rose/components/_button.scss | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/addons/rose/addon/styles/rose/components/_button.scss b/addons/rose/addon/styles/rose/components/_button.scss index 0fd7f871b..9f7e04782 100644 --- a/addons/rose/addon/styles/rose/components/_button.scss +++ b/addons/rose/addon/styles/rose/components/_button.scss @@ -89,3 +89,21 @@ 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), + ) +); From d59a9af60e34dde21e0b5ae8e0e8ba656e8cde3d Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Wed, 29 Apr 2020 11:18:46 -0400 Subject: [PATCH 3/4] =?UTF-8?q?docs:=20=E2=9C=8F=EF=B8=8F=20add=20readme?= =?UTF-8?q?=20section=20about=20components?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- addons/rose/README.md | 10 ++++++++++ addons/rose/stories/{rose => }/button.stories.js | 0 2 files changed, 10 insertions(+) rename addons/rose/stories/{rose => }/button.stories.js (100%) diff --git a/addons/rose/README.md b/addons/rose/README.md index 896fd8f47..c61b25b72 100644 --- a/addons/rose/README.md +++ b/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 ` | 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 diff --git a/addons/rose/stories/rose/button.stories.js b/addons/rose/stories/button.stories.js similarity index 100% rename from addons/rose/stories/rose/button.stories.js rename to addons/rose/stories/button.stories.js From 700b9e2159e4ad638d95873005b6484d41257f3d Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Wed, 29 Apr 2020 11:27:10 -0400 Subject: [PATCH 4/4] =?UTF-8?q?chore:=20=F0=9F=A4=96=20add=20inline-link-a?= =?UTF-8?q?ction=20style=20button?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../addon/styles/rose/components/_button.scss | 27 +++++++++++++++++++ addons/rose/stories/button.stories.js | 1 + 2 files changed, 28 insertions(+) diff --git a/addons/rose/addon/styles/rose/components/_button.scss b/addons/rose/addon/styles/rose/components/_button.scss index 9f7e04782..c94a3ec03 100644 --- a/addons/rose/addon/styles/rose/components/_button.scss +++ b/addons/rose/addon/styles/rose/components/_button.scss @@ -107,3 +107,30 @@ 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); + } + +} diff --git a/addons/rose/stories/button.stories.js b/addons/rose/stories/button.stories.js index c74e67b40..41498f0ea 100644 --- a/addons/rose/stories/button.stories.js +++ b/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' ),