@galaxy-ds/core 2.0.12 → 2.0.14

package/src/RibbonButtonGroup/RibbonButtonGroup.stories.mdx

@@ -1,147 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs"
-import { 
-  NewEntryRibbonIcon, 
-  CalendarRibbonIcon, 
-  DeleteRibbonIcon, 
-  MatterFolderRibbonIcon 
-} from "../Icons/leap";
-import { Divider } from "../Divider";
-import { RibbonButton } from "../RibbonButton";
-import { RibbonButtonGroup } from "./RibbonButtonGroup"
-import { RibbonButtonGroupMenuExample } from "./RibbonButtonGroupMenuExample"
-
-<Meta title="components/Buttons/RibbonButtonGroup" component={RibbonButtonGroup}  />
-
-# RibbonButtonGroup
-
-<Canvas withToolbar>
-  <Story
-    name="Default"
-  >
-    {() => (
-      <RibbonButtonGroup icon={<NewEntryRibbonIcon />} label="New Entry" />
-    )}
-  </Story>
-</Canvas>
-
-<Canvas withToolbar>
-  <Story
-    name="Wrapped"
-  >
-    {() => (
-      <RibbonButtonGroup icon={<MatterFolderRibbonIcon />} label="Open Matter"  isWrapped />
-    )}
-  </Story>
-</Canvas>
-
-<Canvas withToolbar>
-  <Story
-    name="Toolbar"
-  >
-    {() => (
-      <div style={{ display: 'flex', alignItems: 'center' }}>
-        <RibbonButtonGroup icon={<NewEntryRibbonIcon />} label="New Entry" isWrapped />
-          <Divider orientation="vertical" sx={{ '&.MuiDivider-root': { height: '70px' }}} />
-        <RibbonButton icon={<CalendarRibbonIcon />} label="11th October" isWrapped />
-          <Divider orientation="vertical" sx={{ '&.MuiDivider-root': { height: '70px' }}} />
-        <RibbonButton icon={<DeleteRibbonIcon />} label="Delete" />
-          <Divider orientation="vertical" sx={{ '&.MuiDivider-root': { height: '70px' }}} />
-        <RibbonButton icon={<MatterFolderRibbonIcon />} label="Open Matter" isWrapped />
-      </div>
-    )}
-  </Story>
-</Canvas>
-
-<Canvas withToolbar>
-  <Story
-    name="Menu"
-     parameters={{
-      docs: {
-        source: {
-        code: `export const RibbonButtonGroupMenuExample = () => {
-          const menuOptions = [
-          'Time fee',
-          'Time fee (Last Matter)',
-          'Time fee (Duplicate selected)',
-          ];
-          const anchorRef = useRef<HTMLDivElement>(null);
-          const [open, setOpen] = useState(false);
-          const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
-          const handleToggle = () => {
-            setOpen((prevOpen) => !prevOpen);
-          };
-          const handleMenuItemClick = (
-            _event: React.MouseEvent<HTMLLIElement, MouseEvent>,
-            index: number
-          ) => {
-            setSelectedIndex(index);
-            setOpen(false);
-          };
-          
-          const handleClose = () => {
-            setOpen(false);
-          };
-          const handleOnClick = (event) => {
-            return console.log(event);
-          };
-        return (
-              <>
-                <RibbonButtonGroup
-                  icon={<NewEntryRibbonIcon />}
-                  label="New Entry"
-                  ref={anchorRef}
-                  onClick={handleOnClick}
-                  onToggle={handleToggle}
-                  // conditional styling based on menu child open state like leap desktop
-                  sx={{
-                    ...(open && {
-                      '&.MuiButtonGroup-root': {
-                        backgroundColor: '#DDE7F3',
-                        borderColor: '#9DC9F4',
-                        '& .carat': {
-                          backgroundColor: '#C7DEF3',
-                          borderLeftColor: '#9DC9F4',
-                        },
-                      },
-                    }),
-                  }}
-                />
-                <Menu
-                  system
-                  anchorEl={anchorRef.current}
-                  open={open}
-                  onClose={handleClose}
-                >
-                  {menuOptions.map((item, index) => {
-                    return (
-                      <MenuItem
-                        key={index}
-                        selected={index === selectedIndex}
-                        startIcon={
-                          index === selectedIndex ? <Icon name={SvgTick} /> : null
-                        }
-                        system
-                        onClick={(event) => {
-                          handleMenuItemClick(event, index);
-                        }}
-                      >
-                        {item}
-                      </MenuItem>
-                    );
-                  })}
-                </Menu>
-              </>
-            );
-          };
-        `
-        }
-      }
-    }}
-  >
-    {() => (
-      <RibbonButtonGroupMenuExample />
-    )}
-  </Story>
-</Canvas>
-
-<ArgsTable story="Default" />

