added sidebar

src/components/Sidebar/Sidebar.stories.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { withDesign } from 'storybook-addon-designs';
+import { Sidebar, SidebarProps } from './Sidebar';
+import { IconButton } from '../IconButton';
+import { MdClose } from 'react-icons/md';
+import styled from 'styled-components';
+import { pxToRem } from '../../shared';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/Sidebar',
+  component: Sidebar,
+  args: {
+    overlay: false,
+  },
+  parameters: {
+    design: [
+      {
+        name: 'light',
+        type: 'figma',
+        url: 'https://www.figma.com/file/qUvylGh5ubOWlpqlplVORt/IZ-Design-System---%F0%9F%9A%80-Live?type=design&node-id=2755-16191&mode=design&t=dl8DfP2GTSxVMB11-4',
+      },
+      {
+        name: 'dark',
+        type: 'figma',
+        url: 'https://www.figma.com/file/qUvylGh5ubOWlpqlplVORt/IZ-Design-System---%F0%9F%9A%80-Live?type=design&node-id=2757-16212&mode=design&t=dl8DfP2GTSxVMB11-4',
+      },
+    ],
+  },
+  decorators: [withDesign],
+} as Meta<typeof Sidebar>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const IconButtonComponent = () => {
+  return (
+    <IconButton size='large' aria-label='Close menu'>
+      <MdClose />
+    </IconButton>
+  );
+};
+const ListComponent = () => {
+  return (
+    <ul>
+      <li>List item</li>
+      <li>List item 2</li>
+      <li>List item 3</li>
+    </ul>
+  );
+};
+const Wrapper = styled.div<SidebarProps>`
+  height: ${pxToRem(450)};
+`;
+const Template: StoryFn<typeof Sidebar> = (args) => (
+  <Wrapper>
+    <Sidebar {...args} />
+  </Wrapper>
+);
+
+/**
+ * Default variant
+ */
+export const DefaultVariant = Template.bind({});
+/**
+ * Sidebar with overlay, content and icon button in header
+ */
+export const OverlayContentIcon = Template.bind({});
+OverlayContentIcon.args = {
+  overlay: true,
+  sidebarContent: <ListComponent />,
+  headerContent: <IconButtonComponent />,
+};
+/**
+ * Sidebar with overlay
+ */
+export const Overlay = Template.bind({});
+Overlay.args = {
+  overlay: true,
+};
+/**
+ * Sidebar with content
+ */
+export const SidebarContent = Template.bind({});
+SidebarContent.args = {
+  sidebarContent: <ListComponent />,
+};
+/**
+ * Sidebar with icon button in header
+ */
+export const HeaderContent = Template.bind({});
+HeaderContent.args = {
+  headerContent: <IconButtonComponent />,
+};

src/components/Sidebar/Sidebar.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import {
+  ComponentBaseProps,
+  generateRandomString,
+  pxToRem,
+} from '../../shared';
+import styled from 'styled-components';
+
+export interface SidebarProps extends ComponentBaseProps<HTMLDivElement> {
+  /**
+   * Header icon
+   */
+  headerContent?: React.ReactNode;
+  /**
+   * Sidebar Content
+   */
+  sidebarContent?: React.ReactNode;
+  /**
+   * Show overlay
+   */
+  overlay?: boolean;
+}
+
+/**
+ * Sidebar dimensions
+ */
+const sidebarDimensions = {
+  // Body width
+  bodyWidth: 400,
+  // Header height
+  headerHeight: 24,
+  // Header and content container width
+  contentWidth: 368,
+};
+/**
+ * Sidebar and overlay
+ */
+const SidebarWrapper = styled.div<SidebarProps>`
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+`;
+/**
+ * Sidebar overlay
+ */
+const SidebarOverlay = styled.div<SidebarProps>`
+  height: 100%;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.82);
+`;
+/**
+ * Wrapper for sidebar
+ */
+const SidebarBody = styled.div<SidebarProps>`
+  width: ${pxToRem(sidebarDimensions.bodyWidth)};
+  height: 100%;
+  background-color: ${(props) => props.theme.colors.neutral};
+  border-left: 1px solid ${(props) => props.theme.colors.grayScale.digitalBlack200};
+  ${(props) => props.theme.styles.dropshadow};
+`;
+/**
+ * Wrapper for sidebar header
+ */
+const SidebarHeader = styled.div<SidebarProps>`
+  width: ${pxToRem(sidebarDimensions.contentWidth)};
+  height: ${pxToRem(sidebarDimensions.headerHeight)};
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  margin: ${pxToRem(16)};
+`;
+/**
+ * Wrapper for content inside sidebar
+ */
+const SidebarContentWrapper = styled.div<SidebarProps>`
+  width: ${pxToRem(sidebarDimensions.contentWidth)};
+  display: flex;
+  // Calculated height for content container with removed margins and height of header
+  height: calc(100% - ${pxToRem(48 + sidebarDimensions.headerHeight)});
+  // Shorthand top right bottom left
+  margin: 0 ${pxToRem(16)} ${pxToRem(16)} ${pxToRem(16)};
+`;
+
+/**
+ * Exported sidebar component
+ */
+export const Sidebar = ({
+  id,
+  headerContent,
+  sidebarContent,
+  overlay,
+  ...restProps
+}: SidebarProps) => {
+  const componentId = id ?? generateRandomString(5);
+
+  return (
+    <SidebarWrapper id={componentId} {...restProps}>
+      {overlay && <SidebarOverlay />}
+      <SidebarBody>
+        <SidebarHeader>{headerContent}</SidebarHeader>
+        <SidebarContentWrapper>{sidebarContent}</SidebarContentWrapper>
+      </SidebarBody>
+    </SidebarWrapper>
+  );
+};

src/components/Sidebar/index.ts

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

src/components/index.ts

@@ -15,6 +15,7 @@ export * from './Link';
 export * from './NavBar';
 export * from './Radio';
 export * from './Search';
+export * from './Sidebar';
 export * from './Textarea';
 export * from './Theme';
 export * from './Typography';

src/shared/themes.ts

@@ -41,6 +41,9 @@ export const lightTheme: DefaultTheme = {
       info800: '#001C64',
     },
   },
+  styles: {
+    dropshadow: 'box-shadow: 0px 8px 25px 0px rgba(0, 0, 0, 0.15);',
+  },
 };
 
 export const darkTheme: DefaultTheme = {
@@ -84,4 +87,7 @@ export const darkTheme: DefaultTheme = {
       info800: '#B5C9FF',
     },
   },
+  styles: {
+    dropshadow: 'box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.25);',
+  },
 };