@galaxy-ds/core 2.0.2 → 2.0.4

package/src/Button/Button.tsx

@@ -1,14 +1,14 @@
-import { GDSButtonProps } from './ButtonProps.types';
+import { GDSButtonProps } from './Button.types';
 import { ButtonStyled } from './Button.styled';
 import { CircularProgress } from '@mui/material';
 
 export const Button = (props: GDSButtonProps) => {
-  const { isLoading, children, color, ...rest } = props;
+  const { isLoading, children, ...rest } = props;
   return (
     <ButtonStyled {...rest}>
-      {!isLoading ? children : <CircularProgress size={16} color="inherit"/>}
+      {!isLoading ? children : <CircularProgress size={16} color="inherit" />}
     </ButtonStyled>
-  )
-}
+  );
+};
 
-export default Button;
+export default Button;

package/src/Button/Button.types.ts

@@ -0,0 +1,5 @@
+import { ButtonProps } from '@mui/material';
+export interface GDSButtonProps extends ButtonProps {
+  isLoading?: boolean;
+  children: any;
+}

package/src/Button/index.ts

@@ -1,2 +1,2 @@
-export * from './ButtonProps.types';
-export * from './Button';
+export * from './Button.types';
+export * from './Button';

package/src/Card/Card.stories.mdx

@@ -1,5 +1,5 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
-
+import Stack from "@mui/material/Stack"
 import { Card } from './Card'
 import { Typography } from '../Typography'
 
@@ -10,11 +10,23 @@ import { Typography } from '../Typography'
 Using the `variant` property with value `elevation` or `outlined`.
 
 <Canvas withToolbar>
-    <Story name="Default" args={{}}>
+    <Story name="Default" args={{}} parameters={{ docs: { source: { code: `
+<Card variant='elevation' sx={{ height: '200px', width: '200px'}}>
+  <Typography sx={{ padding: 8 }}>Card</Typography>
+</Card>
+<Card variant='outlined' sx={{ height: '200px', width: '200px'}}>
+  <Typography sx={{ padding: 8 }}>Card</Typography>
+</Card>
+    `}}}}>
         {(args) => (
-            <Card {...args}>
-                <Typography>Card</Typography>
-            </Card>
+            <Stack direction="row" spacing={2}>
+                <Card {...args} variant='elevation' sx={{ height: '200px', width: '200px'}}>
+                    <Typography sx={{ padding: 8 }}>Card</Typography>
+                </Card>
+                  <Card {...args} variant='outlined' sx={{ height: '200px', width: '200px'}}>
+                     <Typography sx={{ padding: 8 }}>Card</Typography>
+                </Card>
+            </Stack>
         )}
     </Story>
 </Canvas>

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

@@ -1,20 +1,15 @@
-import { styled } from "@mui/material/styles"
+import { styled } from '@mui/material/styles';
+import { Card } from '@mui/material';
 
