@galaxy-ds/core 2.0.1 → 2.0.3

package/src/InputLabel/InputLabel.test.tsx

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

package/src/InputLabel/InputLabel.tsx

@@ -1,11 +1,11 @@
-import { InputLabel as MuiInputLabel } from "@mui/material"
+import { InputLabel as MuiInputLabel } from '@mui/material';
 
-import { InputLabelProps } from "./InputLabel.types"
+import { InputLabelProps } from './InputLabel.types';
 
 export const InputLabel = (props: InputLabelProps) => {
-  const { color, ...rest } = props
+  const { color, ...rest } = props;
 
-  return <MuiInputLabel {...rest} sx={{color: color}}/>
-}
+  return <MuiInputLabel sx={{ color: color }} {...rest} />;
+};
 
-export default InputLabel
+export default InputLabel;

package/src/InputLabel/InputLabel.types.ts

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

package/src/List/List.tsx

@@ -1,18 +1,18 @@
 // Generated with util/create-component.js
-import React from "react";
-import { List as MuiList, ListSubheader } from "@mui/material";
-import { ListProps } from "./List.types";
+import React from 'react';
+import { List as MuiList, ListSubheader } from '@mui/material';
+import { ListProps } from './List.types';
 
 export const List: React.FC<ListProps> = (props: ListProps) => {
   return (
     <MuiList
-      {...props}
       aria-labelledby="nested-list-subheader"
       subheader={
         <ListSubheader component="div" id="nested-list-subheader">
           {props.subheader}
         </ListSubheader>
       }
+      {...props}
     >
       {props.children}
     </MuiList>

package/src/List/List.types.ts

@@ -1,4 +1,2 @@
-import { ListProps as MuiListProps } from "@mui/material";
-export interface ListProps extends MuiListProps {
-  component?: React.ElementType;
-}
+import { ListProps as MuiListProps } from '@mui/material';
+export interface ListProps extends MuiListProps {}

package/src/ListItem/ListItem.test.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import ListItem from './ListItem';
+
+describe('ListItem', () => {
+  test('renders ListItem', () => {
+    render(<ListItem>ListItem</ListItem>);
+  });
+});

package/src/ListItem/ListItem.types.ts

@@ -1,10 +1,3 @@
-import { ListItemProps as MuiListItemProps } from '@mui/material/ListItem'
-/**
- * Workarounds for following MUI ListItem known issue:
- * https://github.com/mui-org/material-ui/issues/14971
- * button?: any;
- */
-export interface ListItemProps extends MuiListItemProps {
-  button?: any;
-  children?: any;
-}
+import { ListItemProps as MuiListItemProps } from '@mui/material/ListItem';
+
+export interface ListItemProps extends MuiListItemProps {}

package/src/ListItemAvatar/ListItemAvatar.stories.mdx

@@ -0,0 +1,21 @@
+import { Meta, Story, Canvas, ArgsTable } from "@storybook/addon-docs";
+import ListItemAvatar from "../ListItemAvatar/ListItemAvatar";
+import Avatar from "../Avatar/Avatar";
+
+<Meta title="components/Lists/List Item Avatar" component={ListItemAvatar} />
+
+# ListItemAvatar
+
+ListItemAvatar ....
+
+<Canvas withToolbar>
+  <Story name="Default" args={{}}>
+    {(args) => (
+        <ListItemAvatar {...args}>
+          <Avatar size="small">LT</Avatar>
+        </ListItemAvatar>
+    )}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Default" />

package/src/ListItemAvatar/ListItemAvatar.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ListItemAvatar } from './ListItemAvatar';
+
+describe('ListItemAvatar', () => {
+  test('renders ListItemAvatar', () => {
+    render(<ListItemAvatar>ListItemAvatar</ListItemAvatar>);
+  });
+});

package/src/ListItemAvatar/ListItemAvatar.tsx

@@ -1,7 +1,6 @@
-import React from "react";
-
-import { ListItemAvatar as MuiListItemAvatar } from "@mui/material";
-import { ListItemAvatarProps } from "./ListItemAvatar.types";
+import React from 'react';
+import { ListItemAvatar as MuiListItemAvatar } from '@mui/material';
+import { ListItemAvatarProps } from './ListItemAvatar.types';
 
 export const ListItemAvatar: React.FC<ListItemAvatarProps> = (
   props: ListItemAvatarProps

package/src/ListItemAvatar/ListItemAvatar.types.ts

@@ -1,6 +1,3 @@
-import { ListItemAvatarProps as MuiListItemAvatarProps } from "@mui/material";
+import { ListItemAvatarProps as MuiListItemAvatarProps } from '@mui/material';
 
-export interface ListItemAvatarProps extends MuiListItemAvatarProps {
-  children: any;
-  classes?: any;
-}
+export interface ListItemAvatarProps extends MuiListItemAvatarProps {}

package/src/ListItemHoverContent/ListItemHoverContent.stories.mdx

@@ -3,7 +3,7 @@ import ListItemHoverContent from "./ListItemHoverContent";
 import Typography from "../Typography/Typography";
 import { IconButton } from "../IconButton";
 import { Icon } from "../Icon";
-import { SvgMoreVerticalIcon } from "../Icons/lawconnect/";
+import { SvgMoreVerticalIcon } from "../Icons/lawconnect";
 
 <Meta
   title="components/Lists/ListItemHoverContent"

package/src/ListItemHoverContent/ListItemHoverContent.test.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Typography } from '../Typography';
+import { IconButton } from '../IconButton/IconButton';
+import { Icon } from '../Icon';
+import { SvgMoreVerticalIcon } from '../Icons/lawconnect';
+import ListItemHoverContent from './ListItemHoverContent';
+
+describe('ListItemHoverContent', () => {
+  test('renders ListItemHoverContent', () => {
+    render(
+      <ListItemHoverContent
+        hideOnHover={
+          <Typography component="span" variant="caption">
+            $350
+          </Typography>
+        }
+        showOnHover={
+          <IconButton size="small">
+            <Icon name={SvgMoreVerticalIcon} fontSize="small" />
+          </IconButton>
+        }
+      />
+    );
+  });
+});

package/src/ListItemIcon/ListItemIcon.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ListItemIcon } from './ListItemIcon';
+import { AttachmentIcon } from '../AttachmentIcon';
+
+describe('ListItemIcon', () => {
+  test('renders ListItemIcon', () => {
+    render(
+      <ListItemIcon>
+        <AttachmentIcon ext="default" />
+      </ListItemIcon>
+    );
+  });
+});

