@galaxy-ds/core 2.0.13 → 2.0.14

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;

package/src/SidebarLayout/SidebarLayout.types.ts

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

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

package/src/StepNavigation/StepNavigation.stories.mdx

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

@@ -1,53 +0,0 @@
-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.test.tsx

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

package/src/StepNavigation/StepNavigation.tsx

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

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

package/src/StepNavigation/index.ts

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

package/src/Switch/Switch.stories.mdx

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

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

package/src/Switch/Switch.tsx

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

package/src/Switch/Switch.types.ts

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

package/src/Switch/index.ts

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

package/src/Tab/Tab.stories.mdx

@@ -1,14 +0,0 @@
-import { Canvas, Meta, Story } from "@storybook/addon-docs"
-import { Tab } from "../Tab"
-
-<Meta title="components/Tab" component={Tab} />
-
-# Tab
-<Canvas withToolbar>
-  <Story name="Default" args={{}}>
-   {(args) => (
-     <Tab label="One" value={0} {...args}/>
-   )}
-  </Story>
-</Canvas>
-

package/src/Tab/Tab.test.tsx

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

package/src/Tab/Tab.tsx

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

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

package/src/Tab/index.ts

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

package/src/TabListItem/TabListItem.stories.mdx

@@ -1,146 +0,0 @@
-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 { 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={{}} parameters={{ docs: { source: { code: `
-<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>`
-    }}}}>
-    {(args) => (
-      <TabListItem
-        {...args}
-        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={{}} parameters={{ docs: { source: { code: `
-<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>
-  `}}}}>
-    {(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

@@ -1,59 +0,0 @@
-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',
-  '&: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.test.tsx

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

package/src/TabListItem/TabListItem.tsx

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

@@ -1,12 +0,0 @@
-import { ListItemButtonProps } from '@mui/material';
-
-export interface TabListItemProps extends ListItemButtonProps {
-  /**
-   * 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

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