From 96be1a9f0e185abb968faa84fac97c71956c302d Mon Sep 17 00:00:00 2001 From: Carangeot Date: Fri, 12 Apr 2024 13:29:38 +0200 Subject: [PATCH 1/8] feat: [SPEX-1952] Add link on Alert component --- packages/components/alert/src/alert.ts | 7 ++++++- packages/components/alert/src/alert.vue | 10 ++++++++++ packages/components/alert/stories/alert.stories.ts | 8 +++++++- packages/theme/src/alert.scss | 3 +++ 4 files changed, 26 insertions(+), 2 deletions(-) diff --git a/packages/components/alert/src/alert.ts b/packages/components/alert/src/alert.ts index 8cd103af..8ae26503 100644 --- a/packages/components/alert/src/alert.ts +++ b/packages/components/alert/src/alert.ts @@ -57,11 +57,16 @@ export const alertProps = buildProps({ required: false, default: undefined, }, + linkLabel: { + type: String, + required: false, + default: undefined, + }, } as const) export type AlertProps = ExtractPropTypes -export const alertEmits = ['click', 'close'] +export const alertEmits = ['click', 'clickLink', 'close'] export type AlertEmits = typeof alertEmits export type AlertInstance = InstanceType diff --git a/packages/components/alert/src/alert.vue b/packages/components/alert/src/alert.vue index 49c93bb4..ea3aa603 100644 --- a/packages/components/alert/src/alert.vue +++ b/packages/components/alert/src/alert.vue @@ -29,6 +29,14 @@ > + + {{ linkLabel }} + import { computed } from 'vue' import { PuikButton } from '@puik/components/button' +import { PuikLink } from '@puik/components/link' import { PuikIcon } from '@puik/components/icon' import { alertEmits, alertProps, ICONS } from './alert' defineOptions({ @@ -68,4 +77,5 @@ const icon = computed(() => ICONS[props.variant]) const click = (event: Event) => emit('click', event) const close = (event: Event) => emit('close', event) +const clickLink = (event: Event) => emit('clickLink', event) diff --git a/packages/components/alert/stories/alert.stories.ts b/packages/components/alert/stories/alert.stories.ts index 22c5b171..a393a5a8 100644 --- a/packages/components/alert/stories/alert.stories.ts +++ b/packages/components/alert/stories/alert.stories.ts @@ -58,7 +58,10 @@ export default { dataTest: { control: 'text', description: - 'Set the data-test attribute for the alert components `title-${dataTest}` `description-${dataTest}` `button-${dataTest}` `close-${dataTest}`', + 'Set the data-test attribute for the alert components `title-${dataTest}` `description-${dataTest}` `button-${dataTest}` `close-${dataTest}` `link-${dataTest}`', + }, + linkLabel: { + description: 'Label of the link', }, }, args: { @@ -69,6 +72,7 @@ export default { buttonLabel: 'Button', buttonWrapLabel: false, isClosable: false, + linkLabel: 'See more', }, } as Meta @@ -81,12 +85,14 @@ const Template: StoryFn = (args: Args) => ({ }, methods: { click: action('click'), + clickLink: action('click-link'), close: action('close'), }, template: ` `, }) diff --git a/packages/theme/src/alert.scss b/packages/theme/src/alert.scss index 2d865d51..acd95b3a 100644 --- a/packages/theme/src/alert.scss +++ b/packages/theme/src/alert.scss @@ -54,4 +54,7 @@ &__close { @apply ml-4 cursor-pointer leading-none; } + &__link { + @apply m-2 max-w-xs whitespace-nowrap overflow-hidden; + } } From 560d3093485034314a72b04b4d4f9751c7cc9f05 Mon Sep 17 00:00:00 2001 From: Carangeot Date: Fri, 12 Apr 2024 13:35:50 +0200 Subject: [PATCH 2/8] feat: [SPEX-1952] Update unit test --- packages/components/alert/test/alert.spec.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/components/alert/test/alert.spec.ts b/packages/components/alert/test/alert.spec.ts index baeaf11b..f8f7359a 100644 --- a/packages/components/alert/test/alert.spec.ts +++ b/packages/components/alert/test/alert.spec.ts @@ -12,6 +12,7 @@ describe('Alert tests', () => { const findTitle = () => wrapper.find('.puik-alert__title') const findDesc = () => wrapper.find('.puik-alert__description') const findCloseButton = () => wrapper.find('.puik-alert__close') + const findLink = () => wrapper.find('.puik-alert__link') const factory = ( propsData: Record = {}, @@ -52,6 +53,13 @@ describe('Alert tests', () => { expect(wrapper.emitted('click')).toBeTruthy() }) + it('should display a link which emits the clickLink event on click', () => { + factory({ linkLabel: 'See more' }) + expect(findLink().exists()).toBeTruthy() + findLink().trigger('click') + expect(wrapper.emitted('clickLink')).toBeTruthy() + }) + it('should display a title and a description', async () => { factory({ title: faker.lorem.word(2), @@ -81,11 +89,12 @@ describe('Alert tests', () => { expect(wrapper.emitted('close')).toBeTruthy() }) - it('should have a data-test attribute on container div, title, description button and close button', () => { + it('should have a data-test attribute on container div, title, description button, close button, and link', () => { factory({ title: faker.lorem.word(2), description: faker.lorem.sentence(60), buttonLabel: 'Button', + linkLabel: 'See more', isClosable: true, dataTest: 'alert', }) @@ -94,5 +103,6 @@ describe('Alert tests', () => { expect(findDesc().attributes('data-test')).toBe('description-alert') expect(findButton().attributes('data-test')).toBe('button-alert') expect(findCloseButton().attributes('data-test')).toBe('close-alert') + expect(findLink().attributes('data-test')).toBe('link-alert') }) }) From b08a12dc3cd66d267f7296f9dbd54941ae5dcd4a Mon Sep 17 00:00:00 2001 From: Matthias Goudjil Date: Mon, 15 Apr 2024 17:44:31 +0200 Subject: [PATCH 3/8] feat: [SPEX-1952] fix style issue when link is too long (max-width and text ellipsis) --- packages/theme/src/alert.scss | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/theme/src/alert.scss b/packages/theme/src/alert.scss index acd95b3a..f1abcdf8 100644 --- a/packages/theme/src/alert.scss +++ b/packages/theme/src/alert.scss @@ -30,7 +30,7 @@ @apply border-0; } &__container { - @apply flex flex-col md:flex-row md:items-start w-full; + @apply flex flex-col lg:flex-row lg:items-start w-full; } &__content { @apply flex flex-row flex-grow; @@ -46,7 +46,7 @@ @extend .puik-body-default; } &__button { - @apply mt-2 ml-9 md:m-0; + @apply mt-2 ml-9 lg:m-0; } &__icon { @apply mt-0.5 flex-shrink-0; @@ -55,6 +55,9 @@ @apply ml-4 cursor-pointer leading-none; } &__link { - @apply m-2 max-w-xs whitespace-nowrap overflow-hidden; + @apply ml-9 lg:m-0 pl-0 lg:pl-2 p-2 overflow-hidden lg:text-ellipsis; + @media (min-width: 1024px) { + text-wrap: nowrap; + } } } From 85bb2c8202a947a63dbc81fd5cd12f15be9c1258 Mon Sep 17 00:00:00 2001 From: Matthias Goudjil Date: Mon, 15 Apr 2024 17:55:47 +0200 Subject: [PATCH 4/8] feat: [SPEX-1952] fix style issue when link is too long (max-width and text ellipsis) (2) --- packages/theme/src/alert.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/theme/src/alert.scss b/packages/theme/src/alert.scss index f1abcdf8..9eb17777 100644 --- a/packages/theme/src/alert.scss +++ b/packages/theme/src/alert.scss @@ -55,7 +55,7 @@ @apply ml-4 cursor-pointer leading-none; } &__link { - @apply ml-9 lg:m-0 pl-0 lg:pl-2 p-2 overflow-hidden lg:text-ellipsis; + @apply ml-9 lg:m-0 pl-0 lg:pl-2 p-2 overflow-hidden lg:text-ellipsis lg:min-w-[128px] lg:max-w-[320px]; @media (min-width: 1024px) { text-wrap: nowrap; } From 3e103bdaa16cef4b6adf409c0bfeef64daf48002 Mon Sep 17 00:00:00 2001 From: Carangeot Date: Tue, 16 Apr 2024 18:24:13 +0200 Subject: [PATCH 5/8] feat: [SPEX-1952] Adjust css --- packages/theme/src/alert.scss | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/theme/src/alert.scss b/packages/theme/src/alert.scss index 9eb17777..056c88fe 100644 --- a/packages/theme/src/alert.scss +++ b/packages/theme/src/alert.scss @@ -55,9 +55,6 @@ @apply ml-4 cursor-pointer leading-none; } &__link { - @apply ml-9 lg:m-0 pl-0 lg:pl-2 p-2 overflow-hidden lg:text-ellipsis lg:min-w-[128px] lg:max-w-[320px]; - @media (min-width: 1024px) { - text-wrap: nowrap; - } + @apply flex-none leading-6 w-fit block ml-9 pl-0 m-2 lg:m-2 lg:pl-0 lg:truncate lg:max-w-[320px]; } } From 84ef1472fa5650826b102d0cc7a5e5a03b64abb6 Mon Sep 17 00:00:00 2001 From: Carangeot Date: Wed, 17 Apr 2024 10:17:57 +0200 Subject: [PATCH 6/8] feat: [SPEX-1952] Adjust css --- packages/theme/src/alert.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/theme/src/alert.scss b/packages/theme/src/alert.scss index 056c88fe..6428a94c 100644 --- a/packages/theme/src/alert.scss +++ b/packages/theme/src/alert.scss @@ -55,6 +55,6 @@ @apply ml-4 cursor-pointer leading-none; } &__link { - @apply flex-none leading-6 w-fit block ml-9 pl-0 m-2 lg:m-2 lg:pl-0 lg:truncate lg:max-w-[320px]; + @apply flex-none leading-6 w-fit block ml-9 pl-0 m-2 lg:mr-4 lg:pl-0 lg:truncate lg:max-w-[320px]; } } From ed55a1888add7821a62339a73ea8d4dc4d10379b Mon Sep 17 00:00:00 2001 From: Carangeot Date: Wed, 17 Apr 2024 10:30:34 +0200 Subject: [PATCH 7/8] feat: [SPEX-1952] Adjust css --- packages/theme/src/alert.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/theme/src/alert.scss b/packages/theme/src/alert.scss index 6428a94c..3c7b7d83 100644 --- a/packages/theme/src/alert.scss +++ b/packages/theme/src/alert.scss @@ -55,6 +55,6 @@ @apply ml-4 cursor-pointer leading-none; } &__link { - @apply flex-none leading-6 w-fit block ml-9 pl-0 m-2 lg:mr-4 lg:pl-0 lg:truncate lg:max-w-[320px]; + @apply flex-none leading-6 w-fit block ml-9 pl-0 m-2 lg:ml-2 lg:mr-4 lg:pl-0 lg:truncate lg:max-w-[320px]; } } From b157b7dd5cc2877722aa88d649199b05ca29970b Mon Sep 17 00:00:00 2001 From: Carangeot Date: Wed, 17 Apr 2024 10:33:47 +0200 Subject: [PATCH 8/8] feat: [SPEX-1952] Adjust css --- packages/theme/src/alert.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/theme/src/alert.scss b/packages/theme/src/alert.scss index 3c7b7d83..a3221f54 100644 --- a/packages/theme/src/alert.scss +++ b/packages/theme/src/alert.scss @@ -55,6 +55,6 @@ @apply ml-4 cursor-pointer leading-none; } &__link { - @apply flex-none leading-6 w-fit block ml-9 pl-0 m-2 lg:ml-2 lg:mr-4 lg:pl-0 lg:truncate lg:max-w-[320px]; + @apply flex-none leading-6 w-fit block ml-9 pl-0 m-2 lg:mx-4 lg:pl-0 lg:truncate lg:max-w-[320px]; } }