From 03a33bd880f3e5c84b2b324be2d4443095a12253 Mon Sep 17 00:00:00 2001 From: Sebastian Gustafsson Date: Thu, 17 Aug 2023 17:29:50 +0300 Subject: [PATCH 01/10] added sidebar --- src/components/Sidebar/Sidebar.stories.tsx | 91 ++++++++++++++++++++++ src/components/Sidebar/Sidebar.tsx | 91 ++++++++++++++++++++++ src/components/Sidebar/index.ts | 1 + src/components/index.ts | 1 + 4 files changed, 184 insertions(+) create mode 100644 src/components/Sidebar/Sidebar.stories.tsx create mode 100644 src/components/Sidebar/Sidebar.tsx create mode 100644 src/components/Sidebar/index.ts diff --git a/src/components/Sidebar/Sidebar.stories.tsx b/src/components/Sidebar/Sidebar.stories.tsx new file mode 100644 index 0000000..9a78dea --- /dev/null +++ b/src/components/Sidebar/Sidebar.stories.tsx @@ -0,0 +1,91 @@ +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, + 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; + +// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args +const IconButtonComponent = () => { + return ( + + + + ); +}; +const ListComponent = () => { + return ( + + ); +}; +const Wrapper = styled.div` + height: ${pxToRem(600)}; + width: ${pxToRem(500)}; +`; +const Template: StoryFn = (args) => ( + + + +); + +/** + * Default variant + */ +export const DefaultVariant = Template.bind({}); +/** + * Sidebar with overlay, slot and icon button in header + */ +export const OverlaySlotIcon = Template.bind({}); +OverlaySlotIcon.args = { + overlay: true, + slot: , + icon: , +}; +/** + * Sidebar with overlay + */ +export const Overlay = Template.bind({}); +Overlay.args = { + overlay: true, +}; +/** + * Sidebar with slot content + */ +export const SlotContent = Template.bind({}); +SlotContent.args = { + slot: , +}; +/** + * Sidebar with icon button in header + */ +export const IconContent = Template.bind({}); +IconContent.args = { + icon: , +}; diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx new file mode 100644 index 0000000..9e1b264 --- /dev/null +++ b/src/components/Sidebar/Sidebar.tsx @@ -0,0 +1,91 @@ +import React from 'react'; +import { + ComponentBaseProps, + generateRandomString, + pxToRem, +} from '../../shared'; +import styled from 'styled-components'; + +export interface SidebarProps extends ComponentBaseProps { + /** + * Header icon + */ + icon?: React.ReactNode; + /** + * Sidebar Slot + */ + slot?: React.ReactNode; + /** + * Show overlay + */ + overlay?: boolean; +} +/** + * Sidebar and overlay + */ +const SidebarWrapper = styled.div` + height: 100%; + display: flex; + flex-direction: row; +`; +/** + * Sidebar overlay + */ +const SidebarOverlay = styled.div` + height: 100%; + width: 100%; + background-color: black; +`; +/** + * Wrapper for sidebar + */ +const SidebarBody = styled.div` + width: ${pxToRem(400)}; + height: 100%; + background-color: ${(props) => props.theme.colors.neutral}; +`; +/** + * Wrapper for sidebar header + */ +const SidebarHeader = styled.div` + width: ${pxToRem(368)}; + height: ${pxToRem(24)}; + display: flex; + flex-direction: row; + justify-content: flex-end; + margin: ${pxToRem(16)}; +`; +/** + * Wrapper for content inside sidebar + */ +const SidebarSlotWrapper = styled.div` + width: ${pxToRem(368)}; + display: flex; + // Calculated height for slot content container with removed margins and height of header + height: calc(100% - ${pxToRem(72)}); + // Shorthand top right bottom left + margin: 0 ${pxToRem(16)} ${pxToRem(16)} ${pxToRem(16)}; +`; + +/** + * Exported sidebar component + */ +export const Sidebar = ({ + id, + icon, + slot, + overlay, + ...restProps +}: SidebarProps) => { + const componentId = id ?? generateRandomString(5); + + return ( + + {overlay && } + + {icon} + {slot} + + + ); +}; diff --git a/src/components/Sidebar/index.ts b/src/components/Sidebar/index.ts new file mode 100644 index 0000000..0b42f98 --- /dev/null +++ b/src/components/Sidebar/index.ts @@ -0,0 +1 @@ +export * from './Sidebar'; \ No newline at end of file diff --git a/src/components/index.ts b/src/components/index.ts index 8b2c541..a8d4f2e 100644 --- a/src/components/index.ts +++ b/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'; From 3ffb6e464039b2f63d73461cf0fbded7cdd1b645 Mon Sep 17 00:00:00 2001 From: Sebastian Gustafsson Date: Fri, 18 Aug 2023 08:55:42 +0300 Subject: [PATCH 02/10] pr changes --- src/components/Sidebar/Sidebar.stories.tsx | 11 +++++++---- src/components/Sidebar/Sidebar.tsx | 12 ++++++------ 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/src/components/Sidebar/Sidebar.stories.tsx b/src/components/Sidebar/Sidebar.stories.tsx index 9a78dea..11bfd7a 100644 --- a/src/components/Sidebar/Sidebar.stories.tsx +++ b/src/components/Sidebar/Sidebar.stories.tsx @@ -12,6 +12,9 @@ export default { title: 'Components/Sidebar', component: Sidebar, parameters: { + args: { + overlay: false, + }, design: [ { name: 'light', @@ -65,8 +68,8 @@ export const DefaultVariant = Template.bind({}); export const OverlaySlotIcon = Template.bind({}); OverlaySlotIcon.args = { overlay: true, - slot: , - icon: , + sidebarContent: , + headerContent: , }; /** * Sidebar with overlay @@ -80,12 +83,12 @@ Overlay.args = { */ export const SlotContent = Template.bind({}); SlotContent.args = { - slot: , + sidebarContent: , }; /** * Sidebar with icon button in header */ export const IconContent = Template.bind({}); IconContent.args = { - icon: , + headerContent: , }; diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx index 9e1b264..e39b89a 100644 --- a/src/components/Sidebar/Sidebar.tsx +++ b/src/components/Sidebar/Sidebar.tsx @@ -10,11 +10,11 @@ export interface SidebarProps extends ComponentBaseProps { /** * Header icon */ - icon?: React.ReactNode; + headerContent?: React.ReactNode; /** * Sidebar Slot */ - slot?: React.ReactNode; + sidebarContent?: React.ReactNode; /** * Show overlay */ @@ -72,8 +72,8 @@ const SidebarSlotWrapper = styled.div` */ export const Sidebar = ({ id, - icon, - slot, + headerContent, + sidebarContent, overlay, ...restProps }: SidebarProps) => { @@ -83,8 +83,8 @@ export const Sidebar = ({ {overlay && } - {icon} - {slot} + {headerContent} + {sidebarContent} ); From b0945e9bb6e80e7a232a3bf2c67228b3e52fe7e2 Mon Sep 17 00:00:00 2001 From: Sebastian Gustafsson Date: Fri, 18 Aug 2023 08:59:50 +0300 Subject: [PATCH 03/10] story fixes --- src/components/Sidebar/Sidebar.stories.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/Sidebar/Sidebar.stories.tsx b/src/components/Sidebar/Sidebar.stories.tsx index 11bfd7a..c68f066 100644 --- a/src/components/Sidebar/Sidebar.stories.tsx +++ b/src/components/Sidebar/Sidebar.stories.tsx @@ -63,7 +63,7 @@ const Template: StoryFn = (args) => ( */ export const DefaultVariant = Template.bind({}); /** - * Sidebar with overlay, slot and icon button in header + * Sidebar with overlay, content and icon button in header */ export const OverlaySlotIcon = Template.bind({}); OverlaySlotIcon.args = { @@ -79,16 +79,16 @@ Overlay.args = { overlay: true, }; /** - * Sidebar with slot content + * Sidebar with content */ -export const SlotContent = Template.bind({}); -SlotContent.args = { +export const SidebarContent = Template.bind({}); +SidebarContent.args = { sidebarContent: , }; /** * Sidebar with icon button in header */ -export const IconContent = Template.bind({}); -IconContent.args = { +export const HeaderContent = Template.bind({}); +HeaderContent.args = { headerContent: , }; From aa7cda7f3979fc3b32c937de10e874bb07862dfe Mon Sep 17 00:00:00 2001 From: Sebastian Gustafsson Date: Fri, 18 Aug 2023 09:36:08 +0300 Subject: [PATCH 04/10] minor visual fixes --- src/components/Sidebar/Sidebar.stories.tsx | 4 ++-- src/components/Sidebar/Sidebar.tsx | 2 ++ src/shared/themes.ts | 6 ++++++ 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/components/Sidebar/Sidebar.stories.tsx b/src/components/Sidebar/Sidebar.stories.tsx index c68f066..433c9f9 100644 --- a/src/components/Sidebar/Sidebar.stories.tsx +++ b/src/components/Sidebar/Sidebar.stories.tsx @@ -65,8 +65,8 @@ export const DefaultVariant = Template.bind({}); /** * Sidebar with overlay, content and icon button in header */ -export const OverlaySlotIcon = Template.bind({}); -OverlaySlotIcon.args = { +export const OverlayContentIcon = Template.bind({}); +OverlayContentIcon.args = { overlay: true, sidebarContent: , headerContent: , diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx index e39b89a..af5c8ec 100644 --- a/src/components/Sidebar/Sidebar.tsx +++ b/src/components/Sidebar/Sidebar.tsx @@ -43,6 +43,8 @@ const SidebarBody = styled.div` width: ${pxToRem(400)}; height: 100%; background-color: ${(props) => props.theme.colors.neutral}; + border-left: 1px ${(props) => props.theme.colors.grayScale.digitalBlack200}; + ${(props) => props.theme.styles.dropshadow}; `; /** * Wrapper for sidebar header diff --git a/src/shared/themes.ts b/src/shared/themes.ts index 55275af..60edaf3 100644 --- a/src/shared/themes.ts +++ b/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);', + }, }; From 50639138246d1f058e25401af08466b8db31e661 Mon Sep 17 00:00:00 2001 From: Sebastian Gustafsson Date: Fri, 18 Aug 2023 11:27:33 +0300 Subject: [PATCH 05/10] added oppasity to overlay --- src/components/Sidebar/Sidebar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx index af5c8ec..55859c8 100644 --- a/src/components/Sidebar/Sidebar.tsx +++ b/src/components/Sidebar/Sidebar.tsx @@ -34,7 +34,7 @@ const SidebarWrapper = styled.div` const SidebarOverlay = styled.div` height: 100%; width: 100%; - background-color: black; + background-color: rgba(0, 0, 0, 0.82); `; /** * Wrapper for sidebar From cbfe7da4e9b247e3a3129ec3c10fea2bf4c40d02 Mon Sep 17 00:00:00 2001 From: Sebastian Gustafsson Date: Fri, 18 Aug 2023 12:44:01 +0300 Subject: [PATCH 06/10] style fixes --- src/components/Sidebar/Sidebar.tsx | 27 ++++++++++++++++++--------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx index 55859c8..a28bf0f 100644 --- a/src/components/Sidebar/Sidebar.tsx +++ b/src/components/Sidebar/Sidebar.tsx @@ -12,7 +12,7 @@ export interface SidebarProps extends ComponentBaseProps { */ headerContent?: React.ReactNode; /** - * Sidebar Slot + * Sidebar Content */ sidebarContent?: React.ReactNode; /** @@ -20,6 +20,15 @@ export interface SidebarProps extends ComponentBaseProps { */ overlay?: boolean; } + +/** + * Sidebar dimensions + */ +const sidebarDimensions = { + bodyWidth: pxToRem(400), + headerHeight: pxToRem(24), + contentWidth: pxToRem(368) +} /** * Sidebar and overlay */ @@ -40,7 +49,7 @@ const SidebarOverlay = styled.div` * Wrapper for sidebar */ const SidebarBody = styled.div` - width: ${pxToRem(400)}; + width: ${sidebarDimensions.bodyWidth}; height: 100%; background-color: ${(props) => props.theme.colors.neutral}; border-left: 1px ${(props) => props.theme.colors.grayScale.digitalBlack200}; @@ -50,8 +59,8 @@ const SidebarBody = styled.div` * Wrapper for sidebar header */ const SidebarHeader = styled.div` - width: ${pxToRem(368)}; - height: ${pxToRem(24)}; + width: ${sidebarDimensions.contentWidth}; + height: ${sidebarDimensions.headerHeight}; display: flex; flex-direction: row; justify-content: flex-end; @@ -60,11 +69,11 @@ const SidebarHeader = styled.div` /** * Wrapper for content inside sidebar */ -const SidebarSlotWrapper = styled.div` - width: ${pxToRem(368)}; +const SidebarContentWrapper = styled.div` + width: ${sidebarDimensions.contentWidth}; display: flex; - // Calculated height for slot content container with removed margins and height of header - height: calc(100% - ${pxToRem(72)}); + // 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)}; `; @@ -86,7 +95,7 @@ export const Sidebar = ({ {overlay && } {headerContent} - {sidebarContent} + {sidebarContent} ); From 71813924ad654f981fda99e9e0aa4ef094e22297 Mon Sep 17 00:00:00 2001 From: Sebastian Gustafsson Date: Fri, 18 Aug 2023 14:15:47 +0300 Subject: [PATCH 07/10] style fixes --- src/components/Sidebar/Sidebar.tsx | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx index a28bf0f..db5c1f6 100644 --- a/src/components/Sidebar/Sidebar.tsx +++ b/src/components/Sidebar/Sidebar.tsx @@ -25,10 +25,13 @@ export interface SidebarProps extends ComponentBaseProps { * Sidebar dimensions */ const sidebarDimensions = { - bodyWidth: pxToRem(400), - headerHeight: pxToRem(24), - contentWidth: pxToRem(368) -} + // Body width + bodyWidth: 400, + // Header height + headerHeight: 24, + // Header and content container width + contentWidth: 368, +}; /** * Sidebar and overlay */ @@ -49,7 +52,7 @@ const SidebarOverlay = styled.div` * Wrapper for sidebar */ const SidebarBody = styled.div` - width: ${sidebarDimensions.bodyWidth}; + width: ${pxToRem(sidebarDimensions.bodyWidth)}; height: 100%; background-color: ${(props) => props.theme.colors.neutral}; border-left: 1px ${(props) => props.theme.colors.grayScale.digitalBlack200}; @@ -59,8 +62,8 @@ const SidebarBody = styled.div` * Wrapper for sidebar header */ const SidebarHeader = styled.div` - width: ${sidebarDimensions.contentWidth}; - height: ${sidebarDimensions.headerHeight}; + width: ${pxToRem(sidebarDimensions.contentWidth)}; + height: ${pxToRem(sidebarDimensions.headerHeight)}; display: flex; flex-direction: row; justify-content: flex-end; @@ -70,10 +73,10 @@ const SidebarHeader = styled.div` * Wrapper for content inside sidebar */ const SidebarContentWrapper = styled.div` - width: ${sidebarDimensions.contentWidth}; + 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}); + height: calc(100% - ${pxToRem(48 + sidebarDimensions.headerHeight)}); // Shorthand top right bottom left margin: 0 ${pxToRem(16)} ${pxToRem(16)} ${pxToRem(16)}; `; From 5201137685ff326b9867866b535b4645476ae837 Mon Sep 17 00:00:00 2001 From: Sebastian Gustafsson Date: Fri, 18 Aug 2023 14:54:51 +0300 Subject: [PATCH 08/10] wrapper changes --- src/components/Sidebar/Sidebar.stories.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Sidebar/Sidebar.stories.tsx b/src/components/Sidebar/Sidebar.stories.tsx index 433c9f9..e1e42ce 100644 --- a/src/components/Sidebar/Sidebar.stories.tsx +++ b/src/components/Sidebar/Sidebar.stories.tsx @@ -49,8 +49,7 @@ const ListComponent = () => { ); }; const Wrapper = styled.div` - height: ${pxToRem(600)}; - width: ${pxToRem(500)}; + height: ${pxToRem(450)}; `; const Template: StoryFn = (args) => ( From 36f1bde32c0f6a3ce801d9d69576852947da518f Mon Sep 17 00:00:00 2001 From: Sebastian Gustafsson Date: Fri, 18 Aug 2023 15:18:15 +0300 Subject: [PATCH 09/10] fixed args location --- src/components/Sidebar/Sidebar.stories.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Sidebar/Sidebar.stories.tsx b/src/components/Sidebar/Sidebar.stories.tsx index e1e42ce..6debfe3 100644 --- a/src/components/Sidebar/Sidebar.stories.tsx +++ b/src/components/Sidebar/Sidebar.stories.tsx @@ -11,10 +11,10 @@ import { pxToRem } from '../../shared'; export default { title: 'Components/Sidebar', component: Sidebar, + args: { + overlay: false, + }, parameters: { - args: { - overlay: false, - }, design: [ { name: 'light', From 8c90fb69b304b6f61d9aff0154e874b80e437103 Mon Sep 17 00:00:00 2001 From: Sebastian Gustafsson Date: Fri, 18 Aug 2023 15:20:33 +0300 Subject: [PATCH 10/10] added style to border-left --- src/components/Sidebar/Sidebar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx index db5c1f6..1e44b50 100644 --- a/src/components/Sidebar/Sidebar.tsx +++ b/src/components/Sidebar/Sidebar.tsx @@ -55,7 +55,7 @@ const SidebarBody = styled.div` width: ${pxToRem(sidebarDimensions.bodyWidth)}; height: 100%; background-color: ${(props) => props.theme.colors.neutral}; - border-left: 1px ${(props) => props.theme.colors.grayScale.digitalBlack200}; + border-left: 1px solid ${(props) => props.theme.colors.grayScale.digitalBlack200}; ${(props) => props.theme.styles.dropshadow}; `; /**