From 4b90c72d294a00b89c27fcfaa949bed2b07eacf2 Mon Sep 17 00:00:00 2001 From: Roman4437 Date: Tue, 19 Sep 2023 15:49:53 +0200 Subject: [PATCH 1/5] va-button stories and bug fixes --- .../components/va-button/VaButton.demo.vue | 295 -------------- .../components/va-button/VaButton.stories.ts | 363 +++++++++++++++++- .../ui/src/components/va-button/VaButton.vue | 50 ++- .../va-button/hooks/useButtonTextColor.ts | 2 +- packages/ui/src/composables/useSize.ts | 50 ++- .../ui/src/services/global-config/types.ts | 2 + 6 files changed, 421 insertions(+), 341 deletions(-) delete mode 100644 packages/ui/src/components/va-button/VaButton.demo.vue diff --git a/packages/ui/src/components/va-button/VaButton.demo.vue b/packages/ui/src/components/va-button/VaButton.demo.vue deleted file mode 100644 index b480214316..0000000000 --- a/packages/ui/src/components/va-button/VaButton.demo.vue +++ /dev/null @@ -1,295 +0,0 @@ - - - - - diff --git a/packages/ui/src/components/va-button/VaButton.stories.ts b/packages/ui/src/components/va-button/VaButton.stories.ts index 1e507c4ec6..27b53a90fa 100644 --- a/packages/ui/src/components/va-button/VaButton.stories.ts +++ b/packages/ui/src/components/va-button/VaButton.stories.ts @@ -1,12 +1,367 @@ -import { defineComponent } from 'vue' -import VaButton from './VaButton.demo.vue' +import { VaButton } from './' +import { userEvent } from '../../../.storybook/interaction-utils/userEvent' +import { within } from '@storybook/testing-library' +import { expect } from '@storybook/jest' export default { title: 'VaButton', component: VaButton, + tags: ['autodocs'], } -export const Default = defineComponent({ +export const Default = () => ({ components: { VaButton }, - template: '', + template: ` + + Button + + `, }) + +export const Color = () => ({ + components: { VaButton }, + template: ` + + Button + + `, +}) + +export const Gradient = () => ({ + components: { VaButton }, + template: ` + + Button + + `, +}) + +export const BackgroundOpacity = () => ({ + components: { VaButton }, + template: ` + + Button + + `, +}) + +export const TextColor = () => ({ + components: { VaButton }, + template: ` + + Button + + `, +}) + +export const TextOpacity = () => ({ + components: { VaButton }, + template: ` + + Button + + `, +}) + +export const BorderColor = () => ({ + components: { VaButton }, + template: ` + + Button + + `, +}) + +export const Disabled = () => ({ + components: { VaButton }, + template: ` + + Button + + `, +}) + +export const Plain = () => ({ + components: { VaButton }, + template: ` + + Button + + `, +}) + +export const Round = () => ({ + components: { VaButton }, + template: ` + + Button + + `, +}) + +export const Block = () => ({ + components: { VaButton }, + template: ` + + Button + + `, +}) + +export const Icon = () => ({ + components: { VaButton }, + template: ` + + Button + + `, +}) + +export const IconRight = () => ({ + components: { VaButton }, + template: ` + + Button + + `, +}) + +export const IconColor = () => ({ + components: { VaButton }, + template: ` + + Button + + `, +}) + +export const Loading = () => ({ + components: { VaButton }, + template: ` + + Button + + `, +}) + +export const Size = () => ({ + components: { VaButton }, + template: ` + [small] + + Button + + [medium] + + Button + + [large] + + Button + + `, +}) + +export const HoverBehavior = () => ({ + components: { VaButton }, + template: ` + [mask] + + Button + + [opacity] + + Button + + `, +}) + +export const HoverMaskColor = () => ({ + components: { VaButton }, + template: ` + + Button + + `, +}) + +export const HoverOpacity = () => ({ + components: { VaButton }, + template: ` + + Button + + `, +}) + +export const PressedBehavior = () => ({ + components: { VaButton }, + template: ` + [mask] + + Button + + [opacity] + + Button + + `, +}) + +export const PressedMaskColor = () => ({ + components: { VaButton }, + template: ` + + Button + + `, +}) + +export const PressedOpacity = () => ({ + components: { VaButton }, + template: ` + + Button + + `, +}) + +export const Href = () => ({ + components: { VaButton }, + template: ` + + Button + + `, +}) + +export const To = () => ({ + components: { VaButton }, + template: ` + + Button + + `, +}) + +export const SizesConfig = () => ({ + components: { VaButton }, + template: ` + [small: 16px] + + Button + + [medium: 24px] + + Button + + [large: 32px] + + Button + + `, +}) + +export const FontSizesConfig = () => ({ + components: { VaButton }, + template: ` + [small: 0.5rem] + + Button + + [medium: 0.75rem] + + Button + + [large: 1rem] + + Button + + `, +}) + +export const ClickEvent = () => ({ + components: { VaButton }, + data: () => ({ clicked: false }), + template: ` + + Button + + [Clicked: {{ clicked }}] + `, +}) + +ClickEvent.play = async ({ canvasElement, step }) => { + const canvas = within(canvasElement) + const clickState = canvas.getByTestId("click-event") + + await step( 'True on click', async () => { + const button = document.querySelector('[type="button"]') as HTMLElement + + await userEvent.click(button) + expect(clickState.innerText).toEqual('[Clicked: true]') + }) +} + +export const AppendSlot = () => ({ + components: { VaButton }, + template: ` + + + Button + + `, +}) + +export const PrependSlot = () => ({ + components: { VaButton }, + template: ` + + + Button + + `, +}) + +export const LoadingSlot = () => ({ + components: { VaButton }, + template: ` + + + button + + `, +}) \ No newline at end of file diff --git a/packages/ui/src/components/va-button/VaButton.vue b/packages/ui/src/components/va-button/VaButton.vue index 53bd888a70..1b6cdc77fa 100644 --- a/packages/ui/src/components/va-button/VaButton.vue +++ b/packages/ui/src/components/va-button/VaButton.vue @@ -32,20 +32,23 @@ /> - + @@ -114,7 +117,7 @@ export default defineComponent({ const colorComputed = computed(() => getColor(props.color)) // loader size - const { sizeComputed } = useSize(props) + const { sizeComputed, fontSizeComputed } = useSize(props, 'VaButton') const loaderSizeComputed = computed(() => { const size = /([0-9]*)(px)/.exec(sizeComputed.value) as null | [string, string, string] return size ? `${+size[1] / 2}${size[2]}` : sizeComputed.value @@ -178,6 +181,8 @@ export default defineComponent({ return { button, tagComputed, + fontSizeComputed, + sizeComputed, computedClass, computedStyle, textColorComputed, @@ -214,19 +219,22 @@ export default defineComponent({ box-shadow: var(--va-button-box-shadow); font-family: var(--va-font-family); font-weight: var(--va-button-font-weight); + font-size: v-bind(fontSizeComputed); text-decoration: none; text-transform: initial; transition: var(--va-button-transition); box-sizing: border-box; cursor: var(--va-button-cursor); + min-width: v-bind(sizeComputed); + height: v-bind(sizeComputed); z-index: 0; &::after, &::before { content: ''; position: absolute; - width: 100%; height: 100%; + width: 100%; border-radius: inherit; left: 0; top: 0; @@ -258,11 +266,8 @@ export default defineComponent({ line-height: var(--va-button-sm-line-height); border-radius: var(--va-button-sm-border-radius); letter-spacing: var(--va-button-sm-letter-spacing); - min-height: var(--va-button-sm-size); - min-width: var(--va-button-sm-size); .va-button__content { - font-size: var(--va-button-sm-font-size); padding: var(--va-button-sm-content-py) var(--va-button-sm-content-px); } @@ -306,13 +311,9 @@ export default defineComponent({ line-height: var(--va-button-line-height); border-radius: var(--va-button-border-radius); letter-spacing: var(--va-button-letter-spacing); - min-height: var(--va-button-size); - min-width: var(--va-button-size); .va-button__content { - font-size: var(--va-button-font-size); padding: var(--va-button-content-py) var(--va-button-content-px); - line-height: var(--va-button-line-height); } // set icons the same size as text @@ -355,11 +356,8 @@ export default defineComponent({ line-height: var(--va-button-lg-line-height); border-radius: var(--va-button-lg-border-radius); letter-spacing: var(--va-button-lg-letter-spacing); - min-height: var(--va-button-lg-size); - min-width: var(--va-button-lg-size); .va-button__content { - font-size: var(--va-button-lg-font-size); padding: var(--va-button-lg-content-py) var(--va-button-lg-content-px); } diff --git a/packages/ui/src/components/va-button/hooks/useButtonTextColor.ts b/packages/ui/src/components/va-button/hooks/useButtonTextColor.ts index d3cd2f2608..830bea87af 100644 --- a/packages/ui/src/components/va-button/hooks/useButtonTextColor.ts +++ b/packages/ui/src/components/va-button/hooks/useButtonTextColor.ts @@ -96,7 +96,7 @@ export const useButtonTextColor: UseButtonTextColor = ( return computed(() => { const defaultColorStyles = { - color: textColorComputed.value, + color: colorToRgba(textColorComputed.value, getOpacity(props.textOpacity)), background: 'transparent', } diff --git a/packages/ui/src/composables/useSize.ts b/packages/ui/src/composables/useSize.ts index ac2d9eb8b8..c4e32c4638 100644 --- a/packages/ui/src/composables/useSize.ts +++ b/packages/ui/src/composables/useSize.ts @@ -1,23 +1,43 @@ import { computed, getCurrentInstance, PropType } from 'vue' -import { useGlobalConfig, SizeConfig } from '../services/global-config/global-config' +import { useGlobalConfig, SizeConfig, SizesConfig } from '../services/global-config/global-config' import type { VuesticComponentName } from '../services/vue-plugin/types/components' -export const sizesConfig: SizeConfig = { - defaultSize: 48, - sizes: { - small: 32, - medium: 48, - large: 64, +export const sizesConfig: SizesConfig = { + default: { + defaultSize: 48, + sizes: { + small: 32, + medium: 48, + large: 64, + }, }, + VaButton: { + defaultSize: 36, + sizes: { + small: 24, + medium: 36, + large: 48, + }, + } } -export const fontSizesConfig: SizeConfig = { - defaultSize: 1, - sizes: { - small: 0.75, - medium: 1, - large: 1.25, +export const fontSizesConfig: SizesConfig = { + default: { + defaultSize: 1, + sizes: { + small: 0.75, + medium: 1, + large: 1.25, + }, + }, + VaButton: { + defaultSize: 1, + sizes: { + small: 0.8125, + medium: 1, + large: 1.05, + }, }, } @@ -44,12 +64,12 @@ export const useSizeProps = { sizesConfig: { type: Object as PropType>, - default: () => sizesConfig, + default: () => sizesConfig[getCurrentInstance()?.type.name!] ?? sizesConfig['default'], }, fontSizesConfig: { type: Object as PropType>, - default: () => fontSizesConfig, + default: () => fontSizesConfig[getCurrentInstance()?.type.name!] ?? fontSizesConfig['default'], }, } diff --git a/packages/ui/src/services/global-config/types.ts b/packages/ui/src/services/global-config/types.ts index ed6e974be8..a11d932b5b 100644 --- a/packages/ui/src/services/global-config/types.ts +++ b/packages/ui/src/services/global-config/types.ts @@ -28,6 +28,8 @@ export type SizeConfig = { sizes?: { [sizeName: string]: number | string }, } +export type SizesConfig = { [key: string]: SizeConfig } + export type GlobalConfigUpdater = (config: T) => T; export type { ColorConfig, From 9161f7cc5795b173dfab8af5dd42ab798dddf01d Mon Sep 17 00:00:00 2001 From: Yauheni Prakopchyk Date: Thu, 21 Sep 2023 15:07:34 +0400 Subject: [PATCH 2/5] fix: small va-button story update --- .../components/va-button/VaButton.stories.ts | 55 ++++++++++++------- .../ui/src/components/va-button/VaButton.vue | 2 +- packages/ui/src/composables/useSize.ts | 6 +- 3 files changed, 40 insertions(+), 23 deletions(-) diff --git a/packages/ui/src/components/va-button/VaButton.stories.ts b/packages/ui/src/components/va-button/VaButton.stories.ts index 27b53a90fa..5c87bbef64 100644 --- a/packages/ui/src/components/va-button/VaButton.stories.ts +++ b/packages/ui/src/components/va-button/VaButton.stories.ts @@ -96,6 +96,8 @@ export const Round = () => ({ Button +   + `, }) @@ -125,12 +127,18 @@ export const IconRight = () => ({ `, }) +export const IconOnly = () => ({ + components: { VaButton }, + template: ` + + `, +}) export const IconColor = () => ({ components: { VaButton }, template: ` - Button @@ -191,7 +199,7 @@ export const HoverMaskColor = () => ({ export const HoverOpacity = () => ({ components: { VaButton }, template: ` - @@ -226,7 +234,7 @@ export const PressedMaskColor = () => ({ export const PressedOpacity = () => ({ components: { VaButton }, template: ` - @@ -257,21 +265,21 @@ export const SizesConfig = () => ({ components: { VaButton }, template: ` [small: 16px] - Button [medium: 24px] - Button [large: 32px] - @@ -282,24 +290,33 @@ export const SizesConfig = () => ({ export const FontSizesConfig = () => ({ components: { VaButton }, + data: () => ({ + fontSizeConfig: { defaultSize: 0.75, sizes: { small: 0.5, medium: 0.75, large: 1 } }, + }), template: ` + [default: 0.75rem] + + Button + [small: 0.5rem] - Button [medium: 0.75rem] - Button [large: 1rem] - Button @@ -314,19 +331,19 @@ export const ClickEvent = () => ({ Button - [Clicked: {{ clicked }}] +

[Clicked: {{ clicked }}]

`, }) ClickEvent.play = async ({ canvasElement, step }) => { const canvas = within(canvasElement) - const clickState = canvas.getByTestId("click-event") + const clickState = canvas.getByTestId('clicked') - await step( 'True on click', async () => { + await step('True on click', async () => { const button = document.querySelector('[type="button"]') as HTMLElement - + await userEvent.click(button) - expect(clickState.innerText).toEqual('[Clicked: true]') + expect(clickState.innerText).toEqual('true') }) } @@ -364,4 +381,4 @@ export const LoadingSlot = () => ({ button `, -}) \ No newline at end of file +}) diff --git a/packages/ui/src/components/va-button/VaButton.vue b/packages/ui/src/components/va-button/VaButton.vue index 1b6cdc77fa..4508340491 100644 --- a/packages/ui/src/components/va-button/VaButton.vue +++ b/packages/ui/src/components/va-button/VaButton.vue @@ -34,7 +34,7 @@