diff --git a/src/tedi/components/notifications/alert/alert.module.scss b/src/tedi/components/notifications/alert/alert.module.scss index e84a2735..ba7710e8 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,14 +12,32 @@ &__content { display: flex; - gap: var(--layout-grid-gutters-08); - align-items: flex-start; + align-self: center; .tedi-alert__icon { line-height: var(--body-regular-line-height); } } + &--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-regular-size); + line-height: var(--body-small-regular-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 336858a8..ae944d37 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 ca3d894f..51d7a59f 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 18e1a729..911e5826 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 { @@ -79,7 +86,7 @@ export interface AlertProps extends BreakpointSupport { * // For secondary notifications * titleElement="h4" * - * @default 'h3' + * @default h3 */ titleElement?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; } @@ -97,12 +104,14 @@ export const Alert = (props: AlertProps): JSX.Element | null => { isGlobal = false, noSideBorders = false, titleElement = 'h3', + size = 'default', ...rest } = getCurrentBreakpointProps(props); 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,