diff --git a/src/assets/img/icons/button-spinner-green.svg b/src/assets/img/icons/button-spinner-blue.svg similarity index 91% rename from src/assets/img/icons/button-spinner-green.svg rename to src/assets/img/icons/button-spinner-blue.svg index 2ee9031dd..57185260c 100644 --- a/src/assets/img/icons/button-spinner-green.svg +++ b/src/assets/img/icons/button-spinner-blue.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/scss/_global-styles.scss b/src/assets/scss/_global-styles.scss deleted file mode 100644 index 9512ddee3..000000000 --- a/src/assets/scss/_global-styles.scss +++ /dev/null @@ -1,22 +0,0 @@ -body { - font-size: 16px; - background-color: #fff; - padding: .5rem; - .container-fluid { - max-width: 576px;//Remove once desktop app is complete - &.container-shadow { - box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.15);//Use instead of Bootstrap's helper - } - } - a { - color: $blue-600; - text-decoration: none; - border-bottom: 1px solid $blue-600; - &:hover { - color: $blue-400; - } - } - .pointer { - cursor: pointer; - } -} diff --git a/src/assets/scss/components/_SelectCar.scss b/src/assets/scss/components/_SelectCar.scss deleted file mode 100644 index fc3268bb1..000000000 --- a/src/assets/scss/components/_SelectCar.scss +++ /dev/null @@ -1,68 +0,0 @@ -.select-car { - height: 100vh; - - .select-car-form, .car_info, .radio_question { - background: $white; - height: 100%; - - .list-view { - height: calc(100% - 230px); - overflow-y: scroll; - overflow-x: hidden; - } - - .car_list, .current_car_info-text, .needed_car_info-text { - flex-shrink: 0; - width: 100%; - position: relative; - transition: transform .3s; - } - } - - .current_car_info { - position: relative; - min-height: 2.5rem; - - .current_car_info-text { - position: absolute; - } - } - - .back-button { - margin-left: 5px; - img { - width: 20px; - } - } -} - -.slide-enter-from { - opacity: 0; - transform: translateX(30vw); -} -.slide-enter-active, .slide-leave-active { - transition: all .4s; -} -.slide-leave-to { - opacity: 0; - transform: translateX(-30vw); -} - -.slide_reverse-enter-from { - opacity: 0; - transform: translateX(-30vw); -} -.slide_reverse-enter-active, .slide_reverse-leave-active { - transition: all .4s; -} -.slide_reverse-leave-to { - opacity: 0; - transform: translateX(30vw); -} - -.fade-enter-from, .fade-leave-to { - opacity: 0; -} -.fade-enter-active, .fade-leave-active { - transition: all .5s ease; -} \ No newline at end of file diff --git a/src/assets/scss/components/_buttons.scss b/src/assets/scss/components/_buttons.scss deleted file mode 100644 index 21087a117..000000000 --- a/src/assets/scss/components/_buttons.scss +++ /dev/null @@ -1,76 +0,0 @@ -//Custom button styles -.btn { - &.btn-primary { - position: relative; - background: $blue-700; - background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%); - border: none; - border-radius: $border-radius-lg; - height: 48px; - color: $white; - transition: all 150ms linear; - &:hover { - background: linear-gradient(270deg, rgba(6,87,124,1) 0%, rgba(6,87,124,1) 100%); - } - &:focus, // Mouse, touch, stylus focus - &:focus-visible { // Keyboard focus for accessibility - outline: none; - box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700; - } - &.button-loader { - padding: 0 40px 0 12px; - &:after { - content: url(../../assets/img/icons/button-spinner-white.svg); - position: absolute; - right: 14px; - width: 16px; - height: 16px; - margin-left: 12px; - animation: rotation 1s infinite linear; - @keyframes rotation { - 100% { - transform:rotate(360deg); - } - } - } - } - } - &:disabled { - background: $gray-100 !important; - background: linear-gradient(270deg, $gray-100 0%, $gray-100 100%) !important; - color: $gray-400 !important; - height: 48px; - border: none; - border-radius: $border-radius-lg; - } - &.list-button { - position: relative; - background: $white; - height: 48px; - transition: all 150ms linear; - border-radius: $border-radius-lg; - border: 1px solid rgba($gray-300,.3); - width: 100%; - &:focus, // Mouse, touch, stylus focus - &:focus-visible { // Keyboard focus for accessibility - box-shadow: none; - } - &.button-loader { - padding: 0 40px 0 12px; - &:after { - content: url(../../assets/img/icons/button-spinner-green.svg); - position: absolute; - right: 14px; - width: 16px; - height: 16px; - margin-left: 12px; - animation: rotation 1s infinite linear; - @keyframes rotation { - 100% { - transform:rotate(360deg); - } - } - } - } - } -} diff --git a/src/assets/scss/components/_navbar.scss b/src/assets/scss/components/_navbar.scss deleted file mode 100644 index bbfc86d68..000000000 --- a/src/assets/scss/components/_navbar.scss +++ /dev/null @@ -1,6 +0,0 @@ -.navbar { - .logo { - width: 114px; - height: auto; - } -} diff --git a/src/assets/scss/components/_radio-card.scss b/src/assets/scss/components/_radio-card.scss deleted file mode 100644 index 6b3b1797f..000000000 --- a/src/assets/scss/components/_radio-card.scss +++ /dev/null @@ -1,28 +0,0 @@ -.radio-card { - input[type=radio] { - &:focus + label { - background-color: $white; - box-shadow: 0px 0px 0px 4px $blue-600; - } - &:focus-visible + label { - background-color: $white; - box-shadow: 0px 0px 0px 4px $blue-600; - } - &:checked + label { - background-color: $blue-100; - border: 1px solid $blue-600; - } - &.invalid + label { - background-color: $white; - border: 1px solid $red-500; - } - } - label { - background: $white; - border: 1px solid $gray-400; - &:hover { - cursor: pointer; - box-shadow: 0px 0px 0px 6px $blue-100; - } - } -} diff --git a/src/assets/scss/components/_typogrophy.scss b/src/assets/scss/components/_typogrophy.scss deleted file mode 100644 index c40fb9e22..000000000 --- a/src/assets/scss/components/_typogrophy.scss +++ /dev/null @@ -1,46 +0,0 @@ -//Typogrophy -p { - font-size: 16px; - line-height: 1.625; - font-weight: 400; -} - -//Headings -//font-size defined in _custom-variables.scss -//add helper fw-bold to any element to get bold style (500) -h1,.h1 { - line-height: 1.325; - font-weight: 300; -} -h2,.h2 { - line-height: 1.325; - font-weight: 300; -} -h3,.h3 { - line-height: 1.375; - font-weight: 300; -} -h4,.h4 { - line-height: 1.6; - font-weight: 300; -} -h5,.h5 { - line-height: 1.325; - font-weight: 400; -} -h6,.h6 { - line-height: 1.7; - letter-spacing: .75px; - text-transform: uppercase; -} - -label { - line-height: 1.625; - font-weight: 400; -} - -caption { - font-size: .75rem; - line-height: 1.7; - font-weight: 400; -} diff --git a/src/assets/scss/components/_vehicle-image.scss b/src/assets/scss/components/_vehicle-image.scss deleted file mode 100644 index 85bb7319a..000000000 --- a/src/assets/scss/components/_vehicle-image.scss +++ /dev/null @@ -1,6 +0,0 @@ -.vehicle-image { - padding: 6px; - &.blur { - filter: blur(6px); - } -} diff --git a/src/assets/scss/custom.scss b/src/assets/scss/custom.scss deleted file mode 100644 index 356cc0538..000000000 --- a/src/assets/scss/custom.scss +++ /dev/null @@ -1,25 +0,0 @@ -//Import files. Order matters! - -//Bootstrap Functions -@import "./node_modules/bootstrap/scss/functions"; - -//Variable Overrides -@import "_custom-variables"; - -//Bootstrap Default Variables and Mixins -@import "./node_modules/bootstrap/scss/variables"; -@import "./node_modules/bootstrap/scss/mixins"; - -//Bootstrap Defaults -@import "./node_modules/bootstrap/scss/bootstrap"; - -//Custom Global CSS -@import "_global-styles"; - -//Custom Components CSS -@import "./components/_typogrophy"; -@import "./components/_navbar"; -@import "./components/_SelectCar"; -@import "./components/_buttons"; -@import "./components/_vehicle-image"; -@import "./components/_radio-card"; diff --git a/src/constants/widgetNames.js b/src/constants/widgetNames.js new file mode 100644 index 000000000..013083bcf --- /dev/null +++ b/src/constants/widgetNames.js @@ -0,0 +1,6 @@ +const widgetNames = { + PAGE_HEADING_WIDGET: "PageHeadingWidget", + RADIO_QUESTION_WIDGET: "RadioQuestionWidget" +} + +export { widgetNames } \ No newline at end of file diff --git a/src/layouts/selectYear/selectYear.vue b/src/layouts/selectYear/selectYear.vue index a39c7d65b..56ab2c502 100644 --- a/src/layouts/selectYear/selectYear.vue +++ b/src/layouts/selectYear/selectYear.vue @@ -48,5 +48,26 @@ export default { radioQuestion, Header, }, + // Sample Call to Mockey to represent real data being sent back from the API, and how the modles are supposed to + }); + + }) + } + } + break; + } + default: { + break; + this.radioQuestion = m.Model; + case this.widgetNames.RADIO_QUESTION_WIDGET: { + } + this.pageHeader = m.Model; + break; + case this.widgetNames.PAGE_HEADING_WIDGET: { + switch (m.Type) { + response.data.Result.forEach((m) => { + + // be prosessed and passed to child components. + axios.get("https://mockey.qa.sagaws.net/service/content/selectYear").then((response) => { }; diff --git a/src/main.js b/src/main.js index 2cbd42c11..784b51717 100644 --- a/src/main.js +++ b/src/main.js @@ -6,9 +6,6 @@ import baseMixin from "@/mixins/baseMixin.js"; //Bootstrap JavaScript import "../node_modules/bootstrap/dist/js/bootstrap.js"; -//Get Bootstrap and Custom Styles -import "./assets/scss/custom.scss"; - // Vue App Setup const vueApp = createApp(App); diff --git a/src/mixins/baseMixin.js b/src/mixins/baseMixin.js index a64e5e190..414d8bb47 100644 --- a/src/mixins/baseMixin.js +++ b/src/mixins/baseMixin.js @@ -1,4 +1,5 @@ import { storeActions } from "@/constants/storeActions.js"; +import { widgetNames } from "@/constants/widgetNames.js"; export default { methods: { @@ -18,5 +19,8 @@ export default { storeActions() { return storeActions; }, + widgetNames(){ + return widgetNames; + } }, } \ No newline at end of file diff --git a/src/styles/commonStyles.scss b/src/styles/commonStyles.scss index e69de29bb..37dab947c 100644 --- a/src/styles/commonStyles.scss +++ b/src/styles/commonStyles.scss @@ -0,0 +1,208 @@ +body { + font-size: 16px; + background-color: #fff; + padding: .5rem; + .container-fluid { + max-width: 576px;//Remove once desktop app is complete + &.container-shadow { + box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.15);//Use instead of Bootstrap's helper + } + } + a { + color: $blue; + text-decoration: none; + border-bottom: 1px solid $blue; + &:hover { + color: $blue-400; + } + } + .pointer { + cursor: pointer; + } + } + +//Typogrophy +p { + font-size: 16px; + line-height: 1.625; + font-weight: 400; +} + +//Headings +//add helper fw-bold to any element to get bold style (500) +h1,.h1 { + line-height: 1.325; + font-weight: 300; +} +h2,.h2 { + line-height: 1.325; + font-weight: 300; +} +h3,.h3 { + line-height: 1.375; + font-weight: 300; +} +h4,.h4 { + line-height: 1.6; + font-weight: 300; +} +h5,.h5 { + line-height: 1.325; + font-weight: 400; +} +h6,.h6 { + line-height: 1.7; + letter-spacing: .75px; + text-transform: uppercase; +} + +label { + line-height: 1.625; + font-weight: 400; +} + +caption { + font-size: .75rem; + line-height: 1.7; + font-weight: 400; +} + +//Custom button styles +.btn { + &.btn-primary { + position: relative; + background: $blue-700; + background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%); + border: none; + border-radius: $border-radius-lg; + height: 48px; + color: $white; + transition: all 150ms linear; + &:hover { + background: linear-gradient(270deg, rgba(6,87,124,1) 0%, rgba(6,87,124,1) 100%); + } + &:focus, // Mouse, touch, stylus focus + &:focus-visible { // Keyboard focus for accessibility + outline: none; + box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700; + } + &.button-loader { + padding: 0 40px 0 12px; + &:after { + content: url(../../assets/img/icons/button-spinner-white.svg); + position: absolute; + right: 14px; + width: 16px; + height: 16px; + margin-left: 12px; + animation: rotation 1s infinite linear; + @keyframes rotation { + 100% { + transform:rotate(360deg); + } + } + } + } + &:disabled { + background: $gray-100 !important; + background: linear-gradient(270deg, $gray-100 0%, $gray-100 100%) !important; + color: $gray !important; + height: 48px; + border: none; + border-radius: $border-radius-lg; + } + } + &.list-button { + position: relative; + background: $white; + height: 48px; + transition: all 150ms linear; + border-radius: $border-radius-lg; + border: 1px solid rgba($gray-300,.3); + width: 100%; + &:focus, // Mouse, touch, stylus focus + &:focus-visible { // Keyboard focus for accessibility + box-shadow: none; + } + &.button-loader { + padding: 0 40px 0 12px; + &:after { + content: url(../../assets/img/icons/button-spinner-blue.svg); + position: absolute; + right: 14px; + width: 16px; + height: 16px; + margin-left: 12px; + animation: rotation 1s infinite linear; + @keyframes rotation { + 100% { + transform:rotate(360deg); + } + } + } + } + } +} + +// SelectCar styles +.select-car { + height: 100vh; + + .select-car-form { + background: $white; + height: 100%; + + form { + height: calc(100% - 230px); + overflow-y: scroll; + overflow-x: hidden; + } + + .car_list, .current_car_info-text, .needed_car_info-text { + flex-shrink: 0; + width: 100%; + position: relative; + transition: transform .3s; + } + } + + .current_car_info { + position: relative; + min-height: 2.5rem; + + .current_car_info-text { + position: absolute; + } + } +} + +.slide-enter-from { + opacity: 0; + transform: translateX(30vw); +} +.slide-enter-active, .slide-leave-active { + transition: all .4s; +} +.slide-leave-to { + opacity: 0; + transform: translateX(-30vw); +} + +.slide_reverse-enter-from { + opacity: 0; + transform: translateX(-30vw); +} +.slide_reverse-enter-active, .slide_reverse-leave-active { + transition: all .4s; +} +.slide_reverse-leave-to { + opacity: 0; + transform: translateX(30vw); +} + +.fade-enter-from, .fade-leave-to { + opacity: 0; +} +.fade-enter-active, .fade-leave-active { + transition: all .5s ease; +} diff --git a/src/styles/uxStyles.scss b/src/styles/uxStyles.scss deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/assets/scss/_custom-variables.scss b/src/styles/uxVariables.scss similarity index 94% rename from src/assets/scss/_custom-variables.scss rename to src/styles/uxVariables.scss index 2b2211595..f3e15b271 100644 --- a/src/assets/scss/_custom-variables.scss +++ b/src/styles/uxVariables.scss @@ -115,11 +115,11 @@ $font-family-code: $font-family-monospace; $font-size-base: 1rem; // Assumes the browser default, typically `16px` //Font weight -$font-weight-lighter: lighter !default; -$font-weight-light: 300 !default; -$font-weight-normal: 400 !default; -$font-weight-bold: 500 !default; -$font-weight-bolder: bolder !default; +$font-weight-lighter: lighter; +$font-weight-light: 300; +$font-weight-normal: 400; +$font-weight-bold: 500; +$font-weight-bolder: bolder; //Headings $h1-font-size: $font-size-base * 3; diff --git a/src/uxComponents/radioCard/radioCard.vue b/src/uxComponents/radioCard/radioCard.vue index 249646f82..fbf55aa77 100644 --- a/src/uxComponents/radioCard/radioCard.vue +++ b/src/uxComponents/radioCard/radioCard.vue @@ -45,3 +45,34 @@ export default { }, }; + \ No newline at end of file diff --git a/vue.config.js b/vue.config.js index f26ca4dab..d66a7893c 100644 --- a/vue.config.js +++ b/vue.config.js @@ -13,4 +13,18 @@ module.exports = { }, }, }, + css: { + loaderOptions: { + sass: { // Load Order Matters!!! + prependData: ` + @import "./node_modules/bootstrap/scss/functions"; + @import "@/styles/uxVariables.scss"; + @import "./node_modules/bootstrap/scss/variables"; + @import "./node_modules/bootstrap/scss/mixins"; + @import "./node_modules/bootstrap/scss/bootstrap"; + @import "@/styles/commonStyles.scss"; + ` + } + } + } }; diff --git a/vue.release.config.js b/vue.release.config.js index d0be4bb59..a5419b6e3 100644 --- a/vue.release.config.js +++ b/vue.release.config.js @@ -3,4 +3,18 @@ process.env.VUE_APP_CONSUMER_API_GATEWAY = "__VUE_APP_CONSUMER_API_GATEWAY__"; module.exports = { outputDir: "dist/fmg", publicPath: "/fmg", + css: { + loaderOptions: { + sass: { // Load Order Matters!!! + prependData: ` + @import "./node_modules/bootstrap/scss/functions"; + @import "@/styles/uxVariables.scss"; + @import "./node_modules/bootstrap/scss/variables"; + @import "./node_modules/bootstrap/scss/mixins"; + @import "./node_modules/bootstrap/scss/bootstrap"; + @import "@/styles/commonStyles.scss"; + ` + } + } + } };