@bspk/ui 1.3.7 → 1.3.9

package/src/components/Chip/Chip.tsx

@@ -63,13 +63,9 @@ export type ChipProps = {
  * @example
  *     import { Chip } from '@bspk/ui/Chip';
  *
- *     function Example() {
- *         return (
- *             <Chip label="Label" onClick={() => console.log('Chip clicked!')}>
- *                 Example Chip
- *             </Chip>
- *         );
- *     }
+ *     <Chip label="Label" onClick={() => sendSnackbar('Chip clicked!')}>
+ *         Example Chip
+ *     </Chip>;
  *
  * @name Chip
  * @phase UXReview

package/src/components/Chip/ChipExample.tsx

@@ -6,6 +6,9 @@ export const presets: Preset<ChipProps>[] = [
         label: 'Basic',
         propState: {
             label: 'chip',
+            leadingIcon: undefined,
+            trailingIcon: undefined,
+            trailingBadge: undefined,
         },
     },
     {
@@ -13,15 +16,17 @@ export const presets: Preset<ChipProps>[] = [
         propState: {
             label: 'chip',
             leadingIcon: 'Add',
-            trailingIcon: '',
+            trailingIcon: undefined,
+            trailingBadge: undefined,
         },
     },
     {
         label: 'Trailing Icon',
         propState: {
             label: 'chip',
-            leadingIcon: '',
+            leadingIcon: undefined,
             trailingIcon: 'Add',
+            trailingBadge: undefined,
         },
     },
     {
@@ -30,6 +35,7 @@ export const presets: Preset<ChipProps>[] = [
             label: 'chip',
             leadingIcon: 'Add',
             trailingIcon: 'Add',
+            trailingBadge: undefined,
         },
     },
     {
@@ -38,6 +44,7 @@ export const presets: Preset<ChipProps>[] = [
             label: 'chip',
             leadingIcon: 'Bumblebee',
             trailingIcon: 'Rabbit',
+            trailingBadge: undefined,
         },
     },
     {
@@ -45,7 +52,7 @@ export const presets: Preset<ChipProps>[] = [
         propState: {
             label: 'chip',
             leadingIcon: 'Add',
-            trailingIcon: '',
+            trailingIcon: undefined,
             trailingBadge: { count: 2, size: 'x-small' as BadgeItem['size'] },
         },
     },
@@ -57,6 +64,48 @@ export const presets: Preset<ChipProps>[] = [
             trailingBadge: { count: 2, size: 'x-small' as BadgeItem['size'] },
         },
     },
+    {
+        label: 'Assist Chip',
+        propState: {
+            label: 'Assist Chip',
+            leadingIcon: 'Cloud',
+            trailingIcon: undefined,
+            trailingBadge: undefined,
+        },
+        designPattern:
+            'A dynamic action element that helps trigger and perform an action for the customer. A supplement option to buttons. ',
+    },
+    {
+        label: 'Filter Chip',
+        propState: {
+            label: 'Filter Chip',
+            leadingIcon: 'Cloud',
+            trailingIcon: 'KeyboardArrowDown',
+            trailingBadge: undefined,
+        },
+        designPattern: 'Short form descriptive words that filter out content or represent active filter setting.',
+    },
+    {
+        label: 'Input Chip',
+        propState: {
+            label: 'Input Chip',
+            leadingIcon: 'Cloud',
+            trailingIcon: 'Close',
+            trailingBadge: undefined,
+        },
+        designPattern:
+            'A range of short form key words or pieces of information a customer enters within multi entry field.',
+    },
+    {
+        label: 'Suggest Chip',
+        propState: {
+            label: 'Suggest Chip',
+            leadingIcon: undefined,
+            trailingIcon: undefined,
+            trailingBadge: undefined,
+        },
+        designPattern: 'Dynamically generated options that are suggested to the customer as responses or prompts. ',
+    },
 ];
 
 export const ChipExample: ComponentExample<ChipProps> = {

package/src/components/ChipGroup/ChipGroup.tsx

@@ -23,18 +23,29 @@ export type ChipGroupProps = {
  * A component that manages the layout of a group of chips.
  *
  * @example
- *     import { ChipGroup } from '@bspk/ui/ChipGroup';
  *     import { Chip } from '@bspk/ui/Chip';
+ *     import { ChipGroup } from '@bspk/ui/ChipGroup';
  *
- *     function Example() {
- *         return (
- *             <ChipGroup wrap={false}>
- *                 <Chip label="chip 1" onClick={() => console.log('Chip 1')} />
- *                 <Chip label="chip 2" onClick={() => console.log('Chip 2')} />
- *                 <Chip label="chip 3" onClick={() => console.log('Chip 3')} />
- *             </ChipGroup>
- *         );
- *     }
+ *     <ChipGroup wrap={false}>
+ *         <Chip
+ *             label="chip 1"
+ *             leadingIcon={<SvgLightbulb />}
+ *             onClick={() => action('Chip clicked!')}
+ *             trailingIcon={<SvgChevronRight />}
+ *         />
+ *         <Chip
+ *             label="chip 2"
+ *             leadingIcon={<SvgIcecream />}
+ *             onClick={() => action('Chip clicked!')}
+ *             trailingIcon={<SvgChevronRight />}
+ *         />
+ *         <Chip
+ *             label="chip 3"
+ *             leadingIcon={<SvgSignLanguage />}
+ *             onClick={() => action('Chip clicked!')}
+ *             trailingIcon={<SvgClose />}
+ *         />
+ *     </ChipGroup>;
  *
  * @name ChipGroup
  * @phase UXReview

package/src/components/ChipGroup/ChipGroupExample.tsx

@@ -17,10 +17,10 @@ export const presets: Preset<ChipGroupProps>[] = [
 ];
 
 export const ChipGroupExample: ComponentExampleFn<ChipGroupProps> = ({ action }) => ({
+    containerStyle: { width: '600px' },
     presets,
     render: ({ props, Component }) => {
         const handleChipInputClick = () => action('Chip clicked!');
-
         return (
             <Component {...props}>
                 <Chip

package/src/components/DatePicker/DatePicker.tsx

@@ -40,22 +40,23 @@ export type DatePickerProps = FieldControlProps<Date | undefined> &
  *     import { Field, FieldLabel } from '@bspk/ui/Field';
  *     import { useState } from 'react';
  *
- *     function ExampleStandalone() {
- *         const [date, setDate] = useState<Date | undefined>(new Date());
- *         return <DatePicker aria-label="Date" name="date2" value={date} onChange={setDate} />;
- *     }
- *
- *     function ExampleWithField() {
+ *     () => {
  *         const [date, setDate] = useState<Date | undefined>(new Date());
  *
  *         return (
- *             <Field>
- *                 <FieldLabel>Date</FieldLabel>
- *                 <DatePicker name="date1" value={date} onChange={setDate} />
- *                 <FieldDescription>The date picker allows you to select a date.</FieldDescription>
- *             </Field>
+ *             <>
+ *                 // standalone date picker example
+ *                 <DatePicker aria-label="Date" name="date2" value={date} onChange={setDate} />
+ *                 <br />
+ *                 // date picker used within a field
+ *                 <Field>
+ *                     <FieldLabel>Date</FieldLabel>
+ *                     <DatePicker name="date1" value={date} onChange={setDate} />
+ *                     <FieldDescription>The date picker allows you to select a date.</FieldDescription>
+ *                 </Field>
+ *             </>
  *         );
- *     }
+ *     };
  *
  * @name DatePicker
  * @phase UXReview

package/src/components/Dialog/Dialog.tsx

@@ -57,24 +57,29 @@ export type DialogProps = CommonProps<'id' | 'owner'> &
  * Dialogs display important information that users need to acknowledge. They appear over the interface and block
  * further interactions until an action is selected.
  *
+ * This is a low-level component that provides the container and functionality for dialogs. You will typically want to
+ * use a higher-level component that provides a consistent UI and behavior for dialogs such as Modal.
+ *
  * @example
  *     import { Dialog } from '@bspk/ui/Dialog';
  *     import { Button } from '@bspk/ui/Button';
  *
- *     function Example() {
- *         const [open, setOpen] = React.useState(false);
+ *     () => {
+ *         const [open, setOpen] = useState(false);
  *
  *         return (
  *             <>
  *                 <Button label="Open Dialog" onClick={() => setOpen(true)} />
  *                 <Dialog open={open} onClose={() => setOpen(false)}>
- *                     <h1>Dialog Title</h1>
- *                     <p>This is the content of the dialog.</p>
- *                     <button onClick={() => setOpen(false)}>Close</button>
+ *                     <div style={{ padding: 'var(--spacing-sizing-04)' }}>
+ *                         <h1>Dialog Title</h1>
+ *                         <p>This is the content of the dialog.</p>
+ *                         <Button label="Cancel" variant="secondary" onClick={() => setOpen(false)} />
+ *                     </div>
  *                 </Dialog>
  *             </>
  *         );
- *     }
+ *     };
  *
  * @name Dialog
  * @phase Utility

package/src/components/Divider/Divider.tsx

@@ -46,15 +46,11 @@ const insetToVariable = (insetProp: number | string) => {
  * @example
  *     import { Divider } from '@bspk/ui/Divider';
  *
- *     function Example() {
- *         return (
- *             <div>
- *                 <p>Content above the divider</p>
- *                 <Divider orientation="horizontal" />
- *                 <p>Content below the divider</p>
- *             </div>
- *         );
- *     }
+ *     <div>
+ *         <p>Content above the divider</p>
+ *         <Divider orientation="horizontal" />
+ *         <p>Content below the divider</p>
+ *     </div>;
  *
  * @name Divider
  * @phase UXReview

package/src/components/Divider/DividerExample.tsx

@@ -26,5 +26,22 @@ export const DividerExample: ComponentExample<DividerProps> = {
             </div>
         );
     },
-    presets,
+    presets: [
+        {
+            label: 'Divider - Horizontal',
+            designPattern:
+                'Horizontal thin line that separates grouped content in a list or other containers with the option to include a section/group label.',
+            propState: {
+                orientation: 'horizontal',
+            },
+        },
+        {
+            label: 'Divider - Vertical',
+            designPattern:
+                'Vertical thin line that separates grouped content or other visual elements within a container.',
+            propState: {
+                orientation: 'vertical',
+            },
+        },
+    ],
 };

package/src/components/Drawer/Drawer.tsx

@@ -52,8 +52,8 @@ export type DrawerProps = Pick<DialogProps, 'container' | 'disableFocusTrap' | '
  *     import { Button } from '@bspk/ui/Button';
  *     import { Drawer } from '@bspk/ui/Drawer';
  *
- *     function Example() {
- *         const [open, setOpen] = React.useState(false);
+ *     () => {
+ *         const [open, setOpen] = useState(false);
  *
  *         return (
  *             <>
@@ -71,7 +71,7 @@ export type DrawerProps = Pick<DialogProps, 'container' | 'disableFocusTrap' | '
  *                 </Drawer>
  *             </>
  *         );
- *     }
+ *     };
  *
  * @name Drawer
  * @phase UXReview

package/src/components/EmptyState/EmptyState.tsx

@@ -41,13 +41,9 @@ export type EmptyStateProps = {
  * @example
  *     import { EmptyState } from '@bspk/ui/EmptyState';
  *
- *     function Example() {
- *         return (
- *             <EmptyState body="Example body" header="Example header">
- *                 Example EmptyState
- *             </EmptyState>
- *         );
- *     }
+ *     <EmptyState body="Example body" header="Example header">
+ *         Example EmptyState
+ *     </EmptyState>;
  *
  * @name EmptyState
  * @phase UXReview

package/src/components/Fab/Fab.tsx

@@ -4,11 +4,13 @@ import { ButtonProps } from '-/components/Button';
 import { Tooltip, TooltipTriggerProps } from '-/components/Tooltip';
 import { ElementProps } from '-/types/common';
 
+export type FabSize = 'medium' | 'small';
+
 export type FabVariant = 'neutral' | 'primary' | 'secondary';
 
 export type FabProps<As extends ElementType = ElementType> = Pick<
     ButtonProps<As>,
-    'as' | 'icon' | 'iconOnly' | 'onClick' | 'toolTip'
+    'as' | 'icon' | 'iconOnly' | 'innerRef' | 'onClick' | 'toolTip'
 > &
     Required<Pick<ButtonProps<As>, 'label'>> & {
         /**
@@ -16,7 +18,7 @@ export type FabProps<As extends ElementType = ElementType> = Pick<
          *
          * @default small
          */
-        size?: 'medium' | 'small';
+        size?: FabSize;
         /**
          * The style variant of the button.
          *
@@ -45,9 +47,7 @@ export type FabProps<As extends ElementType = ElementType> = Pick<
  *     import { SvgBolt } from '@bspk/icons/Bolt';
  *     import { Fab } from '@bspk/ui/Fab';
  *
- *     function Example() {
- *         return <Fab icon={<SvgBolt />} label="Example label" placement="bottom-right" variant="neutral" />;
- *     }
+ *     <Fab icon={<SvgBolt />} label="Example label" placement="bottom-right" variant="neutral" />;
  *
  * @name Fab
  * @phase UXReview
@@ -63,6 +63,7 @@ export function Fab<As extends ElementType = ElementType>(props: AriaAttributes
         label,
         icon,
         toolTip,
+        innerRef,
         ...otherProps
     } = props;
 
@@ -77,6 +78,7 @@ export function Fab<As extends ElementType = ElementType>(props: AriaAttributes
             data-bspk="fab"
             data-container={container}
             data-placement={placement}
+            data-position={container === 'page' ? 'fixed' : 'absolute'}
             data-round={iconOnly || undefined}
             data-size={size}
             data-variant={variant}
@@ -96,6 +98,7 @@ export function Fab<As extends ElementType = ElementType>(props: AriaAttributes
                 triggerProps.onMouseOver?.();
                 otherProps.onMouseOver?.(e);
             }}
+            ref={innerRef}
         >
             {!!icon && isValidElement(icon) && (
                 <span aria-hidden={true} data-fab-icon>

package/src/components/Fab/FabExample.tsx

@@ -1,10 +1,29 @@
+import { FabProps } from './Fab';
 import { ButtonExample } from '-/components/Button/ButtonExample';
 import { ComponentExample } from '-/utils/demo';
 
 export const presets = ButtonExample.presets || [];
 
-export const FabExample: ComponentExample = {
+export const FabExample: ComponentExample<FabProps> = {
     containerStyle: { display: 'block', height: '152px', width: '100%' },
-    presets,
-    variants: false,
+    presets: ButtonExample.presets?.map((preset) => ({
+        ...preset,
+        propState: {
+            ...preset.propState,
+            size: undefined,
+            variant: undefined,
+        },
+    })),
+    defaultState: {
+        container: 'local',
+        placement: 'bottom-right',
+    },
+    variants: {
+        container: false,
+        placement: false,
+        iconOnly: {
+            icon: 'MenuBook',
+            label: 'Menu Book',
+        },
+    },
 };

package/src/components/Field/Field.tsx

@@ -42,9 +42,9 @@ const isComponentName = (
  *     import { Input } from '@bspk/ui/Input';
  *     import { Field, FieldLabel, FieldDescription, FieldError } from '@bspk/ui/Field';
  *
- *     function Example() {
- *         const [state, setState] = React.useState<string | undefined>(undefined);
- *         const [error, setError] = React.useState<string | undefined>(undefined);
+ *     () => {
+ *         const [state, setState] = useState<string | undefined>(undefined);
+ *         const [error, setError] = useState<string | undefined>(undefined);
  *
  *         return (
  *             <Field label="Example label">
@@ -56,13 +56,12 @@ const isComponentName = (
  *                         setState(next);
  *                     }}
  *                     value={state}
- *                     {...fieldProps}
  *                 />
  *                 <FieldDescription>This is an example description.</FieldDescription>
  *                 {error && <FieldError>{error}</FieldError>}
  *             </Field>
  *         );
- *     }
+ *     };
  *
  * @name Field
  * @phase Utility

package/src/components/FileUpload/FileUpload.tsx

@@ -73,7 +73,7 @@ export type FileUploadProps = Pick<FileUploadItemProps, 'cancelButtonLabel' | 'o
  * @example
  *     import { FileUpload } from '@bspk/ui/FileUpload';
  *
- *     function Example() {
+ *     () => {
  *         const [files, setFiles] = useState([]);
  *         return (
  *             <FileUpload
@@ -82,12 +82,12 @@ export type FileUploadProps = Pick<FileUploadItemProps, 'cancelButtonLabel' | 'o
  *                 acceptedFileTypes={['image/png', 'image/gif', 'image/svg+xml']}
  *                 files={files}
  *                 maxFileSize={5}
- *                 onError={(errorFiles) => console.log('Upload error:', errorFiles)}
+ *                 onError={(errorFiles) => sendSnackbar('Upload error:', errorFiles)}
  *                 onUpload={(uploadFiles) => setFiles(uploadFiles)}
  *                 uploadSubtitle="SVG, PNG, JPG or GIF (max. 5MB)"
  *             />
  *         );
- *     }
+ *     };
  *
  * @name FileUpload
  * @phase UXReview

package/src/components/FileUploadItem/FileUploadItem.tsx

@@ -30,16 +30,12 @@ export type FileUploadItemProps = FileEntry & {
  * @example
  *     import { FileUploadItem } from '@bspk/ui/FileUploadItem';
  *
- *     function Example() {
- *         return (
- *             <FileUploadItem
- *                 fileName="dunder-mifflin-paper-co.jpg"
- *                 fileSize="1.43 mb"
- *                 status="Uploading"
- *                 onCancel={() => console.log('Cancel item clicked!')}
- *             />
- *         );
- *     }
+ *     <FileUploadItem
+ *         fileName="dunder-mifflin-paper-co.jpg"
+ *         fileSize="1.43 mb"
+ *         status="Uploading"
+ *         onCancel={() => sendSnackbar('Cancel item clicked!')}
+ *     />;
  *
  * @name FileUploadItem
  * @phase UXReview

package/src/components/FormField/FormField.tsx

@@ -54,26 +54,15 @@ export type FormFieldProps<As extends ElementType = ElementType> = CommonProps<'
  *     import { Input } from '@bspk/ui/Input';
  *     import { FormField } from '@bspk/ui/FormField';
  *
- *     function Example() {
- *         const [state, setState] = React.useState<string | undefined>(undefined);
+ *     () => {
+ *         const [state, setState] = useState<string | undefined>(undefined);
+ *
  *         return (
  *             <FormField controlId="Example controlId" label="Example label">
- *                 {(fieldProps) => {
- *                     return (
- *                         <Input
- *                             aria-label="example aria-label"
- *                             name="example-text"
- *                             onChange={(next) => {
- *                                 setState(next);
- *                             }}
- *                             value={state}
- *                             {...fieldProps}
- *                         />
- *                     );
- *                 }}
+ *                 <Input name="example-text" onChange={(next) => setState(next)} value={state} />
  *             </FormField>
  *         );
- *     }
+ *     };
  *
  * @name FormField
  * @phase Utility

package/src/components/Img/Img.tsx

@@ -21,9 +21,7 @@ export type ImgProps = {
  * @example
  *     import { Img } from '@bspk/ui/Img';
  *
- *     function Example() {
- *         return <Img alt="Example alt" src="Example src" />;
- *     }
+ *     <Img alt="Example alt" src="Example src" />;
  *
  * @name Img
  * @phase Backlog

package/src/components/InlineAlert/InlineAlert.tsx

@@ -32,9 +32,7 @@ export type InlineAlertProps = CommonProps<'owner'> & {
  * @example
  *     import { InlineAlert } from '@bspk/ui/InlineAlert';
  *
- *     function Example() {
- *         return <InlineAlert variant="informational">Example informational inline alert</InlineAlert>;
- *     }
+ *     <InlineAlert variant="informational">Example informational inline alert</InlineAlert>;
  *
  * @name InlineAlert
  * @phase UXReview

package/src/components/Input/Input.tsx

@@ -15,23 +15,23 @@ export type InputProps = Omit<InputElementProps, 'ariaDescribedBy' | 'ariaErrorM
  *     import { Input } from '@bspk/ui/Input';
  *     import { Field, FieldLabel } from '@bspk/ui/Field';
  *
- *     function Example() {
+ *     () => {
  *         const [value, setValue] = useState('');
  *
  *         return (
- *             <Field>
- *                 <FieldLabel>Example Label</FieldLabel>
- *                 <Input name="example-name" onChange={setValue} value={value} />
- *                 <FieldDescription>This is an example input field.</FieldDescription>
- *             </Field>
+ *             <>
+ *                 // standalone input example
+ *                 <Input aria-label="Example Input" name="example-name" onChange={setValue} value={value} />
+ *                 <br />
+ *                 // input used within a field
+ *                 <Field>
+ *                     <FieldLabel>Example Label</FieldLabel>
+ *                     <Input name="example-name" onChange={setValue} value={value} />
+ *                     <FieldDescription>This is an example input field.</FieldDescription>
+ *                 </Field>
+ *             </>
  *         );
- *     }
- *
- *     function ExampleWithAriaLabel() {
- *         const [value, setValue] = useState('');
- *
- *         return <Input aria-label="Example Input" name="example-name" onChange={setValue} value={value} />;
- *     }
+ *     };
  *
  * @name Input
  * @phase UXReview

package/src/components/Input/InputElement.tsx

@@ -67,16 +67,22 @@ export type InputElementProps = InputElementBaseProps & {
  *     import { InputElement } from '@bspk/ui/InputElement';
  *     import { Field, FieldLabel } from '@bspk/ui/Field';
  *
- *     function Example() {
+ *     () => {
  *         const [value, setValue] = useState('');
  *
  *         return (
- *             <Field>
- *                 <FieldLabel>Example Label</FieldLabel>
+ *             <>
+ *                 // standalone input element example
  *                 <InputElement name="example-name" onChange={setValue} value={value} />
- *             </Field>
+ *                 <br />
+ *                 // input element used within a field
+ *                 <Field>
+ *                     <FieldLabel>Example Label</FieldLabel>
+ *                     <InputElement name="example-name" onChange={setValue} value={value} />
+ *                 </Field>
+ *             </>
  *         );
- *     }
+ *     };
  *
  * @name InputElement
  * @phase Utility

package/src/components/Input/InputExample.tsx

@@ -6,6 +6,7 @@ export type InputExampleProps = InputProps & { label: string; description?: stri
 export const InputExample: ComponentExample<InputExampleProps> = {
     defaultState: {
         label: 'Property Description',
+        'aria-label': 'input aria-label',
         description: 'This is a description of the property.',
         placeholder: 'Waterfront condo with great views',
     },