@galaxy-ds/core 1.1.81 → 2.0.0

package/src/Dropdown/Dropdown.stories.mdx

@@ -0,0 +1,289 @@
+import { Meta, Story, Canvas, ArgsTable, Preview } from '@storybook/addon-docs';
+
+import { Select } from "@mui/material"
+
+import { Checkbox } from '../Checkbox';
+import { Dropdown } from './Dropdown';
+import { Typography } from '../Typography';
+import { MenuItem } from '../MenuItem';
+import ListSubheader from '../ListSubheader/ListSubheader';
+import ListItemText from '../ListItemText/ListItemText';
+import { Icon } from '../Icon';
+import { SvgFilter, SvgUser } from '../Icons/lawconnect/';
+import { Input } from "../Input";
+import { Box } from '../Box';
+
+<Meta
+  title="Form Elements/Dropdown"
+  component={Dropdown}
+  parameters={{badges: ['stable']}}
+/>
+
+# Dropdown
+
+Dropdown opens a dropdown menu when clicked.
+The children of Dropdown, usually a set of `MenuItem` and `ListSubheader` become the menu list contents.
+
+<Preview withToolbar>
+  <Story name="Default" args={{ displayEmpty: true }}>
+    {(args) => (
+      <div style={{ margin: '3rem', display: 'flex', justifyContent: 'flex-end', maxWidth: '300px' }}>
+        <Dropdown
+          {...args}
+          defaultValue={1}
+        >
+          <ListSubheader>&lt; All Billing Statuses &gt;</ListSubheader>
+          <MenuItem value={1}>Billable - All</MenuItem>
+          <MenuItem value={2}>Billable - Next Invoice</MenuItem>
+          <MenuItem value={3}>Billable - Later Invoice</MenuItem>
+          <MenuItem value={4}>Not Billable</MenuItem>
+          <MenuItem value={5}>Billed - All</MenuItem>
+          <MenuItem value={6}>Deleted</MenuItem>
+        </Dropdown>
+      </div>
+    )}
+  </Story>
+</Preview>
+
+### Dropdown Panel Alignment
+
+Set `align` to 'left' to align the dropdown panel to the left edge.
+
+<Canvas>
+  <Story name="Align Left" args={{
+    displayEmpty: true,
+    defaultValue: '1',
+    align: "left"
+    }}>
+    {(args) => (
+      <div style={{ margin: '3rem 6rem' }}>
+      <Dropdown
+        {...args}
+      >
+        <ListSubheader>&lt; All Billing Statuses &gt;</ListSubheader>
+        <MenuItem value={1}>Billable - All</MenuItem>
+        <MenuItem value={2}>Billable - Next Invoice</MenuItem>
+        <MenuItem value={3}>Billable - Later Invoice</MenuItem>
+        <MenuItem value={4}>Not Billable</MenuItem>
+        <MenuItem value={5}>Billed - All</MenuItem>
+        <MenuItem value={6}>Deleted</MenuItem>
+      </Dropdown>
+      </div>
+    )}
+  </Story>
+</Canvas>
+
+### Label
+
+Specify `label` property to add a form label on top.
+
+<Canvas>
+  <Story name="with Label" args={{
+    defaultValue: '1',
+    align: "left",
+    label: 'Assign To'
+    }}>
+    {(args) => (
+      <div style={{ margin: '3rem 6rem' }}>
+      <Dropdown
+        {...args}
+      >
+        <MenuItem value={1}>Laura Tamar</MenuItem>
+        <MenuItem value={2}>Stan Tamar</MenuItem>
+        <MenuItem value={3}>Jess Xao</MenuItem>
+      </Dropdown>
+      </div>
+    )}
+  </Story>
+</Canvas>
+
+### Display Empty
+
+To display a value when no items are selected, set `displayEmpty` to `true`. The `MenuItem` with `value = ""` will be shown.
+
+<Canvas>
+  <Story name="Display Empty" args={{
+    displayEmpty: true,
+    defaultValue: ""
+    }}>
+    {(args) => (
+      <div style={{ margin: '3rem 6rem' }}>
+      <Dropdown
+        {...args}
+      >
+        <MenuItem value="">Select Billing Status</MenuItem>
+        <ListSubheader>&lt; All Billing Statuses &gt;</ListSubheader>
+        <MenuItem value={1}>Billable - All</MenuItem>
+        <MenuItem value={2}>Billable - Next Invoice</MenuItem>
+        <MenuItem value={3}>Billable - Later Invoice</MenuItem>
+        <MenuItem value={4}>Not Billable</MenuItem>
+        <MenuItem value={5}>Billed - All</MenuItem>
+        <MenuItem value={6}>Deleted</MenuItem>
+      </Dropdown>
+      </div>
+    )}
+  </Story>
+</Canvas>
+
+### Multiple
+
+Set `multiple` to `true` to accept multiple selection. The `value` or `defaultValue` must be an array.
+
+Provide `width` to make sure the dropdown component and the dropdown panel have the same fixed width.
+
+<Canvas>
+  <Story name="Multiple with Checkboxes" args={{
+    defaultValue: [],
+    displayEmpty: true,
+    multiple: true,
+    width: 180,
+    renderValue: (selected) => selected.length === 0 ? 'Asignee: Any' : 'Asignee: ' + selected.join(', ')
+    }}>
+    {(args) => (
+      <div style={{ margin: '3rem 6rem' }}>
+      <Dropdown
+        {...args}
+        startAdornment={<Icon name={SvgFilter} />}
+      >
+        <MenuItem value="Cliff Liemann"><Checkbox label="Cliff Liemann"/></MenuItem>
+        <MenuItem value="Laura Tamar"><Checkbox label="Laura Tamar"/></MenuItem>
+        <MenuItem value="Stan Tamar"><Checkbox label="Stan Tamar"/></MenuItem>
+        <MenuItem value="John William"><Checkbox label="John William"/></MenuItem>
+        <MenuItem value="Jess Xao"><Checkbox label="Jess Xao"/></MenuItem>
+      </Dropdown>
+      </div>
+    )}
+  </Story>
+</Canvas>
+
+### Prepended Icon
+
+Provide `input` property with an icon as a `startAdornment` to preprend the icon to the Dropdown button.
+
+<Canvas>
+  <Story name="Prepended Icon" args={{
+    defaultValue: "1",
+    }}>
+    {(args) => (
+      <div style={{ margin: '3rem', display: 'flex', justifyContent: 'flex-end', maxWidth: '300px' }}>
+      <Dropdown
+        {...args}
+        startAdornment={<Icon name={SvgFilter} />}
+      >
+        <ListSubheader>&lt; All Billing Statuses &gt;</ListSubheader>
+        <MenuItem value={1}>Billable - All</MenuItem>
+        <MenuItem value={2}>Billable - Next Invoice</MenuItem>
+        <MenuItem value={3}>Billable - Later Invoice</MenuItem>
+        <MenuItem value={4}>Not Billable</MenuItem>
+        <MenuItem value={5}>Billed - All</MenuItem>
+        <MenuItem value={6}>Deleted</MenuItem>
+      </Dropdown>
+      </div>
+    )}
+  </Story>
+</Canvas>
+
+### Full width
+
+Set `fullWidth: true` to make it takes 100% width of its container.
+
+<Canvas>
+  <Story name="Full width" args={{
+    defaultValue: "1",
+    fullWidth: true
+    }}>
+    {(args) => (
+      <div style={{ margin: '3rem', display: 'flex', justifyContent: 'flex-end', maxWidth: '300px'}}>
+      <Dropdown
+        {...args}
+      >
+        <ListSubheader>&lt; All Billing Statuses &gt;</ListSubheader>
+        <MenuItem value={1}>Billable - All</MenuItem>
+        <MenuItem value={2}>Billable - Next Invoice</MenuItem>
+        <MenuItem value={3}>Billable - Later Invoice</MenuItem>
+        <MenuItem value={4}>Not Billable</MenuItem>
+        <MenuItem value={5}>Billed - All</MenuItem>
+        <MenuItem value={6}>Deleted</MenuItem>
+      </Dropdown>
+      </div>
+    )}
+  </Story>
+</Canvas>
+
+
+### Large size/Toolbar size
+
+Set `size: 'large'` to get the large size for Desktop or toolbar size for Web.
+Note that large size in Web theme (32px height) is for use in toolbars, Desktop share screens, and actually smaller than regular size (36px).
+
+<Canvas>
+  <Story name="Large size/Toolbar size" args={{
+    defaultValue: "1",
+    size: 'large'
+    }}>
+    {(args) => (
+      <div style={{ margin: '3rem', display: 'flex', justifyContent: 'flex-end', maxWidth: '300px'}}>
+      <Dropdown
+        {...args}
+        startAdornment={<Icon name={SvgFilter} />}
+      >
+        <ListSubheader>&lt; All Billing Statuses &gt;</ListSubheader>
+        <MenuItem value={1}>Billable - All</MenuItem>
+        <MenuItem value={2}>Billable - Next Invoice</MenuItem>
+        <MenuItem value={3}>Billable - Later Invoice</MenuItem>
+        <MenuItem value={4}>Not Billable</MenuItem>
+        <MenuItem value={5}>Billed - All</MenuItem>
+        <MenuItem value={6}>Deleted</MenuItem>
+      </Dropdown>
+      </div>
+    )}
+  </Story>
+</Canvas>
+
+### Select Style (Web)
+
+<Canvas>
+  <Story name="Select style" args={{
+    defaultValue: "1",
+    variant: 'select',
+    align: 'left'
+    }}>
+    {(args) => (
+      <div style={{ margin: '3rem', display: 'flex', justifyContent: 'flex-end', maxWidth: '500px' }}>
+        <Box mr={2}>
+          <Dropdown
+            {...args}
+            startAdornment={<Icon name={SvgUser} />}
+          >
+            <ListSubheader>&lt; All Billing Statuses &gt;</ListSubheader>
+            <MenuItem value={1}>Billable - All</MenuItem>
+            <MenuItem value={2}>Billable - Next Invoice</MenuItem>
+            <MenuItem value={3}>Billable - Later Invoice</MenuItem>
+            <MenuItem value={4}>Not Billable</MenuItem>
+            <MenuItem value={5}>Billed - All</MenuItem>
+            <MenuItem value={6}>Deleted</MenuItem>
+          </Dropdown>
+        </Box>
+        <Box>
+          <Dropdown
+            {...args}
+            size='large'
+            startAdornment={<Icon name={SvgUser} />}
+          >
+            <ListSubheader>&lt; All Billing Statuses &gt;</ListSubheader>
+            <MenuItem value={1}>Billable - All</MenuItem>
+            <MenuItem value={2}>Billable - Next Invoice</MenuItem>
+            <MenuItem value={3}>Billable - Later Invoice</MenuItem>
+            <MenuItem value={4}>Not Billable</MenuItem>
+            <MenuItem value={5}>Billed - All</MenuItem>
+            <MenuItem value={6}>Deleted</MenuItem>
+          </Dropdown>
+        </Box>
+      </div>
+    )}
+  </Story>
+</Canvas>
+
+## Properties
+
+<ArgsTable story="Default" />

