@galaxy-ds/core 2.0.2 → 2.0.4

package/src/Select/Select.styled.tsx

@@ -0,0 +1,40 @@
+import { Select as MuiSelect } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+export const SelectStyled = styled(MuiSelect)(({ theme }) => ({
+  borderRadius: theme.shapes.card,
+  height: 40,
+
+  select: {
+    padding: '0 16px',
+    height: 40,
+    lineHeight: '40px',
+    display: 'flex',
+    alignItems: 'center',
+    '& .MuiTypography-root': {
+      fontWeight: 'inherit',
+    },
+    '&.MuiInputBase-input, &.MuiOutlinedInput-input': {
+      paddingRight: '44px',
+      paddingTop: 0,
+    },
+    '&.MuiInputBase-input.MuiFilledInput-input': {},
+    '&.MuiInputBase-input': {
+      '&.MuiFilledInput-input': {
+        '&:focus': {
+          backgroundColor: 'transparent',
+        },
+      },
+    },
+  },
+  '& .MuiFilledInput-input': {
+    paddingTop: '8px',
+    '&:focus': {
+      backgroundColor: 'transparent',
+    },
+  },
+
+  legend: {
+    display: 'none',
+  },
+}));

package/src/Select/Select.test.tsx

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

package/src/Select/Select.tsx

@@ -1,13 +1,11 @@
-import React, { useState } from 'react';
-
-import { MuiSelect } from './Select.styled';
+import { SelectStyled } from './Select.styled';
 
 import SvgChevronDownLg from '../Icons/lawconnect/ChevronDownLg';
 
 import { SelectProps } from './Select.types';
 
 export const Select = (props: SelectProps) => {
-  return <MuiSelect {...props} IconComponent={SvgChevronDownLg} />;
+  return <SelectStyled IconComponent={SvgChevronDownLg} {...props} />;
 };
 
 export default Select;

package/src/SidebarLayout/SidebarLayout.test.tsx

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