package/src/ListItemIcon/ListItemIcon.types.ts

@@ -1,6 +1,3 @@
-import { ListItemIconProps as MuiListItemIconProps } from "@mui/material";
+import { ListItemIconProps as MuiListItemIconProps } from '@mui/material';
 
-export interface ListItemIconProps extends MuiListItemIconProps {
-  children: any;
-  classes?: any;
-}
+export interface ListItemIconProps extends MuiListItemIconProps {}

package/src/ListItemText/ListItemText.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ListItemText } from './ListItemText';
+
+describe('ListItemText', () => {
+  test('renders ListItemText', () => {
+    render(<ListItemText>ListItemText</ListItemText>);
+  });
+});

package/src/ListSubheader/ListSubheader.types.ts

@@ -1,7 +1,2 @@
-import { ListSubheaderProps as MuiListSubheaderProps } from "@mui/material";
-export interface ListSubheaderProps extends MuiListSubheaderProps {
-  /**
-   * Sub header content
-   */
-  children: React.ReactNode;
-}
+import { ListSubheaderProps as MuiListSubheaderProps } from '@mui/material';
+export interface ListSubheaderProps extends MuiListSubheaderProps {}

package/src/Loader/Loader.stories.mdx

@@ -19,3 +19,4 @@ import { Loader } from "./Loader"
     {(args) => <Loader spinner {...args} />}
   </Story>
 </Canvas>
+

package/src/Loader/Loader.test.tsx

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

package/src/Loader/Loader.tsx