package/src/Dropdown/Dropdown.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Select } from '@mui/material';
+import { Input } from '../Input';
+import clsx from 'clsx';
+import { DropdownProps } from './Dropdown.types';
+
+// const useStyles = makeStyles(() => createStyles({
+//   root: {
+//     width: (props: {width: number}) => props.width ? props.width : ''
+//   },
+//   paper: {
+//     width: (props: {width: number}) => props.width ? props.width : '',
+//     boxSizing: 'border-box'
+//   }
+// }))
+
+export const Dropdown: React.FC<DropdownProps> = (props: DropdownProps) => {
+  const {
+    children,
+    elevation = 3,
+    align = 'right',
+    label,
+    width,
+    size = 'medium',
+    disabled,
+    variant = 'dropdown',
+    fullWidth,
+    ...rest
+  } = props;
+
+  const isDefinedWidth = (definedWidth: number | undefined) => {
+    return typeof definedWidth !== 'undefined'
+      ? 'MuiInputBase-definedWidth'
+      : '';
+  };
+
+  return (
+    <Select
+      MenuProps={{
+        elevation: elevation,
+        anchorOrigin: { vertical: 'bottom', horizontal: align },
+        transformOrigin: { vertical: 'top', horizontal: align },
+        transitionDuration: 0,
+        classes: {
+          list: `${rest.multiple ? 'customMultipleList' : ''} customDropdown`,
+        },
+      }}
+      input={
+        <Input
+          size={size}
+          label={label}
+          fullWidth={fullWidth}
+          disabled={disabled}
+        />
+      }
+      className={clsx(
+        'customSelectInputBackground',
+        `custom${variant}`,
+        `${isDefinedWidth(width)}`,
+        fullWidth ? 'gds-select-fullwidth' : ''
+      )}
+      sx={{
+        width: width,
+      }}
+      {...rest}
+    >
+      {children}
+    </Select>
+  );
+};
+
+export default Dropdown;

