Merge branch 'develop' into feature/dynamic-routing
This commit is contained in:
Frank
commit
e3234d063d
9 changed files with 84 additions and 84 deletions
11
package-lock.json
generated
11
package-lock.json
generated
|
|
@ -2724,7 +2724,6 @@
|
|||
"thread-loader": "^2.1.3",
|
||||
"url-loader": "^2.2.0",
|
||||
"vue-loader": "^15.9.2",
|
||||
"vue-loader-v16": "npm:vue-loader@^16.1.0",
|
||||
"vue-style-loader": "^4.1.2",
|
||||
"webpack": "^4.0.0",
|
||||
"webpack-bundle-analyzer": "^3.8.0",
|
||||
|
|
@ -3026,7 +3025,6 @@
|
|||
"merge-source-map": "^1.1.0",
|
||||
"postcss": "^7.0.36",
|
||||
"postcss-selector-parser": "^6.0.2",
|
||||
"prettier": "^1.18.2",
|
||||
"source-map": "~0.6.1",
|
||||
"vue-template-es2015-compiler": "^1.9.0"
|
||||
},
|
||||
|
|
@ -4985,7 +4983,6 @@
|
|||
"dependencies": {
|
||||
"anymatch": "~3.1.2",
|
||||
"braces": "~3.0.2",
|
||||
"fsevents": "~2.3.2",
|
||||
"glob-parent": "~5.1.2",
|
||||
"is-binary-path": "~2.1.0",
|
||||
"is-glob": "~4.0.1",
|
||||
|
|
@ -7279,8 +7276,7 @@
|
|||
"esprima": "^4.0.1",
|
||||
"estraverse": "^4.2.0",
|
||||
"esutils": "^2.0.2",
|
||||
"optionator": "^0.8.1",
|
||||
"source-map": "~0.6.1"
|
||||
"optionator": "^0.8.1"
|
||||
},
|
||||
"bin": {
|
||||
"escodegen": "bin/escodegen.js",
|
||||
|
|
@ -10827,7 +10823,6 @@
|
|||
"@jest/types": "^24.9.0",
|
||||
"anymatch": "^2.0.0",
|
||||
"fb-watchman": "^2.0.0",
|
||||
"fsevents": "^1.2.7",
|
||||
"graceful-fs": "^4.1.15",
|
||||
"invariant": "^2.2.4",
|
||||
"jest-serializer": "^24.9.0",
|
||||
|
|
@ -17893,8 +17888,7 @@
|
|||
"dependencies": {
|
||||
"chokidar": "^3.4.1",
|
||||
"graceful-fs": "^4.1.2",
|
||||
"neo-async": "^2.5.0",
|
||||
"watchpack-chokidar2": "^2.0.1"
|
||||
"neo-async": "^2.5.0"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"chokidar": "^3.4.1",
|
||||
|
|
@ -18269,7 +18263,6 @@
|
|||
"anymatch": "^2.0.0",
|
||||
"async-each": "^1.0.1",
|
||||
"braces": "^2.3.2",
|
||||
"fsevents": "^1.2.7",
|
||||
"glob-parent": "^3.1.0",
|
||||
"inherits": "^2.0.3",
|
||||
"is-binary-path": "^1.0.0",
|
||||
|
|
|
|||
16
src/App.vue
16
src/App.vue
|
|
@ -28,23 +28,13 @@
|
|||
<div class="col my-3 d-flex align-items-center">
|
||||
<buttonPrimary
|
||||
buttonText="Primary"
|
||||
class="btn-primary"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col my-3 d-flex align-items-center">
|
||||
<buttonPrimary
|
||||
buttonText="Primary Focus"
|
||||
class="btn-primary-focus"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col my-3 d-flex align-items-center">
|
||||
<buttonPrimary
|
||||
buttonText="Disabled"
|
||||
class="disabled"
|
||||
<listButton
|
||||
buttonText="List Button"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -59,11 +49,13 @@
|
|||
<script>
|
||||
import buttonPrimary from "@/uxComponents/buttonPrimary/buttonPrimary";
|
||||
import radioCard from "@/uxComponents/radioCard/radioCard";
|
||||
import listButton from "@/uxComponents/listButton/listButton";
|
||||
export default {
|
||||
name: "App",
|
||||
components: {
|
||||
buttonPrimary,
|
||||
radioCard,
|
||||
listButton
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
3
src/assets/img/icons/button-spinner-green.svg
Normal file
3
src/assets/img/icons/button-spinner-green.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" xml:space="preserve">
|
||||
<path d="M2.1 16C2.1 8.3 8.3 2.1 16 2.1c3.8 0 7.2 1.5 9.7 4l1.4-1.4C24.3 1.9 20.3.1 16 .1 7.2.1.1 7.3.1 16.1l2-.1c0 .1 0 0 0 0z" fill="#73e5b9"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 237 B |
|
Before Width: | Height: | Size: 234 B After Width: | Height: | Size: 234 B |
|
|
@ -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,10 +12,15 @@
|
|||
&:hover {
|
||||
background: linear-gradient(270deg, rgba(6,87,124,1) 0%, rgba(6,87,124,1) 100%);
|
||||
}
|
||||
&:focus, // Mouse, touch, stylus focus
|
||||
&:focus-visible { // Keyboard focus for accessibility
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
|
||||
}
|
||||
&.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;
|
||||
|
|
@ -31,62 +35,38 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
&.disabled {
|
||||
background: $gray-100;
|
||||
background: linear-gradient(270deg, $gray-100 0%, $gray-100 100%);
|
||||
color: $gray-400;
|
||||
&: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;
|
||||
}
|
||||
&.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: "";
|
||||
&.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;
|
||||
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;
|
||||
right: 14px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 12px;
|
||||
animation: rotation 1s infinite linear;
|
||||
@keyframes rotation {
|
||||
100% {
|
||||
transform:rotate(360deg);
|
||||
}
|
||||
}
|
||||
&.btn-funnel {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
// Non-Bootstrap button
|
||||
// Intended to be used without .btn class
|
||||
.btn-damage {
|
||||
width: 100%;
|
||||
background-color: $white;
|
||||
border: 1px solid #b3b4b5;
|
||||
&:focus {
|
||||
background-color: #e7f1f6;
|
||||
border: 1px solid $blue;
|
||||
}
|
||||
&:focus-visible { // For keyboard/screenreader
|
||||
background-color: #e7f1f6;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px $blue;
|
||||
}
|
||||
}
|
||||
|
||||
// Non-Bootstrap button
|
||||
// Intended to be used without .btn class
|
||||
.btn-damage {
|
||||
width: 100%;
|
||||
background-color: $white;
|
||||
border: 1px solid #b3b4b5;
|
||||
&:focus {
|
||||
background-color: #e7f1f6;
|
||||
border: 1px solid $blue;
|
||||
}
|
||||
&:focus-visible { // For keyboard/screenreader
|
||||
background-color: #e7f1f6;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px $blue;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,8 @@
|
|||
<template>
|
||||
<button
|
||||
class="btn d-flex align-items-center"
|
||||
:disabled="isDisabled"
|
||||
:aria-disabled="isDisabled"
|
||||
class="btn btn-primary d-flex align-items-center"
|
||||
v-on:click="showLoader()"
|
||||
v-bind:class="[this.isLoading ? 'button-loader' : 'not-loading']"
|
||||
>
|
||||
|
|
@ -17,6 +19,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
isDisabled: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
|
|
|||
1
src/uxComponents/listButton/listButton.spec.js
Normal file
1
src/uxComponents/listButton/listButton.spec.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
test.todo('some test to be written in the future');
|
||||
28
src/uxComponents/listButton/listButton.vue
Normal file
28
src/uxComponents/listButton/listButton.vue
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<template>
|
||||
<button
|
||||
class="btn list-button d-flex align-items-center"
|
||||
v-on:click="showLoader()"
|
||||
v-bind:class="[this.isLoading ? 'button-loader' : 'not-loading']"
|
||||
>
|
||||
{{ this.buttonText }}
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "listButton",
|
||||
props: {
|
||||
buttonText: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
showLoader() {
|
||||
this.isLoading = true;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -3,12 +3,12 @@
|
|||
<input
|
||||
type="radio"
|
||||
class="position-absolute opacity-0"
|
||||
v-bind:class="className"
|
||||
v-bind:id="radioID"
|
||||
v-bind:name="groupName"
|
||||
:class="className"
|
||||
:id="radioID"
|
||||
:name="groupName"
|
||||
:value="radioLabel"
|
||||
v-model="picked"
|
||||
v-bind:tabindex="tabIndex"
|
||||
:tabindex="tabIndex"
|
||||
/>
|
||||
<label
|
||||
v-bind:for="radioID"
|
||||
|
|
|
|||
Loading…
Reference in a new issue