package/src/RibbonButtonGroup/RibbonButtonGroup.styled.tsx

@@ -1,73 +0,0 @@
-import { styled } from '@mui/material/styles';
-import Button from '@mui/material/Button';
-import ButtonGroup from '@mui/material/ButtonGroup';
-import { RibbonButton } from '../RibbonButton';
-
-export const RibbonButtonGroupStyled = styled(ButtonGroup)({
-  '&.MuiButtonGroup-root': {
-    width: 'max-content',
-    textTransform: 'capitalize',
-    border: '1px solid transparent',
-    padding: '0',
-    display: 'flex',
-    '&.carat': {
-      border: '1px solid transparent',
-    },
-    '&:hover': {
-      backgroundColor: '#DDE7F3',
-      borderColor: '#CADEF3',
-      '& .carat': {
-        borderLeftColor: '#CADEF3',
-      },
-    },
-    '&:active': {
-      borderColor: '#9DC9F4',
-      '& .carat': {
-        backgroundColor: '#C7DEF3',
-        borderLeftColor: '#9DC9F4',
-      },
-    },
-  },
-  '& .MuiButtonGroup-grouped': {
-    minWidth: 'unset',
-  },
-  '& .MuiButtonGroup-firstButton:hover': {
-    borderRightColor: '#CADEF3',
-  },
-});
-
-export const RibbonCaratWrapperStyled = styled(Button)({
-  '& .MuiButtonGroup-grouped': {
-    minWidth: 'unset',
-  },
-  '& .MuiSvgIcon-root': {
-    fontSize: '6px',
-  },
-  '&.MuiButton-root': {
-    minWidth: 'unset',
-    width: '12px',
-    textTransform: 'capitalize',
-    border: '1px solid transparent',
-    padding: '0',
-    display: 'flex',
-    '&.carat': {
-      borderLeft: '1px solid transparent',
-    },
-    '&:hover': {
-      backgroundColor: '#DDE7F3',
-    },
-    '&:active': {
-      backgroundColor: '#C7DEF3',
-      '& .carat': {
-        borderLeftColor: '#9DC9F4',
-        backgroundColor: '#C7DEF3',
-      },
-    },
-  },
-});
-
-export const RibbonButtonStyled = styled(RibbonButton)({
-  '&.MuiButton-root': {
-    border: 'none',
-  },
-});

package/src/RibbonButtonGroup/RibbonButtonGroup.test.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { NewEntryRibbonIcon } from '../Icons/leap';
-import RibbonButtonGroup from './RibbonButtonGroup';
-
-describe('RibbonButtonGroup', () => {
-  it('renders without crashing', () => {
-    render(
-      <RibbonButtonGroup icon={<NewEntryRibbonIcon />} label="New Entry" />
-    );
-  });
-});

package/src/RibbonButtonGroup/RibbonButtonGroup.tsx

@@ -1,49 +0,0 @@
-import React, { forwardRef } from 'react';
-import {
-  RibbonCaratWrapperStyled,
-  RibbonButtonGroupStyled,
-  RibbonButtonStyled,
-} from './RibbonButtonGroup.styled';
-import {
-  RibbonButtonGroupProps,
-  RibbonButtonGroupRef,
-} from './RibbonButtonGroup.types';
-import { CaratIcon } from '../Icons/leap';
-
-export const RibbonButtonGroup = forwardRef<
-  RibbonButtonGroupRef,
-  RibbonButtonGroupProps
->(function RibbonButtonGroup(props, ref) {
-  const { icon, label, isWrapped, onToggle, onClick, ...rest } = props;
-
-  return (
-    <RibbonButtonGroupStyled
-      variant="outlined"
-      disableRipple
-      ref={ref}
-      {...rest}
-    >
-      <RibbonButtonStyled
-        variant="outlined"
-        icon={icon}
-        label={label}
-        isWrapped={isWrapped}
-        onClick={(event) => {
-          event.stopPropagation();
-          onClick && onClick();
-        }}
-      />
-      <RibbonCaratWrapperStyled
-        className="carat"
-        onClick={(event) => {
-          event.stopPropagation();
-          onToggle && onToggle();
-        }}
-      >
-        <CaratIcon />
-      </RibbonCaratWrapperStyled>
-    </RibbonButtonGroupStyled>
-  );
-});
-
-export default RibbonButtonGroup;

