@galaxy-ds/core 2.0.1 → 2.0.3

package/src/Divider/Divider.tsx

@@ -1,16 +1,19 @@
-import React from "react";
-import MuiDivider from '@mui/material/Divider'
-import { DividerProps } from './DividerProps.types';
+import React from 'react';
+import MuiDivider from '@mui/material/Divider';
+import { DividerProps } from './Divider.types';
 
 export const Divider: React.FC<DividerProps> = (props: DividerProps) => {
   const { orientation = 'horizontal', ...rest } = props;
-  
+
+  // TODO: These overrides are applicable for material 4. Will need to do regression testing before removing
+  // in the meantime overrides exist through sx and rest props
+
   let variantProp = {
-    "horizontal": 'gds-divider--horizontal',
-    "vertical": 'gds-divider--vertical',
-  }[orientation]
+    horizontal: 'gds-divider--horizontal',
+    vertical: 'gds-divider--vertical',
+  }[orientation];
+
+  return <MuiDivider className={`gds-divider ${variantProp}`} {...rest} />;
+};
 
-  return (
-    <MuiDivider {...rest} className={`gds-divider ${variantProp}`}/>
-  )
-}
+export default Divider;

package/src/Divider/Divider.types.ts

@@ -0,0 +1,3 @@
+import { DividerProps as MuiDividerProps } from '@mui/material/Divider';
+
+export interface DividerProps extends MuiDividerProps {}

package/src/Divider/index.ts

@@ -1,2 +1,2 @@
-export * from './DividerProps.types';
-export * from './Divider';
+export * from './Divider.types';
+export * from './Divider';

package/src/Drawer/Drawer.stories.mdx

@@ -3,11 +3,7 @@ import { Drawer } from "./Drawer";
 import { SvgHome, SvgInvoice, SvgFreeFirstAppointment } from "../Icons/lawconnect";
 import { Icon } from "../Icon";
 import List from "../List/List";
-import ListItem from "../ListItem/ListItem";
-import ListItemAvatar from "../ListItemAvatar/ListItemAvatar";
-import ListItemText from "../ListItemText/ListItemText";
 import { DrawerMenu } from "../DrawerMenu/DrawerMenu";
-import Collapse from "@mui/material";
 
 <Meta
   title="components/Drawer/Drawer"
@@ -18,7 +14,15 @@ import Collapse from "@mui/material";
 Navigation drawers provide access to destinations in your app. Side sheets are surfaces containing supplementary content that are anchored to the left or right edge of the screen.
 
 <Canvas withToolbar>
-  <Story name="Default">
+  <Story name="Default" parameters={{ docs: { source: { code: `
+<Drawer color='default'>
+  <List> 
+    <DrawerMenu startAdornment={<Icon name={SvgHome}/>}>Home</DrawerMenu>
+    <DrawerMenu startAdornment={<Icon name={SvgFreeFirstAppointment}/>}>Accounts</DrawerMenu>
+    <DrawerMenu startAdornment={<Icon name={SvgInvoice}/>}>Reporting</DrawerMenu> 
+  </List> 
+</Drawer> 
+  `}}}}>
      <Drawer color='default'>
       <List> 
         <DrawerMenu startAdornment={<Icon name={SvgHome}/>}>Home</DrawerMenu>

package/src/Drawer/Drawer.test.tsx

@@ -1,6 +1,7 @@
+import React from 'react';
 import { render } from '@testing-library/react';
-import Drawer from './Drawer';
+import { Drawer } from './Drawer';
 
-test('renders', () => {
+test('Drawer', () => {
   render(<Drawer />);
-});
+});

package/src/Drawer/Drawer.tsx

@@ -1,22 +1,27 @@
-import React from "react";
-import { CustomDrawerProps } from "./DrawerProps.types";
+import React from 'react';
+import { CustomDrawerProps, DrawerRef } from './Drawer.types';
 import { DrawerContainer } from './Drawer.styled';
 
-export const Drawer: React.FC<CustomDrawerProps> = React.forwardRef((props: CustomDrawerProps, ref:any) => {
-  const { variant = 'permanent', color = 'default', children, ...rest } = props
-  const drawerWidth = 256;
+export const Drawer = React.forwardRef<DrawerRef, CustomDrawerProps>(
+  function Drawer(props, ref) {
+    const {
+      variant = 'permanent',
+      color = 'default',
+      children,
+      ...rest
+    } = props;
+    const drawerWidth = 256;
 
-  return (
-    <DrawerContainer 
-      variant={variant} 
-      PaperProps={{ style: { width: drawerWidth } }} 
-      ref={ref}
-      className={`gds-drawer-bg-${color}`}
-      {...rest} 
-    >
-      {children}
-    </DrawerContainer>
-  );
-})
-
- 
+    return (
+      <DrawerContainer
+        variant={variant}
+        PaperProps={{ style: { width: drawerWidth } }}
+        ref={ref}
+        className={`gds-drawer-bg-${color}`}
+        {...rest}
+      >
+        {children}
+      </DrawerContainer>
+    );
+  }
+);