package/src/SidebarLayout/SidebarLayout.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SidebarLayoutProps } from './SidebarLayoutProps.types';
+import { SidebarLayoutProps } from './SidebarLayout.types';
 
 import {
   SidebarWrapper,
@@ -14,7 +14,6 @@ export const SidebarLayout: any = ({
   children,
   sidebarWidth = 260,
   sidebarBgColor = '#f3f3f3',
-  ...props
 }: SidebarLayoutProps) => {
   const sidebar = children.find(
     (el: React.ReactElement) => el.type === Sidebar
@@ -22,7 +21,6 @@ export const SidebarLayout: any = ({
   const main = children.find((el: React.ReactElement) => el.type === Main);
   return (
     <SidebarWrapper display="flex">
-      {/* <SidebarSide bgcolor={sidebarBgColor}> */}
       <SidebarSide bgcolor={sidebarBgColor} width={sidebarWidth}>
         {sidebar && sidebar.props.children}
       </SidebarSide>

package/src/SidebarLayout/index.ts

@@ -1,2 +1,2 @@
-export * from './SidebarLayoutProps.types';
-export * from './SidebarLayout';
+export * from './SidebarLayout.types';
+export * from './SidebarLayout';

package/src/StepNavigation/StepNavigation.styled.tsx

@@ -1,54 +1,53 @@
-import { styled } from "@mui/material/styles"
+import { styled } from '@mui/material/styles';
+import { Typography } from '../Typography';
 
-import { Typography } from "../Typography"
-
-const StepsContainer = styled("div")(({ theme }) => ({
+const StepsContainer = styled('div')(({ theme }) => ({
   height: 4,
-  width: "100%",
+  width: '100%',
   borderRadius: theme.shape.borderRadius,
   backgroundColor: theme.palette.background.default,
-  display: "flex",
-}))
+  display: 'flex',
+}));
 
-const StepBar = styled("div")(({ theme }) => ({
+const StepBar = styled('div')(({ theme }) => ({
   height: 4,
-  width: "100%",
-  "&:first-of-type": {
+  width: '100%',
+  '&:first-of-type': {
     borderRadius: theme.shape.borderRadius,
     borderBottomRightRadius: 0,
     borderTopRightRadius: 0,
   },
-  "&:last-of-type": {
+  '&:last-of-type': {
     borderRadius: theme.shape.borderRadius,
     borderBottomLeftRadius: 0,
     borderTopLeftRadius: 0,
   },
-  "&.active": {
+  '&.active': {
     backgroundColor: theme.palette.text.primary,
     borderRadius: theme.shape.borderRadius,
-    "&:not(:first-of-type)": {
+    '&:not(:first-of-type)': {
       borderBottomLeftRadius: 0,
       borderTopLeftRadius: 0,
     },
   },
-  "&.completed": {
+  '&.completed': {
     backgroundColor: theme.palette.text.secondary,
   },
-}))
+}));
 
-const LabelsContainer = styled("div")(() => ({
+const LabelsContainer = styled('div')(() => ({
   marginTop: 8,
-  display: "flex",
-}))
+  display: 'flex',
+}));
 
 const StepLabel = styled(Typography)(({ theme }) => ({
   color: theme.palette.text.disabled,
-  "&.active": {
+  '&.active': {
     color: theme.palette.text.primary,
   },
-  "&.completed": {
+  '&.completed': {
     color: theme.palette.text.secondary,
   },
-}))
+}));
 
-export { StepsContainer, StepBar, LabelsContainer, StepLabel }
+export { StepsContainer, StepBar, LabelsContainer, StepLabel };

package/src/StepNavigation/StepNavigation.test.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import StepNavigation from './StepNavigation';
+
+test('StepNaviation', () => {
+  render(<StepNavigation activeStep={1} />);
+});

package/src/StepNavigation/StepNavigation.tsx

@@ -9,7 +9,7 @@ import {
 import { StepNavigationProps } from './StepNavigation.types';
 
 export const StepNavigation = (props: StepNavigationProps) => {
-  const { ref, steps, activeStep } = props
+  const { ref, steps, activeStep } = props;
 
   return (
     <>
@@ -18,8 +18,8 @@ export const StepNavigation = (props: StepNavigationProps) => {
           <StepBar
             key={label}
             className={clsx(
-              activeStep === index ? "active" : "",
-              activeStep > index ? "completed" : ""
+              activeStep === index ? 'active' : '',
+              activeStep > index ? 'completed' : ''
             )}
           ></StepBar>
         ))}
@@ -29,18 +29,18 @@ export const StepNavigation = (props: StepNavigationProps) => {
           <StepLabel
             key={label}
             className={clsx(
-              activeStep === index ? "active" : "",
-              activeStep > index ? "completed" : ""
+              activeStep === index ? 'active' : '',
+              activeStep > index ? 'completed' : ''
             )}
-            variant={"subtitle2"}
-            width={100 / steps.length + "%"}
+            variant={'subtitle2'}
+            width={100 / steps.length + '%'}
           >
             {label}
           </StepLabel>
         ))}
       </LabelsContainer>
     </>
-  )
-}
+  );
+};
 
-export default StepNavigation
+export default StepNavigation;

package/src/Switch/Switch.test.tsx

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

package/src/Switch/Switch.tsx

@@ -1,13 +1,9 @@
-import React from "react";
-import { Switch as MuiSwitch } from "@mui/material";
-import { SwitchProps } from "./SwitchProps.types";
+import React from 'react';
+import { Switch as MuiSwitch } from '@mui/material';
+import { SwitchProps } from './Switch.types';
 
 export const Switch: React.FC<SwitchProps> = (props: SwitchProps) => {
-  return (
-    <>
-      <MuiSwitch color="default" {...props} />
-    </>
-  );
+  return <MuiSwitch color="default" {...props} />;
 };
 
 export default Switch;

package/src/Switch/index.ts

@@ -1,2 +1,2 @@
-export * from './SwitchProps.types';
-export * from './Switch';
+export * from './Switch.types';
+export * from './Switch';

package/src/Tab/Tab.stories.mdx

@@ -0,0 +1,14 @@
+import { Canvas, Meta, Story } from "@storybook/addon-docs"
+import { Tab } from "../Tab"
+
+<Meta title="components/Tab" component={Tab} />
+
+# Tab
+<Canvas withToolbar>
+  <Story name="Default" args={{}}>
+   {(args) => (
+     <Tab label="One" value={0} {...args}/>
+   )}
+  </Story>
+</Canvas>
+

package/src/Tab/Tab.test.tsx

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

package/src/TabListItem/TabListItem.stories.mdx

@@ -7,8 +7,6 @@ import { Typography } from '../Typography/Typography';
 import { IconButton } from '../IconButton/IconButton';
 import { ListItemAvatar } from '../ListItemAvatar/ListItemAvatar';
 import { ListItemText } from '../ListItemText/ListItemText';
-// import MoreVerticalIcon from '../Icons/MoreVerticalIcon'
-// import ResponseIcon from '../Icons/ResponseIcon'
 import { SvgMoreVerticalIcon, SvgBubble } from '../Icons/lawconnect/';
 import { Icon } from '../Icon/Icon';
 
@@ -29,9 +27,32 @@ import TabListItem from '@galaxy-ds/core';
 ```
 
 <Canvas withToolbar>
-  <Story name="Default" args={{}}>
+  <Story name="Default" args={{}} parameters={{ docs: { source: { code: `
+<TabListItem
+  hideOnHover={
+    <span>
+      <Typography component="span" variant="caption">
+        $350
+      </Typography>
+    </span>
+  }
+  showOnHover={
+    <IconButton size="small">
+      <Icon name={SvgMoreVerticalIcon} fontSize="small" />
+    </IconButton>
+  }
+>
+  <ListItemAvatar>
+    <Avatar size="xsmall">LT</Avatar>
+  </ListItemAvatar>
+  <ListItemText primaryTypographyProps={{ noWrap: true }}>
+    Laura Tamar
+  </ListItemText>
+</TabListItem>`
+    }}}}>
     {(args) => (
       <TabListItem
+        {...args}
         hideOnHover={
           <span>
             <Typography component="span" variant="caption">
@@ -59,7 +80,37 @@ import TabListItem from '@galaxy-ds/core';
 <ArgsTable story="Default" />
 
 <Canvas>
-  <Story name="Text Prepend Icon" args={{}}>
+  <Story name="Text Prepend Icon" args={{}} parameters={{ docs: { source: { code: `
+<TabListItem
+  hideOnHover={
+    <span>
+      <Typography component="span" variant="caption">
+        $350
+      </Typography>
+    </span>
+  }
+  showOnHover={
+    <IconButton size="small">
+      <Icon name={SvgMoreVerticalIcon} fontSize="small" />
+    </IconButton>
+  }
+>
+  <ListItemAvatar>
+    <Avatar size="xsmall">LT</Avatar>
+  </ListItemAvatar>
+  <Box
+    display="flex"
+    justifyContent="center"
+    alignItems="center"
+    style={{ height: 20 }}
+  >
+    <Icon name={SvgBubble} fontSize="small" />
+  </Box>
+  <ListItemText primaryTypographyProps={{ noWrap: true }}>
+    <>Laura Tamar</>
+  </ListItemText>
+</TabListItem>
+  `}}}}>
     {(args) => (
       <TabListItem
         hideOnHover={

package/src/TabListItem/TabListItem.styled.tsx

@@ -9,7 +9,6 @@ export const StyledListItemButton = styled(ListItemButton)({
   position: 'relative',
   zIndex: 0,
   lineHeight: '1.25rem',
-  // width: (props: { width: number }) => props.width,
   '&:hover .hide-on-hover': {
     opacity: 0,
   },

package/src/TabListItem/TabListItem.test.tsx

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

package/src/TabListItem/TabListItem.types.ts

@@ -1,7 +1,6 @@
-import { ListItemProps } from "@mui/material";
+import { ListItemButtonProps } from '@mui/material';
 
-export interface TabListItemProps {
-  children: any;
+export interface TabListItemProps extends ListItemButtonProps {
   /**
    * Content that hidden when list item on hover
    */

package/src/Table/Table.stories.mdx

@@ -33,7 +33,44 @@ All Table components (Table, TableBody, TableHead, TableFooter, TableRow, TableC
 For example, `component='div'`.
 
 <Canvas withToolbar>
-  <Story name="Default" args={{ size: 'small' }}>
+  <Story name="Default" args={{ size: 'small' }} parameters={{ docs: { source: { code: `
+<TableContainer>
+  <Table size="small">
+    <TableHead>
+      <TableRow>
+        <TableCell><Typography variant='caption'>Shared with</Typography></TableCell>
+        <TableCell align='center' width={180}><Typography variant='caption'>Shared as</Typography></TableCell>
+        <TableCell align='center' width={180}><Typography variant='caption'>Access</Typography></TableCell>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      {['Laura', 'Barry Su', 'Fast Contracts'].map(name =>
+        <TableRow key={name}>
+          <TableCell padding='none' size="small">
+            <ListItem component="span" dense>
+              <ListItemAvatar>
+                <Avatar size="small"><Icon name={AvatarPersonIcon} /></Avatar>
+              </ListItemAvatar>
+              <ListItemText secondary="Laura Anderson">
+                <Typography variant='subtitle1' component='span' color='primary' noWrap>{name}</Typography>
+                <Typography component='span' color='text.light'>(Client)</Typography>
+              </ListItemText>
+            </ListItem>
+          </TableCell>
+          <TableCell align='center' size="small">PDF</TableCell>
+          <TableCell size="small">
+            <Dropdown align="right" defaultValue="1" displayEmpty startAdornment={<Icon name={UserLockIcon}/>}>
+              <MenuItem value={1}>Sign in to view</MenuItem>
+              <MenuItem value={2}>Anyone with link can view</MenuItem>
+              <MenuItem value={3}>Revoke access</MenuItem>
+            </Dropdown>
+          </TableCell>
+        </TableRow>
+      )}
+    </TableBody>
+  </Table>
+</TableContainer>
+  `}}}}>
     {(args) => (
       <div style={{maxWidth: 650}}>
       <TableContainer>
@@ -79,7 +116,46 @@ For example, `component='div'`.
 Compact Table use `size='small'`
 
 <Canvas withToolbar>
-  <Story name="Checkbox" args={{ size: 'small' }}>
+  <Story name="Checkbox" args={{ size: 'small' }} parameters={{ docs: { source: { code: `
+  <TableContainer>
+    <Table size="small">
+    <TableHead>
+      <TableRow>
+        <TableCell colSpan={2}><Typography variant='caption'>Item</Typography></TableCell>
+        <TableCell align='center' width={70}><Typography noWrap variant='caption'>Staff</Typography></TableCell>
+        <TableCell align='center' width={100}><Typography variant='caption'>Created</Typography></TableCell>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      {['Laura', 'Barry Su', 'Fast Contracts'].map(name =>
+        <TableRow key={name}>
+          <TableCell padding="checkbox" size="small">
+            <Checkbox />
+          </TableCell>
+          <TableCell padding='none' size="small">
+            <ListItem component="span" disableGutters dense>
+              <ListItemIcon>
+                <AttachmentIcon size="small" ext="pdf" />
+              </ListItemIcon>
+              <ListItemText>
+                <Typography variant='body2' component='span' noWrap>Letter of Demand</Typography>
+              </ListItemText>
+            </ListItem>
+          </TableCell>
+          <TableCell align='center' size="small"> 
+              <TableCellIcon align='center'>
+                <Avatar
+                  color="default"
+                  size="small">RR</Avatar>
+              </TableCellIcon> 
+          </TableCell>
+          <TableCell align='center' size="small"><Typography noWrap variant='body2'>28 Mar 2021</Typography></TableCell>
+        </TableRow>
+      )}
+    </TableBody>
+  </Table>
+</TableContainer>
+  `}}}}>
     {(args) => (
       <div style={{maxWidth: 650}}>
       <TableContainer>
@@ -93,33 +169,33 @@ Compact Table use `size='small'`
           </TableHead>
           <TableBody>
             {['Laura', 'Barry Su', 'Fast Contracts'].map(name =>
-              <TableRow key={name}>
-                <TableCell padding="checkbox" size="small">
-                  <Checkbox />
-                </TableCell>
-                <TableCell padding='none' size="small">
-                  <ListItem component="span" disableGutters dense>
-                    <ListItemIcon>
-                      <AttachmentIcon size="small" ext="pdf" />
-                    </ListItemIcon>
-                    <ListItemText>
-                      <Typography variant='body2' component='span' noWrap>Letter of Demand</Typography>
-                    </ListItemText>
-                  </ListItem>
-                </TableCell>
-                <TableCell align='center' size="small"> 
-                    <TableCellIcon align='center'>
-                      <Avatar
-                        color="default"
-                        size="small">RR</Avatar>
-                    </TableCellIcon> 
-                </TableCell>
-                <TableCell align='center' size="small"><Typography noWrap variant='body2'>28 Mar 2021</Typography></TableCell>
-              </TableRow>
-            )}
-          </TableBody>
-        </Table>
-      </TableContainer>
+                <TableRow key={name}>
+                  <TableCell padding="checkbox" size="small">
+                    <Checkbox />
+                  </TableCell>
+                  <TableCell padding='none' size="small">
+                    <ListItem component="span" disableGutters dense>
+                      <ListItemIcon>
+                        <AttachmentIcon size="small" ext="pdf" />
+                      </ListItemIcon>
+                      <ListItemText>
+                        <Typography variant='body2' component='span' noWrap>Letter of Demand</Typography>
+                      </ListItemText>
+                    </ListItem>
+                  </TableCell>
+                  <TableCell align='center' size="small"> 
+                      <TableCellIcon align='center'>
+                        <Avatar
+                          color="default"
+                          size="small">RR</Avatar>
+                      </TableCellIcon> 
+                  </TableCell>
+                  <TableCell align='center' size="small"><Typography noWrap variant='body2'>28 Mar 2021</Typography></TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </TableContainer>
       </div>
     )}
   </Story>
@@ -130,7 +206,46 @@ Compact Table use `size='small'`
 To make table header sticky set `stickyHeader` to `true`.
 
 <Canvas>
-  <Story name="Sticky Header" args={{stickyHeader: true}}>
+  <Story name="Sticky Header" args={{stickyHeader: true}} parameters={{ docs: { source: { code: `
+<TableContainer style={{maxHeight: 200}}>
+  <Table stickyHeader>
+    <TableHead>
+      <TableRow>
+        <TableCell colSpan={2}><Typography variant='caption'>Item</Typography></TableCell>
+        <TableCell align='center' width={70}><Typography noWrap variant='caption'>Staff</Typography></TableCell>
+        <TableCell align='center' width={100}><Typography variant='caption'>Created</Typography></TableCell>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      {['Laura', 'Barry Su', 'Fast Contracts', 'Stan Tamar', 'John Smith'].map(name =>
+        <TableRow key={name}>
+          <TableCell padding="checkbox">
+            <Checkbox />
+          </TableCell>
+          <TableCell padding='none'>
+            <ListItem component="span" disableGutters dense>
+              <ListItemIcon>
+                <AttachmentIcon size="small" ext="pdf" />
+              </ListItemIcon>
+              <ListItemText>
+                <Typography variant='body2' component='span' noWrap>Letter of Demand</Typography>
+              </ListItemText>
+            </ListItem>
+          </TableCell>
+          <TableCell align='center'> 
+              <TableCellIcon align='center'>
+                <Avatar
+                  color="default"
+                  size="small">RR</Avatar>
+              </TableCellIcon> 
+          </TableCell>
+          <TableCell align='center'><Typography noWrap variant='body2'>28 Mar 2021</Typography></TableCell>
+        </TableRow>
+      )}
+    </TableBody>
+  </Table>
+</TableContainer>
+  `}}}}>
     {(args) => (
       <div style={{maxWidth: 650}}>
       <TableContainer style={{maxHeight: 200}}>

package/src/Table/Table.test.tsx

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

package/src/Table/Table.tsx

@@ -1,10 +1,7 @@
-import React from "react";
+import React from 'react';
 import { Table as MuiTable } from '@mui/material';
-import { TableProps } from "./TableProps.types";
-
+import { TableProps } from './Table.types';
 
 export const Table: React.FC<TableProps> = (props: TableProps) => {
-  return (
-    <MuiTable {...props}/>
-  )
-}
+  return <MuiTable {...props} />;
+};