🧑‍💻SideSheet: open required, conditional render header, title, button (…

…#3161) * 🧑‍💻SideSheet: open required, conditional render header, title, button * Updated tests
equinor · Dec 4, 2023 · 1904d9f · 1904d9f
1 parent 1f745ad
commit 1904d9f
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 27 deletions.
diff --git a/packages/eds-core-react/src/components/SideSheet/SideSheet.test.tsx b/packages/eds-core-react/src/components/SideSheet/SideSheet.test.tsx
@@ -11,28 +11,32 @@ const StyledSidesheet = styled(SideSheet)`
 
 describe('SideSheet', () => {
   it('Matches snapshot', () => {
-    const { asFragment } = render(<SideSheet variant="large" title="Title" />)
+    const { asFragment } = render(
+      <SideSheet open variant="large" title="Title" onClose={jest.fn()} />,
+    )
     expect(asFragment()).toMatchSnapshot()
   })
   it('Should pass a11y test', async () => {
-    const { container } = render(<SideSheet title="Title" />)
+    const { container } = render(<SideSheet open title="Title" />)
     await act(async () => {
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })
   })
   it('Has correct width', () => {
-    render(<SideSheet variant="large" title="Title" data-testid="sidesheet" />)
+    render(
+      <SideSheet open variant="large" title="Title" data-testid="sidesheet" />,
+    )
     expect(screen.getByTestId('sidesheet')).toHaveStyleRule('width', '480px')
   })
   it('Has provided necessary props', () => {
     const title = 'Title'
     const variant = 'large'
-    render(<SideSheet variant={variant} title={title} />)
+    render(<SideSheet open variant={variant} title={title} />)
     expect(screen.getByText(title)).toBeDefined()
   })
   it('Can extend the css for the component', () => {
-    render(<StyledSidesheet data-testid="sidesheet" />)
+    render(<StyledSidesheet open data-testid="sidesheet" />)
     const sidesheet = screen.getByTestId('sidesheet')
     expect(sidesheet).toHaveStyleRule('position', 'relative')
     expect(sidesheet).toHaveStyleRule('height', '100px')

diff --git a/packages/eds-core-react/src/components/SideSheet/SideSheet.tsx b/packages/eds-core-react/src/components/SideSheet/SideSheet.tsx
@@ -25,7 +25,7 @@ export type SideSheetProps = {
   /** OnClick function (close) */
   onClose?: (Event) => void
   /** Open / close Side Sheet */
-  open?: boolean
+  open: boolean
   /** Override width of Side Sheet */
   width?: string
 } & HTMLAttributes<HTMLDivElement>
@@ -52,19 +52,14 @@ const Header = styled.div`
   align-items: center;
   padding-bottom: 24px;
   padding-right: 10px;
+  & > button {
+    margin-left: auto;
+  }
 `
 
 export const SideSheet = forwardRef<HTMLDivElement, SideSheetProps>(
   function SideSheet(
-    {
-      variant = 'medium',
-      width,
-      title = '',
-      children,
-      open = true,
-      onClose,
-      ...rest
-    },
+    { variant = 'medium', width, title, children, open, onClose, ...rest },
     ref,
   ) {
     const props = {
@@ -73,21 +68,24 @@ export const SideSheet = forwardRef<HTMLDivElement, SideSheetProps>(
       width: width || variants[variant],
     }
 
-    // Controller must set open={false} when pressing the close button
     return (
       open && (
         <StyledSideSheet {...props}>
-          <Header>
-            <Typography variant="h2">{title}</Typography>
-            <Button
-              variant="ghost_icon"
-              onClick={onClose}
-              title="Close"
-              aria-label="Close sidesheet"
-            >
-              <Icon name="clear" data={clear} />
-            </Button>
-          </Header>
+          {(title || onClose) && (
+            <Header>
+              {title && <Typography variant="h2">{title}</Typography>}
+              {onClose && (
+                <Button
+                  variant="ghost_icon"
+                  onClick={onClose}
+                  title="Close"
+                  aria-label="Close sidesheet"
+                >
+                  <Icon name="clear" data={clear} />
+                </Button>
+              )}
+            </Header>
+          )}
           {children}
         </StyledSideSheet>
       )

diff --git a/packages/eds-core-react/src/components/SideSheet/__snapshots__/SideSheet.test.tsx.snap b/packages/eds-core-react/src/components/SideSheet/__snapshots__/SideSheet.test.tsx.snap
@@ -141,6 +141,10 @@ exports[`SideSheet Matches snapshot 1`] = `
   padding-right: 10px;
 }
 
+.c1>button {
+  margin-left: auto;
+}
+
 @media (hover:hover) and (pointer:fine) {
   .c3:hover {
     background: var(--eds_interactive_primary__hover_alt, rgba(222, 237, 238, 1));