From d425bf3db734b5b4921f783b1da9cacb14211857 Mon Sep 17 00:00:00 2001 From: Bryan Date: Thu, 28 Oct 2021 09:56:57 -0400 Subject: [PATCH 1/5] Add List Button. --- src/App.vue | 8 +++++ src/assets/img/icons/button-spinner-green.svg | 3 ++ ...n-spinner.svg => button-spinner-white.svg} | 0 src/assets/scss/components/_buttons.scss | 30 +++++++++++++++++-- 4 files changed, 39 insertions(+), 2 deletions(-) create mode 100644 src/assets/img/icons/button-spinner-green.svg rename src/assets/img/icons/{button-spinner.svg => button-spinner-white.svg} (100%) diff --git a/src/App.vue b/src/App.vue index b27da5d12..d9ba93903 100644 --- a/src/App.vue +++ b/src/App.vue @@ -56,6 +56,14 @@ /> +
+
+ +
+
Text Link diff --git a/src/assets/img/icons/button-spinner-green.svg b/src/assets/img/icons/button-spinner-green.svg new file mode 100644 index 000000000..2ee9031dd --- /dev/null +++ b/src/assets/img/icons/button-spinner-green.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/img/icons/button-spinner.svg b/src/assets/img/icons/button-spinner-white.svg similarity index 100% rename from src/assets/img/icons/button-spinner.svg rename to src/assets/img/icons/button-spinner-white.svg diff --git a/src/assets/scss/components/_buttons.scss b/src/assets/scss/components/_buttons.scss index a59cef969..2a8e40bf3 100644 --- a/src/assets/scss/components/_buttons.scss +++ b/src/assets/scss/components/_buttons.scss @@ -16,7 +16,7 @@ &.button-loader { padding: 0 40px 0 12px; &:after { - content: url(../../assets/img/icons/button-spinner.svg); + content: url(../../assets/img/icons/button-spinner-white.svg); position: absolute; right: 14px; width: 16px; @@ -56,6 +56,32 @@ display: flex; justify-content: space-between; } + &.list-button { + position: relative; + background: $white; + height: 48px; + transition: all 150ms linear; + border-radius: $border-radius-lg; + border: 1px solid rgba($gray-300,.3); + width: 100%; + &.button-loader { + padding: 0 40px 0 12px; + &:after { + content: url(../../assets/img/icons/button-spinner-green.svg); + position: absolute; + right: 14px; + width: 16px; + height: 16px; + margin-left: 12px; + animation: rotation 1s infinite linear; + @keyframes rotation { + 100% { + transform:rotate(360deg); + } + } + } + } + } } // Non-Bootstrap button // Intended to be used without .btn class @@ -89,4 +115,4 @@ outline: none; box-shadow: 0 0 0 2px $blue; } -} \ No newline at end of file +} From 3854b4aa907102feed73ed5b41804a3fedb3ea00 Mon Sep 17 00:00:00 2001 From: Bryan Date: Thu, 28 Oct 2021 10:16:28 -0400 Subject: [PATCH 2/5] Create listButton component. Separate from buttonPrimary. --- src/App.vue | 4 ++- .../listButton/listButton.spec.js | 1 + src/uxComponents/listButton/listButton.vue | 28 +++++++++++++++++++ 3 files changed, 32 insertions(+), 1 deletion(-) create mode 100644 src/uxComponents/listButton/listButton.spec.js create mode 100644 src/uxComponents/listButton/listButton.vue diff --git a/src/App.vue b/src/App.vue index d9ba93903..7f44f49fa 100644 --- a/src/App.vue +++ b/src/App.vue @@ -58,7 +58,7 @@
- @@ -75,11 +75,13 @@ diff --git a/src/uxComponents/listButton/listButton.spec.js b/src/uxComponents/listButton/listButton.spec.js new file mode 100644 index 000000000..e360d0fc1 --- /dev/null +++ b/src/uxComponents/listButton/listButton.spec.js @@ -0,0 +1 @@ +test.todo('some test to be written in the future'); diff --git a/src/uxComponents/listButton/listButton.vue b/src/uxComponents/listButton/listButton.vue new file mode 100644 index 000000000..e39a10a09 --- /dev/null +++ b/src/uxComponents/listButton/listButton.vue @@ -0,0 +1,28 @@ + + + From ccc0f485b0e771f5cb07edae5438c320555094cb Mon Sep 17 00:00:00 2001 From: Bryan Date: Thu, 28 Oct 2021 17:34:31 -0400 Subject: [PATCH 3/5] Update buttonPrimary, listButton, radioCard. NOTE: disabled button now has dynamic aria-disabled element. --- src/App.vue | 18 --------- src/assets/scss/components/_buttons.scss | 40 +++++++------------ .../buttonPrimary/buttonPrimary.vue | 5 ++- src/uxComponents/listButton/listButton.vue | 2 +- src/uxComponents/radioCard/radioCard.vue | 8 ++-- 5 files changed, 23 insertions(+), 50 deletions(-) diff --git a/src/App.vue b/src/App.vue index 7f44f49fa..640ecadbb 100644 --- a/src/App.vue +++ b/src/App.vue @@ -36,23 +36,6 @@
-
-
-
-
- -
-
-
-
-
@@ -60,7 +43,6 @@
diff --git a/src/assets/scss/components/_buttons.scss b/src/assets/scss/components/_buttons.scss index 2a8e40bf3..d39f71bcc 100644 --- a/src/assets/scss/components/_buttons.scss +++ b/src/assets/scss/components/_buttons.scss @@ -1,7 +1,6 @@ //Custom button styles .btn { - &.btn-primary, - &.btn-primary-focus { + &.btn-primary { position: relative; background: $blue-700; background: linear-gradient(270deg, rgba(21,116,161,1) 0%, rgba(18,91,126,1) 100%); @@ -13,6 +12,12 @@ &:hover { background: linear-gradient(270deg, rgba(6,87,124,1) 0%, rgba(6,87,124,1) 100%); } + &:focus { + outline: none; + box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700; + background-color: #da291c; + border-color: #da291c; + } &.button-loader { padding: 0 40px 0 12px; &:after { @@ -31,30 +36,13 @@ } } } - &.disabled { - background: $gray-100; - background: linear-gradient(270deg, $gray-100 0%, $gray-100 100%); - color: $gray-400; - } - &.btn-primary-focus { - position: relative;//Required for :after pseduo to position correctly - margin: 5px;//Because :after is position absolute and isn't accounted for in DOM - &:before { - content: ""; - position: absolute; - width: calc(100% + 12px); - height: calc(100% + 12px); - border: 3px solid $blue-700; - background-color: $white; - border-radius: 12px; - left: -6px; - top: -6px; - z-index: -1; - } - } - &.btn-funnel { - display: flex; - justify-content: space-between; + &:disabled { + background: $gray-100 !important; + background: linear-gradient(270deg, $gray-100 0%, $gray-100 100%) !important; + color: $gray-400 !important; + height: 48px; + border: none; + border-radius: $border-radius-lg; } &.list-button { position: relative; diff --git a/src/uxComponents/buttonPrimary/buttonPrimary.vue b/src/uxComponents/buttonPrimary/buttonPrimary.vue index 194c1483f..5e0dd1dcf 100644 --- a/src/uxComponents/buttonPrimary/buttonPrimary.vue +++ b/src/uxComponents/buttonPrimary/buttonPrimary.vue @@ -1,6 +1,8 @@