package/src/Drawer/Drawer.types.ts

@@ -0,0 +1,6 @@
+import { DrawerProps } from '@mui/material';
+export interface CustomDrawerProps extends DrawerProps {
+  color?: 'primary' | 'default';
+}
+
+export type DrawerRef = HTMLDivElement;

package/src/Drawer/index.ts

@@ -1,2 +1,2 @@
-export * from './DrawerProps.types';
-export * from './Drawer';
+export * from './Drawer.types';
+export * from './Drawer';

package/src/DrawerMenu/DrawerMenu.stories.mdx

@@ -11,11 +11,11 @@ import { Icon } from "../Icon"
 # Drawer Menu Item
 Drawer Menu ....
 
-<Preview withToolbar>
+<Canvas withToolbar>
   <Story name="Default" args={{}}>
     {args => <DrawerMenu {...args} startAdornment={<Icon name={SvgHome}/>}>Menu Item</DrawerMenu>}
   </Story>
-</Preview>
+</Canvas>
 
 ### Selected
 

package/src/DrawerMenu/DrawerMenu.styled.tsx

@@ -1,78 +1,78 @@
-import { MenuItem, styled } from "@mui/material";
+import { MenuItem, styled } from '@mui/material';
 
-export const DrawerMenuContainer = styled(MenuItem)(({ theme }) =>({
-    "&.gds-drawer-menu-item": { 
-        borderRadius:'0.5rem',
-        fontSize: 17,
-        paddingTop: 10,
-        paddingBottom: 10,
-        "& .MuiListItemIcon-root": {
-            marginRight: 16,
-            fontSize: '1.125rem',
-            minWidth: 'auto',
-            color: theme.palette.primary.dark,
-            "& svg": {
-                width: "none",
-                height: "none",
-                fontSize: "1.125rem",
-            },
+export const DrawerMenuContainer = styled(MenuItem)(({ theme }) => ({
+  '&.gds-drawer-menu-item': {
+    borderRadius: '0.5rem',
+    fontSize: 17,
+    paddingTop: 10,
+    paddingBottom: 10,
+    '& .MuiListItemIcon-root': {
+      marginRight: 16,
+      fontSize: '1.125rem',
+      minWidth: 'auto',
+      color: theme.palette.primary.dark,
+      '& svg': {
+        width: 'none',
+        height: 'none',
+        fontSize: '1.125rem',
+      },
+    },
+    '& .MuiSvgIcon-fontSizeSmall': {
+      fontSize: '1.125rem',
+    },
+    '&.gds-drawer-menu-item-dark': {
+      backgroundColor: 'transparent',
+      color: theme.palette.grey['200'],
+      '&:not($selected) svg': {
+        color: theme.palette.grey['200'],
+      },
+      '&:hover': {
+        cursor: 'pointer',
+        backgroundColor: 'rgba(0,0,0,.1)',
+        color: theme.palette.grey['200'],
+        '&:not($selected) svg': {
+          color: theme.palette.grey['200'],
         },
-        "& .MuiSvgIcon-fontSizeSmall": {
-            fontSize: '1.125rem',
+      },
+      '&$selected': {
+        backgroundColor: 'rgba(0,0,0,.2)',
+        '& svg': {
+          color: theme.palette.secondary.main,
         },
-        "&.gds-drawer-menu-item-dark": {  
-            backgroundColor: 'transparent',
-            color: theme.palette.grey['200'],
-            '&:not($selected) svg': {
-                color: theme.palette.grey['200'],
-            },
-            '&:hover': {
-                cursor: 'pointer',
-                backgroundColor: 'rgba(0,0,0,.1)', 
-                color: theme.palette.grey['200'],
-                '&:not($selected) svg': {
-                    color: theme.palette.grey['200'], 
-                }
-            },
-            '&$selected': {
-                backgroundColor: 'rgba(0,0,0,.2)', 
-                '& svg': {
-                    color: theme.palette.secondary.main, 
-                }
-            }
+      },
+    },
+    '&.gds-drawer-menu-item-light': {
+      backgroundColor: 'transparent',
+      color: theme.palette.grey['800'],
+      '&:not($selected) svg': {
+        color: theme.palette.primary.dark,
+      },
+      '&:hover': {
+        cursor: 'pointer',
+        backgroundColor: 'transparent',
+        color: theme.palette.secondary.dark,
+        '&:not($selected) svg': {
+          color: theme.palette.secondary.dark,
         },
-        "&.gds-drawer-menu-item-light": {  
-            backgroundColor: 'transparent',
-            color: theme.palette.grey['800'], 
-            '&:not($selected) svg': {
-                color: theme.palette.primary.dark,
-            },
-            '&:hover': {
-                cursor: 'pointer', 
-                backgroundColor: 'transparent',
-                color: theme.palette.secondary.dark,
-                '&:not($selected) svg': {
-                    color: theme.palette.secondary.dark,
-                }
-            },
-            '&$selected': {
-                backgroundColor: 'rgba(255,255,255,.3)', 
-                color: theme.palette.secondary.dark,
-                '& svg': {
-                    color: theme.palette.secondary.dark,
-                }
-            }
+      },
+      '&$selected': {
+        backgroundColor: 'rgba(255,255,255,.3)',
+        color: theme.palette.secondary.dark,
+        '& svg': {
+          color: theme.palette.secondary.dark,
         },
-        "&.gds-drawer-menu-item-sub": {
-            '&:hover': {
-                backgroundColor: 'rgba(255,255,255,.2) !important',  
-            },
-            "& .MuiListItemIcon-root": {
-                marginRight: 0,
-            }
-        },
-        "& .gds-drawer-menu-item-text": {
-            flex: 1
-        }
-      }
-}))
+      },
+    },
+    '&.gds-drawer-menu-item-sub': {
+      '&:hover': {
+        backgroundColor: 'rgba(255,255,255,.2) !important',
+      },
+      '& .MuiListItemIcon-root': {
+        marginRight: 0,
+      },
+    },
+    '& .gds-drawer-menu-item-text': {
+      flex: 1,
+    },
+  },
+}));

package/src/DrawerMenu/DrawerMenu.test.tsx

@@ -2,6 +2,6 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { DrawerMenu } from './DrawerMenu';
 
-test('renders', () => {
+test('DrawerMenu', () => {
   render(<DrawerMenu>Menu</DrawerMenu>);
-});
+});

package/src/DrawerMenu/DrawerMenu.tsx

@@ -1,25 +1,41 @@
+import React from 'react';
+import { ListItemIcon } from '../ListItemIcon/ListItemIcon';
+import { DrawerMenuContainer } from './DrawerMenu.styled';
+import { DrawerMenuProps, DrawMenuRef } from './DrawerMenu.types';
 
-import React from "react";
-import { ListItemIcon } from "../ListItemIcon/ListItemIcon";
-import { DrawerMenuContainer } from "./DrawerMenu.styled";
-import { DrawerMenuProps } from "./DrawerMenuProps.types";
+export const DrawerMenu = React.forwardRef<DrawMenuRef, DrawerMenuProps>(
+  function DrawMenu(props, ref) {
+    const {
+      children,
+      startAdornment,
+      submenu,
+      variant = 'light',
+      value,
+      open,
+      expand,
+      ...rest
+    } = props;
 
+    let variantProp = {
+      light: 'gds-drawer-menu-item-light',
+      dark: 'gds-drawer-menu-item-dark',
+    }[variant];
 
-export const DrawerMenu: React.FC<DrawerMenuProps> = React.forwardRef((props: DrawerMenuProps, ref:any) => {
-  const {children, startAdornment, submenu, variant='light', value, open, expand, ...rest} = props
-
-  let variantProp = {
-    'light': 'gds-drawer-menu-item-light',
-    'dark': 'gds-drawer-menu-item-dark',
-  }[variant]
-
-  return (
-    <DrawerMenuContainer ref={ref} {...rest} className={`gds-drawer-menu-item ${variantProp} ${submenu ? 'gds-drawer-menu-item-sub' : ''}`}>
-       {startAdornment && !submenu ?  
-        <ListItemIcon>
-           {startAdornment} 
-        </ListItemIcon> : null} 
-        <span className={'gds-drawer-menu-item-text'}>{children} {value}</span>
-    </DrawerMenuContainer>
-  )
-});
+    return (
+      <DrawerMenuContainer
+        ref={ref}
+        className={`gds-drawer-menu-item ${variantProp} ${
+          submenu ? 'gds-drawer-menu-item-sub' : ''
+        }`}
+        {...rest}
+      >
+        {startAdornment && !submenu ? (
+          <ListItemIcon>{startAdornment}</ListItemIcon>
+        ) : null}
+        <span className={'gds-drawer-menu-item-text'}>
+          {children} {value}
+        </span>
+      </DrawerMenuContainer>
+    );
+  }
+);

package/src/DrawerMenu/DrawerMenu.types.ts

@@ -0,0 +1,32 @@
+import { MenuItemProps } from '@mui/material';
+
+export interface DrawerMenuProps extends MenuItemProps {
+  /**
+   * Menu item contents
+   */
+  children: React.ReactNode;
+  /**
+   * Seleted state
+   */
+  selected?: boolean;
+  /**
+   * ref attribute
+   */
+  ref?: any;
+  /**
+   * value label string
+   */
+  value?: any;
+  open?: boolean;
+  dense?: boolean;
+  /**
+   * Icon
+   */
+  startAdornment?: React.ReactNode;
+  submenu?: boolean;
+  expand?: boolean;
+  onClick?: (e: any) => void;
+  variant?: 'dark' | 'light';
+}
+
+export type DrawMenuRef = HTMLLIElement;

package/src/DrawerMenu/index.ts

@@ -1,2 +1,2 @@
-export * from './DrawerMenuProps.types';
-export * from './DrawerMenu';
+export * from './DrawerMenu.types';
+export * from './DrawerMenu';

package/src/Dropdown/Dropdown.stories.mdx

@@ -1,16 +1,10 @@
 import { Meta, Story, Canvas, ArgsTable, Preview } from '@storybook/addon-docs';
-
-import { Select } from "@mui/material"
-
 import { Checkbox } from '../Checkbox';
 import { Dropdown } from './Dropdown';
-import { Typography } from '../Typography';
 import { MenuItem } from '../MenuItem';
 import ListSubheader from '../ListSubheader/ListSubheader';
-import ListItemText from '../ListItemText/ListItemText';
 import { Icon } from '../Icon';
 import { SvgFilter, SvgUser } from '../Icons/lawconnect/';
-import { Input } from "../Input";
 import { Box } from '../Box';
 
 <Meta

package/src/Dropdown/Dropdown.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Dropdown } from './Dropdown';
+import { MenuItem } from '../MenuItem';
+
+test('Dropdown', () => {
+  render(
+    <Dropdown>
+      <MenuItem value={1}>Billable - All</MenuItem>
+    </Dropdown>
+  );
+});

package/src/Dropdown/Dropdown.tsx

@@ -4,16 +4,6 @@ import { Input } from '../Input';
 import clsx from 'clsx';
 import { DropdownProps } from './Dropdown.types';
 
-// const useStyles = makeStyles(() => createStyles({
-//   root: {
-//     width: (props: {width: number}) => props.width ? props.width : ''
-//   },
-//   paper: {
-//     width: (props: {width: number}) => props.width ? props.width : '',
-//     boxSizing: 'border-box'
-//   }
-// }))
-
 export const Dropdown: React.FC<DropdownProps> = (props: DropdownProps) => {
   const {
     children,

package/src/EmptyState/EmptyState.stories.mdx

@@ -11,7 +11,7 @@ EmptyState component spans to 100% of its container's height. Please note that t
   <Story name="Default" args={{title: 'Nothing found', icon: 'Icon', description: 'Try expanding your date range for more activities'}}>
     {args => 
     <div style={{height: '30vh', border: '1px solid #eee'}}>
-      <EmptyState {...args}> </EmptyState>
+      <EmptyState {...args}></EmptyState>
     </div>}
   </Story>
 </Canvas>
@@ -21,7 +21,7 @@ EmptyState component spans to 100% of its container's height. Please note that t
   <Story name="Document" args={{variant: "document", title: 'No Documents found', description: 'There are currenlty no documents'}}>
     {args => 
     <div style={{height: '30vh', border: '1px solid #eee'}}>
-      <EmptyState {...args}> </EmptyState>
+      <EmptyState {...args}></EmptyState>
     </div>}
   </Story>
 </Canvas>
@@ -31,7 +31,7 @@ EmptyState component spans to 100% of its container's height. Please note that t
   <Story name="Matter" args={{variant: "matter", title: 'No Matters Found', description: 'Try to search another name or matter description.'}}>
     {args => 
     <div style={{height: '30vh', border: '1px solid #eee'}}>
-      <EmptyState {...args}> </EmptyState>
+      <EmptyState {...args}></EmptyState>
     </div>}
   </Story>
 </Canvas>
@@ -41,7 +41,7 @@ EmptyState component spans to 100% of its container's height. Please note that t
   <Story name="Appointment" args={{variant: "appointment", title: 'No Appointments Available', description: 'Try expanding your date range for more activities'}}>
     {args => 
     <div style={{height: '30vh', border: '1px solid #eee'}}>
-      <EmptyState {...args}> </EmptyState>
+      <EmptyState {...args}></EmptyState>
     </div>}
   </Story>
 </Canvas>
@@ -50,7 +50,7 @@ EmptyState component spans to 100% of its container's height. Please note that t
   <Story name="Transaction" args={{variant: "transaction", title: 'No transactions found', description: 'Try to another time or refine the filter criteria'}}>
     {args => 
     <div style={{height: '30vh', border: '1px solid #eee'}}>
-      <EmptyState {...args}> </EmptyState>
+      <EmptyState {...args}></EmptyState>
     </div>}
   </Story>
 </Canvas>

package/src/EmptyState/EmptyState.test.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
-
 import { render } from '@testing-library/react';
 import { EmptyState } from './EmptyState';
 
-test('renders', () => {
+test('EmptyState', () => {
   render(<EmptyState />);
-});
+});

package/src/EmptyState/EmptyState.tsx

@@ -1,21 +1,14 @@
 import React from 'react';
-import { Box, Typography, useTheme, type Theme } from '@mui/material';
-
+import { Box, Typography, useTheme } from '@mui/material';
 import { EmptyStateContainer, EmptyStateTitle } from './EmptyState.styled';
-import { EmptyStateProps } from './EmptyStateProps.types';
+import { EmptyStateIconProps, EmptyStateProps } from './EmptyState.types';
 import { Icon } from '../Icon';
-import {type EmptyState as IEmptyState} from '../Theme/custom-types/component-emptystate';
-
-type IconProps = {
-  emptyState: IEmptyState;
-  variant?: string;
-};
 
 export const EmptyState: React.FC<EmptyStateProps> = (
   props: EmptyStateProps
 ) => {
   const { title, description, variant } = props;
-  const EmptyStateIcon = (iconProps: IconProps) => {
+  const EmptyStateIcon = (iconProps: EmptyStateIconProps) => {
     const { emptyState, variant } = iconProps;
     const themeIcons = emptyState.icons;
     let icon;

package/src/EmptyState/EmptyState.types.ts

@@ -0,0 +1,12 @@
+import {type EmptyState as IEmptyState} from '../Theme/custom-types/component-emptystate';
+
+export interface EmptyStateProps {
+  title?: string;
+  description?: string;
+  variant?: "default" | "document" | "matter" | "appointment" | "transaction";
+}
+
+export type EmptyStateIconProps = {
+  emptyState: IEmptyState;
+  variant?: string;
+};

package/src/EmptyState/index.ts

@@ -1,2 +1,2 @@
-export * from './EmptyStateProps.types';
-export * from './EmptyState';
+export * from './EmptyState.types';
+export * from './EmptyState';

package/src/FooterActions/FooterActions.styled.tsx

@@ -0,0 +1,41 @@
+import { styled } from '@mui/material/styles';
+import { Grid } from '@mui/material';
+
+export const FooterActionsContainer = styled(Grid)({
+  '&.gds-footer-actions': {
+    width: '100%',
+    borderTop: `1px solid #d4d4d4`,
+  },
+  '&.gds-footer-fixed': {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    width: '100%',
+  },
+  '& .gds-footer-actions_left': {
+    display: 'flex',
+    '& button': {
+      marginRight: 10,
+    },
+  },
+  '& .gds-footer-actions_right': {
+    justifyContent: 'flex-end',
+    display: 'flex',
+    '& button': {
+      marginLeft: 10,
+    },
+  },
+  '&.gds-footer-actions_medium': {
+    paddingLeft: 22,
+    paddingRight: 22,
+    paddingTop: '16.5px',
+    paddingBottom: '16.5px',
+  },
+  '&.gds-footer-actions_small': {
+    paddingLeft: 12,
+    paddingRight: 12,
+    paddingTop: 10,
+    paddingBottom: 10,
+  },
+});

package/src/FooterActions/FooterActions.test.tsx

@@ -1,6 +1,7 @@
+import React from 'react';
 import { render } from '@testing-library/react';
 import FooterActions from './FooterActions';
 
-test('renders', () => {
+test('FooterActions', () => {
   render(<FooterActions />);
-});
+});