package/src/RibbonButtonGroup/RibbonButtonGroup.types.ts

@@ -1,17 +0,0 @@
-import { ButtonGroupProps as MuiButtonGroupProps } from '@mui/material';
-import { RibbonButtonProps } from '../RibbonButton/RibbonButton.types';
-
-type ButtonGroupProps = MuiButtonGroupProps & RibbonButtonProps;
-
-export interface RibbonButtonGroupProps extends ButtonGroupProps {
-  /**
-   * Primary Action
-   * */
-  onClick?: () => void;
-  /**
-   * Secondary Action
-   * */
-  onToggle?: () => void;
-}
-
-export type RibbonButtonGroupRef = HTMLDivElement;

package/src/RibbonButtonGroup/RibbonButtonGroupMenuExample.tsx

@@ -1,83 +0,0 @@
-import React, { useRef, useState } from 'react';
-import { NewEntryRibbonIcon } from '../Icons/leap';
-import RibbonButtonGroup from './RibbonButtonGroup';
-import { Menu } from '../Menu';
-import { MenuItem } from '../MenuItem';
-import { Icon } from '../Icon';
-import { SvgTick } from '../Icons/lawconnect';
-
-const menuOptions = [
-  'Time fee',
-  'Time fee (Last Matter)',
-  'Time fee (Duplicate selected)',
-];
-
-export const RibbonButtonGroupMenuExample = () => {
-  const anchorRef = useRef<HTMLDivElement>(null);
-  const [open, setOpen] = React.useState(false);
-  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
-
-  const handleToggle = () => {
-    setOpen((prevOpen) => !prevOpen);
-  };
-
-  const handleMenuItemClick = (
-    _event: React.MouseEvent<HTMLLIElement, MouseEvent>,
-    index: number
-  ) => {
-    setSelectedIndex(index);
-    setOpen(false);
-  };
-
-  const handleClose = () => {
-    setOpen(false);
-  };
-
-  return (
-    <>
-      <RibbonButtonGroup
-        icon={<NewEntryRibbonIcon />}
-        label="New Entry"
-        ref={anchorRef}
-        onToggle={handleToggle}
-        // conditional styling based on menu child open state like Leap desktop
-        sx={{
-          ...(open && {
-            '&.MuiButtonGroup-root': {
-              backgroundColor: '#DDE7F3',
-              borderColor: '#9DC9F4',
-              '& .carat': {
-                backgroundColor: '#C7DEF3',
-                borderLeftColor: '#9DC9F4',
-              },
-            },
-          }),
-        }}
-      />
-      <Menu
-        system
-        anchorEl={anchorRef.current}
-        open={open}
-        onClose={handleClose}
-      >
-        {menuOptions.map((item, index) => {
-          return (
-            <MenuItem
-              key={index}
-              selected={index === selectedIndex}
-              startIcon={
-                index === selectedIndex ? <Icon name={SvgTick} /> : null
-              }
-              system
-              onClick={(event) => {
-                handleMenuItemClick(event, index);
-              }}
-            >
-              {item}
-            </MenuItem>
-          );
-        })}
-      </Menu>
-    </>
-  );
-};

package/src/RibbonButtonGroup/index.ts

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

package/src/Select/Select.stories-removed.mdx