@@ -1,30 +1,40 @@
-import LoaderIcon from "./Icons/Loader"
-import SpinnerIcon from "./Icons/Spinner"
-import { LoaderContainer } from "./Loader.styled"
-import { LoaderProps } from "./Loader.types"
+import LoaderIcon from './Icons/Loader';
+import SpinnerIcon from './Icons/Spinner';
+import { LoaderContainer } from './Loader.styled';
+import { LoaderProps } from './Loader.types';
 
 export const Loader = (props: LoaderProps) => {
-  const { background, transparent, spinner, position = "fixed", ...rest } = props
+  const {
+    background,
+    transparent,
+    spinner,
+    position = 'fixed',
+    ...rest
+  } = props;
   return (
     <LoaderContainer
       sx={{
         position,
         zIndex: (theme) => theme.zIndex.drawer + 1,
         backgroundColor: transparent
-          ? background === "dark"
-            ? "rgba(38,48,66, 0.3)"
-            : "rgba(225,225,225, 0.3)"
-          : background === "dark"
+          ? background === 'dark'
+            ? 'rgba(38,48,66, 0.3)'
+            : 'rgba(225,225,225, 0.3)'
+          : background === 'dark'
           ? (theme) => theme.palette.text.secondary
           : (theme) => theme.palette.grey[50],
-        color: background === "dark" ? "#ffffff" : "text.primary",
+        color: background === 'dark' ? '#ffffff' : 'text.primary',
       }}
       {...rest}
       open={props.open}
     >
-      {spinner ? <SpinnerIcon color="inherit" /> : <LoaderIcon color="inherit" />}
+      {spinner ? (
+        <SpinnerIcon color="inherit" />
+      ) : (
+        <LoaderIcon color="inherit" />
+      )}
     </LoaderContainer>
-  )
-}
+  );
+};
 
-export default Loader
+export default Loader;

package/src/Logos/Leap/index.ts

@@ -1,4 +1,4 @@
-export {default as LawconnectIcon} from './LawconnectIcon'
-export {default as LeapLegsLogo} from './LeapLegsLogo'
-export {default as LeapLogo} from './LeapLogo'
-export {default as PoweredByLawconnectLogo} from './poweredByLawconnect'
+export { default as LawconnectIcon } from './LawconnectIcon';
+export { default as LeapLegsLogo } from './LeapLegsLogo';
+export { default as LeapLogo } from './LeapLogo';
+export { default as PoweredByLawconnectLogo } from './PoweredByLawconnect';

package/src/Logos/Logos.stories.mdx

@@ -16,11 +16,19 @@ import {LawconnectIcon, LeapLegsLogo, LeapLogo, PoweredByLawconnectLogo} from '.
 </Canvas>
 
 <Canvas withToolbar>
-  <Story name="LawConnect">
+  <Story name="LawConnect Icon">
     <div style={{ display: 'flex', gap: 16, height: 80, backgroundColor: 'white', padding: 16 }}>
       <LawconnectIcon />
+    </div>
+  </Story>
+</Canvas>
+
+<Canvas withToolbar>
+  <Story name="LawConnect PoweredByLawconnectLogo">
+    <div style={{ display: 'flex', gap: 16, height: 80, backgroundColor: 'white', padding: 16 }}>
       <PoweredByLawconnectLogo />
     </div>
   </Story>
 </Canvas>
 
+

package/src/Menu/Menu.stories.mdx

@@ -1,11 +1,10 @@
-import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs"
-
-import { Chip } from "../Chip"
-import { MenuItem } from "../MenuItem"
-import { TextField } from "../TextField"
-import { Typography } from "../Typography"
-import { Icon } from "../Icon"
-import { SvgTick } from "../Icons/lawconnect/"
+import { useState } from 'react';
+import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
+import { MenuItem } from "../MenuItem";
+import { Typography } from "../Typography";
+import { Icon } from "../Icon";
+import { SvgTick } from "../Icons/lawconnect";
+import { Button } from "../Button";
 
 import { Menu } from "./Menu"
 
@@ -14,69 +13,191 @@ import { Menu } from "./Menu"
 # Menu
 
 <Canvas withToolbar>