package/src/Dropdown/Dropdown.types.ts

@@ -0,0 +1,27 @@
+import { SelectProps } from '@mui/material';
+export interface DropdownProps extends Omit<SelectProps, 'variant' | 'size'> {
+  /**
+   * Dropdown panel alignment.
+   */
+  align?: 'left' | 'right';
+  /**
+   * Box shadow level.
+   */
+  elevation?: number;
+  /**
+   * Form label.
+   */
+  label?: string;
+  /**
+   * Input's height. Default to 'medium'
+   */
+  size?: 'medium' | 'large';
+  /**
+   * Set a fixed width to both the component and the dropdown panel.
+   */
+  width?: number;
+  /**
+   * Dropdown filter or select styles. Default to 'dropdown'.
+   */
+  variant?: 'dropdown' | 'select';
+}

package/src/Dropdown/index.ts

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

package/src/EmptyState/EmptyState.stories.mdx

@@ -0,0 +1,60 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'; 
+import { EmptyState } from './EmptyState';
+
+<Meta title="patterns/EmptyState" component={ EmptyState } />
+
+# EmptyState
+
+EmptyState component spans to 100% of its container's height. Please note that the container or root container must have a height for it to work.
+
+<Canvas withToolbar>
+  <Story name="Default" args={{title: 'Nothing found', icon: 'Icon', description: 'Try expanding your date range for more activities'}}>
+    {args => 
+    <div style={{height: '30vh', border: '1px solid #eee'}}>
+      <EmptyState {...args}> </EmptyState>
+    </div>}
+  </Story>
+</Canvas>
+
+
+<Canvas withToolbar>
+  <Story name="Document" args={{variant: "document", title: 'No Documents found', description: 'There are currenlty no documents'}}>
+    {args => 
+    <div style={{height: '30vh', border: '1px solid #eee'}}>
+      <EmptyState {...args}> </EmptyState>
+    </div>}
+  </Story>
+</Canvas>
+
+
+<Canvas withToolbar>
+  <Story name="Matter" args={{variant: "matter", title: 'No Matters Found', description: 'Try to search another name or matter description.'}}>
+    {args => 
+    <div style={{height: '30vh', border: '1px solid #eee'}}>
+      <EmptyState {...args}> </EmptyState>
+    </div>}
+  </Story>
+</Canvas>
+
+
+<Canvas withToolbar>
+  <Story name="Appointment" args={{variant: "appointment", title: 'No Appointments Available', description: 'Try expanding your date range for more activities'}}>
+    {args => 
+    <div style={{height: '30vh', border: '1px solid #eee'}}>
+      <EmptyState {...args}> </EmptyState>
+    </div>}
+  </Story>
+</Canvas>
+
+<Canvas withToolbar>
+  <Story name="Transaction" args={{variant: "transaction", title: 'No transactions found', description: 'Try to another time or refine the filter criteria'}}>
+    {args => 
+    <div style={{height: '30vh', border: '1px solid #eee'}}>
+      <EmptyState {...args}> </EmptyState>
+    </div>}
+  </Story>
+</Canvas>
+
+## Properties
+
+<ArgsTable story="Default" />

