From d03bb876324e86edeb4d2c71bd7ae27d9cf1d44a Mon Sep 17 00:00:00 2001 From: gabaldon Date: Fri, 30 Aug 2024 12:12:27 +0200 Subject: [PATCH 1/8] feat: implement `WCard` and `WInput` components --- src/assets/svg/icon-right-arrow.svg | 6 + src/assets/svg/slashes.svg | 9 ++ src/components/{Button => }/AnimatedArrow.vue | 3 +- src/components/Button/WButton.spec.ts | 2 +- src/components/Button/WButton.vue | 2 +- src/components/Card/WCard.spec.ts | 52 +++++++ src/components/Card/WCard.stories.ts | 65 ++++++++ src/components/Card/WCard.ts | 7 + src/components/Card/WCard.vue | 146 ++++++++++++++++++ .../Card/__snapshots__/WCard.spec.ts.snap | 111 +++++++++++++ src/components/Input/WInput.spec.ts | 31 ++++ src/components/Input/WInput.stories.ts | 48 ++++++ src/components/Input/WInput.ts | 6 + src/components/Input/WInput.vue | 57 +++++++ .../Input/__snapshots__/WInput.spec.ts.snap | 34 ++++ src/components/RoundedIcon.vue | 21 +++ 16 files changed, 596 insertions(+), 4 deletions(-) create mode 100644 src/assets/svg/icon-right-arrow.svg create mode 100644 src/assets/svg/slashes.svg rename src/components/{Button => }/AnimatedArrow.vue (94%) create mode 100644 src/components/Card/WCard.spec.ts create mode 100644 src/components/Card/WCard.stories.ts create mode 100644 src/components/Card/WCard.ts create mode 100644 src/components/Card/WCard.vue create mode 100644 src/components/Card/__snapshots__/WCard.spec.ts.snap create mode 100644 src/components/Input/WInput.spec.ts create mode 100644 src/components/Input/WInput.stories.ts create mode 100644 src/components/Input/WInput.ts create mode 100644 src/components/Input/WInput.vue create mode 100644 src/components/Input/__snapshots__/WInput.spec.ts.snap create mode 100644 src/components/RoundedIcon.vue diff --git a/src/assets/svg/icon-right-arrow.svg b/src/assets/svg/icon-right-arrow.svg new file mode 100644 index 0000000..4d78b73 --- /dev/null +++ b/src/assets/svg/icon-right-arrow.svg @@ -0,0 +1,6 @@ + + + \ No newline at end of file diff --git a/src/assets/svg/slashes.svg b/src/assets/svg/slashes.svg new file mode 100644 index 0000000..8505ca2 --- /dev/null +++ b/src/assets/svg/slashes.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/Button/AnimatedArrow.vue b/src/components/AnimatedArrow.vue similarity index 94% rename from src/components/Button/AnimatedArrow.vue rename to src/components/AnimatedArrow.vue index 583c208..fe81a5c 100644 --- a/src/components/Button/AnimatedArrow.vue +++ b/src/components/AnimatedArrow.vue @@ -7,9 +7,8 @@ + + + diff --git a/src/components/Card/__snapshots__/WCard.spec.ts.snap b/src/components/Card/__snapshots__/WCard.spec.ts.snap new file mode 100644 index 0000000..1ff8a5c --- /dev/null +++ b/src/components/Card/__snapshots__/WCard.spec.ts.snap @@ -0,0 +1,111 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`WCard > base 1`] = ` +
+
+ + +
+ +
+`; + +exports[`WCard > icon 1`] = ` +
+ +
+
+
+ + + WIcon + + +
+
+
+

+ Custom title +

+
+
+

+ Custom description +

+ + + + + + +
+
+`; diff --git a/src/components/Input/WInput.spec.ts b/src/components/Input/WInput.spec.ts new file mode 100644 index 0000000..b5184f6 --- /dev/null +++ b/src/components/Input/WInput.spec.ts @@ -0,0 +1,31 @@ +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' +import WInput from './WInput.vue' +import { InputType } from './WInput' + +describe('WInput', () => { + it('base', () => { + const wrapper = mount(WInput, { + props: { + type: InputType.base, + contentType: 'number', + placeholder: 'Amount' + }, + }) + + expect(wrapper.element).toMatchSnapshot() + }) + + it('action', () => { + const wrapper = mount(WInput, { + props: { + type: InputType.action, + contentType: 'email', + placeholder: 'email@mail.com' + }, + }) + + expect(wrapper.element).toMatchSnapshot() + }) +}) diff --git a/src/components/Input/WInput.stories.ts b/src/components/Input/WInput.stories.ts new file mode 100644 index 0000000..e35ddeb --- /dev/null +++ b/src/components/Input/WInput.stories.ts @@ -0,0 +1,48 @@ +import type { Meta, StoryObj } from '@storybook/vue3' +import WInput from './WInput.vue' +import { InputType, inputTypes } from './WInput' + +const meta: any = { + title: 'Example/WInput', + component: WInput, + tags: ['autodocs'], + argTypes: { + type: { control: 'select', options: inputTypes } + }, + args: {} +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Base: Story = { + render: (args: any) => ({ + components: { WInput }, + setup() { + return { args } + }, + template: `WInput` + }), + args: { + type: InputType.base, + contentType: 'number' + } +} + +export const Action: Story = { + parameters: { + backgrounds: { default: 'grey' } + }, + render: (args: any) => ({ + components: { WInput }, + setup() { + return { args } + }, + template: `WInput` + }), + args: { + type: InputType.action, + placeholder: 'email@mail.com', + contentType: 'email' + } +} diff --git a/src/components/Input/WInput.ts b/src/components/Input/WInput.ts new file mode 100644 index 0000000..7b12f42 --- /dev/null +++ b/src/components/Input/WInput.ts @@ -0,0 +1,6 @@ +export enum InputType { + base = 'base', + action = 'action', +} + +export const inputTypes = Object.values(InputType) diff --git a/src/components/Input/WInput.vue b/src/components/Input/WInput.vue new file mode 100644 index 0000000..4ce5b58 --- /dev/null +++ b/src/components/Input/WInput.vue @@ -0,0 +1,57 @@ + + + diff --git a/src/components/Input/__snapshots__/WInput.spec.ts.snap b/src/components/Input/__snapshots__/WInput.spec.ts.snap new file mode 100644 index 0000000..fb52d35 --- /dev/null +++ b/src/components/Input/__snapshots__/WInput.spec.ts.snap @@ -0,0 +1,34 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`WInput > action 1`] = ` +
+ + +
+`; + +exports[`WInput > base 1`] = ` +
+ + +
+`; diff --git a/src/components/RoundedIcon.vue b/src/components/RoundedIcon.vue new file mode 100644 index 0000000..fb6363a --- /dev/null +++ b/src/components/RoundedIcon.vue @@ -0,0 +1,21 @@ + + + + \ No newline at end of file From 5194c445345ded7db13bde565037c0ee66f6f67c Mon Sep 17 00:00:00 2001 From: gabaldon Date: Tue, 3 Sep 2024 18:04:34 +0200 Subject: [PATCH 2/8] feat: export card and input components --- src/index.ts | 22 +++++++--------------- 1 file changed, 7 insertions(+), 15 deletions(-) diff --git a/src/index.ts b/src/index.ts index 1142a92..953edf2 100644 --- a/src/index.ts +++ b/src/index.ts @@ -3,6 +3,7 @@ import './assets/main.css' import WButton from './components/Button/WButton.vue' export { buttonTypes } from './components/Button/WButton' +import WCard from './components/Card/WCard.vue' import WEmptyState from './components/EmptyState/WEmptyState.vue' import WFooter from './components/Footer/WFooter.vue' @@ -15,6 +16,7 @@ import WIconRounded from './components/IconRounded/WIconRounded.vue' import WIconText from './components/IconText/WIconText.vue' export { iconTextPositions } from './components/IconText/WIconText' +import WInput from './components/Input/WInput.vue' import WLink from './components/Link/WLink.vue' import WLoadingPlaceholder from './components/LoadingPlaceholder/WLoadingPlaceholder.vue' @@ -30,28 +32,16 @@ import WSpinner from './components/Spinner/WSpinner.vue' import WSocialsBar from './components/SocialsBar/WSocialsBar.vue' export { SOCIAL_URLS } from './components/SocialsBar/WSocialsBar' -export { - WButton, - WEmptyState, - WFooter, - WIcon, - WIconRounded, - WIconText, - WLink, - WLoadingPlaceholder, - WNavbar, - WPagination, - WSection, - WSocialsBar, - WSpinner -} +export { WButton, WCard, WEmptyState, WFooter, WIcon, WIconText, WIconRounded, WInput, WLink, WLoadingPlaceholder, WNavbar, WPagination, WSection, WSocialsBar, WSpinner } export type WButton = typeof WButton +export type WCard = typeof WCard export type WEmptyState = typeof WEmptyState export type WFooter = typeof WFooter export type WIcon = typeof WIcon export type WIconRounded = typeof WIconRounded export type WIconText = typeof WIconText +export type WInput = typeof WInput export type WLink = typeof WLink export type WLoadingPlaceholder = typeof WLoadingPlaceholder export type WNavbar = typeof WNavbar @@ -65,11 +55,13 @@ import type { App } from 'vue' const WComponents = { install(app: App) { app.component('WButton', WButton) + app.component('WCard', WCard) app.component('WEmptyState', WEmptyState) app.component('WFooter', WFooter) app.component('WIcon', WIcon) app.component('WIconRounded', WIconRounded) app.component('WIconText', WIconText) + app.component('WInput', WInput) app.component('WLink', WLink) app.component('WLoadingPlaceholder', WLoadingPlaceholder) app.component('WNavbar', WNavbar) From 035b5270038bd90e9f68c55bf3c5f857599e2a55 Mon Sep 17 00:00:00 2001 From: gabaldon Date: Wed, 4 Sep 2024 11:02:12 +0200 Subject: [PATCH 3/8] refactor: update enums --- src/components/Card/WCard.spec.ts | 6 +++--- src/components/Card/WCard.stories.ts | 2 +- src/components/Card/WCard.ts | 6 +++--- src/components/Card/WCard.vue | 8 ++++---- src/components/Input/WInput.spec.ts | 4 ++-- src/components/Input/WInput.stories.ts | 4 ++-- src/components/Input/WInput.ts | 4 ++-- src/components/Input/WInput.vue | 5 ++--- 8 files changed, 19 insertions(+), 20 deletions(-) diff --git a/src/components/Card/WCard.spec.ts b/src/components/Card/WCard.spec.ts index 2f2fa9f..c19685f 100644 --- a/src/components/Card/WCard.spec.ts +++ b/src/components/Card/WCard.spec.ts @@ -9,7 +9,7 @@ describe('WCard', () => { it('base', () => { const wrapper = mount(WCard, { props: { - type: CardType.base + type: CardType.Base }, slots: { default: 'Button' @@ -21,7 +21,7 @@ describe('WCard', () => { it('icon', () => { const wrapper = mount(WCard, { props: { - type: CardType.icon, + type: CardType.Icon, title: 'Custom title', description: 'Custom description', url: '#url', @@ -38,7 +38,7 @@ describe('WCard', () => { it('link', () => { const wrapper = mount(WCard, { props: { - type: CardType.link, + type: CardType.Link, title: 'Custom link title', }, slots: { diff --git a/src/components/Card/WCard.stories.ts b/src/components/Card/WCard.stories.ts index 6c9ad23..7e1ff62 100644 --- a/src/components/Card/WCard.stories.ts +++ b/src/components/Card/WCard.stories.ts @@ -10,7 +10,7 @@ const meta: any = { type: { control: 'select', options: ['base', 'icon', 'link'] } }, args: { - type: CardType.base + type: CardType.Base } } satisfies Meta diff --git a/src/components/Card/WCard.ts b/src/components/Card/WCard.ts index 829c32f..a67b2f0 100644 --- a/src/components/Card/WCard.ts +++ b/src/components/Card/WCard.ts @@ -1,7 +1,7 @@ export enum CardType { - base = 'base', - icon = 'icon', - link = 'link', + Base = 'base', + Icon = 'icon', + Link = 'link', } export const cardTypes = Object.values(CardType) \ No newline at end of file diff --git a/src/components/Card/WCard.vue b/src/components/Card/WCard.vue index ae84878..a1dfc44 100644 --- a/src/components/Card/WCard.vue +++ b/src/components/Card/WCard.vue @@ -61,7 +61,7 @@ const hover = ref(false) const props = defineProps({ type: { type: String as PropType, - default: CardType.base, + default: CardType.Base, validator(value: CardType) { return cardTypes.includes(value) } @@ -83,9 +83,9 @@ const props = defineProps({ required: false, }, }) -const isIconCard = computed(() => props.type === CardType.icon) -const isLinkCard = computed(() => props.type === CardType.link) -const isBaseCard = computed(() => props.type === CardType.base) +const isIconCard = computed(() => props.type === CardType.Icon) +const isLinkCard = computed(() => props.type === CardType.Link) +const isBaseCard = computed(() => props.type === CardType.Base) function toggleHover() { hover.value = !hover.value } diff --git a/src/components/Input/WInput.spec.ts b/src/components/Input/WInput.spec.ts index b5184f6..d5cf0c8 100644 --- a/src/components/Input/WInput.spec.ts +++ b/src/components/Input/WInput.spec.ts @@ -8,7 +8,7 @@ describe('WInput', () => { it('base', () => { const wrapper = mount(WInput, { props: { - type: InputType.base, + type: InputType.Base, contentType: 'number', placeholder: 'Amount' }, @@ -20,7 +20,7 @@ describe('WInput', () => { it('action', () => { const wrapper = mount(WInput, { props: { - type: InputType.action, + type: InputType.Action, contentType: 'email', placeholder: 'email@mail.com' }, diff --git a/src/components/Input/WInput.stories.ts b/src/components/Input/WInput.stories.ts index e35ddeb..1fca744 100644 --- a/src/components/Input/WInput.stories.ts +++ b/src/components/Input/WInput.stories.ts @@ -24,7 +24,7 @@ export const Base: Story = { template: `WInput` }), args: { - type: InputType.base, + type: InputType.Base, contentType: 'number' } } @@ -41,7 +41,7 @@ export const Action: Story = { template: `WInput` }), args: { - type: InputType.action, + type: InputType.Action, placeholder: 'email@mail.com', contentType: 'email' } diff --git a/src/components/Input/WInput.ts b/src/components/Input/WInput.ts index 7b12f42..6195f15 100644 --- a/src/components/Input/WInput.ts +++ b/src/components/Input/WInput.ts @@ -1,6 +1,6 @@ export enum InputType { - base = 'base', - action = 'action', + Base = 'base', + Action = 'action', } export const inputTypes = Object.values(InputType) diff --git a/src/components/Input/WInput.vue b/src/components/Input/WInput.vue index 4ce5b58..e4af220 100644 --- a/src/components/Input/WInput.vue +++ b/src/components/Input/WInput.vue @@ -26,7 +26,7 @@ import { inputTypes, InputType } from './WInput' const props = defineProps({ type: { type: String as PropType, - default: InputType.base, + default: InputType.Base, validator(value: InputType) { return inputTypes.includes(value) } @@ -49,9 +49,8 @@ const props = defineProps({ } }) const emit = defineEmits(['action']) -const isActionInput = computed(() => props.type === InputType.action) +const isActionInput = computed(() => props.type === InputType.Action) function action() { - console.log('emit action') emit('action') } From f3a18222dee1e6969d0d7d93ce22d7fd7a2c5c44 Mon Sep 17 00:00:00 2001 From: gabaldon Date: Wed, 4 Sep 2024 11:14:36 +0200 Subject: [PATCH 4/8] fix: add color to arrow in card --- src/components/AnimatedArrow.vue | 2 +- src/components/Card/WCard.vue | 2 +- src/components/Card/__snapshots__/WCard.spec.ts.snap | 3 ++- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/AnimatedArrow.vue b/src/components/AnimatedArrow.vue index fe81a5c..bae5543 100644 --- a/src/components/AnimatedArrow.vue +++ b/src/components/AnimatedArrow.vue @@ -7,7 +7,7 @@ + \ No newline at end of file diff --git a/src/components/Card/WCard.spec.ts b/src/components/Card/WCard.spec.ts index 3aeb719..a196a47 100644 --- a/src/components/Card/WCard.spec.ts +++ b/src/components/Card/WCard.spec.ts @@ -3,7 +3,7 @@ import { describe, it, expect } from 'vitest' import { mount } from '@vue/test-utils' import WCard from './WCard.vue' import { CardType } from './WCard' -import AnimatedArrow from '../AnimatedArrow.vue' +import AnimatedArrow from '../AnimatedArrow/AnimatedArrow.vue' describe('WCard', () => { it('base', () => { diff --git a/src/components/Card/WCard.stories.ts b/src/components/Card/WCard.stories.ts index 492e965..80c0b53 100644 --- a/src/components/Card/WCard.stories.ts +++ b/src/components/Card/WCard.stories.ts @@ -23,10 +23,11 @@ export const Base: Story = { setup() { return { args } }, - template: `` + template: `` }), args: { - type: 'base' + type: 'base', + title: 'Lorem ipsum' } } @@ -39,7 +40,20 @@ export const Icon: Story = { setup() { return { args } }, - template: `` + template: `` }), args: { type: 'icon', @@ -56,10 +70,10 @@ export const Link: Story = { setup() { return { args } }, - template: `` + template: `` }), args: { type: 'link', - title: 'Custom link title', + title: 'Lorem ipsum', } } diff --git a/src/components/Card/WCard.vue b/src/components/Card/WCard.vue index 2829d12..6f4f0f5 100644 --- a/src/components/Card/WCard.vue +++ b/src/components/Card/WCard.vue @@ -8,30 +8,26 @@ @mouseenter="toggleHover" @mouseleave="toggleHover" > -
-
-

- {{ title }} -

- -
-
- -
+ + + -
- + + +
-
- +
+ Icon - +

{{ title }} @@ -47,16 +43,16 @@ {{ urlLabel }}

-
diff --git a/src/components/IconRounded/__snapshots__/WIconRounded.spec.ts.snap b/src/components/IconRounded/__snapshots__/WIconRounded.spec.ts.snap index 811a4fc..6c425b8 100644 --- a/src/components/IconRounded/__snapshots__/WIconRounded.spec.ts.snap +++ b/src/components/IconRounded/__snapshots__/WIconRounded.spec.ts.snap @@ -2,7 +2,7 @@ exports[`WIconRounded > renders properly 1`] = `
diff --git a/src/components/IconText/__snapshots__/WIconText.spec.ts.snap b/src/components/IconText/__snapshots__/WIconText.spec.ts.snap index 3e05f39..d725568 100644 --- a/src/components/IconText/__snapshots__/WIconText.spec.ts.snap +++ b/src/components/IconText/__snapshots__/WIconText.spec.ts.snap @@ -40,7 +40,7 @@ exports[`WIconText > renders properly ROUNDED RIGHT 1`] = ` target="_blank" >
diff --git a/src/components/RoundedIcon.vue b/src/components/RoundedIcon.vue deleted file mode 100644 index fb6363a..0000000 --- a/src/components/RoundedIcon.vue +++ /dev/null @@ -1,21 +0,0 @@ - - - - \ No newline at end of file From 6e8fbd7fc73e1d519b85a7108fbad8a041e52595 Mon Sep 17 00:00:00 2001 From: gabaldon Date: Wed, 4 Sep 2024 17:20:46 +0200 Subject: [PATCH 7/8] feat: allow custom header in basecard --- src/components/Card/BaseCard.vue | 11 ++++++++--- src/components/Card/WCard.stories.ts | 3 +-- src/components/Card/WCard.vue | 7 ++++--- src/components/IconRounded/WIconRounded.vue | 10 +++++++--- 4 files changed, 20 insertions(+), 11 deletions(-) diff --git a/src/components/Card/BaseCard.vue b/src/components/Card/BaseCard.vue index 48352c5..1ea9440 100644 --- a/src/components/Card/BaseCard.vue +++ b/src/components/Card/BaseCard.vue @@ -2,14 +2,19 @@
-
+

{{ title }}

+
+ +
- +
+ +
@@ -33,6 +34,9 @@ const containerSize = computed(() => `${props.size}px`) } .icon-container { - @apply min-h-[v-bind(containerSize)] min-w-[v-bind(containerSize)] hover:bg-[v-bind(hoverBgColor)]; + @apply min-h-[v-bind(containerSize)] min-w-[v-bind(containerSize)]; +} +.hover-effect { + @apply hover:bg-wit-blue-300 } From d802f72b27e9534a42fd36c79ca04b33924dcf79 Mon Sep 17 00:00:00 2001 From: gabaldon Date: Wed, 4 Sep 2024 17:42:03 +0200 Subject: [PATCH 8/8] fix(style): run format --- src/components/Card/BaseCard.vue | 37 +++++++++---------- src/components/Card/WCard.spec.ts | 8 ++-- src/components/Card/WCard.stories.ts | 7 ++-- src/components/Card/WCard.ts | 4 +- src/components/Card/WCard.vue | 14 +++---- .../Card/__snapshots__/WCard.spec.ts.snap | 22 +++++------ .../IconRounded/WIconRounded.stories.ts | 2 +- src/components/IconRounded/WIconRounded.vue | 4 +- .../__snapshots__/WIconRounded.spec.ts.snap | 2 +- .../__snapshots__/WIconText.spec.ts.snap | 2 +- src/components/Input/WInput.spec.ts | 4 +- src/components/Input/WInput.ts | 2 +- src/components/Input/WInput.vue | 11 ++++-- .../pagination/WPagination.stories.ts | 2 +- src/index.ts | 19 +++++++++- 15 files changed, 79 insertions(+), 61 deletions(-) diff --git a/src/components/Card/BaseCard.vue b/src/components/Card/BaseCard.vue index 1ea9440..9bfe20d 100644 --- a/src/components/Card/BaseCard.vue +++ b/src/components/Card/BaseCard.vue @@ -1,32 +1,30 @@