-  <Story name="Default" args={{ }}>
-    {(args) => (
-      <Menu {...args} open>
-        <MenuItem>
-          <Typography variant="body1">Menu Item 1</Typography>
-        </MenuItem>
-        <MenuItem>
-          <Typography variant="body1">Menu Item 2</Typography>
-        </MenuItem>
-        <MenuItem>
-          <Typography variant="body1">Menu Item 3</Typography>
-        </MenuItem>
-        <MenuItem>
-          <Typography variant="body1">Menu Item 4</Typography>
-        </MenuItem>
-      </Menu>
-    )}
+  <Story name="Default" args={{}} parameters={{ docs: { source: { code: `
+const [anchorEl, setAnchorEl] = useState(null);
+const open = Boolean(anchorEl);
+const handleClick = (event) => {
+  setAnchorEl(event.currentTarget);
+};
+const handleClose = () => {
+  setAnchorEl(null);
+};
+return (
+  <>
+    <Button variant="contained" color="inherit" onClick={handleClick}>Default</Button>
+    <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
+      <MenuItem>
+        <Typography variant="body1">Menu Item 1</Typography>
+      </MenuItem>
+      <MenuItem>
+        <Typography variant="body1">Menu Item 2</Typography>
+      </MenuItem>
+      <MenuItem>
+        <Typography variant="body1">Menu Item 3</Typography>
+      </MenuItem>
+      <MenuItem>
+        <Typography variant="body1">Menu Item 4</Typography>
+      </MenuItem>
+    </Menu>
+  </>
+  `}}}}>
+    {(args) => {
+      const [anchorEl, setAnchorEl] = useState(null);
+      const open = Boolean(anchorEl);
+      const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+      };
+      const handleClose = () => {
+        setAnchorEl(null);
+      };
+      return (
+        <>
+          <Button variant="contained" color="inherit" onClick={handleClick}>Default</Button>
+          <Menu anchorEl={anchorEl} open={open} onClose={handleClose} {...args}>
+            <MenuItem>
+              <Typography variant="body1">Menu Item 1</Typography>
+            </MenuItem>
+            <MenuItem>
+              <Typography variant="body1">Menu Item 2</Typography>
+            </MenuItem>
+            <MenuItem>
+              <Typography variant="body1">Menu Item 3</Typography>
+            </MenuItem>
+            <MenuItem>
+              <Typography variant="body1">Menu Item 4</Typography>
+            </MenuItem>
+          </Menu>
+        </>
+      )}
+    }
   </Story>
 </Canvas>
 
 ### Selected
 
 <Canvas>
-  <Story name="Selected" args={{}}>
-    {(args) => (
-      <Menu {...args} open>
-        <MenuItem selected startIcon={<Icon name={SvgTick}/>}>
-          <Typography variant="body1">Menu Item 1</Typography>
-        </MenuItem>
-        <MenuItem startIcon={<Icon name={SvgTick}/>}>
-          <Typography variant="body1">Menu Item 2</Typography>
-        </MenuItem>
-        <MenuItem startIcon={<Icon name={SvgTick}/>}>
-          <Typography variant="body1">Menu Item 3</Typography>
-        </MenuItem>
-        <MenuItem startIcon={<Icon name={SvgTick}/>}>
-          <Typography variant="body1">Menu Item 4</Typography>
-        </MenuItem>
-      </Menu>
-    )}
+  <Story name="Selected" args={{}} parameters={{ docs: { source: { code: `
+const [anchorEl, setAnchorEl] = useState(null);
+const open = Boolean(anchorEl);
+const handleClick = (event) => {
+  setAnchorEl(event.currentTarget);
+};
+const handleClose = () => {
+  setAnchorEl(null);
+};
+return (
+<>
+  <Button variant="contained" color="inherit" onClick={handleClick}>Selected</Button>
+  <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
+    <MenuItem selected startIcon={<Icon name={SvgTick}/>}>
+      <Typography variant="body1">Menu Item 1</Typography>
+    </MenuItem>
+    <MenuItem startIcon={<Icon name={SvgTick}/>}>
+      <Typography variant="body1">Menu Item 2</Typography>
+    </MenuItem>
+    <MenuItem startIcon={<Icon name={SvgTick}/>}>
+      <Typography variant="body1">Menu Item 3</Typography>
+    </MenuItem>
+    <MenuItem startIcon={<Icon name={SvgTick}/>}>
+      <Typography variant="body1">Menu Item 4</Typography>
+    </MenuItem>
+  </Menu>
+</>
+)
+  `}}}}>
+    {(args) => {
+      const [anchorEl, setAnchorEl] = useState(null);
+      const open = Boolean(anchorEl);
+      const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+      };
+      const handleClose = () => {
+        setAnchorEl(null);
+      };
+      return (
+      <>
+          <Button variant="contained" color="inherit" onClick={handleClick}>Selected</Button>
+          <Menu anchorEl={anchorEl} open={open} onClose={handleClose} {...args}>
+          <MenuItem selected startIcon={<Icon name={SvgTick}/>}>
+            <Typography variant="body1">Menu Item 1</Typography>
+          </MenuItem>
+          <MenuItem startIcon={<Icon name={SvgTick}/>}>
+            <Typography variant="body1">Menu Item 2</Typography>
+          </MenuItem>
+          <MenuItem startIcon={<Icon name={SvgTick}/>}>
+            <Typography variant="body1">Menu Item 3</Typography>
+          </MenuItem>
+          <MenuItem startIcon={<Icon name={SvgTick}/>}>
+            <Typography variant="body1">Menu Item 4</Typography>
+          </MenuItem>
+        </Menu>
+      </>
+      )
+    }}
   </Story>
 </Canvas>
 
 ### System
 
 <Canvas>
