Skip to content

Commit 35c4962

Browse files
authored
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
1 parent 7fa9356 commit 35c4962

4 files changed

Lines changed: 87 additions & 5 deletions

File tree

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

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,39 @@
55
}
66

77
.tedi-alert {
8-
padding: var(--alert-default-padding-y) var(--alert-default-padding-x);
9-
font-size: var(--body-regular-size);
108
border: 1px solid;
119
border-radius: var(--alert-radius);
1210

1311
@include alert-variant(var(--alert-default-background-info), var(--alert-default-border-info));
1412

1513
&__content {
1614
display: flex;
17-
gap: var(--layout-grid-gutters-08);
18-
align-items: flex-start;
15+
align-self: center;
1916

2017
.tedi-alert__icon {
2118
line-height: var(--body-regular-line-height);
2219
}
2320
}
2421

22+
&--size-default {
23+
padding: var(--alert-default-padding-y) var(--alert-default-padding-x);
24+
font-size: var(--body-regular-size);
25+
26+
.tedi-alert__content {
27+
gap: var(--layout-grid-gutters-08);
28+
}
29+
}
30+
31+
&--size-small {
32+
padding: var(--alert-default-padding-y-sm) var(--alert-default-padding-x-sm);
33+
font-size: var(--body-small-regular-size);
34+
line-height: var(--body-small-regular-line-height);
35+
36+
.tedi-alert__content {
37+
gap: var(--layout-grid-gutters-04);
38+
}
39+
}
40+
2541
&--info {
2642
@include alert-variant(var(--alert-default-background-info), var(--alert-default-border-info));
2743
}

src/tedi/components/notifications/alert/alert.spec.tsx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,4 +118,23 @@ describe('Alert component', () => {
118118
const title = screen.getByText(text);
119119
expect(title.tagName).toBe(level.toUpperCase());
120120
});
121+
122+
it('renders with small size and applies correct size class', () => {
123+
render(<Alert size="small">Small Alert</Alert>);
124+
125+
const alert = screen.getByRole('alert');
126+
expect(alert).toHaveClass('tedi-alert--size-small');
127+
});
128+
129+
it('renders danger alert with small size', () => {
130+
render(
131+
<Alert type="danger" size="small">
132+
Danger Small Alert
133+
</Alert>
134+
);
135+
136+
const alert = screen.getByRole('alert');
137+
expect(alert).toHaveClass('tedi-alert--danger');
138+
expect(alert).toHaveClass('tedi-alert--size-small');
139+
});
121140
});

src/tedi/components/notifications/alert/alert.stories.tsx

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { Meta, StoryFn, StoryObj } from '@storybook/react';
22

3+
import { Text } from '../../base/typography/text/text';
4+
import { Col, Row } from '../../layout/grid';
35
import { VerticalSpacing } from '../../layout/vertical-spacing';
46
import Link from '../../navigation/link/link';
57
import Alert, { AlertProps } from '../alert/alert';
@@ -36,6 +38,8 @@ const alertTypes: { type: AlertProps['type']; icon: string }[] = [
3638
{ type: 'danger', icon: 'error' },
3739
];
3840

41+
const sizeArray: AlertProps['size'][] = ['default', 'small'];
42+
3943
const TypesTemplate: StoryFn<AlertProps> = (args) => (
4044
<VerticalSpacing size={1}>
4145
{alertTypes.map(({ type, icon }) => (
@@ -46,6 +50,31 @@ const TypesTemplate: StoryFn<AlertProps> = (args) => (
4650
</VerticalSpacing>
4751
);
4852

53+
interface TemplateMultipleProps<Type = AlertProps['size']> extends AlertProps {
54+
array: Type[];
55+
}
56+
57+
const TemplateColumn: StoryFn<TemplateMultipleProps> = (args) => {
58+
const { array, ...alertProps } = args;
59+
60+
return (
61+
<div className="example-list">
62+
{array.map((value, key) => (
63+
<Row className={`${key === array.length - 1 ? '' : 'border-bottom'} padding-14-16`} key={key}>
64+
<Col width={2}>
65+
<Text modifiers="bold">{value ? value.charAt(0).toUpperCase() + value.slice(1) : ''}</Text>
66+
</Col>
67+
<Col className="d-flex">
68+
<Alert key={alertProps.type} {...alertProps} size={array[key]}>
69+
Content description
70+
</Alert>
71+
</Col>
72+
</Row>
73+
))}
74+
</div>
75+
);
76+
};
77+
4978
const Template: StoryFn<AlertProps> = (args) => <Alert {...args} />;
5079
export const Default: Story = {
5180
args: {
@@ -69,6 +98,15 @@ const WithAndWithoutHeading: StoryFn<AlertProps> = (args) => {
6998
);
7099
};
71100

101+
export const Sizes: StoryObj<TemplateMultipleProps> = {
102+
render: TemplateColumn,
103+
args: {
104+
array: sizeArray,
105+
type: 'info',
106+
children: 'Content description',
107+
onClose: () => null,
108+
},
109+
};
72110
export const Headless: Story = {
73111
render: Template,
74112
args: {

src/tedi/components/notifications/alert/alert.tsx

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,13 @@ type AlertBreakpointProps = {
2929
* @default false
3030
*/
3131
noSideBorders?: boolean;
32+
/**
33+
* Alert size variant.
34+
* - 'default': Standard alert size with padding and border radius.
35+
* - 'small': More compact alert size with reduced padding.
36+
* @default default
37+
*/
38+
size?: 'default' | 'small';
3239
};
3340

3441
export interface AlertProps extends BreakpointSupport<AlertBreakpointProps> {
@@ -79,7 +86,7 @@ export interface AlertProps extends BreakpointSupport<AlertBreakpointProps> {
7986
* // For secondary notifications
8087
* titleElement="h4"
8188
*
82-
* @default 'h3'
89+
* @default h3
8390
*/
8491
titleElement?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
8592
}
@@ -97,12 +104,14 @@ export const Alert = (props: AlertProps): JSX.Element | null => {
97104
isGlobal = false,
98105
noSideBorders = false,
99106
titleElement = 'h3',
107+
size = 'default',
100108
...rest
101109
} = getCurrentBreakpointProps<AlertProps>(props);
102110

103111
const alertBEM = cn(
104112
styles['tedi-alert'],
105113
styles[`tedi-alert--${type}`],
114+
styles[`tedi-alert--size-${size}`],
106115
{
107116
[styles['tedi-alert--global']]: isGlobal,
108117
[styles['tedi-alert--no-side-borders']]: noSideBorders,

0 commit comments

Comments
 (0)