@galaxy-ds/core 2.0.2 → 2.0.4

package/src/Radio/Radio.tsx

@@ -1,15 +1,14 @@
-// import { FormControlLabel, Radio as MuiRadio } from "@mui/material"
-import { Radio as MuiRadio } from "@mui/material"
+import { Radio as MuiRadio } from '@mui/material';
 
-import { MuiFormControlLabel } from "./Radio.styled"
+import { MuiFormControlLabel } from './Radio.styled';
 
-import { Icon } from "../Icon"
-import { SvgRadioChecked, SvgRadioDefault } from "../Icons/common/Forms"
+import { Icon } from '../Icon';
+import { SvgRadioChecked, SvgRadioDefault } from '../Icons/common/Forms';
 
-import { RadioProps } from "./Radio.types"
+import { RadioProps } from './Radio.types';
 
 export const Radio = (props: RadioProps) => {
-  const { label, value, ...rest } = props
+  const { label, value, ...rest } = props;
   return (
     <MuiFormControlLabel
       value={value}
@@ -17,15 +16,15 @@ export const Radio = (props: RadioProps) => {
       control={
         <MuiRadio
           value={value}
-          {...rest}
           disableRipple
           color="default"
           icon={<Icon name={SvgRadioDefault} />}
           checkedIcon={<Icon name={SvgRadioChecked} />}
+          {...rest}
         />
       }
     />
-  )
-}
+  );
+};
 
-export default Radio
+export default Radio;

package/src/RadioGroup/RadioGroup.stories.mdx

