jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CSR-241 WIP Checkbox component.

Browse source
This commit is contained in:
bmauger 2021-12-16 17:17:50 -05:00
parent 9db1fe98df
commit b5f17a41c8
6 changed files with 215 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
src/layouts/component-test/component-test.vue
View file

@ -2,31 +2,13 @@
<div class="container-fluid container-shadow p-2 rounded-3">
<div class="row my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">List Card</h4>
<h4 class="m-0 p-2 bg-light rounded">Inputs</h4>
</div>
</div>
<div class="row g-2">
<listCard
buttonLabel="Windshield"
buttonImage="windshield-damage.svg"
altText="Windshield"
groupName="damageKey"
buttonID="windshield"
/>
<listCard
buttonLabel="Side Window"
buttonImage="side-window-damage.svg"
altText="Side Window"
groupName="damageKey"
buttonID="sidewindow"
/>
<listCard
buttonLabel="Back Glass"
buttonImage="back-glass-damage.svg"
altText="Back Glass"
groupName="damageKey"
buttonID="backglass"
/>
<div class="row">
<div class="col">
<checkbox/>
</div>
</div>
<div class="row my-4">
<div class="col">
@ -55,6 +37,37 @@
<buttonBack/>
</div>
</div>
<div class="row my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">List Card</h4>
</div>
</div>
<div class="row g-2">
<listCard
isMultiSelect
buttonLabel="Windshield"
buttonImage="windshield-damage.svg"
altText="Windshield"
groupName="damageKey"
buttonID="windshield"
/>
<listCard
isMultiSelect
buttonLabel="Side Window"
buttonImage="side-window-damage.svg"
altText="Side Window"
groupName="damageKey"
buttonID="sidewindow"
/>
<listCard
isMultiSelect
buttonLabel="Back Glass"
buttonImage="back-glass-damage.svg"
altText="Back Glass"
groupName="damageKey"
buttonID="backglass"
/>
</div>
<div class="row my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">List Button - Single-Line</h4>
@ -69,7 +82,7 @@
Select Vehicle Year
</h3>
<listButton
isCheckbox
isMultiSelect
groupName="demo-1"
ariaLabelBy="vehicle-year"
buttonID="2021"
@ -81,7 +94,7 @@
screenReaderOnlyText="(opens new window)"
/>
<listButton
isCheckbox
isMultiSelect
groupName="demo-1"
ariaLabelBy="vehicle-year"
buttonID="2020"
@ -93,7 +106,7 @@
screenReaderOnlyText="(opens new window)"
/>
<listButton
isCheckbox
isMultiSelect
groupName="demo-1"
ariaLabelBy="vehicle-year"
buttonID="2019"
@ -159,7 +172,7 @@
<!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
<h3 class="sr-only" id="demo-2-radio-group">Select Vehicle Year</h3>
<listButton
isCheckbox
isMultiSelect
groupName="demo-2"
ariaLabelBy="vehicle-make"
buttonID="Chevrolet"
@ -171,7 +184,7 @@
screenReaderOnlyText="(opens new window)"
/>
<listButton
isCheckbox
isMultiSelect
groupName="demo-2"
ariaLabelBy="vehicle-make"
buttonID="Dodge"
@ -183,7 +196,7 @@
screenReaderOnlyText="(opens new window)"
/>
<listButton
isCheckbox
isMultiSelect
groupName="demo-2"
ariaLabelBy="vehicle-make"
buttonID="Ford"
@ -249,7 +262,7 @@
<!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
<h3 class="sr-only" id="demo-3-radio-group">Multi-Line Centered</h3>
<listButton
isCheckbox
isMultiSelect
groupName="demo-3"
ariaLabelBy="vehicle-model"
buttonID="Corvette"
@ -261,7 +274,7 @@
screenReaderOnlyText="(opens new window)"
/>
<listButton
isCheckbox
isMultiSelect
groupName="demo-3"
ariaLabelBy="vehicle-model"
buttonID="Testarosa"
@ -273,7 +286,7 @@
screenReaderOnlyText="(opens new window)"
/>
<listButton
isCheckbox
isMultiSelect
groupName="demo-3"
ariaLabelBy="vehicle-model"
buttonID="S600"
@ -341,7 +354,7 @@
Select Vehicle Year
</h3>
<listButtonHorizontal
isCheckbox
isMultiSelect
groupName="demo-4"
ariaLabelBy="vehicle-model"
buttonID="1"
@ -355,7 +368,7 @@
screenReaderOnlyText="(opens new window)"
/>
<listButtonHorizontal
isCheckbox
isMultiSelect
groupName="demo-4"
ariaLabelBy="vehicle-model"
buttonID="2"
@ -369,7 +382,7 @@
screenReaderOnlyText="(opens new window)"
/>
<listButtonHorizontal
isCheckbox
isMultiSelect
groupName="demo-4"
ariaLabelBy="vehicle-model"
buttonID="3"
@ -596,6 +609,7 @@ import alert from "@/ux-components/alert/alert";
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
import siteHeader from "@/common-components/site-header/site-header";
import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
import checkbox from "@/ux-components/checkbox/checkbox";
export default {
name: "App",
components: {
@ -608,6 +622,7 @@ export default {
vehicleBanner,
listButtonHorizontal,
siteHeader,
checkbox
},
data() {
return {

1
src/ux-components/checkbox/checkbox.spec.js Normal file
View file

@ -0,0 +1 @@
test.todo("some test to be written in the future");

79
src/ux-components/checkbox/checkbox.vue Normal file
View file

@ -0,0 +1,79 @@
<template>
<div class="ui-checkbox d-flex">
<input type="checkbox" name="Checkbox" id="check_1" tabindex="0" />
<label class="d-flex align-items-center" for="check_1">
<p class="m-0 lh-1">Checkbox</p>
</label>
</div>
</template>
<script>
export default {
name: "checkbox"
};
</script>
<style lang="scss">
.ui-checkbox {
position: relative;
input[type='checkbox'] {
position: absolute;
}
input[type='checkbox'] + label {
display: block;
position: relative;
}
input[type='checkbox'] + label::before {
content: '';
position: relative;
display: inline-block;
margin-right: 10px;
width: 16px;
height: 16px;
background: white;
border: 1px solid $gray-500;
border-radius: 2px;
}
input[type='checkbox']:checked + label::before {
background: $blue;
}
input[type='checkbox']:checked + label::after {
content: '';
position: absolute;
top: 4px;
left: 2px;
border-left: 2px solid $white;
border-bottom: 2px solid $white;
height: 6px;
width: 12px;
transform: rotate(-45deg);
}
input[type='checkbox']:hover + label::before {
//outline: #5d9dd5 solid 1px;
box-shadow: 0 0 0 4px $blue-100;
}
input[type='checkbox']:focus + label::before {
//outline: #5d9dd5 solid 1px;
box-shadow: 0 0 0 2px $blue;
}
input[type='checkbox']:focus:checked + label::before {
box-shadow: 0 0 0 2px transparent;
}
input[type='checkbox'] {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
input[type='checkbox']:disabled + label {
color: #575757;
}
input[type='checkbox']:disabled + label::before {
background: #ddd;
}
}
</style>

4
src/ux-components/list-button-horizontal/list-button-horizontal.vue
View file

@ -1,7 +1,7 @@
<!-- See the component-test.vue page for example implementation -->
<template>
<!-- IMPORTANT: Refrain from using more than 4 horizontal buttons on desktop, 3 on mobile. -->
<div v-if="isCheckbox" class="list-group list-button-horizontal d-flex flex-column w-100 mb-2">
<div v-if="isMultiSelect" class="list-group list-button-horizontal d-flex flex-column w-100 mb-2">
<input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
<label tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton">
<span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
@ -27,7 +27,7 @@ import loader from "@/ux-components/loader/loader";
export default {
name: "listButtonHorizontal",
props: {
isCheckbox: Boolean,
isMultiSelect: Boolean,
groupName: String, /* Required, unique for each button GROUP */
buttonID: String, /* Required, unique for each button. Used for button id, label and <label for> */
buttonLabelSubCopy: String, /* Optional, used for multi-line buttons */

4
src/ux-components/list-button/list-button.vue
View file

@ -1,6 +1,6 @@
<template>
<!-- See the component-test.vue page for example implementation -->
<div v-if="isCheckbox" class="list-group list-button d-flex flex-column w-100 mb-2">
<div v-if="isMultiSelect" class="list-group list-button d-flex flex-column w-100 mb-2">
<input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
<label tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
<span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
@ -26,7 +26,7 @@ import loader from "@/ux-components/loader/loader";
export default {
name: "listButton",
props: {
isCheckbox: Boolean,
isMultiSelect: Boolean,
groupName: String, /* Required, unique for each button GROUP */
buttonID: String, /* Required, unique for each button. Used for button id, label and <label for> */
isRequired: Boolean, /* Optional, default is false */

110
src/ux-components/list-card/list-card.vue
View file

@ -1,24 +1,16 @@
<template>
<div class="col mb-3 d-flex list-card">
<input
type="radio"
class="position-absolute opacity-0"
:class="className"
:id="buttonID"
:name="groupName"
:value="buttonLabel"
v-model="picked"
:tabindex="tabIndex"
/>
<label
v-bind:for="buttonID"
class="rounded-3 d-flex flex-column align-items-center w-100"
>
<img
class="px-3 pt-3 pb-2 mt-auto"
v-bind:src="require(`@/assets/img/icons/${buttonImage}`)"
v-bind:alt="altText"
/>
<div v-if="isMultiSelect" class="col mb-3 d-flex list-card">
<label v-bind:for="buttonID" class="rounded-3 d-flex flex-column align-items-center w-100 checkbox">
<img class="mx-3 mt-3 mb-2 mt-auto" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
<input type="checkbox" class="mb-3" :class="className" :id="buttonID" :name="groupName" :value="buttonLabel" v-model="picked" :tabindex="tabIndex" />
<span class="checkmark"></span>
<span class="mt-auto mb-2 text-center lh-1">{{ buttonLabel }}</span>
</label>
</div>
<div v-else class="col mb-3 d-flex list-card">
<input type="radio" class="position-absolute opacity-0" :class="className" :id="buttonID" :name="groupName" :value="buttonLabel" v-model="picked" :tabindex="tabIndex" />
<label v-bind:for="buttonID" class="rounded-3 d-flex flex-column align-items-center w-100">
<img class="px-3 pt-3 pb-2 mt-auto" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
<span class="mt-auto mb-2 text-center lh-1">{{ buttonLabel }}</span>
</label>
</div>
@ -29,15 +21,16 @@
<script>
export default {
name: "listCard",
props: [
"groupName",
"buttonLabel",
"buttonImage",
"altText",
"buttonID",
"tabIndex",
"className",
],
props: {
isMultiSelect: Boolean,
groupName: String,
buttonLabel: String,
buttonImage: String,
altText: String,
buttonID: String,
tabIndex: String,
className: String,
},
data() {
return {
picked: "picked",
@ -47,6 +40,9 @@ export default {
</script>
<style lang="scss">
.list-card {
img {
width: 46px;
}
input[type="radio"] {
&:focus + label {
background-color: $white;
@ -73,5 +69,61 @@ export default {
box-shadow: 0px 0px 0px 6px $blue-100;
}
}
/* Hide the browser's default checkbox */
input[type="checkbox"] {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: relative;
top: 0;
left: 0;
height: 16px;
width: 16px;
background-color: $white;
border: 1px solid $gray-500;
border-radius: 2px;
}
/* On mouse-over, add a grey background color */
// .checkbox:hover input ~ .checkmark {
// background-color: $white;
// border: 1px solid $gray-300;
// box-shadow: 0px 0px 0px 4px $blue-200;
// }
/* When the checkbox is checked, add a blue background */
.checkbox input:checked ~ .checkmark {
background-color: $blue;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.checkbox input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.checkbox .checkmark:after {
left: 5px;
top: 1px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
}
</style>