feat: SidePanel components

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

@@ -0,0 +1,19 @@
+import { composeStories } from '@storybook/react';
+import { axe } from 'jest-axe';
+
+import { render } from '../../testing';
+import * as stories from './SidePanel.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/SidePanel/SidePanel.stories.tsx

@@ -0,0 +1,75 @@
+import type { Meta, StoryFn } from '@storybook/react';
+
+import {
+  SidePanel,
+  SidePanelSection,
+  SidePanelHeader,
+  SidePanelHeaderTitle,
+  SidePanelList,
+  SidePanelListItem,
+} from '.';
+import {
+  Avatar,
+  Box,
+  Icon,
+  IconButton,
+  InputBox,
+  SideBarItem,
+  SideBarItemAvatarWrapper,
+  SideBarItemBadge,
+  SideBarItemIcon,
+  SideBarItemMenu,
+  SideBarItemTitle,
+} from '../..';
+import { MenuTemplate, leterAvatarUrls, names } from '../SideBarV2/helpers';
+
+export default {
+  title: 'Navigation/SidePanel',
+  component: SidePanel,
+  decorators: [
+    (Story) => (
+      <Box display='flex' h='90vh' w='x276'>
+        <Story />
+      </Box>
+    ),
+  ],
+} as Meta<typeof SidePanel>;
+
+const Template: StoryFn<typeof SidePanel> = (args) => (
+  <SidePanel {...args}>
+    <SidePanelHeader>
+      <SidePanelHeaderTitle>All</SidePanelHeaderTitle>
+      <IconButton icon='burger-menu' size='x28' title='menu' />
+    </SidePanelHeader>
+    <SidePanelSection>
+      <InputBox
+        type='text'
+        placeholder='Search'
+        addon={<Icon name='magnifier' size='x18' />}
+      />
+    </SidePanelSection>
+    <Box overflowY='auto' height='full'>
+      <SidePanelList>
+        {new Array(20).fill(null).map((_, index) => (
+          <SidePanelListItem key={index}>
+            <SideBarItem href='#'>
+              <SideBarItemAvatarWrapper>
+                <Avatar
+                  size='x20'
+                  url={leterAvatarUrls[index % 4]}
+                  alt='avatar'
+                />
+              </SideBarItemAvatarWrapper>
+              <SideBarItemIcon icon='team' />
+              <SideBarItemTitle>{names[index % 10]}</SideBarItemTitle>
+              <SideBarItemBadge title='unread messages' children={index + 3} />
+              <SideBarItemMenu children={<MenuTemplate />} />
+            </SideBarItem>
+          </SidePanelListItem>
+        ))}
+      </SidePanelList>
+    </Box>
+  </SidePanel>
+);
+
+export const Default = Template.bind({});

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

@@ -0,0 +1,44 @@
+@use '../../styles/colors.scss';
+@use '../../styles/lengths.scss';
+@use '../../styles/typography.scss';
+
+$sidepanel-color-default: colors.font(default);
+
+%section-base {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: lengths.padding(8);
+}
+
+.rcx-sidepanel {
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 auto;
+
+  width: lengths.size(276);
+
+  color: $sidepanel-color-default;
+  border-right: lengths.border-width(default) solid colors.stroke(extra-light);
+
+  background-color: colors.surface(room);
+
+  &-section {
+    @extend %section-base;
+    padding: lengths.padding(16);
+  }
+
+  &-header {
+    @extend %section-base;
+    height: lengths.size(44);
+    padding-inline: lengths.padding(16);
+
+    &__title {
+      @include typography.use-font-scale(h4);
+    }
+  }
+
+  &-list {
+    padding-block: lengths.padding(8);
+  }
+}

packages/fuselage/src/components/SidePanel/SidePanel.tsx

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'react';
+
+export const SidePanel = ({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={['rcx-sidepanel', className].filter(Boolean).join(' ')}
+    {...props}
+  />
+);

packages/fuselage/src/components/SidePanel/SidePanelDivider.tsx

@@ -0,0 +1,5 @@
+import { Divider } from '../Divider';
+
+export const SidePanelDivider = () => (
+  <Divider rcx-sidepanel--divider mbs={-2} mbe={0} />
+);

packages/fuselage/src/components/SidePanel/SidePanelHeader.tsx

@@ -0,0 +1,16 @@
+import type { HTMLAttributes } from 'react';
+
+import { SidePanelDivider } from './SidePanelDivider';
+
+export const SidePanelHeader = ({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) => (
+  <>
+    <div
+      className={['rcx-sidepanel-header', className].filter(Boolean).join(' ')}
+      {...props}
+    />
+    <SidePanelDivider />
+  </>
+);

packages/fuselage/src/components/SidePanel/SidePanelHeaderTitle.tsx

@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from 'react';
+
+export const SidePanelHeaderTitle = ({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={['rcx-sidepanel-header__title', className]
+      .filter(Boolean)
+      .join(' ')}
+    {...props}
+  />
+);

packages/fuselage/src/components/SidePanel/SidePanelList.tsx

@@ -0,0 +1,16 @@
+import type { HTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+
+export const SidePanelList = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(function SidePanelList({ className, ...props }, ref) {
+  return (
+    <div
+      role='list'
+      ref={ref}
+      className={['rcx-sidepanel-list', className].filter(Boolean).join(' ')}
+      {...props}
+    />
+  );
+});

packages/fuselage/src/components/SidePanel/SidePanelListItem.tsx

@@ -0,0 +1,18 @@
+import type { HTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+
+export const SidePanelListItem = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(function SidePanelListItem({ className, ...props }, ref) {
+  return (
+    <div
+      role='listitem'
+      ref={ref}
+      className={['rcx-sidepanel-list__item', className]
+        .filter(Boolean)
+        .join(' ')}
+      {...props}
+    />
+  );
+});

packages/fuselage/src/components/SidePanel/SidePanelSection.tsx

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'react';
+
+export const SidePanelSection = ({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={['rcx-sidepanel-section', className].filter(Boolean).join(' ')}
+    {...props}
+  />
+);

packages/fuselage/src/components/SidePanel/SidePanelSectionAction.tsx

@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from 'react';
+
+export const SidePanelSectionAction = ({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={['rcx-sidepanel-section__action', className]
+      .filter(Boolean)
+      .join(' ')}
+    {...props}
+  />
+);

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

@@ -0,0 +1,8 @@
+export * from './SidePanel';
+export * from './SidePanelSection';
+export * from './SidePanelSectionAction';
+export * from './SidePanelHeaderTitle';
+export * from './SidePanelHeader';
+export * from './SidePanelList';
+export * from './SidePanelListItem';
+export * from './SidePanelDivider';

packages/fuselage/src/components/index.scss

@@ -33,6 +33,7 @@
 @import './RadioButton/RadioButton.styles.scss';
 @import './Select/Select.styles.scss';
 @import './Sidebar/Sidebar.styles.scss';
+@import './SidePanel/SidePanel.styles.scss';
 @import './SideBarV2/SideBar.styles.scss';
 @import './Skeleton/Skeleton.styles.scss';
 @import './States/States.styles.scss';

packages/fuselage/src/components/index.ts

@@ -62,6 +62,7 @@ export * from './Popover';
 export * from './SelectInput';
 export { default as Sidebar } from './Sidebar';
 export * from './Sidebar';
+export * from './SidePanel';
 export * from './SideBarV2';
 export * from './Skeleton';
 export * from './States';