From d2cb7b0689dbbd21d1893692a8d37d456ee4c971 Mon Sep 17 00:00:00 2001 From: Airike Jaska <95303654+airikej@users.noreply.github.com> Date: Tue, 3 Feb 2026 08:58:44 +0200 Subject: [PATCH 1/3] feat(alert): new size prop with default and small values #11 --- .../notifications/alert/alert.module.scss | 22 +++++++++-- .../notifications/alert/alert.spec.tsx | 19 ++++++++++ .../notifications/alert/alert.stories.tsx | 38 +++++++++++++++++++ .../components/notifications/alert/alert.tsx | 11 ++++++ 4 files changed, 87 insertions(+), 3 deletions(-) diff --git a/src/tedi/components/notifications/alert/alert.module.scss b/src/tedi/components/notifications/alert/alert.module.scss index e84a27354..7b1768b8e 100644 --- a/src/tedi/components/notifications/alert/alert.module.scss +++ b/src/tedi/components/notifications/alert/alert.module.scss @@ -5,8 +5,6 @@ } .tedi-alert { - padding: var(--alert-default-padding-y) var(--alert-default-padding-x); - font-size: var(--body-regular-size); border: 1px solid; border-radius: var(--alert-radius); @@ -14,7 +12,6 @@ &__content { display: flex; - gap: var(--layout-grid-gutters-08); align-items: flex-start; .tedi-alert__icon { @@ -22,6 +19,25 @@ } } + &--size-default { + padding: var(--alert-default-padding-y) var(--alert-default-padding-x); + font-size: var(--body-regular-size); + + .tedi-alert__content { + gap: var(--layout-grid-gutters-08); + } + } + + &--size-small { + padding: var(--alert-default-padding-y-sm) var(--alert-default-padding-x-sm); + font-size: var(--body-small-size); + line-height: var(--body-small-line-height); + + .tedi-alert__content { + gap: var(--layout-grid-gutters-04); + } + } + &--info { @include alert-variant(var(--alert-default-background-info), var(--alert-default-border-info)); } diff --git a/src/tedi/components/notifications/alert/alert.spec.tsx b/src/tedi/components/notifications/alert/alert.spec.tsx index 336858a85..ae944d37d 100644 --- a/src/tedi/components/notifications/alert/alert.spec.tsx +++ b/src/tedi/components/notifications/alert/alert.spec.tsx @@ -118,4 +118,23 @@ describe('Alert component', () => { const title = screen.getByText(text); expect(title.tagName).toBe(level.toUpperCase()); }); + + it('renders with small size and applies correct size class', () => { + render(Small Alert); + + const alert = screen.getByRole('alert'); + expect(alert).toHaveClass('tedi-alert--size-small'); + }); + + it('renders danger alert with small size', () => { + render( + + Danger Small Alert + + ); + + const alert = screen.getByRole('alert'); + expect(alert).toHaveClass('tedi-alert--danger'); + expect(alert).toHaveClass('tedi-alert--size-small'); + }); }); diff --git a/src/tedi/components/notifications/alert/alert.stories.tsx b/src/tedi/components/notifications/alert/alert.stories.tsx index ca3d894ff..51d7a59f4 100644 --- a/src/tedi/components/notifications/alert/alert.stories.tsx +++ b/src/tedi/components/notifications/alert/alert.stories.tsx @@ -1,5 +1,7 @@ import { Meta, StoryFn, StoryObj } from '@storybook/react'; +import { Text } from '../../base/typography/text/text'; +import { Col, Row } from '../../layout/grid'; import { VerticalSpacing } from '../../layout/vertical-spacing'; import Link from '../../navigation/link/link'; import Alert, { AlertProps } from '../alert/alert'; @@ -36,6 +38,8 @@ const alertTypes: { type: AlertProps['type']; icon: string }[] = [ { type: 'danger', icon: 'error' }, ]; +const sizeArray: AlertProps['size'][] = ['default', 'small']; + const TypesTemplate: StoryFn = (args) => ( {alertTypes.map(({ type, icon }) => ( @@ -46,6 +50,31 @@ const TypesTemplate: StoryFn = (args) => ( ); +interface TemplateMultipleProps extends AlertProps { + array: Type[]; +} + +const TemplateColumn: StoryFn = (args) => { + const { array, ...alertProps } = args; + + return ( +
+ {array.map((value, key) => ( + + + {value ? value.charAt(0).toUpperCase() + value.slice(1) : ''} + + + + Content description + + + + ))} +
+ ); +}; + const Template: StoryFn = (args) => ; export const Default: Story = { args: { @@ -69,6 +98,15 @@ const WithAndWithoutHeading: StoryFn = (args) => { ); }; +export const Sizes: StoryObj = { + render: TemplateColumn, + args: { + array: sizeArray, + type: 'info', + children: 'Content description', + onClose: () => null, + }, +}; export const Headless: Story = { render: Template, args: { diff --git a/src/tedi/components/notifications/alert/alert.tsx b/src/tedi/components/notifications/alert/alert.tsx index 18e1a7295..4045e6ab7 100644 --- a/src/tedi/components/notifications/alert/alert.tsx +++ b/src/tedi/components/notifications/alert/alert.tsx @@ -29,6 +29,13 @@ type AlertBreakpointProps = { * @default false */ noSideBorders?: boolean; + /** + * Alert size variant. + * - 'default': Standard alert size with padding and border radius. + * - 'small': More compact alert size with reduced padding. + * @default 'default' + */ + size?: 'default' | 'small'; }; export interface AlertProps extends BreakpointSupport { @@ -97,12 +104,16 @@ export const Alert = (props: AlertProps): JSX.Element | null => { isGlobal = false, noSideBorders = false, titleElement = 'h3', + size = 'default', ...rest } = getCurrentBreakpointProps(props); + console.log(size); + const alertBEM = cn( styles['tedi-alert'], styles[`tedi-alert--${type}`], + styles[`tedi-alert--size-${size}`], { [styles['tedi-alert--global']]: isGlobal, [styles['tedi-alert--no-side-borders']]: noSideBorders, From 24f97bec9f21d68b10f3b8fab1ce2d1ad7ea9276 Mon Sep 17 00:00:00 2001 From: Airike Jaska <95303654+airikej@users.noreply.github.com> Date: Tue, 3 Feb 2026 09:06:06 +0200 Subject: [PATCH 2/3] feat(alert): fix small font size, align content vertically center #11 --- src/tedi/components/notifications/alert/alert.module.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/tedi/components/notifications/alert/alert.module.scss b/src/tedi/components/notifications/alert/alert.module.scss index 7b1768b8e..ba7710e83 100644 --- a/src/tedi/components/notifications/alert/alert.module.scss +++ b/src/tedi/components/notifications/alert/alert.module.scss @@ -12,7 +12,7 @@ &__content { display: flex; - align-items: flex-start; + align-self: center; .tedi-alert__icon { line-height: var(--body-regular-line-height); @@ -30,8 +30,8 @@ &--size-small { padding: var(--alert-default-padding-y-sm) var(--alert-default-padding-x-sm); - font-size: var(--body-small-size); - line-height: var(--body-small-line-height); + font-size: var(--body-small-regular-size); + line-height: var(--body-small-regular-line-height); .tedi-alert__content { gap: var(--layout-grid-gutters-04); From 0b7c95c788a7f1ceaf92a4150faa45d9c6bc8a36 Mon Sep 17 00:00:00 2001 From: Airike Jaska <95303654+airikej@users.noreply.github.com> Date: Thu, 19 Feb 2026 06:35:23 +0200 Subject: [PATCH 3/3] fix(alert): remove console log, clean up prop descriptions #11 --- src/tedi/components/notifications/alert/alert.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/tedi/components/notifications/alert/alert.tsx b/src/tedi/components/notifications/alert/alert.tsx index 4045e6ab7..911e5826c 100644 --- a/src/tedi/components/notifications/alert/alert.tsx +++ b/src/tedi/components/notifications/alert/alert.tsx @@ -33,7 +33,7 @@ type AlertBreakpointProps = { * Alert size variant. * - 'default': Standard alert size with padding and border radius. * - 'small': More compact alert size with reduced padding. - * @default 'default' + * @default default */ size?: 'default' | 'small'; }; @@ -86,7 +86,7 @@ export interface AlertProps extends BreakpointSupport { * // For secondary notifications * titleElement="h4" * - * @default 'h3' + * @default h3 */ titleElement?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; } @@ -108,8 +108,6 @@ export const Alert = (props: AlertProps): JSX.Element | null => { ...rest } = getCurrentBreakpointProps(props); - console.log(size); - const alertBEM = cn( styles['tedi-alert'], styles[`tedi-alert--${type}`],