@galaxy-ds/core 2.0.2 → 2.0.3

package/src/MenuHeader/MenuHeader.stories.mdx

@@ -12,8 +12,4 @@ import { MenuHeader } from './MenuHeader';
 </Canvas>
 
 <ArgsTable story="Default" />
- 
-
-## Stories
-### Title
-### Title
+ 

package/src/MenuHeader/MenuHeader.test.tsx

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

package/src/MenuHeader/MenuHeader.tsx

@@ -1,19 +1,16 @@
-import React from "react";
-
-import { Divider, ListSubheader as MuiListSubheader } from "@mui/material";
-
-import { MenuHeaderContainer } from "./MenuHeader.styled";
-import { MenuHeaderProps } from './MenuHeaderProps.types';
+import { Divider, ListSubheader as MuiListSubheader } from '@mui/material';
+import { MenuHeaderContainer } from './MenuHeader.styled';
+import { MenuHeaderProps } from './MenuHeader.types';
 
 export const MenuHeader = (props: MenuHeaderProps) => {
-  const { children, ...rest } = props
+  const { children } = props;
 
   return (
     <MenuHeaderContainer>
-      <MuiListSubheader {...rest}>{children}</MuiListSubheader>
+      <MuiListSubheader>{children}</MuiListSubheader>
       <Divider />
     </MenuHeaderContainer>
-  )
-}
+  );
+};
 
-export default MenuHeader
+export default MenuHeader;

package/src/MenuHeader/{MenuHeaderProps.types.tsx → MenuHeader.types.ts}

@@ -1,3 +1,3 @@
 export interface MenuHeaderProps {
-  children?: any
-}
+  children?: React.ReactNode;
+}

package/src/MenuHeader/index.ts

@@ -1,2 +1,2 @@
-export * from './MenuHeaderProps.types';
-export * from './MenuHeader';
+export * from './MenuHeader.types';
+export * from './MenuHeader';

package/src/MenuItem/MenuItem.stories.mdx

@@ -1,7 +1,7 @@
 import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs"
 
 import { Icon } from "../Icon"
-import { SvgAccreditedSpecialist, SvgTick } from "../Icons/lawconnect/"
+import { SvgTick } from "../Icons/lawconnect/"
 
 import { Typography } from "../Typography"
 
@@ -20,7 +20,11 @@ import { MenuItem } from "./MenuItem"
 ### Selected
 
 <Canvas>
-  <Story name="Selected" args={{}}>
+  <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>
@@ -32,7 +36,11 @@ import { MenuItem } from "./MenuItem"
 ### Disabled
 
 <Canvas>
-  <Story name="Disabled" args={{}}>
+  <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
@@ -44,7 +52,11 @@ import { MenuItem } from "./MenuItem"
 ### Start Icon
 
 <Canvas>
-  <Story name="Start Icon" args={{}}>
+  <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} />}>
@@ -58,7 +70,14 @@ import { MenuItem } from "./MenuItem"
 ### System
 
 <Canvas>
-  <Story name="System" args={{ system: true }}>
+  <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>
@@ -73,7 +92,11 @@ import { MenuItem } from "./MenuItem"
 ### System Selected
 
 <Canvas>
-  <Story name="System Selected" args={{ system: true, selected: true }}>
+  <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
@@ -85,7 +108,14 @@ import { MenuItem } from "./MenuItem"
 ### System Disabled
 
 <Canvas>
-  <Story name="System Disabled" args={{ system: true, disabled: true }}>
+  <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>
@@ -100,7 +130,14 @@ import { MenuItem } from "./MenuItem"
 ### System Border
 
 <Canvas>
-  <Story name="System Border" args={{ border: true, system: true }}>
+  <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>

package/src/MenuItem/MenuItem.test.tsx

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

package/src/MenuItem/MenuItem.tsx

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

package/src/Modal/Modal.test.tsx

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

