@galaxy-ds/core 2.0.1 → 2.0.3

package/src/Icons/leap/ribbon/NewEntry.tsx

@@ -0,0 +1,51 @@
+export default function NewEntryRibbonIcons() {
+  return (
+    <svg
+      width="32"
+      height="40"
+      viewBox="0 0 32 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="32" height="40" transform="translate(0.5 0.5)" />
+      <path
+        d="M29 17.5V12.5C29 10.906 27.593 10 26 10H7C5.407 10 4 11.406 4 13V18C4 19.594 5.907 21 7.5 21H17.5"
+        stroke="#1E365E"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M31 25C31 28.313 28.313 31 25 31C21.686 31 19 28.313 19 25C19 21.686 21.686 19 25 19C28.313 19 31 21.686 31 25V25Z"
+        stroke="#3FAF2A"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M22 25H28"
+        stroke="#3FAF2A"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M25 22V28"
+        stroke="#3FAF2A"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12 10.5V20"
+        stroke="#1E365E"
+        strokeLinecap="square"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M21 10.5V16.5"
+        stroke="#1E365E"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/Icons/leap-icons.stories.mdx

@@ -1,105 +1,148 @@
 import { Canvas, Meta, Story } from "@storybook/addon-docs"
-
+import Grid from '@mui/material/Grid';
 import { Icon } from "../Icon" 
-
-import {
-AccessIcon,
-AccountingIcon,
-AssignCurvedIcon,
-AvatarBusinessIcon,
-AvatarCompanyIcon,
-AvatarGovernmentIcon,
-AvatarPeopleIcon,
-AvatarPersonIcon,
-AvatarTrustIcon,
-BrowseIcon,
-Browse2Icon,
-ButtonCaretIcon,
-ButtonFilterIcon,
-CalendarIcon,
-ChevronDownIcon,
-ChevronLeftIcon,
-ChevronRightIcon,
-CoinEuroIcon,
-CoinIcon,
-CoinPoundIcon,
-CrossIcon,
-Cross16Icon,
-CurrencyEuroIcon,
-CurrencyIcon,
-CurrencyPoundIcon,
-EmailSentIcon,
-HomeIcon,
-InsertLinkIcon,
-LoaderIcon,
-MenuIcon,
-MoreVerticalIcon,
-NewAppointmentIcon,
-PowerIcon,
-PreviewIcon,
-ReportingIcon,
-ResponseIcon,
-RevokeAccessIcon,
-SearchIcon,
-SelectFilterEmptyIcon,
-SelectFilterFilledIcon,
-SpinnerIcon,
-TickIcon,
-UserLinkIcon,
-UserLockIcon,
-UsersIcon,
-} from "./leap"
+import { leapIcons, leapIcons16, leapRibbonIcons } from "./leap/icons"
 
 <Meta title="Design Assets/Leap Icons" />
 
 # Icons
 
 <Canvas withToolbar>
-  <Story name="Icons">
-    <Icon name={AccessIcon} />
-    <Icon name={AccountingIcon} />
-    <Icon name={AssignCurvedIcon} />
-    <Icon name={AvatarBusinessIcon} />
-    <Icon name={AvatarCompanyIcon} />
-    <Icon name={AvatarGovernmentIcon} />
-    <Icon name={AvatarPeopleIcon} />
-    <Icon name={AvatarPersonIcon} />
-    <Icon name={AvatarTrustIcon} />
-    <Icon name={BrowseIcon} />
-    <Icon name={Browse2Icon} />
-    <Icon name={ButtonCaretIcon} />
-    <Icon name={ButtonFilterIcon} />
-    <Icon name={CalendarIcon} />
-    <Icon name={ChevronDownIcon} />
-    <Icon name={ChevronLeftIcon} />
-    <Icon name={ChevronRightIcon} />
-    <Icon name={CoinEuroIcon} />
-    <Icon name={CoinIcon} />
-    <Icon name={CoinPoundIcon} />
-    <Icon name={CrossIcon} />
-    <Icon name={Cross16Icon} />
-    <Icon name={CurrencyEuroIcon} />
-    <Icon name={CurrencyIcon} />
-    <Icon name={CurrencyPoundIcon} />
-    <Icon name={EmailSentIcon} />
-    <Icon name={HomeIcon} />
-    <Icon name={InsertLinkIcon} />
-    <Icon name={LoaderIcon} />
-    <Icon name={MenuIcon} />
-    <Icon name={MoreVerticalIcon} />
-    <Icon name={NewAppointmentIcon} />
-    <Icon name={PowerIcon} />
-    <Icon name={PreviewIcon} />
-    <Icon name={ReportingIcon} />
-    <Icon name={ResponseIcon} />
-    <Icon name={RevokeAccessIcon} />
-    <Icon name={SearchIcon} />
-    <Icon name={SelectFilterEmptyIcon} />
-    <Icon name={SelectFilterFilledIcon} />
-    <Icon name={SpinnerIcon} />
-    <Icon name={TickIcon} />
-    <Icon name={UserLinkIcon} />
-    <Icon name={UserLockIcon} />
-    <Icon name={UsersIcon} />
+  <Story name="Icons" parameters={{ docs: { source: { code: `
+<Icon name={AccessIcon} />
+<Icon name={AccountingIcon} />
+<Icon name={AssignCurvedIcon} />
+<Icon name={AvatarBusinessIcon} />
+<Icon name={AvatarCompanyIcon} />
+<Icon name={AvatarGovernmentIcon} />
+<Icon name={AvatarPeopleIcon} />
+<Icon name={AvatarPersonIcon} />
+<Icon name={AvatarTrustIcon} />
+<Icon name={BrowseIcon} />
+<Icon name={Browse2Icon} />
+<Icon name={ButtonCaretIcon} />
+<Icon name={ButtonFilterIcon} />
+<Icon name={CalendarIcon} />
+<Icon name={ChevronDownIcon} />
+<Icon name={ChevronLeftIcon} />
+<Icon name={ChevronRightIcon} />
+<Icon name={CoinEuroIcon} />
+<Icon name={CoinIcon} />
+<Icon name={CoinPoundIcon} />
+<Icon name={CrossIcon} />
+<Icon name={CurrencyEuroIcon} />
+<Icon name={CurrencyIcon} />
+<Icon name={CurrencyPoundIcon} />
+<Icon name={EmailSentIcon} />
+<Icon name={HomeIcon} />
+<Icon name={InsertLinkIcon} />
+<Icon name={LoaderIcon} />
+<Icon name={MenuIcon} />
+<Icon name={MoreVerticalIcon} />
+<Icon name={NewAppointmentIcon} />
+<Icon name={PowerIcon} />
+<Icon name={PreviewIcon} />
+<Icon name={ReportingIcon} />
+<Icon name={ResponseIcon} />
+<Icon name={RevokeAccessIcon} />
+<Icon name={SearchIcon} />
+<Icon name={SelectFilterEmptyIcon} />
+<Icon name={SelectFilterFilledIcon} />
+<Icon name={SpinnerIcon} />
+<Icon name={TickIcon} />
+<Icon name={UserLinkIcon} />
+<Icon name={UserLockIcon} />
+<Icon name={UsersIcon} />
+<Icon name={AutoTimer24Icon} />
+<Icon name={AutoTimerFilled24Icon} />
+<Icon name={ManualEntry24Icon} />
+<Icon name={ManualEntryFilled24Icon} />
+<Icon name={Timer24Icon} />
+<Icon name={TimerFilled24Icon} />
+  `}}}}>
+    <Grid container spacing={2}>
+    {
+      Object.entries(leapIcons).map(([key, value]) => {
+        return (
+          <Grid key={key} item xs={3} align="center">
+            <div>
+              <Icon name={value} />
+              <p>{key.toString()}</p>
+            </div>
+          </Grid>
+        )
+      })
+    }
+    </Grid>
+  </Story>
+</Canvas>
+
+## Ribbon
+<Canvas withToolbar>
+  <Story name="Ribbon" parameters={{ docs: { source: { code: `
+<Icon name={MatterFolderRibbonIcon} />
+<Icon name={NewEntryRibbonIcon} />
+<Icon name={CalendarRibbonIcon} />
+<Icon name={DeleteRibbonIcon} />
+  `}}}}>
+    <Grid container spacing={2}>
+    {
+      Object.entries(leapRibbonIcons).map(([key, value]) => {
+        return (
+          <Grid key={key} item xs={3} align="center">
+            <div>
+              <Icon name={value} />
+              <p>{key.toString()}</p>
+            </div>
+          </Grid>
+        )
+      })
+    }
+    </Grid>
+  </Story>
+</Canvas>
+
+## 16px
+<Canvas withToolbar>
+  <Story name="Small" parameters={{ docs: { source: { code: `
+<Icon fontSize="small" name={ActivityDefault16Icon} />
+<Icon fontSize="small" name={Appointment16Icon} />
+<Icon fontSize="small" name={BlankLetter16Icon} />
+<Icon fontSize="small" name={BylawyersIcon} />
+<Icon fontSize="small" name={Clause16Icon} />
+<Icon fontSize="small" name={Cross16Icon} />
+<Icon fontSize="small" name={CostRecoveryExceeded16Icon} />
+<Icon fontSize="small" name={Fax16Icon} />
+<Icon fontSize="small" name={HyperLink16Icon} />
+<Icon fontSize="small" name={Memo16Icon} />
+<Icon fontSize="small" name={PhoneCall16Icon} />
+<Icon fontSize="small" name={PrecedentNotification16Icon} />
+<Icon fontSize="small" name={ScannedDoc16Icon} />
+<Icon fontSize="small" name={SharedFolder16Icon} />
+<Icon fontSize="small" name={Sms16Icon} />
+<Icon fontSize="small" name={TrustStatement16Icon} />
+<Icon fontSize="small" name={TaxInvoice16Icon} />
+<Icon fontSize="small" name={TaxInvoice162Icon} />
+<Icon fontSize="small" name={TimedEntry16Icon} />
+<Icon fontSize="small" name={UnknownType16Icon} />
+<Icon fontSize="small" name={Video16Icon} />
+<Icon fontSize="small" name={VideoCall16Icon} />
+<Icon fontSize="small" name={VoiceMemo16Icon} />
+<Icon fontSize="small" name={Zyphta16Icon} />
+  `}}}}>
+    <Grid container spacing={2}>
+    {
+      Object.entries(leapIcons16).map(([key, value]) => {
+        return (
+          <Grid key={key} item xs={3} align="center">
+            <div>
+              <Icon fontSize="small" name={value} />
+              <p>{key.toString()}</p>
+            </div>
+          </Grid>
+        )
+      })
+    }
+    </Grid>
   </Story>
 </Canvas>

package/src/ImageUpload/ImageUpload.stories.mdx

@@ -17,6 +17,29 @@ import { ImageUpload } from "@galaxy-ds/core";
     args={{
       url: "url",
     }}
+    parameters={{ 
+      docs: {
+        source: {
+          code: `
+<ImageUpload
+  url="url"
+  rounded
+  placeholderImage={
+    <Icon name={SvgUpload} 
+      style={{
+        width: "100px",
+        height: "100px",
+        color: "#FFFFFF",
+        background: "#a7a7a7",
+        border: "1px solid #99A0AC",
+      }} 
+    />
+  }
+/>
+          `
+        }
+      }
+    }}
   >
     {(args) => (
       <ImageUpload

package/src/ImageUpload/ImageUpload.styled.tsx

@@ -0,0 +1,81 @@
+import { styled } from '@mui/material/styles';
+import { IconButton } from '../IconButton/IconButton';
+
+export const ImageUploadStyled = styled('div')(() => ({
+  width: 135,
+  alignItems: 'center',
+}));
+
+export const ImageUploadContainer = styled('div')(({ theme }) => ({
+  border: `1px solid ${theme.palette.grey[400]}`,
+  backgroundColor: theme.palette.background.paper,
+  borderBottom: 'none',
+  borderRadius: 0,
+  width: 135,
+  height: 135,
+  display: 'flex',
+  alignItems: 'center',
+  position: 'relative',
+}));
+
+export const ImageUploadClose = styled('div')(({ theme }) => ({
+  position: 'absolute',
+  right: '0px',
+  top: '0px',
+  borderRadius: 0,
+  '& .MuiIconButton-root': {
+    paddingBottom: 0,
+    paddingLeft: 0,
+    borderRadius: 0,
+    backgroundColor: theme.palette.background.paper,
+    transition: 'none',
+    '&:hover': {
+      backgroundColor: theme.palette.background.paper,
+      color: theme.palette.text.primary,
+    },
+    '&:active': {
+      backgroundColor: theme.palette.background.paper,
+      color: theme.palette.text.primary,
+    },
+  },
+}));
+
+export const ImageUploadIcon = styled(IconButton)(({ theme }) => ({
+  '& .MuiIconButton-root': {
+    borderRadius: 0,
+    backgroundColor: theme.palette.background.paper,
+    transition: 'none',
+    '&:hover': {
+      backgroundColor: theme.palette.background.paper,
+      color: theme.palette.grey[400],
+    },
+    '&:active': {
+      backgroundColor: theme.palette.background.paper,
+    },
+  },
+}));
+
+export const ImageUploadPhoto = styled('div')(() => ({
+  width: '100px',
+  height: '100px',
+  marginTop: 'auto',
+  marginBottom: 'auto',
+  overflow: 'hidden',
+  display: 'flex',
+  minWidth: 0,
+  '&.gds-image-upload-rounded': {
+    borderRadius: 50,
+  },
+}));
+
+export const ImageUploadWrapperStyled = styled('div')({
+  margin: 'auto',
+  width: '100px',
+  height: '100px',
+});
+
+export const ImageStyled = styled('img')({
+  width: '100px',
+  height: '100px',
+  border: '1px solid #99A0AC',
+});

package/src/ImageUpload/ImageUpload.test.tsx

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

package/src/ImageUpload/ImageUpload.tsx

@@ -1,11 +1,13 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
-import { ImageUploadProps } from './ImageUploadProps.types';
+import { ImageUploadProps } from './ImageUpload.types';
 import {
   ImageUploadStyled,
   ImageUploadContainer,
   ImageUploadClose,
   ImageUploadPhoto,
+  ImageUploadWrapperStyled,
+  ImageStyled,
 } from './ImageUpload.styled';
 import { IconButton } from '../IconButton/IconButton';
 import Button from '../Button/Button';
@@ -13,10 +15,10 @@ import { Icon } from '../Icon';
 import SvgCross from '../Icons/lawconnect/Cross';
 
 const ImageUpload: React.FC<ImageUploadProps> = (props: ImageUploadProps) => {
-  const { placeholderImage, rounded, ...defaultProps } = props;
+  const { placeholderImage, rounded } = props;
   const [files, setFiles] = useState<{ url: string }[]>([]);
 
-  const { getRootProps, getInputProps, open, acceptedFiles } = useDropzone({
+  const { getRootProps, getInputProps, open } = useDropzone({
     noClick: true,
     noKeyboard: true,
     accept: { 'image/*': [] },
@@ -43,7 +45,7 @@ const ImageUpload: React.FC<ImageUploadProps> = (props: ImageUploadProps) => {
   );
 
   return (
-    <ImageUploadStyled {...defaultProps}>
+    <ImageUploadStyled>
       <div {...getRootProps({ className: 'dropzone' })}>
         <input {...getInputProps()} />
         <ImageUploadContainer>
@@ -52,12 +54,12 @@ const ImageUpload: React.FC<ImageUploadProps> = (props: ImageUploadProps) => {
               <Icon name={SvgCross} />
             </IconButton>
           </ImageUploadClose>
-          <div style={{ margin: 'auto', width: '100px', height: '100px' }}>
+          <ImageUploadWrapperStyled>
             {files.length < 1 ? (
               <ImageUploadPhoto
                 className={rounded ? 'gds-image-upload-rounded' : ''}
               >
-                {props.placeholderImage}
+                {placeholderImage}
               </ImageUploadPhoto>
             ) : (
               files.map((file, index) => (
@@ -65,19 +67,12 @@ const ImageUpload: React.FC<ImageUploadProps> = (props: ImageUploadProps) => {
                   <ImageUploadPhoto
                     className={rounded ? 'gds-image-upload-rounded' : ''}
                   >
-                    <img
-                      src={file.url}
-                      style={{
-                        width: '100px',
-                        height: '100px',
-                        border: '1px solid #99A0AC',
-                      }}
-                    />
+                    <ImageStyled title={file.url} src={file.url} />
                   </ImageUploadPhoto>
                 </div>
               ))
             )}
-          </div>
+          </ImageUploadWrapperStyled>
         </ImageUploadContainer>
         <Button
           color="inherit"

package/src/ImageUpload/{ImageUploadProps.types.tsx → ImageUpload.types.ts}

@@ -1,5 +1,4 @@
 export interface ImageUploadProps {
-  name?: string;
   placeholderImage?: React.ReactNode;
   url?: string;
   rounded?: boolean;

package/src/ImageUpload/index.ts

@@ -1,2 +1,2 @@
-export * from './ImageUploadProps.types';
-export * from './ImageUpload';
+export * from './ImageUpload.types';
+export * from './ImageUpload';

package/src/Input/Input.stories.mdx

@@ -1,8 +1,8 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 import IconButton from '@mui/material/IconButton'
+import Stack from "@mui/material/Stack"
 import Input from './Input';
-// import FormGroup from "../FormGroup/FormGroup";
-// import FormContainer from './FormContainer';
+import FormGroup from "../FormGroup/FormGroup";
 import { Icon } from '../Icon';
 import { SearchIcon } from '../Icons/leap/';
 import { SvgCalendar, SvgSearch } from '../Icons/lawconnect/'
@@ -58,23 +58,34 @@ You can use FormGroup if you need an IconButton next to the input frame.
   </Story>
 </Canvas>
 
-<!-- TODO: update when FormGroup available -->
-<!-- ### FormGroup
+
+### FormGroup
 
 Use `<FormGroup row>` to group Input and IconButtons, Buttons side by side.
 
 <Canvas>
-  <Story name="FormGroup">
+  <Story name="FormGroup" parameters={{ docs: { source: { code: `
+<FormGroup row>
+  <Input />
+  <IconButton size="small"><Icon name={SvgCalendar} /></IconButton>
+</FormGroup>
+<FormGroup row>
+  <Input rows={3} multiline />
+  <IconButton size="small"><Icon name={SvgCalendar} /></IconButton>
+</FormGroup>
+  `}}}}>
+  <Stack direction="row" spacing={1}>
     <FormGroup row>
       <Input />
-      <IconButton size="small"><Icon name={SvgCalendarIcon} /></IconButton>
+      <IconButton size="small"><Icon name={SvgCalendar} /></IconButton>
     </FormGroup>
     <FormGroup row>
-      <Input multiline />
-      <IconButton size="small"><Icon name={SvgCalendarIcon} /></IconButton>
+      <Input rows={3} multiline />
+      <IconButton size="small"><Icon name={SvgCalendar} /></IconButton>
     </FormGroup>
+  </Stack>
   </Story>
-</Canvas> -->
+</Canvas>
 
 
 ### With Label
@@ -91,7 +102,14 @@ Specify `label` property to add a form label on top.
 ### Types
 Specify input type for the context.
 <Canvas>
-  <Story name="Types">
+  <Story name="Types" parameters={{ docs: { source: { code: `
+<form>
+  <Input type="text" placeholder="Text"/>
+  <Input type="number" placeholder="1"/>
+  <Input type="email" placeholder="Email"/>
+  <Input type="password" placeholder="Password" autoComplete="off"/>
+</form>
+  `}}}}>
     <form>
       <Input type="text" placeholder="Text"/>
       <Input type="number" placeholder="1"/>
@@ -184,7 +202,13 @@ Specify `rows` to set its height, the height is fixed in this case.
   <Story name="Text Area" args={{multiline: true, minRows: 2}}>
     {args => <form><Input {...args}/></form>}
   </Story>
-  <Story name="Text Area with End Adornment" args={{rows: 3, multiline: true}}>
+  <Story name="Text Area with End Adornment" args={{rows: 3, multiline: true}} parameters={{ docs: { source: { code: `
+<form>
+  <Input 
+    endAdornment={<IconButton><Icon fontSize="small" name={SvgCalendar}/></IconButton>}
+  />
+</form>
+  `}}}}>
     {args => <form><Input {...args} endAdornment={<IconButton><Icon fontSize="small" name={SvgCalendar}/></IconButton>}/></form>}
   </Story>
 </Canvas>

package/src/Input/Input.test.tsx

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

package/src/Input/Input.tsx

@@ -1,20 +1,27 @@
 import React from 'react';
-
-import { StyledFormHelperText, StyledInputBase, FormLabelBlock } from './Input.styled'
-
-import { InputProps } from './InputProps.types';
 import clsx from 'clsx';
+import {
+  StyledFormHelperText,
+  StyledInputBase,
+  FormLabelBlock,
+} from './Input.styled';
+
+import { InputProps, InputRef } from './Input.types';
 
-export const Input: React.FC<InputProps> = React.forwardRef(({
-  error = false,
-  helperText,
-  textAlignRight = false,
-  label,
-  size = 'medium',
-  background = 'default',
-  className,
-  ...props
-}: InputProps, ref: any) => {
+export const Input = React.forwardRef<InputRef, InputProps>(function Input(
+  props,
+  ref
+) {
+  const {
+    error = false,
+    helperText,
+    textAlignRight = false,
+    label,
+    size = 'medium',
+    background = 'default',
+    className,
+    ...rest
+  } = props;
   return (
     <>
       {label && <FormLabelBlock>{label}</FormLabelBlock>}
@@ -22,12 +29,12 @@ export const Input: React.FC<InputProps> = React.forwardRef(({
         ref={ref}
         error={error}
         textAlignRight={textAlignRight}
-        {...props}
         className={clsx(
           size === 'large' && 'customLargeSize',
           background === 'light' && 'customLightColor',
           className
         )}
+        {...rest}
       />
       {helperText && (
         <StyledFormHelperText error={error}>{helperText}</StyledFormHelperText>

package/src/Input/{InputProps.types.tsx → Input.types.ts}

@@ -1,6 +1,12 @@
 import { InputBaseProps } from '@mui/material/InputBase';
 
-type disabledProps = 'autoComplete' | 'color' | 'margin' | 'aria-describedby' | 'size';
+type disabledProps =
+  | 'autoComplete'
+  | 'color'
+  | 'margin'
+  | 'aria-describedby'
+  | 'size';
+
 export interface InputProps
   extends Partial<Omit<InputBaseProps, disabledProps>> {
   className?: string;
@@ -25,3 +31,5 @@ export interface InputProps
    */
   background?: 'default' | 'light' | 'dark';
 }
+
+export type InputRef = HTMLInputElement;

package/src/Input/index.ts

@@ -1,2 +1,2 @@
-export * from './InputProps.types';
-export * from './Input';
+export * from './Input.types';
+export * from './Input';