-import { Card } from "@mui/material"
-
-
-export const MuiCard = styled(Card)`
-
-`
-export  const CardContainer = styled(Card)(({ theme }) => ({
+export const CardContainer = styled(Card)(({ theme }) => ({
   borderRadius: theme.shapes.button,
   backgroundColor: theme.palette.background.paper,
-  transition: "all 0.15s ease-in-out",
+  transition: 'all 0.15s ease-in-out',
   outline: `1px solid ${theme.palette.grey[300]}`,
-  "&:hover": {
+  '&:hover': {
     outline: `1px solid var(--current-color, ${theme.palette.primary.main})`,
   },
-  "&:focus, &:active": {
+  '&:focus, &:active': {
     outline: `1px solid var(--current-color, ${theme.palette.secondary.main})`,
   },
-}))
+}));

package/src/Card/Card.test.tsx

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

package/src/Card/Card.tsx

@@ -1,11 +1,8 @@
-import { CardProps } from "./CardProps.types"
-
-import {
-  CardContainer
-} from "./Card.styled"
+import { CardProps } from './Card.types';
+import { CardContainer } from './Card.styled';
 
 export const Card = (props: CardProps) => {
-  return <CardContainer {...props}>{props.children}</CardContainer>
-}
+  return <CardContainer {...props}>{props.children}</CardContainer>;
+};
 
 export default Card;

package/src/Card/Card.types.ts

@@ -0,0 +1,7 @@
+import { CardProps as MuiCardProps } from '@mui/material/Card/Card';
+
+export interface CardProps extends MuiCardProps {
+  children?: any;
+  active?: boolean;
+  raised?: boolean;
+}

package/src/Card/index.ts

@@ -1,2 +1,2 @@
-export * from './CardProps.types';
-export * from './Card';
+export * from './Card.types';
+export * from './Card';

package/src/Checkbox/Checkbox.stories.mdx

@@ -34,7 +34,11 @@ import { Checkbox } from "./Checkbox"
 Default / Checked / Indeterminate - disabled
 
 <Canvas>
-  <Story name="Disabled">
+  <Story name="Disabled" parameters={{ docs: { source: { code: `
+<Checkbox label="Label" value={1} disabled />
+<Checkbox label="Label" value={1} checked disabled />
+<Checkbox label="Label" value={1} indeterminate disabled />
+  `}}}}>
     <Stack direction="row" spacing={2}>
       <Checkbox label="Label" value={1} disabled />
       <Checkbox label="Label" value={1} checked disabled />

package/src/Checkbox/Checkbox.styled.tsx

@@ -0,0 +1,8 @@
+import { FormControlLabel, styled } from '@mui/material';
+
+export const CustomFormControlLabel = styled(FormControlLabel)({
+  marginLeft: 0,
+  '.MuiButtonBase-root': {
+    padding: 0,
+  },
+});

package/src/Checkbox/Checkbox.test.tsx

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

package/src/Checkbox/Checkbox.tsx

@@ -1,34 +1,33 @@
-import { Typography, Checkbox as MuiCheckbox } from "@mui/material"
-
-import { Icon } from "../Icon"
+import { Typography, Checkbox as MuiCheckbox } from '@mui/material';
+import { Icon } from '../Icon';
 import {
   SvgCheckboxChecked,
   SvgCheckboxIndeterminate,
   SvgCheckboxUncontrolled,
-} from "../Icons/common/Forms"
-import { CustomFormControlLabel } from "./Checkbox.styled"
-import { CheckboxProps } from "./Checkbox.types"
+} from '../Icons/common/Forms';
+import { CustomFormControlLabel } from './Checkbox.styled';
+import { CheckboxProps } from './Checkbox.types';
 
 export const Checkbox = (props: CheckboxProps) => {
-  const { label, value, isAuth, ...rest } = props
-  const labelStyles = isAuth ? "subtitle1" : "body1"
+  const { label, value, isAuth, ...rest } = props;
+  const labelStyles = isAuth ? 'subtitle1' : 'body1';
   return (
     <CustomFormControlLabel
       value={value}
       label={<Typography variant={labelStyles}>{label}</Typography>}
       control={
         <MuiCheckbox
-          {...rest}
           value={value}
           disableRipple
           color="default"
           icon={<Icon name={SvgCheckboxUncontrolled} />}
           checkedIcon={<Icon name={SvgCheckboxChecked} />}
           indeterminateIcon={<Icon name={SvgCheckboxIndeterminate} />}
+          {...rest}
         />
       }
     />
-  )
-}
+  );
+};
 
 export default Checkbox;

package/src/Checkbox/Checkbox.types.ts

@@ -0,0 +1,7 @@
+import { CheckboxProps as MuiCheckboxProps } from '@mui/material';
+
+export interface CheckboxProps extends MuiCheckboxProps {
+  label?: string;
+  value?: any;
+  isAuth?: boolean;
+}

package/src/Chip/Chip.stories.mdx

