feat(fuselage): new Bubble component

.changeset/ninety-turkeys-happen.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/fuselage": minor
+---
+
+feat(fuselage): new `Bubble` component

packages/fuselage/src/components/Bubble/Bubble.spec.tsx

@@ -0,0 +1,31 @@
+import { composeStories } from '@storybook/testing-react';
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+import React from 'react';
+
+import * as stories from './Bubble.stories';
+
+const testCases = Object.values(composeStories(stories)).map((Story) => [
+  Story.storyName || 'Story',
+  Story,
+]);
+
+describe('[Bubble Rendering]', () => {
+  test.each(testCases)(
+    `renders %s without crashing`,
+    async (_storyname, Story) => {
+      const tree = render(<Story />);
+      expect(tree.baseElement).toMatchSnapshot();
+    }
+  );
+
+  test.each(testCases)(
+    '%s should have no a11y violations',
+    async (_storyname, Story) => {
+      const { container } = render(<Story />);
+
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+    }
+  );
+});

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

@@ -0,0 +1,33 @@
+import { action } from '@storybook/addon-actions';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import React from 'react';
+
+import { Bubble } from '../..';
+
+export default {
+  title: 'Data Display/Bubble',
+  component: Bubble,
+} as ComponentMeta<typeof Bubble>;
+
+const Template: ComponentStory<typeof Bubble> = (args) => <Bubble {...args} />;
+
+export const IconAndLabel = Template.bind({});
+IconAndLabel.args = {
+  children: 'New messages',
+  onClick: action('click'),
+  icon: 'arrow-down',
+};
+
+export const Dismissable = Template.bind({});
+Dismissable.args = {
+  children: 'New messages',
+  icon: 'arrow-down',
+  onClick: action('click'),
+  onDismiss: action('dismiss'),
+};
+
+export const LabelOnly = Template.bind({});
+LabelOnly.args = {
+  children: 'See new messages',
+  onClick: action('click'),
+};

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