-  <Story name="System" args={{ }}>
-    {(args) => (
-      <Menu {...args} open system>
-        <MenuItem system selected startIcon={<Icon name={SvgTick}/>}>
-          <Typography variant="body1">Menu Item 1</Typography>
-        </MenuItem>
-        <MenuItem system>
-          <Typography variant="body1">Menu Item 2</Typography>
-        </MenuItem>
-        <MenuItem system>
-          <Typography variant="body1">Menu Item 3</Typography>
-        </MenuItem>
-        <MenuItem system>
-          <Typography variant="body1">Menu Item 4</Typography>
-        </MenuItem>
+  <Story name="System" args={{}} parameters={{ docs: { source: { code: `
+const [anchorEl, setAnchorEl] = useState(null);
+const open = Boolean(anchorEl);
+const handleClick = (event) => {
+  setAnchorEl(event.currentTarget);
+};
+const handleClose = () => {
+  setAnchorEl(null);
+};
+return (
+<>
+  <Button variant="contained" color="inherit" onClick={handleClick}>System</Button>
+  <Menu anchorEl={anchorEl} open={open} onClose={handleClose} system>
+    <MenuItem system selected startIcon={<Icon name={SvgTick}/>}>
+      <Typography variant="body1">Menu Item 1</Typography>
+    </MenuItem>
+    <MenuItem system>
+      <Typography variant="body1">Menu Item 2</Typography>
+    </MenuItem>
+    <MenuItem system>
+      <Typography variant="body1">Menu Item 3</Typography>
+    </MenuItem>
+    <MenuItem system>
+      <Typography variant="body1">Menu Item 4</Typography>
+    </MenuItem>
+  </Menu>
+</>
+)
+  `}}}}>
+     {(args) => {
+      const [anchorEl, setAnchorEl] = useState(null);
+      const open = Boolean(anchorEl);
+      const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+      };
+      const handleClose = () => {
+        setAnchorEl(null);
+      };
+      return (
+      <>
+        <Button variant="contained" color="inherit" onClick={handleClick}>System</Button>
+        <Menu  anchorEl={anchorEl} open={open} onClose={handleClose} system {...args}>
+          <MenuItem system selected startIcon={<Icon name={SvgTick}/>}>
+            <Typography variant="body1">Menu Item 1</Typography>
+          </MenuItem>
+          <MenuItem system>
+            <Typography variant="body1">Menu Item 2</Typography>
+          </MenuItem>
+          <MenuItem system>
+            <Typography variant="body1">Menu Item 3</Typography>
+          </MenuItem>
+          <MenuItem system>
+            <Typography variant="body1">Menu Item 4</Typography>
+          </MenuItem>
       </Menu>
+      </>
     )}
+  }
   </Story>
 </Canvas>
 

package/src/Menu/Menu.test.tsx

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

package/src/Menu/Menu.tsx

@@ -20,7 +20,6 @@ export const Menu = forwardRef<HTMLDivElement, MenuProps>(
     }
     return (
       <MuiMenu
-        {...rest}
         ref={ref}
         className={system ? 'gds-menu-system' : ''}
         MenuListProps={{
@@ -29,6 +28,7 @@ export const Menu = forwardRef<HTMLDivElement, MenuProps>(
               theme.platform.name === 'lawconnect' ? paddings : '',
           },
         }}
+        {...rest}
       >
         {heading ? <MenuHeader>{heading}</MenuHeader> : ''}
         {props.children}