@galaxy-ds/core 2.0.2 → 2.0.4

package/src/DatePicker/DatePicker.stories.mdx

@@ -7,16 +7,13 @@ import DatePickerExample from './support/DatePickerExample.js';
 # DatePicker
 
 <Canvas withToolbar>
-  <Story name="Default">
-    <DatePickerExample />
-  </Story>
-</Canvas>
-
-### Code Sample
-```javascript
+  <Story name="Default"
+    parameters={{
+      docs: {
+        source: {
+          code: `
 function DatePickerExample() {
   const [date, setDate] = useState(null);
-
   return (
     <DatePicker
       onChange={(item) => setDate(item)}
@@ -24,6 +21,13 @@ function DatePickerExample() {
     ></DatePicker>
   );
 }
-```
+          `
+          }
+        }
+      }}
+  >
+    <DatePickerExample />
+  </Story>
+</Canvas>
 
 <ArgsTable story="Default" />

package/src/DatePicker/DatePicker.styled.tsx

@@ -1,7 +1,8 @@
-import { styled, Theme } from "@mui/material";
+import { styled } from '@mui/material';
 import { Calendar } from 'react-date-range';
 
-export const StyledCalendar = styled(Calendar)(({theme}) => `
+export const StyledCalendar = styled(Calendar)(
+  ({ theme }) => `
   &.rdrCalendarWrapper {
     box-shadow: 0 0 1px rgba(0, 0, 0, 1);
   }
@@ -147,4 +148,5 @@ export const StyledCalendar = styled(Calendar)(({theme}) => `
   .rdrStaticRange:focus .rdrStaticRangeLabel {
     background-color: #dceef9;
   }
-`)
+`
+);

package/src/DatePicker/DatePicker.test.tsx

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

package/src/DatePicker/DatePicker.tsx

@@ -1,17 +1,21 @@
-import React from "react";
-import { StyledCalendar } from "./DatePicker.styled";
-import { DatePickerProps } from './DatePickerProps.types';
-
-export const DatePicker: React.FC<DatePickerProps> = ({date, onChange}: DatePickerProps) => {
+import React from 'react';
+import { StyledCalendar } from './DatePicker.styled';
+import { DatePickerProps } from './DatePicker.types';
 
+export const DatePicker: React.FC<DatePickerProps> = ({
+  date,
+  onChange,
+  ...rest
+}: DatePickerProps) => {
   return (
     <StyledCalendar
       onChange={onChange}
       date={date}
       color={'#dceef9'}
       className="leap-4d-date-picker leap-4d-calendar"
+      {...rest}
     />
   );
 };
 
-export default DatePicker;
+export default DatePicker;

package/src/DatePicker/DatePicker.types.ts

@@ -0,0 +1,3 @@
+import { CalendarProps } from 'react-date-range';
+
+export interface DatePickerProps extends CalendarProps {}

package/src/DatePicker/index.ts

@@ -1,2 +1,2 @@
-export * from './DatePickerProps.types';
-export * from './DatePicker';
+export * from './DatePicker.types';
+export * from './DatePicker';

package/src/DateRangePicker/DateRangePicker.stories.mdx

@@ -9,19 +9,13 @@ import DateRangePickerExample from './support/DateRangePickerExample.js';
 Date range picker with default 2 months side by side.
 
 <Canvas withToolbar>
-  <Story name="Default" args={{}}>
-    {(args) => (
-      <DateRangePickerExample months={2}/>
-    )}
-  </Story>
-</Canvas>
-
-### Code Sample
-
-```javascript
-import React, {useState} from 'react';
+  <Story name="Default" 
+    parameters={{
+      docs: {
+        source: {
+          code: `
+import React, { useState } from 'react';
 import { DateRangePicker } from '@galaxy-ds/core';
-
 function DateRangePickerExample({months}) {
   const [state, setState] = useState([
     {
@@ -29,17 +23,25 @@ function DateRangePickerExample({months}) {
       key: 'selection',
     },
   ]);
-
   return (
     <DateRangePicker
       onChange={(item) => setState([item.selection])}
       ranges={state}
-      months={months}
+      months={2}
       dateDisplayFormat='dd MMMM yyyy'
     ></DateRangePicker>
   );
 }
-```
+          `
+          }
+        }
+      }}
+    >
+    {() => (
+      <DateRangePickerExample months={2}/>
+    )}
+  </Story>
+</Canvas>
 
 <ArgsTable story="Default" />
 
@@ -62,8 +64,35 @@ function DateRangePickerExample({months}) {
 Show just a single month with `months={1}`.
 
 <Canvas>
-  <Story name="Single month" args={{}}>
-    {(args) => (
+  <Story name="Single month"
+    parameters={{
+      docs: {
+        source: {
+          code: `
+import React, {useState} from 'react';
+import { DateRangePicker } from '@galaxy-ds/core';
+function DateRangePickerExample({months}) {
+  const [state, setState] = useState([
+    {
+      startDate: new Date(),
+      key: 'selection',
+    },
+  ]);
+  return (
+    <DateRangePicker
+      onChange={(item) => setState([item.selection])}
+      ranges={state}
+      months={1}
+      dateDisplayFormat='dd MMMM yyyy'
+    ></DateRangePicker>
+  );
+}
+          `
+          }
+        }
+      }}
+  >
+    {() => (
       <DateRangePickerExample months={1}/>
     )}
   </Story>

package/src/DateRangePicker/DateRangePicker.styled.tsx

@@ -1,7 +1,8 @@
-import { styled, Theme } from "@mui/material";
+import { styled } from '@mui/material';
 import { DateRangePicker } from 'react-date-range';
 
-export const StyledDateRangePicker = styled(DateRangePicker)(({theme}) => `
+export const StyledDateRangePicker = styled(DateRangePicker)(
+  ({ theme }) => `
   &.rdrDateRangePickerWrapper,
   .rdrCalendarWrapper {
     box-shadow: 0 0 1px rgba(0, 0, 0, 1);
@@ -174,4 +175,5 @@ export const StyledDateRangePicker = styled(DateRangePicker)(({theme}) => `
   .rdrStaticRange:focus .rdrStaticRangeLabel {
     background-color: #dceef9;
   }
-`)
+`
+);

package/src/DateRangePicker/DateRangePicker.test.tsx

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

package/src/DateRangePicker/DateRangePicker.tsx

@@ -1,10 +1,8 @@
-import React from 'react';
-
 import 'react-date-range/dist/styles.css'; // main css file
 import 'react-date-range/dist/theme/default.css'; // theme css file
 import { StyledDateRangePicker } from './DateRangePicker.styled';
 
-import { DateRangePickerProps } from './DateRangePickerProps.types';
+import { DateRangePickerProps } from './DateRangePicker.types';
 
 export const DateRangePicker: React.FC<DateRangePickerProps> = ({
   months = 2,

package/src/DateRangePicker/index.ts

@@ -1,2 +1,2 @@
-export * from './DateRangePickerProps.types';
-export * from './DateRangePicker';
+export * from './DateRangePicker.types';
+export * from './DateRangePicker';

package/src/Dialog/Dialog.stories.mdx

@@ -14,38 +14,43 @@ import { Input } from "../Input";
 # 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);
 };
-
-<Dialog
-  open={open}
-  handleClose={handleClose}
-  variant="alert"
-  title="header title"
-  message="body message"> 
-</Dialog>
-
-```
-
-<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?',
-  }}>
+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>
+          <Button variant="contained" onClick={() => setOpen(true)}>Open Dialog</Button>
           <Dialog {...args} open={open} handleClose={() => setOpen(false)}>
             <Button variant="contained" color="primary">
                 Save
@@ -65,12 +70,38 @@ const handleClose = () => {
   <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>
+          <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
@@ -87,12 +118,39 @@ const handleClose = () => {
   <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>
+          <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
@@ -109,12 +167,39 @@ const handleClose = () => {
   <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>
+          <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
@@ -135,12 +220,41 @@ 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>
+          <Button variant="contained" onClick={() => setOpen(true)}>Open Dialog</Button>
           <Dialog
             {...args}
             variant="plain"

package/src/Dialog/Dialog.test.tsx

@@ -1,28 +1,30 @@
-import React from "react"
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Dialog } from './Dialog';
 
-import { render } from "test/utils"
+describe('Dialog', () => {
+  it('should show a dialog with a title', () => {
+    const { getByText, getByRole } = render(
+      <Dialog open title="Dialog title" />
+    );
+    getByRole('dialog');
+    getByText('Dialog title');
+  });
 
-import { Dialog } from "./Dialog"
+  it('should show message', () => {
+    const { getByText } = render(
+      <Dialog open title="Dialog title" message="Dialog message" />
+    );
+    getByText('Dialog message');
+  });
 
-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", () => {
+  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")
-  })
-})
+    );
+    getByTestId('test-span');
+    getByText('This is a child span');
+  });
+});

package/src/Dialog/Dialog.tsx

@@ -1,10 +1,10 @@
-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 { 
+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,
@@ -13,10 +13,8 @@ import {
   SvgInfo,
 } from '../Icons/common/Dialog';
 
-
-
 export const Dialog: React.FC<DialogProps> = (props: DialogProps) => {
-  const { variant, platform, title, message, children, ...defaultProps } = props;
+  const { variant, platform, title, message, children, ...rest } = props;
   const theme = useTheme();
 
   let isWeb = () => platform === 'web';
@@ -24,30 +22,32 @@ export const Dialog: React.FC<DialogProps> = (props: DialogProps) => {
 
   switch (variant) {
     case 'info':
-       variantIcon = theme.platform.name === 'leap_web' ? <SvgInfoCircle/> : <SvgInfo/>;
-      break
+      variantIcon =
+        theme.platform.name === 'leap_web' ? <SvgInfoCircle /> : <SvgInfo />;
+      break;
     case 'alert':
-      variantIcon = theme.platform.name === 'leap_web' ? <SvgWarning/> : <SvgAlert/>;
-      break
+      variantIcon =
+        theme.platform.name === 'leap_web' ? <SvgWarning /> : <SvgAlert />;
+      break;
     default:
-      variantIcon = theme.platform.name === 'leap_web' ? <SvgInfoCircle/> : <SvgInfo/>;
+      variantIcon =
+        theme.platform.name === 'leap_web' ? <SvgInfoCircle /> : <SvgInfo />;
   }
 
   return (
     <MuiDialog
-      className={`gds-modal ${isWeb() ? 'gds-modal--web' : 'gds-modal--desktop'}`}
+      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' />
-          )}
+      <div className="gds-modal_paper">
+        <div className="gds-modal_header">
+          {isWeb() ? '' : <SvgLeapLogo className="gds-modal_logo" />}
           {title ? (
             isWeb() ? (
               <Typography color="default" upperCase variant="body1">
@@ -67,14 +67,11 @@ export const Dialog: React.FC<DialogProps> = (props: DialogProps) => {
             <IconButton size="small" onClick={props.handleClose}>
               <Icon name={SvgClose} fontSize="small" />
             </IconButton>
-            
           )}
         </div>
-        <div className='gds-modal_body'>
+        <div className="gds-modal_body">
           {variant !== 'plain' && (
-            <div className='gds-modal_icon'>
-              {variantIcon}
-            </div>
+            <div className="gds-modal_icon">{variantIcon}</div>
           )}
           {typeof message === 'string' ? (
             <Typography color="default" variant="body1">
@@ -84,11 +81,10 @@ export const Dialog: React.FC<DialogProps> = (props: DialogProps) => {
             <div style={{ flex: 1 }}>{message}</div>
           )}
         </div>
-        <div className='gds-modal_footer'>
+        <div className="gds-modal_footer">
           <DialogActions>{children}</DialogActions>
         </div>
       </div>
     </MuiDialog>
   );
-}
-
+};

package/src/Dialog/Dialog.type.ts

@@ -1,4 +1,5 @@
-export interface DialogProps {
+import { DialogProps as MuiDialogProps } from '@mui/material';
+export interface DialogProps extends MuiDialogProps {
   children?: any;
   variant?: 'info' | 'alert' | 'plain';
   /**
@@ -9,4 +10,4 @@ export interface DialogProps {
   message?: React.ReactNode;
   open: boolean;
   handleClose?: (e: any) => void;
-}
+}

package/src/Divider/Divider.stories.mdx

@@ -17,6 +17,12 @@ A divider is a thin line that groups content in lists and layouts. Dividers sepa
   </Story>
 </Canvas>
 
+<Canvas withToolbar>
+  <Story name="orientation" args={{}}>
+    {args => <Divider orientation='vertical'/>}
+  </Story>
+</Canvas>
+
 ## Properties
 
 <ArgsTable story="Default" />

package/src/Divider/Divider.test.tsx

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