@@ -0,0 +1,43 @@
+@use '../../styles/colors.scss';
+@use '../../styles/lengths.scss';
+@use '../../styles/typography.scss';
+
+@use '../../styles/variables/buttons.scss' as buttonColors;
+@use '../../styles/primitives/button.scss';
+@use '../../styles/mixins/interactivity.scss';
+
+.rcx-bubble {
+  display: flex;
+  align-items: center;
+
+  &__content,
+  &__dismiss {
+    @include typography.use-font-scale(c2);
+    @include button.kind-variant(buttonColors.$primary);
+    @include clickable;
+    @include click-animation;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    height: lengths.size(28);
+
+    padding-inline-start: lengths.padding(12);
+    padding-inline-end: lengths.padding(16);
+
+    border-radius: lengths.border-radius(extra-large);
+  }
+
+  &__group {
+    :first-child {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    :last-child {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+}

packages/fuselage/src/components/Bubble/Bubble.tsx

@@ -0,0 +1,46 @@
+import type { Keys as IconName } from '@rocket.chat/icons';
+import type { AllHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
+import React from 'react';
+
+import { Icon } from '../Icon';
+
+type BubbleProps = {
+  children: ReactNode;
+  onClick: () => void;
+  icon?: IconName;
+  onDismiss?: () => void;
+  contentProps?: ButtonHTMLAttributes<HTMLButtonElement>;
+  dismissProps?: ButtonHTMLAttributes<HTMLButtonElement>;
+} & AllHTMLAttributes<HTMLDivElement>;
+
+export const Bubble = ({
+  children,
+  onClick,
+  icon,
+  onDismiss,
+  contentProps,
+  dismissProps,
+  ...props
+}: BubbleProps) => (
+  <div
+    className={`rcx-bubble rcx-box rcx-box--full ${
+      onDismiss ? 'rcx-bubble__group' : ''
+    }`}
+    {...props}
+  >
+    <button className='rcx-bubble__content' onClick={onClick} {...contentProps}>
+      {icon && <Icon name={icon} size='x16' mie={8} />}
+      <span>{children}</span>
+    </button>
+    {onDismiss && (
+      <button
+        aria-label={`Dismiss ${children}`}
+        className='rcx-bubble__dismiss'
+        onClick={onDismiss}
+        {...dismissProps}
+      >
+        <Icon name='cross-small' size='x16' />
+      </button>
+    )}
+  </div>
+);

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

@@ -0,0 +1,78 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[Bubble Rendering] renders Dismissable without crashing 1`] = `
+<body>
+  <div>
+    <div
+      class="rcx-bubble rcx-box rcx-box--full rcx-bubble__group"
+    >
+      <button
+        class="rcx-bubble__content"
+      >
+        <i
+          aria-hidden="true"
+          class="rcx-box rcx-box--full rcx-icon--name-arrow-down rcx-icon rcx-css-gcnmf8"
+        >
+          
+        </i>
+        <span>
+          New messages
+        </span>
+      </button>
+      <button
+        aria-label="Dismiss New messages"
+        class="rcx-bubble__dismiss"
+      >
+        <i
+          aria-hidden="true"
+          class="rcx-box rcx-box--full rcx-icon--name-cross-small rcx-icon rcx-css-1g87xs3"
+        >
+          
+        </i>
+      </button>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`[Bubble Rendering] renders IconAndLabel without crashing 1`] = `
+<body>
+  <div>
+    <div
+      class="rcx-bubble rcx-box rcx-box--full "
+    >
+      <button
+        class="rcx-bubble__content"
+      >
+        <i
+          aria-hidden="true"
+          class="rcx-box rcx-box--full rcx-icon--name-arrow-down rcx-icon rcx-css-gcnmf8"
+        >
+          
+        </i>
+        <span>
+          New messages
+        </span>
+      </button>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`[Bubble Rendering] renders LabelOnly without crashing 1`] = `
+<body>
+  <div>
+    <div
+      class="rcx-bubble rcx-box rcx-box--full "
+    >
+      <button
+        class="rcx-bubble__content"
+      >
+        <span>
+          See new messages
+        </span>
+      </button>
+    </div>
+  </div>
+</body>
+`;

packages/fuselage/src/components/Bubble/index.ts

@@ -0,0 +1 @@
+export * from './Bubble';

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

@@ -4,6 +4,7 @@
 @use '../../styles/variables/buttons.scss' as colors;
 @use '../../styles/primitives/button.scss';
 @use '../../styles/mixins/size.scss';
+@use '../../styles/mixins/interactivity.scss';
 @import '../../styles/mixins/states.scss';
 
 .rcx-button {
@@ -33,21 +34,13 @@
     }
   }
 
-  @mixin click-animation() {
-    @include on-active {
-      > *:not(div[role='status']) {
-        transform: translateY(1px);
-      }
-    }
-  }
-
   display: inline-block;
 
   text-align: center;
   white-space: nowrap;
   text-decoration: none;
 
-  @include click-animation();
+  @include click-animation($excludeRole: 'status');
 
   .rcx-button--content {
     display: inline-block;
@@ -111,7 +104,7 @@
 
   &--icon {
     @include button.kind-variant(colors.$icon);
-    @include click-animation();
+    @include click-animation('status');
 
     padding: 0;
 

packages/fuselage/src/components/index.scss

@@ -5,6 +5,7 @@
 @import './Badge/Badge.styles.scss';
 @import './Box/Box.styles.scss';
 @import './Button/Button.styles.scss';
+@import './Bubble/Bubble.styles.scss';
 @import './ButtonGroup/ButtonGroup.styles.scss';
 @import './Callout/Callout.styles.scss';
 @import './Card/Card.styles.scss';

packages/fuselage/src/components/index.ts

@@ -8,6 +8,7 @@ export { default as Banner } from './Banner';
 export { default as Box } from './Box';
 export { useArrayLikeClassNameProp } from '../hooks/useArrayLikeClassNameProp';
 export { default as Button, ActionButton, IconButton } from './Button';
+export * from './Bubble';
 export * from './ButtonGroup';
 export * from './Callout';
 export * from './Card';

packages/fuselage/src/styles/lengths.scss

@@ -87,14 +87,24 @@ $border-radius-sizes: (
   'small': 2,
   'medium': 4,
   'large': 8,
+  'extra-large': 20,
 );
 
 @function border-radius($value) {
   @if $value == 'none' {
     @return 0;
   } @else if $value == 'full' {
     @return 9999px;
-  } @else if $value == 'small' or $value == 'medium' or $value == 'large' {
+  } @else if
+    $value ==
+    'small' or
+    $value ==
+    'medium' or
+    $value ==
+    'large' or
+    $value ==
+    'extra-large'
+  {
     @return functions.theme(
       'border-radius-#{$value}',
       functions.to-rem(map.get($border-radius-sizes, $value))

packages/fuselage/src/styles/mixins/interactivity.scss

@@ -8,3 +8,11 @@
     cursor: not-allowed;
   }
 }
+
+@mixin click-animation($excludeRole: false) {
+  @include on-active {
+    > *:not([role='#{$excludeRole}']) {
+      transform: translateY(1px);
+    }
+  }
+}