@galaxy-ds/core 2.0.12 → 2.0.14

package/src/MenuItem/MenuItem.stories.mdx

@@ -1,154 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs"
-
-import { Icon } from "../Icon"
-import { SvgTick } from "../Icons/lawconnect/"
-
-import { Typography } from "../Typography"
-
-import { MenuItem } from "./MenuItem"
-
-<Meta title="components/Menus/Menu Item" component={MenuItem} />
-
-# MenuItem
-
-<Canvas withToolbar>
-  <Story name="Default" args={{}}>
-    {(args) => <MenuItem {...args}>Menu Item 1</MenuItem>}
-  </Story>
-</Canvas>
-
-### Selected
-
-<Canvas>
-  <Story name="Selected" args={{}} parameters={{ docs: { source: { code: `
-<MenuItem selected startIcon={<Icon name={SvgTick} />}>
-  <Typography variant="body1">Menu Item 2</Typography>
-</MenuItem>
-  `}}}}>
-    {(args) => (
-      <MenuItem {...args} selected startIcon={<Icon name={SvgTick} />}>
-        <Typography variant="body1">Menu Item 2</Typography>
-      </MenuItem>
-    )}
-  </Story>
-</Canvas>
-
-### Disabled
-
-<Canvas>
-  <Story name="Disabled" args={{}} parameters={{ docs: { source: { code: `
-<MenuItem disabled startIcon={<Icon name={SvgTick} />}>
-  Menu Item Disabled
-</MenuItem>
-  `}}}}>
-    {(args) => (
-      <MenuItem {...args} disabled startIcon={<Icon name={SvgTick} />}>
-        Menu Item Disabled
-      </MenuItem>
-    )}
-  </Story>
-</Canvas>
-
-### Start Icon
-
-<Canvas>
-  <Story name="Start Icon" args={{}} parameters={{ docs: { source: { code: `
-<MenuItem startIcon={<Icon name={SvgTick} />}>
-  <Typography variant="body1">Menu Item Icon</Typography>
-</MenuItem>
-  `}}}}>
-    {(args) => (
-      <div>
-        <MenuItem {...args} startIcon={<Icon name={SvgTick} />}>
-          <Typography variant="body1">Menu Item Icon</Typography>
-        </MenuItem>
-      </div>
-    )}
-  </Story>
-</Canvas>
-
-### System
-
-<Canvas>
-  <Story name="System" args={{ system: true }} parameters={{ docs: { source: { code: `
-<MenuItem startIcon={<Icon name={SvgTick} />} system>
-  <Typography variant="body1" textInput>
-    Menu Item
-  </Typography>
-  <TextField placeholder="Text Area Value" />
-</MenuItem>
-  `}}}}>
-    {(args) => (
-      <MenuItem {...args} startIcon={<Icon name={SvgTick} />}>
-        <Typography variant="body1" textInput>
-          Menu Item
-        </Typography>
-        <TextField placeholder="Text Area Value" />
-      </MenuItem>
-    )}
-  </Story>
-</Canvas>
-
-### System Selected
-
-<Canvas>
-  <Story name="System Selected" args={{ system: true, selected: true }} parameters={{ docs: { source: { code: `
-<MenuItem system selected startIcon={<Icon name={SvgTick} />}>
-  Menu Item 1
-</MenuItem>
-  `}}}}>
-    {(args) => (
-      <MenuItem {...args} startIcon={<Icon name={SvgTick} />}>
-        Menu Item 1
-      </MenuItem>
-    )}
-  </Story>
-</Canvas>
-
-### System Disabled
-
-<Canvas>
-  <Story name="System Disabled" args={{ system: true, disabled: true }} parameters={{ docs: { source: { code: `
-<MenuItem system disabled stacked={false}>
-  <Typography variant="body1" textInput>
-    Menu Item Disabled
-  </Typography>
-  <TextField placeholder="Text Area Value" />
-</MenuItem>
-  `}}}}>
-    {(args) => (
-      <MenuItem {...args} stacked={false}>
-        <Typography variant="body1" textInput>
-          Menu Item Disabled
-        </Typography>
-        <TextField placeholder="Text Area Value" />
-      </MenuItem>
-    )}
-  </Story>
-</Canvas>
-
-### System Border
-
-<Canvas>
-  <Story name="System Border" args={{ border: true, system: true }} parameters={{ docs: { source: { code: `
-<MenuItem border system stacked={false}>
-  <Typography variant="body1" textInput>
-    Menu Item
-  </Typography>
-  <TextField placeholder="Text Area Value" />
-</MenuItem>
-  `}}}}>
-    {(args) => (
-      <MenuItem {...args} stacked={false}>
-        <Typography variant="body1" textInput>
-          Menu Item
-        </Typography>
-        <TextField placeholder="Text Area Value" />
-      </MenuItem>
-    )}
-  </Story>
-</Canvas>
-
-## Properties
-
-<ArgsTable story="Default" />