@@ -1,84 +0,0 @@
-{/* Temporarily remove as its style doesn't match with our design system */}
-{/* // import ListItemIcon from "@mui/material/ListItemIcon"
-// import ListItemText from "@mui/material/ListItemText"
-// import MenuItem from "@mui/material/MenuItem"
-// import Typography from "@mui/material/Typography"
-// import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs"
-
-// import { Icon } from "../Icon"
-// import { SvgAccreditedSpecialist } from "../Icons/lawconnect/"
-
-// import { Select } from "./Select"
-
-// <Meta title="Form Elements/Select" component={Select} />z`
-
-// # Select
-
-// <Canvas withToolbar>
-//   <Story name="Default">
-//     <Select color="secondary" displayEmpty label="Placeholder">
-//       <em>Select</em>
-//       <MenuItem value={1}>One</MenuItem>
-//       <MenuItem value={2}>Two</MenuItem>
-//       <MenuItem value={3}>Three</MenuItem>
-//     </Select>
-//   </Story>
-// </Canvas>
-
-// <ArgsTable story="Default" />
-
-// ### Color
-
-// <Canvas>
-//   <Story name="Color" args={{}}>
-//     {(args) => (
-//       <div>
-//         <Select {...args} displayEmpty color="secondary">
-//           <em>Placeholder</em>
-//           <MenuItem value={"Selected Value 1"}>Item 1</MenuItem>
-//           <MenuItem value={"Selected Value 2"}>Item 2</MenuItem>
-//         </Select>
-//         <br />
-//         <br />
-//         <Select {...args} displayEmpty variant="filled" color="info">
-//           <em>Placeholder</em>
-//           <MenuItem value={"Selected Value 1"}>Item 1</MenuItem>
-//           <MenuItem value={"Selected Value 2"}>Item 2</MenuItem>
-//         </Select>
-//         <br />
-//         <br />
-//         <Select {...args} displayEmpty variant="filled" color="success" sx={{ maxWidth: "200px" }}>
-//           <em>Placeholder</em>
-//           <MenuItem value={"Selected Value 1"}>Item 1</MenuItem>
-//           <MenuItem value={"Selected Value 2"}>Item 2</MenuItem>
-//         </Select>
-//         <br />
-//         <br />
-//         <Select {...args} displayEmpty variant="filled" color="error" sx={{ maxWidth: "200px" }}>
-//           <em>Placeholder</em>
-//           <MenuItem value={"Selected Value 1"}>Item 1</MenuItem>
-//           <MenuItem value={"Selected Value 2"}>Item 2</MenuItem>
-//         </Select>
-//       </div>
-//     )}
-//   </Story>
-// </Canvas>
-
-// ### Disabled
-
-// <Canvas>
-//   <Story name="Disabled" args={{}}>
-//     {(args) => (
-//       <div>
-//         <Select {...args} displayEmpty disabled>
-//           <em>Placeholder</em>
-//         </Select>
-//         <br />
-//         <br />
-//         <Select {...args} displayEmpty variant="filled" disabled>
-//           <em>Placeholder</em>
-//         </Select>
-//       </div>
-//     )}
-//   </Story>
-// </Canvas> */}

package/src/Select/Select.styled.tsx

@@ -1,40 +0,0 @@
-import { Select as MuiSelect } from '@mui/material';
-import { styled } from '@mui/material/styles';
-
-export const SelectStyled = styled(MuiSelect)(({ theme }) => ({
-  borderRadius: theme.shapes.card,
-  height: 40,
-
-  select: {
-    padding: '0 16px',
-    height: 40,
-    lineHeight: '40px',
-    display: 'flex',
-    alignItems: 'center',
-    '& .MuiTypography-root': {
-      fontWeight: 'inherit',
-    },
-    '&.MuiInputBase-input, &.MuiOutlinedInput-input': {
-      paddingRight: '44px',
-      paddingTop: 0,
-    },
-    '&.MuiInputBase-input.MuiFilledInput-input': {},
-    '&.MuiInputBase-input': {
-      '&.MuiFilledInput-input': {
-        '&:focus': {
-          backgroundColor: 'transparent',
-        },
-      },
-    },
-  },
-  '& .MuiFilledInput-input': {
-    paddingTop: '8px',
-    '&:focus': {
-      backgroundColor: 'transparent',
-    },
-  },
-
-  legend: {
-    display: 'none',
-  },
-}));

package/src/Select/Select.test.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { Select } from './Select';
-
-describe('Select', () => {
-  it('renders without crashing', () => {
-    render(<Select />);
-  });
-});

package/src/Select/Select.tsx

