@galaxy-ds/core 1.1.81 → 2.0.0

package/src/ActivityLog/ActivityLog.stories.mdx

@@ -0,0 +1,180 @@
+
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import ActivityLog from "./ActivityLog";
+import { Chip } from "../Chip";
+
+<Meta
+  title="Components/Lists/ActivityLog"
+  component={ActivityLog}
+/>
+
+# Activity Log
+Activity log list item displays in both the activity log and the attachment list.
+
+```javascript
+import ActivityLog from "@galaxy-ds/core";
+```
+
+<Canvas withToolbar>
+  <Story name="Default" args={{
+    name: 'Created Letter of Demand',
+    avatarGroupTooltip: "Stan Tamar (Responsible), Laura Tamar and Jess Xao",
+    time: '9hr 35min',
+    ext: 'doc',
+    attachment: true,
+    action: [
+        {label: 'modified', variant: ''},
+        {label: 'created', variant: ''},
+        {label: 'attachment', variant: ''}
+    ],
+    users: [
+        {name: 'Firstname LastName', initials: 'FL'}
+    ],
+  }}>
+    {args => <ActivityLog {...args}/>}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Default" />
+
+## Stories
+
+### Actions
+Actions show the the action types that were performed by the fee earners as a chip. Set `modified`, `created`, `viewed` to `true` to show the action.
+
+<Canvas withToolbar>
+  <Story name="Actions" args={{
+    name: 'Created Letter of Demand',
+    time: '9hr 35min',
+    ext: 'doc',
+    attachment: true,
+    action: [
+        {label: 'modified', variant: 'primary'},
+        {label: 'created', variant: 'primary'},
+        {label: 'attachment', variant: 'primary'}
+    ],
+    users: [
+        {name: 'Firstname Lastname', initials: 'FL'},
+        {name: 'Firstname Lastname', initials: 'FL'},
+        {name: 'Firstname Lastname', initials: 'FL'}
+    ],
+    avatarGroupTooltip: 'Other names'
+  }}>
+    {args => <ActivityLog {...args}/>}
+  </Story>
+</Canvas>
+
+### Custom Actions
+Actions show the the action types that were performed by the fee earners as a chip.
+
+<Canvas withToolbar>
+  <Story name="CustomActions" args={{
+    name: 'Created Letter of Demand',
+    time: '9hr 35min',
+    ext: 'doc',
+    attachment: true,
+    action: [
+        {label: 'info', variant: 'info'},
+        {label: 'danger', variant: 'danger'},
+        {label: 'warning', variant: 'warning'},
+        {label: 'success', variant: 'success'}
+    ],
+    users: [
+        {name: 'Firstname Lastname', initials: 'FL'},
+        {name: 'Firstname Lastname', initials: 'FL'},
+        {name: 'Firstname Lastname', initials: 'FL'}
+    ],
+    avatarGroupTooltip: 'Other names'
+  }}>
+    {args => <ActivityLog {...args}/>}
+  </Story>
+</Canvas>
+
+### Attachment
+
+Attach a file with an onAttach event. Set `attachment` to `true` to show the action. Use `onAttach` event handler for attaching documents.
+<Canvas withToolbar>
+  <Story name="Attach" args={{
+    name: 'Created Letter of Demand',
+    time: '9hr 35min',
+    ext: 'doc',
+    attachment: true,
+    users: [
+        {name: 'Firstname Lastname', initials: 'FL'},
+        {name: 'Firstname Lastname', initials: 'FL'},
+        {name: 'Firstname Lastname', initials: 'FL'}
+    ],
+    avatarGroupTooltip: 'Other names'
+  }}>
+    {args => <ActivityLog {...args}/>}
+  </Story>
+</Canvas>
+
+### Activity
+
+<Canvas withToolbar>
+  <Story name="Activity" args={{
+    name: 'Created Letter of Demand',
+    time: '9hr 35min',
+    ext: 'doc',
+    attachment: true,
+    action: [
+        {label: 'info', variant: 'info'},
+        {label: 'default', variant: 'default'},
+        {label: 'danger', variant: 'danger'},
+        {label: 'warning', variant: 'warning'},
+        {label: 'success', variant: 'success'}
+    ],
+    avatarGroupTooltip: 'Other names'
+  }}>
+    {args => <ActivityLog {...args}/>}
+  </Story>
+</Canvas>
+
+
+### Hover & Tooltip
+Set `hover` to `true` to enable hover and a tooltip shown on hovering over activity name.
+
+Tooltip text specified by `tooltip` property, default to 'Preview'.
+
+<Canvas>
+  <Story name="Hover & Tooltip" args={{
+    name: 'Created Letter of Demand',
+    time: '9hr 35min',
+    ext: 'doc',
+    attachment: true,
+    action: [
+        {label: 'info', variant: 'info'},
+        {label: 'default', variant: 'default'},
+        {label: 'danger', variant: 'danger'},
+        {label: 'warning', variant: 'warning'},
+        {label: 'success', variant: 'success'}
+    ],
+    hover: true,
+  }}>
+    {args => <ActivityLog {...args}/>}
+  </Story>
+</Canvas>
+
+### Icon URL
+Use `iconURL` to set the activity icon image. If `iconURL` is `undefined`, it will fallback to the attachment icon specified by `ext` prop, which is default to 'doc' itself. Available from v1.1.42.
+
+<Canvas>
+  <Story name="Icon URL" args={{
+    name: 'Created Letter of Demand',
+    time: '9hr 35min',
+    ext: 'activitydefault',
+    iconURL: 'https://public.test.console.leap.build/14bbc6b5-40d6-4bd8-bf9f-3eb762b0d7a6/images/5669bec0-ebf0-4593-82fb-1f8b006afc03.png',
+    attachment: true,
+    action: [
+        {label: 'info', variant: 'info'},
+        {label: 'default', variant: 'default'},
+        {label: 'danger', variant: 'danger'},
+        {label: 'warning', variant: 'warning'},
+        {label: 'success', variant: 'success'}
+    ],
+    hover: true,
+  }}>
+    {args => <ActivityLog {...args}/>}
+  </Story>
+</Canvas>

