@hyphen/hyphen-components 5.1.0 → 5.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "license": "MIT",
   "author": {
     "name": "@hyphen"

package/src/components/Formik/Formik.stories.tsx

@@ -19,6 +19,8 @@ import { FormikToggleGroup } from './FormikToggleGroup/FormikToggleGroup';
 import { ToggleGroupItem } from '../ToggleGroup/ToggleGroup';
 import { Tooltip, TooltipContent, TooltipProvider } from '../Tooltip/Tooltip';
 import { TooltipTrigger } from '@radix-ui/react-tooltip';
+import { FormikToggleGroupMulti } from './FormikToggleGroupMulti/FormikToggleGroupMulti';
+import { Icon } from '../Icon/Icon';
 
 const meta = {
   title: 'Patterns/Formik Form',
@@ -55,6 +57,12 @@ export const FormikForm = () =>
       { id: 'medium', value: 'medium', label: 'Medium' },
       { id: 'large', value: 'large', label: 'Large' },
     ];
+    const locationOptions = [
+      { id: 'ca', value: 'ca', label: 'Canada' },
+      { id: 'mx', value: 'mx', label: 'Mexico' },
+      { id: 'us', value: 'us', label: 'United States' },
+    ];
+
     const availabilityOptions = [
       {
         id: '99',
@@ -136,6 +144,9 @@ export const FormikForm = () =>
       if (!values.availability) {
         errors.availability = 'required';
       }
+      if (values.locations.length < 1) {
+        errors.locations = 'required';
+      }
       return errors;
     };
     const handleSubmit = (
@@ -178,9 +189,9 @@ export const FormikForm = () =>
             message: '',
             country: '',
             availability: '99',
+            locations: [] as string[],
           }}
           validate={handleValidation}
-          validateOnChange={false}
           onSubmit={handleSubmit}
         >
           {({ isSubmitting, values, setFieldValue, handleBlur, errors }) => (
@@ -344,6 +355,23 @@ export const FormikForm = () =>
                   </Field>
                 </TooltipProvider>
 
+                <FormikToggleGroupMulti
+                  name="locations"
+                  label="Locations"
+                  helpText="Select all that apply"
+                  options={locationOptions}
+                  variant="outline"
+                >
+                  {locationOptions.map((option) => (
+                    <ToggleGroupItem key={option.id} value={option.value}>
+                      {values.locations.includes(option.value) && (
+                        <Icon name="check" />
+                      )}{' '}
+                      {option.label}
+                    </ToggleGroupItem>
+                  ))}
+                </FormikToggleGroupMulti>
+
                 <DateInput
                   datePickerProps={{
                     onChange: (date) => {

package/src/components/Formik/FormikToggleGroup/FormikToggleGroup.tsx

@@ -18,7 +18,7 @@ export interface FormikToggleGroupProps {
     setFieldValue: (field: string, value: any) => void;
   };
   options: Array<{
-    id: string | number;
+    id: string;
     value: string;
     label: React.ReactNode;
     disabled?: boolean;
@@ -58,6 +58,7 @@ export const FormikToggleGroup: React.FC<FormikToggleGroupProps> = ({
           ? children
           : options.map((option) => (
               <ToggleGroupItem
+                id={option.id}
                 value={option.value}
                 key={option.id}
                 disabled={!!option.disabled}

package/src/components/Formik/FormikToggleGroupMulti/FormikToggleGroupMulti.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { FieldArray, useField } from 'formik';
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+  ToggleVariant,
+} from '../../ToggleGroup/ToggleGroup';
+import { Box } from '../../Box/Box';
+import { HelpText } from '../../HelpText/HelpText';
+
+export interface FormikToggleGroupMultiProps {
+  name: string;
+  options: Array<{
+    id: string;
+    value: string;
+    label: React.ReactNode;
+    disabled?: boolean;
+  }>;
+  helpText?: string;
+  label?: string;
+  children?: React.ReactNode;
+  variant: ToggleVariant;
+}
+
+export const FormikToggleGroupMulti = ({
+  name,
+  options,
+  helpText,
+  label,
+  children,
+  variant,
+  ...props
+}: FormikToggleGroupMultiProps) => {
+  const [field, meta, helpers] = useField(name);
+  return (
+    <Box gap="sm">
+      {(label || helpText) && (
+        <div>
+          {label && <Box fontSize="sm">{label}</Box>}
+          {helpText && <HelpText>{helpText}</HelpText>}
+        </div>
+      )}
+      <FieldArray name={name}>
+        {() => (
+          <ToggleGroup
+            {...props}
+            name={name}
+            onValueChange={(selectedValues: string[]) => {
+              helpers.setValue(selectedValues);
+              helpers.setTouched(true);
+            }}
+            value={field.value}
+            error={meta.error}
+            type="multiple"
+            variant={variant}
+          >
+            {children
+              ? children
+              : options.map((option) => (
+                  <ToggleGroupItem
+                    key={option.id}
+                    id={option.id}
+                    value={option.value}
+                    disabled={!!option.disabled}
+                  >
+                    {option.label}
+                  </ToggleGroupItem>
+                ))}
+          </ToggleGroup>
+        )}
+      </FieldArray>
+    </Box>
+  );
+};

package/src/components/ToggleGroup/ToggleGroup.tsx

@@ -7,7 +7,7 @@ import { InputValidationMessage } from '../InputValidationMessage/InputValidatio
 import { BaseSpacing, ResponsiveProp } from '../../types';
 import { cssShorthandToClasses } from '../../lib';
 
-type ToggleVariant = 'default' | 'outline';
+export type ToggleVariant = 'default' | 'outline';
 
 const ToggleGroupContext = createContext<{ variant: ToggleVariant }>({
   variant: 'default',