package/src/Modal/Modal.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Dialog } from '@mui/material';
-import { ModalProps } from './ModalProps.types';
+import { ModalProps } from './Modal.types';
 
 export const Modal: React.FC<ModalProps> = ({
   closeAfterTransition = true,

package/src/Modal/index.ts

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

package/src/ModalActions/ModalActions.test.tsx

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

package/src/ModalActions/ModalActions.tsx

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

package/src/ModalActions/index.ts

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

package/src/ModalContent/ModalContent.test.tsx

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

package/src/ModalContent/ModalContent.tsx

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

package/src/ModalContent/index.ts

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

package/src/ModalTitle/ModalTitle.test.tsx

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

package/src/ModalTitle/ModalTitle.tsx

@@ -1,10 +1,12 @@
-import React from "react";
+import React from 'react';
 import { DialogTitle } from '@mui/material';
 import LeapLogoIcon from '../Icons/common/Dialog/desktop/LeapLogo';
-import { ModalTitleProps } from './ModalTitleProps.types';
+import { ModalTitleProps } from './ModalTitle.types';
 
-export const ModalTitle: React.FC<ModalTitleProps> = (props: ModalTitleProps) => {
-  const { showLeapLogo, ...rest } = props
+export const ModalTitle: React.FC<ModalTitleProps> = (
+  props: ModalTitleProps
+) => {
+  const { showLeapLogo, ...rest } = props;
 
   return (
     <DialogTitle {...rest}>
@@ -14,4 +16,4 @@ export const ModalTitle: React.FC<ModalTitleProps> = (props: ModalTitleProps) =>
   );
 };
 
-export default ModalTitle
+export default ModalTitle;

package/src/ModalTitle/index.ts

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

package/src/Pagination/Pagination.test.tsx

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

package/src/Pagination/Pagination.tsx

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

package/src/Popover/Popover.stories.mdx

@@ -0,0 +1,42 @@
+import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs"
+import { Popover } from "./Popover"
+import { PopoverExample } from "./PopoverExample"
+
+<Meta title="components/Popover" component={Popover} />
+
+<Canvas withToolbar>
+  <Story 
+    name="Default"
+    parameters={{
+      docs: {
+        source: {
+        code: `
+const PopoverExample = () => {
+const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+  setAnchorEl(event.currentTarget);
+};
+const open = Boolean(anchorEl);
+return (
+  <div>
+    <Button
+      aria-describedby="popver"
+      variant="contained"
+      onClick={handleClick}
+    >
+      Open Popover
+    </Button>
+    <Popover open={open} setAnchorEl={setAnchorEl} anchorEl={anchorEl}>
+      <DateRangePickerExample months={2} />
+    </Popover>
+  </div>
+);`
+        }
+      }
+    }}
+    >
+    <PopoverExample />
+  </Story>
+</Canvas>
+
+<ArgsTable story="Default" />

package/src/Popover/Popover.test.tsx

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

package/src/Popover/Popover.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Popover as MuiPopover } from '@mui/material';
+import { PopoverProps } from './Popover.types';
+
+export const Popover = (props: PopoverProps) => {
+  const { anchorEl, setAnchorEl, ...rest } = props;
+
+  const handleClose = () => {
+    setAnchorEl && setAnchorEl(null);
+  };
+
+  return (
+    <MuiPopover
+      id="gds-popover"
+      anchorEl={props.anchorEl}
+      onClose={handleClose}
+      anchorOrigin={{
+        vertical: 'bottom',
+        horizontal: 'left',
+      }}
+      {...rest}
+    >
+      {props.children}
+    </MuiPopover>
+  );
+};
+
+export default Popover;

package/src/Popover/Popover.types.ts

@@ -0,0 +1,7 @@
+import { PopoverProps as MuiPopoverprops } from '@mui/material/Popover';
+
+export interface PopoverProps extends MuiPopoverprops {
+  children: React.ReactNode;
+  anchorEl?: HTMLButtonElement | null;
+  setAnchorEl?: (element: HTMLButtonElement | null) => void;
+}

package/src/Popover/PopoverExample.tsx

@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import Popover from './Popover';
+import { Button } from '@mui/material';
+import DateRangePickerExample from '../DateRangePicker/support/DateRangePickerExample';
+
+export const PopoverExample = () => {
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const open = Boolean(anchorEl);
+
+  return (
+    <div>
+      <Button
+        aria-describedby="popver"
+        variant="contained"
+        onClick={handleClick}
+      >
+        Open Popover
+      </Button>
+      <Popover open={open} setAnchorEl={setAnchorEl} anchorEl={anchorEl}>
+        <DateRangePickerExample months={2} />
+      </Popover>
+    </div>
+  );
+};
+
+export default PopoverExample;

package/src/Popover/index.ts

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

package/src/ProgressBar/ProgressBar.stories.mdx

@@ -1,6 +1,5 @@
 import Stack from "@mui/material/Stack"
 import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs"
-
 import { ProgressBar } from "./ProgressBar"
 
 <Meta title="components/ProgressBar" component={ProgressBar} />

package/src/ProgressBar/ProgressBar.test.tsx

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

package/src/ProgressBar/ProgressBar.types.ts

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

package/src/Radio/Radio.stories.mdx

@@ -1,5 +1,5 @@
 import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs"
-
+import Stack from "@mui/material/Stack"
 import { Radio } from "./Radio"
 
 <Meta title="Form Elements/Radio" component={Radio} />
@@ -27,9 +27,14 @@ Default / Checked
 Default / Checked - disabled
 
 <Canvas>
-  <Story name="Disabled">
-    <Radio label="Label" value={1} disabled />
-    <Radio label="Label" value={1} checked disabled />
+  <Story name="Disabled" parameters={{ docs: { source: { code: `
+<Radio label="Label" value={1} disabled />
+<Radio label="Label" value={1} checked disabled />
+  `}} }}>
+    <Stack direction="row" spacing={2}>
+      <Radio label="Label" value={1} disabled />
+      <Radio label="Label" value={1} checked disabled />
+    </Stack>
   </Story>
 </Canvas>
 

package/src/Radio/Radio.test.tsx

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