@galaxy-ds/core 1.1.81 → 2.0.0

package/src/AttachmentIcon/AttachmentIcon.stories.mdx

@@ -0,0 +1,89 @@
+
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import AttachmentIcon from "./AttachmentIcon";
+
+<Meta
+  title="Patterns/AttachmentIcon"
+  component={AttachmentIcon}
+  parameters={{badges: ['stable']}}
+/>
+
+# Attachment Icon
+Attachment Icon ....
+
+```javascript
+import AttachmentIcon from "@galaxy-ds/core";
+```
+
+
+<Canvas withToolbar>
+  <Story name="Default">
+    <AttachmentIcon ext="default"/>
+    <AttachmentIcon ext="doc"/>
+    <AttachmentIcon ext="xls"/>
+    <AttachmentIcon ext="pdf"/>
+    <AttachmentIcon ext="comment"/>
+    <AttachmentIcon ext="png"/>
+    <AttachmentIcon ext="eml"/>
+    <AttachmentIcon ext="emlsent"/>
+    <AttachmentIcon ext="emlreceived"/>
+    <AttachmentIcon ext="emldraft"/>
+    <AttachmentIcon ext="zip"/>
+    <AttachmentIcon ext="folder"/>
+    <AttachmentIcon ext="app"/>
+    <AttachmentIcon ext="invoice"/>
+    <AttachmentIcon ext="audio"/>
+    <AttachmentIcon ext="video"/>
+    <AttachmentIcon ext="clause"/>
+    <AttachmentIcon ext="fax"/>
+    <AttachmentIcon ext="file"/>
+    <AttachmentIcon ext="infotrack"/>
+    <AttachmentIcon ext="invrequest"/>
+    <AttachmentIcon ext="invrequests"/>
+    <AttachmentIcon ext="letter"/>
+    <AttachmentIcon ext="memo"/>
+    <AttachmentIcon ext="ppt"/>
+    <AttachmentIcon ext="sms"/>
+    <AttachmentIcon ext="videocall"/>
+    <AttachmentIcon ext="phonecall"/>
+    <AttachmentIcon ext="scanneddoc"/>
+    <AttachmentIcon ext="activitydefault"/>
+  </Story>
+</Canvas>
+
+<ArgsTable story="Default" />
+
+<Canvas withToolbar>
+  <Story name="Small">
+    <AttachmentIcon size="small" ext="default"/>
+    <AttachmentIcon size="small" ext="doc"/>
+    <AttachmentIcon size="small" ext="xls"/>
+    <AttachmentIcon size="small" ext="pdf"/>
+    <AttachmentIcon size="small" ext="comment"/>
+    <AttachmentIcon size="small" ext="png"/>
+    <AttachmentIcon size="small" ext="eml"/>
+    <AttachmentIcon size="small" ext="emlsent"/>
+    <AttachmentIcon size="small" ext="emlreceived"/>
+    <AttachmentIcon size="small" ext="emldraft"/>
+    <AttachmentIcon size="small" ext="zip"/>
+    <AttachmentIcon size="small" ext="folder"/>
+    <AttachmentIcon size="small" ext="app"/>
+    <AttachmentIcon size="small" ext="invoice"/>
+    <AttachmentIcon size="small" ext="audio"/>
+    <AttachmentIcon size="small" ext="video"/>
+    <AttachmentIcon size="small" ext="clause"/>
+    <AttachmentIcon size="small" ext="fax"/>
+    <AttachmentIcon size="small" ext="file"/>
+    <AttachmentIcon size="small" ext="infotrack"/>
+    <AttachmentIcon size="small" ext="invrequest"/>
+    <AttachmentIcon size="small" ext="invrequests"/>
+    <AttachmentIcon size="small" ext="letter"/>
+    <AttachmentIcon size="small" ext="memo"/>
+    <AttachmentIcon size="small" ext="ppt"/>
+    <AttachmentIcon size="small" ext="sms"/>
+    <AttachmentIcon size="small" ext="videocall"/>
+    <AttachmentIcon size="small" ext="phonecall"/>
+    <AttachmentIcon size="small" ext="scanneddoc"/>
+    <AttachmentIcon size="small" ext="activitydefault"/>
+  </Story>
+</Canvas>

