chore(fuselage): Split TopBar components (#1304)

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

@@ -6,7 +6,7 @@ import * as stories from './Sidebar.stories';
 
 const { Default } = composeStories(stories);
 
-describe('[Throbber Component]', () => {
+describe('[Sidebar Component]', () => {
   it('renders without crashing', () => {
     render(<Default />);
   });

packages/fuselage/src/components/Sidebar/SidebarActions.tsx

@@ -6,9 +6,12 @@ import { ButtonGroup } from '../ButtonGroup';
 
 type SidebarActionsProps = ComponentProps<typeof ButtonGroup>;
 
-export const SidebarActions = (props: SidebarActionsProps) => (
-  <ButtonGroup {...props} />
-);
+export const SidebarActions = forwardRef(function SidebarActions(
+  props: SidebarActionsProps,
+  ref: Ref<HTMLDivElement>
+) {
+  return <ButtonGroup ref={ref} {...props} />;
+});
 
 type SidebarActionProps = ComponentProps<typeof IconButton>;
 

packages/fuselage/src/components/Sidebar/TopBar/TopBar.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 './TopBar.stories';
+
+const testCases = Object.values(composeStories(stories)).map((Story) => [
+  Story.storyName || 'Story',
+  Story,
+]);
+
+describe('[TopBar 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/Sidebar/TopBar.stories.tsx → packages/fuselage/src/components/Sidebar/TopBar/TopBar.stories.tsx

@@ -2,10 +2,16 @@ import { Title, Description, Primary, Stories } from '@storybook/addon-docs';
 import type { ComponentStory, ComponentMeta } from '@storybook/react';
 import React from 'react';
 
-import { SidebarSection } from '.';
-import { TopBarToolBox } from '..';
+import {
+  TopBar,
+  TopBarAction,
+  TopBarActions,
+  TopBarAvatar,
+  TopBarTitle,
+  TopBarToolBox,
+} from '.';
+import { SidebarSection } from '..';
 import { Avatar } from '../..';
-import TopBar from './TopBar';
 
 export default {
   title: 'Sidebar/TopBar',
@@ -31,40 +37,41 @@ export const Default: ComponentStory<typeof TopBar> = () => (
   <>
     <SidebarSection>
       <Avatar
-        size={TopBar.Avatar.size}
+        size={TopBarAvatar.size}
+        alt=''
         url={
           'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAAAAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAgMREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6LxqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVrjbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRkeX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkBSuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlPUH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z'
         }
       />
-      <TopBar.Actions>
-        <TopBar.Action icon='home' />
-        <TopBar.Action icon='magnifier' />
-        <TopBar.Action icon='globe' />
-        <TopBar.Action icon='sort' />
-        <TopBar.Action icon='edit-rounded' />
-      </TopBar.Actions>
+      <TopBarActions>
+        <TopBarAction icon='home' title='home' />
+        <TopBarAction icon='magnifier' title='search' />
+        <TopBarAction icon='globe' title='discover' />
+        <TopBarAction icon='sort' title='sort' />
+        <TopBarAction icon='edit-rounded' title='edit' />
+      </TopBarActions>
     </SidebarSection>
     <TopBarToolBox>
-      <TopBar.Title>Title</TopBar.Title>
-      <TopBar.Actions>
-        <TopBar.Action success icon='phone' />
-        <TopBar.Action icon='message-disabled' />
-      </TopBar.Actions>
+      <TopBarTitle>Title</TopBarTitle>
+      <TopBarActions>
+        <TopBarAction success icon='phone' title='call' />
+        <TopBarAction icon='message-disabled' title='message' />
+      </TopBarActions>
     </TopBarToolBox>
     <TopBarToolBox>
-      <TopBar.Title>
+      <TopBarTitle>
         Long Title Long Title Long Title Long Title Long Title Long Title Long
         Title Long Title Long Title Long Title Long Title Long Title Long Title
         Long Title Long Title Long Title Long Title Long Title Long Title Long
         Title Long Title
-      </TopBar.Title>
-      <TopBar.Actions>
-        <TopBar.Action icon='dialpad' />
-        <TopBar.Action success icon='phone' />
-        <TopBar.Action danger icon='phone-off' />
-        <TopBar.Action icon='message' />
-        <TopBar.Action icon='contact' />
-      </TopBar.Actions>
+      </TopBarTitle>
+      <TopBarActions>
+        <TopBarAction icon='dialpad' title='dialpad' />
+        <TopBarAction success icon='phone' title='call' />
+        <TopBarAction danger icon='phone-off' title='end' />
+        <TopBarAction icon='message' title='message' />
+        <TopBarAction icon='contact' title='contact' />
+      </TopBarActions>
     </TopBarToolBox>
   </>
 );

packages/fuselage/src/components/Sidebar/TopBar/TopBar.tsx

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+
+type TopBarProps = {
+  children?: ReactNode;
+  className?: string;
+};
+
+export const TopBar = ({ className, ...props }: TopBarProps) => (
+  <div
+    className={['rc-box rc-box--full rcx-sidebar-topbar', className]
+      .filter(Boolean)
+      .join(' ')}
+    {...props}
+  />
+);

packages/fuselage/src/components/Sidebar/TopBar/TopBarAction.tsx

@@ -0,0 +1,13 @@
+import type { ComponentProps, Ref } from 'react';
+import React, { forwardRef } from 'react';
+
+import { SidebarAction } from '../SidebarActions';
+
+type TopBarActionProps = ComponentProps<typeof SidebarAction>;
+
+export const TopBarAction = forwardRef(function TopBarAction(
+  props: TopBarActionProps,
+  ref: Ref<HTMLElement>
+) {
+  return <SidebarAction ref={ref} {...props} />;
+});

packages/fuselage/src/components/Sidebar/TopBar/TopBarActions.tsx

@@ -0,0 +1,13 @@
+import type { ComponentProps, Ref } from 'react';
+import React, { forwardRef } from 'react';
+
+import { SidebarActions } from '../SidebarActions';
+
+type TopBarActionsProps = ComponentProps<typeof SidebarActions>;
+
+export const TopBarActions = forwardRef(function TopBarActions(
+  props: TopBarActionsProps,
+  ref: Ref<HTMLDivElement>
+) {
+  return <SidebarActions ref={ref} {...props} />;
+});

packages/fuselage/src/components/Sidebar/TopBar/TopBarSection.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { SidebarDivider } from '../SidebarDivider';
+import { TopBar } from './TopBar';
+import { TopBarWrapper } from './TopBarWrapper';
+
+type TopBarSectionProps = {
+  children?: React.ReactNode;
+  className?: string;
+};
+
+export const TopBarSection = ({
+  className,
+  children,
+  ...props
+}: TopBarSectionProps) => (
+  <TopBar
+    className={['rcx-sidebar-topbar--section', className]
+      .filter(Boolean)
+      .join(' ')}
+    {...props}
+  >
+    <TopBarWrapper children={children} />
+    <SidebarDivider />
+  </TopBar>
+);

packages/fuselage/src/components/Sidebar/TopBar/TopBarTitle.tsx

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+
+import Box from '../../Box';
+
+type TopBarTitleProps = {
+  children?: ReactNode;
+};
+
+export const TopBarTitle = (props: TopBarTitleProps) => (
+  <Box className='rcx-sidebar-topbar__title' withTruncatedText {...props} />
+);

packages/fuselage/src/components/Sidebar/TopBar/TopBarToolBox.tsx

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+
+import { SidebarDivider } from '../SidebarDivider';
+import { TopBar } from './TopBar';
+import { TopBarWrapper } from './TopBarWrapper';
+
+type TopBarToolBoxProps = {
+  children?: ReactNode;
+  className?: string;
+};
+
+export const TopBarToolBox = ({
+  children,
+  className,
+  ...props
+}: TopBarToolBoxProps) => (
+  <TopBar
+    className={['rcx-sidebar-topbar--toolbox', className]
+      .filter(Boolean)
+      .join(' ')}
+    {...props}
+  >
+    <TopBarWrapper children={children} />
+    <SidebarDivider />
+  </TopBar>
+);

packages/fuselage/src/components/Sidebar/TopBar/TopBarWrapper.tsx

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+
+type TopBarWrapperProps = {
+  children?: ReactNode;
+};
+
+export const TopBarWrapper = ({ children }: TopBarWrapperProps) => (
+  <div
+    className='rc-box rc-box--full rcx-sidebar-topbar__wrapper'
+    children={children}
+  />
+);