feat(fuselage): Sidebar and Sidepanel components

.changeset/moody-rivers-grab.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/fuselage": minor
+---
+
+feat(fuselage): `Sidebar` and `Sidepanel` components

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

@@ -0,0 +1,19 @@
+import { composeStories } from '@storybook/react';
+import { axe } from 'jest-axe';
+
+import { render } from '../../testing';
+import * as stories from './Sidebar.stories';
+
+const { Default } = composeStories(stories);
+
+describe('[Sidebar Default story]', () => {
+  it('renders without crashing', () => {
+    render(<Default />);
+  });
+  it('should have no a11y violations', async () => {
+    const { container } = render(<Default />);
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});

packages/fuselage/src/components/SidebarV2/Sidebar.stories.tsx

@@ -0,0 +1,184 @@
+import { action } from '@storybook/addon-actions';
+import type { Meta, StoryFn } from '@storybook/react';
+
+import {
+  SidebarV2 as Sidebar,
+  SidebarV2Accordion as SidebarAccordion,
+  SidebarV2AccordionItem as SidebarAccordionItem,
+  SidebarV2Banner as SidebarBanner,
+  SidebarV2CollapseGroup as SidebarCollapseGroup,
+  SidebarV2FooterContent as SidebarFooterContent,
+  SidebarV2ItemAction as SidebarItemAction,
+  SidebarV2Link as SidebarLink,
+  SidebarV2ItemBadge as SidebarItemBadge,
+  SidebarV2Media as SidebarMedia,
+  SidebarV2MediaTitle as SidebarMediaTitle,
+  SidebarV2MediaController as SidebarMediaController,
+  SidebarV2ListItem as SidebarListItem,
+  SidebarV2Section as SidebarSection,
+  SidebarV2Footer as SidebarFooter,
+} from '.';
+import { IconButton, TextInput, Icon, Box } from '../..';
+import { Condensed } from './SidebarItem/SidebarItem.stories';
+import { GenericNoAvatarItem, MenuTemplate } from './helpers';
+
+export default {
+  title: 'Navigation/SidebarV2',
+  component: Sidebar,
+} as Meta<typeof Sidebar>;
+
+export const Default: StoryFn<typeof Sidebar> = (props) => (
+  <Box h='90vh' w='x280'>
+    <Sidebar {...props}>
+      <SidebarBanner
+        title='You’ve reached the limit active contacts this month'
+        linkText='Learn more'
+        linkProps={{ href: '#' }}
+        onClick={action('click')}
+        addon={<Icon name='warning' color='danger' size='x24' />}
+      />
+      <SidebarSection>
+        <TextInput
+          addon={<Icon name='magnifier' size='x20' />}
+          small
+          placeholder='Search'
+        />
+        <IconButton icon='sort' title='Sort' medium />
+      </SidebarSection>
+      <SidebarAccordion>
+        <SidebarAccordionItem
+          title='Omnichannel'
+          badge={
+            <SidebarItemBadge
+              title='25 unred messages'
+              children={25}
+              variant='primary'
+            />
+          }
+          defaultExpanded
+        >
+          <SidebarLink
+            icon='arrow-down-box'
+            href='#'
+            selected
+            badge={
+              <SidebarItemBadge
+                title='12 unread messages'
+                children={12}
+                variant='primary'
+              />
+            }
+            menu={<MenuTemplate />}
+          >
+            All
+          </SidebarLink>
+          <SidebarLink
+            icon='user'
+            href='#'
+            badge={
+              <SidebarItemBadge title='10 unread messages' children={10} />
+            }
+            menu={<MenuTemplate />}
+          >
+            Assigned to me
+          </SidebarLink>
+          <SidebarLink
+            icon='queue'
+            href='#'
+            badge={
+              <SidebarItemBadge
+                title='3 unread messages'
+                children={3}
+                variant='danger'
+              />
+            }
+            menu={<MenuTemplate />}
+          >
+            Unassigned
+          </SidebarLink>
+          <SidebarLink icon='pause' href='#' menu={<MenuTemplate />}>
+            On hold
+          </SidebarLink>
+        </SidebarAccordionItem>
+        <SidebarAccordionItem
+          title='Team chat'
+          defaultExpanded={true}
+          badge={
+            <SidebarItemBadge
+              title='99+ unread messages'
+              children='99+'
+              variant='danger'
+            />
+          }
+        >
+          <SidebarCollapseGroup
+            title='Favorites'
+            defaultExpanded
+            badge={
+              <SidebarItemBadge
+                title='99+ unread messages'
+                children='99+'
+                variant='danger'
+              />
+            }
+          >
+            {Array.from({ length: 4 }).map((_, i) => (
+              <GenericNoAvatarItem key={i} i={i} />
+            ))}
+          </SidebarCollapseGroup>
+          <SidebarCollapseGroup
+            title='Teams'
+            defaultExpanded
+            badge={
+              <SidebarItemBadge
+                title='99+ unread messages'
+                children='99+'
+                variant='danger'
+              />
+            }
+          >
+            <Condensed />
+            <SidebarListItem>
+              <SidebarItemAction onClick={action('add team')}>
+                Add team
+              </SidebarItemAction>
+            </SidebarListItem>
+          </SidebarCollapseGroup>
+          <SidebarCollapseGroup
+            title='Discussions'
+            defaultExpanded
+            badge={
+              <SidebarItemBadge
+                title='99+ unread messages'
+                children='99+'
+                variant='danger'
+              />
+            }
+          >
+            <Condensed />
+            <SidebarListItem>
+              <SidebarItemAction onClick={action('add team')}>
+                Add discussion
+              </SidebarItemAction>
+            </SidebarListItem>
+          </SidebarCollapseGroup>
+        </SidebarAccordionItem>
+      </SidebarAccordion>
+      <SidebarMedia>
+        <SidebarMediaTitle>3 calls in queue</SidebarMediaTitle>
+        <SidebarMediaController label='Call'>
+          <IconButton icon='user-arrow-right' small aria-label='user-forward' />
+          <IconButton icon='mic' small aria-label='mic' />
+          <IconButton icon='pause-unfilled' small aria-label='pause' />
+        </SidebarMediaController>
+        {/* <GenericCallItem is='div' /> */}
+      </SidebarMedia>
+      <SidebarFooter>
+        <SidebarFooterContent>Powered by Rocket.Chat</SidebarFooterContent>
+        <SidebarFooterContent color='titles-labels'>
+          Free edition
+        </SidebarFooterContent>
+      </SidebarFooter>
+    </Sidebar>
+  </Box>
+);