package/src/MenuItem/MenuItem.test.tsx

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

package/src/MenuItem/MenuItem.tsx

@@ -1,33 +0,0 @@
-import { Divider, MenuItem as MuiMenuItem } from '@mui/material';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-
-import { MenuItemProps } from './MenuItem.types';
-
-export const MenuItem = (props: MenuItemProps) => {
-  const { startIcon, endIcon, stacked, children, system, border, ...rest } =
-    props;
-  return (
-    <div>
-      <MuiMenuItem
-        className={`${startIcon || system ? 'gds-menu-item-icon' : ''} ${
-          system ? 'gds-menu-item-system' : ''
-        }`}
-        {...rest}
-      >
-        {startIcon ? <ListItemIcon>{startIcon}</ListItemIcon> : null}
-        <ListItemText
-          className={
-            stacked ? 'MuiListItemText-stacked' : 'MuiListItemText-inline'
-          }
-        >
-          {children}
-        </ListItemText>
-        {endIcon ? <ListItemIcon>{endIcon}</ListItemIcon> : null}
-      </MuiMenuItem>
-      {border && <Divider />}
-    </div>
-  );
-};
-
-export default MenuItem;

package/src/MenuItem/MenuItem.types.ts

@@ -1,11 +0,0 @@
-import { MenuItemProps as MuiMenuItemProps } from "@mui/material/MenuItem/MenuItem"
-
-export interface MenuItemProps extends MuiMenuItemProps {
-  startIcon?: any
-  endIcon?: any
-  children?: any
-  value?: any
-  system?: boolean
-  border?: boolean
-  stacked?: true
-}

package/src/MenuItem/index.ts

@@ -1,2 +0,0 @@
-export * from "./MenuItem"
-export * from "./MenuItem.types"

package/src/Modal/Modal.stories.mdx

@@ -1,108 +0,0 @@
-import { useState } from 'react';
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-import { Modal } from './Modal';
-import { ModalActions } from '../ModalActions';
-import { ModalContent } from '../ModalContent';
-import { ModalTitle } from '../ModalTitle';
-import { Button } from '../Button';
-import { Box } from '../Box';
-
-<Meta title="components/Modal/Modal" component={Modal} />
-
-# Modal
-
-Modal contains `ModalTitle` as header, can be used with or without a `ModalContent` as body, and `ModalActions` as footer.
-
-<Canvas withToolbar>
-  <Story name="Default" args={{}}>
-    {(args) => {
-      const [open, setOpen] = useState(false);
-      return (
-        <>
-          <Button variant="contained" color="inherit" onClick={()=> setOpen(true)}>Open Modal</Button>
-          <Modal {...args} open={open}>
-            <ModalTitle showLeapLogo>Modal Title</ModalTitle>
-            <ModalContent>
-              <Box display='flex' alignItems='center' justifyContent='center' bgcolor='white' style={{ minWidth: 500, minHeight: 300 }}>Modal Content</Box>
-            </ModalContent>
-            <ModalActions>
-              <Button color="primary" variant="contained">
-                Save
-              </Button>
-              <Button color="inherit" variant="outlined" onClick={() => setOpen(false)}>
-                Cancel
-              </Button>
-            </ModalActions>
-          </Modal>
-        </>
-      )}
-    }
-  </Story>
-</Canvas>
-
-### Content Dividers
-
-Use `<ModalContent dividers>` to get the bottom divider.
-
-<Canvas>
-  <Story name="Content Dividers" args={{ open: true }}>
-    {(args) => {
-      const [open, setOpen] = useState(false);
-      return (
-        <>
-          <Button variant="contained" color="inherit" onClick={()=> setOpen(true)}>Open Modal</Button>
-          <Modal {...args} open={open}>
-            <ModalTitle>Modal Title</ModalTitle>
-            <ModalContent dividers>
-              <Box display='flex' alignItems='center' justifyContent='center' bgcolor='white' style={{ minWidth: 500, minHeight: 300 }}>Modal Content</Box>
-            </ModalContent>
-            <ModalActions>
-              <Button color="primary" variant="contained">
-                Save
-              </Button>
-              <Button color="inherit" variant="outlined" onClick={() => setOpen(false)}>
-                Cancel
-              </Button>
-            </ModalActions>
-          </Modal>
-        </>
-      )}
-    }
-  </Story>
-</Canvas>
-
-
-### Content Paddings
-
-By default `ModalContent` has paddings. To remove paddings set `disablePaddings` to `true`.
-
-<Canvas>
-  <Story name="Content Paddings" args={{ open: true }}>
-    {(args) => {
-      const [open, setOpen] = useState(false);
-      return (
-        <>
-          <Button variant="contained" color="inherit" onClick={()=> setOpen(true)}>Open Modal</Button>
-          <Modal {...args} open={open}>
-            <ModalTitle>Modal Title</ModalTitle>
-            <ModalContent disablePaddings>
-              <Box display='flex' alignItems='center' justifyContent='center' bgcolor='#e6edf1' style={{ minWidth: 500, minHeight: 300 }}>Modal Content</Box>
-            </ModalContent>
-            <ModalActions>
-              <Button color="primary" variant="contained">
-                Save
-              </Button>
-              <Button color="inherit" variant="outlined" onClick={() => setOpen(false)}>
-                Cancel
-              </Button>
-            </ModalActions>
-          </Modal>
-        </>
-      )}
-    }
-  </Story>
-</Canvas>
-
-## Properties
-
-<ArgsTable story="Default" />

