feat(fuselage): Introduce Callout actions

.changeset/sharp-paws-mix.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/fuselage": minor
+---
+
+feat(fuselage): Introduce Callout actions

packages/fuselage/.jest/setup.ts

@@ -32,3 +32,9 @@ expect.extend({
 });
 
 expect.extend(toHaveNoViolations);
+
+window.ResizeObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+}));

packages/fuselage/src/components/Callout/Callout.stories.tsx

@@ -10,7 +10,7 @@ import {
 import type { ComponentStory, ComponentMeta } from '@storybook/react';
 import React from 'react';
 
-import { Callout } from '../..';
+import { Button, ButtonGroup, Callout } from '../..';
 import { setStoryDescription } from '../../helpers/setStoryDescription';
 
 export default {
@@ -87,3 +87,17 @@ CustomIcon.args = {
   title: 'This is a message with custom icon',
   icon: 'hash',
 };
+
+export const WithActions: ComponentStory<typeof Callout> = (args) => (
+  <Callout {...args} />
+);
+WithActions.args = {
+  title: 'This is a generic title',
+  children: 'This is a generic description.',
+  actions: (
+    <ButtonGroup>
+      <Button small>Button</Button>
+      <Button small>Button</Button>
+    </ButtonGroup>
+  ),
+};

packages/fuselage/src/components/Callout/Callout.styles.scss

@@ -73,15 +73,36 @@ $callout-text-color: theme('callout-text-color', colors.font(default));
   }
 
   &__wrapper {
-    display: flex;
-
     overflow: hidden;
-    flex-flow: column nowrap;
+
+    justify-content: space-between;
+
     flex: 1 1 0;
 
     margin-inline-start: lengths.margin(12);
 
-    @include typography.use-font-scale(c1);
+    > :nth-child(2) {
+      margin-block-start: lengths.margin(12);
+    }
+
+    &--large {
+      display: flex;
+
+      overflow: hidden;
+      flex-direction: row;
+      align-items: center;
+
+      > :nth-child(2) {
+        margin-block-start: lengths.margin(0);
+      }
+    }
+  }
+
+  &__wrapper-content {
+    display: flex;
+
+    overflow: hidden;
+    flex-flow: column nowrap;
 
     > :nth-child(2) {
       margin-block-start: lengths.margin(4);

packages/fuselage/src/components/Callout/Callout.tsx

@@ -1,4 +1,5 @@
-import type { ComponentProps, ReactNode } from 'react';
+import { useResizeObserver } from '@rocket.chat/fuselage-hooks';
+import type { ComponentProps, ReactElement, ReactNode } from 'react';
 import React from 'react';
 
 import Box from '../Box';
@@ -9,16 +10,24 @@ type CalloutProps = Omit<ComponentProps<typeof Box>, 'type' | 'name'> & {
   title?: ReactNode;
   children?: ReactNode;
   icon?: ComponentProps<typeof Icon>['name'];
+  actions?: ReactElement;
 };
 
+const WRAPPER_LIMIT_SIZE = 420;
+
 export const Callout = ({
   type,
   title,
   children,
   icon,
   className,
+  actions,
   ...props
 }: CalloutProps) => {
+  const { ref, borderBoxSize } = useResizeObserver();
+  const isLarge =
+    borderBoxSize.inlineSize && borderBoxSize.inlineSize >= WRAPPER_LIMIT_SIZE;
+
   const defaultIcon =
     (type === 'info' && 'info-circled') ||
     (type === 'success' && 'checkmark-circled') ||
@@ -28,6 +37,7 @@ export const Callout = ({
 
   return (
     <Box
+      ref={ref}
       is='section'
       className={['rcx-callout', type && `rcx-callout--${type}`, className]
         .filter(Boolean)
@@ -39,9 +49,12 @@ export const Callout = ({
         name={icon || defaultIcon}
         size='x20'
       />
-      <Box rcx-callout__wrapper>
-        {title && <Box rcx-callout__title>{title}</Box>}
-        {children && <Box rcx-callout__content>{children}</Box>}
+      <Box rcx-callout__wrapper rcx-callout__wrapper--large={isLarge}>
+        <Box rcx-callout__wrapper-content>
+          {title && <Box rcx-callout__title>{title}</Box>}
+          {children && <Box rcx-callout__content>{children}</Box>}
+        </Box>
+        {actions && <Box rcx-callout__actions>{actions}</Box>}
       </Box>
     </Box>
   );

packages/fuselage/src/components/Callout/__snapshots__/Callout.spec.tsx.snap

@@ -16,14 +16,18 @@ exports[`[CheckBox Rendering] renders CustomIcon without crashing 1`] = `
         class="rcx-box rcx-box--full rcx-callout__wrapper"
       >
         <div
-          class="rcx-box rcx-box--full rcx-callout__title"
+          class="rcx-box rcx-box--full rcx-callout__wrapper-content"
         >
-          This is a message with custom icon
-        </div>
-        <div
-          class="rcx-box rcx-box--full rcx-callout__content"
-        >
-          This is a generic description.
+          <div
+            class="rcx-box rcx-box--full rcx-callout__title"
+          >
+            This is a message with custom icon
+          </div>
+          <div
+            class="rcx-box rcx-box--full rcx-callout__content"
+          >
+            This is a generic description.
+          </div>
         </div>
       </div>
     </section>
@@ -47,14 +51,18 @@ exports[`[CheckBox Rendering] renders Danger without crashing 1`] = `
         class="rcx-box rcx-box--full rcx-callout__wrapper"
       >
         <div
-          class="rcx-box rcx-box--full rcx-callout__title"
-        >
-          This is a danger message
-        </div>
-        <div
-          class="rcx-box rcx-box--full rcx-callout__content"
+          class="rcx-box rcx-box--full rcx-callout__wrapper-content"
         >
-          This is a generic description.
+          <div
+            class="rcx-box rcx-box--full rcx-callout__title"
+          >
+            This is a danger message
+          </div>
+          <div
+            class="rcx-box rcx-box--full rcx-callout__content"
+          >
+            This is a generic description.
+          </div>
         </div>
       </div>
     </section>
@@ -78,14 +86,18 @@ exports[`[CheckBox Rendering] renders Default without crashing 1`] = `
         class="rcx-box rcx-box--full rcx-callout__wrapper"
       >
         <div
-          class="rcx-box rcx-box--full rcx-callout__title"
+          class="rcx-box rcx-box--full rcx-callout__wrapper-content"
         >
-          This is a generic title
-        </div>
-        <div
-          class="rcx-box rcx-box--full rcx-callout__content"
-        >
-          This is a generic description.
+          <div
+            class="rcx-box rcx-box--full rcx-callout__title"
+          >
+            This is a generic title
+          </div>
+          <div
+            class="rcx-box rcx-box--full rcx-callout__content"
+          >
+            This is a generic description.
+          </div>
         </div>
       </div>
     </section>
@@ -109,14 +121,18 @@ exports[`[CheckBox Rendering] renders Info without crashing 1`] = `
         class="rcx-box rcx-box--full rcx-callout__wrapper"
       >
         <div
-          class="rcx-box rcx-box--full rcx-callout__title"
+          class="rcx-box rcx-box--full rcx-callout__wrapper-content"
         >
-          This is a info message
-        </div>
-        <div
-          class="rcx-box rcx-box--full rcx-callout__content"
-        >
-          This is a generic description.
+          <div
+            class="rcx-box rcx-box--full rcx-callout__title"
+          >
+            This is a info message
+          </div>
+          <div
+            class="rcx-box rcx-box--full rcx-callout__content"
+          >
+            This is a generic description.
+          </div>
         </div>
       </div>
     </section>
@@ -140,14 +156,18 @@ exports[`[CheckBox Rendering] renders Success without crashing 1`] = `
         class="rcx-box rcx-box--full rcx-callout__wrapper"
       >
         <div
-          class="rcx-box rcx-box--full rcx-callout__title"
-        >
-          This is a success message
-        </div>
-        <div
-          class="rcx-box rcx-box--full rcx-callout__content"
+          class="rcx-box rcx-box--full rcx-callout__wrapper-content"
         >
-          This is a generic description.
+          <div
+            class="rcx-box rcx-box--full rcx-callout__title"
+          >
+            This is a success message
+          </div>
+          <div
+            class="rcx-box rcx-box--full rcx-callout__content"
+          >
+            This is a generic description.
+          </div>
         </div>
       </div>
     </section>
@@ -171,14 +191,82 @@ exports[`[CheckBox Rendering] renders Warning without crashing 1`] = `
         class="rcx-box rcx-box--full rcx-callout__wrapper"
       >
         <div
-          class="rcx-box rcx-box--full rcx-callout__title"
+          class="rcx-box rcx-box--full rcx-callout__wrapper-content"
+        >
+          <div
+            class="rcx-box rcx-box--full rcx-callout__title"
+          >
+            This is a warning message
+          </div>
+          <div
+            class="rcx-box rcx-box--full rcx-callout__content"
+          >
+            This is a generic description.
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</body>
+`;
+
+exports[`[CheckBox Rendering] renders WithActions without crashing 1`] = `
+<body>
+  <div>
+    <section
+      class="rcx-box rcx-box--full  rcx-callout"
+    >
+      <i
+        aria-hidden="true"
+        class="rcx-box rcx-box--full rcx-icon--name-info-circled rcx-icon  rcx-callout__icon rcx-css-4pvxx3"
+      >
+        
+      </i>
+      <div
+        class="rcx-box rcx-box--full rcx-callout__wrapper"
+      >
+        <div
+          class="rcx-box rcx-box--full rcx-callout__wrapper-content"
         >
-          This is a warning message
+          <div
+            class="rcx-box rcx-box--full rcx-callout__title"
+          >
+            This is a generic title
+          </div>
+          <div
+            class="rcx-box rcx-box--full rcx-callout__content"
+          >
+            This is a generic description.
+          </div>
         </div>
         <div
-          class="rcx-box rcx-box--full rcx-callout__content"
+          class="rcx-box rcx-box--full rcx-callout__actions"
         >
-          This is a generic description.
+          <div
+            class="rcx-button-group rcx-button-group--align-start"
+            role="group"
+          >
+            <button
+              class="rcx-box rcx-box--full rcx-button--small rcx-button  rcx-button-group__item"
+              type="button"
+            >
+              <span
+                class="rcx-button--content"
+              >
+                Button
+              </span>
+            </button>
+            <button
+              class="rcx-box rcx-box--full rcx-button--small rcx-button  rcx-button-group__item"
+              type="button"
+            >
+              <span
+                class="rcx-button--content"
+              >
+                Button
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </section>
@@ -202,9 +290,13 @@ exports[`[CheckBox Rendering] renders WithDescriptionOnly without crashing 1`] =
         class="rcx-box rcx-box--full rcx-callout__wrapper"
       >
         <div
-          class="rcx-box rcx-box--full rcx-callout__content"
+          class="rcx-box rcx-box--full rcx-callout__wrapper-content"
         >
-          This is a generic description.
+          <div
+            class="rcx-box rcx-box--full rcx-callout__content"
+          >
+            This is a generic description.
+          </div>
         </div>
       </div>
     </section>