@galaxy-ds/core 2.0.1 → 2.0.3

package/src/FormHeader/FormHeader.test.tsx

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

package/src/FormHeader/FormHeader.tsx

@@ -1,10 +1,6 @@
 import React from 'react';
 
-import {
-  Divider,
-  Grid,
-  useTheme,
-} from '@mui/material';
+import { Divider, Grid, useTheme } from '@mui/material';
 
 import Button from '../Button/Button';
 import Icon from '../Icon/Icon';
@@ -17,49 +13,78 @@ import {
   FormHeaderDetail,
   FormHeaderInfo,
 } from './FormHeader.styled';
-import { FormHeaderProps } from './FormHeader.types';
-
-export const FormHeader: React.FC<FormHeaderProps> = React.forwardRef((props: FormHeaderProps, ref:any) => {
-  const theme = useTheme();
+import { FormHeaderProps, FormHeaderRef } from './FormHeader.types';
 
-  return (
-    <FormHeaderBox className={props.fixed ? 'gds-header-fixed' : ''}>
-      <FormHeaderAccent>
-        <Icon name={LawconnectLogo} style={{width: 260}} />
-      </FormHeaderAccent>
-      <FormHeaderDetail container>
-        <Grid item xs={5}>
-          {theme.platform.name === 'leap_web' ? (
-          <Typography color="default" variant="body2" sx={{textTransform: 'uppercase'}}>
-            {props.title}
-          </Typography> ) : (
-          <Typography color="primary.light" variant="h2" sx={{textTransform: 'uppercase'}}>
-            {props.title}
-          </Typography> )
-          }
-        </Grid>
-        <Grid item xs={7}>
-          <FormHeaderInfo container alignItems="center" justifyContent="flex-end">
-            {props.from ? (
-              <Typography align="right" variant="body2">
-                {props.from}
+export const FormHeader = React.forwardRef<FormHeaderRef, FormHeaderProps>(
+  function FormHeader(props, ref) {
+    const theme = useTheme();
+    return (
+      <FormHeaderBox
+        ref={ref}
+        className={props.fixed ? 'gds-header-fixed' : ''}
+      >
+        <FormHeaderAccent>
+          <Icon name={LawconnectLogo} style={{ width: 260 }} />
+        </FormHeaderAccent>
+        <FormHeaderDetail container>
+          <Grid item xs={5}>
+            {theme.platform.name === 'leap_web' ? (
+              <Typography
+                color="default"
+                variant="body2"
+                sx={{ textTransform: 'uppercase' }}
+              >
+                {props.title}
               </Typography>
-            ) : null}
-            {props.from && props.onClick ? <Divider orientation="vertical" sx={{height: 16, width: '1px', margin: "2px 5px", backgroundColor:"#d4d4d4"}} /> : null}
-            {props.onClick ? (
-              <Button color="primary" variant="text" onClick={props.onClick} sx={{ textTransform: 'none', border: 0 }}>
-               Change
-              </Button>
-            ) : null}
-          </FormHeaderInfo>
-        </Grid>
-      </FormHeaderDetail>
-      <FormHeaderContent>
-        {props.children}
-      </FormHeaderContent>
-    </FormHeaderBox>
-  )
-})
- 
-export default FormHeader;
+            ) : (
+              <Typography
+                color="primary.light"
+                variant="h2"
+                sx={{ textTransform: 'uppercase' }}
+              >
+                {props.title}
+              </Typography>
+            )}
+          </Grid>
+          <Grid item xs={7}>
+            <FormHeaderInfo
+              container
+              alignItems="center"
+              justifyContent="flex-end"
+            >
+              {props.from ? (
+                <Typography align="right" variant="body2">
+                  {props.from}
+                </Typography>
+              ) : null}
+              {props.from && props.onClick ? (
+                <Divider
+                  orientation="vertical"
+                  sx={{
+                    height: 16,
+                    width: '1px',
+                    margin: '2px 5px',
+                    backgroundColor: '#d4d4d4',
+                  }}
+                />
+              ) : null}
+              {props.onClick ? (
+                <Button
+                  color="primary"
+                  variant="text"
+                  onClick={props.onClick}
+                  sx={{ textTransform: 'none', border: 0 }}
+                >
+                  Change
+                </Button>
+              ) : null}
+            </FormHeaderInfo>
+          </Grid>
+        </FormHeaderDetail>
+        <FormHeaderContent>{props.children}</FormHeaderContent>
+      </FormHeaderBox>
+    );
+  }
+);
 
