@galaxy-ds/core 1.1.81 → 2.0.1

package/src/Modal/index.ts

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

package/src/ModalActions/ModalActions.stories.mdx

@@ -0,0 +1,26 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'; 
+import { ModalActions } from './ModalActions';
+import { Button } from '../Button';
+
+<Meta title="components/Modal/ModalActions" component={ ModalActions } />
+
+# ModalActions
+
+<Canvas withToolbar>
+    <Story name="Default" args={{}}>
+      {args => (
+        <ModalActions {...args}>
+          <Button color="primary" variant="contained">
+            Save
+          </Button>
+          <Button color="inherit" variant="outlined">
+            Cancel
+          </Button>
+        </ModalActions>
+      )}
+    </Story>
+</Canvas>
+
+## Properties
+
+<ArgsTable story="Default" />

package/src/ModalActions/ModalActions.test.tsx

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

package/src/ModalActions/ModalActions.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { DialogActions } from "@mui/material";
+import { ModalActionsProps } from './ModalActionsProps.types';
+
+export const ModalActions: React.FC<ModalActionsProps> = (props: ModalActionsProps) => {
+  return (
+    <DialogActions {...props}>
+      {props.children}
+    </DialogActions>
+  )
+};
+
+export default ModalActions

package/src/ModalActions/ModalActionsProps.types.tsx

@@ -0,0 +1,2 @@
+import { DialogActionsProps } from "@mui/material";
+export interface ModalActionsProps extends DialogActionsProps {}

package/src/ModalActions/index.ts

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

package/src/ModalContent/ModalContent.stories.mdx

@@ -0,0 +1,36 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'; 
+import { ModalContent } from './ModalContent';
+
+<Meta title="components/Modal/ModalContent" component={ ModalContent } />
+
+# ModalContent
+
+ModalContent can disable/enable top & bottom dividers and paddings with props `dividers` and `disablePaddings`. Desktop theme ModalContent only has bottom divider.
+
+<Canvas withToolbar>
+    <Story name="Default" args={{dividers: true}}>
+      {args => (
+        <ModalContent {...args}>
+          ModalContent
+        </ModalContent>
+      )}
+    </Story>
+</Canvas>
+
+### Content Paddings
+
+By default `ModalContent` has paddings. To remove paddings set `disablePaddings` to `true`.
+
+<Canvas>
+    <Story name="Disable Paddings" args={{dividers: true, disablePaddings: true}}>
+      {args => (
+        <ModalContent {...args}>
+          ModalContent
+        </ModalContent>
+      )}
+    </Story>
+</Canvas>
+
+## Properties
+
+<ArgsTable story="Default" />

package/src/ModalContent/ModalContent.test.tsx

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

package/src/ModalContent/ModalContent.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { DialogContent } from "@mui/material";
+import { ModalContentProps } from './ModalContentProps.types';
+
+export const ModalContent: React.FC<ModalContentProps> = ({disablePaddings, ...props}: ModalContentProps) => {
+  return (
+    <DialogContent className={disablePaddings ? 'gds-disablePaddings' : ""} {...props}>
+      {props.children}
+    </DialogContent>
+  );
+};
+
+export default ModalContent

package/src/ModalContent/ModalContentProps.types.tsx

@@ -0,0 +1,8 @@
+import { DialogContentProps } from "@mui/material";
+
+export interface ModalContentProps extends DialogContentProps {
+  /**
+   * Remove paddings around content
+   */
+  disablePaddings?: boolean;
+}

package/src/ModalContent/index.ts

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

package/src/ModalTitle/ModalTitle.stories.mdx

@@ -0,0 +1,23 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'; 
+import { ModalTitle } from './ModalTitle';
+
+<Meta title="components/Modal/ModalTitle" component={ ModalTitle } />
+
+# ModalTitle
+
+ModalTitle has a LEAP logo prepended for Desktop theme, can set its visibility with `showLeapLogo` props. The logo is omitted in Web theme.
+
+<Canvas withToolbar>
+    <Story name="Default" args={{}}>
+      {args => (
+        <ModalTitle showLeapLogo {...args}>
+          Modal Title
+        </ModalTitle>
+      )}
+    </Story>
+</Canvas>
+
+## Properties
+
+<ArgsTable story="Default" />
+ 

