feat(alert): new size prop with default and small values #11 (#509)

* feat(alert): new size prop with default and small values #11

* feat(alert): fix small font size, align content vertically center #11

* fix(alert): remove console log, clean up prop descriptions #11

Author: airikej

src/tedi/components/notifications/alert/alert.module.scss

@@ -5,23 +5,39 @@
 }
 
 .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);
 
   @include alert-variant(var(--alert-default-background-info), var(--alert-default-border-info));
 
   &__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));
   }

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(<Alert size="small">Small Alert</Alert>);
+
+    const alert = screen.getByRole('alert');
+    expect(alert).toHaveClass('tedi-alert--size-small');
+  });
+
+  it('renders danger alert with small size', () => {
+    render(
+      <Alert type="danger" size="small">
+        Danger Small Alert
+      </Alert>
+    );
+
+    const alert = screen.getByRole('alert');
+    expect(alert).toHaveClass('tedi-alert--danger');
+    expect(alert).toHaveClass('tedi-alert--size-small');
+  });
 });

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<AlertProps> = (args) => (
   <VerticalSpacing size={1}>
     {alertTypes.map(({ type, icon }) => (
@@ -46,6 +50,31 @@ const TypesTemplate: StoryFn<AlertProps> = (args) => (
   </VerticalSpacing>
 );
 
+interface TemplateMultipleProps<Type = AlertProps['size']> extends AlertProps {
+  array: Type[];
+}
+
+const TemplateColumn: StoryFn<TemplateMultipleProps> = (args) => {
+  const { array, ...alertProps } = args;
+
+  return (
+    <div className="example-list">
+      {array.map((value, key) => (
+        <Row className={`${key === array.length - 1 ? '' : 'border-bottom'} padding-14-16`} key={key}>
+          <Col width={2}>
+            <Text modifiers="bold">{value ? value.charAt(0).toUpperCase() + value.slice(1) : ''}</Text>
+          </Col>
+          <Col className="d-flex">
+            <Alert key={alertProps.type} {...alertProps} size={array[key]}>
+              Content description
+            </Alert>
+          </Col>
+        </Row>
+      ))}
+    </div>
+  );
+};
+
 const Template: StoryFn<AlertProps> = (args) => <Alert {...args} />;
 export const Default: Story = {
   args: {
@@ -69,6 +98,15 @@ const WithAndWithoutHeading: StoryFn<AlertProps> = (args) => {
   );
 };
 
+export const Sizes: StoryObj<TemplateMultipleProps> = {
+  render: TemplateColumn,
+  args: {
+    array: sizeArray,
+    type: 'info',
+    children: 'Content description',
+    onClose: () => null,
+  },
+};
 export const Headless: Story = {
   render: Template,
   args: {

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<AlertBreakpointProps> {
@@ -79,7 +86,7 @@ export interface AlertProps extends BreakpointSupport<AlertBreakpointProps> {
    * // 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<AlertProps>(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,