feat: updates Callout visuals

RocketChat · Oct 11, 2023 · 24d3255 · 24d3255
1 parent 44f8515
commit 24d3255
Show file tree

Hide file tree

Showing 5 changed files with 324 additions and 93 deletions.
diff --git a/.changeset/lemon-lamps-chew.md b/.changeset/lemon-lamps-chew.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/fuselage": minor
+---
+
+feat(fuselage): `Callout` visual changes
diff --git a/packages/fuselage/src/components/Callout/Callout.spec.tsx b/packages/fuselage/src/components/Callout/Callout.spec.tsx
@@ -1,47 +1,31 @@
 import { composeStories } from '@storybook/testing-react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
 import React from 'react';
 
-import { Callout } from './Callout';
 import * as stories from './Callout.stories';
 
-const { Default, WithDescriptionOnly, Info, Success, Warning, Danger } =
-  composeStories(stories);
+const testCases = Object.values(composeStories(stories)).map((Story) => [
+  Story.storyName || 'Story',
+  Story,
+]);
 
-describe('[Callout Component]', () => {
-  describe('Storybook', () => {
-    it.each([
-      ['Default', Default],
-      ['WithDescriptionOnly', WithDescriptionOnly],
-      ['Info', Info],
-      ['Success', Success],
-      ['Warning', Warning],
-      ['Danger', Danger],
-    ])('renders %p story without crashing', (_storyName, Story) => {
-      render(<Story />);
-    });
+describe('[CheckBox Rendering]', () => {
+  test.each(testCases)(
+    `renders %s without crashing`,
+    async (_storyname, Story) => {
+      const tree = render(<Story />);
+      expect(tree.baseElement).toMatchSnapshot();
+    }
+  );
 
-    it.each([
-      ['.rcx-callout--type-info', 'info', Info],
-      ['.rcx-callout--type-success', 'success', Success],
-      ['.rcx-callout--type-warning', 'warning', Warning],
-      ['.rcx-callout--type-danger', 'danger', Danger],
-    ])(
-      'should have class %p when type is %p',
-      (className, _typeName, Story) => {
-        const { container } = render(<Story />);
-        expect(container.querySelector(className)).toBeInTheDocument();
-      }
-    );
-  });
+  test.each(testCases)(
+    '%s should have no a11y violations',
+    async (_storyname, Story) => {
+      const { container } = render(<Story />);
 
-  it('should show title when this property is passed', () => {
-    render(<Callout title='test-title' />);
-    screen.getByText('test-title');
-  });
-
-  it('should display children', () => {
-    render(<Callout>Children</Callout>);
-    screen.getByText('Children');
-  });
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+    }
+  );
 });
diff --git a/packages/fuselage/src/components/Callout/Callout.styles.scss b/packages/fuselage/src/components/Callout/Callout.styles.scss
@@ -2,76 +2,96 @@
 @use '../../styles/lengths.scss';
 @use '../../styles/typography.scss';
 
+$callout-default-color: theme(
+  'callout-default-color',
+  colors.font(secondary-info)
+);
+$callout-info-color: theme('callout-info-color', colors.status-font(on-info));
+$callout-success-color: theme(
+  'callout-success-color',
+  colors.status-font(on-success)
+);
+$callout-warning-color: theme(
+  'callout-warning-color',
+  colors.status-font(on-warning)
+);
+$callout-danger-color: theme(
+  'callout-danger-color',
+  colors.status-font(on-danger)
+);
+$callout-text-color: theme('callout-text-color', colors.font(pure-black));
+
 .rcx-callout {
   display: flex;
 
-  padding-block: lengths.padding(8);
-  padding-inline: lengths.padding(16);
+  padding: lengths.padding(12);
+
+  color: $callout-text-color;
 
-  color: theme('callout-color', colors.font(default));
+  border-width: lengths.border-width(default);
+  border-style: solid;
+  border-color: $callout-default-color;
 
   border-radius: theme('callout-border-radius', lengths.border-radius(medium));
 
-  background-color: theme('callout-background-color', colors.surface(tint));
+  &--info {
+    border-color: $callout-info-color;
 
-  &--type-info {
-    color: theme('callout-color-info', colors.font(pure-black));
-    background-color: theme(
-      'callout-background-color-info',
-      colors.status-background(info)
-    );
+    .rcx-callout__icon {
+      color: $callout-info-color;
+    }
   }
 
-  &--type-success {
-    color: theme('callout-color-success', colors.font(pure-black));
-    background-color: theme(
-      'callout-background-color-success',
-      colors.status-background(success)
-    );
+  &--success {
+    border-color: $callout-success-color;
+
+    .rcx-callout__icon {
+      color: $callout-success-color;
+    }
   }
 
-  &--type-warning {
-    color: theme('callout-color-warning', colors.font(pure-black));
-    background-color: theme(
-      'callout-background-color-warning',
-      colors.status-background(warning)
-    );
+  &--warning {
+    border-color: $callout-warning-color;
+
+    .rcx-callout__icon {
+      color: $callout-warning-color;
+    }
   }
 
-  &--type-danger {
-    color: theme('callout-color-danger', colors.font(pure-black));
-    background-color: theme(
-      'callout-background-color-danger',
-      colors.status-background(danger)
-    );
+  &--danger {
+    border-color: $callout-danger-color;
+
+    .rcx-callout__icon {
+      color: $callout-danger-color;
+    }
   }
-}
 
-.rcx-callout__wrapper {
-  display: flex;
+  &__wrapper {
+    display: flex;
 
-  overflow: hidden;
-  flex-flow: column nowrap;
-  flex: 1 1 0;
+    overflow: hidden;
+    flex-flow: column nowrap;
+    flex: 1 1 0;
 
-  margin-inline-start: lengths.margin(12);
+    margin-inline-start: lengths.margin(12);
 
-  @include typography.use-font-scale(c1);
+    @include typography.use-font-scale(c1);
 
-  > :nth-child(2) {
-    margin-block-start: lengths.margin(4);
+    > :nth-child(2) {
+      margin-block-start: lengths.margin(4);
+    }
   }
-}
 
-.rcx-callout__title {
-  white-space: nowrap;
+  &__title {
+    white-space: nowrap;
 
-  @include typography.use-font-scale(p2b);
-  @include typography.use-text-ellipsis;
-}
+    @include typography.use-font-scale(p2b);
+    @include typography.use-text-ellipsis;
+  }
 
-.rcx-callout__children {
-  display: block;
+  &__content {
+    display: block;
 
-  @include typography.use-font-scale(p2);
+    @include typography.use-font-scale(p2);
+  }
 }
diff --git a/packages/fuselage/src/components/Callout/Callout.tsx b/packages/fuselage/src/components/Callout/Callout.tsx
@@ -16,6 +16,7 @@ export const Callout = ({
   title,
   children,
   icon,
+  className,
   ...props
 }: CalloutProps) => {
   const defaultIcon =
@@ -26,15 +27,23 @@ export const Callout = ({
     'info-circled';
 
   return (
-    <Box is='section' rcx-callout rcx-callout--type={type} {...props}>
-      <Icon name={icon || defaultIcon} size='x20' />
+    <Box
+      is='section'
+      className={[
+        `rcx-callout ${type && `rcx-callout--${type}`} ${className || ''}`,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      {...props}
+    >
+      <Icon
+        className='rcx-callout__icon'
+        name={icon || defaultIcon}
+        size='x20'
+      />
       <Box rcx-callout__wrapper>
-        {title && (
-          <Box is='h1' rcx-callout__title>
-            {title}
-          </Box>
-        )}
-        {children && <Box rcx-callout__children>{children}</Box>}
+        {title && <Box rcx-callout__title>{title}</Box>}
+        {children && <Box rcx-callout__content>{children}</Box>}
       </Box>
     </Box>
   );