@@ -11,7 +11,15 @@ import { RadioGroup } from "@galaxy-ds/core";
 ```
 
 <Canvas withToolbar>
-    <Story name="Default">
+    <Story name="Default" parameters={{ docs: { source: { code: `
+<RadioGroup label="Area of Law">
+  <Radio value="all" label="All" />
+  <Radio value="estates" label="Estates" />
+  <Radio value="family" label="Family" />
+  <Radio value="other" label="Other" />
+  <Radio value="disabled" disabled label="(Disabled option)" />
+</RadioGroup>
+    `}}}}>
         <RadioGroup label="Area of Law">
             <Radio value="all" label="All" />
             <Radio value="estates" label="Estates" />

package/src/RadioGroup/RadioGroup.test.tsx

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

package/src/RadioGroup/RadioGroup.tsx

@@ -1,20 +1,25 @@
-import React from "react";
-import { RadioGroup as MuiRadioGroup } from "@mui/material";
-import { FormControl } from "@mui/material";
-import { FormLabel } from "@mui/material"
-import { RadioGroupProps } from './RadioGroupProps.types';
+import React from 'react';
+import {
+  RadioGroup as MuiRadioGroup,
+  FormControl,
+  FormLabel,
+} from '@mui/material';
 
-export const RadioGroup: React.FC<RadioGroupProps> = (props: RadioGroupProps) => {
-  const { label, ...rest } = props
+import { RadioGroupProps } from './RadioGroup.types';
+
+export const RadioGroup: React.FC<RadioGroupProps> = (
+  props: RadioGroupProps
+) => {
+  const { label, ...rest } = props;
 
   return (
     <FormControl component="fieldset">
-      {label ? (<FormLabel>{label}</FormLabel>) : ''}
+      {label ? <FormLabel>{label}</FormLabel> : ''}
       <MuiRadioGroup aria-label={label} {...rest}>
         {props.children}
       </MuiRadioGroup>
     </FormControl>
-  )
-}
+  );
+};
 
-export default RadioGroup
+export default RadioGroup;

package/src/RadioGroup/index.ts

@@ -1,2 +1,2 @@
-export * from './RadioGroupProps.types';
-export * from './RadioGroup';
+export * from './RadioGroup.types';
+export * from './RadioGroup';

package/src/RibbonButton/RibbonButton.stories.mdx

@@ -0,0 +1,39 @@
+import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs"
+import { NewEntryRibbonIcon, MatterFolderRibbonIcon } from "../Icons/leap";
+import { RibbonButton } from "./RibbonButton"
+
+<Meta title="components/Buttons/RibbonButton" component={RibbonButton} />
+
+# RibbonButton
+
+<Canvas withToolbar>
+  <Story
+    name="Default"
+  >
+    {() => (
+      <RibbonButton icon={<NewEntryRibbonIcon />} label="New Entry" />
+    )}
+  </Story>
+</Canvas>
+
+<Canvas withToolbar>
+  <Story
+    name="Long tail"
+  >
+    {() => (
+      <RibbonButton icon={<MatterFolderRibbonIcon />} label="Open Matter" />
+    )}
+  </Story>
+</Canvas>
+
+<Canvas withToolbar>
+  <Story
+    name="Wrapped"
+  >
+    {() => (
+      <RibbonButton icon={<MatterFolderRibbonIcon />} label="Open Matter" isWrapped />
+    )}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Default" />

package/src/RibbonButton/RibbonButton.styled.tsx

@@ -0,0 +1,60 @@
+import Button from '@mui/material/Button';
+import { styled } from '@mui/material/styles';
+import { Typography } from '../Typography';
+import { IconButton } from '../IconButton/IconButton';
+
+export const CaratWrapperStyled = styled('div')({
+  height: '80px',
+  display: 'flex',
+  alignItems: 'center',
+  borderLeft: '1px solid transparent',
+  '&:active': {
+    backgroundColor: '#9DC9F4',
+    borderColor: '#9DC9F4',
+  },
+});
+
+export const RibbonButtonStyled = styled(Button)({
+  '&.MuiButton-root': {
+    height: '80px',
+    minWidth: 'unset',
+    padding: '0 8px',
+    textTransform: 'capitalize',
+    border: '1px solid transparent',
+    display: 'flex',
+    '&.carat': {
+      borderLeft: '1px solid transparent',
+    },
+    '&:hover': {
+      backgroundColor: '#DDE7F3',
+      borderColor: '#CADEF3',
+      '& .carat': {
+        borderColor: '#CADEF3',
+      },
+    },
+    '&:active': {
+      backgroundColor: '#C7DEF3',
+      borderColor: '#9DC9F4',
+      '& .carat': {
+        borderColor: '#9DC9F4',
+      },
+    },
+  },
+});
+
+export const RibbonLabelStyled = styled(Typography)({
+  color: '#444444',
+});
+
+export const RibbonContentStyled = styled('div', {
+  shouldForwardProp: (prop) => prop !== 'isWrapped',
+})<{ isWrapped?: boolean }>(({ isWrapped }) => ({
+  ...(isWrapped && {
+    height: '80px',
+    width: '54px',
+    p: {
+      position: 'relative',
+      bottom: '8px',
+    },
+  }),
+}));

package/src/RibbonButton/RibbonButton.test.tsx

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

package/src/RibbonButton/RibbonButton.tsx

@@ -0,0 +1,22 @@
+import React, { forwardRef } from 'react';
+import {
+  RibbonButtonStyled,
+  RibbonLabelStyled,
+  RibbonContentStyled,
+} from './RibbonButton.styled';
+import { RibbonButtonProps, RibbonButtonRef } from './RibbonButton.types';
+
+export const RibbonButton = forwardRef<RibbonButtonRef, RibbonButtonProps>(
+  function RibbonMenuListButton(props, ref) {
+    return (
+      <RibbonButtonStyled ref={ref} variant="outlined" {...props}>
+        <RibbonContentStyled isWrapped={props.isWrapped}>
+          {props.icon}
+          <RibbonLabelStyled variant="body2">{props.label}</RibbonLabelStyled>
+        </RibbonContentStyled>
+      </RibbonButtonStyled>
+    );
+  }
+);
+
+export default RibbonButton;

package/src/RibbonButton/RibbonButton.types.ts

@@ -0,0 +1,12 @@
+import { ButtonProps as MuiButtonProps } from '@mui/material';
+
+export interface RibbonButtonProps extends MuiButtonProps {
+  icon: React.ReactNode;
+  label: string;
+  /**
+   * A boolean check to wrap the button label
+   * */
+  isWrapped?: boolean;
+}
+
+export type RibbonButtonRef = HTMLButtonElement;

package/src/RibbonButton/index.ts

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

package/src/RibbonButtonGroup/RibbonButtonGroup.stories.mdx

@@ -0,0 +1,122 @@
+import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs"
+import { MatterFolderRibbonIcon, NewEntryRibbonIcon } from "../Icons/leap";
+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="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

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

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

@@ -0,0 +1,49 @@
+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 } = props;
+
+  return (
+    <RibbonButtonGroupStyled
+      variant="outlined"
+      disableRipple
+      ref={ref}
+      {...props}
+    >
+      <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

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

package/src/RibbonButtonGroup/RibbonButtonGroupMenuExample.tsx

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

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

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

@@ -1,5 +1,5 @@
 {/* Temporarily remove as its style doesn't match with our design system */}
-// import ListItemIcon from "@mui/material/ListItemIcon"
+{/* // import ListItemIcon from "@mui/material/ListItemIcon"
 // import ListItemText from "@mui/material/ListItemText"
 // import MenuItem from "@mui/material/MenuItem"
 // import Typography from "@mui/material/Typography"
@@ -81,4 +81,4 @@
 //       </div>
 //     )}
 //   </Story>
-// </Canvas>
+// </Canvas> */}