@galaxy-ds/core 2.0.2 → 2.0.4

package/src/FooterActions/FooterActions.tsx

@@ -1,45 +1,57 @@
-import React from "react";
-
+import React from 'react';
 import { Grid } from '@mui/material';
 import { FooterActionsContainer } from './FooterActions.styled';
-import { FooterActionsProps } from './FooterActionsProps.types';
+import { FooterActionsProps } from './FooterActions.types';
 
-const Left = () => null;
-const Right = () => null;
+const Left = () => null; // NOTE: This is broken in storybook if you pass left children like the right below
+const Right = (children: any) => <div>{children}</div>; // This fixes the app build error but won't work the same for left?
 
 export const FooterActions = (props: FooterActionsProps) => {
-  const { children, fixed, size = 'medium', ...rest } = props
+  const { children, fixed, size = 'medium' } = props;
   let sizeProps = {
-    'medium': 'gds-footer-actions_medium',
-    'small': 'gds-footer-actions_small',
-  }[size]
+    medium: 'gds-footer-actions_medium',
+    small: 'gds-footer-actions_small',
+  }[size];
   return (
-    <FooterActionsContainer container spacing={0} className={`gds-footer-actions ${sizeProps}  ${fixed ? 'gds-footer-fixed' : ''}`} {...rest}>
+    <FooterActionsContainer
+      container
+      spacing={0}
+      className={`gds-footer-actions ${sizeProps}  ${
+        fixed ? 'gds-footer-fixed' : ''
+      }`}
+    >
       <Grid item xs={6}>
-        <div className='gds-footer-actions_left'>
-          {React.Children.map(children, child => {
-            if (child.type === Left) {
-              return  child && child.props.children
-            }
+        <div className="gds-footer-actions_left">
+          {React.Children.map(children, (child, index) => {
+            return (
+              <div key={index}>
+                {React.isValidElement(child) && child.type === Left
+                  ? child.props.children
+                  : // NOTE: Left has to return null otherwise it'll repeat right twice?
+                    null}
+              </div>
+            );
           })}
         </div>
       </Grid>
       <Grid item xs={6}>
-        <div className='gds-footer-actions_right'>
-          {React.Children.map(children, child => {
-            if (child.type === Right) {
-              return child && child.props.children
-            } else {
-              return child
-            }
+        <div className="gds-footer-actions_right">
+          {React.Children.map(children, (child, index) => {
+            return (
+              <div key={index}>
+                {React.isValidElement(child) && child.type === Right
+                  ? child.props.children
+                  : child}
+              </div>
+            );
           })}
         </div>
       </Grid>
     </FooterActionsContainer>
-  )
-}
+  );
+};
 
 FooterActions.Left = Left;
 FooterActions.Right = Right;
 
-export default FooterActions
+export default FooterActions;

package/src/FooterActions/{FooterActionsProps.types.tsx → FooterActions.types.ts}

@@ -1,5 +1,5 @@
 export interface FooterActionsProps {
-  children?: any;
+  children?: React.ReactNode;
   size?: 'medium' | 'small';
   fixed?: boolean;
-}
+}

package/src/FooterActions/index.ts

@@ -1,2 +1,2 @@
-export * from './FooterActionsProps.types';
-export * from './FooterActions';
+export * from './FooterActions.types';
+export * from './FooterActions';

package/src/FormBody/FormBody.stories.mdx

@@ -1,6 +1,10 @@
 
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 import FormBody from "./FormBody";
+import { FormGroup } from "../FormGroup";
+import { Autocomplete } from "../Autocomplete";
+import { Grid } from "../Grid";
+import { Dropdown } from "../Dropdown";
 
 <Meta
   title="Form Elements/Layouts/Form Body"
@@ -17,7 +21,77 @@ import FormBody from "@galaxy-ds/core";
 
 <Canvas withToolbar>
   <Story name="Default" args={{}}>
-    {args => <FormBody {...args}/>}
+    {args => {
+      return (
+        <FormBody {...args} py={10} px={16}>
+          <Grid container spacing={4}>
+            <Grid item xs={12} sm={9}>
+              <FormGroup>
+                <Autocomplete
+                  autoComplete
+                  freeSolo
+                  multiple
+                  label="Recipient(s)"
+                  fullWidth
+                  actionLabel="Browse All Cards..."
+                  actionClick={() => {console.log('Open card selection')}}
+                  platform='desktop'
+                  options={['Barry Su', 'Catherine Jones', 'Tom Baker', 'Laura Anderson']}
+                  noOptionsText='No cards to display'
+                  placeholder="Recipients..."
+                />
+              </FormGroup>
+            </Grid>
+             <Grid item xs={12} sm={3}>
+              <FormGroup>
+                <Dropdown
+                  label="Access"
+                  align="right"
+                  defaultValue="1"
+                  elevation={3}
+                  fullWidth 
+                  size="large"
+                  variant="dropdown">
+                  <ListSubheader>
+                    {`< All Billing Statuses >`}
+                  </ListSubheader>
+                  <MenuItem value={1}>
+                    Billable - All
+                  </MenuItem>
+                  <MenuItem value={2}>
+                    Billable - Next Invoice
+                  </MenuItem>
+                  <MenuItem value={3}>
+                    Billable - Later Invoice
+                  </MenuItem>
+                  <MenuItem value={4}>
+                    Not Billable
+                  </MenuItem>
+                  <MenuItem value={5}>
+                    Billed - All
+                  </MenuItem>
+                  <MenuItem value={6}>
+                    Deleted
+                  </MenuItem>
+                </Dropdown>
+              </FormGroup>
+            </Grid>
+            <Grid item xs={12}>
+              <FormGroup>
+                <Input
+                  label="Message"
+                  background="default"
+                  fullWidth
+                  multiline
+                  size="medium"
+                  rows={5}/>
+              </FormGroup>
+            </Grid> 
+          </Grid>
+        </FormBody>
+      )
+    }
+  }
   </Story>
 </Canvas>
 

package/src/FormBody/FormBody.test.tsx

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

package/src/FormBody/FormBody.tsx

@@ -1,32 +1,25 @@
-import React from "react"
-import { FormBodyProps } from "./FormBody.types"
+import React from 'react';
+import { FormBodyProps } from './FormBody.types';
 
-import { FormBodyContainer } from "./FormBody.styled"
+import { FormBodyContainer } from './FormBody.styled';
 
-const FormBody: React.FC<FormBodyProps> = (props: FormBodyProps) => { 
-  const {
-    mt,
-    mb,
-    px,
-    py,
-    bg,
-    children
-  } = props
+export const FormBody: React.FC<FormBodyProps> = (props: FormBodyProps) => {
+  const { mt, mb, px, py, bg, children } = props;
   return (
     <FormBodyContainer
       style={{
         backgroundColor: bg ? bg : 'transparent',
         paddingRight: px ? px : 0,
-        paddingLeft:px ? px : 0,
+        paddingLeft: px ? px : 0,
         paddingTop: py ? py : 0,
         paddingBottom: py ? py : 0,
         marginBottom: mb ? mb : 0,
         marginTop: mt ? mt : 0,
-      }}>
+      }}
+    >
       {children}
     </FormBodyContainer>
-  )
-}
- 
+  );
+};
+
 export default FormBody;