@@ -1,11 +0,0 @@
-import { SelectStyled } from './Select.styled';
-
-import SvgChevronDownLg from '../Icons/lawconnect/ChevronDownLg';
-
-import { SelectProps } from './Select.types';
-
-export const Select = (props: SelectProps) => {
-  return <SelectStyled IconComponent={SvgChevronDownLg} {...props} />;
-};
-
-export default Select;

package/src/Select/Select.types.ts

@@ -1,3 +0,0 @@
-import { SelectProps as MuiSelectProps } from '@mui/material';
-
-export interface SelectProps extends MuiSelectProps {}

package/src/Select/index.ts

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

package/src/SidebarLayout/SidebarLayout.stories.mdx

@@ -1,59 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'; 
-import { SidebarLayout } from './SidebarLayout';
-
-
-<Meta title="Layouts/SidebarLayout" component={ SidebarLayout } />
-
-# Sidebar Layout
-`SidebarLayout` has `<SidebarLayout.Sidebar>` and `<SidebarLayout.Main>`, which are column flex box themselves.
-
-Sidebar width and background color are configurable.
-
-```javascript
-import SidebarLayout from "@galaxy-ds/core";
-```
-
-<Canvas withToolbar>
-  <Story name="Default" args={{}}>
-    {args => (
-      <div style={{ height: '500px' }}>
-        <SidebarLayout {...args}>
-          <SidebarLayout.Sidebar>Sidebar</SidebarLayout.Sidebar>
-          <SidebarLayout.Main>Main</SidebarLayout.Main>
-        </SidebarLayout>
-      </div>
-    )}
-  </Story>
-</Canvas>
-
-<ArgsTable story="Default" />
-
-### Change Sidebar Width
-
-<Canvas>
-  <Story name="Sidebar Width" args={{ sidebarWidth: 300 }}>
-    {args => (
-      <div style={{ height: '500px' }}>
-        <SidebarLayout {...args}>
-          <SidebarLayout.Sidebar>Sidebar</SidebarLayout.Sidebar>
-          <SidebarLayout.Main>Main</SidebarLayout.Main>
-        </SidebarLayout>
-      </div>
-    )}
-  </Story>
-</Canvas>
-
-### Change Sidebar Background Color
-
-<Canvas>
-  <Story name="Sidebar Color" args={{ sidebarBgColor: '#ccc' }}>
-    {args => (
-      <div style={{ height: '500px' }}>
-        <SidebarLayout {...args}>
-          <SidebarLayout.Sidebar>Sidebar</SidebarLayout.Sidebar>
-          <SidebarLayout.Main>Main</SidebarLayout.Main>
-        </SidebarLayout>
-      </div>
-    )}
-  </Story>
-</Canvas>

package/src/SidebarLayout/SidebarLayout.styled.tsx

@@ -1,19 +0,0 @@
-import { styled } from "@mui/material/styles"
-import { Box } from '../Box'
-
-export const SidebarWrapper = styled(Box)`
-  height: 100%;
-  overflow: hidden;
-`
-export const SidebarMain = styled(Box)`
-  flex: auto;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-`
-
-export const SidebarSide = styled(Box)`
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-`

package/src/SidebarLayout/SidebarLayout.test.tsx

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

package/src/SidebarLayout/SidebarLayout.tsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import { SidebarLayoutProps } from './SidebarLayout.types';
-
-import {
-  SidebarWrapper,
-  SidebarSide,
-  SidebarMain,
-} from './SidebarLayout.styled';
-
-const Sidebar = () => null;
-const Main = () => null;
-
-export const SidebarLayout: any = ({
-  children,
-  sidebarWidth = 260,
-  sidebarBgColor = '#f3f3f3',
-}: SidebarLayoutProps) => {
-  const sidebar = children.find(
-    (el: React.ReactElement) => el.type === Sidebar
-  );
-  const main = children.find((el: React.ReactElement) => el.type === Main);
-  return (
-    <SidebarWrapper display="flex">
-      <SidebarSide bgcolor={sidebarBgColor} width={sidebarWidth}>
-        {sidebar && sidebar.props.children}
-      </SidebarSide>
-      <SidebarMain>{main && main.props.children}</SidebarMain>
-    </SidebarWrapper>
-  );
-};
-
-SidebarLayout.Sidebar = Sidebar;
-SidebarLayout.Main = Main;
-
-export default SidebarLayout;