@galaxy-ds/core 2.0.2 → 2.0.4

package/src/AppBar/AppBar.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-
 import { Box } from '@mui/material';
 import useMediaQuery from '@mui/material/useMediaQuery';
 
@@ -18,20 +17,20 @@ import {
 } from './AppBar.styled';
 import { AppBarProps } from './AppBar.types';
 
-const AppBar: React.FC<AppBarProps> = (props: AppBarProps) => {
+export const AppBar: React.FC<AppBarProps> = (props: AppBarProps) => {
   const {
     onDrawerToggle,
     onLogout,
     user,
     position = 'sticky',
-    drawerOpen,
+    ...rest
   } = props;
   const hasDrawerToggle =
     onDrawerToggle?.name === 'onDrawerToggle' ? true : false;
   const isMobile = useMediaQuery('(max-width:380px)');
 
   return (
-    <MuiAppBar color="primary" position={position} elevation={0}>
+    <MuiAppBar color="primary" position={position} elevation={0} {...rest}>
       <AppBarToolbar variant="dense">
         {hasDrawerToggle && (
           <Box
@@ -45,16 +44,12 @@ const AppBar: React.FC<AppBarProps> = (props: AppBarProps) => {
           </Box>
         )}
 
-        <AppBarLogo sx={ isMobile ? {marginRight: 0, height: '3.125rem'} : {} }>
+        <AppBarLogo sx={isMobile ? { marginRight: 0, height: '3.125rem' } : {}}>
           <Icon name={LeapLogo} />
         </AppBarLogo>
 
         <Box sx={{ display: { xs: 'none', sm: 'block' } }}>
-          <Typography
-            upperCase
-            color="white"
-            variant="h2"
-          >
+          <Typography upperCase color="white" variant="h2">
             {props.title}
           </Typography>
         </Box>
@@ -62,7 +57,9 @@ const AppBar: React.FC<AppBarProps> = (props: AppBarProps) => {
         <AppBarContent>{props.children}</AppBarContent>
         {!!props && !!props.user && (
           <>
-            <AppBarUser sx={ isMobile ? { overflow: 'hidden', minWidth: '6.25rem'} : {} }>
+            <AppBarUser
+              sx={isMobile ? { overflow: 'hidden', minWidth: '6.25rem' } : {}}
+            >
               <Typography color="white" variant="h4">
                 {user.firstName} {user.lastName}
               </Typography>

package/src/AppBar/{AppBar.types.tsx → AppBar.types.ts}

@@ -1,18 +1,10 @@
+import { AppBarProps as MuiAppBarProps } from '@mui/material';
 
-export interface AppBarProps {
-
+export interface AppBarProps extends MuiAppBarProps {
   title?: string;
-
-  children?: any;
-
+  children?: React.ReactNode;
   user?: any;
-
-  drawerOpen?: boolean;
-
   position?: 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky';
-
   onLogout?: () => void;
-
   onDrawerToggle?: () => void;
-
-}
+}

package/src/AttachmentIcon/AttachmentIcon.stories.mdx

@@ -1,6 +1,8 @@
 
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 import AttachmentIcon from "./AttachmentIcon";
+import { attachmentIcons } from "./icons";
+import Grid from '@mui/material/Grid';
 
 <Meta
   title="Patterns/AttachmentIcon"
@@ -14,76 +16,263 @@ Attachment Icon ....
 ```javascript
 import AttachmentIcon from "@galaxy-ds/core";
 ```
+# Default
 
+<Canvas withToolbar>
+  <Story name="Default" parameters={{ docs: { source: { code: `
+<AttachmentIcon ext="activitydefault"/>
+<AttachmentIcon ext="phonecall" />
+<AttachmentIcon ext="scanneddoc"/>
+<AttachmentIcon ext="videocall"/>
+<AttachmentIcon ext="app"/>
+<AttachmentIcon ext="audio"/>
+<AttachmentIcon ext="clause"/>
+<AttachmentIcon ext="comment"/>
+<AttachmentIcon ext="default"/>
+<AttachmentIcon ext="doc"/>
+<AttachmentIcon ext="eml"/>
+<AttachmentIcon ext="emldraft"/>
+<AttachmentIcon ext="emlreceived"/>
+<AttachmentIcon ext="fax" />
+<AttachmentIcon ext="file" />
+<AttachmentIcon ext="folder" />
+<AttachmentIcon ext="infotrack"/>
+<AttachmentIcon ext="invrequest"/>
+<AttachmentIcon ext="invrequests"/>
+<AttachmentIcon ext="letter"/>
+<AttachmentIcon ext="memo"/>
+<AttachmentIcon ext="pdf"/>
+<AttachmentIcon ext="ppt"/>
+<AttachmentIcon ext="sms"/>
+<AttachmentIcon ext="video" />
+<AttachmentIcon ext="zip" />
+  `}}}}>
+    <Grid container spacing={2}>
+      {
+        Object.entries(attachmentIcons).map(([key, value]) => {
+          return (
+            <Grid key={key} item xs={3} align="center">
+              <div>
+                <AttachmentIcon ext={value} />
+                 <p>{value}</p>
+              </div>
+            </Grid>
+          )
+        })
+      }
+    </Grid>
+  </Story>
+</Canvas>
+
+## Small
 
 <Canvas withToolbar>
-  <Story name="Default">
-    <AttachmentIcon ext="default"/>
-    <AttachmentIcon ext="doc"/>
-    <AttachmentIcon ext="xls"/>
-    <AttachmentIcon ext="pdf"/>
-    <AttachmentIcon ext="comment"/>
-    <AttachmentIcon ext="png"/>
-    <AttachmentIcon ext="eml"/>
-    <AttachmentIcon ext="emlsent"/>
-    <AttachmentIcon ext="emlreceived"/>
-    <AttachmentIcon ext="emldraft"/>
-    <AttachmentIcon ext="zip"/>
-    <AttachmentIcon ext="folder"/>
-    <AttachmentIcon ext="app"/>
-    <AttachmentIcon ext="invoice"/>
-    <AttachmentIcon ext="audio"/>
-    <AttachmentIcon ext="video"/>
-    <AttachmentIcon ext="clause"/>
-    <AttachmentIcon ext="fax"/>
-    <AttachmentIcon ext="file"/>
-    <AttachmentIcon ext="infotrack"/>
-    <AttachmentIcon ext="invrequest"/>
-    <AttachmentIcon ext="invrequests"/>
-    <AttachmentIcon ext="letter"/>
-    <AttachmentIcon ext="memo"/>
-    <AttachmentIcon ext="ppt"/>
-    <AttachmentIcon ext="sms"/>
-    <AttachmentIcon ext="videocall"/>
-    <AttachmentIcon ext="phonecall"/>
-    <AttachmentIcon ext="scanneddoc"/>
-    <AttachmentIcon ext="activitydefault"/>
+  <Story name="Small" parameters={{ docs: { source: { code: `
+<AttachmentIcon size="small" ext="activitydefault"/>
+<AttachmentIcon size="small" ext="phonecall" />
+<AttachmentIcon size="small" ext="scanneddoc"/>
+<AttachmentIcon size="small" ext="videocall"/>
+<AttachmentIcon size="small" ext="app"/>
+<AttachmentIcon size="small" ext="audio"/>
+<AttachmentIcon size="small" ext="clause"/>
+<AttachmentIcon size="small" ext="comment"/>
+<AttachmentIcon size="small" ext="default"/>
+<AttachmentIcon size="small" ext="doc"/>
+<AttachmentIcon size="small" ext="eml"/>
+<AttachmentIcon size="small" ext="emldraft"/>
+<AttachmentIcon size="small" ext="emlreceived"/>
+<AttachmentIcon size="small" ext="fax" />
+<AttachmentIcon size="small" ext="file" />
+<AttachmentIcon size="small" ext="folder" />
+<AttachmentIcon size="small" ext="infotrack"/>
+<AttachmentIcon size="small" ext="invrequest"/>
+<AttachmentIcon size="small" ext="invrequests"/>
+<AttachmentIcon size="small" ext="letter"/>
+<AttachmentIcon size="small" ext="memo"/>
+<AttachmentIcon size="small" ext="pdf"/>
+<AttachmentIcon size="small" ext="ppt"/>
+<AttachmentIcon size="small" ext="sms"/>
+<AttachmentIcon size="small" ext="video" />
+<AttachmentIcon size="small" ext="zip" />
+  `}}}}>
+    <Grid container spacing={2}>
+      {
+        Object.entries(attachmentIcons).map(([key, value]) => {
+          return (
+            <Grid key={key} item xs={3} align="center">
+              <div>
+                <AttachmentIcon size="small" ext={value} />
+                 <p>{value}</p>
+              </div>
+            </Grid>
+          )
+        })
+      }
+    </Grid>
   </Story>
 </Canvas>
 
-<ArgsTable story="Default" />
+# Multiple icons for extensions
+
+<Canvas withToolbar>
+  <Story name="Multi icons" parameters={{ docs: { source: { code: `
+<AttachmentIcon ext="msg" />
+<AttachmentIcon ext="emlsent" />
+<AttachmentIcon ext="xls" />
+<AttachmentIcon ext="xls" />
+<AttachmentIcon ext="jpeg" />
+<AttachmentIcon ext="jpg" />
+<AttachmentIcon ext="png" />
+<AttachmentIcon ext="giff" /> 
+<AttachmentIcon ext="tiff" />
+<AttachmentIcon ext="trust" />
+<AttachmentIcon ext="invoice" />
+<AttachmentIcon ext="office" />
+<AttachmentIcon ext="doc" />
+<AttachmentIcon ext="docx" /> 
+  `}}}}>
+    {
+      <Grid container spacing={2}>
+        <Grid item xs={3} align="center">
+          <AttachmentIcon ext="msg" />
+          <p>msg</p>
+        </Grid>
+        <Grid item xs={3} align="center">
+          <AttachmentIcon ext="emlsent" />
+          <p>emlsent</p>
+        </Grid>
+          <Grid item xs={3} align="center">
+          <AttachmentIcon ext="xls" />
+          <p>xls</p>
+        </Grid>
+        <Grid item xs={3} align="center">
+          <AttachmentIcon ext="xls" />
+          <p>xlsx</p>
+        </Grid>
+        <Grid item xs={3} align="center">
+          <AttachmentIcon ext="jpeg" />
+          <p>jpeg</p>
+        </Grid>
+        <Grid item xs={3} align="center">
+          <AttachmentIcon ext="jpg" />
+          <p>jpg</p>
+        </Grid>
+        <Grid item xs={3} align="center">
+          <AttachmentIcon ext="png" />
+          <p>png</p>
+        </Grid>
+        <Grid item xs={3} align="center">
+          <AttachmentIcon ext="gif" />
+          <p>giff</p>
+        </Grid>
+        <Grid item xs={3} align="center">
+          <AttachmentIcon ext="tiff" />
+          <p>tiff</p>
+        </Grid>
+        <Grid item xs={3} align="center">
+          <AttachmentIcon ext="trust" />
+          <p>trust</p>
+        </Grid>
+        <Grid item xs={3} align="center">
+          <AttachmentIcon ext="invoice" />
+          <p>invoice</p>
+        </Grid>
+        <Grid item xs={3} align="center">
+          <AttachmentIcon ext="office" />
+          <p>office</p>
+        </Grid>
+          <Grid item xs={3} align="center">
+          <AttachmentIcon ext="doc" />
+          <p>doc</p>
+        </Grid>
+          <Grid item xs={3} align="center">
+          <AttachmentIcon ext="docx" />
+          <p>docx</p>
+        </Grid>
+      </Grid>
+    }
+  </Story>
+</Canvas>
 
+### Small 
 <Canvas withToolbar>
-  <Story name="Small">
-    <AttachmentIcon size="small" ext="default"/>
-    <AttachmentIcon size="small" ext="doc"/>
-    <AttachmentIcon size="small" ext="xls"/>
-    <AttachmentIcon size="small" ext="pdf"/>
-    <AttachmentIcon size="small" ext="comment"/>
-    <AttachmentIcon size="small" ext="png"/>
-    <AttachmentIcon size="small" ext="eml"/>
-    <AttachmentIcon size="small" ext="emlsent"/>
-    <AttachmentIcon size="small" ext="emlreceived"/>
-    <AttachmentIcon size="small" ext="emldraft"/>
-    <AttachmentIcon size="small" ext="zip"/>
-    <AttachmentIcon size="small" ext="folder"/>
-    <AttachmentIcon size="small" ext="app"/>
-    <AttachmentIcon size="small" ext="invoice"/>
-    <AttachmentIcon size="small" ext="audio"/>
-    <AttachmentIcon size="small" ext="video"/>
-    <AttachmentIcon size="small" ext="clause"/>
-    <AttachmentIcon size="small" ext="fax"/>
-    <AttachmentIcon size="small" ext="file"/>
-    <AttachmentIcon size="small" ext="infotrack"/>
-    <AttachmentIcon size="small" ext="invrequest"/>
-    <AttachmentIcon size="small" ext="invrequests"/>
-    <AttachmentIcon size="small" ext="letter"/>
-    <AttachmentIcon size="small" ext="memo"/>
-    <AttachmentIcon size="small" ext="ppt"/>
-    <AttachmentIcon size="small" ext="sms"/>
-    <AttachmentIcon size="small" ext="videocall"/>
-    <AttachmentIcon size="small" ext="phonecall"/>
-    <AttachmentIcon size="small" ext="scanneddoc"/>
-    <AttachmentIcon size="small" ext="activitydefault"/>
+  <Story name="Multi icons - Small" parameters={{ docs: { source: { code: `
+<AttachmentIcon size="small" ext="msg" />
+<AttachmentIcon size="small" ext="emlsent" />
+<AttachmentIcon size="small" ext="xls" />
+<AttachmentIcon size="small" ext="xls" />
+<AttachmentIcon size="small" ext="jpeg" />
+<AttachmentIcon size="small" ext="jpg" />
+<AttachmentIcon size="small" ext="png" />
+<AttachmentIcon size="small" ext="giff" /> 
+<AttachmentIcon size="small" ext="tiff" />
+<AttachmentIcon size="small" ext="trust" />
+<AttachmentIcon size="small" ext="invoice" />
+<AttachmentIcon size="small" ext="office" />
+<AttachmentIcon size="small" ext="doc" />
+<AttachmentIcon size="small" ext="docx" /> 
+  `}}}}>
+    {
+      <Grid container spacing={2}>
+        <Grid item xs={3} align="center">
+          <AttachmentIcon size="small" ext="msg" />
+          <p>msg</p>
+        </Grid>
+        <Grid item xs={3} align="center">
+          <AttachmentIcon size="small" ext="emlsent" />
+          <p>emlsent</p>
+        </Grid>
+          <Grid item xs={3} align="center">
+          <AttachmentIcon size="small" ext="xls" />
+          <p>xls</p>
+        </Grid>
+        <Grid item xs={3} align="center">
+          <AttachmentIcon size="small" ext="xls" />
+          <p>xlsx</p>
+        </Grid>
+        <Grid item xs={3} align="center">
+          <AttachmentIcon size="small" ext="jpeg" />
+          <p>jpeg</p>
+        </Grid>
+        <Grid item xs={3} align="center">
+          <AttachmentIcon size="small" ext="jpg" />
+          <p>jpg</p>
+        </Grid>
+        <Grid item xs={3} align="center">
+          <AttachmentIcon size="small" ext="png" />
+          <p>png</p>
+        </Grid>
+        <Grid item xs={3} align="center">
+          <AttachmentIcon size="small" ext="gif" />
+          <p>giff</p>
+        </Grid>
+        <Grid item xs={3} align="center">
+          <AttachmentIcon size="small" ext="tiff" />
+          <p>tiff</p>
+        </Grid>
+        <Grid item xs={3} align="center">
+          <AttachmentIcon size="small" ext="trust" />
+          <p>trust</p>
+        </Grid>
+        <Grid item xs={3} align="center">
+          <AttachmentIcon size="small" ext="invoice" />
+          <p>invoice</p>
+        </Grid>
+        <Grid item xs={3} align="center">
+          <AttachmentIcon size="small" ext="office" />
+          <p>office</p>
+        </Grid>
+          <Grid item xs={3} align="center">
+          <AttachmentIcon size="small" ext="doc" />
+          <p>doc</p>
+        </Grid>
+          <Grid item xs={3} align="center">
+          <AttachmentIcon size="small" ext="docx" />
+          <p>docx</p>
+        </Grid>
+      </Grid>
+    }
   </Story>
-</Canvas>
+</Canvas>
+
+<ArgsTable story="Default" />

package/src/AttachmentIcon/AttachmentIcon.test.tsx

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

package/src/AttachmentIcon/AttachmentIcon.types.ts

@@ -1,4 +1,4 @@
 export interface AttachmentIconProps {
-    ext?: string;
-    size?: 'medium' | 'inherit' | 'large' | 'small';
+  ext?: string;
+  size?: 'medium' | 'inherit' | 'large' | 'small';
 }

package/src/AttachmentIcon/icons.ts

@@ -0,0 +1,27 @@
+export const attachmentIcons = {
+  ActivityTypeDefault: 'activitydefault',
+  ActivityTypePhoneCall: 'phonecall',
+  ActivityTypeScannedDoc: 'scanneddoc',
+  ActivityTypeVideoCall: 'videocall',
+  DocTypeAppointment: 'app',
+  DocTypeAudio: 'audio',
+  DocTypeClausePrecedent: 'clause',
+  DocTypeComment: 'comment',
+  DocTypeDefault: 'default',
+  DocTypeEmail: 'eml',
+  DocTypeEmailDraft: 'emldraft',
+  DocTypeEmailReceived: 'emlreceived',
+  DocTypeFax: 'fax',
+  DocTypeFileNote: 'file',
+  DocTypeFolder: 'folder',
+  DocTypeInfotrack: 'infotrack',
+  DocTypeInvoiceRequest: 'invrequest',
+  DocTypeInvoiceRequests: 'invrequests',
+  DocTypeLetter: 'letter',
+  DocTypeMemo: 'memo',
+  DocTypePdf: 'pdf',
+  DocTypePowerpoint: 'ppt',
+  DocTypeSMS: 'sms',
+  DocTypeVideo: 'video',
+  DocTypeZip: 'zip',
+};