@galaxy-ds/core 1.1.81 → 2.0.0

package/src/Autocomplete/AutocompleteProps.types.tsx

@@ -0,0 +1,79 @@
+export interface AutocompleteProps {
+  /**
+   * 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;
+  /**
+   * 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).
+   */
+  getOptionLabel?: (option: any) => string;
+  /**
+   * 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.
+   */
+  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;
+  /**
+   * 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/createFilterOptions.ts

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

package/src/Autocomplete/index.ts

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

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

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,134 @@
+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 Chip from '../../Chip/Chip';
+import { Icon } from '../../Icon';
+import { SvgUser } from '../../Icons/lawconnect/';
+import Typography from '../../Typography/Typography';
+// import AvatarPeopleIcon from '../../Icons/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"
+      // actionLabel="Browse more cards..."
+      // actionClick={() => {
+      //   console.log('Open card selection');
+      // }}
+      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 : (
+            <Chip
+              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={SvgUser} />
+                </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;

package/src/Avatar/Avatar.stories.mdx

@@ -0,0 +1,120 @@
+import Stack from "@mui/material/Stack"
+import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs"
+
+import { Icon } from "../Icon"
+import { SvgSettings } from "../Icons/lawconnect/"
+
+import {
+  AvatarBusinessIcon,
+  AvatarPeopleIcon,
+  AvatarCompanyIcon,
+  AvatarPersonIcon,
+  AvatarGovernmentIcon,
+  AvatarTrustIcon,
+} from "../Icons/leap/"
+
+import { Avatar } from "./Avatar"
+
+<Meta
+  title="Components/Avatar"
+  component={Avatar}
+/>
+
+# 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">
+    <Stack direction="row" spacing={2}>
+      <Avatar color="default">AB</Avatar>
+      <Avatar color="primary">AB</Avatar>
+      <Avatar color="secondary">AB</Avatar>
+    </Stack>
+  </Story>
+</Canvas>
+
+
+### Size
+
+You can change the size of the avatar with the `size` prop with value `xsmall`, `small`, `medium`, `large`, `xlarge`.
+
+<Canvas> 
+    <Story name="Size">
+      <Stack direction="row" spacing={2}>
+        <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>
+    </Story> 
+</Canvas>
+
+### Images
+
+If you need an image avatar, use the `src` prop.
+
+<Canvas>
+  <Story name="Images"> 
+    <Avatar src="https://images.unsplash.com/photo-1520813792240-56fc4a3765a7?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ"/> 
+  </Story>
+</Canvas>
+
+### Icons
+
+Icon avatars are created by passing an icon as `children`.
+Using the `fontSize` property for Icon with value `small`, `default`, `large` to append Icon size.
+
+<Canvas>
+  <Story name="Icons">
+    <Avatar>
+      <Icon name={SvgSettings} />
+    </Avatar> 
+  </Story>
+</Canvas>
+
+### Icons
+Icon avatars are created by passing an icon as `children`.
+
+<Canvas withToolbar>
+  <Story name="Icons LEAP" args={{
+    color: 'default',
+  }}>
+    {args => 
+    <Stack>
+      <Avatar {...args} >
+        <AvatarBusinessIcon/>
+      </Avatar>
+      <Avatar {...args} > 
+        <AvatarPeopleIcon/>
+      </Avatar>
+      <Avatar {...args}>  
+        <AvatarCompanyIcon/>
+      </Avatar>
+      <Avatar {...args} >
+        <AvatarPersonIcon/>
+      </Avatar>
+      <Avatar {...args} > 
+        <AvatarTrustIcon/>
+      </Avatar>
+      <Avatar {...args}>  
+        <AvatarGovernmentIcon/>
+      </Avatar>
+    </Stack>}
+  </Story>
+</Canvas>
+
+### Tooltip
+You can add a tooltip with the `tooltip` prop.
+
+<Canvas>
+  <Story name="Tooltip">
+    <Avatar tooltip="Laura Tamar and Jess Xao" tooltipPlacement="bottom">
+      AB
+    </Avatar> 
+  </Story>
+</Canvas>
+
+## Properties
+<ArgsTable story="Default" />

package/src/Avatar/Avatar.styled.ts

@@ -0,0 +1,71 @@
+import MuiAvatar from "@mui/material/Avatar"
+import { styled } from "@mui/material/styles"
+
+export const AvatarStyled = styled(MuiAvatar)(({ theme }) => ({
+  boxSizing: 'border-box',
+  borderRadius: theme.shapes.circle,
+  border: `1px solid transparent`,
+
+  // Tokens: font-weight
+  fontWeight: theme.avatars.fontWeight, 
+
+  // Tokens: Default color
+  color: theme.avatars.color.default.color,
+  background: theme.avatars.color.default.background,
+  borderColor: theme.avatars.color.default.borderColor,
+  borderWidth: theme.avatars.color.default.borderSize,
+
+  // Tokens: Default size medium
+  width: theme.avatars.size.medium.size,
+  height: theme.avatars.size.medium.size,
+  fontSize: theme.avatars.size.medium.fontSize,
+
+  // Modifier colors and sizes
+  // Refer to theme component tokens
+  '&.avatar--default': {
+    color: theme.avatars.color.default.color,
+    background: theme.avatars.color.default.background,
+    borderColor: theme.avatars.color.default.borderColor,
+    borderWidth: theme.avatars.color.default.borderSize,
+  },
+  '&.avatar--primary': {
+    color: theme.avatars.color.primary.color,
+    background: theme.avatars.color.primary.background,
+    borderColor: theme.avatars.color.primary.borderColor,
+    borderWidth: theme.avatars.color.primary.borderSize,
+  },
+  '&.avatar--secondary': {
+    color: theme.avatars.color.secondary.color,
+    background: theme.avatars.color.secondary.background,
+    borderColor: theme.avatars.color.secondary.borderColor,
+    borderWidth: theme.avatars.color.secondary.borderSize,
+  },
+  '&.avatar--xsmall': {
+    width: theme.avatars.size.xsmall.size,
+    height: theme.avatars.size.xsmall.size,
+    fontSize: theme.avatars.size.xsmall.fontSize,
+  },
+  '&.avatar--small': {
+    width: theme.avatars.size.small.size,
+    height: theme.avatars.size.small.size,
+    fontSize: theme.avatars.size.small.fontSize,
+  },
+  '&.avatar--medium': {
+    width: theme.avatars.size.medium.size,
+    height: theme.avatars.size.medium.size,
+    fontSize: theme.avatars.size.medium.fontSize,
+  },
+  '&.avatar--large': {
+    width: theme.avatars.size.large.size,
+    height: theme.avatars.size.large.size,
+    fontSize: theme.avatars.size.large.fontSize,
+  },
+  '&.avatar--xlarge': {
+    width: theme.avatars.size.xlarge.size,
+    height: theme.avatars.size.xlarge.size,
+    fontSize: theme.avatars.size.xlarge.fontSize,
+  },
+  '& .MuiSvgIcon-root': {
+    fontSize: '1.8rem',
+  }
+}))

package/src/Avatar/Avatar.test.tsx

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

package/src/Avatar/Avatar.tsx

@@ -0,0 +1,33 @@
+import { GDSAvatarProps } from './Avatar.types';
+import { AvatarStyled } from './Avatar.styled';
+import Tooltip from '@mui/material/Tooltip';
+
+export const Avatar = (props: GDSAvatarProps) => {
+  const { size, color, tooltip, tooltipPlacement, ...rest } = props;
+  const placement = tooltipPlacement !== undefined ? tooltipPlacement : 'top';
+  return (
+    <>
+      {tooltip ? (
+        <Tooltip arrow title={tooltip} placement={placement}>
+          <AvatarStyled
+            className={`avatar--${color} avatar--${size}`}
+            variant="circular"
+            {...rest}
+          >
+            {props.children}
+          </AvatarStyled>
+        </Tooltip>
+      ) : (
+        <AvatarStyled
+          className={`avatar--${color} avatar--${size}`}
+          variant="circular"
+          {...rest}
+        >
+          {props.children}
+        </AvatarStyled>
+      )}
+    </>
+  );
+};
+
+export default Avatar;

package/src/Avatar/Avatar.types.tsx

@@ -0,0 +1,19 @@
+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/Avatar/index.ts

@@ -0,0 +1,2 @@
+export * from "./Avatar"
+export * from "./Avatar.types"

package/src/AvatarGroup/AvatarGroup.stories.mdx

@@ -0,0 +1,121 @@
+import Stack from "@mui/material/Stack"
+import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs"
+import AvatarGroup from './AvatarGroup';
+import Avatar from "../Avatar/Avatar"
+
+
+<Meta title="components/AvatarGroup" component={ AvatarGroup } />
+
+# AvatarGroup
+AvatarGroup renders its children as a stack. Use the `max` prop to limit the number of avatars.
+<Canvas withToolbar>
+    <Story name="Default">
+        <Stack direction="row" spacing={2}>
+            <AvatarGroup max={3}>
+                <Avatar>AB</Avatar>
+                <Avatar>CD</Avatar>
+                <Avatar>EF</Avatar>
+                <Avatar>HI</Avatar>
+                <Avatar>JK</Avatar>
+            </AvatarGroup>
+        </Stack>
+    </Story>
+</Canvas>
+
+
+### Size
+You can change the size of the avatar with the `size` prop with value `xsmall`, `small`, `medium`, `large`, `xlarge`.
+
+<Canvas withToolbar>
+    <Story name="Size">
+         <Stack direction="row" spacing={2}>
+            <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>
+    </Story>
+</Canvas>
+
+### Color
+You can change the size of the avatar with the `color` prop with value `default`, `primary`, `secondary`.
+
+<Canvas withToolbar>
+    <Story name="Color">
+         <Stack direction="row" spacing={2}>
+            <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>
+    </Story>
+</Canvas>
+
+### 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">
+         <Stack direction="row" spacing={2}>
+            <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>
+    </Story>
+</Canvas>
+
+
+## Properties
+<ArgsTable story="Default" />
+