package/src/Modal/Modal.test.tsx

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

package/src/Modal/Modal.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import { Dialog } from '@mui/material';
-import { ModalProps } from './Modal.types';
-
-export const Modal: React.FC<ModalProps> = ({
-  closeAfterTransition = true,
-  hideBackdrop = true,
-  open = false,
-  ...props
-}: ModalProps) => {
-  return (
-    <Dialog
-      closeAfterTransition={closeAfterTransition}
-      hideBackdrop={hideBackdrop}
-      open={open}
-      {...props}
-    >
-      {props.children}
-    </Dialog>
-  );
-};
-
-export default Modal;

package/src/Modal/Modal.types.ts

@@ -1,22 +0,0 @@
-import { DialogProps } from '@mui/material';
-
-type disabledProps =
-  | 'aria-describedby'
-  | 'aria-labelledby'
-  | 'disableBackdropClick'
-  | 'onBackdropClick'
-  | 'onEnter'
-  | 'onEntered'
-  | 'onEntering'
-  | 'onEscapeKeyDown'
-  | 'onExit'
-  | 'onExited'
-  | 'onExiting'
-  | 'onRendered'
-  | 'PaperComponent'
-  | 'PaperProps'
-  | 'TransitionComponent'
-  | 'transitionDuration'
-  | 'TransitionProps';
-
-export interface ModalProps extends Partial<Omit<DialogProps, disabledProps>> {}

package/src/Modal/index.ts

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

package/src/ModalActions/ModalActions.stories.mdx

@@ -1,26 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'; 
-import { ModalActions } from './ModalActions';
-import { Button } from '../Button';
-
-<Meta title="components/Modal/ModalActions" component={ ModalActions } />
-
-# ModalActions
-
-<Canvas withToolbar>
-    <Story name="Default" args={{}}>
-      {args => (
-        <ModalActions {...args}>
-          <Button color="primary" variant="contained">
-            Save
-          </Button>
-          <Button color="inherit" variant="outlined">
-            Cancel
-          </Button>
-        </ModalActions>
-      )}
-    </Story>
-</Canvas>
-
-## Properties
-
-<ArgsTable story="Default" />

package/src/ModalActions/ModalActions.test.tsx

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

package/src/ModalActions/ModalActions.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import { DialogActions } from '@mui/material';
-import { ModalActionsProps } from './ModalActions.types';
-
-export const ModalActions: React.FC<ModalActionsProps> = (
-  props: ModalActionsProps
-) => {
-  return <DialogActions {...props}>{props.children}</DialogActions>;
-};
-
-export default ModalActions;

package/src/ModalActions/ModalActions.types.ts

@@ -1,2 +0,0 @@
-import { DialogActionsProps } from "@mui/material";
-export interface ModalActionsProps extends DialogActionsProps {}

package/src/ModalActions/index.ts

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

package/src/ModalContent/ModalContent.stories.mdx

@@ -1,36 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'; 
-import { ModalContent } from './ModalContent';
-
-<Meta title="components/Modal/ModalContent" component={ ModalContent } />
-
-# ModalContent
-
-ModalContent can disable/enable top & bottom dividers and paddings with props `dividers` and `disablePaddings`. Desktop theme ModalContent only has bottom divider.
-
-<Canvas withToolbar>
-    <Story name="Default" args={{dividers: true}}>
-      {args => (
-        <ModalContent {...args}>
-          ModalContent
-        </ModalContent>
-      )}
-    </Story>
-</Canvas>
-
-### Content Paddings
-
-By default `ModalContent` has paddings. To remove paddings set `disablePaddings` to `true`.
-
-<Canvas>
-    <Story name="Disable Paddings" args={{dividers: true, disablePaddings: true}}>
-      {args => (
-        <ModalContent {...args}>
-          ModalContent
-        </ModalContent>
-      )}
-    </Story>
-</Canvas>
-
-## Properties
-
-<ArgsTable story="Default" />

