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

WIP CSR-257

Browse source
This commit is contained in:
bmauger 2022-01-28 16:24:41 -05:00
parent cb5d11344b
commit 707fde7b91
6 changed files with 182 additions and 116 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/common-components/funnel-footer/funnel-footer.spec.js Normal file
View file

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

40
src/common-components/funnel-footer/funnel-footer.vue Normal file
View file

@ -0,0 +1,40 @@
<template>
<div class="container-fluid g-2 mb-6">
<div class="row">
<div class="col-12">
<h4>this should scroll</h4>
</div>
</div>
<div class="container-fluid fixed-bottom g-4 bg-light py-4">
<div class="row">
<div class="col">
<buttonMain
isPrimary
buttonText="Review Appointment Details"
loaderColor="white"
sizeInRem="1"
isFloat
/>
<textLink
navigation=true
text="back"
/>
</div>
</div>
</div>
</div>
</template>
<script>
import textLink from "@/ux-components/text-link/text-link";
import buttonMain from "@/ux-components/button-main/button-main";
export default {
name: "funnelFooter",
components: {
textLink,
buttonMain
},
};
</script>

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

@ -46,6 +46,31 @@
/> />
</div> </div>
</div> </div>
<div class="row my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">Links</h4>
</div>
</div>
<div class="row">
<div class="col my-3">
<textLink
navigation=true
text="Navigation Link"
/><br><br>
<textLink
text="Default Link"
/><br><br>
<textLink
textSmall=true
text="Small Link"
/><br><br>
<textLink
footer=true
text="Footer Link"
href="https://google.com"
/>
</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 Card</h4> <h4 class="m-0 p-2 bg-light rounded">List Card</h4>
@ -626,31 +651,6 @@
/> />
</div> </div>
</div> </div>
<div class="row my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">Links</h4>
</div>
</div>
<div class="row">
<div class="col my-3">
<textLink
navigation=true
text="Navigation Link"
/><br><br>
<textLink
text="Default Link"
/><br><br>
<textLink
textSmall=true
text="Small Link"
/><br><br>
<textLink
footer=true
text="Footer Link"
href="https://google.com"
/>
</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">Typography</h4> <h4 class="m-0 p-2 bg-light rounded">Typography</h4>
@ -796,95 +796,109 @@
<h4 class="m-0 p-2 bg-light rounded">Button Question</h4> <h4 class="m-0 p-2 bg-light rounded">Button Question</h4>
</div> </div>
</div> </div>
<buttonQuestion <div class="row">
:answers="checkboxAnswers" <div class="col">
:isMultiSelect="true" <buttonQuestion
ariaLabelBy="checkbox" :answers="checkboxAnswers"
groupName="checkbox-list" :isMultiSelect="true"
questionText="List Button as checkbox" ariaLabelBy="checkbox"
/> groupName="checkbox-list"
<buttonQuestion questionText="List Button as checkbox"
:answers="radioAnswers" />
ariaLabelBy="radio" <buttonQuestion
groupName="radio-list" :answers="radioAnswers"
questionText="List Button as radio" ariaLabelBy="radio"
/> groupName="radio-list"
<buttonQuestion questionText="List Button as radio"
:answers="horizontalCheckboxAnswers" />
buttonType="listButtonHorizontal" <buttonQuestion
:isMultiSelect="true" :answers="horizontalCheckboxAnswers"
isColumn buttonType="listButtonHorizontal"
ariaLabelBy="checkbox" :isMultiSelect="true"
groupName="checkbox-list-horizontal" isColumn
questionText="List Button Horizontal as checkbox" ariaLabelBy="checkbox"
/> groupName="checkbox-list-horizontal"
<buttonQuestion questionText="List Button Horizontal as checkbox"
:answers="horizontalRadioAnswers" />
buttonType="listButtonHorizontal" <buttonQuestion
isColumn :answers="horizontalRadioAnswers"
ariaLabelBy="radio" buttonType="listButtonHorizontal"
groupName="radio-list-horizontal" isColumn
questionText="List Button Horizontal as radio" ariaLabelBy="radio"
sizeInRem="1" groupName="radio-list-horizontal"
/> questionText="List Button Horizontal as radio"
<buttonQuestion sizeInRem="1"
:answers="listCardCheckBox" />
buttonType="listCard" <buttonQuestion
isMultiSelect :answers="listCardCheckBox"
ariaLabelBy="check_card" buttonType="listCard"
groupName="check-list-card" isMultiSelect
questionText="List Card as checkbox" ariaLabelBy="check_card"
/> groupName="check-list-card"
<buttonQuestion questionText="List Card as checkbox"
:answers="listCardRadio" />
buttonType="listCard" <buttonQuestion
ariaLabelBy="radio_card" :answers="listCardRadio"
groupName="radio-card" buttonType="listCard"
questionText="List Card as radio" ariaLabelBy="radio_card"
/> groupName="radio-card"
<buttonQuestion questionText="List Card as radio"
isMultiSelect />
isWide <buttonQuestion
:answers="listCardCheckBoxHorizontal" isMultiSelect
buttonType="listCard" isWide
ariaLabelBy="horizontal_check_card" :answers="listCardCheckBoxHorizontal"
groupName="horizontal_check-card" buttonType="listCard"
questionText="List Card Horizontal as checkbox" ariaLabelBy="horizontal_check_card"
/> groupName="horizontal_check-card"
<buttonQuestion questionText="List Card Horizontal as checkbox"
isMultiSelect />
isWide <buttonQuestion
:answers="listCardCheckBoxHorizontalSubText" isMultiSelect
buttonType="listCard" isWide
ariaLabelBy="horizontal_check_card-st" :answers="listCardCheckBoxHorizontalSubText"
groupName="horizontal_check-card-st" buttonType="listCard"
questionText="With Subtext" ariaLabelBy="horizontal_check_card-st"
/> groupName="horizontal_check-card-st"
<buttonQuestion questionText="With Subtext"
isWide />
:answers="listRadioHorizontal" <buttonQuestion
buttonType="listCard" isWide
ariaLabelBy="horizontal_radio_card" :answers="listRadioHorizontal"
groupName="horizontal_cradio-card" buttonType="listCard"
questionText="List Card Horizontal as radio" ariaLabelBy="horizontal_radio_card"
/> groupName="horizontal_cradio-card"
<buttonQuestion questionText="List Card Horizontal as radio"
isWide />
:answers="listRadioHorizontalSubText" <buttonQuestion
buttonType="listCard" isWide
ariaLabelBy="horizontal_radio_card-st" :answers="listRadioHorizontalSubText"
groupName="horizontal_cradio-card-st" buttonType="listCard"
questionText="With Subtext" ariaLabelBy="horizontal_radio_card-st"
/> groupName="horizontal_cradio-card-st"
<buttonQuestion questionText="With Subtext"
isMultiSelect />
isRow <buttonQuestion
:answers="listCardGroup" isMultiSelect
buttonType="listCard" isRow
ariaLabelBy="horizontal_radio_card-group" :answers="listCardGroup"
groupName="horizontal_cradio-card-group" buttonType="listCard"
questionText="In column layout" ariaLabelBy="horizontal_radio_card-group"
/> groupName="horizontal_cradio-card-group"
questionText="In column layout"
/>
</div>
</div>
<div class="row my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">Funnel Footer</h4>
</div>
</div>
<div class="row my-2">
<div class="col">
<funnelFooter/>
</div>
</div>
</div> </div>
</template> </template>
@ -900,6 +914,7 @@ import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-bu
import checkbox from "@/ux-components/checkbox/checkbox"; import checkbox from "@/ux-components/checkbox/checkbox";
import buttonQuestion from "@/common-components/button-question/button-question"; import buttonQuestion from "@/common-components/button-question/button-question";
import textLink from "@/ux-components/text-link/text-link"; import textLink from "@/ux-components/text-link/text-link";
import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
export default { export default {
name: "App", name: "App",
components: { components: {
@ -913,7 +928,8 @@ export default {
checkbox, checkbox,
funnelHeader, funnelHeader,
buttonQuestion, buttonQuestion,
textLink textLink,
funnelFooter
}, },
data() { data() {
return { return {

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

@ -1,5 +1,5 @@
<template> <template>
<button :disabled="isDisabled" :aria-disabled="isDisabled" class="btn d-flex align-items-center py-3 px-4" :class="isPrimary ? 'btn-primary' : 'btn-secondary'" @click="clicked()"> <button :disabled="isDisabled" :aria-disabled="isDisabled" class="btn d-flex align-items-center py-3 px-4" :class="[isPrimary ? 'btn-primary' : 'btn-secondary',isFloat ? 'float-end' : '']" @click="clicked()">
<span class="m-0">{{ this.buttonText }}</span> <span class="m-0">{{ this.buttonText }}</span>
<loader class="ms-2" v-if="isLoaderDisplayed" v-bind:style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }" v-bind:class="[this.loaderColor, this.loaderPosition]" /> <loader class="ms-2" v-if="isLoaderDisplayed" v-bind:style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }" v-bind:class="[this.loaderColor, this.loaderPosition]" />
</button> </button>
@ -16,6 +16,7 @@ export default {
loaderColor: String, loaderColor: String,
loaderPosition: String, loaderPosition: String,
sizeInRem: [Number, String], sizeInRem: [Number, String],
isFloat: Boolean
}, },
data() { data() {
return { return {
@ -44,6 +45,7 @@ export default {
border-radius: $border-radius-lg; border-radius: $border-radius-lg;
color: $white; color: $white;
transition: all 150ms linear; transition: all 150ms linear;
white-space: nowrap;
&:hover { &:hover {
background: linear-gradient(270deg, rgba(6,87,124,1) 0%, rgba(6,87,124,1) 100%); background: linear-gradient(270deg, rgba(6,87,124,1) 0%, rgba(6,87,124,1) 100%);
} }

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

@ -97,6 +97,7 @@ export default {
background: $white; background: $white;
transition: all 150ms linear; transition: all 150ms linear;
border: 1px solid $gray-500; border: 1px solid $gray-500;
border-radius: 0;
width: 100%; width: 100%;
&:hover { &:hover {
box-shadow: 0 0 0 4px $blue-100; box-shadow: 0 0 0 4px $blue-100;

6
src/ux-components/text-link/text-link.vue
View file

@ -51,6 +51,12 @@ a {
color: $black; color: $black;
border-bottom: 1px solid $black; border-bottom: 1px solid $black;
line-height: 26px; line-height: 26px;
display: inline-flex;
text-transform: capitalize;
white-space: nowrap;
position: relative;
top: 50%;
transform: translateY(-50%);
} }
&.footer-link { &.footer-link {
color: $gray-500; color: $gray-500;