Merge branch 'brm-base-properties' into md-branch
This commit is contained in:
Max
commit
b7abbeeaa5
42 changed files with 6917 additions and 902 deletions
75
azure-pipelines.yml
Normal file
75
azure-pipelines.yml
Normal file
|
|
@ -0,0 +1,75 @@
|
||||||
|
trigger:
|
||||||
|
branches:
|
||||||
|
include: [ develop, release/* ]
|
||||||
|
paths:
|
||||||
|
exclude:
|
||||||
|
- deployment/*
|
||||||
|
include:
|
||||||
|
- "*"
|
||||||
|
pr:
|
||||||
|
branches:
|
||||||
|
include: [ '*' ]
|
||||||
|
paths:
|
||||||
|
exclude:
|
||||||
|
- deployment/*
|
||||||
|
include:
|
||||||
|
- "*"
|
||||||
|
|
||||||
|
resources:
|
||||||
|
containers:
|
||||||
|
- container: node
|
||||||
|
image: packagerepository.sagaws.net:8082/safelite/node-build:15
|
||||||
|
- container: awscli
|
||||||
|
image: packagerepository.sagaws.net:8082/safelite/awscli-build:3.7
|
||||||
|
repositories:
|
||||||
|
- repository: AzureDevOps
|
||||||
|
type: github
|
||||||
|
name: Safelite/AzureDevOps
|
||||||
|
endpoint: Safelite
|
||||||
|
ref: refs/tags/t5.3.3
|
||||||
|
|
||||||
|
variables:
|
||||||
|
- group: Digital-Infrastructure
|
||||||
|
|
||||||
|
stages:
|
||||||
|
# PR's
|
||||||
|
# - ${{ if eq(variables['Build.Reason'], 'PullRequest') }}:
|
||||||
|
# - stage: TestPr
|
||||||
|
# displayName: Run Unit Tests For PullRequest
|
||||||
|
# jobs:
|
||||||
|
# - template: templates/digital/vue-jest-run-unit-tests.yml@AzureDevOps
|
||||||
|
# parameters:
|
||||||
|
# nodeContainer: node
|
||||||
|
# npmLocation: $(Build.SourcesDirectory)
|
||||||
|
# testResultsFile: junit.xml
|
||||||
|
# summaryFileLocation: coverage/cobertura-coverage.xml
|
||||||
|
|
||||||
|
# Dev Build/Deploy
|
||||||
|
- stage: Dev
|
||||||
|
variables:
|
||||||
|
- group: FixMyGlassDev
|
||||||
|
jobs:
|
||||||
|
- deployment: devBuildDeployment
|
||||||
|
displayName: Build and Deploy FMG - Dev
|
||||||
|
environment: digitalCloud-dev
|
||||||
|
container: node
|
||||||
|
workspace:
|
||||||
|
clean: all
|
||||||
|
strategy:
|
||||||
|
runOnce:
|
||||||
|
deploy:
|
||||||
|
steps:
|
||||||
|
- checkout: self
|
||||||
|
clean: true
|
||||||
|
- template: templates/digital/step-build-vue.yml@AzureDevOps
|
||||||
|
parameters:
|
||||||
|
buildOutputDir: dist
|
||||||
|
- template: templates/digital/step-deploy-vue.yml@AzureDevOps
|
||||||
|
parameters:
|
||||||
|
artifactName: vueDist
|
||||||
|
awsProfile: $(devDeploymentProfile)
|
||||||
|
deployBuckets:
|
||||||
|
safelite-dev-fmg-us-east-1:
|
||||||
|
clearFolder: true
|
||||||
|
deployFolder: ''
|
||||||
|
region: us-east-1
|
||||||
7494
package-lock.json
generated
7494
package-lock.json
generated
File diff suppressed because it is too large
Load diff
10
package.json
10
package.json
|
|
@ -5,7 +5,8 @@
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"serve": "vue-cli-service serve",
|
"serve": "vue-cli-service serve",
|
||||||
"build": "vue-cli-service build",
|
"build": "vue-cli-service build",
|
||||||
"lint": "vue-cli-service lint"
|
"lint": "vue-cli-service lint",
|
||||||
|
"test:unit": "vue-cli-service test:unit --coverage --coverageReporters=cobertura --ci --watchAll=false"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"axios": "^0.21.4",
|
"axios": "^0.21.4",
|
||||||
|
|
@ -17,6 +18,7 @@
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vue/cli-plugin-babel": "~4.5.0",
|
"@vue/cli-plugin-babel": "~4.5.0",
|
||||||
"@vue/cli-plugin-eslint": "~4.5.0",
|
"@vue/cli-plugin-eslint": "~4.5.0",
|
||||||
|
"@vue/cli-plugin-unit-jest": "^4.5.13",
|
||||||
"@vue/cli-service": "~4.5.0",
|
"@vue/cli-service": "~4.5.0",
|
||||||
"@vue/compiler-sfc": "^3.0.0",
|
"@vue/compiler-sfc": "^3.0.0",
|
||||||
"@vue/eslint-config-prettier": "^6.0.0",
|
"@vue/eslint-config-prettier": "^6.0.0",
|
||||||
|
|
@ -24,10 +26,16 @@
|
||||||
"eslint": "^6.7.2",
|
"eslint": "^6.7.2",
|
||||||
"eslint-plugin-prettier": "^3.3.1",
|
"eslint-plugin-prettier": "^3.3.1",
|
||||||
"eslint-plugin-vue": "^7.0.0",
|
"eslint-plugin-vue": "^7.0.0",
|
||||||
|
"jest-junit": "^12.3.0",
|
||||||
"prettier": "^2.2.1",
|
"prettier": "^2.2.1",
|
||||||
"sass": "^1.26.5",
|
"sass": "^1.26.5",
|
||||||
"sass-loader": "^8.0.2"
|
"sass-loader": "^8.0.2"
|
||||||
},
|
},
|
||||||
|
"jest-junit": {
|
||||||
|
"suiteNameTemplate": "{filepath}",
|
||||||
|
"outputDirectory": ".",
|
||||||
|
"outputName": "junit.xml"
|
||||||
|
},
|
||||||
"eslintConfig": {
|
"eslintConfig": {
|
||||||
"root": true,
|
"root": true,
|
||||||
"env": {
|
"env": {
|
||||||
|
|
|
||||||
|
|
@ -5,13 +5,16 @@
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
|
||||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>
|
<noscript>
|
||||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||||
</noscript>
|
</noscript>
|
||||||
<div id="app"></div>
|
<div id="Funnel1"></div>
|
||||||
<!-- built files will be auto injected -->
|
<!-- built files will be auto injected -->
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
45
src/Funnel1.vue
Normal file
45
src/Funnel1.vue
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
<template>
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col my-3 d-flex justify-content-center">
|
||||||
|
<vehicleImage/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col">
|
||||||
|
<p class="text-center text-secondary fs-5 mb-4">Select a year to get started</p>
|
||||||
|
<p class="text-center fs-6 fw-bold">What year is your vehichle?</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col">
|
||||||
|
<buttonFunnel/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row mt-5">
|
||||||
|
<div class="col">
|
||||||
|
<buttonPrimary/>
|
||||||
|
<buttonSecondary/>
|
||||||
|
<textInput/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import buttonPrimary from './components/buttons/buttonPrimary';
|
||||||
|
import buttonSecondary from './components/buttons/buttonSecondary';
|
||||||
|
import buttonFunnel from './components/buttons/buttonFunnel';
|
||||||
|
import textInput from './components/forms/textInput';
|
||||||
|
import vehicleImage from './components/vehicleImage';
|
||||||
|
export default {
|
||||||
|
name: 'App',
|
||||||
|
components: {
|
||||||
|
buttonPrimary,
|
||||||
|
buttonSecondary,
|
||||||
|
buttonFunnel,
|
||||||
|
textInput,
|
||||||
|
vehicleImage
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -1,109 +0,0 @@
|
||||||
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on September 15, 2021 */
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'robotoblack';
|
|
||||||
src: url('roboto-black-safelite.woff2') format('woff2'),
|
|
||||||
url('roboto-black-safelite.woff') format('woff');
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'robotoblack_italic';
|
|
||||||
src: url('roboto-blackitalic-safelite.woff2') format('woff2'),
|
|
||||||
url('roboto-blackitalic-safelite.woff') format('woff');
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'robotobold';
|
|
||||||
src: url('roboto-bold-safelite.woff2') format('woff2'),
|
|
||||||
url('roboto-bold-safelite.woff') format('woff');
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'robotobold_italic';
|
|
||||||
src: url('roboto-bolditalic-safelite.woff2') format('woff2'),
|
|
||||||
url('roboto-bolditalic-safelite.woff') format('woff');
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'robotoitalic';
|
|
||||||
src: url('roboto-italic-safelite.woff2') format('woff2'),
|
|
||||||
url('roboto-italic-safelite.woff') format('woff');
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'robotolight';
|
|
||||||
src: url('roboto-light-safelite.woff2') format('woff2'),
|
|
||||||
url('roboto-light-safelite.woff') format('woff');
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'robotolight_italic';
|
|
||||||
src: url('roboto-lightitalic-safelite.woff2') format('woff2'),
|
|
||||||
url('roboto-lightitalic-safelite.woff') format('woff');
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'robotomedium';
|
|
||||||
src: url('roboto-medium-safelite.woff2') format('woff2'),
|
|
||||||
url('roboto-medium-safelite.woff') format('woff');
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'robotomedium_italic';
|
|
||||||
src: url('roboto-mediumitalic-safelite.woff2') format('woff2'),
|
|
||||||
url('roboto-mediumitalic-safelite.woff') format('woff');
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'robotoregular';
|
|
||||||
src: url('roboto-regular-safelite.woff2') format('woff2'),
|
|
||||||
url('roboto-regular-safelite.woff') format('woff');
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'robotothin';
|
|
||||||
src: url('roboto-thin-safelite.woff2') format('woff2'),
|
|
||||||
url('roboto-thin-safelite.woff') format('woff');
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'robotothin_italic';
|
|
||||||
src: url('roboto-thinitalic-safelite.woff2') format('woff2'),
|
|
||||||
url('roboto-thinitalic-safelite.woff') format('woff');
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
|
|
||||||
}
|
|
||||||
20
src/assets/scss/components/_buttons.scss
Normal file
20
src/assets/scss/components/_buttons.scss
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
//Custom button styles
|
||||||
|
.btn {
|
||||||
|
&.btn-secondary {
|
||||||
|
position: relative;//Required for :after pseduo to position correctly
|
||||||
|
margin: 5px;//Because :after is position absolute and isn't accounted for in DOM
|
||||||
|
border-radius: 8px;//To match Figma border radius
|
||||||
|
&:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: calc(100% + 12px);
|
||||||
|
height: calc(100% + 12px);
|
||||||
|
border: 3px solid $secondary;
|
||||||
|
background-color: $white;
|
||||||
|
border-radius: 12px;
|
||||||
|
left: -6px;
|
||||||
|
top: -6px;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
6
src/assets/scss/components/_vehicle-image.scss
Normal file
6
src/assets/scss/components/_vehicle-image.scss
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
.vehicle-image {
|
||||||
|
padding: 6px;
|
||||||
|
&.blur {
|
||||||
|
filter: blur(6px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -13,12 +13,11 @@
|
||||||
//Bootstrap Defaults
|
//Bootstrap Defaults
|
||||||
@import "./node_modules/bootstrap/scss/bootstrap";
|
@import "./node_modules/bootstrap/scss/bootstrap";
|
||||||
|
|
||||||
//Fonts
|
|
||||||
@import "../fonts/stylesheet.css";
|
|
||||||
|
|
||||||
//Custom Global CSS
|
//Custom Global CSS
|
||||||
@import "_GlobalStyles";
|
@import "_GlobalStyles";
|
||||||
|
|
||||||
//Custom Components CSS
|
//Custom Components CSS
|
||||||
@import "./components/_navbar";
|
@import "./components/_navbar";
|
||||||
@import "./components/_SelectCar";
|
@import "./components/_SelectCar";
|
||||||
|
@import "./components/_buttons";
|
||||||
|
@import "./components/_vehicle-image";
|
||||||
|
|
|
||||||
|
|
@ -16,16 +16,25 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h4 class="mt-3">Buttons</h4>
|
<div class="row">
|
||||||
|
<div class="col">
|
||||||
|
<h4 class="mt-3">Buttons</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col">
|
||||||
|
|
||||||
<button type="button" class="btn btn-primary">Primary</button>
|
<button type="button" class="btn btn-primary">Primary</button>
|
||||||
<button type="button" class="btn btn-secondary">Secondary</button>
|
<button type="button" class="btn btn-secondary">Secondary</button>
|
||||||
<button type="button" class="btn btn-success">Success</button>
|
<button type="button" class="btn btn-success">Success</button>
|
||||||
<button type="button" class="btn btn-danger">Danger</button>
|
<button type="button" class="btn btn-danger">Danger</button>
|
||||||
<button type="button" class="btn btn-warning">Warning</button>
|
<button type="button" class="btn btn-warning">Warning</button>
|
||||||
<button type="button" class="btn btn-info">Info</button>
|
<button type="button" class="btn btn-info">Info</button>
|
||||||
<button type="button" class="btn btn-light">Light</button>
|
<button type="button" class="btn btn-light">Light</button>
|
||||||
<button type="button" class="btn btn-dark">Dark</button>
|
<button type="button" class="btn btn-dark">Dark</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
||||||
3
src/components/buttons/buttonFunnel.vue
Normal file
3
src/components/buttons/buttonFunnel.vue
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<template>
|
||||||
|
<button type="button" class="btn btn-funnel border rounded w-100 text-start">2021</button>
|
||||||
|
</template>
|
||||||
3
src/components/buttons/buttonPrimary.vue
Normal file
3
src/components/buttons/buttonPrimary.vue
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<template>
|
||||||
|
<button type="button" class="btn btn-primary">Primary</button>
|
||||||
|
</template>
|
||||||
3
src/components/buttons/buttonSecondary.vue
Normal file
3
src/components/buttons/buttonSecondary.vue
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<template>
|
||||||
|
<button type="button" class="btn btn-secondary">Secondary</button>
|
||||||
|
</template>
|
||||||
7
src/components/forms/textInput.vue
Normal file
7
src/components/forms/textInput.vue
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
<template>
|
||||||
|
<div><!-- Add helper classes to wrapper div if margin is needed -->
|
||||||
|
<!-- Hide label but still accessible to screen reader with .visually-hidden -->
|
||||||
|
<label for="exampleFormControlInput1" class="form-label visually-hidden">Email address</label>
|
||||||
|
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
3
src/components/vehicleImage.vue
Normal file
3
src/components/vehicleImage.vue
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<template>
|
||||||
|
<img class="vehicle-image blur img-fluid" src="https://placekitten.com/600/300" />
|
||||||
|
</template>
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import { createApp } from "vue";
|
import { createApp } from "vue";
|
||||||
import App from "./App.vue";
|
import Funnel1 from "./Funnel1.vue";
|
||||||
|
|
||||||
//Bootstrap JavaScript
|
//Bootstrap JavaScript
|
||||||
import "../node_modules/bootstrap/dist/js/bootstrap.js";
|
import "../node_modules/bootstrap/dist/js/bootstrap.js";
|
||||||
|
|
@ -7,4 +7,4 @@ import "../node_modules/bootstrap/dist/js/bootstrap.js";
|
||||||
//Get Bootstrap and Custom Styles
|
//Get Bootstrap and Custom Styles
|
||||||
import "./assets/scss/custom.scss";
|
import "./assets/scss/custom.scss";
|
||||||
|
|
||||||
createApp(App).mount("#app")
|
createApp(Funnel1).mount("#Funnel1");
|
||||||
|
|
|
||||||
0
vue.config.js
Normal file
0
vue.config.js
Normal file
0
vue.release.config.js
Normal file
0
vue.release.config.js
Normal file
Loading…
Reference in a new issue