package/src/AttachmentIcon/AttachmentIcon.tsx

@@ -0,0 +1,209 @@
+import React from 'react';
+
+import {
+  ActivityTypeDefault,
+  ActivityTypePhoneCall,
+  ActivityTypeScannedDoc,
+  ActivityTypeVideoCall,
+  DocTypeAppointment,
+  DocTypeAudio,
+  DocTypeClausePrecedent,
+  DocTypeComment,
+  DocTypeDefault,
+  DocTypeEmail,
+  DocTypeEmailDraft,
+  DocTypeEmailReceived,
+  DocTypeEmailSent,
+  DocTypeExcel,
+  DocTypeFax,
+  DocTypeFileNote,
+  DocTypeFolder,
+  DocTypeImage,
+  DocTypeInfotrack,
+  DocTypeInvoiceRequest,
+  DocTypeInvoiceRequests,
+  DocTypeLetter,
+  DocTypeMemo,
+  DocTypePdf,
+  DocTypePowerpoint,
+  DocTypeSMS,
+  DocTypeTrust,
+  DocTypeVideo,
+  DocTypeWord,
+  DocTypeZip,
+} from '../Icons/doctypes/Doctype';
+import {
+  ActivityTypeDefault16,
+  ActivityTypePhoneCall16,
+  ActivityTypeScannedDoc16,
+  ActivityTypeVideoCall16,
+  DocTypeAppointment16,
+  DocTypeAudio16,
+  DocTypeClausePrecedent16,
+  DocTypeComment16,
+  DocTypeDefault16,
+  DocTypeEmail16,
+  DocTypeEmailDraft16,
+  DocTypeEmailReceived16,
+  DocTypeEmailSent16,
+  DocTypeExcel16,
+  DocTypeFax16,
+  DocTypeFileNote16,
+  DocTypeFolder16,
+  DocTypeImage16,
+  DocTypeInfotrack16,
+  DocTypeInvoiceRequest16,
+  DocTypeInvoiceRequests16,
+  DocTypeLetter16,
+  DocTypeMemo16,
+  DocTypePdf16,
+  DocTypePowerpoint16,
+  DocTypeSMS16,
+  DocTypeTrust16,
+  DocTypeVideo16,
+  DocTypeWord16,
+  DocTypeZip16,
+} from '../Icons/doctypes/Doctype16';
+import { AttachmentIconProps } from './AttachmentIcon.types';
+
+export const AttachmentIcon: React.FC<AttachmentIconProps> = (props: AttachmentIconProps) => {
+  const { ext, size="medium", ...defaultProps } = props
+  let icon;
+  let extension;
+
+  if (!props.ext || props.ext == undefined) {
+    icon = size === 'small' ?
+      <DocTypeDefault16 fontSize={size} {...defaultProps} /> :
+      <DocTypeDefault fontSize={size} {...defaultProps} />;
+  } else {
+    extension = props.ext.replace('.', '').toLowerCase();
+  }
+
+  switch (extension) {
+    case 'audio':
+      icon = size === 'small' ? <DocTypeAudio16 fontSize={size} /> : <DocTypeAudio fontSize={size} />;
+      break
+    case 'clause':
+      icon = size === 'small' ? <DocTypeClausePrecedent16 fontSize={size} /> : <DocTypeClausePrecedent fontSize={size} />;
+      break
+    case 'doc':
+    case 'docx':
+      icon = size === 'small' ? <DocTypeWord16 fontSize={size} {...defaultProps} /> : <DocTypeWord fontSize={size} {...defaultProps} />;
+      break
+    case 'fax':
+      icon = size === 'small' ? <DocTypeFax16 fontSize={size} /> : <DocTypeFax fontSize={size} />;
+      break
+    case 'file':
+      icon = size === 'small' ? <DocTypeFileNote16 fontSize={size} /> : <DocTypeFileNote fontSize={size} />;
+      break
+    case 'infotrack':
+      icon = size === 'small' ? <DocTypeInfotrack16 fontSize={size} /> : <DocTypeInfotrack fontSize={size} />;
+      break
+    case 'invrequest':
+      icon = size === 'small' ? <DocTypeInvoiceRequest16 fontSize={size} /> : <DocTypeInvoiceRequest fontSize={size} />;
+      break
+    case 'invrequests':
+      icon = size === 'small' ? <DocTypeInvoiceRequests16 fontSize={size} /> : <DocTypeInvoiceRequests fontSize={size} />;
+      break
+    case 'letter':
+      icon = size === 'small' ? <DocTypeLetter16 fontSize={size} /> : <DocTypeLetter fontSize={size} />;
+      break
+    case 'memo':
+      icon = size === 'small' ? <DocTypeMemo16 fontSize={size} /> : <DocTypeMemo fontSize={size} />;
+      break
+    case 'xls':
+    case 'xlsx':
+      icon = size === 'small' ? <DocTypeExcel16 fontSize={size}/> : <DocTypeExcel fontSize={size}/>;
+      break
+    case 'trust':
+    case 'invoice':
+    case 'office':
+      icon = size === 'small' ? <DocTypeTrust16 fontSize={size}/> : <DocTypeTrust fontSize={size}/>;
+      break
+    case 'pdf':
+      icon = size === 'small' ? <DocTypePdf16 fontSize={size}/> : <DocTypePdf fontSize={size}/>;
+      break
+    case 'ppt':
+      icon = size === 'small' ? <DocTypePowerpoint16 fontSize={size} /> : <DocTypePowerpoint fontSize={size} />;
+      break
+    case 'video':
+      icon = size === 'small' ? <DocTypeVideo16 fontSize={size} /> : <DocTypeVideo fontSize={size} />;
+      break
+    case 'sms':
+      icon = size === 'small' ? <DocTypeSMS16 fontSize={size} /> : <DocTypeSMS fontSize={size} />;
+      break
+    case 'zip':
+      icon = size === 'small' ? <DocTypeZip16 fontSize={size}/> : <DocTypeZip fontSize={size}/>;
+      break
+    case 'jpeg':
+    case 'jpg':
+    case 'png':
+    case 'gif':
+    case 'tiff':
+      icon = size === 'small' ? <DocTypeImage16 fontSize={size}/> : <DocTypeImage fontSize={size}/>;
+      break
+    case 'comment':
+      icon = size === 'small' ? <DocTypeComment16 fontSize={size} /> : <DocTypeComment fontSize={size} />;
+      break
+    case 'eml':
+      icon = size === 'small' ? <DocTypeEmail16 fontSize={size}/> : <DocTypeEmail fontSize={size}/>;
+      break
+    case 'emldraft':
+      icon = size === 'small' ? <DocTypeEmailDraft16 fontSize={size}/> : <DocTypeEmailDraft fontSize={size}/>;
+      break
+    case 'emlsent':
+    case 'msg':
+      icon = size === 'small' ? <DocTypeEmailSent16 fontSize={size}/> : <DocTypeEmailSent fontSize={size}/>;
+      break 
+    case 'emlreceived':
+      icon = size === 'small' ? <DocTypeEmailReceived16 fontSize={size} /> : <DocTypeEmailReceived fontSize={size}/>;
+      break  
+    case 'folder':
+      icon = size === 'small' ? <DocTypeFolder16 fontSize={size}/> : <DocTypeFolder fontSize={size}/>;
+      break 
+    case 'app':
+      icon = size === 'small' ? <DocTypeAppointment16 fontSize={size}/> : <DocTypeAppointment fontSize={size}/>;
+      break; 
+    case 'videocall':
+      icon =
+        size === 'small' ? (
+          <ActivityTypeVideoCall16 fontSize={size} />
+        ) : (
+          <ActivityTypeVideoCall fontSize={size} />
+        );
+      break
+    case 'phonecall':
+      icon =
+        size === 'small' ? (
+          <ActivityTypePhoneCall16 fontSize={size} />
+        ) : (
+          <ActivityTypePhoneCall fontSize={size} />
+        );
+      break
+    case 'scanneddoc':
+      icon =
+        size === 'small' ? (
+          <ActivityTypeScannedDoc16 fontSize={size} />
+        ) : (
+          <ActivityTypeScannedDoc fontSize={size} />
+        );
+      break;
+    case 'activitydefault':
+      icon =
+        size === 'small' ? (
+          <ActivityTypeDefault16 fontSize={size} />
+        ) : (
+          <ActivityTypeDefault fontSize={size} />
+        );
+      break;
+    default:
+      icon = size === 'small' ? <DocTypeDefault16 fontSize={size}/> : <DocTypeDefault fontSize={size}/>;
+  }
+
+  return (
+    <>{icon}</>
+  )
+}
+
+export default AttachmentIcon;
+

