@galaxy-ds/core 2.0.13 → 2.0.14

package/src/Dialog/Dialog.stories.mdx

@@ -1,280 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-import { useState } from 'react';
-
-import { Dialog } from "./Dialog";
-import { Button } from "../Button";
-import { Input } from "../Input";
-
-
-<Meta
-  title="components/Dialog"
-  component={Dialog}
-/>
-
-# Dialog
-Dialogs are overlaid modal component for displaying important messages.
-
-<Canvas withToolbar>
-  <Story name="Desktop Default" args={{
-    variant: 'alert', 
-    title: 'Requested Details for Invoice No. AUT005677', 
-    message: 'Would you like to send an incomplete invoice response to the client?',
-  }}
-    parameters={{ docs: {
-      source: {
-        code: `
-const [open, setOpen] = React.useState(false);
-const handleOpen = () => {
-  setOpen(true);
-};
-const handleClose = () => {
-  setOpen(false);
-};
-return (
-  <>
-    <Button variant="contained" onClick={() => setOpen(true)}>Open Dialog</Button>
-    <Dialog
-      open={open}
-      handleClose={handleClose}
-      variant="alert"
-      title="Requested Details for Invoice No. AUT005677"
-      message="Would you like to send an incomplete invoice response to the client?"> 
-    </Dialog>
-  </>
-)
-        `
-      }
-    }}}
-  >
-    {args => {
-      const [open, setOpen] = useState(false);
-      return (
-        <>
-          <Button variant="contained" onClick={() => setOpen(true)}>Open Dialog</Button>
-          <Dialog {...args} open={open} handleClose={() => setOpen(false)}>
-            <Button variant="contained" color="primary">
-                Save
-            </Button>
-            <Button variant="outlined" color="inherit" onClick={() => setOpen(false)}>
-                Close
-            </Button>
-          </Dialog>
-        </>
-      )
-    }}
-  </Story>
-</Canvas>
-
-### Desktop Info
-<Canvas withToolbar>
-  <Story name="Desktop Info" args={{variant: 'info',
-  title: 'Requested Details for Invoice No. AUT005677', 
-  message: 'Please select at least one document from the correspondence list.',
-  }}
-    parameters={{ 
-      docs: {
-        source: {
-          code: `
-const [open, setOpen] = useState(false);
-return (
-  <>
-    <Button variant="contained" onClick={() => setOpen(true)}>Open Info Dialog</Button>
-    <Dialog 
-      variant="info" 
-      title="Requested Details for Invoice No. AUT005677" 
-      message="Please select at least one document from the correspondence list."
-      open={open} 
-      handleClose={() => setOpen(false)}
-    >
-      <Button variant="contained" color="primary" onClick={() => setOpen(false)}>
-        Ok
-      </Button>
-    </Dialog>
-  </>
-)
-          `
-        }
-      }
-    }}
-  >
-    {args => {
-      const [open, setOpen] = useState(false);
-      return (
-        <>
-          <Button variant="contained" onClick={() => setOpen(true)}>Open Info Dialog</Button>
-          <Dialog {...args} open={open} handleClose={() => setOpen(false)}>
-            <Button variant="contained" color="primary" onClick={() => setOpen(false)}>
-              Ok
-            </Button>
-          </Dialog>
-        </>
-      )
-    }}
-  </Story>
-</Canvas>
-
- ### Web Info
-<Canvas withToolbar>
-  <Story name="Web Info" args={{variant: 'info', platform: 'web',
-  title: 'Info', 
-  message: 'Please select at least one document from the correspondence list.',
-  }}
-  parameters={{
-    docs: {
-      source: {
-        code: `
-const [open, setOpen] = useState(false);
-return (
-  <>
-    <Button variant="contained" onClick={() => setOpen(true)}>Open Info Dialog</Button>
-    <Dialog 
-      variant="info"
-      platform="web"
-      title="Info"
-      message="Please select at least one document from the correspondence list."
-      open={open} 
-      handleClose={() => setOpen(false)}
-    >
-      <Button variant="contained" color="primary" onClick={() => setOpen(false)}>
-        Ok
-      </Button>
-    </Dialog>
-  </>
-) 
-        `
-      }
-    }
-  }}
-  >
-    {args => {
-      const [open, setOpen] = useState(false);
-      return (
-        <>
-          <Button variant="contained" onClick={() => setOpen(true)}>Open Info Dialog</Button>
-          <Dialog {...args} open={open} handleClose={() => setOpen(false)}>
-            <Button variant="contained" color="primary" onClick={() => setOpen(false)}>
-              Ok
-            </Button>
-          </Dialog>
-        </>
-      )
-    }}
-  </Story>
-</Canvas>
-
- ### Web Warning
-<Canvas withToolbar>
-  <Story name="Web Warning" args={{variant: 'alert', platform: 'web',
-  title: 'Warning', 
-  message: 'Please select at least one document from the correspondence list.',
-  }}
-  parameters={{
-    docs: {
-      source: {
-        code: `
-const [open, setOpen] = useState(false);
-return (
-  <>
-    <Button variant="contained" onClick={() => setOpen(true)}>Open Warning Dialog</Button>
-    <Dialog 
-      variant="alert" 
-      platform="web" 
-      title="warning" 
-      message="Please select at least one document from the correspondence list." 
-      open={open} 
-      handleClose={() => setOpen(false)}
-      >
-      <Button variant="contained" color="secondary" onClick={() => setOpen(false)}>
-        Ok
-      </Button>
-    </Dialog>
-  </>
-)
-        `
-      }
-    }
-  }}
-  >
-    {args => {
-      const [open, setOpen] = useState(false);
-      return (
-        <>
-          <Button variant="contained" onClick={() => setOpen(true)}>Open Warning Dialog</Button>
-          <Dialog {...args} open={open} handleClose={() => setOpen(false)}>
-            <Button variant="contained" color="secondary" onClick={() => setOpen(false)}>
-              Ok
-            </Button>
-          </Dialog>
-        </>
-      )
-    }}
-  </Story>
-</Canvas>
-
-
-### Plain Variant
-Use `variant='plain'` to omit the info/warning icon.
-
-From version 1.1.41, `message` now can be a node, for more flexible contents.
-
-<Canvas>
-  <Story name="Plain Variant" args={{
-    title: 'Rename Template', 
-  }}
-  parameters={{
-    docs: {
-      source: {
-        code: `
-const [open, setOpen] = useState(false);
-  return (
-    <>
-      <Button variant="contained" onClick={() => setOpen(true)}>Open Dialog</Button>
-      <Dialog
-        title="Rename Template"
-        variant="plain"
-        open={open}
-        handleClose={() => setOpen(false)}
-        message={<Input fullWidth label='Template Name' />}
-      >
-        <Button variant="contained" color="primary" onClick={() => setOpen(false)}>
-          Save
-        </Button>
-        <Button variant="outlined" color="primary" onClick={() => setOpen(false)}>
-          Cancel
-        </Button>
-      </Dialog>
-    </>
-  )
-        `
-      }
-    }
-  }}
-  >
-    {args => {
-      const [open, setOpen] = useState(false);
-      return (
-        <>
-          <Button variant="contained" onClick={() => setOpen(true)}>Open Dialog</Button>
-          <Dialog
-            {...args}
-            variant="plain"
-            open={open}
-            handleClose={() => setOpen(false)}
-            message={<Input fullWidth label='Template Name' />}
-          >
-            <Button variant="contained" color="primary" onClick={() => setOpen(false)}>
-              Save
-            </Button>
-            <Button variant="outlined" color="primary" onClick={() => setOpen(false)}>
-              Cancel
-            </Button>
-          </Dialog>
-        </>
-      )
-    }}
-  </Story>
-</Canvas>
-
-## Properties
-
-<ArgsTable story="Desktop Default" />

