@galaxy-ds/core 2.0.2 → 2.0.4

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@galaxy-ds/core",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@galaxy-ds/core",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",

package/src/Accordion/Accordion.test.tsx

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

package/src/Accordion/Accordion.tsx

@@ -1,59 +1,81 @@
-import React from "react"
-import { AccordionProps } from "./AccordionProps.types"
-import { Collapse } from "@mui/material"
-import { MuiIcon, MuiListItemIcon, MuiListItem, MuiListItemText } from "./Accordion.styled"
-import SvgChevronDownLg from "../Icons/lawconnect/ChevronDownLg"
-import List from "../List/List"
-import ListSubheader from "../ListSubheader/ListSubheader"
-import { Typography } from "../Typography"
+import React from 'react';
+import { AccordionProps } from './Accordion.types';
+import { Collapse, ListItemButton } from '@mui/material';
+import { MuiIcon, MuiListItemIcon, MuiListItemText } from './Accordion.styled';
+import SvgChevronDownLg from '../Icons/lawconnect/ChevronDownLg';
+import List from '../List/List';
+import ListSubheader from '../ListSubheader/ListSubheader';
+import { Typography } from '../Typography';
 
-
-export const Accordion: React.FC<AccordionProps> = ({ title, time, color='textPrimary', bgColor='white', border=true, chevronPosition='start', children, ...defaultProps }: AccordionProps) => {
+export const Accordion: React.FC<AccordionProps> = ({
+  title,
+  time,
+  color = 'textPrimary',
+  bgColor = 'white',
+  border = true,
+  chevronPosition = 'start',
+  children,
+  ...rest
+}: AccordionProps) => {
   const [open, setOpen] = React.useState(true);
   const handleClick = () => {
     setOpen(!open);
   };
   return (
     <div>
-    <ListSubheader
-      sx={{
-        bgcolor: bgColor
-      }}
-    >
-      <MuiListItem 
-        button 
-        onClick={handleClick} 
-        key={title} 
-        sx={{backgroundColor: bgColor, borderBottom: border ? `1px solid rgb(212, 212, 212)` : 'none'}}
-      >
-        <MuiListItemIcon className={ chevronPosition === 'end' ? 'accordionAppendIcon' : 'accordionPrependIcon' }>
-          <MuiIcon name={SvgChevronDownLg} className={open ? 'iconOpen' : 'iconClosed'} sx={{color: '#444444'}}  />
-        </MuiListItemIcon>
-        <MuiListItemText className={'accordionTitle'}>
-          <Typography color={color} variant="body1">{title}</Typography>
-        </MuiListItemText>
-        {time && (
-          <MuiListItemText className={'accordionTime'}>
-            <Typography variant="body1">{time}</Typography>
-          </MuiListItemText>
-        )}  
-      </MuiListItem>
-    </ListSubheader>
-    <Collapse in={open}>
-      <List
+      <ListSubheader
         sx={{
-          bgcolor: bgColor, 
-          pb:0,
-          '& .MuiListSubheader-gutters': {
-            bgcolor: bgColor
-          },
+          bgcolor: bgColor,
         }}
       >
-        {children}
-      </List>
-    </Collapse>
-  </div>
-  )
-}
+        <ListItemButton
+          onClick={handleClick}
+          key={title}
+          sx={{
+            backgroundColor: bgColor,
+            borderBottom: border ? `1px solid rgb(212, 212, 212)` : 'none',
+          }}
+        >
+          <MuiListItemIcon
+            className={
+              chevronPosition === 'end'
+                ? 'accordionAppendIcon'
+                : 'accordionPrependIcon'
+            }
+          >
+            <MuiIcon
+              name={SvgChevronDownLg}
+              className={open ? 'iconOpen' : 'iconClosed'}
+              sx={{ color: '#444444' }}
+            />
+          </MuiListItemIcon>
+          <MuiListItemText className="accordionTitle">
+            <Typography color={color} variant="body1">
+              {title}
+            </Typography>
+          </MuiListItemText>
+          {time && (
+            <MuiListItemText className="accordionTime">
+              <Typography variant="body1">{time}</Typography>
+            </MuiListItemText>
+          )}
+        </ListItemButton>
+      </ListSubheader>
+      <Collapse in={open} {...rest}>
+        <List
+          sx={{
+            bgcolor: bgColor,
+            pb: 0,
+            '& .MuiListSubheader-gutters': {
+              bgcolor: bgColor,
+            },
+          }}
+        >
+          {children}
+        </List>
+      </Collapse>
+    </div>
+  );
+};
 