- 

package/src/FormBody/FormBody.types.ts

@@ -1,9 +1,8 @@
-
 export interface FormBodyProps {
-    children?: any;
-    mt?: number;
-    mb?: number;
-    px?: number;
-    py?: number;
-    bg?: string;
+  children?: any;
+  mt?: number;
+  mb?: number;
+  px?: number;
+  py?: number;
+  bg?: string;
 }

package/src/FormContainer/FormContainer.stories.mdx

@@ -1,22 +1,17 @@
 
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-
 import FormContainer from "./FormContainer";
-
 import FormBody from "../FormBody/FormBody";
 import FormGroup from "../FormGroup/FormGroup";
 import FormHeader from "../FormHeader/FormHeader";
 import { FooterActions } from "../FooterActions/FooterActions";
 import { Button } from "../Button/Button";
-import {Grid} from "../Grid/Grid";
+import { Grid } from "../Grid/Grid";
 import Autocomplete from "../Autocomplete/Autocomplete";
-
-import {Dropdown} from "../Dropdown/Dropdown";
+import { Dropdown } from "../Dropdown/Dropdown";
 import ListSubheader from "../ListSubheader/ListSubheader";
-import {MenuItem} from "../MenuItem/MenuItem";
-import {Input} from "../Input/Input";
-
-
+import { MenuItem } from "../MenuItem/MenuItem";
+import { Input } from "../Input/Input";
 
 <Meta
   title="Form Elements/Layouts/Form Container"