package/src/Dialog/Dialog.test.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { Dialog } from './Dialog';
-
-describe('Dialog', () => {
-  it('should show a dialog with a title', () => {
-    const { getByText, getByRole } = render(
-      <Dialog open title="Dialog title" />
-    );
-    getByRole('dialog');
-    getByText('Dialog title');
-  });
-
-  it('should show message', () => {
-    const { getByText } = render(
-      <Dialog open title="Dialog title" message="Dialog message" />
-    );
-    getByText('Dialog message');
-  });
-
-  it('should display any child items passed to the dialog', () => {
-    const { getByText, getByTestId } = render(
-      <Dialog open title="Dialog title">
-        <span data-testid="test-span">This is a child span</span>
-      </Dialog>
-    );
-    getByTestId('test-span');
-    getByText('This is a child span');
-  });
-});

package/src/Dialog/Dialog.tsx

@@ -1,90 +0,0 @@
-import React from 'react';
-import { Dialog as MuiDialog, DialogActions, useTheme } from '@mui/material';
-import { DialogProps } from './Dialog.type';
-import { Typography } from '../Typography/Typography';
-import { IconButton } from '../IconButton/IconButton';
-import { Icon } from '../Icon';
-import {
-  SvgInfoCircle,
-  SvgAlert,
-  SvgWarning,
-  SvgLeapLogo,
-  SvgClose,
-  SvgInfo,
-} from '../Icons/common/Dialog';
-
-export const Dialog: React.FC<DialogProps> = (props: DialogProps) => {
-  const { variant, platform, title, message, children, ...rest } = props;
-  const theme = useTheme();
-
-  let isWeb = () => platform === 'web';
-  let variantIcon;
-
-  switch (variant) {
-    case 'info':
-      variantIcon =
-        theme.platform.name === 'leap_web' ? <SvgInfoCircle /> : <SvgInfo />;
-      break;
-    case 'alert':
-      variantIcon =
-        theme.platform.name === 'leap_web' ? <SvgWarning /> : <SvgAlert />;
-      break;
-    default:
-      variantIcon =
-        theme.platform.name === 'leap_web' ? <SvgInfoCircle /> : <SvgInfo />;
-  }
-
-  return (
-    <MuiDialog
-      className={`gds-modal ${
-        isWeb() ? 'gds-modal--web' : 'gds-modal--desktop'
-      }`}
-      open={props.open}
-      closeAfterTransition
-      hideBackdrop
-      onClose={props.handleClose}
-      {...rest}
-    >
-      <div className="gds-modal_paper">
-        <div className="gds-modal_header">
-          {isWeb() ? '' : <SvgLeapLogo className="gds-modal_logo" />}
-          {title ? (
-            isWeb() ? (
-              <Typography color="default" upperCase variant="body1">
-                {title}
-              </Typography>
-            ) : (
-              <Typography color="default" variant="body2">
-                {title}
-              </Typography>
-            )
-          ) : (
-            ''
-          )}
-          {isWeb() ? (
-            ''
-          ) : (
-            <IconButton size="small" onClick={props.handleClose}>
-              <Icon name={SvgClose} fontSize="small" />
-            </IconButton>
-          )}
-        </div>
-        <div className="gds-modal_body">
-          {variant !== 'plain' && (
-            <div className="gds-modal_icon">{variantIcon}</div>
-          )}
-          {typeof message === 'string' ? (
-            <Typography color="default" variant="body1">
-              {message}
-            </Typography>
-          ) : (
-            <div style={{ flex: 1 }}>{message}</div>
-          )}
-        </div>
-        <div className="gds-modal_footer">
-          <DialogActions>{children}</DialogActions>
-        </div>
-      </div>
-    </MuiDialog>
-  );
-};