package/src/ModalTitle/ModalTitle.test.tsx

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

package/src/ModalTitle/ModalTitle.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { DialogTitle } from '@mui/material';
+import LeapLogoIcon from '../Icons/common/Dialog/desktop/LeapLogo';
+import { ModalTitleProps } from './ModalTitleProps.types';
+
+export const ModalTitle: React.FC<ModalTitleProps> = (props: ModalTitleProps) => {
+  const { showLeapLogo, ...rest } = props
+
+  return (
+    <DialogTitle {...rest}>
+      {showLeapLogo && <LeapLogoIcon className="gds-modal_logo" />}
+      {props.children}
+    </DialogTitle>
+  );
+};
+
+export default ModalTitle

package/src/ModalTitle/ModalTitleProps.types.tsx

@@ -0,0 +1,5 @@
+import { DialogTitleProps } from "@mui/material";
+
+export interface ModalTitleProps extends DialogTitleProps {
+  showLeapLogo?: boolean;
+}

package/src/ModalTitle/index.ts

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

package/src/Pagination/Pagination.stories.mdx

@@ -0,0 +1,17 @@
+import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs"
+
+import { Pagination } from "./Pagination"
+
+<Meta title="components/Pagination" component={Pagination} />
+
+# Pagination
+
+Pass an `integer` to `count` variable for the number of pages.
+
+<Canvas withToolbar>
+  <Story name="Numbered" args={{ count: 8, defaultPage: 1 }}>
+    {(args) => <Pagination {...args} />}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Numbered" />

package/src/Pagination/Pagination.test.tsx

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

package/src/Pagination/Pagination.tsx

@@ -0,0 +1,18 @@
+import { Pagination as MuiPagination, PaginationItem as MuiPaginationItem } from "@mui/material"
+
+import { PaginationProps } from "./Pagination.types"
+
+export const Pagination = (props: PaginationProps) => {
+  const { ...rest } = props
+  return (
+    <MuiPagination
+      {...rest}
+      renderItem={(item) => <MuiPaginationItem {...item} />}
+      shape="rounded"
+      hideNextButton
+      hidePrevButton
+    />
+  )
+}
+
+export default Pagination

package/src/Pagination/Pagination.types.tsx

@@ -0,0 +1,3 @@
+import { PaginationProps as MuiPaginationProps } from "@mui/material/Pagination"
+
+export interface PaginationProps extends MuiPaginationProps {}

package/src/Pagination/index.ts

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

package/src/ProgressBar/ProgressBar.stories.mdx

@@ -0,0 +1,49 @@
+import Stack from "@mui/material/Stack"
+import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs"
+
+import { ProgressBar } from "./ProgressBar"
+
+<Meta title="components/ProgressBar" component={ProgressBar} />
+
+# ProgressBar
+
+If you need to amend the progress of the bar, use the `value` prop and update the number. `0` will set the progress bar state to empty. `100` will set the progress bar to complete.
+
+<Canvas withToolbar>
+  <Story
+    argTypes={{
+      variant: {
+        options: ["determinate"],
+        control: { type: "radio" },
+      },
+    }}
+    name="Default"
+    args={{ variant: "determinate" }}
+  >
+    {(args) => (
+      <Stack spacing={2}>
+        <ProgressBar {...args} value={0} />
+        <ProgressBar {...args} value={50} />
+        <ProgressBar {...args} value={100} />
+      </Stack>
+    )}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Default" />
+
+### Colors
+
+To update the progress bar color, use the `color` prop with value `primary`, `success`, `error`.
+
+<Canvas>
+  <Story name="Colors" args={{ variant: "determinate" }}>
+    {(args) => (
+      <Stack spacing={2}>
+        <ProgressBar {...args} value={100} color="primary" />
+        <ProgressBar {...args} value={100} color="success" />
+        <ProgressBar {...args} value={100} color="error" />
+      </Stack>
+    )}
+  </Story>
+</Canvas>

package/src/ProgressBar/ProgressBar.test.tsx

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

package/src/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,10 @@
+import { LinearProgress as MuiLinearProgress } from "@mui/material"
+
+import { LinearProgressProps as ProgressBarProps } from "./ProgressBar.types"
+
+export const ProgressBar = (props: ProgressBarProps) => {
+  const { color, ...rest } = props
+  return <MuiLinearProgress variant="determinate" color={color} {...rest} />
+}
+
+export default ProgressBar