-export default Accordion;
+export default Accordion;

package/src/Accordion/{AccordionProps.types.tsx → Accordion.types.ts}

@@ -1,4 +1,6 @@
-export interface AccordionProps {
+import { CollapseProps } from '@mui/material';
+
+export interface AccordionProps extends CollapseProps {
   children?: any;
   title?: string;
   time?: string;
@@ -6,5 +8,4 @@ export interface AccordionProps {
   bgColor?: string;
   border?: boolean;
   chevronPosition?: 'start' | 'end';
-  onClick?: (e: any) => void;
 }

package/src/Accordion/index.ts

@@ -1,2 +1,2 @@
-export * from './AccordionProps.types';
-export * from './Accordion';
+export * from './Accordion.types';
+export * from './Accordion';

package/src/AccordionDetails/AccordionDetails.stories.mdx

@@ -8,7 +8,19 @@ import { Typography } from "../Typography";
 # AccordionDetails
 
 <Canvas withToolbar>
-    <Story name="Default">
+    <Story name="Default" parameters={{ 
+        docs: {
+            source: {
+                code: `
+<AccordionDetails>
+    <Typography variant="body1">
+        Accordion Details
+    </Typography>
+</AccordionDetails>
+                `
+            }
+        }
+    }}>
         <AccordionDetails>
             <Typography variant="body1">
               Accordion Details

package/src/AccordionDetails/AccordionDetails.test.tsx

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

package/src/AccordionDetails/AccordionDetails.tsx

@@ -1,14 +1,9 @@
-import React from "react"
+import { AccordionDetails as MuiAccordionDetails } from '@mui/material';
 
-import {
-  MuiAccordionDetails
-} from "./AccordionDetails.styled"
-import { AccordionDetailsProps } from './AccordionDetailsProps.types'
+import { AccordionDetailsProps } from './AccordionDetails.types';
 
 export const AccordionDetails = (props: AccordionDetailsProps) => {
-  return (
-    <MuiAccordionDetails {...props} />
-  )
-}
+  return <MuiAccordionDetails {...props} />;
+};
 
-export default AccordionDetails
+export default AccordionDetails;

package/src/AccordionDetails/AccordionDetails.types.ts

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

package/src/AccordionDetails/index.ts

@@ -1,2 +1,2 @@
-export * from './AccordionDetailsProps.types';
-export * from './AccordionDetails';
+export * from './AccordionDetails.types';
+export * from './AccordionDetails';

package/src/AccordionPanel/AccordionPanel.test.tsx

@@ -1,6 +1,11 @@
+import React from 'react';
 import { render } from '@testing-library/react';
 import AccordionPanel from './AccordionPanel';
 
-test('renders', () => {
-  render(<AccordionPanel />);
-});
+test('AccordionPanel', () => {
+  render(
+    <AccordionPanel>
+      <div>Accordion Panel</div>
+    </AccordionPanel>
+  );
+});

package/src/AccordionPanel/AccordionPanel.tsx

@@ -1,16 +1,12 @@
-import React from "react"
-import { MuiAccordion } from "./AccordionPanel.styled"
-import { AccordionPanelProps } from './AccordionPanelProps.types'
+import { Accordion as MuiAccordion } from '@mui/material';
+import { AccordionPanelProps } from './AccordionPanel.types';
 
 export const AccordionPanel = (props: AccordionPanelProps) => {
   return (
-    <MuiAccordion 
-      disableGutters
-      {...props}
-    >
+    <MuiAccordion disableGutters {...props}>
       {props.children}
     </MuiAccordion>
-  )
-}
+  );
+};
 
