@galaxy-ds/core 1.1.81 → 2.0.0

package/src/Select/Select.tsx

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

package/src/Select/Select.types.tsx

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

package/src/Select/index.ts

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

package/src/SidebarLayout/SidebarLayout.stories.mdx

@@ -0,0 +1,59 @@
+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.ts

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

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

package/src/SidebarLayout/SidebarLayout.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { SidebarLayoutProps } from './SidebarLayoutProps.types';
+
+import {
+  SidebarWrapper,
+  SidebarSide,
+  SidebarMain,
+} from './SidebarLayout.styled';
+
+const Sidebar = () => null;
+const Main = () => null;
+
+export const SidebarLayout: any = ({
+  children,
+  sidebarWidth = 260,
+  sidebarBgColor = '#f3f3f3',
+  ...props
+}: 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}> */}
+      <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;

package/src/SidebarLayout/SidebarLayoutProps.types.tsx

@@ -0,0 +1,15 @@
+export interface SidebarLayoutProps {
+  /**
+   * Layout contents.
+   * Wrap `<SidebarLayout.Sidebar>` and `<SidebarLayout.Main>` around your Sidebar and Main column's contents respectively.
+   */
+   children: any;
+   /**
+    * Sidebar's width. Default to 260px.
+    */
+   sidebarWidth?: number;
+   /**
+    * Sidbar background color. Default to #f3f3f3
+    */
+   sidebarBgColor?: string;
+}

package/src/SidebarLayout/index.ts

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

package/src/StepNavigation/StepNavigation.stories.mdx

@@ -0,0 +1,36 @@
+import { Meta, Story, Canvas, ArgsTable } from "@storybook/addon-docs"
+
+import { StepNavigation } from "./StepNavigation"
+
+<Meta title="components/StepNavigation" component={StepNavigation} />
+
+# Step Navigation
+
+Set the active step (zero based index). Set to -1 to disable all the steps.
+
+<Canvas withToolbar>
+  <Story
+    name="Default"
+    args={{
+      steps: [
+        {
+          label: "Step 1",
+        },
+        {
+          label: "Step 2",
+        },
+        {
+          label: "Step 3",
+        },
+        {
+          label: "Step 4",
+        },
+      ],
+      activeStep: 2,
+    }}
+  >
+    {(args) => <StepNavigation {...args} />}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Default" />

package/src/StepNavigation/StepNavigation.styled.tsx

@@ -0,0 +1,54 @@
+import { styled } from "@mui/material/styles"
+
+import { Typography } from "../Typography"
+
+const StepsContainer = styled("div")(({ theme }) => ({
+  height: 4,
+  width: "100%",
+  borderRadius: theme.shape.borderRadius,
+  backgroundColor: theme.palette.background.default,
+  display: "flex",
+}))
+
+const StepBar = styled("div")(({ theme }) => ({
+  height: 4,
+  width: "100%",
+  "&:first-of-type": {
+    borderRadius: theme.shape.borderRadius,
+    borderBottomRightRadius: 0,
+    borderTopRightRadius: 0,
+  },
+  "&:last-of-type": {
+    borderRadius: theme.shape.borderRadius,
+    borderBottomLeftRadius: 0,
+    borderTopLeftRadius: 0,
+  },
+  "&.active": {
+    backgroundColor: theme.palette.text.primary,
+    borderRadius: theme.shape.borderRadius,
+    "&:not(:first-of-type)": {
+      borderBottomLeftRadius: 0,
+      borderTopLeftRadius: 0,
+    },
+  },
+  "&.completed": {
+    backgroundColor: theme.palette.text.secondary,
+  },
+}))
+
+const LabelsContainer = styled("div")(() => ({
+  marginTop: 8,
+  display: "flex",
+}))
+
+const StepLabel = styled(Typography)(({ theme }) => ({
+  color: theme.palette.text.disabled,
+  "&.active": {
+    color: theme.palette.text.primary,
+  },
+  "&.completed": {
+    color: theme.palette.text.secondary,
+  },
+}))
+
+export { StepsContainer, StepBar, LabelsContainer, StepLabel }

package/src/StepNavigation/StepNavigation.tsx

@@ -0,0 +1,46 @@
+import clsx from 'clsx';
+
+import {
+  LabelsContainer,
+  StepBar,
+  StepLabel,
+  StepsContainer,
+} from './StepNavigation.styled';
+import { StepNavigationProps } from './StepNavigation.types';
+
+export const StepNavigation = (props: StepNavigationProps) => {
+  const { ref, steps, activeStep } = props
+
+  return (
+    <>
+      <StepsContainer ref={ref}>
+        {steps?.map(({ label }, index) => (
+          <StepBar
+            key={label}
+            className={clsx(
+              activeStep === index ? "active" : "",
+              activeStep > index ? "completed" : ""
+            )}
+          ></StepBar>
+        ))}
+      </StepsContainer>
+      <LabelsContainer>
+        {steps?.map(({ label }, index) => (
+          <StepLabel
+            key={label}
+            className={clsx(
+              activeStep === index ? "active" : "",
+              activeStep > index ? "completed" : ""
+            )}
+            variant={"subtitle2"}
+            width={100 / steps.length + "%"}
+          >
+            {label}
+          </StepLabel>
+        ))}
+      </LabelsContainer>
+    </>
+  )
+}
+
+export default StepNavigation

