fix: synced Notice component with design (#1605)

* fix: synced notice component with design * fix: review changes * fix: review changes --------- Co-authored-by: Denys Fedorov <denys.fedorov@Sombra-L501.local>
dequelabs · Aug 5, 2024 · 9eab948 · 9eab948
1 parent f1f0163
commit 9eab948
Show file tree

Hide file tree

Showing 4 changed files with 148 additions and 17 deletions.
diff --git 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
+<Notice variant="default" type="info" title="Information">
+  Forem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero
+  et velit interdum, ac aliquet odio mattis.
+  <ul>
+    <li>List item</li>
+    <li>List item</li>
+    <li>List item</li>
+    <li>List item</li>
+    <li>List item</li>
+  </ul>
+  <Button variant="link">Dismiss</Button>
+</Notice>
+```
+
+### Condensed
+
+The condensed variant of the Notice component uses smaller padding and a single-column layout.
+
+```jsx example
+<Notice variant="condensed" type="info" title="Information">
+  Forem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero
+  et velit interdum, ac aliquet odio mattis.
+  <ul>
+    <li>List item</li>
+    <li>List item</li>
+    <li>List item</li>
+    <li>List item</li>
+    <li>List item</li>
+  </ul>
+  <Button variant="link">Dismiss</Button>
+</Notice>
+```
+
 ## Props
 
 <ComponentProps
@@ -142,6 +186,13 @@ function DismissableNotice() {
       type: ['IconType', 'string'],
       description:
         'Icon name - by default automatically set to either "info-circle" or "caution" Cauldron icons'
+    },
+    {
+      name: 'variant',
+      type: ['default', 'condensed'],
+      defaultValue: 'default',
+      description:
+        'Controls the layout and padding of the Notice component. "default" uses a larger padding and a two-column layout, while "condensed" uses smaller padding and a single-column layout.'
     }
   ]}
   refType="HTMLDivElement"

diff --git a/packages/react/src/components/Notice/index.test.tsx b/packages/react/src/components/Notice/index.test.tsx
@@ -107,3 +107,53 @@ test('should return no axe violations with type="danger"', async () => {
   const results = await axe(container);
   expect(results).toHaveNoViolations();
 });
+
+test('should return no axe violations with the default variant', async () => {
+  const { container } = render(
+    <Notice data-testid="notice" title="Default Variant">
+      Default content
+    </Notice>
+  );
+
+  const results = await axe(container);
+  expect(results).toHaveNoViolations();
+});
+
+test('should return no axe violations with the condensed variant', async () => {
+  const { container } = render(
+    <Notice data-testid="notice" variant="condensed" title="Condensed Variant">
+      Condensed content
+    </Notice>
+  );
+
+  const results = await axe(container);
+  expect(results).toHaveNoViolations();
+});
+
+test('should render with the default variant', () => {
+  render(
+    <Notice data-testid="notice" title="Default Variant">
+      Default content
+    </Notice>
+  );
+
+  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(
+    <Notice data-testid="notice" variant="condensed" title="Condensed Variant">
+      Condensed content
+    </Notice>
+  );
+
+  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
@@ -14,26 +14,33 @@ export interface NoticeProps
   type?: keyof typeof iconTypeMap;
   title: ContentNode;
   icon?: IconType;
+  variant?: 'default' | 'condensed';
   children?: ReactNode;
 }
 
 const Notice = forwardRef<HTMLDivElement, NoticeProps>(
   (
-    { type = 'info', title, icon, children, ...otherProps }: NoticeProps,
+    {
+      type = 'info',
+      title,
+      icon,
+      variant = 'default',
+      children,
+      ...otherProps
+    }: NoticeProps,
     ref
   ) => {
     return (
       <div
         className={classNames('Notice', {
-          [`Notice--${type}`]: type
+          [`Notice--${type}`]: type,
+          [`Notice--condensed`]: variant === 'condensed'
         })}
         ref={ref}
         {...otherProps}
       >
-        <div className="Notice__title">
-          <Icon type={icon || (iconTypeMap[type] as IconType)} />
-          {title}
-        </div>
+        <Icon type={icon || (iconTypeMap[type] as IconType)} />
+        <div className="Notice__title">{title}</div>
         {children && <div className="Notice__content">{children}</div>}
       </div>
     );

diff --git 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,28 +24,43 @@
 }
 
 .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;
   gap: var(--space-three-quarters);
   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);
+}