Merge pull request #169 from Safelite/BRM-delete-button-components
Remove button-primary and button-secondary components.
This commit is contained in:
bmauger
GitHub
commit
e134b02466
4 changed files with 0 additions and 335 deletions
|
|
@ -1,92 +0,0 @@
|
||||||
import { shallowMount } from "@vue/test-utils";
|
|
||||||
import buttonPrimary from "./button-primary";
|
|
||||||
import { nextTick } from "vue";
|
|
||||||
|
|
||||||
describe("buttonPrimary.vue", () => {
|
|
||||||
|
|
||||||
it("Should return aria-disabled state", async () => {
|
|
||||||
// Act
|
|
||||||
const wrapper = shallowMount(buttonPrimary, {
|
|
||||||
propsData: {
|
|
||||||
isDisabled: true
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
// Assert
|
|
||||||
const button = wrapper.find("button");
|
|
||||||
|
|
||||||
// Expect
|
|
||||||
expect(button.attributes()["aria-disabled"]).toEqual("true");
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
it("Should return loader color", async () => {
|
|
||||||
// Act
|
|
||||||
const wrapper = shallowMount(buttonPrimary, {
|
|
||||||
propsData: {
|
|
||||||
loaderColor: "blue",
|
|
||||||
loaderEnabled: true
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
// Assert
|
|
||||||
|
|
||||||
const label = wrapper.find("label");
|
|
||||||
|
|
||||||
wrapper.vm.displayComponent();
|
|
||||||
|
|
||||||
await nextTick();
|
|
||||||
|
|
||||||
const loader = wrapper.find("loader-stub");
|
|
||||||
|
|
||||||
expect(loader.attributes('class')).toContain("blue");
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
it("Should return loader position", async () => {
|
|
||||||
// Act
|
|
||||||
const wrapper = shallowMount(buttonPrimary, {
|
|
||||||
propsData: {
|
|
||||||
loaderPosition: "right",
|
|
||||||
loaderEnabled: true
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
// Assert
|
|
||||||
|
|
||||||
const label = wrapper.find("label");
|
|
||||||
|
|
||||||
wrapper.vm.displayComponent();
|
|
||||||
|
|
||||||
await nextTick();
|
|
||||||
|
|
||||||
const loader = wrapper.find("loader-stub");
|
|
||||||
|
|
||||||
expect(loader.attributes('class')).toContain("right");
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
it("Should return loader size in rem", async () => {
|
|
||||||
// Act
|
|
||||||
const wrapper = shallowMount(buttonPrimary, {
|
|
||||||
propsData: {
|
|
||||||
sizeInRem: 1,
|
|
||||||
loaderEnabled: true
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
// Assert
|
|
||||||
|
|
||||||
const label = wrapper.find("label");
|
|
||||||
|
|
||||||
wrapper.vm.displayComponent();
|
|
||||||
|
|
||||||
await nextTick();
|
|
||||||
|
|
||||||
const loader = wrapper.find("loader-stub");
|
|
||||||
|
|
||||||
expect(loader.attributes('style')).toContain("1rem");
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
@ -1,76 +0,0 @@
|
||||||
<template>
|
|
||||||
<button
|
|
||||||
:disabled="isDisabled"
|
|
||||||
:aria-disabled="isDisabled"
|
|
||||||
class="btn btn-primary d-flex align-items-center py-3 px-4"
|
|
||||||
@click="displayComponent"
|
|
||||||
>
|
|
||||||
<span class="m-0">{{ this.buttonText }}</span>
|
|
||||||
<loader
|
|
||||||
class="ms-2"
|
|
||||||
v-if="display"
|
|
||||||
v-bind:style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }"
|
|
||||||
v-bind:class="[this.loaderColor, this.loaderPosition]"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import loader from "@/ux-components/loader/loader";
|
|
||||||
export default {
|
|
||||||
name: "buttonPrimary",
|
|
||||||
props: {
|
|
||||||
buttonText: String,
|
|
||||||
isDisabled: Boolean,
|
|
||||||
loaderColor: String,
|
|
||||||
loaderPosition: String,
|
|
||||||
sizeInRem: [Number, String],
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
display: false,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
displayComponent() {
|
|
||||||
this.display = true;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
loader,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.btn {
|
|
||||||
&.btn-primary {
|
|
||||||
position: relative;
|
|
||||||
background: $blue-700;
|
|
||||||
@include blue-gradient;
|
|
||||||
border: none;
|
|
||||||
border-radius: $border-radius-lg;
|
|
||||||
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;
|
|
||||||
color: $white;
|
|
||||||
@include blue-gradient;
|
|
||||||
}
|
|
||||||
&: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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,92 +0,0 @@
|
||||||
import { shallowMount } from "@vue/test-utils";
|
|
||||||
import buttonSecondary from "./button-secondary";
|
|
||||||
import { nextTick } from "vue";
|
|
||||||
|
|
||||||
describe("buttonSecondary.vue", () => {
|
|
||||||
|
|
||||||
it("Should return aria-disabled state", async () => {
|
|
||||||
// Act
|
|
||||||
const wrapper = shallowMount(buttonSecondary, {
|
|
||||||
propsData: {
|
|
||||||
isDisabled: true
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
// Assert
|
|
||||||
const button = wrapper.find("button");
|
|
||||||
|
|
||||||
// Expect
|
|
||||||
expect(button.attributes()["aria-disabled"]).toEqual("true");
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
it("Should return loader color", async () => {
|
|
||||||
// Act
|
|
||||||
const wrapper = shallowMount(buttonSecondary, {
|
|
||||||
propsData: {
|
|
||||||
loaderColor: "blue",
|
|
||||||
loaderEnabled: true
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
// Assert
|
|
||||||
|
|
||||||
const label = wrapper.find("label");
|
|
||||||
|
|
||||||
wrapper.vm.displayComponent();
|
|
||||||
|
|
||||||
await nextTick();
|
|
||||||
|
|
||||||
const loader = wrapper.find("loader-stub");
|
|
||||||
|
|
||||||
expect(loader.attributes('class')).toContain("blue");
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
it("Should return loader position", async () => {
|
|
||||||
// Act
|
|
||||||
const wrapper = shallowMount(buttonSecondary, {
|
|
||||||
propsData: {
|
|
||||||
loaderPosition: "right",
|
|
||||||
loaderEnabled: true
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
// Assert
|
|
||||||
|
|
||||||
const label = wrapper.find("label");
|
|
||||||
|
|
||||||
wrapper.vm.displayComponent();
|
|
||||||
|
|
||||||
await nextTick();
|
|
||||||
|
|
||||||
const loader = wrapper.find("loader-stub");
|
|
||||||
|
|
||||||
expect(loader.attributes('class')).toContain("right");
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
it("Should return loader size in rem", async () => {
|
|
||||||
// Act
|
|
||||||
const wrapper = shallowMount(buttonSecondary, {
|
|
||||||
propsData: {
|
|
||||||
sizeInRem: 1,
|
|
||||||
loaderEnabled: true
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
// Assert
|
|
||||||
|
|
||||||
const label = wrapper.find("label");
|
|
||||||
|
|
||||||
wrapper.vm.displayComponent();
|
|
||||||
|
|
||||||
await nextTick();
|
|
||||||
|
|
||||||
const loader = wrapper.find("loader-stub");
|
|
||||||
|
|
||||||
expect(loader.attributes('style')).toContain("1rem");
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
@ -1,75 +0,0 @@
|
||||||
<template>
|
|
||||||
<button
|
|
||||||
:disabled="isDisabled"
|
|
||||||
:aria-disabled="isDisabled"
|
|
||||||
class="btn btn-secondary d-flex align-items-center py-3 px-4"
|
|
||||||
@click="displayComponent"
|
|
||||||
>
|
|
||||||
<span class="m-0">{{ this.buttonText }}</span>
|
|
||||||
<loader
|
|
||||||
class="ms-2"
|
|
||||||
v-if="display"
|
|
||||||
v-bind:style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }"
|
|
||||||
v-bind:class="[this.loaderColor, this.loaderPosition]"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import loader from "@/ux-components/loader/loader";
|
|
||||||
export default {
|
|
||||||
name: "buttonSecondary",
|
|
||||||
props: {
|
|
||||||
buttonText: String,
|
|
||||||
isDisabled: Boolean,
|
|
||||||
loaderColor: String,
|
|
||||||
loaderPosition: String,
|
|
||||||
sizeInRem: [Number, String],
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
display: false,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
displayComponent() {
|
|
||||||
this.display = true;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
loader,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.btn {
|
|
||||||
&.btn-secondary {
|
|
||||||
position: relative;
|
|
||||||
background: transparent;
|
|
||||||
border: 1px solid $blue;
|
|
||||||
border-radius: $border-radius-lg;
|
|
||||||
color: $blue;
|
|
||||||
transition: all 150ms linear;
|
|
||||||
&:hover {
|
|
||||||
color: $white;
|
|
||||||
@include blue-gradient;
|
|
||||||
}
|
|
||||||
&:focus, // Mouse, touch, stylus focus
|
|
||||||
&:focus-visible { // Keyboard focus for accessibility
|
|
||||||
outline: none;
|
|
||||||
box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $blue-700;
|
|
||||||
color: $white;
|
|
||||||
@include blue-gradient;
|
|
||||||
}
|
|
||||||
&:disabled {
|
|
||||||
background: transparent;
|
|
||||||
color: $gray !important;
|
|
||||||
height: 48px;
|
|
||||||
border: 1px solid $gray-300;
|
|
||||||
border-radius: $border-radius-lg;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in a new issue