-export default AccordionPanel
+export default AccordionPanel;

package/src/AccordionPanel/AccordionPanel.types.ts

@@ -0,0 +1,2 @@
+import { AccordionProps } from '@mui/material';
+export interface AccordionPanelProps extends AccordionProps {}

package/src/AccordionPanel/index.ts

@@ -1,2 +1,2 @@
-export * from './AccordionPanelProps.types';
-export * from './AccordionPanel';
+export * from './AccordionPanel.types';
+export * from './AccordionPanel';

package/src/AccordionSummary/AccordionSummary.test.tsx

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

package/src/AccordionSummary/AccordionSummary.tsx

@@ -1,23 +1,20 @@
-import React from "react"
-
-import { SvgChevronDownLg } from "../Icons/lawconnect"
-import {
-  MuiAccordionSummary,
-  Icon,
-} from "./AccordionSummary.styled"
-import { AccordionSummaryProps } from './AccordionSummaryProps.types'
+import { AccordionSummary as MuiAccordionSummary } from '@mui/material';
+import { SvgChevronDownLg } from '../Icons/lawconnect';
+import { Icon } from '../Icon';
+import { AccordionSummaryProps } from './AccordionSummary.types';
 
 export const AccordionSummary = (props: AccordionSummaryProps) => {
-  const {  bgColor, ...rest } = props
+  const { bgColor, ...rest } = props;
 
   return (
-    <MuiAccordionSummary {...rest}
+    <MuiAccordionSummary
       expandIcon={<Icon name={SvgChevronDownLg} />}
-      sx={{backgroundColor: bgColor}}
+      sx={{ backgroundColor: bgColor }}
+      {...rest}
     >
       {props.children}
     </MuiAccordionSummary>
-  )
-}
+  );
+};
 
-export default AccordionSummary
+export default AccordionSummary;

package/src/AccordionSummary/{AccordionSummaryProps.types.tsx → AccordionSummary.types.ts}

@@ -1,5 +1,5 @@
-import { AccordionSummaryProps as MuiAccordionSummaryProps } from "@mui/material"
+import { AccordionSummaryProps as MuiAccordionSummaryProps } from '@mui/material';
 
 export interface AccordionSummaryProps extends MuiAccordionSummaryProps {
-  bgColor?: string
+  bgColor?: string;
 }

package/src/AccordionSummary/index.ts

@@ -1,2 +1,2 @@
-export * from './AccordionSummaryProps.types';
-export * from './AccordionSummary';
+export * from './AccordionSummary.types';
+export * from './AccordionSummary';

package/src/ActivityLog/ActivityLog.stories.mdx

@@ -1,7 +1,6 @@
 
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 import ActivityLog from "./ActivityLog";
-import { Chip } from "../Chip";
 
 <Meta
   title="Components/Lists/ActivityLog"

package/src/ActivityLog/{ActivityLog.styled.ts → ActivityLog.styled.tsx}

@@ -5,38 +5,38 @@ import { ListItem } from '../ListItem/ListItem';
 import { ListItemIcon } from '../ListItemIcon/ListItemIcon';
 import { ListItemText } from '../ListItemText/ListItemText';
 