package/src/ModalContent/ModalContent.test.tsx

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

package/src/ModalContent/ModalContent.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import { DialogContent } from '@mui/material';
-import { ModalContentProps } from './ModalContent.types';
-
-export const ModalContent: React.FC<ModalContentProps> = ({
-  disablePaddings,
-  ...props
-}: ModalContentProps) => {
-  return (
-    <DialogContent
-      className={disablePaddings ? 'gds-disablePaddings' : ''}
-      {...props}
-    >
-      {props.children}
-    </DialogContent>
-  );
-};
-
-export default ModalContent;

package/src/ModalContent/ModalContent.types.ts

@@ -1,8 +0,0 @@
-import { DialogContentProps } from "@mui/material";
-
-export interface ModalContentProps extends DialogContentProps {
-  /**
-   * Remove paddings around content
-   */
-  disablePaddings?: boolean;
-}

package/src/ModalContent/index.ts

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

package/src/ModalTitle/ModalTitle.stories.mdx

@@ -1,23 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'; 
-import { ModalTitle } from './ModalTitle';
-
-<Meta title="components/Modal/ModalTitle" component={ ModalTitle } />
-
-# ModalTitle
-
-ModalTitle has a LEAP logo prepended for Desktop theme, can set its visibility with `showLeapLogo` props. The logo is omitted in Web theme.
-
-<Canvas withToolbar>
-    <Story name="Default" args={{}}>
-      {args => (
-        <ModalTitle showLeapLogo {...args}>
-          Modal Title
-        </ModalTitle>
-      )}
-    </Story>
-</Canvas>
-
-## Properties
-
-<ArgsTable story="Default" />
- 

package/src/ModalTitle/ModalTitle.test.tsx

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

package/src/ModalTitle/ModalTitle.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import { DialogTitle } from '@mui/material';
-import LeapLogoIcon from '../Icons/common/Dialog/desktop/LeapLogo';
-import { ModalTitleProps } from './ModalTitle.types';
-
-export const ModalTitle: React.FC<ModalTitleProps> = (
-  props: ModalTitleProps
-) => {
-  const { showLeapLogo, ...rest } = props;
-
-  return (
-    <DialogTitle {...rest}>
-      {showLeapLogo && <LeapLogoIcon className="gds-modal_logo" />}
-      {props.children}
-    </DialogTitle>
-  );
-};
-
-export default ModalTitle;

package/src/ModalTitle/ModalTitle.types.ts

@@ -1,5 +0,0 @@
-import { DialogTitleProps } from "@mui/material";
-
-export interface ModalTitleProps extends DialogTitleProps {
-  showLeapLogo?: boolean;
-}

package/src/ModalTitle/index.ts

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

package/src/Pagination/Pagination.stories.mdx

@@ -1,17 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs"
-
-import { Pagination } from "./Pagination"
-
-<Meta title="components/Pagination" component={Pagination} />
-
-# Pagination
-
-Pass an `integer` to `count` variable for the number of pages.
-
-<Canvas withToolbar>
-  <Story name="Numbered" args={{ count: 8, defaultPage: 1 }}>
-    {(args) => <Pagination {...args} />}
-  </Story>
-</Canvas>
-
-<ArgsTable story="Numbered" />

package/src/Pagination/Pagination.test.tsx

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

package/src/Pagination/Pagination.tsx

@@ -1,21 +0,0 @@
-import {
-  Pagination as MuiPagination,
-  PaginationItem as MuiPaginationItem,
-} from '@mui/material';
-
-import { PaginationProps } from './Pagination.types';
-
-export const Pagination = (props: PaginationProps) => {
-  const { ...rest } = props;
-  return (
-    <MuiPagination
-      renderItem={(item) => <MuiPaginationItem {...item} />}
-      shape="rounded"
-      hideNextButton
-      hidePrevButton
-      {...rest}
-    />
-  );
-};
-
-export default Pagination;

package/src/Pagination/Pagination.types.ts

@@ -1,3 +0,0 @@
-import { PaginationProps as MuiPaginationProps } from "@mui/material/Pagination"
-
-export interface PaginationProps extends MuiPaginationProps {}

package/src/Pagination/index.ts

@@ -1,2 +0,0 @@
-export * from "./Pagination"
-export * from "./Pagination.types"