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

CSR-241 add component variations to test page.

Browse source
This commit is contained in:
bmauger 2021-12-23 13:40:07 -05:00
parent c98e4843ff
commit 6d579ee907
2 changed files with 81 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -67,6 +67,23 @@
</fieldset>
</div>
</div>
<div class="row g-2">
<div class="col">
<h6 class="mx-2 my-4">Checkbox No Description</h6>
<fieldset>
<legend class="sr-only">Checkbox no Description</legend>
<listCard
isMultiSelect
buttonImage="windshield-damage.svg"
buttonLabel="Windshield"
altText=""
buttonID="List Card Checkbox b"
groupID="checkbox-demo-1a"
buttonLabelSubCopy=""
/>
</fieldset>
</div>
</div>
<div class="row g-2">
<div class="col">
<h6 class="mx-2 my-4">Functioning as Radio Button</h6>
@ -84,6 +101,23 @@
</fieldset>
</div>
</div>
<div class="row g-2">
<div class="col">
<h6 class="mx-2 my-4">Radio Button no Description</h6>
<fieldset>
<legend class="sr-only">Radio Button no Description</legend>
<listCard
isRadio
buttonImage="windshield-damage.svg"
buttonLabel="Windshield"
altText=""
buttonID="List Card Radio Button b"
groupID="radio-demo-2b"
buttonLabelSubCopy=""
/>
</fieldset>
</div>
</div>
<div class="row g-2">
<div class="col">
<h6 class="mx-2 my-4">Horizontal as Checkbox</h6>
@ -101,6 +135,23 @@
</fieldset>
</div>
</div>
<div class="row g-2">
<div class="col">
<h6 class="mx-2 my-4">Checkbox no Description</h6>
<fieldset>
<legend class="sr-only">Checkbox no Description</legend>
<listCard
isMultiSelectHorizontal
buttonImage="windshield-damage.svg"
buttonLabel="Windshield"
altText=""
buttonID="List Card Horizontal Checkbox b"
groupID="checkbox-demo-3b"
buttonLabelSubCopy=""
/>
</fieldset>
</div>
</div>
<div class="row g-2">
<div class="col">
<h6 class="mx-2 my-4">Horizontal as Radio Button</h6>
@ -118,6 +169,23 @@
</fieldset>
</div>
</div>
<div class="row g-2">
<div class="col">
<h6 class="mx-2 my-4">Radio Button no Description</h6>
<fieldset>
<legend class="sr-only">Radio Button no Description</legend>
<listCard
isRadioHorizontal
buttonImage="windshield-damage.svg"
buttonLabel="Windshield"
altText=""
buttonID="List Card Horizontal Radio Button b"
groupID="radio-demo-4b"
buttonLabelSubCopy=""
/>
</fieldset>
</div>
</div>
<div class="row g-2">
<div class="col">
<h6 class="mx-2 my-4">With error</h6>

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

@ -1,4 +1,5 @@
<template>
<!-- Heavily documented below -->
<div v-if="isMultiSelect" class="list-card w-100 rounded-3 d-flex align-items-center" :class="{'error': hasError}">
<input type="checkbox" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
<label :for="buttonID" class="d-flex flex-column w-100 align-items-center pt-4 pb-2" tabindex="1">
@ -41,17 +42,19 @@
export default {
name: "listCard",
props: {
buttonImage: String,
buttonLabel: String,
//Must choose one of the following four options
isMultiSelect: Boolean,//Defines use as checkbox
isRadio: Boolean,//Defines use as radio button
isMultiSelectHorizontal: Boolean,//Defines use as horizontal checkbox
isRadioHorizontal: Boolean,//Defines use as horizontal radio button
//end must choose
buttonImage: String,//Optional: File name of image
buttonLabel: String,//Required: Label text
altText: String,//Leave empty. Screen readers read the buttonLabel text. If alt has content, it will repeat unnecessarily.
buttonID: String,
groupName: String,
isMultiSelect: Boolean,
isRadio: Boolean,
isMultiSelectHorizontal: Boolean,
isRadioHorizontal: Boolean,
buttonLabelSubCopy: String,
hasError: Boolean
buttonID: String,//Required: Unique
groupName: String,//Rquired: Unique
buttonLabelSubCopy: String,//Optional: sub text
hasError: Boolean//Used to show error state
}
};
</script>