@@ -1,5 +1,5 @@
 import Stack from "@mui/material/Stack"
-import SendIcon from '@mui/icons-material/Send';
+import { CalendarIcon, SearchIcon } from "../Icons/leap";
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'; 
 import Chip from './Chip';
 
@@ -18,7 +18,14 @@ import Chip from './Chip';
 ### Colours
 Contained chip are high-emphasis and are used for primary actions. use the `color` prop.
 <Canvas withToolbar>
-    <Story name="Colours">
+    <Story name="Colours" parameters={{ docs: { source: { code: `
+<Chip color="default" label="Label"/> 
+<Chip color="primary" label="Label"/> 
+<Chip color="success" label="Label"/> 
+<Chip color="warning" label="Label"/> 
+<Chip color="error" label="Label"/> 
+<Chip color="info" label="Label"/> 
+    `}}}}>
       <Stack direction="row" spacing={1}>
         <Chip color="default" label="Label"/> 
         <Chip color="primary" label="Label"/> 
@@ -34,7 +41,14 @@ Contained chip are high-emphasis and are used for primary actions. use the `colo
 ### Rounded
 Contained chip are high-emphasis and are used for primary actions. use the `color` prop.
 <Canvas withToolbar>
-    <Story name="Rounded">
+    <Story name="Rounded" parameters={{ docs: { source: { code: `
+<Chip color="default" rounded label="Label"/> 
+<Chip color="primary" rounded label="Label"/> 
+<Chip color="success" rounded label="Label"/> 
+<Chip color="warning" rounded label="Label"/> 
+<Chip color="error" rounded label="Label"/> 
+<Chip color="info" rounded label="Label"/> 
+    `}}}}>
       <Stack direction="row" spacing={1}>
         <Chip color="default" rounded label="Label"/> 
         <Chip color="primary" rounded label="Label"/> 
@@ -50,7 +64,10 @@ Contained chip are high-emphasis and are used for primary actions. use the `colo
 ### Size
 Contained chip are high-emphasis and are used for primary actions. use the `color` prop.
 <Canvas withToolbar>
-    <Story name="Size">
+    <Story name="Size" parameters={{ docs: { source: { code: `
+<Chip color="default" label="Label"/>
+<Chip color="default" size="medium" label="Label"/> 
+    `}}}}>
       <Stack direction="row" spacing={1}>
         <Chip color="default" label="Label"/>
         <Chip color="default" size="medium" label="Label"/> 