package/src/StepNavigation/StepNavigation.types.tsx

@@ -0,0 +1,8 @@
+export interface StepNavigationProps {
+  activeStep: number
+  steps?: Step[]
+  ref?: any
+}
+export interface Step {
+  label?: string
+}

package/src/StepNavigation/index.ts

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

package/src/Switch/Switch.stories.mdx

@@ -0,0 +1,31 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'; 
+import Switch from './Switch';
+
+<Meta title="Form Elements/Switch" component={ Switch } />
+
+# Switch
+
+Toggle button or switch. Only one colour (`default`) and one size supported.
+
+<Canvas withToolbar>
+  <Story name="Default" args={{}}>
+    {args => <Switch {...args} />}
+  </Story>
+</Canvas>
+
+## Stories
+
+### Disabled
+<Canvas>
+  <Story name="Disabled" args={{ disabled: true }}>
+    {(args) => (
+      <>
+        <Switch {...args} />
+        <Switch checked {...args} />
+      </>
+    )}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Default" />
+ 

package/src/Switch/Switch.test.tsx

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

package/src/Switch/Switch.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { Switch as MuiSwitch } from "@mui/material";
+import { SwitchProps } from "./SwitchProps.types";
+
+export const Switch: React.FC<SwitchProps> = (props: SwitchProps) => {
+  return (
+    <>
+      <MuiSwitch color="default" {...props} />
+    </>
+  );
+};
+
+export default Switch;

package/src/Switch/SwitchProps.types.tsx

@@ -0,0 +1,2 @@
+import { SwitchProps as MuiSwitchProps } from "@mui/material";
+export interface SwitchProps extends MuiSwitchProps {}

package/src/Switch/index.ts

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

package/src/Tab/Tab.test.tsx

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

package/src/Tab/Tab.tsx

@@ -0,0 +1,9 @@
+import { Tab as MuiTab } from "@mui/material"
+
+import { TabProps } from "./Tab.types"
+
+export const Tab = (props: TabProps) => {
+  return <MuiTab {...props}>{props.children}</MuiTab>
+}
+
+export default Tab

package/src/Tab/Tab.types.tsx

@@ -0,0 +1,3 @@
+import { TabProps as MuiTabProps } from "@mui/material/Tab/Tab"
+
+export interface TabProps extends MuiTabProps {}

package/src/Tab/index.ts

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

package/src/TabListItem/TabListItem.stories.mdx

@@ -0,0 +1,95 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import TabListItem from './TabListItem';
+
+import { Avatar } from '../Avatar/Avatar';
+import { Box } from '../Box/Box';
+import { Typography } from '../Typography/Typography';
+import { IconButton } from '../IconButton/IconButton';
+import { ListItemAvatar } from '../ListItemAvatar/ListItemAvatar';
+import { ListItemText } from '../ListItemText/ListItemText';
+// import MoreVerticalIcon from '../Icons/MoreVerticalIcon'
+// import ResponseIcon from '../Icons/ResponseIcon'
+import { SvgMoreVerticalIcon, SvgBubble } from '../Icons/lawconnect/';
+import { Icon } from '../Icon/Icon';
+
+<Meta
+  title="components/Lists/Tab List Item"
+  component={TabListItem}
+  parameters={{ badges: ['stable'] }}
+/>
+
+# Tab List Item
+
+This list component makes it easier to include changes on hover state.
+It provides two classes `hideOnHover` and `showOnHover` that you can set on the elements you want to hide or show on hover.
+It can be used inside a tab component.
+
+```javascript
+import TabListItem from '@galaxy-ds/core';
+```
+
+<Canvas withToolbar>
+  <Story name="Default" args={{}}>
+    {(args) => (
+      <TabListItem
+        hideOnHover={
+          <span>
+            <Typography component="span" variant="caption">
+              $350
+            </Typography>
+          </span>
+        }
+        showOnHover={
+          <IconButton size="small">
+            <Icon name={SvgMoreVerticalIcon} fontSize="small" />
+          </IconButton>
+        }
+      >
+        <ListItemAvatar>
+          <Avatar size="xsmall">LT</Avatar>
+        </ListItemAvatar>
+        <ListItemText primaryTypographyProps={{ noWrap: true }}>
+          Laura Tamar
+        </ListItemText>
+      </TabListItem>
+    )}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Default" />
+
+<Canvas>
+  <Story name="Text Prepend Icon" args={{}}>
+    {(args) => (
+      <TabListItem
+        hideOnHover={
+          <span>
+            <Typography component="span" variant="caption">
+              $350
+            </Typography>
+          </span>
+        }
+        showOnHover={
+          <IconButton size="small">
+            <Icon name={SvgMoreVerticalIcon} fontSize="small" />
+          </IconButton>
+        }
+      >
+        <ListItemAvatar>
+          <Avatar size="xsmall">LT</Avatar>
+        </ListItemAvatar>
+        <Box
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+          style={{ height: 20 }}
+        >
+          <Icon name={SvgBubble} fontSize="small" />
+        </Box>
+        <ListItemText primaryTypographyProps={{ noWrap: true }}>
+          <>Laura Tamar</>
+        </ListItemText>
+      </TabListItem>
+    )}
+  </Story>
+</Canvas>