+export default FormHeader;

package/src/FormHeader/FormHeader.types.ts

@@ -1,9 +1,10 @@
-
 export interface FormHeaderProps {
-    children?: any;
-    title?: string;
-    from?: string;
-    fixed?: boolean;
-    platformWeb?: boolean;
-    onClick?: (e: any) => void;
+  children?: React.ReactNode;
+  title?: string;
+  from?: string;
+  fixed?: boolean;
+  platformWeb?: boolean;
+  onClick?: (e: any) => void;
 }
+
+export type FormHeaderRef = HTMLDivElement;

package/src/Grid/Grid.stories.mdx

@@ -1,7 +1,5 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'; 
 import { Grid } from './Grid';
-import { Box } from '../Box';
-
 
 <Meta title="Layouts/Grid" component={ Grid } />
 
@@ -9,9 +7,24 @@ import { Box } from '../Box';
 The grid creates visual consistency between layouts while allowing flexibility across a wide variety of designs. Grid is based on a 12-column grid layout.
 
 <Canvas withToolbar>
-    <Story name="Default">
-        <Grid />
-    </Story>
+  <Story name="Default">
+    <Box sx={{ flexGrow: 1 }}>
+     <Grid container spacing={2}>
+        <Grid item xs={8}>
+        <div style={{ textAlign: 'center', border: '1px solid #eee'}}>xs=8</div>
+        </Grid>
+        <Grid item xs={4}>
+        <div style={{ textAlign: 'center', border: '1px solid #eee'}}>xs=4</div>
+        </Grid>
+        <Grid item xs={4}>
+        <div style={{ textAlign: 'center', border: '1px solid #eee'}}>xs=4</div>
+        </Grid>
+        <Grid item xs={8}>
+        <div style={{ textAlign: 'center', border: '1px solid #eee'}}>xs=8</div>
+        </Grid>
+     </Grid>
+    </Box>
+  </Story>
 </Canvas>
 
 <ArgsTable story="Default" />

package/src/Grid/Grid.test.tsx

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

package/src/Grid/Grid.tsx

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

package/src/Grid/Grid.types.ts

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

package/src/Grid/index.ts

@@ -1,2 +1,2 @@
-export * from './GridProps.types';
-export * from './Grid';
+export * from './Grid.types';
+export * from './Grid';

package/src/HeaderToolbar/HeaderToolbar.stories.mdx

@@ -22,7 +22,29 @@ Design is different for Desktop and Web themes. In Web theme, title is omitted,
 Change title visibility with `titleVisibility` property.
 
 <Canvas withToolbar>
