diff --git a/packages/eds-core-react/src/components/SideSheet/SideSheet.test.tsx b/packages/eds-core-react/src/components/SideSheet/SideSheet.test.tsx index 8613633d13..d3491bc53d 100644 --- 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() + const { asFragment } = render( + , + ) expect(asFragment()).toMatchSnapshot() }) it('Should pass a11y test', async () => { - const { container } = render() + const { container } = render() await act(async () => { const results = await axe(container) expect(results).toHaveNoViolations() }) }) it('Has correct width', () => { - render() + render( + , + ) expect(screen.getByTestId('sidesheet')).toHaveStyleRule('width', '480px') }) it('Has provided necessary props', () => { const title = 'Title' const variant = 'large' - render() + render() expect(screen.getByText(title)).toBeDefined() }) it('Can extend the css for the component', () => { - render() + render() 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 index 4e6f6242b5..a6d194b25b 100644 --- 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 @@ -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( 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( width: width || variants[variant], } - // Controller must set open={false} when pressing the close button return ( open && ( -
- {title} - -
+ {(title || onClose) && ( +
+ {title && {title}} + {onClose && ( + + )} +
+ )} {children}
) 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 index f430452490..cf1311327d 100644 --- 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));