package/src/Dialog/Dialog.type.ts

@@ -1,13 +0,0 @@
-import { DialogProps as MuiDialogProps } from '@mui/material';
-export interface DialogProps extends MuiDialogProps {
-  children?: any;
-  variant?: 'info' | 'alert' | 'plain';
-  /**
-   * Deprecated
-   */
-  platform?: 'desktop' | 'web';
-  title?: string;
-  message?: React.ReactNode;
-  open: boolean;
-  handleClose?: (e: any) => void;
-}

package/src/Dialog/index.ts

@@ -1,2 +0,0 @@
-export * from './Dialog.type';
-export * from './Dialog';

package/src/Divider/Divider.stories.mdx

@@ -1,28 +0,0 @@
-
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-import { Divider } from "./Divider";
-
-<Meta
-  title="components/Divider"
-  component={Divider}
-/>
-
-# Divider
-A divider is a thin line that groups content in lists and layouts. Dividers separate content into clear groups.
-
-
-<Canvas withToolbar>
-  <Story name="Default" args={{}}>
-    {args => <Divider {...args}/>}
-  </Story>
-</Canvas>
-
-<Canvas withToolbar>
-  <Story name="orientation" args={{}}>
-    {args => <Divider orientation='vertical'/>}
-  </Story>
-</Canvas>
-
-## Properties
-
-<ArgsTable story="Default" />

package/src/Divider/Divider.test.tsx

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

package/src/Divider/Divider.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import MuiDivider from '@mui/material/Divider';
-import { DividerProps } from './Divider.types';
-
-export const Divider: React.FC<DividerProps> = (props: DividerProps) => {
-  const { orientation = 'horizontal', ...rest } = props;
-
-  // TODO: These overrides are applicable for material 4. Will need to do regression testing before removing
-  // in the meantime overrides exist through sx and rest props
-
-  let variantProp = {
-    horizontal: 'gds-divider--horizontal',
-    vertical: 'gds-divider--vertical',
-  }[orientation];
-
-  return <MuiDivider className={`gds-divider ${variantProp}`} {...rest} />;
-};
-
-export default Divider;

package/src/Divider/Divider.types.ts

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

package/src/Divider/index.ts

@@ -1,2 +0,0 @@
-export * from './Divider.types';
-export * from './Divider';