package/src/TabListItem/TabListItem.styled.tsx

@@ -0,0 +1,60 @@
+import { styled } from '@mui/material/styles';
+import ListItemButton from '@mui/material/ListItemButton';
+
+export const StyledListItemButton = styled(ListItemButton)({
+  backgroundColor: 'transparent',
+  textTransform: 'none',
+  padding: '8px 16px',
+  alignItems: 'flex-start',
+  position: 'relative',
+  zIndex: 0,
+  lineHeight: '1.25rem',
+  // width: (props: { width: number }) => props.width,
+  '&:hover .hide-on-hover': {
+    opacity: 0,
+  },
+  '&:hover .show-on-hover': {
+    opacity: 1,
+  },
+  '&:hover': {
+    backgroundColor: 'transparent',
+  },
+  '& > *:nth-child(n+2)': {
+    marginLeft: 8,
+  },
+  '& .MuiListItemAvatar-root': {
+    minWidth: 20,
+    marginRight: 0,
+    marginLeft: 0,
+  },
+  '& .MuiListItemText-root': {
+    marginTop: 0,
+    marginBottom: 0,
+    lineHeight: '1.25rem',
+  },
+  '& .MuiTypography-root': {
+    lineHeight: '1.25rem',
+  },
+  '& .MuiTypography-root.MuiListItemText-secondary': {
+    lineHeight: '1rem',
+  },
+});
+
+export const ShowOnHover = styled('div')({
+  opacity: 0,
+  position: 'absolute',
+  right: 16,
+  zIndex: 99,
+});
+
+export const HideOnHover = styled('div')({
+  opacity: 1,
+  position: 'absolute',
+  right: 16,
+});
+
+export const HoverContentWrapper = styled('div', {
+  shouldForwardProp: (prop) => prop !== 'width',
+})<{ width: number }>(({ width }) => ({
+  width: width,
+}));

package/src/TabListItem/TabListItem.tsx

@@ -0,0 +1,51 @@
+import React, { useRef, useEffect, useState } from 'react';
+
+import { TabListItemProps } from './TabListItem.types';
+import {
+  HideOnHover,
+  HoverContentWrapper,
+  ShowOnHover,
+  StyledListItemButton,
+} from './TabListItem.styled';
+
+export const TabListItem: React.FC<TabListItemProps> = ({
+  children,
+  hideOnHover,
+  showOnHover,
+  ...props
+}: TabListItemProps) => {
+  /**
+   * As child divs are absolute positioning, the parent container doesn't have a width.
+   * It can lead to sibling list text truncate incorrectly and text overlapping.
+   * The following code uses refs to get the widths of the contents,
+   * and set the bigger one as parent's width.
+   */
+  const contentRef1 = useRef<HTMLInputElement>(null);
+  const contentRef2 = useRef<HTMLInputElement>(null);
+  const [width, setWidth] = useState(24);
+
+  useEffect(() => {
+    if (!contentRef1.current || !contentRef2.current) return;
+    const width1 = contentRef1.current.clientWidth;
+    const width2 = contentRef2.current.clientWidth;
+    setWidth(width1 > width2 ? width1 : width2);
+  }, [contentRef1, contentRef2]);
+
+  return (
+    <StyledListItemButton disableGutters {...props}>
+      <>
+        {children}
+        <HoverContentWrapper width={width}>
+          <HideOnHover ref={contentRef1} className="hide-on-hover">
+            {hideOnHover}
+          </HideOnHover>
+          <ShowOnHover ref={contentRef2} className="show-on-hover">
+            {showOnHover}
+          </ShowOnHover>
+        </HoverContentWrapper>
+      </>
+    </StyledListItemButton>
+  );
+};
+
+export default TabListItem;

package/src/TabListItem/TabListItem.types.ts

@@ -0,0 +1,13 @@
+import { ListItemProps } from "@mui/material";
+
+export interface TabListItemProps {
+  children: any;
+  /**
+   * Content that hidden when list item on hover
+   */
+  hideOnHover?: React.ReactNode;
+  /**
+   * Content that show when list item on hover
+   */
+  showOnHover?: React.ReactNode;
+}

package/src/TabListItem/index.ts

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