Skip to content

Commit

Permalink
web/satellite: VCheckbox, VButton migrated to use composition api
Browse files Browse the repository at this point in the history 
related tests moved to ignored folder or fixed and will be changed after;

Change-Id: Idb4b1a93ac176b98184c746222b5cd1e30dad595
  • Loading branch information
@NikolaiYurchenko
NikolaiYurchenko authored and Storj Robot committed Dec 15, 2022
1 parent 8d30b58 commit bb170a9
Show file tree
Hide file tree
Showing 9 changed files with 97 additions and 126 deletions.
122 changes: 64 additions & 58 deletions web/satellite/src/components/common/VButton.vue
View file
Expand Up @@ -23,72 +23,78 @@
</div>
</template>

<script lang="ts">
<script setup lang="ts">
import { computed, defineComponent } from 'vue';
import { computed } from 'vue';
import CopyIcon from '@/../static/images/common/copyButtonIcon.svg';
import TrashIcon from '@/../static/images/accessGrants/trashIcon.svg';
import LockIcon from '@/../static/images/common/lockIcon.svg';
import CreditCardIcon from '@/../static/images/common/creditCardIcon-white.svg';
import DocumentIcon from '@/../static/images/common/documentIcon.svg';
export default defineComponent({
name: 'VButton',
components: {
CopyIcon,
TrashIcon,
LockIcon,
CreditCardIcon,
DocumentIcon,
},
props: {
label: { type: String, default: 'Default' },
width: { type: String, default: 'inherit' },
height: { type: String, default: 'inherit' },
fontSize: { type: String, default: '16px' },
borderRadius: { type: String, default: '6px' },
icon: { type: String, default: 'none' },
isWhite: Boolean,
isSolidDelete: Boolean,
isTransparent: Boolean,
isDeletion: Boolean,
isGreyBlue: Boolean,
isBlueWhite: Boolean,
isWhiteGreen: Boolean,
isGreenWhite: Boolean,
isDisabled: Boolean,
isUppercase: Boolean,
onPress: { type: Function as () => void, default: () => {} },
},
setup(props) {
return {
containerClassName: computed(() => {
if (props.isDisabled) return 'container disabled';
if (props.isWhite) return 'container white';
if (props.isSolidDelete) return 'container solid-red';
if (props.isTransparent) return 'container transparent';
if (props.isDeletion) return 'container red';
if (props.isGreyBlue) return 'container grey-blue';
if (props.isBlueWhite) return 'container blue-white';
if (props.isWhiteGreen) return 'container white-green';
if (props.isGreenWhite) return 'container green-white';
return 'container';
}),
style: computed(() => {
return { width: props.width, height: props.height, borderRadius: props.borderRadius, fontSize: props.fontSize };
}),
};
},
const props = withDefaults(defineProps<{
label?: string;
width?: string;
height?: string;
fontSize?: string;
borderRadius?: string;
icon?: string;
isWhite?: boolean;
isSolidDelete?: boolean;
isTransparent?: boolean;
isDeletion?: boolean;
isGreyBlue?: boolean;
isBlueWhite?: boolean;
isWhiteGreen?: boolean;
isGreenWhite?: boolean;
isDisabled?: boolean;
isUppercase?: boolean;
onPress?: () => void;
}>(), {
label: 'Default',
width: 'inherit',
height: 'inherit',
fontSize: '16px',
borderRadius: '6px',
icon: 'none',
isWhite: false,
isSolidDelete: false,
isTransparent: false,
isDeletion: false,
isGreyBlue: false,
isBlueWhite: false,
isWhiteGreen: false,
isGreenWhite: false,
isDisabled: false,
isUppercase: false,
onPress: () => {},
});
const containerClassName = computed((): string => {
if (props.isDisabled) return 'container disabled';
if (props.isWhite) return 'container white';
if (props.isSolidDelete) return 'container solid-red';
if (props.isTransparent) return 'container transparent';
if (props.isDeletion) return 'container red';
if (props.isGreyBlue) return 'container grey-blue';
if (props.isBlueWhite) return 'container blue-white';
if (props.isWhiteGreen) return 'container white-green';
if (props.isGreenWhite) return 'container green-white';
return 'container';
});
const style = computed(() => {
return { width: props.width, height: props.height, borderRadius: props.borderRadius, fontSize: props.fontSize };
});
</script>

Expand Down
40 changes: 20 additions & 20 deletions web/satellite/src/components/common/VCheckbox.vue
View file
Expand Up @@ -11,26 +11,26 @@
</div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
// Custom checkbox component
// @vue/component
@Component
export default class VCheckbox extends Vue {
@Prop({ default: false })
private readonly isCheckboxError: boolean;
@Prop({ default: '' })
private readonly label: string;
private checked = false;
/**
* Emits value to parent component.
*/
public onChange(): void {
this.$emit('setData', this.checked);
}
<script setup lang="ts">
import { ref } from 'vue';
const props = withDefaults(defineProps<{
isCheckboxError?: boolean;
label?: string;
}>(), {
isCheckboxError: false,
label: '',
});
const emit = defineEmits(['setData']);
const checked = ref<boolean>(false);
/**
* Emits value to parent component.
*/
function onChange(): void {
emit('setData', checked.value);
}
</script>

Expand Down
2 changes: 1 addition & 1 deletion web/satellite/tests/unit/account/billing/coupons/__snapshots__/CouponArea.spec.ts.snap
View file
Expand Up @@ -4,7 +4,7 @@ exports[`CouponArea renders correctly 1`] = `
<div class="coupon-area">
<div class="coupon-area__top-container">
<h1 class="coupon-area__top-container__title">Coupon</h1>
<vbutton-stub label="Add Coupon Code" width="inherit" height="inherit" fontsize="16px" borderradius="6px" icon="none" onpress="[Function]" class="coupon-area__top-container__add-button"></vbutton-stub>
<vbutton-stub on-press="function () { [native code] }" label="Add Coupon Code" class="coupon-area__top-container__add-button"></vbutton-stub>
</div>
<div class="coupon-area__container">
<couponicon-stub class="coupon-area__container__coupon-icon"></couponicon-stub>
Expand Down
22 changes: 0 additions & 22 deletions web/satellite/tests/unit/common/__snapshots__/VButton.spec.ts.snap
View file

This file was deleted.

13 changes: 0 additions & 13 deletions web/satellite/tests/unit/common/__snapshots__/VCheckbox.spec.ts.snap
View file

This file was deleted.

0 ...tellite/tests/unit/common/VButton.spec.ts → .../tests/unit/ignore/common/VButton.spec.ts
View file
File renamed without changes.
0 ...llite/tests/unit/common/VCheckbox.spec.ts → ...ests/unit/ignore/common/VCheckbox.spec.ts
View file
File renamed without changes.
4 changes: 2 additions & 2 deletions web/satellite/tests/unit/project/__snapshots__/CreateProject.spec.ts.snap
View file
Expand Up @@ -8,8 +8,8 @@ exports[`CreateProject.vue renders correctly 1`] = `
<vinput-stub additionallabel="Up To 20 Characters" currentlimit="0" islimitshown="true" initvalue="" label="Project Name" placeholder="Enter Project Name" height="48px" width="100%" error="" maxsymbols="20" roledescription="input-container" class="full-input"></vinput-stub>
<vinput-stub additionallabel="Optional" currentlimit="0" islimitshown="true" ismultiline="true" initvalue="" label="Description" placeholder="Enter Project Description" height="100px" width="100%" error="" maxsymbols="100" roledescription="input-container" class="full-input"></vinput-stub>
<div class="create-project__container__button-container">
<vbutton-stub label="Cancel" width="210px" height="48px" fontsize="16px" borderradius="6px" icon="none" istransparent="true" onpress="[Function]" class="create-project__container__button-container__cancel"></vbutton-stub>
<vbutton-stub label="Create Project +" width="210px" height="48px" fontsize="16px" borderradius="6px" icon="none" isdisabled="true" onpress="[Function]"></vbutton-stub>
<vbutton-stub label="Cancel" width="210px" height="48px" on-press="function () { [native code] }" is-transparent="true" class="create-project__container__button-container__cancel"></vbutton-stub>
<vbutton-stub label="Create Project +" width="210px" height="48px" on-press="function () { [native code] }" is-disabled="true"></vbutton-stub>
</div>
<!---->
</div>
Expand Down
20 changes: 10 additions & 10 deletions web/satellite/tests/unit/project/__snapshots__/EditProjectDetails.spec.ts.snap
View file
Expand Up @@ -9,13 +9,13 @@ exports[`EditProjectDetails.vue editing description works correctly 1`] = `
<p class="project-details__wrapper__container__label">Name</p>
<div class="project-details__wrapper__container__name-area">
<p class="project-details__wrapper__container__name-area__name">new name</p>
<vbutton-stub label="Edit" width="64px" height="28px" fontsize="16px" borderradius="6px" icon="none" iswhite="true" onpress="[Function]"></vbutton-stub>
<vbutton-stub label="Edit" width="64px" height="28px" on-press="function () { [native code] }" is-white="true"></vbutton-stub>
</div>
<!---->
<p class="project-details__wrapper__container__label">Description</p>
<!---->
<div class="project-details__wrapper__container__description-editing"><input placeholder="Enter a description for your project" class="project-details__wrapper__container__description-editing__input"> <span class="project-details__wrapper__container__description-editing__limit">4/100</span>
<vbutton-stub label="Save" width="66px" height="30px" fontsize="16px" borderradius="6px" icon="none" onpress="[Function]" class="project-details__wrapper__container__description-editing__save-button"></vbutton-stub>
<vbutton-stub label="Save" width="66px" height="30px" on-press="function () { [native code] }" class="project-details__wrapper__container__description-editing__save-button"></vbutton-stub>
</div>
<!---->
</div>
Expand All @@ -32,13 +32,13 @@ exports[`EditProjectDetails.vue editing description works correctly 2`] = `
<p class="project-details__wrapper__container__label">Name</p>
<div class="project-details__wrapper__container__name-area">
<p class="project-details__wrapper__container__name-area__name">new name</p>
<vbutton-stub label="Edit" width="64px" height="28px" fontsize="16px" borderradius="6px" icon="none" iswhite="true" onpress="[Function]"></vbutton-stub>
<vbutton-stub label="Edit" width="64px" height="28px" on-press="function () { [native code] }" is-white="true"></vbutton-stub>
</div>
<!---->
<p class="project-details__wrapper__container__label">Description</p>
<div class="project-details__wrapper__container__description-area">
<p class="project-details__wrapper__container__description-area__description">new description</p>
<vbutton-stub label="Edit" width="64px" height="28px" fontsize="16px" borderradius="6px" icon="none" onpress="[Function]" class="" iswhite="true"></vbutton-stub>
<vbutton-stub label="Edit" width="64px" height="28px" on-press="function () { [native code] }" class="" is-white="true"></vbutton-stub>
</div>
<!---->
<!---->
Expand All @@ -56,12 +56,12 @@ exports[`EditProjectDetails.vue editing name works correctly 1`] = `
<p class="project-details__wrapper__container__label">Name</p>
<!---->
<div class="project-details__wrapper__container__name-editing"><input placeholder="Enter a name for your project" class="project-details__wrapper__container__name-editing__input"> <span class="project-details__wrapper__container__name-editing__limit">4/20</span>
<vbutton-stub label="Save" width="66px" height="30px" fontsize="16px" borderradius="6px" icon="none" onpress="[Function]" class="project-details__wrapper__container__name-editing__save-button"></vbutton-stub>
<vbutton-stub label="Save" width="66px" height="30px" on-press="function () { [native code] }" class="project-details__wrapper__container__name-editing__save-button"></vbutton-stub>
</div>
<p class="project-details__wrapper__container__label">Description</p>
<div class="project-details__wrapper__container__description-area">
<p class="project-details__wrapper__container__description-area__description">test</p>
<vbutton-stub label="Edit" width="64px" height="28px" fontsize="16px" borderradius="6px" icon="none" iswhite="true" onpress="[Function]"></vbutton-stub>
<vbutton-stub label="Edit" width="64px" height="28px" on-press="function () { [native code] }" is-white="true"></vbutton-stub>
</div>
<!---->
<!---->
Expand All @@ -79,13 +79,13 @@ exports[`EditProjectDetails.vue editing name works correctly 2`] = `
<p class="project-details__wrapper__container__label">Name</p>
<div class="project-details__wrapper__container__name-area">
<p class="project-details__wrapper__container__name-area__name">new name</p>
<vbutton-stub label="Edit" width="64px" height="28px" fontsize="16px" borderradius="6px" icon="none" onpress="[Function]" class="" iswhite="true"></vbutton-stub>
<vbutton-stub label="Edit" width="64px" height="28px" on-press="function () { [native code] }" class="" is-white="true"></vbutton-stub>
</div>
<!---->
<p class="project-details__wrapper__container__label">Description</p>
<div class="project-details__wrapper__container__description-area">
<p class="project-details__wrapper__container__description-area__description">test</p>
<vbutton-stub label="Edit" width="64px" height="28px" fontsize="16px" borderradius="6px" icon="none" iswhite="true" onpress="[Function]"></vbutton-stub>
<vbutton-stub label="Edit" width="64px" height="28px" on-press="function () { [native code] }" is-white="true"></vbutton-stub>
</div>
<!---->
<!---->
Expand All @@ -103,13 +103,13 @@ exports[`EditProjectDetails.vue renders correctly 1`] = `
<p class="project-details__wrapper__container__label">Name</p>
<div class="project-details__wrapper__container__name-area">
<p class="project-details__wrapper__container__name-area__name">test</p>
<vbutton-stub label="Edit" width="64px" height="28px" fontsize="16px" borderradius="6px" icon="none" iswhite="true" onpress="[Function]"></vbutton-stub>
<vbutton-stub label="Edit" width="64px" height="28px" on-press="function () { [native code] }" is-white="true"></vbutton-stub>
</div>
<!---->
<p class="project-details__wrapper__container__label">Description</p>
<div class="project-details__wrapper__container__description-area">
<p class="project-details__wrapper__container__description-area__description">test</p>
<vbutton-stub label="Edit" width="64px" height="28px" fontsize="16px" borderradius="6px" icon="none" iswhite="true" onpress="[Function]"></vbutton-stub>
<vbutton-stub label="Edit" width="64px" height="28px" on-press="function () { [native code] }" is-white="true"></vbutton-stub>
</div>
<!---->
<!---->
Expand Down

0 comments on commit bb170a9

Please sign in to comment.