feat: SideBarV2 components

RocketChat · Sep 5, 2024 · c670ac1 · c670ac1
1 parent 1087ee8
commit c670ac1
Show file tree

Hide file tree

Showing 47 changed files with 1,845 additions and 2 deletions.
diff --git a/packages/fuselage/src/components/SideBarV2/SideBar.spec.tsx b/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();
+  });
+});
diff --git a/packages/fuselage/src/components/SideBarV2/SideBar.stories.tsx b/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 {
+  SideBar,
+  SideBarAccordion,
+  SideBarAccordionItem,
+  SideBarBanner,
+  SideBarCollapseGroup,
+  SideBarFooterContent,
+  SideBarItemAction,
+  SideBarLink,
+  SideBarItemBadge,
+  SideBarMedia,
+  SideBarMediaTitle,
+  SideBarMediaController,
+  SideBarListItem,
+  SideBarSection,
+  SideBarFooter,
+} from '.';
+import { IconButton, TextInput, Icon, Box } from '../..';
+import { Condensed } from './SideBarItem/SideBarItem.stories';
+import { GenericNoAvatarItem, MenuTemplate } from './helpers';
+
+export default {
+  title: 'Navigation/SideBar',
+  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>
+);