From f32439972dcf9a74da845e572b5ca2e37eb61381 Mon Sep 17 00:00:00 2001 From: bmauger Date: Wed, 16 Feb 2022 15:01:17 -0500 Subject: [PATCH] Add error states to component-test page, update disabled button styles Center footer link when stacked. --- .../funnel-footer/funnel-footer.vue | 8 + src/layouts/component-test/component-test.vue | 444 +++++++++++------- src/styles/common-error-styles.scss | 11 + src/ux-components/button-main/button-main.vue | 8 +- src/ux-components/checkbox/checkbox.vue | 3 +- .../list-button-horizontal.vue | 2 + src/ux-components/list-button/list-button.vue | 2 + src/ux-components/list-card/list-card.vue | 5 +- src/ux-components/radio/radio.vue | 3 +- 9 files changed, 304 insertions(+), 182 deletions(-) diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue index af604ed99..edb2420fa 100644 --- a/src/common-components/funnel-footer/funnel-footer.vue +++ b/src/common-components/funnel-footer/funnel-footer.vue @@ -97,6 +97,10 @@ export default { .btn-primary { width: 100%; } + a { + display: flex; + justify-content: center; + } @media only screen and (min-width: 340px) { .button-col, .link-col { @@ -105,6 +109,10 @@ export default { .btn-primary { width: auto; } + a { + display: flex; + justify-content: start; + } } } diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue index 43d67533f..8812fe58a 100644 --- a/src/layouts/component-test/component-test.vue +++ b/src/layouts/component-test/component-test.vue @@ -13,6 +13,14 @@ tabIndex="1" checkboxLabel="I'm a checkbox" /> +

With Error:

+
@@ -28,22 +36,32 @@ buttonID="radio-button-a" isRequired value="I'm a radio button!" - modelValue="Model Value 1" screenReaderOnlyText="Model Value 1" /> -
-
+
+
+

With Error:

+ +
+

Buttons

@@ -61,12 +79,39 @@
- +
- + +
+
+
+
+ +
+
+
+
+
@@ -98,44 +143,6 @@ />
-
-
-

List Card

-
Functioning as Checkbox in Column Layout
-
-
-
- Functioning as Checkbox -
- - - -
-

List Card

@@ -151,7 +158,7 @@ buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3" buttonLabel="Windshield" altText="" - buttonID="List Card Checkbox" + buttonID="List Card Checkbox 1" groupID="checkbox-demo-1" buttonLabelSubCopy="Description" /> @@ -168,13 +175,31 @@ buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3" buttonLabel="Windshield" altText="" - buttonID="List Card Checkbox b" + buttonID="List Card Checkbox 2" groupID="checkbox-demo-1a" buttonLabelSubCopy="" />
+
+
+
Checkbox with Error
+
+ Checkbox with Error + +
+
+
Functioning as Radio Button
@@ -186,7 +211,7 @@ buttonLabel="Windshield" altText="" buttonID="List Card Radio Button" - groupID="radio-demo-2" + groupID="radio-demo-2b" buttonLabelSubCopy="Description" /> @@ -209,6 +234,24 @@
+
+
+
Radio Button with Error
+
+ Radio Button with Error + +
+
+
Horizontal as Checkbox
@@ -245,6 +288,25 @@
+
+
+
Horizontal with Error
+
+ Horizontal with Error + +
+
+
Horizontal as Radio Button
@@ -279,6 +341,24 @@
+
+
+
Horizontal with Error
+
+ Horizontal with Error + +
+
+

List Button - Single-Line

@@ -333,6 +413,21 @@ sizeInRem="1" screenReaderOnlyText=" opens new window" /> +
Checkbox with Error
+
@@ -381,6 +476,20 @@ sizeInRem="1" screenReaderOnlyText=" opens new window" /> +
Radio Button with Error
+
@@ -652,6 +761,63 @@ />
+
+
Checkbox with Error
+ +
+ +

Select Vehicle Year

+ + + +
+
Functioning as Radio Buttons
@@ -706,6 +872,63 @@ />
+
+
Radio Button with Error
+ +
+ +

Select Vehicle Year

+ + + +
+

Typography

@@ -822,129 +1045,6 @@ />
-
-
-

Site Header

-
-
-
-
- -
-
-
-
-

Vehicle Banner

-
-
-
-
- -
-
-
-
-

Button Question

-
-
-
-
- - - - - - - - - - - -
-
@@ -954,8 +1054,6 @@ import buttonBack from "@/common-components/button-back/button-back"; import listCard from "@/ux-components/list-card/list-card"; import listButton from "@/ux-components/list-button/list-button"; import alert from "@/ux-components/alert/alert"; -import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner"; -import funnelHeader from "@/common-components/funnel-header/funnel-header"; import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal"; import checkbox from "@/ux-components/checkbox/checkbox"; import radio from "@/ux-components/radio/radio"; @@ -968,11 +1066,9 @@ export default { listCard, listButton, alert, - vehicleBanner, listButtonHorizontal, checkbox, radio, - funnelHeader, textLink }, data() { diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss index 880d54acc..2b93563cf 100644 --- a/src/styles/common-error-styles.scss +++ b/src/styles/common-error-styles.scss @@ -13,6 +13,7 @@ input[type=checkbox]:checked + label, input[type=radio]:checked + label { box-shadow: 0 0 0 2.5px transparent !important; + border: 1px solid $blue; } &.list-button-horizontal { color: $red; @@ -20,6 +21,16 @@ border: 1px solid $red; } } + &.ui-radio, + &.ui-checkbox { + input[type=radio]+label:before, + input[type=checkbox]+label:before { + border: 1px solid $red; + } + input[type=checkbox]:checked + label:before { + border: 1px solid $blue; + } + } } .form-test-error { diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue index 3b8b744f5..915c675eb 100644 --- a/src/ux-components/button-main/button-main.vue +++ b/src/ux-components/button-main/button-main.vue @@ -82,7 +82,7 @@ export default { $gray-200 0%, $gray-200 100% ) !important; - color: $gray-550 !important; + color: $gray-600 !important; height: 48px; border: none; border-radius: $border-radius-lg; @@ -118,10 +118,12 @@ export default { } &:disabled { background: transparent; - color: $gray !important; + color: $gray-550 !important; height: 48px; - border: 1px solid $gray-300; + border: 1px solid $gray-550; border-radius: $border-radius-lg; + cursor: pointer; + pointer-events: all; } &.has-loader { color: $white; diff --git a/src/ux-components/checkbox/checkbox.vue b/src/ux-components/checkbox/checkbox.vue index ca30ab330..24c9e830e 100644 --- a/src/ux-components/checkbox/checkbox.vue +++ b/src/ux-components/checkbox/checkbox.vue @@ -1,6 +1,6 @@