package/src/AttachmentIcon/AttachmentIcon.types.ts

@@ -0,0 +1,4 @@
+export interface AttachmentIconProps {
+    ext?: string;
+    size?: 'medium' | 'inherit' | 'large' | 'small';
+}

package/src/AttachmentIcon/index.ts

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

package/src/Autocomplete/Autocomplete.stories.mdx

@@ -0,0 +1,231 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import Autocomplete from './Autocomplete';
+import Chip from '../Chip/Chip';
+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 { 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';
+
+<Meta
+  title="Form Elements/Autocomplete"
+  component={Autocomplete}
+/>
+
+# Autocomplete
+
+Autocomplete ....
+
+<Canvas withToolbar>
+  <Story
+    name="Default"
+    args={{
+      options: EMAILS,
+      autoComplete: true,
+      noOptionsText: 'No cards to display',
+      placeholder: 'Type email...',
+    }}
+  >
+    {(args) => (
+      <div style={{ maxWidth: 415 }}>
+        <Autocomplete {...args} />
+      </div>
+    )}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Default" />
+
+## Stories
+
+### Multiple Selection with Tags
+
+<Canvas>
+  <Story
+    name="Multiple"
+    args={{
+      options: NAMES,
+      multiple: true,
+      autoComplete: true,
+      filterSelectedOptions: true,
+      freeSolo: true,
+      label: 'To',
+    }}
+  >
+    {(args) => (
+      <Autocomplete
+        renderTags={(value, getTagProps) =>
+          value.map((option, index) => (
+            <Chip color='primary' label={option} {...getTagProps({ index })} />
+          ))
+        }
+        renderOption={(props, option) => (
+          <ListItem {...props} dense key={option}>
+            <ListItemAvatar>
+              <Avatar color='default'><Icon name={SvgUser} /></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 }}
+        {...args}
+      />
+    )}
+  </Story>
+</Canvas>
+
+### Custom Action
+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
+import React from 'react';
+import { createFilterOptions } from '@mui/material/Autocomplete';
+import {
+  Autocomplete,
+  ListItemAvatar,
+  ListItemText,
+  Typography,
+  Tag,
+  Avatar,
+  AvatarPeopleIcon,
+} from '@galaxy-ds/core';
+
+function RecipientInput() {
+  const filter = createFilterOptions();
+
+  return (
+    <Autocomplete
+      autoComplete
+      freeSolo
+      multiple
+      filterSelectedOptions
+      label="To"
+      actionLabel="Browse more cards..."
+      actionClick={() => {
+        console.log('Open card selection');
+      }}
+      options={cards}
+      getOptionLabel={(option) => {
+        // Value selected with enter, right from the input
+        if (typeof option === 'string') {
+          return option;
+        }
+        // Add "xyz" option created dynamically
+        if (option.inputValue) {
+          return option.inputValue;
+        }
+        // Regular option
+        return option.email;
+      }}
+      filterOptions={(options, params) => {
+        const filtered = filter(options, params);
+
+        // Suggest the creation of a new value
+        if (params.inputValue !== '') {
+          filtered.push({
+            inputValue: params.inputValue,
+            title: `Add "${params.inputValue}"`,
+          });
+        }
+        return filtered;
+      }}
+      renderTags={(value, getTagProps) =>
+        value.map((option, index) => {
+          const { onDelete, ...tagProps } = getTagProps({ index });
+          return (
+            <Tag
+              variant="primary"
+              label={
+                typeof option === 'string'
+                  ? option
+                  : option.inputValue ||
+                    `${option.firstName} ${option.lastName}`
+              }
+              {...tagProps}
+              onDelete={value.length === 1 ? undefined : onDelete}
+            />
+          );
+        })
+      }
+      renderOption={(option, state) =>
+        option.title || (
+          <>
+            <ListItemAvatar>
+              <Avatar color="default">
+                <AvatarPeopleIcon />
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText secondary={option.longName}>
+              <>
+                <Typography
+                  color="primary"
+                  variant="subtitle1"
+                  component="span"
+                >{`${option.firstName} ${option.lastName}`}</Typography>{' '}
+                <Typography color="gray" component="span">{`(${option.role})`}</Typography>
+              </>
+            </ListItemText>
+          </>
+        )
+      }
+      noOptionsText="No cards to display"
+      placeholder="Recipients..."
+    />
+  );
+}
+
+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',
+  },
+];
+```

package/src/Autocomplete/Autocomplete.styled.ts

@@ -0,0 +1,33 @@
+import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
+import { styled } from '@mui/material/styles';
+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': {
+    paddingBottom: bottomButtonHeight,
+  },
+}));
+
+export const StyledListContent = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'center',
+  width: '100%',
+  padding:
+    theme.platform.name === 'leap_desktop'
+      ? theme.spacing(1)
+      : theme.spacing(2),
+}));
+
+export const StyledTypography = styled(Typography)(({ theme }) => ({
+  align: 'center',
+  ...theme.typography.body2,
+  ...(theme.platform.name === 'leap_desktop' && {...theme.typography.body1 }),
+}));

package/src/Autocomplete/Autocomplete.test.tsx

@@ -0,0 +1,6 @@
+import { render } from '@testing-library/react';
+import Autocomplete from './Autocomplete';
+
+test('renders', () => {
+  render(<Autocomplete options={[]}/>);
+});

package/src/Autocomplete/Autocomplete.tsx

@@ -0,0 +1,104 @@
+import React, {
+  useState,
+  useRef,
+  SyntheticEvent,
+  KeyboardEventHandler,
+} 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 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';
+
+export const Autocomplete: React.FC<AutocompleteProps> = ({
+  label,
+  placeholder,
+  platform = 'desktop',
+  actionLabel,
+  actionClick,
+  onChange,
+  bottomButtonHeight,
+  ...rest
+}: AutocompleteProps) => {
+  const [inputPlaceholder, setInputPlaceholder] = useState(placeholder);
+  const root = useRef<HTMLDivElement>(null);
+
+  const onKeyDownHandler = (event: any) => {
+    const inputRootEl =
+      root?.current &&
+      root.current.getElementsByClassName('MuiAutocomplete-inputRoot')[0];
+    if (inputRootEl) {
+      if (event.key === 'ArrowDown') {
+        inputRootEl.scrollTop += 10;
+      }
+      if (event.key === 'ArrowUp') {
+        inputRootEl.scrollTop -= 10;
+      }
+    }
+  };
+
+  // Workaround: use onMouseDown here because onClick will close the panel before actionClick called.
+  const CustomPaper = function (props: any) {
+    return (
+      <StyledPaper
+        bottomButtonHeight={bottomButtonHeight}
+        {...props}
+        placement="bottom"
+      >
+        <>
+          {props.children}
+          {actionLabel && (
+            <>
+              <Divider />
+              <ListItem button dense onMouseDown={actionClick}>
+                <StyledListContent>
+                  <Typography
+                    variant={platform === 'desktop' ? 'body1' : 'body2'}
+                    // color="primaryLight"
+                    align="center"
+                  >
+                    {actionLabel}
+                  </Typography>
+                </StyledListContent>
+              </ListItem>
+            </>
+          )}
+        </>
+      </StyledPaper>
+    );
+  };
+
+  return (
+    <>
+      {label && <InputLabel>{label}</InputLabel>}
+      <MuiAutocomplete
+        disableClearable
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            inputProps={{ ...params.inputProps, autoComplete: 'off' }}
+            placeholder={inputPlaceholder}
+            className="customLargeSize"
+          />
+        )}
+        PaperComponent={CustomPaper}
+        onChange={(event, value, reason) => {
+          value && value.length > 0
+            ? setInputPlaceholder('')
+            : setInputPlaceholder(placeholder);
+          onChange && onChange(event, value, reason);
+        }}
+        onKeyDown={onKeyDownHandler}
+        ref={root}
+        {...rest}
+      />
+    </>
+  );
+};
+
+export default Autocomplete;