From 32ecf51f430887c5d075c599177ed29ad982c3d9 Mon Sep 17 00:00:00 2001 From: Bryan Date: Mon, 8 Nov 2021 16:32:19 -0500 Subject: [PATCH 1/4] Create buttonSecondary component. Styled per latest Figma file. --- src/layouts/componentTest/componentTest.vue | 9 ++++ src/styles/commonButtonStyles.scss | 42 +++++++++++++++++++ src/styles/uxVariables.scss | 2 +- .../buttonSecondary/buttonSecondary.spec.js | 1 + .../buttonSecondary/buttonSecondary.vue | 31 ++++++++++++++ 5 files changed, 84 insertions(+), 1 deletion(-) create mode 100644 src/uxComponents/buttonSecondary/buttonSecondary.spec.js create mode 100644 src/uxComponents/buttonSecondary/buttonSecondary.vue diff --git a/src/layouts/componentTest/componentTest.vue b/src/layouts/componentTest/componentTest.vue index 1128790eb..83bd541b8 100644 --- a/src/layouts/componentTest/componentTest.vue +++ b/src/layouts/componentTest/componentTest.vue @@ -30,6 +30,13 @@ /> +
+
+ +
+
import buttonPrimary from "@/uxComponents/buttonPrimary/buttonPrimary"; +import buttonSecondary from "@/uxComponents/buttonSecondary/buttonSecondary"; import radioCard from "@/uxComponents/radioCard/radioCard"; import listButton from "@/uxComponents/listButton/listButton"; export default { name: "App", components: { buttonPrimary, + buttonSecondary, radioCard, listButton }, diff --git a/src/styles/commonButtonStyles.scss b/src/styles/commonButtonStyles.scss index 1f4dd97b8..b6f7896f0 100644 --- a/src/styles/commonButtonStyles.scss +++ b/src/styles/commonButtonStyles.scss @@ -43,6 +43,48 @@ border-radius: $border-radius-lg; } } + &.btn-secondary { + position: relative; + background: transparent; + border: 1px solid $blue; + border-radius: $border-radius-lg; + height: 48px; + color: $blue; + transition: all 150ms linear; + &:hover { + color: $white; + background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%); + } + &:focus, // Mouse, touch, stylus focus + &:focus-visible { // Keyboard focus for accessibility + outline: none; + box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $blue-700; + } + &.button-loader { + padding: 0 40px 0 12px; + &:after { + content: url(../../assets/img/icons/button-spinner-blue.svg); + position: absolute; + right: 14px; + width: 16px; + height: 16px; + margin-left: 12px; + animation: rotation 1s infinite linear; + @keyframes rotation { + 100% { + transform:rotate(360deg); + } + } + } + } + &:disabled { + background: transparent; + color: $gray !important; + height: 48px; + border: 1px solid $gray-300; + border-radius: $border-radius-lg; + } + } &.list-button { position: relative; background: $white; diff --git a/src/styles/uxVariables.scss b/src/styles/uxVariables.scss index f3e15b271..514e2f179 100644 --- a/src/styles/uxVariables.scss +++ b/src/styles/uxVariables.scss @@ -10,7 +10,7 @@ $blue-200: #C1DFEE; $blue-300: #9FCEE6; $blue-400: #69ADCF;// Used in theme $blue-500: #3B8FB8; -$blue: #167CAC;// Default Blue +$blue: #1574A1;// Default Blue $blue-700: #06577C; $blue-800: #003D58; $blue-900: #002433;// Used in theme diff --git a/src/uxComponents/buttonSecondary/buttonSecondary.spec.js b/src/uxComponents/buttonSecondary/buttonSecondary.spec.js new file mode 100644 index 000000000..882a68129 --- /dev/null +++ b/src/uxComponents/buttonSecondary/buttonSecondary.spec.js @@ -0,0 +1 @@ +test.todo('some test to be written in the future'); \ No newline at end of file diff --git a/src/uxComponents/buttonSecondary/buttonSecondary.vue b/src/uxComponents/buttonSecondary/buttonSecondary.vue new file mode 100644 index 000000000..19961efa0 --- /dev/null +++ b/src/uxComponents/buttonSecondary/buttonSecondary.vue @@ -0,0 +1,31 @@ + + + From 4c2df7f18334597c63c4fcc0ce5be4c354a6f2c4 Mon Sep 17 00:00:00 2001 From: Bryan Date: Tue, 9 Nov 2021 09:10:08 -0500 Subject: [PATCH 2/4] Update box shadow variables per Figma spec. --- src/styles/uxVariables.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/styles/uxVariables.scss b/src/styles/uxVariables.scss index 514e2f179..c6c1fb8ba 100644 --- a/src/styles/uxVariables.scss +++ b/src/styles/uxVariables.scss @@ -157,3 +157,9 @@ $grid-breakpoints: ( lg: 1074px, xl: 1416px ); + +//Shadow +$box-shadow: 0 .5rem 1rem rgba($black, .15); +$box-shadow-sm: 0 .125rem .25rem rgba($black, .075); +$box-shadow-lg: 0 1rem 3rem rgba($black, .25);//Safelite default +$box-shadow-inset: inset 0 1px 2px rgba($black, .075); From 703919cd103710558d5ed50d8b1e40004cce7e8e Mon Sep 17 00:00:00 2001 From: Bryan Date: Tue, 9 Nov 2021 13:09:34 -0500 Subject: [PATCH 3/4] Updated listButton styles. Add error state with dynamic error message. --- src/layouts/componentTest/componentTest.vue | 1 + src/styles/commonButtonStyles.scss | 21 +++++++++++++++++++-- src/uxComponents/listButton/listButton.vue | 21 +++++++++++++-------- 3 files changed, 33 insertions(+), 10 deletions(-) diff --git a/src/layouts/componentTest/componentTest.vue b/src/layouts/componentTest/componentTest.vue index 83bd541b8..0f3c70aef 100644 --- a/src/layouts/componentTest/componentTest.vue +++ b/src/layouts/componentTest/componentTest.vue @@ -41,6 +41,7 @@
diff --git a/src/styles/commonButtonStyles.scss b/src/styles/commonButtonStyles.scss index b6f7896f0..4f409cb76 100644 --- a/src/styles/commonButtonStyles.scss +++ b/src/styles/commonButtonStyles.scss @@ -91,11 +91,28 @@ height: 48px; transition: all 150ms linear; border-radius: $border-radius-lg; - border: 1px solid rgba($gray-300,.3); + border: 1px solid $gray-500; width: 100%; + &:hover { + box-shadow: 0 0 0 4px $blue-100; + } &:focus, // Mouse, touch, stylus focus &:focus-visible { // Keyboard focus for accessibility - box-shadow: none; + box-shadow: 0 0 0 2px $blue; + } + &:active { + background: $blue-100; + border: 1px solid $blue; + } + + label { + display: none; + } + &.error { + border: 1px solid $danger; + ~ label { + display: flex; + color: $danger; + } } &.button-loader { padding: 0 40px 0 12px; diff --git a/src/uxComponents/listButton/listButton.vue b/src/uxComponents/listButton/listButton.vue index 143dddae6..e6297fe60 100644 --- a/src/uxComponents/listButton/listButton.vue +++ b/src/uxComponents/listButton/listButton.vue @@ -1,22 +1,27 @@