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

Component-test page cleanup.

Browse source
This commit is contained in:
bmauger 2022-02-16 17:04:39 -05:00
parent e037550ec9
commit ecae48e730
1 changed files with 995 additions and 981 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -13,7 +13,8 @@
tabIndex="1" tabIndex="1"
checkboxLabel="I'm a checkbox" checkboxLabel="I'm a checkbox"
/> />
<p class="my-3">With Error:</p> <p class="mt-3 mb-0">With Error:</p>
<small>(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
<checkbox <checkbox
checkboxName="demo checkbox" checkboxName="demo checkbox"
buttonID="checkbox-2" buttonID="checkbox-2"
@ -50,7 +51,8 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<p class="my-3">With Error:</p> <p class="mt-3 mb-0">With Error:</p>
<small>(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
<radio <radio
groupName="radio-demo-3" groupName="radio-demo-3"
buttonLabel="Error!" buttonLabel="Error!"
@ -146,7 +148,7 @@
<div class="row my-4"> <div class="row my-4">
<div class="col"> <div class="col">
<h4 class="m-0 p-2 bg-light rounded">List Card</h4> <h4 class="m-0 p-2 bg-light rounded">List Card</h4>
<h6 class="mx-2 my-0">Functioning as Checkbox</h6> <h6 class="mx-0 px-0 my-0">Functioning as Checkbox</h6>
</div> </div>
</div> </div>
<div class="row g-2"> <div class="row g-2">
@ -167,7 +169,7 @@
</div> </div>
<div class="row g-2"> <div class="row g-2">
<div class="col"> <div class="col">
<h6 class="mx-2 my-4">Checkbox No Description</h6> <h6 class="mx-0 px-0 my-4">Checkbox No Description</h6>
<fieldset> <fieldset>
<legend class="sr-only">Checkbox no Description</legend> <legend class="sr-only">Checkbox no Description</legend>
<listCard <listCard
@ -184,7 +186,8 @@
</div> </div>
<div class="row g-2"> <div class="row g-2">
<div class="col"> <div class="col">
<h6 class="mx-2 my-4">Checkbox with Error</h6> <h6 class="mx-0 px-0 mt-4 mb-0">Checkbox with Error</h6>
<small>(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
<fieldset> <fieldset>
<legend class="sr-only">Checkbox with Error</legend> <legend class="sr-only">Checkbox with Error</legend>
<listCard <listCard
@ -202,7 +205,7 @@
</div> </div>
<div class="row g-2"> <div class="row g-2">
<div class="col"> <div class="col">
<h6 class="mx-2 my-4">Functioning as Radio Button</h6> <h6 class="mx-0 px-0 my-4">Functioning as Radio Button</h6>
<fieldset> <fieldset>
<legend class="sr-only">Functioning as Radio Button</legend> <legend class="sr-only">Functioning as Radio Button</legend>
<listCard <listCard
@ -219,7 +222,7 @@
</div> </div>
<div class="row g-2"> <div class="row g-2">
<div class="col"> <div class="col">
<h6 class="mx-2 my-4">Radio Button no Description</h6> <h6 class="mx-0 px-0 my-4">Radio Button no Description</h6>
<fieldset> <fieldset>
<legend class="sr-only">Radio Button no Description</legend> <legend class="sr-only">Radio Button no Description</legend>
<listCard <listCard
@ -236,7 +239,8 @@
</div> </div>
<div class="row g-2"> <div class="row g-2">
<div class="col"> <div class="col">
<h6 class="mx-2 my-4">Radio Button with Error</h6> <h6 class="mx-0 px-0 mt-4 mb-0">Radio Button with Error</h6>
<small>(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
<fieldset> <fieldset>
<legend class="sr-only">Radio Button with Error</legend> <legend class="sr-only">Radio Button with Error</legend>
<listCard <listCard
@ -254,7 +258,7 @@
</div> </div>
<div class="row g-2"> <div class="row g-2">
<div class="col"> <div class="col">
<h6 class="mx-2 my-4">Horizontal as Checkbox</h6> <h6 class="mx-0 px-0 my-4">Horizontal as Checkbox</h6>
<fieldset> <fieldset>
<legend class="sr-only">Horizontal Checkbox</legend> <legend class="sr-only">Horizontal Checkbox</legend>
<listCard <listCard
@ -272,7 +276,7 @@
</div> </div>
<div class="row g-2"> <div class="row g-2">
<div class="col"> <div class="col">
<h6 class="mx-2 my-4">Checkbox no Description</h6> <h6 class="mx-0 px-0 my-4">Checkbox no Description</h6>
<fieldset> <fieldset>
<legend class="sr-only">Checkbox no Description</legend> <legend class="sr-only">Checkbox no Description</legend>
<listCard <listCard
@ -290,7 +294,8 @@
</div> </div>
<div class="row g-2"> <div class="row g-2">
<div class="col"> <div class="col">
<h6 class="mx-2 my-4">Horizontal with Error</h6> <h6 class="mx-0 px-0 mt-4 mb-0">Horizontal with Error</h6>
<small>(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
<fieldset> <fieldset>
<legend class="sr-only">Horizontal with Error</legend> <legend class="sr-only">Horizontal with Error</legend>
<listCard <listCard
@ -309,7 +314,7 @@
</div> </div>
<div class="row g-2"> <div class="row g-2">
<div class="col"> <div class="col">
<h6 class="mx-2 my-4">Horizontal as Radio Button</h6> <h6 class="mx-0 px-0 my-4">Horizontal as Radio Button</h6>
<fieldset> <fieldset>
<legend class="sr-only">Horizontal Radio Button</legend> <legend class="sr-only">Horizontal Radio Button</legend>
<listCard <listCard
@ -326,7 +331,7 @@
</div> </div>
<div class="row g-2"> <div class="row g-2">
<div class="col"> <div class="col">
<h6 class="mx-2 my-4">Radio Button no Description</h6> <h6 class="mx-0 px-0 my-4">Radio Button no Description</h6>
<fieldset> <fieldset>
<legend class="sr-only">Radio Button no Description</legend> <legend class="sr-only">Radio Button no Description</legend>
<listCard <listCard
@ -343,7 +348,8 @@
</div> </div>
<div class="row g-2"> <div class="row g-2">
<div class="col"> <div class="col">
<h6 class="mx-2 my-4">Horizontal with Error</h6> <h6 class="mx-0 px-0 mt-4 mb-0">Horizontal with Error</h6>
<small>(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
<fieldset> <fieldset>
<legend class="sr-only">Horizontal with Error</legend> <legend class="sr-only">Horizontal with Error</legend>
<listCard <listCard
@ -362,7 +368,7 @@
<div class="row my-4"> <div class="row my-4">
<div class="col"> <div class="col">
<h4 class="m-0 p-2 bg-light rounded">List Button - Single-Line</h4> <h4 class="m-0 p-2 bg-light rounded">List Button - Single-Line</h4>
<h6 class="mx-2 my-0">Functioning as Checkboxes</h6> <h6 class="mx-0 px-0 my-0">Functioning as Checkboxes</h6>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
@ -413,7 +419,8 @@
sizeInRem="1" sizeInRem="1"
screenReaderOnlyText=" opens new window" screenReaderOnlyText=" opens new window"
/> />
<h6 class="mx-2 my-4 d-flex align-self-start">Checkbox with Error</h6> <h6 class="mx-0 px-0 mt-4 mb-0 d-flex align-self-start">Checkbox with Error</h6>
<small class="d-flex align-self-start">(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
<listButton <listButton
isMultiSelect isMultiSelect
groupName="demo-2" groupName="demo-2"
@ -437,7 +444,7 @@
aria-labelledby="demo-1-checkbox-group" aria-labelledby="demo-1-checkbox-group"
class="col my-3 d-flex flex-column" class="col my-3 d-flex flex-column"
> >
<h6 class="mx-2 my-0">Functioning as Radio Buttons</h6> <h6 class="mx-0 px-0 my-0">Functioning as Radio Buttons</h6>
<!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. --> <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
<h3 class="sr-only" id="demo-1-checkbox-group">Select Vehicle Year</h3> <h3 class="sr-only" id="demo-1-checkbox-group">Select Vehicle Year</h3>
<listButton <listButton
@ -476,7 +483,8 @@
sizeInRem="1" sizeInRem="1"
screenReaderOnlyText=" opens new window" screenReaderOnlyText=" opens new window"
/> />
<h6 class="mx-2 my-4">Radio Button with Error</h6> <h6 class="mx-0 px-0 mt-4 mb-0">Radio Button with Error</h6>
<small>(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
<listButton <listButton
groupName="demo-1-checkbox" groupName="demo-1-checkbox"
ariaLabelBy="vehicle-year" ariaLabelBy="vehicle-year"
@ -495,7 +503,7 @@
<div class="row my-4"> <div class="row my-4">
<div class="col"> <div class="col">
<h4 class="m-0 p-2 bg-light rounded">List Button - Multi-Line</h4> <h4 class="m-0 p-2 bg-light rounded">List Button - Multi-Line</h4>
<h6 class="mx-2 my-0">Functioning as Checkboxes</h6> <h6 class="mx-0 px-0 my-0">Functioning as Checkboxes</h6>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
@ -549,8 +557,9 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col">
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group --> <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
<h6 class="mx-2 my-0">Functioning as Radio Buttons</h6> <h6 class="mx-0 px-0 my-0">Functioning as Radio Buttons</h6>
<div <div
role="radiogroup" role="radiogroup"
aria-labelledby="demo-2-checkbox-group" aria-labelledby="demo-2-checkbox-group"
@ -596,12 +605,13 @@
/> />
</div> </div>
</div> </div>
</div>
<div class="row my-4"> <div class="row my-4">
<div class="col"> <div class="col">
<h4 class="m-0 p-2 bg-light rounded"> <h4 class="m-0 p-2 bg-light rounded">
List Button - Multi-Line Centered List Button - Multi-Line Centered
</h4> </h4>
<h6 class="mx-2 my-0">Functioning as Checkboxes</h6> <h6 class="mx-0 px-0 my-0">Functioning as Checkboxes</h6>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
@ -655,8 +665,9 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col">
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group --> <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
<h6 class="mx-2 my-0">Functioning as Radio Buttons</h6> <h6 class="mx-0 my-0 p-0">Functioning as Radio Buttons</h6>
<div <div
role="radiogroup" role="radiogroup"
aria-labelledby="demo-3-checkbox-group" aria-labelledby="demo-3-checkbox-group"
@ -702,10 +713,11 @@
/> />
</div> </div>
</div> </div>
</div>
<div class="row my-4"> <div class="row my-4">
<div class="col"> <div class="col">
<h4 class="m-0 p-2 bg-light rounded">List Button Horizontal</h4> <h4 class="m-0 p-2 bg-light rounded">List Button Horizontal</h4>
<h6 class="mx-2 my-0">Functioning as Checkboxes</h6> <h6 class="mx-0 px-0 my-0">Functioning as Checkboxes</h6>
</div> </div>
</div> </div>
<div class="row px-3"> <div class="row px-3">
@ -762,7 +774,8 @@
</div> </div>
</div> </div>
<div class="row px-3"> <div class="row px-3">
<h6 class="mx-2 my-4 d-flex align-self-start">Checkbox with Error</h6> <h6 class="mx-0 px-0 mt-4 mb-0 d-flex align-self-start">Checkbox with Error</h6>
<small class="p-0">(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group --> <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
<div <div
role="radiogroup" role="radiogroup"
@ -820,7 +833,7 @@
</div> </div>
<div class="row px-3"> <div class="row px-3">
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group --> <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
<h6 class="mx-2 my-0">Functioning as Radio Buttons</h6> <h6 class="mx-0 my-0 p-0">Functioning as Radio Buttons</h6>
<div <div
role="radiogroup" role="radiogroup"
aria-labelledby="demo-4-checkbox-group" aria-labelledby="demo-4-checkbox-group"
@ -873,7 +886,8 @@
</div> </div>
</div> </div>
<div class="row px-3"> <div class="row px-3">
<h6 class="mx-2 my-4 d-flex align-self-start">Radio Button with Error</h6> <h6 class="mx-0 mt-4 mb-0 p-0 d-flex align-self-start">Radio Button with Error</h6>
<small class="m-0 p-0">(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group --> <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
<div <div
role="radiogroup" role="radiogroup"