-export const MuiListItem = styled(ListItem)(({theme}) => ({
-    width: '100%',
-    borderBottom: `1px solid ${theme.palette.divider}`,
-    paddingLeft: 10,
-    paddingRight: 10,
-    minHeight: 44,
-}))
+export const MuiListItem = styled(ListItem)(({ theme }) => ({
+  width: '100%',
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  paddingLeft: 10,
+  paddingRight: 10,
+  minHeight: 44,
+}));
 
 export const MuiListItemICon = styled(ListItemIcon)(() => ({
   alignSelf: 'flex-start',
-  "&.prependIcon": {
+  '&.prependIcon': {
     marginTop: 4,
     width: 16,
     height: 16,
     minWidth: 16,
     marginRight: 10,
-    "& .MuiSvgIcon-root": {
-      fontSize: 16
+    '& .MuiSvgIcon-root': {
+      fontSize: 16,
     },
-    "& .MuiButtonBase-root": {
+    '& .MuiButtonBase-root': {
       padding: 0,
       backgroundColor: 'transparent',
-    }
+    },
   },
-  "&.docTypeIcon": {
+  '&.docTypeIcon': {
     minWidth: 16,
     marginRight: 10,
-    "& .MuiSvgIcon-root": {
-      fontSize: 24
-    }
+    '& .MuiSvgIcon-root': {
+      fontSize: 24,
+    },
   },
-}))
+}));
 
 export const MuiListItemText = styled(ListItemText)(() => ({
   marginTop: 0,
@@ -44,42 +44,46 @@ export const MuiListItemText = styled(ListItemText)(() => ({
   display: 'flex',
   flexDirection: 'row',
   flexWrap: 'wrap',
-  "&:hover": { 
+  '&:hover': {
     cursor: 'pointer',
   },
-  "& .MuiTypography-body1": {
-    "&:hover": {
-      cursor: 'pointer'
-    }
+  '& .MuiTypography-body1': {
+    '&:hover': {
+      cursor: 'pointer',
+    },
   },
-  "& .MuiListItemText-primary": {
-    display: 'flex'
+  '& .MuiListItemText-primary': {
+    display: 'flex',
   },
-}))
+}));
 
-export const ActivityLogChips = styled("div")(() => ({
+export const ActivityLogChips = styled('div')(() => ({
   width: '100%',
-  "& .MuiChip-root": {
+  '& .MuiChip-root': {
     marginRight: 5,
   },
-  "& .MuiChip-root:last-child": {
+  '& .MuiChip-root:last-child': {
     marginRight: 0,
-  }
-}))
+  },
+}));
 
 export const ActivityLogMainName = styled(Typography)(() => ({
-  flex: 'auto'
-}))
+  flex: 'auto',
+}));
 
-export const ActivityLogTime = styled("div")(() => ({
+export const ActivityLogTime = styled('div')(() => ({
   alignSelf: 'flex-start',
   maxWidth: 80,
   minWidth: 80,
   marginLeft: 5,
   textAlign: 'right',
-  whiteSpace: 'nowrap'
-}))
+  whiteSpace: 'nowrap',
+}));
+
+export const ActivityLogGroup = styled('div')(() => ({
+  alignSelf: 'flex-start',
+}));
 
-export const ActivityLogGroup = styled("div")(() => ({
-  alignSelf: 'flex-start'
-}))
+export const DocTypeImageStyled = styled('img')({
+  maxWidth: '24px',
+});

package/src/ActivityLog/ActivityLog.test.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ActivityLog from './ActivityLog';
+
+test('ActivityLog', () => {
+  render(
+    <ActivityLog
+      name="Created Letter of Demand"
+      time="9hr 35min"
+      ext="doc"
+      attachment
+      action={[
+        { label: 'info', variant: 'info' },
+        { label: 'danger', variant: 'danger' },
+        { label: 'warning', variant: 'warning' },
+        { label: 'success', variant: 'success' },
+      ]}
+      users={[
+        { name: 'Firstname Lastname', initials: 'FL' },
+        { name: 'Firstname Lastname', initials: 'FL' },
+        { name: 'Firstname Lastname', initials: 'FL' },
+      ]}
+      avatarGroupTooltip="Other names"
+    />
+  );
+});

package/src/ActivityLog/ActivityLog.tsx

@@ -17,19 +17,33 @@ import {
   MuiListItem,
   MuiListItemICon,
   MuiListItemText,
+  DocTypeImageStyled,
 } from './ActivityLog.styled';
 import { ActivityLogProps } from './ActivityLog.types';
 
-export const ActivityLog: React.FC<ActivityLogProps> = (props: ActivityLogProps) => {
-  const { name, time, ext, iconURL, onAttach, onClick, users, attachment, action, avatarGroupTooltip, insertIconTooltip='Insert', hover, tooltip='Preview', nameRef = undefined, ...defaultProps } = props;
+export const ActivityLog: React.FC<ActivityLogProps> = (
+  props: ActivityLogProps
+) => {
+  const {
+    name,
+    time,
+    ext,
+    iconURL,
+    onAttach,
+    onClick,
+    users,
+    attachment,
+    action,
+    avatarGroupTooltip,
+    insertIconTooltip = 'Insert',
+    hover,
+    tooltip = 'Preview',
+    nameRef = undefined,
+  } = props;
 
   return (
-    <MuiListItem {...defaultProps}>
-      <MuiListItemICon
-        className={
-          'prependIcon'
-        }
-      >
+    <MuiListItem>
+      <MuiListItemICon className="prependIcon">
         {attachment ? (
           <Tooltip title={insertIconTooltip}>
             <IconButton onClick={onAttach}>
@@ -41,13 +55,10 @@ export const ActivityLog: React.FC<ActivityLogProps> = (props: ActivityLogProps)
         )}
       </MuiListItemICon>
 
-      <MuiListItemICon
-        className={
-          'docTypeIcon'
-        }>
+      <MuiListItemICon className="docTypeIcon">
         {iconURL ? (
-          <img src={iconURL} style={{maxWidth: '24px'}} />
-          ) : (
+          <DocTypeImageStyled title={iconURL} src={iconURL} />
+        ) : (
           <AttachmentIcon ext={ext} />
         )}
       </MuiListItemICon>
@@ -81,7 +92,7 @@ export const ActivityLog: React.FC<ActivityLogProps> = (props: ActivityLogProps)
             noWrap
             variant="subtitle1"
             color="primary"
-            >
+          >
             {name}
           </ActivityLogMainName>
         )}
@@ -115,5 +126,5 @@ export const ActivityLog: React.FC<ActivityLogProps> = (props: ActivityLogProps)
       </MuiListItemText>
     </MuiListItem>
   );
-}
-export default ActivityLog;
+};
+export default ActivityLog;

