From d478d7763ca207ba0a3c1d1ccf9a53b998287570 Mon Sep 17 00:00:00 2001
From: Casey Dexter <casey.dexter@lifeomic.com>
Date: Wed, 23 Aug 2023 11:36:10 -0400
Subject: [PATCH 1/4] feat: Add title icon to slideover header style: Leverage
 box props vs root styling style: Nudge close button to the right by 10px

---
 src/components/SlideOver/Header.tsx | 44 +++++++++++++++++++----------
 1 file changed, 29 insertions(+), 15 deletions(-)

diff --git a/src/components/SlideOver/Header.tsx b/src/components/SlideOver/Header.tsx
index 9609e5d0..e316ce46 100644
--- 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>
   );
 };

From ec2e98ea3e1f4bbeb5be2e7aa41e0979792bf2a8 Mon Sep 17 00:00:00 2001
From: Casey Dexter <casey.dexter@lifeomic.com>
Date: Wed, 23 Aug 2023 11:37:30 -0400
Subject: [PATCH 2/4] style: Add gap between actions children style: Leverage
 box props vs root styling

---
 src/components/SlideOver/Actions.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/SlideOver/Actions.tsx b/src/components/SlideOver/Actions.tsx
index f32b0310..c8a6cc97 100644
--- 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>
   );

From 595c61d1246d08780f1a3e162703ce56287515e5 Mon Sep 17 00:00:00 2001
From: Casey Dexter <casey.dexter@lifeomic.com>
Date: Wed, 23 Aug 2023 11:38:00 -0400
Subject: [PATCH 3/4] docs: Add header with icon story

---
 src/components/SlideOver/SlideOver.stories.tsx | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/components/SlideOver/SlideOver.stories.tsx b/src/components/SlideOver/SlideOver.stories.tsx
index 4eae7cd4..baf624b7 100644
--- 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: (

From 0ca325127867e3f2ac4d1e4b425c22e445bcf54a Mon Sep 17 00:00:00 2001
From: Casey Dexter <casey.dexter@lifeomic.com>
Date: Wed, 23 Aug 2023 11:38:18 -0400
Subject: [PATCH 4/4] chore: Add test for title and title icon

---
 src/components/SlideOver/Header.test.tsx | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/src/components/SlideOver/Header.test.tsx b/src/components/SlideOver/Header.test.tsx
index c8599649..f2138142 100644
--- 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');
+});