Remove button-primary and button-secondary components.
This commit is contained in:
bmauger
parent
d504f9950f
commit
b7bb66c88e
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