From 9eab948b599b57a6bae4e637536012d6d8d54146 Mon Sep 17 00:00:00 2001 From: denysfedorov <151170545+denysfedorov@users.noreply.github.com> Date: Mon, 5 Aug 2024 16:52:42 +0300 Subject: [PATCH] fix: synced `Notice` component with design (#1605) * fix: synced notice component with design * fix: review changes * fix: review changes --------- Co-authored-by: Denys Fedorov --- docs/pages/components/Notice.mdx | 57 ++++++++++++++++++- .../src/components/Notice/index.test.tsx | 50 ++++++++++++++++ .../react/src/components/Notice/index.tsx | 19 +++++-- packages/styles/notice.css | 39 ++++++++++--- 4 files changed, 148 insertions(+), 17 deletions(-) diff --git a/docs/pages/components/Notice.mdx b/docs/pages/components/Notice.mdx index 179463fe3..1f632b704 100644 --- a/docs/pages/components/Notice.mdx +++ b/docs/pages/components/Notice.mdx @@ -19,9 +19,9 @@ or anywhere else in the DOM without needing to be absolutely/statically position ## Examples -There are two variants of the `Notice` component: `info` and `caution`. The `info` variant is used to display general -information, while the `caution` variant is used to display a warning. Depending on the variant, the background color -and icon will change (can be overwritten). +The Notice component supports three types: info, caution, and danger. The info type is used to display general +information, while the caution type is used to display a warning, and the danger type is used to display critical warnings. +Depending on the type, the background color and icon will change (can be overwritten). ### Info @@ -112,6 +112,50 @@ function DismissableNotice() { } ``` +## Variants + +The Notice component includes a variant prop that allows for two display styles: default and condensed. +The default variant displays the notice with a larger padding and a two-column layout, +while the condensed variant uses smaller padding and a single-column layout. + +### Default + +The default variant displays the notice with a larger padding and a two-column layout. + +```jsx example + + Forem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero + et velit interdum, ac aliquet odio mattis. + + + +``` + +### Condensed + +The condensed variant of the Notice component uses smaller padding and a single-column layout. + +```jsx example + + Forem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero + et velit interdum, ac aliquet odio mattis. + + + +``` + ## Props { const results = await axe(container); expect(results).toHaveNoViolations(); }); + +test('should return no axe violations with the default variant', async () => { + const { container } = render( + + Default content + + ); + + const results = await axe(container); + expect(results).toHaveNoViolations(); +}); + +test('should return no axe violations with the condensed variant', async () => { + const { container } = render( + + Condensed content + + ); + + const results = await axe(container); + expect(results).toHaveNoViolations(); +}); + +test('should render with the default variant', () => { + render( + + Default content + + ); + + const element = screen.getByTestId('notice'); + expect(element).toBeInTheDocument(); + + expect(element).not.toHaveClass('Notice--condensed'); + expect(element).toHaveTextContent('Default Variant'); +}); + +test('should render with the condensed variant', () => { + render( + + Condensed content + + ); + + const element = screen.getByTestId('notice'); + expect(element).toBeInTheDocument(); + + expect(element).toHaveClass('Notice--condensed'); + expect(element).toHaveTextContent('Condensed Variant'); +}); diff --git a/packages/react/src/components/Notice/index.tsx b/packages/react/src/components/Notice/index.tsx index cbd4cd735..3e5e3ccf5 100644 --- a/packages/react/src/components/Notice/index.tsx +++ b/packages/react/src/components/Notice/index.tsx @@ -14,26 +14,33 @@ export interface NoticeProps type?: keyof typeof iconTypeMap; title: ContentNode; icon?: IconType; + variant?: 'default' | 'condensed'; children?: ReactNode; } const Notice = forwardRef( ( - { type = 'info', title, icon, children, ...otherProps }: NoticeProps, + { + type = 'info', + title, + icon, + variant = 'default', + children, + ...otherProps + }: NoticeProps, ref ) => { return (
-
- - {title} -
+ +
{title}
{children &&
{children}
}
); diff --git a/packages/styles/notice.css b/packages/styles/notice.css index d21ff72cf..c04b62bac 100644 --- a/packages/styles/notice.css +++ b/packages/styles/notice.css @@ -8,7 +8,7 @@ --notice-background-color: var(--notice-info-color); --notice-border-color: var(--accent-dark); --notice-link-hover-color: var(--accent-medium); - --notice-icon-size: 1.2em; + --notice-icon-size: 1rem; } .Notice--info { @@ -24,20 +24,35 @@ } .Notice { - display: block; - padding: var(--space-smaller) var(--space-small); + display: grid; + grid-template-columns: auto 1fr; + gap: var(--space-small); + padding: var(--space-large); + align-items: start; + border-radius: 4px; border: 1px solid var(--notice-border-color); background-color: var(--notice-background-color); color: var(--notice-text-color); - width: 100%; - font-size: var(--text-size-smaller); +} + +.Notice--condensed { + grid-template-columns: 1fr; + padding: var(--space-small); + gap: var(--space-smallest); +} + +.Notice__content { + grid-column: 2; +} + +.Notice--condensed .Notice__content { + grid-column: 1; } .Notice .Notice__title, .Notice .Notice__title > :is(h1, h2, h3, h4, h5, h6) { display: flex; align-items: flex-start; - font-size: var(--text-size-small); font-weight: var(--notice-title-font-weight); margin: 0; padding: 0; @@ -45,7 +60,7 @@ color: var(--notice-title-text-color); } -.Notice .Notice__title + .Notice__content { +.Notice .Notice__content { margin-top: var(--space-smallest); } @@ -64,7 +79,6 @@ .Notice button.Link, .Notice a.Link { color: var(--accent-dark); - font-size: var(--text-size-small); font-weight: var(--font-weight-light); text-decoration: underline; } @@ -84,3 +98,12 @@ margin-top: 0; margin-bottom: var(--space-smallest); } + +.Notice ul { + margin: var(--space-smallest) 0; + padding-left: var(--space-small); +} + +.Notice li { + margin-bottom: var(--space-smallest); +}