@galaxy-ds/core 2.0.12 → 2.0.14

package/src/Autocomplete/Autocomplete.stories.mdx

@@ -1,276 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-import Autocomplete from './Autocomplete';
-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 { Icon } from "../Icon"
-import AvatarPeopleIcon from '../Icons/leap/AvatarPeople';
-import { Typography } from '../Typography/Typography';
-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...',
-      open: true
-    }}
-  >
-    {(args) => (
-      <div style={{ maxWidth: 415 }}>
-        <Autocomplete {...args} />
-      </div>
-    )}
-  </Story>
-</Canvas>
-
-<ArgsTable story="Default" />
-
-## Stories
-
-### Multiple Selection with Tags
-
-<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,
-      autoComplete: true,
-      filterSelectedOptions: true,
-      freeSolo: true,
-      label: 'To',
-    }}
-  >
-    {(args) => (
-      <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 }}
-        {...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"
-    parameters={{
-      docs: {
-        source: {
-          code: `
-import React from 'react';
-import { createFilterOptions } from '@mui/material/Autocomplete';
-import {
-  Autocomplete,
-  ListItemAvatar,
-  ListItemText,
-  Typography,
-  Tag,
-  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
-      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;
-          `
-        }
-      }
-    }}
-  >
-    <div style={{maxWidth: 415}}><RecipientInput/></div>
-  </Story>
-</Canvas>

package/src/Autocomplete/Autocomplete.styled.tsx

@@ -1,32 +0,0 @@
-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': {
-    position: 'static',
-    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

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

package/src/Autocomplete/Autocomplete.tsx

@@ -1,96 +0,0 @@
-import React, { useState, useRef } from 'react';
-import MuiAutocomplete from '@mui/material/Autocomplete';
-import Divider from '@mui/material/Divider';
-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 './Autocomplete.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 />
-              <ListItemButton dense onMouseDown={actionClick}>
-                <StyledListContent>
-                  <Typography
-                    variant={platform === 'desktop' ? 'body1' : 'body2'}
-                    align="center"
-                  >
-                    {actionLabel}
-                  </Typography>
-                </StyledListContent>
-              </ListItemButton>
-            </>
-          )}
-        </>
-      </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;

package/src/Autocomplete/Autocomplete.types.ts

@@ -1,55 +0,0 @@
-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.
-   */
-  actionLabel?: string;
-  autoComplete?: boolean;
-  bottomButtonHeight?: number;
-  defaultValue?: any;
-  /**
-   * A function fires when clicking the custom action button prepended at the bottom of the option list.
-   */
-  actionClick?: (e: any) => void;
-  /**
-   * A filter function that determines the options that are eligible
-   */
-  filterOptions?: (options: any, state: any) => any;
-  /**
-   * 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).
-   */
-  getOptionLabel?: (option: any) => string;
-  /**
-   * Input label
-   */
-  label?: string;
-  /**
-   * Callback fired when the value changes.
-   */
-  onChange?: (event: object, value: any | any[], reason: string) => any;
-  open?: boolean;
-  /**
-   * Array of options.
-   */
-  options: any[];
-  /**
-   * Placeholder passed to input
-   */
-  placeholder?: string;
-  /**
-   * Deprecated. Now styles automatically change based on theme.
-   */
-  platform?: 'desktop' | 'web';
-  /**
-   * Render the selected value.
-   * (value: T[], getTagProps: function) => ReactNode
-   * value: The value provided to the component.
-   * getTagProps: A tag props getter.
-   */
-  renderTags?: (value: any, getTagProps: any) => React.ReactNode;
-  filterSelectedOptions?: boolean;
-  onBlur?: (e: any | undefined) => void;
-  onFocus?: (e: any | undefined) => void;
-}

package/src/Autocomplete/createFilterOptions.ts

@@ -1,6 +0,0 @@
-import {
-  createFilterOptions as MuiCreateFilterOptions,
-} from '@mui/material/Autocomplete';
-
-export const createFilterOptions = (config: any) =>
-  MuiCreateFilterOptions(config);

package/src/Autocomplete/index.ts

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

package/src/Autocomplete/story-supports/AutocompleteMock.ts

@@ -1,43 +0,0 @@
-export const EMAILS = [
-  'barry.su@gmail.com',
-  'catherine.jones@gmail.com',
-  'tom.baker@gmail.com',
-  'laura.anderson@gmail.com',
-];
-export const NAMES = [
-  'Barry Su',
-  'Catherine Jones',
-  'Tom Baker',
-  'Laura Anderson',
-];
-
-export 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/story-supports/RecipientInput.js

@@ -1,129 +0,0 @@
-import React, { useState } from 'react';
-import ListItem from '@mui/material/ListItem';
-import ListItemAvatar from '@mui/material/ListItemAvatar';
-import ListItemText from '@mui/material/ListItemText';
-
-import Avatar from '../../Avatar/Avatar';
-import BottomListButton from '../../BottomListButton/BottomListButton';
-import Tag from '../../Tag/Tag';
-import { Icon } from '../../Icon';
-import Typography from '../../Typography/Typography';
-import AvatarPeopleIcon from '../../Icons/leap/AvatarPeople';
-import Autocomplete from '../Autocomplete';
-import { createFilterOptions } from '../createFilterOptions';
-import { CARDS } from './AutocompleteMock';
-
-function RecipientInput() {
-  const [open, setOpen] = useState(false);
-  const filter = createFilterOptions();
-
-  return (
-    <Autocomplete
-      autoComplete
-      freeSolo
-      multiple
-      filterSelectedOptions
-      label="To"
-      bottomButtonHeight={45}
-      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;
-        }
-        if (option.customAction) {
-          return '';
-        }
-        // 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}"`,
-          });
-        }
-        filtered.push({ customAction: 'Browse more cards...' });
-        return filtered;
-      }}
-      renderTags={(value, getTagProps) =>
-        value.map((option, index) => {
-          const { onDelete, ...tagProps } = getTagProps({ index });
-          return option.customAction ? null : (
-            <Tag
-              color="primary"
-              label={
-                typeof option === 'string'
-                  ? option
-                  : option.inputValue ||
-                    `${option.firstName} ${option.lastName}`
-              }
-              {...tagProps}
-              onDelete={value.length === 1 ? undefined : onDelete}
-            />
-          );
-        })
-      }
-      renderOption={(props, option) => {
-        return (
-          option.title ||
-          (option.customAction ? (
-            <BottomListButton
-              label={option.customAction}
-              onClick={() => {
-                console.log('Browsing more cards...');
-              }}
-              key={'customActionKeyRequired'}
-            />
-          ) : (
-            <ListItem {...props} dense key={option.email}>
-              <ListItemAvatar>
-                <Avatar color="default">
-                  <Icon name={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>
-            </ListItem>
-          ))
-        );
-      }}
-      noOptionsText="No cards to display"
-      placeholder="Type recipient name or email..."
-      onChange={(_event, value, _) => {
-        const lastItem = value[value.length - 1];
-        // Remove value from customAction option, as it's not a valid input.
-        if ('customAction' in lastItem) value.splice(-1, 1);
-        console.log('onchange', value);
-      }}
-      open={open}
-      onFocus={() => {
-        setOpen(true);
-      }}
-      onBlur={() => {
-        setOpen(false);
-      }}
-    />
-  );
-}
-
-export default RecipientInput;