Create transfer list (#322)

* ci: version bump to 5.3.3 --------- Co-authored-by: Automated Version Bump <[email protected]> Co-authored-by: Lauren Leohner <[email protected]>
woven-planet · Nov 15, 2023 · 1e48f4d · 1e48f4d
1 parent 527a18f
commit 1e48f4d
Show file tree

Hide file tree

Showing 15 changed files with 438 additions and 119 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -1,6 +1,6 @@
 {
-    "printWidth": 120,
+    "printWidth": 80,
     "singleQuote": true,
-    "tabWidth": 4,
+    "tabWidth": 2,
     "trailingComma": "none"
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@toyota-research-institute/lakefront",
   "description": "React UI Components",
-  "version": "5.2.6",
+  "version": "5.3.3",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "homepage": "https://github.com/ToyotaResearchInstitute/lakefront",

diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
@@ -1,8 +1,10 @@
 import {
   ChangeEvent,
   ComponentPropsWithoutRef,
+  DragEvent,
   FC,
-  ReactElement
+  ReactElement,
+  useState
 } from 'react';
 import { ThemeProvider } from '@emotion/react';
 import { StyledCheckbox, StyledLabel } from './checkboxStyles';
@@ -43,6 +45,7 @@ export interface CheckboxProps {
    * The classes to pass to the checkbox label.
    */
   labelClassName?: string;
+  description?: string;
 }
 
 /**
@@ -61,6 +64,7 @@ const Checkbox: FC<CheckboxProps & ComponentPropsWithoutRef<'input'>> = ({
   disabled = false,
   onChange = () => null,
   labelClassName,
+  description,
   ...props
 }) => {
   const showIcon = indeterminate || checked;
@@ -74,7 +78,11 @@ const Checkbox: FC<CheckboxProps & ComponentPropsWithoutRef<'input'>> = ({
 
   return (
     <ThemeProvider theme={theme}>
-      <StyledLabel disabled={disabled} indeterminate={indeterminate} className={labelClassName}>
+      <StyledLabel
+        disabled={disabled}
+        indeterminate={indeterminate}
+        className={labelClassName}
+      >
         <StyledCheckbox
           {...props}
           indeterminate={indeterminate}
@@ -84,7 +92,9 @@ const Checkbox: FC<CheckboxProps & ComponentPropsWithoutRef<'input'>> = ({
           type="checkbox"
         />
         {showIcon && icon}
-        {label && <span>{label}</span>}
+        {!description && label && <span>{label}</span>}
+        {description && label && <div>{label}</div>}
+        {description && <div>{description}</div>}
       </StyledLabel>
     </ThemeProvider>
   );

diff --git a/src/components/Checkbox/checkboxStyles.ts b/src/components/Checkbox/checkboxStyles.ts
@@ -21,16 +21,26 @@ export const StyledLabel = styled.label<StyledLabelProps>(
       padding: 0,
       alignItems: 'center',
       span: {
+        gridColumn: '2 / span 1',
+        gridRow: '1 / span 1'
+      },
+      'div:first-of-type': {
         gridColumn: '2 / span 1',
         gridRow: '1 / span 1',
+        fontWeight: 'bold'
+      },
+      'div:nth-of-type(2)': {
+        gridColumn: '2 / div 1',
+        gridRow: '2 / div 1',
+        fontSize: 13
       },
       svg: {
         gridColumn: '1 / span 1',
         gridRow: '1 / span 1',
         color: disabled ? disabledSvgColor : theme?.colors?.white,
-        marginLeft: 2,
+        marginLeft: 2
       },
-      cursor: disabled ? 'not-allowed' : 'auto',
+      cursor: disabled ? 'not-allowed' : 'auto'
     };
   }
 );
@@ -49,14 +59,15 @@ export const StyledCheckbox = styled.input<CheckboxProps>(
       }`,
       borderRadius: 2,
       WebkitAppearance: 'none',
-      backgroundColor: color || (disabled ? disabledBackgroundColor : backgroundColor),
+      backgroundColor:
+        color || (disabled ? disabledBackgroundColor : backgroundColor),
       fontSize: 16,
       outline: 'none',
       height: 20,
       width: 20,
       gridColumn: '1 / span 1',
       gridRow: '1 / span 1',
-      cursor: disabled ? 'not-allowed' : 'pointer',
+      cursor: disabled ? 'not-allowed' : 'pointer'
     };
   }
 );
diff --git a/src/components/CheckboxGroup/CheckboxGroup.tsx b/src/components/CheckboxGroup/CheckboxGroup.tsx
@@ -1,56 +1,57 @@
-import { FC, ReactElement } from 'react';
+import React, { FC, ReactElement } from 'react';
 import styled from '@emotion/styled';
 import Checkbox from 'src/components/Checkbox/Checkbox';
 import colors from 'src/styles/lakefrontColors';
 
 const StyledDivider = styled.div({
-    backgroundColor: colors.alto,
-    height: 1,
-    width: '95%',
-    margin: '8px 0px'
+  backgroundColor: colors.alto,
+  height: 1,
+  width: '95%',
+  margin: '8px 0px'
 });
 
 const CheckboxGroupWrapper = styled.div({
-    display: 'flex',
-    flexDirection: 'column'
+  display: 'flex',
+  flexDirection: 'column'
 });
 
 export interface CheckboxGroupOption {
-    value: string;
-    label: string | ReactElement;
-    color?: string;
+  value: string;
+  label: string | ReactElement;
+  color?: string;
+  description?: string;
 }
 
 export interface CheckboxGroupProps {
-    /**
-     * The options that should be displayed in the checkbox group.
-     */
-    options: CheckboxGroupOption[];
-    /**
-     * These are the classes that would be applied to the Checkbox group.
-     */
-    className?: string;
-    /**
-     * The action that should be run when the checked state changes.
-     */
-    onHandleChange(items: Set<string>): void;
-    /**
-     * The name of the Checkbox group.
-     */
-    name: string;
-    /**
-     * The options that are checked when the control loads.
-     */
-    selected: Set<string>;
-    /**
-     * This option is to select or unselect all the checkboxes. 
-     * Specify the name of the label to be displayed for checkbox.
-     */
-    allLabel?: string;
-    /**
-     * This option is used to set the select all checkbox color.
-     */
-    allColor?: string;
+  /**
+   * The options that should be displayed in the checkbox group.
+   */
+  options: CheckboxGroupOption[];
+  /**
+   * These are the classes that would be applied to the Checkbox group.
+   */
+  className?: string;
+  /**
+   * The action that should be run when the checked state changes.
+   */
+  onHandleChange(items: Set<string>): void;
+  /**
+   * The name of the Checkbox group.
+   */
+  name: string;
+  /**
+   * The options that are checked when the control loads.
+   */
+  selected: Set<string>;
+  /**
+   * This option is to select or unselect all the checkboxes.
+   * Specify the name of the label to be displayed for checkbox.
+   */
+  allLabel?: string;
+  /**
+   * This option is used to set the select all checkbox color.
+   */
+  allColor?: string;
 }
 
 /**
@@ -59,80 +60,80 @@ export interface CheckboxGroupProps {
  * The CheckboxGroup component can be used to provide multiple checkbox options. The user can set default selection on
  * the checkbox group render. The All option is provided to check or uncheck all the options.
  */
-const CheckboxGroup: FC<CheckboxGroupProps> = (
-    {
-        allColor,
-        allLabel,
-        className,
-        name,
-        onHandleChange,
-        options,
-        selected
-    }) => {
-    const isItemChecked = (value: string) => {
-        return selected.has(value);
-    };
+const CheckboxGroup: FC<CheckboxGroupProps> = ({
+  allColor,
+  allLabel,
+  className,
+  name,
+  onHandleChange,
+  options,
+  selected
+}) => {
+  const isItemChecked = (value: string) => {
+    return selected.has(value);
+  };
 
-    const onItemChange = (value: string) => {
-        if (selected.has(value)) {
-            // remove item
-            selected.delete(value);
-        } else {
-            // add item
-            selected.add(value);
-        }
-        onHandleChange(new Set(selected));
-    };
+  const onItemChange = (value: string) => {
+    if (selected.has(value)) {
+      // remove item
+      selected.delete(value);
+    } else {
+      // add item
+      selected.add(value);
+    }
+    onHandleChange(new Set(selected));
+  };
 
-    const onAllItemChange = () => {
-        const isAllSelected = selected.size === options.length;
+  const onAllItemChange = () => {
+    const isAllSelected = selected.size === options.length;
 
-        let newSelection;
-        if (isAllSelected) {
-            // remove all items
-            newSelection = new Set([]);
-        } else {
-            // add all items
-            newSelection = new Set(options.map(item => item.value));
-        }
-        onHandleChange(newSelection);
-    };
+    let newSelection;
+    if (isAllSelected) {
+      // remove all items
+      newSelection = new Set([]);
+    } else {
+      // add all items
+      newSelection = new Set(options.map((item) => item.value));
+    }
+    onHandleChange(newSelection);
+  };
 
-    const isAllSelected = selected.size === options.length;
+  const isAllSelected = selected.size != 0 && selected.size === options.length;
 
-    return (
-        <CheckboxGroupWrapper className={className}>
-            {allLabel && (
-                <>
-                    <Checkbox
-                        value="all"
-                        label={allLabel}
-                        color={allColor}
-                        id={`checkbox-${name}-all`}
-                        onChange={onAllItemChange}
-                        checked={isAllSelected}
-                    />
-                    <StyledDivider />
-                </>
-            )}
+  return (
+    <CheckboxGroupWrapper className={className}>
+      {allLabel && (
+        <>
+          <Checkbox
+            value="all"
+            label={allLabel}
+            color={allColor}
+            id={`checkbox-${name}-all`}
+            onChange={onAllItemChange}
+            checked={isAllSelected}
+          />
+          <StyledDivider />
+        </>
+      )}
 
-            {options.map(option => {
-                const isSelected = isItemChecked(option.value);
-                const checkBoxId = `checkbox-${name}-${option.value}`;
-                return (
-                    <Checkbox
-                        key={option.value}
-                        value={option.value}
-                        label={option.label}
-                        id={checkBoxId}
-                        onChange={(evt) => onItemChange(evt.target.value)}
-                        checked={isSelected}
-                        color={option.color}
-                    />
-                );
-            })}
-        </CheckboxGroupWrapper>
-    );
+      {options.map((option) => {
+        const isSelected = isItemChecked(option.value);
+        const checkBoxId = `checkbox-${name}-${option.value}`;
+        return (
+          <Checkbox
+            key={option.value}
+            value={option.value}
+            label={option.label}
+            description={option.description}
+            id={checkBoxId}
+            onChange={(evt) => onItemChange(evt.target.value)}
+            checked={isSelected}
+            color={option.color}
+          />
+        );
+      })}
+    </CheckboxGroupWrapper>
+  );
 };
 
 export default CheckboxGroup;