package/src/EmptyState/EmptyState.styled.ts

@@ -0,0 +1,20 @@
+import { Box, Typography, styled } from "@mui/material"
+
+export const EmptyStateContainer = styled(Box)(({ theme }) => ({
+    height: '100%',
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    textAlign: 'center',
+    color: '#58595b',
+    fontFamily: theme.platform.name === 'lawconnect'? 'Inter, sans-serif' : 'Open Sans, sans-serif',
+}))
+
+export const EmptyStateTitle = styled(Typography)(({ theme }) => ({
+    color: theme.platform.name === "lawconnect" ? theme.palette.text.primary : theme.palette.primary.light,
+    textTransform: 'none',
+    margin: 0,
+    padding: 0,
+}))

package/src/EmptyState/EmptyState.test.tsx

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

package/src/EmptyState/EmptyState.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { Box, Typography, useTheme, type Theme } from '@mui/material';
+
+import { EmptyStateContainer, EmptyStateTitle } from './EmptyState.styled';
+import { EmptyStateProps } from './EmptyStateProps.types';
+import { Icon } from '../Icon';
+import {type EmptyState as IEmptyState} from '../Theme/custom-types/component-emptystate';
+
+type IconProps = {
+  emptyState: IEmptyState;
+  variant?: string;
+};
+
+export const EmptyState: React.FC<EmptyStateProps> = (
+  props: EmptyStateProps
+) => {
+  const { title, description, variant } = props;
+  const EmptyStateIcon = (iconProps: IconProps) => {
+    const { emptyState, variant } = iconProps;
+    const themeIcons = emptyState.icons;
+    let icon;
+    switch (variant) {
+      case 'document':
+        icon = (
+          <Icon
+            sx={{ fontSize: '160px !important' }}
+            name={themeIcons?.document}
+          />
+        );
+        break;
+      case 'matter':
+        icon = (
+          <Icon
+            sx={{ fontSize: '160px !important' }}
+            name={themeIcons?.matter}
+          />
+        );
+        break;
+      case 'appointment':
+        icon = (
+          <Icon
+            sx={{ fontSize: '160px !important' }}
+            name={themeIcons?.appointment}
+          />
+        );
+        break;
+      case 'transaction':
+        icon = (
+          <Icon
+            sx={{ fontSize: '160px !important' }}
+            name={themeIcons?.transaction}
+          />
+        );
+        break;
+      case 'default':
+        icon = (
+          <Icon
+            sx={{ fontSize: '160px !important' }}
+            name={themeIcons?.default}
+          />
+        );
+        break;
+      default:
+        icon = (
+          <Icon
+            sx={{ fontSize: '160px !important' }}
+            name={themeIcons?.default}
+          />
+        );
+        break;
+    }
+    return icon;
+  };
+  const theme = useTheme();
+  return (
+    <EmptyStateContainer>
+      <EmptyStateIcon variant={variant} emptyState={theme.emptyState} />
+      <EmptyStateTitle
+        sx={{ marginTop: 2 }}
+        variant={theme.platform.name === 'lawconnect' ? 'subtitle1' : 'h2'}
+      >
+        {title}
+      </EmptyStateTitle>
+      {description && (
+        <Box mt={1}>
+          <Typography
+            color="textSecondary"
+            variant={theme.platform.name === 'lawconnect' ? 'body2' : 'body1'}
+          >
+            {description}
+          </Typography>
+        </Box>
+      )}
+    </EmptyStateContainer>
+  );
+};
+
+export default EmptyState;