package/src/Drawer/Drawer.stories.mdx

@@ -1,38 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-import { Drawer } from "./Drawer";
-import { SvgHome, SvgInvoice, SvgFreeFirstAppointment } from "../Icons/lawconnect";
-import { Icon } from "../Icon";
-import List from "../List/List";
-import { DrawerMenu } from "../DrawerMenu/DrawerMenu";
-
-<Meta
-  title="components/Drawer/Drawer"
-  component={Drawer}
-/>
-
-# Drawer
-Navigation drawers provide access to destinations in your app. Side sheets are surfaces containing supplementary content that are anchored to the left or right edge of the screen.
-
-<Canvas withToolbar>
-  <Story name="Default" parameters={{ docs: { source: { code: `
-<Drawer color='default'>
-  <List> 
-    <DrawerMenu startAdornment={<Icon name={SvgHome}/>}>Home</DrawerMenu>
-    <DrawerMenu startAdornment={<Icon name={SvgFreeFirstAppointment}/>}>Accounts</DrawerMenu>
-    <DrawerMenu startAdornment={<Icon name={SvgInvoice}/>}>Reporting</DrawerMenu> 
-  </List> 
-</Drawer> 
-  `}}}}>
-     <Drawer color='default'>
-      <List> 
-        <DrawerMenu startAdornment={<Icon name={SvgHome}/>}>Home</DrawerMenu>
-        <DrawerMenu startAdornment={<Icon name={SvgFreeFirstAppointment}/>}>Accounts</DrawerMenu>
-        <DrawerMenu startAdornment={<Icon name={SvgInvoice}/>}>Reporting</DrawerMenu> 
-      </List> 
-    </Drawer> 
-  </Story>
-</Canvas>
-
-## Properties
-
-<ArgsTable story="Default" />

package/src/Drawer/Drawer.styled.tsx

@@ -1,14 +0,0 @@
-import { Drawer, styled } from '@mui/material'
-
-export const DrawerContainer = styled(Drawer)(({ theme }) => ({
-    "&.gds-drawer-bg-primary > div": { 
-        backgroundColor: theme.palette.background.paper,
-        color: '#ffffff',
-    },
-    "&.gds-drawer-bg-default > div": { 
-        backgroundColor: theme.palette.background.default,
-    },
-    "& .MuiListSubheader-root": {
-        background: '#eee',
-    },
-}))

package/src/Drawer/Drawer.test.tsx

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

package/src/Drawer/Drawer.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import { CustomDrawerProps, DrawerRef } from './Drawer.types';
-import { DrawerContainer } from './Drawer.styled';
-
-export const Drawer = React.forwardRef<DrawerRef, CustomDrawerProps>(
-  function Drawer(props, ref) {
-    const {
-      variant = 'permanent',
-      color = 'default',
-      children,
-      ...rest
-    } = props;
-    const drawerWidth = 256;
-
-    return (
-      <DrawerContainer
-        variant={variant}
-        PaperProps={{ style: { width: drawerWidth } }}
-        ref={ref}
-        className={`gds-drawer-bg-${color}`}
-        {...rest}
-      >
-        {children}
-      </DrawerContainer>
-    );
-  }
-);

package/src/Drawer/Drawer.types.ts

@@ -1,6 +0,0 @@
-import { DrawerProps } from '@mui/material';
-export interface CustomDrawerProps extends DrawerProps {
-  color?: 'primary' | 'default';
-}
-
-export type DrawerRef = HTMLDivElement;

package/src/Drawer/index.ts

@@ -1,2 +0,0 @@
-export * from './Drawer.types';
-export * from './Drawer';

package/src/DrawerMenu/DrawerMenu.stories.mdx

@@ -1,30 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-import { DrawerMenu } from "./DrawerMenu";
-import { SvgHome } from "../Icons/lawconnect";
-import { Icon } from "../Icon"
-
-<Meta
-  title="components/Drawer/Drawer Menu Item"
-  component={DrawerMenu}
-/>
-
-# Drawer Menu Item
-Drawer Menu ....
-
-<Canvas withToolbar>
-  <Story name="Default" args={{}}>
-    {args => <DrawerMenu {...args} startAdornment={<Icon name={SvgHome}/>}>Menu Item</DrawerMenu>}
-  </Story>
-</Canvas>
-
-### Selected
-
-<Canvas>
-  <Story name="Selected" args={{}}>
-    {args => <DrawerMenu {...args} startAdornment={<Icon name={SvgHome}/>}>Menu Item</DrawerMenu>}
-  </Story>
-</Canvas>
-
-## Properties
-
-<ArgsTable story="Default" />