@@ -62,7 +79,10 @@ Contained chip are high-emphasis and are used for primary actions. use the `colo
 ### Outline
 Outline chip. use the `outline` prop.
 <Canvas withToolbar>
-    <Story name="Outline">
+    <Story name="Outline" parameters={{ docs: { source: { code: `
+<Chip color="default" variant="outlined" label="Label"/>
+<Chip color="default" variant="outlined" size="medium" label="Label"/> 
+    `}}}}>
       <Stack direction="row" spacing={1}>
         <Chip color="default" variant="outlined" label="Label"/>
         <Chip color="default" variant="outlined" size="medium" label="Label"/> 
@@ -70,31 +90,42 @@ Outline chip. use the `outline` prop.
     </Story>
 </Canvas>
 
-
 ### Start Icon
-Outline chip. use the `outline` prop.
+use the `icon` prop to add an icon to start.
 <Canvas withToolbar>
-    <Story name="startIcon">
-      <Stack direction="row" spacing={1}>
-        <Chip icon={<FaceIcon />} color="default" variant="outlined" label="Label"/>
-      </Stack>
-    </Story>
+  <Story name="Icon" parameters={{ docs: { source: { code: `
+<Chip icon={<SendIcon />} label="Label"/>
+<Chip icon={<SendIcon />} color="primary" label="Label"/>
+<Chip icon={<SendIcon />} color="secondary" label="Label"/>
+<Chip icon={<SendIcon />} color="info" label="Label"/>
+`}}}}>
+    <Stack direction="row" spacing={1}>
+        <Chip icon={<SearchIcon />} label="Label"/>
+        <Chip icon={<SearchIcon />} color="primary" label="Label"/>
+        <Chip icon={<SearchIcon />} color="secondary" label="Label"/>
+        <Chip icon={<SearchIcon />} color="info" label="Label"/>
+    </Stack>
+  </Story>
 </Canvas>
 
+
 ### End Icon
-Outline chip. use the `outline` prop.
+Custom Delete Icon. Override the default delete icon element. Shown only if onDelete is set.
 <Canvas withToolbar>
     <Story name="endIcon">
-      <Stack direction="row" spacing={1}>
-        <Chip color="default" variant="outlined" label="Label"/>
-      </Stack>
+        <Chip onDelete={() => (console.log('onDelete'))} deleteIcon={<CalendarIcon />} color="default" variant="outlined" label="Label"/>
     </Story>
 </Canvas>
 
  ### Delete
-Using the `onDelete` property, chip can now be used within a text element such as Autocomplete.
+Using the `onDelete` property, chip can now be used within a text element such as Autocomplete. Shown only if onDelete is set.
 <Canvas withToolbar>
-  <Story name="Delete">
+  <Story name="Delete" parameters={{ docs: { source: { code: `
+<Chip onDelete={() => (console.log('onDelete'))} label="Label"/>
+<Chip color="primary" onDelete={() => (console.log('onDelete'))} label="Label"/>
+<Chip color="secondary" onDelete={() => (console.log('onDelete'))} label="Label"/>
+<Chip color="info" onDelete={() => (console.log('onDelete'))} label="Label"/>
+  `}}}}>
     <Stack direction="row" spacing={1}>
         <Chip onDelete={() => (console.log('onDelete'))} label="Label"/>
         <Chip color="primary" onDelete={() => (console.log('onDelete'))} label="Label"/>
@@ -104,18 +135,6 @@ Using the `onDelete` property, chip can now be used within a text element such a
   </Story>
 </Canvas>
 
-### Icon
-use the `icon` prop to add an icon..
-<Canvas withToolbar>
-  <Story name="Icon">
-    <Stack direction="row" spacing={1}>
-        <Chip icon={<SendIcon />} label="Label"/>
-        <Chip icon={<SendIcon />} color="primary" label="Label"/>
-        <Chip icon={<SendIcon />} color="secondary" label="Label"/>
-        <Chip icon={<SendIcon />} color="info" label="Label"/>
-    </Stack>
-  </Story>
-</Canvas>
 
 ## Properties
 <ArgsTable story="Default" />

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

@@ -1,8 +1,8 @@
-import MuiChip from "@mui/material/Chip"
-import { styled } from "@mui/material/styles"
- 
+import MuiChip from '@mui/material/Chip';
+import { styled } from '@mui/material/styles';
+
 export const ChipStyled = styled(MuiChip)(({ theme }) => ({
-  borderRadius: theme.shapes.chip, 
+  borderRadius: theme.shapes.chip,
   height: theme.chip.size.small.height,
   backgroundColor: theme.chip.color.filled.default.background,
   color: theme.chip.color.filled.default.color,
@@ -10,14 +10,13 @@ export const ChipStyled = styled(MuiChip)(({ theme }) => ({
   border: '1px solid transparent',
   position: 'relative',
   overflow: 'hidden',
-  
   '&.chip--rounded': {
     borderRadius: '50px',
-  }, 
- 
+  },
+
   // Mui classes refer to docs: https://mui.com/material-ui/react-chip/
   // Refer to custom theme component tokens
-  "&.MuiChip-filledDefault": {
+  '&.MuiChip-filledDefault': {
     backgroundColor: theme.chip.color.filled.default.background,
     color: theme.chip.color.filled.default.color,
     borderColor: theme.chip.color.filled.default.borderColor,
@@ -29,10 +28,10 @@ export const ChipStyled = styled(MuiChip)(({ theme }) => ({
       borderLeft: `1px solid ${theme.chip.color.filled.default.background}`,
       '&:hover': {
         backgroundColor: theme.chip.color.filled.default.background,
-      }
-    }
+      },
+    },
   },
-  "&.MuiChip-filledPrimary": {
+  '&.MuiChip-filledPrimary': {
     backgroundColor: theme.chip.color.filled.primary.background,
     color: theme.chip.color.filled.primary.color,
     '&.chip--rounded': {
@@ -43,10 +42,10 @@ export const ChipStyled = styled(MuiChip)(({ theme }) => ({
       borderLeft: `1px solid ${theme.chip.color.filled.primary.background}`,
       '&:hover': {
         backgroundColor: theme.chip.color.filled.primary.background,
-      }
-    }
+      },
+    },
   },
-  "&.MuiChip-filledSecondary": {
+  '&.MuiChip-filledSecondary': {
     backgroundColor: theme.chip.color.filled.secondary.background,
     color: theme.chip.color.filled.secondary.color,
     '&.chip--rounded': {
@@ -57,10 +56,10 @@ export const ChipStyled = styled(MuiChip)(({ theme }) => ({
       borderLeft: `1px solid ${theme.chip.color.filled.secondary.background}`,
       '&:hover': {
         backgroundColor: theme.chip.color.filled.secondary.background,
-      }
-    }
+      },
+    },
   },
-  "&.MuiChip-filledInfo": {
+  '&.MuiChip-filledInfo': {
     backgroundColor: theme.chip.color.filled.info.background,
     color: theme.chip.color.filled.info.color,
     '&.chip--rounded': {
@@ -71,10 +70,10 @@ export const ChipStyled = styled(MuiChip)(({ theme }) => ({
       borderLeft: `1px solid ${theme.chip.color.filled.info.background}`,
       '&:hover': {
         backgroundColor: theme.chip.color.filled.info.background,
-      }
-    }
+      },
+    },
   },
-  "&.MuiChip-filledSuccess": {
+  '&.MuiChip-filledSuccess': {
     backgroundColor: theme.chip.color.filled.success.background,
     color: theme.chip.color.filled.success.color,
     '&.chip--rounded': {
@@ -85,10 +84,10 @@ export const ChipStyled = styled(MuiChip)(({ theme }) => ({
       borderLeft: `1px solid ${theme.chip.color.filled.success.background}`,
       '&:hover': {
         backgroundColor: theme.chip.color.filled.success.background,
-      }
-    }
+      },
+    },
   },
-  "&.MuiChip-filledWarning": {
+  '&.MuiChip-filledWarning': {
     backgroundColor: theme.chip.color.filled.warning.background,
     color: theme.chip.color.filled.warning.color,
     '&.chip--rounded': {
@@ -99,10 +98,10 @@ export const ChipStyled = styled(MuiChip)(({ theme }) => ({
       borderLeft: `1px solid ${theme.chip.color.filled.warning.background}`,
       '&:hover': {
         backgroundColor: theme.chip.color.filled.warning.background,
-      }
-    }
+      },
+    },
   },
-  "&.MuiChip-filledError": {
+  '&.MuiChip-filledError': {
     backgroundColor: theme.chip.color.filled.error.background,
     color: theme.chip.color.filled.error.color,
     '&.chip--rounded': {
@@ -113,9 +112,9 @@ export const ChipStyled = styled(MuiChip)(({ theme }) => ({
       borderLeft: `1px solid ${theme.chip.color.filled.error.background}`,
       '&:hover': {
         backgroundColor: theme.chip.color.filled.error.background,
-      }
-    }
-  }, 
+      },
+    },
+  },
 
   // Size
   '& .MuiChip-label': {
@@ -123,17 +122,13 @@ export const ChipStyled = styled(MuiChip)(({ theme }) => ({
     fontWeight: theme.chip.size.small.fontWeight,
     padding: `0 ${theme.chip.paddingLabel}`,
     textTransform: theme.chip.textTransform,
-  
+
     '&.MuiChip-labelMedium': {
       fontSize: theme.chip.size.medium.fontSize,
       padding: `0 ${theme.chip.size.medium.labelPadding}`,
     },
   },
- 
-  //Icon
-  "&.MuiChip-icon": {
 
-  },
   // Delete
   '&.MuiChip-deletable': {
     minHeight: '20px',
@@ -143,7 +138,7 @@ export const ChipStyled = styled(MuiChip)(({ theme }) => ({
       width: '24px',
       height: '24px',
       padding: 0,
-    }
+    },
   },
   '& svg': {
     color: 'currentColor',
@@ -152,5 +147,5 @@ export const ChipStyled = styled(MuiChip)(({ theme }) => ({
     '& svg': {
       color: 'currentColor',
     },
-  }
-}))
+  },
+}));

package/src/Chip/Chip.test.tsx

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

package/src/Chip/Chip.tsx

@@ -1,18 +1,18 @@
-import React from "react";
-import CrossIcon from "../Icons/lawconnect/Cross";
-import { ChipStyled } from "./Chip.styled";
-import { GDSChipProps } from './ChipProps.types';
+import CrossIcon from '../Icons/lawconnect/Cross';
+import { ChipStyled } from './Chip.styled';
+import { GDSChipProps } from './Chip.types';
 
-export const Chip = (props: GDSChipProps) => { 
-  const {rounded, ...rest } = props;
+export const Chip = (props: GDSChipProps) => {
+  const { rounded, deleteIcon, ...rest } = props;
   return (
-    <ChipStyled 
-    size='small'
-    {...rest}
-    deleteIcon={<CrossIcon />}
-    onDelete={props.onDelete}
-    className={rounded ? `chip--rounded` : ''}/>
-  )
-}
+    <ChipStyled
+      size="small"
+      deleteIcon={deleteIcon ? deleteIcon : <CrossIcon />}
+      onDelete={props.onDelete}
+      className={rounded ? `chip--rounded` : ''}
+      {...rest} // style overrides can exist in sx props from rest
+    />
+  );
+};
 
-export default Chip;
+export default Chip;

package/src/Chip/Chip.types.ts

@@ -0,0 +1,7 @@
+import { ChipProps } from '@mui/material';
+
+export interface GDSChipProps extends ChipProps {
+  rounded?: boolean;
+  onClick?: (e: any) => void;
+  onDelete?: (e: any) => void;
+}

package/src/Chip/index.ts

@@ -1,2 +1,2 @@
-export * from './ChipProps.types';
-export * from './Chip';
+export * from './Chip.types';
+export * from './Chip';

package/src/CssBaseline/CssBaseline.tsx

@@ -1,14 +1,12 @@
-import React from "react";
-import MuiCssBaseline from "@mui/material/CssBaseline";
+import React from 'react';
+import MuiCssBaseline from '@mui/material/CssBaseline';
 
-import { CssBaselineProps } from "./CssBaseline.types";
+import { CssBaselineProps } from './CssBaseline.types';
 
-
-export const CssBaseline: React.FC<CssBaselineProps> = (props: CssBaselineProps) => {
-  return (
-    <MuiCssBaseline/>
-  )
-}
+export const CssBaseline: React.FC<CssBaselineProps> = (
+  props: CssBaselineProps
+) => {
+  return <MuiCssBaseline {...props} />;
+};
 
 export default CssBaseline;
-

package/src/CssBaseline/CssBaseline.types.ts

@@ -1,4 +1,3 @@
-import { CssBaselineProps as MuiCssBaselineProps } from "@mui/material/CssBaseline";
+import { CssBaselineProps as MuiCssBaselineProps } from '@mui/material/CssBaseline';
 
-export interface CssBaselineProps extends MuiCssBaselineProps {
-}
+export interface CssBaselineProps extends MuiCssBaselineProps {}