package/src/EmptyState/EmptyStateProps.types.tsx

@@ -0,0 +1,6 @@
+export interface EmptyStateProps {
+  title?: string
+  description?: string
+  variant?: "default" | "document" | "matter" | "appointment" | "transaction"
+  children?: React.ReactNode
+}

package/src/EmptyState/index.ts

@@ -0,0 +1,2 @@
+export * from './EmptyStateProps.types';
+export * from './EmptyState';

package/src/FooterActions/FooterActions.stories.mdx

@@ -0,0 +1,75 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'; 
+import { FooterActions } from './FooterActions';
+import { Button } from "../Button";
+
+<Meta title="patterns/FooterActions" component={ FooterActions } />
+
+# Footer Actions
+Footer Actions serves as a wrapper component for most form actions. Add button components to suit your needs.
+
+<Canvas withToolbar>
+  <Story name="Default" args={{}}>
+    {args => (
+        <FooterActions {...args}>
+            <Button variant="contained" color="primary">
+                Send
+            </Button>
+            <Button variant="outlined" color="inherit">
+                Save &amp; Close
+            </Button>
+            <Button variant="outlined" color="inherit">
+                cancel
+            </Button> 
+        </FooterActions>
+    )}
+  </Story>
+</Canvas>
+
+### Columns
+`FooterActions` has `<FooterActions.Left>` and `<FooterActions.Right>`, which are column flex box themselves.
+
+<Canvas withToolbar>
+  <Story name="Columns" args={{}}>
+    {args => ( 
+        <FooterActions {...args}>
+          <FooterActions.Left>
+            <Button variant="outlined" color="inherit">
+                Send Response
+            </Button>
+          </FooterActions.Left>
+          <FooterActions.Right>
+            <Button variant="outlined" color="inherit">
+                Close
+            </Button>
+          </FooterActions.Right>
+        </FooterActions> 
+    )}
+  </Story>
+</Canvas>
+
+
+### Size
+Using the `size` property, chose form `medium`, `small`. `medium` is set as the default size.
+
+<Canvas withToolbar>
+  <Story name="Size" args={{size: 'small'}}>
+    {args => ( 
+        <FooterActions {...args}>
+          <FooterActions.Left>
+            <Button variant="outlined" color="inherit">
+                Send Response
+            </Button>
+          </FooterActions.Left>
+          <FooterActions.Right>
+            <Button variant="outlined" color="inherit">
+                Close
+            </Button>
+          </FooterActions.Right>
+        </FooterActions> 
+    )}
+  </Story>
+</Canvas>
+
+## Properties
+
+<ArgsTable story="Default" />