package/src/ProgressBar/ProgressBar.types.tsx

@@ -0,0 +1,5 @@
+import { LinearProgressProps as MuiLinearProgressProps } from "@mui/material/LinearProgress"
+
+export interface LinearProgressProps extends MuiLinearProgressProps {
+  color?: "primary" | "success" | "error"
+}

package/src/ProgressBar/index.ts

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

package/src/Radio/Radio.stories.mdx

@@ -0,0 +1,38 @@
+import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs"
+
+import { Radio } from "./Radio"
+
+<Meta title="Form Elements/Radio" component={Radio} />
+
+# Radio
+
+<Canvas withToolbar>
+  <Story name="Default">
+    <Radio label="Label" value={1} />
+  </Story>
+</Canvas>
+
+### Default
+
+Default / Checked
+
+<Canvas>
+  <Story name="Checked">
+    <Radio label="Label" value={1} checked />
+  </Story>
+</Canvas>
+
+### Disabled
+
+Default / Checked - disabled
+
+<Canvas>
+  <Story name="Disabled">
+    <Radio label="Label" value={1} disabled />
+    <Radio label="Label" value={1} checked disabled />
+  </Story>
+</Canvas>
+
+## Properties
+
+<ArgsTable story="Default" />

package/src/Radio/Radio.styled.ts

@@ -0,0 +1,6 @@
+import { FormControlLabel } from "@mui/material"
+import { styled } from "@mui/material/styles"
+
+export const MuiFormControlLabel = styled(FormControlLabel)({
+  marginLeft: 0,
+})

package/src/Radio/Radio.test.tsx

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

package/src/Radio/Radio.tsx

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

package/src/Radio/Radio.types.tsx

@@ -0,0 +1,6 @@
+import { RadioProps as MuiRadioProps } from "@mui/material"
+
+export interface RadioProps extends MuiRadioProps {
+  label: string
+  value: any
+}

package/src/Radio/index.ts

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

package/src/RadioGroup/RadioGroup.stories.mdx

@@ -0,0 +1,27 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'; 
+import { RadioGroup } from './RadioGroup';
+import { Radio } from '../Radio';
+
+<Meta title="Form Elements/RadioGroup" component={ RadioGroup } />
+
+# RadioGroup
+
+```javascript
+import { RadioGroup } from "@galaxy-ds/core";
+```
+
+<Canvas withToolbar>
+    <Story name="Default">
+        <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>
+    </Story>
+</Canvas>
+
+## Properties
+
+<ArgsTable story="Default" />

package/src/RadioGroup/RadioGroup.test.tsx

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

package/src/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,20 @@
+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';
+
+export const RadioGroup: React.FC<RadioGroupProps> = (props: RadioGroupProps) => {
+  const { label, ...rest } = props
+
+  return (
+    <FormControl component="fieldset">
+      {label ? (<FormLabel>{label}</FormLabel>) : ''}
+      <MuiRadioGroup aria-label={label} {...rest}>
+        {props.children}
+      </MuiRadioGroup>
+    </FormControl>
+  )
+}
+
+export default RadioGroup

package/src/RadioGroup/RadioGroupProps.types.tsx

@@ -0,0 +1,5 @@
+import { RadioGroupProps as MuiRadioGroupProps } from "@mui/material"
+
+export interface RadioGroupProps extends MuiRadioGroupProps {
+  label?: string
+}

package/src/RadioGroup/index.ts

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

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

@@ -0,0 +1,84 @@
+{/* 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.ts

@@ -0,0 +1,45 @@
+import { Select as MSelect } from "@mui/material"
+import { styled } from "@mui/material/styles"
+
+export const MuiSelect = styled(MSelect)(({ 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 !important",
+        },
+      },
+    },
+  },
+  "& .MuiFilledInput-input": {
+    paddingTop:"8px !important",
+    "&:focus": {
+      backgroundColor: "transparent !important",
+    },
+  },
+
+  
+  legend: {
+    display: "none",
+  },
+
+  
+}))

package/src/Select/Select.test.tsx

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