@galaxy-ds/core 2.0.1 → 2.0.3

package/src/Autocomplete/Autocomplete.stories.mdx

@@ -1,16 +1,13 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 import Autocomplete from './Autocomplete';
-import Chip from '../Chip/Chip';
+import Tag from '../Tag/Tag';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import ListItemAvatar from '@mui/material/ListItemAvatar';
 import { Avatar } from '../Avatar/Avatar';
-// import AvatarPeopleIcon from '../Icons/AvatarPeople';
 import { Icon } from "../Icon"
-import { SvgUser } from '../Icons/lawconnect/';
+import AvatarPeopleIcon from '../Icons/leap/AvatarPeople';
 import { Typography } from '../Typography/Typography';
-import Button from '@mui/material/Button';
-
 import { EMAILS, NAMES } from './story-supports/AutocompleteMock.ts'
 import RecipientInput from './story-supports/RecipientInput.js';
 
@@ -31,6 +28,7 @@ Autocomplete ....
       autoComplete: true,
       noOptionsText: 'No cards to display',
       placeholder: 'Type email...',
+      open: true
     }}
   >
     {(args) => (
@@ -50,6 +48,51 @@ Autocomplete ....
 <Canvas>
   <Story
     name="Multiple"
+    parameters={{
+      docs: {
+        source: {
+          code: `
+<Autocomplete
+  renderTags={(value, getTagProps) =>
+    value.map((option, index) => (
+      <Tag color='primary' label={option} {...getTagProps({ index })} />
+    ))
+  }
+  renderOption={(props, option) => (
+    <ListItem {...props} dense key={option}>
+      <ListItemAvatar>
+        <Avatar color='default'><Icon name={AvatarPeopleIcon} /></Avatar>
+      </ListItemAvatar>
+      <ListItemText secondary={option}>
+        <Typography color="primary" variant="subtitle1" component="span">
+          {option}
+        </Typography>{' '}
+        <Typography color="gray" component="span">
+          (role)
+        </Typography>
+      </ListItemText>
+    </ListItem>
+  )}
+  noOptionsText="No cards to display"
+  placeholder="Recipients..."
+  style={{ maxWidth: 415 }}
+  options={[
+    'Barry Su',
+    'Catherine Jones',
+    'Tom Baker',
+    'Laura Anderson',
+  ]}
+  multiple
+  autoComplete
+  filterSelectedOptions
+  freeSolo
+  label="To"
+  {...rest}
+/> 
+          `
+        }
+      }
+    }}
     args={{
       options: NAMES,
       multiple: true,
@@ -63,13 +106,13 @@ Autocomplete ....
       <Autocomplete
         renderTags={(value, getTagProps) =>
           value.map((option, index) => (
-            <Chip color='primary' label={option} {...getTagProps({ index })} />
+            <Tag color='primary' label={option} {...getTagProps({ index })} />
           ))
         }
         renderOption={(props, option) => (
           <ListItem {...props} dense key={option}>
             <ListItemAvatar>
-              <Avatar color='default'><Icon name={SvgUser} /></Avatar>
+              <Avatar color='default'><Icon name={AvatarPeopleIcon} /></Avatar>
             </ListItemAvatar>
             <ListItemText secondary={option}>
               <Typography color="primary" variant="subtitle1" component="span">
@@ -94,12 +137,12 @@ Autocomplete ....
 To add a custom button at the bottom of the list, pass a string to `actionLabel` for label and a function to `actionClick` for the action.
 
 <Canvas>
-  <Story name="Custom Action" args={{}}>
-    <div style={{maxWidth: 415}}><RecipientInput/></div>
-  </Story>
-</Canvas>
-
-```javascript
+  <Story 
+    name="Custom Action"
+    parameters={{
+      docs: {
+        source: {
+          code: `
 import React from 'react';
 import { createFilterOptions } from '@mui/material/Autocomplete';
 import {
@@ -111,10 +154,38 @@ import {
   Avatar,
   AvatarPeopleIcon,
 } from '@galaxy-ds/core';
-
+const cards = [
+  {
+    firstName: 'Barry',
+    lastName: 'Su',
+    longName: 'Barry Su',
+    email: 'barry.su@gmail.com',
+    role: 'Client',
+  },
+  {
+    firstName: 'Catherine',
+    lastName: 'Jones',
+    longName: 'Catherine Jones & Tom Arden',
+    email: 'catherine.jones@gmail.com',
+    role: "Other's Solicitor",
+  },
+  {
+    firstName: 'Tom',
+    lastName: 'Baker',
+    longName: 'Fast Contracts',
+    email: 'tom.baker@gmail.com',
+    role: 'Other',
+  },
+  {
+    firstName: 'Laura',
+    lastName: 'Anderson',
+    longName: 'Laura Anderson',
+    email: 'laura.anderson@gmail.com',
+    role: 'Client',
+  },
+];
 function RecipientInput() {
   const filter = createFilterOptions();
-
   return (
     <Autocomplete
       autoComplete
@@ -141,12 +212,11 @@ function RecipientInput() {
       }}
       filterOptions={(options, params) => {
         const filtered = filter(options, params);
-
-        // Suggest the creation of a new value
+         // Suggest the creation of a new value
         if (params.inputValue !== '') {
           filtered.push({
             inputValue: params.inputValue,
-            title: `Add "${params.inputValue}"`,
+             title: ${'`'}Add ${`${'"'}${'${'}params.inputValue${'}'}`}${'"'}${'`'},
           });
         }
         return filtered;
@@ -161,7 +231,7 @@ function RecipientInput() {
                 typeof option === 'string'
                   ? option
                   : option.inputValue ||
-                    `${option.firstName} ${option.lastName}`
+                    ${'`'}${'${'}option.firstName${'}'} ${'${'}option.lastName${'}'}${'`'}
               }
               {...tagProps}
               onDelete={value.length === 1 ? undefined : onDelete}
@@ -183,8 +253,8 @@ function RecipientInput() {
                   color="primary"
                   variant="subtitle1"
                   component="span"
-                >{`${option.firstName} ${option.lastName}`}</Typography>{' '}
-                <Typography color="gray" component="span">{`(${option.role})`}</Typography>
+                >${'`'}${'${'}option.firstName${'}'} ${'${'}option.lastName${'}'}${'`'}}</Typography>{' '}
+                <Typography color="gray" component="span">{${'`'}(${'${'}option.role${'}'})${'`'}}</Typography>
               </>
             </ListItemText>
           </>
@@ -195,37 +265,12 @@ function RecipientInput() {
     />
   );
 }
-
 export default RecipientInput;
-
-const cards = [
-  {
-    firstName: 'Barry',
-    lastName: 'Su',
-    longName: 'Barry Su',
-    email: 'barry.su@gmail.com',
-    role: 'Client',
-  },
-  {
-    firstName: 'Catherine',
-    lastName: 'Jones',
-    longName: 'Catherine Jones & Tom Arden',
-    email: 'catherine.jones@gmail.com',
-    role: "Other's Solicitor",
-  },
-  {
-    firstName: 'Tom',
-    lastName: 'Baker',
-    longName: 'Fast Contracts',
-    email: 'tom.baker@gmail.com',
-    role: 'Other',
-  },
-  {
-    firstName: 'Laura',
-    lastName: 'Anderson',
-    longName: 'Laura Anderson',
-    email: 'laura.anderson@gmail.com',
-    role: 'Client',
-  },
-];
-```
+          `
+        }
+      }
+    }}
+  >
+    <div style={{maxWidth: 415}}><RecipientInput/></div>
+  </Story>
+</Canvas>

package/src/Autocomplete/{Autocomplete.styled.ts → Autocomplete.styled.tsx}

@@ -6,12 +6,11 @@ import Typography from '@mui/material/Typography';
 export const StyledPaper = styled(Paper, {
   shouldForwardProp: (prop) => prop !== 'bottomButtonHeight',
 })<{ bottomButtonHeight?: number }>(({ bottomButtonHeight }) => ({
-  '&': {
     marginLeft: '-1px',
     marginRight: '-1px',
     marginTop: 0,
-  },
   '.MuiAutocomplete-listbox': {
+    position: 'static',
     paddingBottom: bottomButtonHeight,
   },
 }));

package/src/Autocomplete/Autocomplete.test.tsx

@@ -1,6 +1,16 @@
+import React from 'react';
 import { render } from '@testing-library/react';
 import Autocomplete from './Autocomplete';
 
-test('renders', () => {
-  render(<Autocomplete options={[]}/>);
-});
+test('Autocomplete', () => {
+  render(
+    <Autocomplete
+      options={[]}
+      renderInput={() => {
+        <div>
+          <input title="input" />
+        </div>;
+      }}
+    />
+  );
+});

package/src/Autocomplete/Autocomplete.tsx

@@ -1,19 +1,12 @@
-import React, {
-  useState,
-  useRef,
-  SyntheticEvent,
-  KeyboardEventHandler,
-} from 'react';
+import React, { useState, useRef } from 'react';
 import MuiAutocomplete from '@mui/material/Autocomplete';
-import Box from '@mui/material/Box';
 import Divider from '@mui/material/Divider';
-import ListItem from '@mui/material/ListItem';
+import { ListItemButton } from '@mui/material';
 import TextField from '@mui/material/TextField';
-
 import InputLabel from '../InputLabel/InputLabel';
 import Typography from '../Typography/Typography';
 import { StyledListContent, StyledPaper } from './Autocomplete.styled';
-import { AutocompleteProps } from './AutocompleteProps.types';
+import { AutocompleteProps } from './Autocomplete.types';
 
 export const Autocomplete: React.FC<AutocompleteProps> = ({
   label,
@@ -55,17 +48,16 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
           {actionLabel && (
             <>
               <Divider />
-              <ListItem button dense onMouseDown={actionClick}>
+              <ListItemButton dense onMouseDown={actionClick}>
                 <StyledListContent>
                   <Typography
                     variant={platform === 'desktop' ? 'body1' : 'body2'}
-                    // color="primaryLight"
                     align="center"
                   >
                     {actionLabel}
                   </Typography>
                 </StyledListContent>
-              </ListItem>
+              </ListItemButton>
             </>
           )}
         </>

package/src/Autocomplete/{AutocompleteProps.types.tsx → Autocomplete.types.ts}

@@ -1,4 +1,7 @@
-export interface AutocompleteProps {
+import { AutocompleteProps as MuiAutocompleteProps } from '@mui/material';
+
+export interface AutocompleteProps
+  extends MuiAutocompleteProps<any, false, false, false> {
   /**
    * Custom action label to prepend at the bottom of the option list.
    */
@@ -10,22 +13,10 @@ export interface AutocompleteProps {
    * A function fires when clicking the custom action button prepended at the bottom of the option list.
    */
   actionClick?: (e: any) => void;
-  /**
-   * If true, the input will be disabled.
-   */
-  disabled?: boolean;
-  /**
-   * If true, the input can't be cleared.
-   */
-  disableClearable?: boolean;
   /**
    * A filter function that determines the options that are eligible
    */
   filterOptions?: (options: any, state: any) => any;
-  /**
-   * If true, the Autocomplete is free solo, meaning that the user input is not bound to provided options.
-   */
-  freeSolo?: boolean;
   /**
    * Used to determine the string value for a given option. It's used to fill the input (and the list box options if renderOption is not provided).
    */
@@ -34,21 +25,11 @@ export interface AutocompleteProps {
    * Input label
    */
   label?: string;
-  ListboxComponent?: any;
-  /**
-   * If true, value must be an array and the menu will support multiple selections.
-   */
-  multiple?: boolean;
-  /**
-   * Text to display when there are no options.
-   */
-  noOptionsText?: React.ReactNode;
   /**
    * Callback fired when the value changes.
    */
   onChange?: (event: object, value: any | any[], reason: string) => any;
   open?: boolean;
-  onKeyDown?: (event: object) => void;
   /**
    * Array of options.
    */
@@ -68,12 +49,7 @@ export interface AutocompleteProps {
    * getTagProps: A tag props getter.
    */
   renderTags?: (value: any, getTagProps: any) => React.ReactNode;
-  /**
-   * Render the option, use getOptionLabel by default.
-   */
-  renderOption?: (option: any, state: any) => React.ReactNode;
   filterSelectedOptions?: boolean;
-  fullWidth?: boolean;
   onBlur?: (e: any | undefined) => void;
   onFocus?: (e: any | undefined) => void;
 }

package/src/Autocomplete/index.ts

@@ -1,3 +1,3 @@
-export * from './AutocompleteProps.types';
+export * from './Autocomplete.types';
 export * from './Autocomplete';
-export * from './createFilterOptions';
+export * from './createFilterOptions';

package/src/Autocomplete/story-supports/RecipientInput.js

@@ -5,11 +5,10 @@ import ListItemText from '@mui/material/ListItemText';
 
 import Avatar from '../../Avatar/Avatar';
 import BottomListButton from '../../BottomListButton/BottomListButton';
-import Chip from '../../Chip/Chip';
+import Tag from '../../Tag/Tag';
 import { Icon } from '../../Icon';
-import { SvgUser } from '../../Icons/lawconnect/';
 import Typography from '../../Typography/Typography';
-// import AvatarPeopleIcon from '../../Icons/AvatarPeople';
+import AvatarPeopleIcon from '../../Icons/leap/AvatarPeople';
 import Autocomplete from '../Autocomplete';
 import { createFilterOptions } from '../createFilterOptions';
 import { CARDS } from './AutocompleteMock';
@@ -25,10 +24,6 @@ function RecipientInput() {
       multiple
       filterSelectedOptions
       label="To"
-      // actionLabel="Browse more cards..."
-      // actionClick={() => {
-      //   console.log('Open card selection');
-      // }}
       bottomButtonHeight={45}
       options={CARDS}
       getOptionLabel={(option) => {
@@ -63,7 +58,7 @@ function RecipientInput() {
         value.map((option, index) => {
           const { onDelete, ...tagProps } = getTagProps({ index });
           return option.customAction ? null : (
-            <Chip
+            <Tag
               color="primary"
               label={
                 typeof option === 'string'
@@ -92,7 +87,7 @@ function RecipientInput() {
             <ListItem {...props} dense key={option.email}>
               <ListItemAvatar>
                 <Avatar color="default">
-                  <Icon name={SvgUser} />
+                  <Icon name={AvatarPeopleIcon} />
                 </Avatar>
               </ListItemAvatar>
               <ListItemText secondary={option.longName}>

package/src/Avatar/Avatar.stories.mdx

@@ -25,7 +25,11 @@ import { Avatar } from "./Avatar"
 Display an image or intials that represents a user or organisation, chose from three sizes. Avatars can be used to communicate ownership of a document or creation of a matter.
 You can change the color of the avatar with the `color` prop with value `default`, `primary`, `secondary`.
 <Canvas withToolbar>
-  <Story name="Default">
+  <Story name="Default" parameters={{ docs: { source: { code: `
+<Avatar color="default">AB</Avatar>
+<Avatar color="primary">AB</Avatar>
+<Avatar color="secondary">AB</Avatar>
+  `}}}}>
     <Stack direction="row" spacing={2}>
       <Avatar color="default">AB</Avatar>
       <Avatar color="primary">AB</Avatar>
@@ -40,7 +44,13 @@ You can change the color of the avatar with the `color` prop with value `default
 You can change the size of the avatar with the `size` prop with value `xsmall`, `small`, `medium`, `large`, `xlarge`.
 
 <Canvas> 
-    <Story name="Size">
+    <Story name="Size" parameters={{ docs: { source: { code: `
+<Avatar size="xsmall">AB</Avatar>
+<Avatar size="small">AB</Avatar>
+<Avatar size="medium">AB</Avatar>
+<Avatar size="large">AB</Avatar>
+<Avatar size="xlarge">AB</Avatar>
+    `}}}}>
       <Stack direction="row" spacing={2}>
         <Avatar size="xsmall">AB</Avatar>
         <Avatar size="small">AB</Avatar>
@@ -68,9 +78,7 @@ Using the `fontSize` property for Icon with value `small`, `default`, `large` to
 
 <Canvas>
   <Story name="Icons">
-    <Avatar>
-      <Icon name={SvgSettings} />
-    </Avatar> 
+    <Avatar><Icon name={SvgSettings} /></Avatar> 
   </Story>
 </Canvas>
 
@@ -80,9 +88,36 @@ Icon avatars are created by passing an icon as `children`.
 <Canvas withToolbar>
   <Story name="Icons LEAP" args={{
     color: 'default',
-  }}>
+  }}
+  parameters={{ 
+    docs: {
+      source: {
+        code: `
+<Avatar color="default">
+  <AvatarBusinessIcon/>
+</Avatar>
+<Avatar color="default"> 
+  <AvatarPeopleIcon/>
+</Avatar>
+<Avatar color="default">  
+  <AvatarCompanyIcon/>
+</Avatar>
+<Avatar color="default">
+  <AvatarPersonIcon/>
+</Avatar>
+<Avatar color="default"> 
+  <AvatarTrustIcon/>
+</Avatar>
+<Avatar color="default">  
+  <AvatarGovernmentIcon/>
+</Avatar>
+        `
+      }
+    }
+  }}
+  >
     {args => 
-    <Stack>
+    <Stack direction="row" spacing={2}>
       <Avatar {...args} >
         <AvatarBusinessIcon/>
       </Avatar>
@@ -110,9 +145,7 @@ You can add a tooltip with the `tooltip` prop.
 
 <Canvas>
   <Story name="Tooltip">
-    <Avatar tooltip="Laura Tamar and Jess Xao" tooltipPlacement="bottom">
-      AB
-    </Avatar> 
+    <Avatar tooltip="Laura Tamar and Jess Xao" tooltipPlacement="bottom">AB</Avatar> 
   </Story>
 </Canvas>
 

package/src/Avatar/Avatar.test.tsx

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

package/src/Avatar/Avatar.types.ts

@@ -0,0 +1,20 @@
+import { AvatarProps } from '@mui/material';
+
+export interface GDSAvatarProps extends AvatarProps {
+  size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
+  color?: 'default' | 'primary' | 'secondary' | string;
+  tooltip?: any;
+  tooltipPlacement?:
+    | 'bottom-end'
+    | 'bottom-start'
+    | 'bottom'
+    | 'left-end'
+    | 'left-start'
+    | 'left'
+    | 'right-end'
+    | 'right-start'
+    | 'right'
+    | 'top-end'
+    | 'top-start'
+    | 'top';
+}

package/src/AvatarGroup/AvatarGroup.stories.mdx

@@ -9,7 +9,15 @@ import Avatar from "../Avatar/Avatar"
 # AvatarGroup
 AvatarGroup renders its children as a stack. Use the `max` prop to limit the number of avatars.
 <Canvas withToolbar>
-    <Story name="Default">
+    <Story name="Default" parameters={{ docs: { source: { code: `
+<AvatarGroup max={3}>
+  <Avatar>AB</Avatar>
+  <Avatar>CD</Avatar>
+  <Avatar>EF</Avatar>
+  <Avatar>HI</Avatar>
+  <Avatar>JK</Avatar>
+</AvatarGroup>
+    `}}}}>
         <Stack direction="row" spacing={2}>
             <AvatarGroup max={3}>
                 <Avatar>AB</Avatar>
@@ -27,7 +35,43 @@ AvatarGroup renders its children as a stack. Use the `max` prop to limit the num
 You can change the size of the avatar with the `size` prop with value `xsmall`, `small`, `medium`, `large`, `xlarge`.
 
 <Canvas withToolbar>
-    <Story name="Size">
+    <Story name="Size" parameters={{ docs: { source: { code: `
+<AvatarGroup max={3} size="xsmall">
+  <Avatar>AB</Avatar>
+  <Avatar>CD</Avatar>
+  <Avatar>EF</Avatar>
+  <Avatar>HI</Avatar>
+  <Avatar>JK</Avatar>
+</AvatarGroup>
+<AvatarGroup max={3} size="small">
+  <Avatar>AB</Avatar>
+  <Avatar>CD</Avatar>
+  <Avatar>EF</Avatar>
+  <Avatar>HI</Avatar>
+  <Avatar>JK</Avatar>
+</AvatarGroup>
+<AvatarGroup max={3} size="medium">
+  <Avatar>AB</Avatar>
+  <Avatar>CD</Avatar>
+  <Avatar>EF</Avatar>
+  <Avatar>HI</Avatar>
+  <Avatar>JK</Avatar>
+</AvatarGroup>
+<AvatarGroup max={3} size="large">
+  <Avatar>AB</Avatar>
+  <Avatar>CD</Avatar>
+  <Avatar>EF</Avatar>
+  <Avatar>HI</Avatar>
+  <Avatar>JK</Avatar>
+</AvatarGroup>
+<AvatarGroup max={3} size="xlarge">
+  <Avatar>AB</Avatar>
+  <Avatar>CD</Avatar>
+  <Avatar>EF</Avatar>
+  <Avatar>HI</Avatar>
+  <Avatar>JK</Avatar>
+</AvatarGroup> 
+    `}}}}>
          <Stack direction="row" spacing={2}>
             <AvatarGroup max={3} size="xsmall">
                 <Avatar>AB</Avatar>
@@ -72,7 +116,29 @@ You can change the size of the avatar with the `size` prop with value `xsmall`,
 You can change the size of the avatar with the `color` prop with value `default`, `primary`, `secondary`.
 
 <Canvas withToolbar>
-    <Story name="Color">
+    <Story name="Color" parameters={{ docs: { source: { code: `
+<AvatarGroup max={3}>
+  <Avatar>AB</Avatar>
+  <Avatar>CD</Avatar>
+  <Avatar>EF</Avatar>
+  <Avatar>HI</Avatar>
+  <Avatar>JK</Avatar>
+</AvatarGroup>
+<AvatarGroup max={3} color="primary">
+  <Avatar>AB</Avatar>
+  <Avatar>CD</Avatar>
+  <Avatar>EF</Avatar>
+  <Avatar>HI</Avatar>
+  <Avatar>JK</Avatar>
+</AvatarGroup>
+<AvatarGroup max={3} color="secondary">
+  <Avatar>AB</Avatar>
+  <Avatar>CD</Avatar>
+  <Avatar>EF</Avatar>
+  <Avatar>HI</Avatar>
+  <Avatar>JK</Avatar>
+</AvatarGroup>
+    `}}}}>
          <Stack direction="row" spacing={2}>
             <AvatarGroup max={3}>
                 <Avatar>AB</Avatar>
@@ -102,7 +168,15 @@ You can change the size of the avatar with the `color` prop with value `default`
 ### Tooltip
 You can add a tooltip with the `tooltip` prop, this will be added to the +value appended avatar to show the additional values.
 <Canvas withToolbar>
-    <Story name="Tooltip">
+    <Story name="Tooltip" parameters={{ docs: { source: { code: `
+<AvatarGroup max={3} tooltip="Laura Tamar and Jess Xao">
+  <Avatar>AB</Avatar>
+  <Avatar>CD</Avatar>
+  <Avatar>EF</Avatar>
+  <Avatar>HI</Avatar>
+  <Avatar>JK</Avatar>
+</AvatarGroup>
+    `}}}}>
          <Stack direction="row" spacing={2}>
             <AvatarGroup max={3} tooltip="Laura Tamar and Jess Xao">
                 <Avatar>AB</Avatar>