Merge pull request #375 from lifeomic/slideover-title-icon

feat: Add Slideover title icon
lifeomic · Aug 24, 2023 · 96475e4 · 96475e4
2 parents 1653dd7 + 0ca3251
commit 96475e4
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 20 deletions.
diff --git a/src/components/SlideOver/Actions.tsx b/src/components/SlideOver/Actions.tsx
@@ -10,10 +10,6 @@ export const useStyles = makeStyles(
   (theme) => ({
     root: {
       borderTop: `1px solid ${theme.palette.divider}`,
-      paddingBottom: theme.spacing(1),
-      paddingLeft: theme.spacing(2),
-      paddingRight: theme.spacing(2),
-      paddingTop: theme.spacing(1),
     },
   }),
   { name: ActionsStylesKey }
@@ -30,7 +26,12 @@ export const Actions: React.FC<ActionsProps> = ({
 }) => {
   const classes = useStyles({});
   return (
-    <Box className={clsx(classes.root, className)} {...rootProps}>
+    <Box
+      className={clsx(classes.root, className)}
+      gap={1}
+      padding={2}
+      {...rootProps}
+    >
       {children}
     </Box>
   );

diff --git a/src/components/SlideOver/Header.test.tsx b/src/components/SlideOver/Header.test.tsx
@@ -2,6 +2,10 @@ import * as React from 'react';
 import { renderWithTheme } from '../../testUtils/renderWithTheme';
 import { Header, HeaderProps } from './index';
 import { fireEvent } from '@testing-library/dom';
+import {
+  IconComponent,
+  testId as iconComponentTestId,
+} from '../../testUtils/IconComponent';
 
 const testId = 'Header';
 
@@ -68,3 +72,21 @@ test('it renders the provided children', async () => {
   const children = await findByTestId(testId);
   expect(children).toBeInTheDocument();
 });
+
+test('it renders title and title icon', async () => {
+  const { findByTestId } = renderWithTheme(
+    <Header
+      {...getBaseProps()}
+      data-testid={testId}
+      title="SlideOverTitle"
+      titleIcon={IconComponent}
+      onClose={() => {}}
+    />
+  );
+
+  const title = await findByTestId(testId);
+  expect(title).toBeInTheDocument();
+  const titleIcon = await findByTestId(iconComponentTestId);
+  expect(titleIcon).toBeInTheDocument();
+  expect(titleIcon).toHaveClass('ChromaSlideOverHeader-titleIcon');
+});
diff --git a/src/components/SlideOver/Header.tsx b/src/components/SlideOver/Header.tsx
@@ -5,18 +5,22 @@ import { Text } from '../Text';
 import { X } from '@lifeomic/chromicons';
 import * as React from 'react';
 import clsx from 'clsx';
+import { Box } from '../Box';
 
 export const HeaderStylesKey = 'ChromaSlideOverHeader';
 
 export const useStyles = makeStyles(
   (theme) => ({
     root: {
-      alignItems: 'center',
-      display: 'flex',
-      flexDirection: 'row',
-      justifyContent: 'space-between',
       backgroundColor: theme.palette.black[50],
-      padding: theme.spacing(2),
+    },
+    titleIcon: {
+      color: theme.palette.text.hint,
+      height: theme.pxToRem(22),
+      width: theme.pxToRem(22),
+    },
+    button: {
+      marginRight: theme.pxToRem(-10),
     },
   }),
   { name: HeaderStylesKey }
@@ -29,6 +33,7 @@ export interface HeaderProps {
   children?: React.ReactNode;
   onClose: () => any;
   title?: string;
+  titleIcon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
   classes?: {
     root?: string;
     text?: string;
@@ -42,31 +47,40 @@ export const Header: React.FC<HeaderProps> = ({
   className,
   onClose,
   title,
+  titleIcon: TitleIcon,
   ...rootProps
 }) => {
   const classes = useStyles({});
   return (
-    <div
+    <Box
+      align="center"
+      justify="space-between"
+      padding={2}
       className={clsx(classes.root, additionalClasses?.root, className)}
       {...rootProps}
     >
       {children}
       {title && (
-        <Text
-          className={clsx(additionalClasses?.text)}
-          size="body"
-          weight="bold"
-        >
-          {title}
-        </Text>
+        <Box align="center" gap={1}>
+          {!!TitleIcon && (
+            <TitleIcon role="img" aria-hidden className={classes.titleIcon} />
+          )}
+          <Text
+            className={clsx(additionalClasses?.text)}
+            size="body"
+            weight="bold"
+          >
+            {title}
+          </Text>
+        </Box>
       )}
       <IconButton
-        className={additionalClasses?.button}
+        className={clsx(classes.button, additionalClasses?.button)}
         aria-label="Close panel"
         icon={X}
         onClick={onClose}
         size={0}
       />
-    </div>
+    </Box>
   );
 };
diff --git a/src/components/SlideOver/SlideOver.stories.tsx b/src/components/SlideOver/SlideOver.stories.tsx
@@ -8,6 +8,7 @@ import { Text } from '../Text';
 import { Body } from './Body';
 import { Actions } from './Actions';
 import { Button } from '../Button';
+import { Settings } from '@lifeomic/chromicons';
 
 export default {
   title: 'Components/SlideOver',
@@ -33,6 +34,19 @@ Default.args = {
   isOpen: true,
 };
 
+export const HeaderWithIcon = Template.bind({});
+HeaderWithIcon.args = {
+  children: (
+    <>
+      <Header title="Panel Title" titleIcon={Settings} onClose={() => {}} />
+      <Body>
+        <Text>Content</Text>
+      </Body>
+    </>
+  ),
+  isOpen: true,
+};
+
 export const CustomHeader = Template.bind({});
 CustomHeader.args = {
   children: (