@@ -31,7 +26,94 @@ import FormContainer from "@galaxy-ds/core";
 ```
 
 <Canvas withToolbar>
-  <Story name="Default">
+  <Story name="Default" parameters={{ docs: { source: { code: `
+<FormContainer>
+  <FormHeader
+    from="from:email@email.com"
+    onClick={() => {}}
+    title="Correspondence">
+    content
+  </FormHeader> 
+  <FormBody py={10} px={16}>
+    <Grid container spacing={4}>
+      <Grid item xs={12} sm={9}>
+        <FormGroup>
+          <Autocomplete
+              autoComplete
+              freeSolo
+              multiple
+              label="Recipient(s)"
+              fullWidth
+              actionLabel="Browse All Cards..."
+              actionClick={() => {console.log('Open card selection')}}
+              platform='desktop'
+              options={['Barry Su', 'Catherine Jones', 'Tom Baker', 'Laura Anderson']}
+              noOptionsText='No cards to display'
+              placeholder="Recipients..."
+            />
+        </FormGroup>
+      </Grid>
+        <Grid item xs={12} sm={3}>
+        <FormGroup>
+          <Dropdown
+            label="Access"
+            align="right"
+            defaultValue="1"
+            elevation={3}
+            fullWidth 
+            size="large"
+            variant="dropdown">
+            <ListSubheader>
+              {${'`'}< All Billing Statuses >${'`'}}
+            </ListSubheader>
+            <MenuItem value={1}>
+              Billable - All
+            </MenuItem>
+            <MenuItem value={2}>
+              Billable - Next Invoice
+            </MenuItem>
+            <MenuItem value={3}>
+              Billable - Later Invoice
+            </MenuItem>
+            <MenuItem value={4}>
+              Not Billable
+            </MenuItem>
+            <MenuItem value={5}>
+              Billed - All
+            </MenuItem>
+            <MenuItem value={6}>
+              Deleted
+            </MenuItem>
+          </Dropdown>
+        </FormGroup>
+      </Grid>
+      <Grid item xs={12}>
+        <FormGroup>
+          <Input
+            label="Message"
+            background="default"
+            fullWidth
+            multiline
+            size="medium"
+            rows={5}/>
+        </FormGroup>
+      </Grid> 
+    </Grid>
+  </FormBody>  
+  <FooterActions>
+    <FooterActions.Left>
+      <Button variant="outlined" color="inherit">
+          Send Response
+      </Button>
+    </FooterActions.Left>
+    <FooterActions.Right>
+      <Button variant="outlined" color="inherit">
+          Close
+      </Button>
+    </FooterActions.Right>
+  </FooterActions> 
+</FormContainer>
+  `}}}}>
     <FormContainer>
         <FormHeader
           from="from:email@email.com"

package/src/FormContainer/FormContainer.styled.tsx

@@ -0,0 +1,13 @@
+import { styled } from '@mui/material/styles';
+
+export const FormContainerStyled = styled('form', {
+  shouldForwardProp: (prop) => prop !== 'fullHeight',
+})<{ fullHeight?: boolean }>(({ fullHeight }) => ({
+  '&.form-container': {
+    display: 'grid',
+    width: '100%',
+    overflow: 'hidden',
+    gridTemplateRows: 'auto 1fr auto',
+    height: fullHeight ? `100vh` : '',
+  },
+}));

package/src/FormContainer/FormContainer.test.tsx

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

package/src/FormContainer/FormContainer.tsx

@@ -1,15 +1,19 @@
+import React from 'react';
+import { FormContainerProps } from './FormContainer.types';
+import { FormContainerStyled } from './FormContainer.styled';
 
-import React from "react";
-import { FormContainerProps } from "./FormContainer.types";
-import { FormContainerStyled } from "./FormContainer.styled";
-
-
-export const FormContainer: React.FC<FormContainerProps> = (props: FormContainerProps) => {
+export const FormContainer: React.FC<FormContainerProps> = (
+  props: FormContainerProps
+) => {
   return (
-    <FormContainerStyled onSubmit={props.onSubmit} className={"form-container"}>
+    <FormContainerStyled
+      fullHeight={props.fullHeight}
+      onSubmit={props.onSubmit}
+      className="form-container"
+    >
       {props.children}
     </FormContainerStyled>
-  )
-}
- 
-export default FormContainer
+  );
+};
+
+export default FormContainer;

package/src/FormContainer/FormContainer.types.ts

@@ -1,6 +1,5 @@
-
 export interface FormContainerProps {
-    children?: any;
-    fullHeight?: boolean;
-    onSubmit?: (e: any) => void;
+  children?: React.ReactNode;
+  fullHeight?: boolean;
+  onSubmit?: (e: any) => void;
 }

package/src/FormGroup/FormGroup.stories.mdx

@@ -17,7 +17,19 @@ import Autocomplete from "../Autocomplete/Autocomplete"
 # FormGroup
 
 <Canvas withToolbar>
-  <Story name="Default" args={{ row: true }}>
+  <Story name="Default" args={{ row: true }} parameters={{
+      docs: {
+        source: {
+          code: `
+<FormGroup row>
+  <Input />
+  <IconButton size="small">
+    <Icon name={SvgCalendar} />
+  </IconButton>
+</FormGroup>
+          `}
+        }
+    }}>
     {args =>
       <FormGroup {...args}>
         <Input />
@@ -45,7 +57,23 @@ import Autocomplete from "../Autocomplete/Autocomplete"
 ### Alignment
 
 <Canvas>
-  <Story name="Alignment/Start" args={{}}>
+  <Story name="Alignment/Start" 
+    args={{}}
+    parameters={{
+      docs: {
+        source: {
+          code: `
+<FormGroup row>
+  <Input multiline rows={2}/>
+  <IconButton size="small">
+    <Icon name={SvgCalendar} />
+  </IconButton>
+</FormGroup>
+          `
+        }
+      }
+    }}
+  >
     {args =>
       <FormGroup row {...args}>
         <Input multiline rows={2}/>
@@ -55,7 +83,23 @@ import Autocomplete from "../Autocomplete/Autocomplete"
       </FormGroup>
     }
   </Story>
-  <Story name="Alignment/Center" args={{alignItems: 'center'}}>
+  <Story name="Alignment/Center" 
+    args={{ alignItems: 'center' }}
+    parameters={{
+      docs: {
+        source: {
+          code: `
+<FormGroup row alignItems="center"> 
+  <Input multiline rows={2}/>
+  <IconButton size="small">
+    <Icon name={SvgCalendar} />
+  </IconButton>
+</FormGroup>
+          `
+        }
+      }
+    }}
+  >
     {args =>
       <FormGroup row {...args}>
         <Input multiline rows={2}/>

package/src/FormGroup/FormGroup.test.tsx

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

package/src/FormGroup/FormGroup.tsx

@@ -1,28 +1,37 @@
-import React from "react";
-import clsx from "clsx";
+import React from 'react';
+import clsx from 'clsx';
 
-import { FormGroup as MuiFormGroup } from "@mui/material";
-import { CustomFormGroupProps } from "./FormGroupProps.types";
+import { FormGroup as MuiFormGroup } from '@mui/material';
+import { CustomFormGroupProps } from './FormGroup.types';
 
-export const FormGroup: React.FC<CustomFormGroupProps> = (props: CustomFormGroupProps) => {
-  const { children, spacing = 0, alignItems = 'flex-start' , margin = false, ...rest } = props
+export const FormGroup: React.FC<CustomFormGroupProps> = (
+  props: CustomFormGroupProps
+) => {
+  const {
+    children,
+    spacing = 0,
+    alignItems = 'flex-start',
+    margin = false,
+    ...rest
+  } = props;
 
   return (
-    <MuiFormGroup className={clsx('gds-formgroup', margin ? 'formGroupMargin' : '')} 
+    <MuiFormGroup
+      className={clsx('gds-formgroup', margin ? 'formGroupMargin' : '')}
       sx={{
         alignItems: alignItems,
         '& > *': {
           marginRight: spacing,
         },
         '& > *:last-child': {
-          marginRight: 0
-        }
+          marginRight: 0,
+        },
       }}
       {...rest}
     >
-      { children }
+      {children}
     </MuiFormGroup>
-  )
-}
+  );
+};
 
-export default FormGroup
+export default FormGroup;

package/src/FormGroup/FormGroup.types.ts

@@ -0,0 +1,16 @@
+import { FormGroupProps } from '@mui/material';
+
+export interface CustomFormGroupProps extends FormGroupProps {
+  /**
+   * Change how items align. Default to 'flex-start'
+   */
+  alignItems?: 'flex-start' | 'center' | 'stretch' | 'flex-end';
+  /**
+   * Spacing units between direct children. Default to 0.
+   */
+  spacing?: 0 | 1 | 2 | 3 | 4;
+  /**
+   * If true add margin bottom 10px for desktop 16px for in them theme
+   */
+  margin?: boolean;
+}

package/src/FormGroup/index.ts

@@ -1,2 +1,2 @@
-export * from './FormGroupProps.types';
-export * from './FormGroup';
+export * from './FormGroup.types';
+export * from './FormGroup';

package/src/FormHeader/FormHeader.styled.tsx

@@ -0,0 +1,68 @@
+import { styled } from '@mui/material/styles';
+import { Grid, Box } from '@mui/material';
+
+export const FormHeaderBox = styled(Box)(() => ({
+  overflow: 'hidden',
+  backgroundColor: '#F9F9F9',
+  position: 'relative',
+  padding: 16,
+  minHeight: 81,
+  display: 'flex',
+  flexDirection: 'column',
+  '&.gds-header-fixed': {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    width: '100%',
+  },
+}));
+
+export const FormHeaderDetail = styled(Grid)(() => ({
+  display: 'flex',
+  alignItems: 'center',
+  zIndex: 9,
+  position: 'relative',
+  minHeight: 21,
+  button: {
+    fontSize: 12,
+  },
+}));
+
+export const FormHeaderInfo = styled(Grid)(() => ({
+  paddingTop: 0,
+  paddingBottom: 0,
+  flexWrap: 'nowrap',
+  p: {
+    fontWeight: 500,
+    color: '#6d7278',
+    whiteSpace: 'nowrap',
+  },
+  '& .MuiButton-label': {
+    top: 0,
+  },
+  '& .MuiButtonBase-root': {
+    paddingTop: 0,
+    paddingBottom: 0,
+    fontSize: '13px',
+    fontWeight: 400,
+  },
+}));
+
+export const FormHeaderAccent = styled('div')(() => ({
+  position: 'absolute',
+  top: -78,
+  right: 32,
+  zIndex: 1,
+  opacity: '0.7',
+  svg: {
+    width: 260,
+  },
+}));
+
+export const FormHeaderContent = styled('div')(() => ({
+  maxHeight: 77,
+  overflowY: 'auto',
+  zIndex: 9,
+  marginTop: 10,
+}));