-  <Story name="Default" args={{ title: 'Templates' }}>
+  <Story name="Default" args={{ title: 'Templates' }} parameters={{ docs: { source: { code: `
+<HeaderToolbar
+  title="Templates"
+  left={
+    <FormGroup row spacing={4}>
+      <Input endAdornment={<Icon name={SvgFormSearch} color="primary" />} />
+      <Dropdown
+        defaultValue={1}
+        startAdornment={<Icon name={SelectFilterIcon} fontSize="small" />}
+      >
+        <MenuItem value={1}>Active Templates</MenuItem>
+      </Dropdown>
+    </FormGroup>
+  }
+  right={
+    <ToolbarButton 
+      icon={<Icon name={SvgNewAppointment} viewBox="0 0 32 32" />} 
+      label="New Template" 
+      title="Create a new invoice template" 
+    />
+  }
+/>
+  `}}}}>
     {(args) => (
       <HeaderToolbar
         {...args}
@@ -50,7 +72,22 @@ Change title visibility with `titleVisibility` property.
 ### Left side only
 
 <Canvas>
-  <Story name="Left only" args={{ title: 'Templates' }}>
+  <Story name="Left only" args={{ title: 'Templates' }} parameters={{ docs: { source: { code: `
+<HeaderToolbar
+  title="Templates"
+  left={
+    <FormGroup row spacing={4}>
+      <Input endAdornment={<Icon name={SvgFormSearch} color="primary" />} />
+      <Dropdown
+        defaultValue={1}
+        startAdornment={<Icon name={SelectFilterIcon} fontSize="small" />}
+      >
+        <MenuItem value={1}>Active Templates</MenuItem>
+      </Dropdown>
+    </FormGroup>
+  }
+/>
+  `}}}}>
     {(args) => (
       <HeaderToolbar
         {...args}
@@ -74,7 +111,23 @@ Change title visibility with `titleVisibility` property.
 From v1.1.47
 
 <Canvas>
-  <Story name="Background Color" args={{ title: 'Templates', bgColor: 'white' }}>
+  <Story name="Background Color" args={{ title: 'Templates', bgColor: 'white' }} parameters={{ docs: { source: { code: `
+<HeaderToolbar
+  title="Templates"
+  bgColor="white"
+  left={
+    <FormGroup row spacing={4}>
+      <Input endAdornment={<Icon name={SvgFormSearch} color="primary" />} />
+      <Dropdown
+        defaultValue={1}
+        startAdornment={<Icon name={SelectFilterIcon} fontSize="small" />}
+      >
+        <MenuItem value={1}>Active Templates</MenuItem>
+      </Dropdown>
+    </FormGroup>
+  }
+/>
+  `}}}}>
     {(args) => (
       <HeaderToolbar
         {...args}
@@ -102,7 +155,33 @@ Specify a background image with `bgImageURL`. Accept any web image formats: JPG,
 Change background horizontal position with `bgPosition`. Vertical position is set to 'center'.
 
 <Canvas>
-  <Story name="Background Image" args={{ title: 'Templates', bgColor: '#f9f9f9', bgImageURL: '/images/lc-header-toolbar-bg.png', bgPosition: 'right' }}>
+  <Story name="Background Image" 
+    args={{ 
+      title: 'Templates', 
+      bgColor: '#f9f9f9', 
+      bgImageURL: '/images/lc-header-toolbar-bg.png', 
+      bgPosition: 'right' 
+    }}
+    parameters={{ docs: { source: { code: `
+<HeaderToolbar
+  title="Templates"
+  bgColor="#f9f9f9"
+  bgImageURL="/images/lc-header-toolbar-bg.png"
+  bgPosition="right" 
+  left={
+    <FormGroup row spacing={4}>
+      <Input endAdornment={<Icon name={SvgFormSearch} color="primary" />} />
+      <Dropdown
+        defaultValue={1}
+        startAdornment={<Icon name={SelectFilterIcon} fontSize="small" />}
+      >
+        <MenuItem value={1}>Active Templates</MenuItem>
+      </Dropdown>
+    </FormGroup>
+  }
+/>
+    `}}}}
+  >
     {(args) => (
       <HeaderToolbar
         {...args}
@@ -129,7 +208,54 @@ From v1.1.47
 Change background size with `bgSize`.
 
 <Canvas>
-  <Story name="Background Size" args={{ title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum urna condimentum lacus accumsan rutrum', bgColor: '#f9f9f9', bgImageURL: '/images/lc-logo-mono.svg', bgPosition: 'right 32px', bgSize: '260px' }}>
+  <Story name="Background Size" 
+    args={{ 
+      title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum urna condimentum lacus accumsan rutrum', 
+      bgColor: '#f9f9f9', 
+      bgImageURL: '/images/lc-logo-mono.svg', 
+      bgPosition: 'right 32px', 
+      bgSize: '260px' 
+    }}
+    parameters={{ 
+      docs: { 
+        source: {
+          code: `
+<HeaderToolbar
+  title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+    Phasellus condimentum urna condimentum lacus accumsan rutrum"
+  bgColor="#f9f9f9"
+  bgImageURL="/images/lc-logo-mono.svg"
+  bgPosition="right 32px"
+  bgSize="260px" 
+  left={
+    <FormGroup row spacing={4}>
+      <Input endAdornment={<Icon name={SvgFormSearch} color="primary" />} />
+      <Dropdown
+        defaultValue={1}
+        startAdornment={<Icon name={SelectFilterIcon} fontSize="small" />}
+      >
+        <MenuItem value={1}>Active Templates</MenuItem>
+      </Dropdown>
+    </FormGroup>
+  }
+  right={
+    <>
+      <ToolbarButton 
+        icon={<Icon name={SvgNewAppointment} viewBox="0 0 32 32" />} 
+        label="New Template" title="Create a new invoice template" 
+      />
+      <ToolbarButton 
+        icon={<Icon name={SvgNewAppointment} viewBox="0 0 32 32" />} 
+        label="New Template" 
+        title="Create a new invoice template" 
+      />
+    </>
+  }
+/>
+          `
+        }
+    }}}
+  >
     {(args) => (
       <HeaderToolbar
         {...args}
@@ -162,7 +288,58 @@ From v1.1.56
 Add tooltip with `tooltip`.
 
 <Canvas>
-  <Story name="Tooltip" args={{ title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum urna condimentum lacus accumsan rutrum', bgColor: '#f9f9f9', bgImageURL: '/images/lc-logo-mono.svg', bgPosition: 'right 32px', bgSize: '260px' }}>
+  <Story 
+    name="Tooltip" 
+    args={{ 
+      title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum urna condimentum lacus accumsan rutrum', 
+      bgColor: '#f9f9f9', 
+      bgImageURL: '/images/lc-logo-mono.svg', 
+      bgPosition: 'right 32px', 
+      bgSize: '260px' 
+    }}
+    parameters={{ 
+      docs: {
+        source: {
+          code: `
+<HeaderToolbar
+  tooltip
+  title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+  Phasellus condimentum urna condimentum lacus accumsan rutrum" 
+  bgColor="#f9f9f9" 
+  bgImageURL="/images/lc-logo-mono.svg"
+  bgPosition="right 32px"
+  bgSize="260px" 
+  left={
+    <FormGroup row spacing={4}>
+      <Input endAdornment={<Icon name={SvgFormSearch} color="primary" />} />
+      <Dropdown
+        defaultValue={1}
+        startAdornment={<Icon name={SelectFilterIcon} fontSize="small" />}
+      >
+        <MenuItem value={1}>Active Templates</MenuItem>
+      </Dropdown>
+    </FormGroup>
+  }
+  right={
+    <>
+      <ToolbarButton 
+        icon={<Icon name={SvgNewAppointment} viewBox="0 0 32 32" />} 
+        label="New Template" 
+        title="Create a new invoice template" 
+      />
+      <ToolbarButton 
+        icon={<Icon name={SvgNewAppointment} viewBox="0 0 32 32" />} 
+        label="New Template" 
+        title="Create a new invoice template" 
+      />
+    </>
+  }
+/>
+          `
+        }
+      }
+    }}
+  >
     {(args) => (
       <HeaderToolbar
         tooltip

package/src/HeaderToolbar/HeaderToolbar.styled.tsx

@@ -1,17 +1,20 @@
 import { styled } from '@mui/material/styles';
 import Toolbar from '@mui/material/Toolbar';
 
-export const StyledToolbar = styled(Toolbar)<{
-  bgimageurl?: string;
-  bgsize?: string;
-  bgposition?: string;
-  bgcolor?: string;
-}>(({ theme, bgimageurl, bgsize, bgposition, bgcolor }) => ({
-  background: `url(${bgimageurl}) no-repeat`,
-  backgroundSize: bgsize,
-  backgroundPosition: `${bgposition} center`,
-  backgroundColor: bgcolor
-    ? `${bgcolor}`
+export const StyledToolbar = styled(Toolbar, {
+  shouldForwardProp: (prop) =>
+    !['bgImageURL', 'bgSize', 'bgPosition', 'bgColor'].includes(prop as string),
+})<{
+  bgImageURL?: string;
+  bgSize?: string;
+  bgPosition?: string;
+  bgColor?: string;
+}>(({ theme, bgImageURL, bgSize, bgPosition, bgColor }) => ({
+  background: `url(${bgImageURL}) no-repeat`,
+  backgroundSize: bgSize,
+  backgroundPosition: `${bgPosition} center`,
+  backgroundColor: bgColor
+    ? `${bgColor}`
     : theme.platform.name === 'leap_desktop'
     ? theme.palette.grey[200]
     : theme.palette.grey[100],

package/src/HeaderToolbar/HeaderToolbar.test.tsx

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

package/src/HeaderToolbar/HeaderToolbar.tsx

@@ -8,11 +8,10 @@ import {
   ToolbarContainer,
   ToolbarWrap,
 } from './HeaderToolbar.styled';
-import { HeaderToolbarProps } from './HeaderToolbarProps.types';
+import { HeaderToolbarProps } from './HeaderToolbar.types';
 
 export const HeaderToolbar: React.FC<HeaderToolbarProps> = ({
   title,
-  titleVisibility,
   left,
   right,
   bgColor,
@@ -21,35 +20,46 @@ export const HeaderToolbar: React.FC<HeaderToolbarProps> = ({
   bgSize,
   divider,
   tooltip,
-  ...props
+  ...rest
 }: HeaderToolbarProps) => {
   return (
     <StyledToolbar
-      bgcolor={bgColor}
-      bgimageurl={bgImageURL}
-      bgsize={bgSize}
-      bgposition={bgPosition}
+      bgColor={bgColor}
+      bgImageURL={bgImageURL}
+      bgSize={bgSize}
+      bgPosition={bgPosition}
+      {...rest}
     >
       <ToolbarWrap>
         <ToolbarContainer>
           {title &&
             (tooltip ? (
               <Tooltip title={title} placement="bottom-start">
-                <Typography gutterBottom variant="h4" noWrap upperCase color="primary">
+                <Typography
+                  gutterBottom
+                  variant="h4"
+                  noWrap
+                  upperCase
+                  color="primary"
+                >
                   {title}
                 </Typography>
               </Tooltip>
             ) : (
-              <Typography gutterBottom variant="h4" noWrap upperCase color="primary">
+              <Typography
+                gutterBottom
+                variant="h4"
+                noWrap
+                upperCase
+                color="primary"
+              >
                 {title}
               </Typography>
             ))}
           {left}
         </ToolbarContainer>
         {right && (
-          <ContainerDivider divider={divider}>
-            {right}
-          </ContainerDivider>
+          <ContainerDivider divider={divider}>{right}</ContainerDivider>
         )}
       </ToolbarWrap>
     </StyledToolbar>

package/src/HeaderToolbar/HeaderToolbar.types.ts

@@ -0,0 +1,13 @@
+import { ToolbarProps } from '@mui/material';
+
+export interface HeaderToolbarProps extends ToolbarProps {
+  title?: string;
+  left?: React.ReactNode;
+  right?: React.ReactNode;
+  bgColor?: string;
+  bgImageURL?: string;
+  bgPosition?: string;
+  bgSize?: string;
+  divider?: boolean;
+  tooltip?: boolean;
+}

package/src/HeaderToolbar/index.ts

@@ -1,2 +1,2 @@
-export * from './HeaderToolbarProps.types';
-export * from './HeaderToolbar';
+export * from './HeaderToolbar.types';
+export * from './HeaderToolbar';

package/src/Icon/Icon.stories.mdx

@@ -9,7 +9,15 @@ import { Icon } from "./Icon"
 # Icon
 
 <Canvas withToolbar>
-  <Story name="Default" args={{}}>
+  <Story name="Default" args={{}} parameters={{
+      docs: {
+        source: {
+          code: `
+           <Icon color="primary" name={AddIcon} />
+          `
+        }
+      }
+  }}>
     {(args) => <Icon color="primary" name={AddIcon} {...args} />}
   </Story>
 </Canvas>
@@ -20,7 +28,21 @@ import { Icon } from "./Icon"
 Using the `color` property with value`default`, `primary`, `info`, `success`, `error`, `disabled`.
 
 <Canvas withToolbar>
-  <Story name="Color">
+  <Story name="Color" parameters={{
+    docs: {
+      source: {
+        code: `
+<Icon name={AddIcon} />
+<Icon color="primary" name={AddIcon} />
+<Icon color="secondary" name={AddIcon} />
+<Icon color="info" name={AddIcon} />
+<Icon color="success" name={AddIcon} />
+<Icon color="error" name={AddIcon} />
+<Icon color="disabled" name={AddIcon} />
+        `
+      }
+    }
+  }}>
     <Stack direction="row" spacing={2}>
       <Icon name={AddIcon} />
       <Icon color="primary" name={AddIcon} />
@@ -38,7 +60,17 @@ Using the `color` property with value`default`, `primary`, `info`, `success`, `e
 Using the `fontSize` property with value `small`, `default`, `large`.
 
 <Canvas withToolbar>
-  <Story name="Size">
+  <Story name="Size" parameters={{
+    docs: {
+      source: {
+        code: `
+<Icon fontSize="small" name={AddIcon} />
+<Icon name={AddIcon} />
+<Icon fontSize="large" name={AddIcon} />
+        `
+      }
+    }
+  }}>
     <Stack direction="row" spacing={2}>
       <Icon fontSize="small" name={AddIcon} />
       <Icon name={AddIcon} />