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/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') }) }) diff --git a/packages/theme/src/alert.scss b/packages/theme/src/alert.scss index 2d865d51..a3221f54 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; @@ -54,4 +54,7 @@ &__close { @apply ml-4 cursor-pointer leading-none; } + &__link { + @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]; + } }