package/src/ActivityLog/ActivityLog.styled.ts

@@ -0,0 +1,85 @@
+import { Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+import { ListItem } from '../ListItem/ListItem';
+import { ListItemIcon } from '../ListItemIcon/ListItemIcon';
+import { ListItemText } from '../ListItemText/ListItemText';
+
+export const MuiListItem = styled(ListItem)(({theme}) => ({
+    width: '100%',
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    paddingLeft: 10,
+    paddingRight: 10,
+    minHeight: 44,
+}))
+
+export const MuiListItemICon = styled(ListItemIcon)(() => ({
+  alignSelf: 'flex-start',
+  "&.prependIcon": {
+    marginTop: 4,
+    width: 16,
+    height: 16,
+    minWidth: 16,
+    marginRight: 10,
+    "& .MuiSvgIcon-root": {
+      fontSize: 16
+    },
+    "& .MuiButtonBase-root": {
+      padding: 0,
+      backgroundColor: 'transparent',
+    }
+  },
+  "&.docTypeIcon": {
+    minWidth: 16,
+    marginRight: 10,
+    "& .MuiSvgIcon-root": {
+      fontSize: 24
+    }
+  },
+}))
+
+export const MuiListItemText = styled(ListItemText)(() => ({
+  marginTop: 0,
+  marginBottom: 0,
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'wrap',
+  "&:hover": { 
+    cursor: 'pointer',
+  },
+  "& .MuiTypography-body1": {
+    "&:hover": {
+      cursor: 'pointer'
+    }
+  },
+  "& .MuiListItemText-primary": {
+    display: 'flex'
+  },
+}))
+
+export const ActivityLogChips = styled("div")(() => ({
+  width: '100%',
+  "& .MuiChip-root": {
+    marginRight: 5,
+  },
+  "& .MuiChip-root:last-child": {
+    marginRight: 0,
+  }
+}))
+
+export const ActivityLogMainName = styled(Typography)(() => ({
+  flex: 'auto'
+}))
+
+export const ActivityLogTime = styled("div")(() => ({
+  alignSelf: 'flex-start',
+  maxWidth: 80,
+  minWidth: 80,
+  marginLeft: 5,
+  textAlign: 'right',
+  whiteSpace: 'nowrap'
+}))
+
+export const ActivityLogGroup = styled("div")(() => ({
+  alignSelf: 'flex-start'
+}))

package/src/ActivityLog/ActivityLog.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+
+import AttachmentIcon from '../AttachmentIcon/AttachmentIcon';
+import { Avatar } from '../Avatar/Avatar';
+import { AvatarGroup } from '../AvatarGroup/AvatarGroup';
+import Chip from '../Chip/Chip';
+import { Icon } from '../Icon/Icon';
+import { IconButton } from '../IconButton/IconButton';
+import { SvgArrowLeft } from '../Icons/lawconnect';
+import { Tooltip } from '../Tooltip/Tooltip';
+import { Typography } from '../Typography/Typography';
+import {
+  ActivityLogChips,
+  ActivityLogGroup,
+  ActivityLogMainName,
+  ActivityLogTime,
+  MuiListItem,
+  MuiListItemICon,
+  MuiListItemText,
+} from './ActivityLog.styled';
+import { ActivityLogProps } from './ActivityLog.types';
+
+export const ActivityLog: React.FC<ActivityLogProps> = (props: ActivityLogProps) => {
+  const { name, time, ext, iconURL, onAttach, onClick, users, attachment, action, avatarGroupTooltip, insertIconTooltip='Insert', hover, tooltip='Preview', nameRef = undefined, ...defaultProps } = props;
+
+  return (
+    <MuiListItem {...defaultProps}>
+      <MuiListItemICon
+        className={
+          'prependIcon'
+        }
+      >
+        {attachment ? (
+          <Tooltip title={insertIconTooltip}>
+            <IconButton onClick={onAttach}>
+              <Icon name={SvgArrowLeft} />
+            </IconButton>
+          </Tooltip>
+        ) : (
+          ''
+        )}
+      </MuiListItemICon>
+
+      <MuiListItemICon
+        className={
+          'docTypeIcon'
+        }>
+        {iconURL ? (
+          <img src={iconURL} style={{maxWidth: '24px'}} />
+          ) : (
+          <AttachmentIcon ext={ext} />
+        )}
+      </MuiListItemICon>
+      <MuiListItemText
+        disableTypography
+        onClick={onClick}
+        secondary={
+          action && (
+            <ActivityLogChips>
+              {action.map((tag: any) => (
+                <Chip label={tag.label} key={tag.label} variant={tag.variant} />
+              ))}
+            </ActivityLogChips>
+          )
+        }
+      >
+        {hover ? (
+          <Tooltip title={tooltip}>
+            <ActivityLogMainName
+              ref={nameRef}
+              noWrap
+              variant="subtitle1"
+              color="primary"
+            >
+              {name}
+            </ActivityLogMainName>
+          </Tooltip>
+        ) : (
+          <ActivityLogMainName
+            ref={nameRef}
+            noWrap
+            variant="subtitle1"
+            color="primary"
+            >
+            {name}
+          </ActivityLogMainName>
+        )}
+
+        {users ? (
+          <ActivityLogGroup>
+            <AvatarGroup
+              max={2}
+              size="small"
+              tooltip={avatarGroupTooltip}
+              tooltipPlacement="bottom-end"
+            >
+              {users.map((person: any) => (
+                <Avatar
+                  color="default"
+                  size="small"
+                  tooltip={person.name}
+                  key={person.initials}
+                >
+                  {person.initials}
+                </Avatar>
+              ))}
+            </AvatarGroup>
+          </ActivityLogGroup>
+        ) : (
+          ''
+        )}
+        <ActivityLogTime>
+          <Typography variant="body1">{time}</Typography>
+        </ActivityLogTime>
+      </MuiListItemText>
+    </MuiListItem>
+  );
+}
+export default ActivityLog;

package/src/ActivityLog/ActivityLog.types.ts

@@ -0,0 +1,18 @@
+import React from "react";
+
+export interface ActivityLogProps {
+    name?: string;
+    nameRef?: React.MutableRefObject<any>;
+    time?: string;
+    ext?: string;
+    iconURL?: string;
+    users?: any;
+    action?: any;
+    attachment?: boolean;
+    avatarGroupTooltip?: string;
+    hover?: boolean;
+    tooltip?: string;
+    insertIconTooltip?: string;
+    onAttach?: (e: any) => void;
+    onClick?: (e: any) => void;
+}

package/src/ActivityLog/index.ts

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

package/src/AppBar/AppBar.stories.mdx

@@ -0,0 +1,44 @@
+
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import AppBar from "./AppBar";
+
+<Meta
+  title="patterns/AppBar"
+  component={AppBar}
+/>
+
+# AppBar
+The LEAP App Bar displays title relating to the current screen and actions including logout and drawer.
+
+```javascript
+import AppBar from "@galaxy-ds/core";
+```
+
+
+<Canvas withToolbar>
+  <Story name="Default" args={{title: 'Galaxy Design System', user: {firstName: 'Mark', lastName: 'Jobs', email: 'email@email.com'}}}>
+    {args => 
+      <AppBar {...args} onDrawerToggle={() => (console.log('open drawer'))}>
+      </AppBar>}
+  </Story>
+</Canvas>
+
+
+## AppBar w/ Mobile only Drawer
+<Canvas withToolbar>
+  <Story name="Mobile Drawer" args={{title: 'Galaxy Design System'}} >
+    {args => 
+      <AppBar {...args} drawerOpen onDrawerToggle={() => (console.log('open drawer'))} onLogout={() => (console.log('logout'))}>
+      </AppBar>}
+  </Story>
+</Canvas>
+
+
+## AppBar w/ No Drawer 
+<Canvas withToolbar>
+  <Story name="No Drawer" args={{title: 'Galaxy Design System'}} >
+    {args => 
+      <AppBar {...args} onLogout={() => (console.log('logout'))}>
+      </AppBar>}
+  </Story>
+</Canvas>

package/src/AppBar/AppBar.styled.tsx

@@ -0,0 +1,79 @@
+import {
+  AppBar,
+  Toolbar,
+} from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+export const Hidden = styled("div")(() => ({
+  display: 'none'
+}));
+
+export const MuiAppBar = styled(AppBar)(({theme}) => ({
+    maxHeight: 50,
+    width: '100%',
+    color: theme.palette.background.paper,
+    overflow: 'hidden',
+    "& svg": {
+      color: '#ffffff !important'
+    },
+    "& .MuiIconButton-root": {
+      width: 50,
+      height: 50,
+      maxWidth: 50,
+      maxHeight: 50,
+      borderRadius: 0,
+    },
+}));
+
+
+export const AppBarToolbar = styled(Toolbar)(() => ({
+  "&.MuiToolbar-root":{
+    minHeight: 50,
+    maxHeight: 50,
+    paddingLeft: 0,
+    paddingRight: 0,
+    display: 'flex'
+  }
+}));
+
+export const AppBarLogo= styled("div")(() => ({
+  borderRight: '1px solid rgba(0,96,172,.6)',
+  borderLeft: '1px solid rgba(0,96,172,.6)',
+  paddingLeft: '1rem',
+  paddingRight: '1rem',
+  marginRight: '1rem',
+  paddingTop: 10,
+  paddingBottom: 10,
+  height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  maxWidth: 104,
+  svg: {
+    height: 'auto',
+    width: '100%'
+  }
+}));
+
+export const AppBarUser= styled("div")(() => ({
+  borderRight: '1px solid rgba(0,96,172,.6)',
+  height: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  paddingTop: 10,
+  paddingBottom: 10,
+  paddingRight: 16,
+  paddingLeft: 16,
+  h4: {
+    marginBottom: 4,
+    lineHeight: 1,
+  },
+  p: {
+    lineHeight: 1,
+  }
+}));
+
+
+export const AppBarContent= styled("div")(() => ({
+  flexGrow: 1
+}));

package/src/AppBar/AppBar.test.tsx

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

package/src/AppBar/AppBar.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+
+import { Box } from '@mui/material';
+import useMediaQuery from '@mui/material/useMediaQuery';
+
+import Icon from '../Icon/Icon';
+import { IconButton } from '../IconButton/IconButton';
+import LeapLogo from '../Logos/Leap/LeapLogo';
+import MenuIcon from '../Icons/leap/Menu';
+import PowerIcon from '../Icons/leap/Power';
+import Typography from '../Typography/Typography';
+import {
+  AppBarContent,
+  AppBarLogo,
+  AppBarToolbar,
+  AppBarUser,
+  MuiAppBar,
+} from './AppBar.styled';
+import { AppBarProps } from './AppBar.types';
+
+const AppBar: React.FC<AppBarProps> = (props: AppBarProps) => {
+  const {
+    onDrawerToggle,
+    onLogout,
+    user,
+    position = 'sticky',
+    drawerOpen,
+  } = props;
+  const hasDrawerToggle =
+    onDrawerToggle?.name === 'onDrawerToggle' ? true : false;
+  const isMobile = useMediaQuery('(max-width:380px)');
+
+  return (
+    <MuiAppBar color="primary" position={position} elevation={0}>
+      <AppBarToolbar variant="dense">
+        {hasDrawerToggle && (
+          <Box
+            sx={{
+              display: { xs: hasDrawerToggle ? 'block' : 'none', sm: 'block' },
+            }}
+          >
+            <IconButton aria-label="open drawer" onClick={onDrawerToggle}>
+              <Icon name={MenuIcon} />
+            </IconButton>
+          </Box>
+        )}
+
+        <AppBarLogo sx={ isMobile ? {marginRight: 0, height: '3.125rem'} : {} }>
+          <Icon name={LeapLogo} />
+        </AppBarLogo>
+
+        <Box sx={{ display: { xs: 'none', sm: 'block' } }}>
+          <Typography
+            upperCase
+            color="white"
+            variant="h2"
+          >
+            {props.title}
+          </Typography>
+        </Box>
+
+        <AppBarContent>{props.children}</AppBarContent>
+        {!!props && !!props.user && (
+          <>
+            <AppBarUser sx={ isMobile ? { overflow: 'hidden', minWidth: '6.25rem'} : {} }>
+              <Typography color="white" variant="h4">
+                {user.firstName} {user.lastName}
+              </Typography>
+              <Typography color="gray" variant="body2">
+                {user.email}
+              </Typography>
+            </AppBarUser>
+            <IconButton aria-label="logout" onClick={onLogout}>
+              <Icon name={PowerIcon} />
+            </IconButton>
+          </>
+        )}
+      </AppBarToolbar>
+    </MuiAppBar>
+  );
+};
+
+export default AppBar;

package/src/AppBar/AppBar.types.tsx

@@ -0,0 +1,18 @@
+
+export interface AppBarProps {
+
+  title?: string;
+
+  children?: any;
+
+  user?: any;
+
+  drawerOpen?: boolean;
+
+  position?: 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky';
+
+  onLogout?: () => void;
+
+  onDrawerToggle?: () => void;
+
+}

package/src/AppBar/index.ts

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