package/src/ActivityLog/ActivityLog.types.ts

@@ -1,18 +1,16 @@
-import React from "react";
-
 export interface ActivityLogProps {
-    name?: string;
-    nameRef?: React.MutableRefObject<any>;
-    time?: string;
-    ext?: string;
-    iconURL?: string;
-    users?: any;
-    action?: any;
-    attachment?: boolean;
-    avatarGroupTooltip?: string;
-    hover?: boolean;
-    tooltip?: string;
-    insertIconTooltip?: string;
-    onAttach?: (e: any) => void;
-    onClick?: (e: any) => void;
-}
+  name?: string;
+  nameRef?: React.MutableRefObject<any>;
+  time?: string;
+  ext?: string;
+  iconURL?: string;
+  users?: any;
+  action?: any;
+  attachment?: boolean;
+  avatarGroupTooltip?: string;
+  hover?: boolean;
+  tooltip?: string;
+  insertIconTooltip?: string;
+  onAttach?: (e: any) => void;
+  onClick?: (e: any) => void;
+}

package/src/AppBar/AppBar.test.tsx

@@ -1,9 +1,9 @@
-import { render } from "@testing-library/react"
+import React from 'react';
+import { render } from '@testing-library/react';
+import { AppBar } from './AppBar';
 
-import { AppBar } from "./AppBar"
-
-describe("AppBar test", () => {
-  it("renders without crashing", () => {
-    render(<AppBar />)
-  })
-})
+describe('AppBar', () => {
+  it('renders without crashing', () => {
+    render(<AppBar />);
+  });
+});