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

Renam radio components, css naming.

Browse source
This commit is contained in:
bmauger 2021-12-14 08:49:46 -05:00
parent db33f31648
commit e7e0f234d4
10 changed files with 27 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,25 +2,25 @@
<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">Radio Card</h4>
<h4 class="m-0 p-2 bg-light rounded">List Card</h4>
</div>
</div>
<div class="row g-2">
<radioCard
<listCard
radioLabel="Windshield"
radioImage="windshield-damage.svg"
altText="Windshield"
groupName="damageKey"
radioID="windshield"
/>
<radioCard
<listCard
radioLabel="Side Window"
radioImage="side-window-damage.svg"
altText="Side Window"
groupName="damageKey"
radioID="sidewindow"
/>
<radioCard
<listCard
radioLabel="Back Glass"
radioImage="back-glass-damage.svg"
altText="Back Glass"
@ -57,7 +57,7 @@
</div>
<div class="row my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">Radio - Single-Line</h4>
<h4 class="m-0 p-2 bg-light rounded">List Button - Single-Line</h4>
</div>
</div>
<div class="row">
@ -108,7 +108,7 @@
</div>
<div class="row my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">Radio - Multi-Line</h4>
<h4 class="m-0 p-2 bg-light rounded">List Button - Multi-Line</h4>
</div>
</div>
<div class="row">
@ -159,7 +159,7 @@
</div>
<div class="row my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">Radio - Multi-Line Centered</h4>
<h4 class="m-0 p-2 bg-light rounded">List Button - Multi-Line Centered</h4>
</div>
</div>
<div class="row">
@ -210,7 +210,7 @@
</div>
<div class="row my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">Radio Horizontal</h4>
<h4 class="m-0 p-2 bg-light rounded">List Button Horizontal</h4>
</div>
</div>
<div class="row px-3">
@ -224,7 +224,7 @@
<h3 class="sr-only" id="demo-4-radio-group">
Select Vehicle Year
</h3>
<radioHorizontal
<listButtonHorizontal
groupName="demo-4"
ariaLabelBy="vehicle-model"
radioID="1"
@ -237,7 +237,7 @@
v-bind:positionInGroup="1"
screenReaderOnlyText="(opens new window)"
/>
<radioHorizontal
<listButtonHorizontal
groupName="demo-4"
ariaLabelBy="vehicle-model"
radioID="2"
@ -250,7 +250,7 @@
v-bind:positionInGroup="2"
screenReaderOnlyText="(opens new window)"
/>
<radioHorizontal
<listButtonHorizontal
groupName="demo-4"
ariaLabelBy="vehicle-model"
radioID="3"
@ -422,23 +422,23 @@
import buttonPrimary from "@/ux-components/button-primary/button-primary";
import buttonSecondary from "@/ux-components/button-secondary/button-secondary";
import buttonBack from "@/ux-components/button-back/button-back";
import radioCard from "@/ux-components/radio-card/radio-card";
import listCard from "@/ux-components/list-card/list-card";
import listButton from "@/ux-components/list-button/list-button";
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 radioHorizontal from "@/ux-components/radio-horizontal/radio-horizontal";
import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
export default {
name: "App",
components: {
buttonPrimary,
buttonSecondary,
buttonBack,
radioCard,
listCard,
listButton,
alert,
vehicleBanner,
radioHorizontal,
listButtonHorizontal,
siteHeader,
},
data() {

4
src/styles/common-radio-styles.scss → src/styles/common-list-styles.scss
View file

@ -1,5 +1,5 @@
.radiogroup {
&.radio-list-button {
.list-group {
&.list-button {
input[type="radio"] {
opacity: 0;
position: fixed;

0
src/ux-components/radio-horizontal/radio-horizontal.spec.js → src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
View file

6
src/ux-components/radio-horizontal/radio-horizontal.vue → 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 radio buttons on desktop, 3 on mobile. -->
<div class="col radiogroup radio-horizontal d-flex flex-column mb-2">
<div class="col list-group list-button-horizontal d-flex flex-column mb-2">
<input type="radio" :id="radioID" :name="groupName" :value="radioID" aria-required="true" @keyup.space="displayComponent"/>
<label role="radio" tabindex="-1" aria-checked="false" :for="radioID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton" @click='displayComponent'>
<span class="m-0" :class="[this.textPosition]">{{radioID}}</span>
@ -16,7 +16,7 @@
<script>
import loader from "@/ux-components/loader/loader";
export default {
name: "radioHorizontal",
name: "listButtonHorizontal",
props: {
groupName: String, /* Required, unique for each radio button GROUP */
radioID: String, /* Required, unique for each radio button. Used for button id, label and <label for> */
@ -58,7 +58,7 @@ export default {
};
</script>
<style lang="scss">
.radio-horizontal {
.list-button-horizontal {
input[type="radio"] {
opacity: 0;
position: fixed;

2
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 class="radiogroup radio-list-button d-flex flex-column w-100 mb-2">
<div class="list-group list-button d-flex flex-column w-100 mb-2">
<input type="radio" :id="radioID" :name="groupName" :value="radioID" :aria-required="isRequired" @keyup.space="displayComponent()">
<label role="radio" tabindex="-1" aria-checked="false" :for="radioID" class="d-flex flex-column justify-content-center py-3 px-4" @click='displayComponent()'>
<span class="m-0" :class="[this.textPosition]">{{radioID}}</span>

0
src/ux-components/radio-card/radio-card.spec.js → src/ux-components/list-card/list-card.spec.js
View file

6
src/ux-components/radio-card/radio-card.vue → src/ux-components/list-card/list-card.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="col mb-3 d-flex radio-card">
<div class="col mb-3 d-flex list-card">
<input
type="radio"
class="position-absolute opacity-0"
@ -28,7 +28,7 @@
<script>
export default {
name: "radioCard",
name: "listCard",
props: [
"groupName",
"radioLabel",
@ -46,7 +46,7 @@ export default {
};
</script>
<style lang="scss">
.radio-card {
.list-card {
input[type="radio"] {
&:focus + label {
background-color: $white;

1
src/ux-components/loader/loader.vue
View file

@ -62,6 +62,7 @@ export default {
&.center {
position: absolute;
right: 50%;
transform: translateX(50%);
}
&.right {
position: absolute;

2
vue.config.js
View file

@ -17,7 +17,7 @@ module.exports = {
@import "./node_modules/bootstrap/scss/bootstrap";
@import "@/styles/common-styles.scss";
@import "@/styles/common-button-styles.scss";
@import "@/styles/common-radio-styles.scss";
@import "@/styles/common-list-styles.scss";
@import "@/styles/common-typography-styles.scss";
`,
},

2
vue.release.config.js
View file

@ -16,7 +16,7 @@ module.exports = {
@import "./node_modules/bootstrap/scss/bootstrap";
@import "@/styles/common-styles.scss";
@import "@/styles/common-button-styles.scss";
@import "@/styles/common-radio-styles.scss";
@import "@/styles/common-list-styles.scss";
@import "@/styles/common-typography-styles.scss";
`,
},