@bspk/ui 1.3.3 → 1.3.5

package/src/components/CheckboxOption/CheckboxOption.tsx

@@ -1,7 +1,8 @@
 import { CheckboxProps, Checkbox } from '-/components/Checkbox';
 import { ToggleOption, ToggleOptionControlProps } from '-/components/ToggleOption';
+import { CommonProps } from '-/types/common';
 
-export type CheckboxOptionProps = ToggleOptionControlProps<CheckboxProps>;
+export type CheckboxOptionProps = CommonProps<'style'> & ToggleOptionControlProps<CheckboxProps>;
 
 /**
  * A control that allows users to choose one or more items from a list or turn an feature on or off.
@@ -36,6 +37,7 @@ export function CheckboxOption({
     description,
     disabled,
     readOnly,
+    style,
     ...checkboxProps
 }: CheckboxOptionProps) {
     const label = labelProp || description;
@@ -48,6 +50,7 @@ export function CheckboxOption({
                 disabled={disabled}
                 label={label}
                 readOnly={readOnly}
+                style={style}
             >
                 <Checkbox {...checkboxProps} aria-label={ariaLabel} disabled={disabled} readOnly={readOnly} />
             </ToggleOption>

package/src/components/{ChipUtility/ChipUtility.rtl.test.tsx → Chip/Chip.rtl.test.tsx}

@@ -1,15 +1,15 @@
-import { ChipUtility } from './ChipUtility';
-import { presets } from './ChipUtilityExample';
+import { Chip } from './Chip';
+import { presets } from './ChipExample';
 import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
 import { render } from '-/rtl/util';
 
-describe('ChipUtility (RTL)', () => {
+describe('Chip (RTL)', () => {
     presets.forEach((preset) => {
-        it(`has no basic a11y issues - ${preset.label}`, hasNoBasicA11yIssues(<ChipUtility {...preset.propState} />));
+        it(`has no basic a11y issues - ${preset.label}`, hasNoBasicA11yIssues(<Chip {...preset.propState} />));
     });
 
     it('renders', () => {
-        const { getByText } = render(<ChipUtility {...presets[0].propState} />);
+        const { getByText } = render(<Chip {...presets[0].propState} />);
 
         expect(getByText('chip')).toBeInTheDocument();
     });

package/src/components/{ChipUtility/ChipUtility.tsx → Chip/Chip.tsx}

@@ -1,10 +1,10 @@
-import './chip-utility.scss';
+import './chip.scss';
 import { ReactNode, isValidElement } from 'react';
 import { Badge, BadgeProps } from '-/components/Badge';
 
 export type BadgeItem = Pick<BadgeProps, 'count' | 'size' | 'surfaceBorder'>;
 
-export type ChipUtilityProps = {
+export type ChipProps = {
     /**
      * Is the chip disabled.
      *
@@ -61,7 +61,7 @@ export type ChipUtilityProps = {
  * Dynamically generated options that are suggested to the user as responses or prompts.
  *
  * @example
- *     import { ChipUtility } from '@bspk/ui/ChipUtility';
+ *     import { Chip } from '@bspk/ui/Chip';
  *
  *     function Example() {
  *         return (
@@ -71,10 +71,10 @@ export type ChipUtilityProps = {
  *         );
  *     }
  *
- * @name ChipUtility
- * @phase Utility
+ * @name Chip
+ * @phase UXReview
  */
-export function ChipUtility({
+export function Chip({
     flat = false,
     disabled = false,
     label,
@@ -83,10 +83,10 @@ export function ChipUtility({
     onClick,
     trailingIcon,
     trailingBadge,
-}: ChipUtilityProps) {
+}: ChipProps) {
     return (
         <button
-            data-bspk-utility="chip-utility"
+            data-bspk="chip"
             data-disabled={disabled || undefined}
             data-flat={flat || undefined}
             data-selected={selected || undefined}
@@ -94,26 +94,24 @@ export function ChipUtility({
             disabled={disabled}
             onClick={disabled ? undefined : onClick}
         >
-            <>
-                {isValidElement(leadingIcon) && (
-                    <span aria-hidden="true" data-chip-icon>
-                        {leadingIcon}
-                    </span>
-                )}
-                <span>{label}</span>
-                {isValidElement(trailingIcon) && (
-                    <span aria-hidden="true" data-chip-icon>
-                        {trailingIcon}
-                    </span>
-                )}
-                {trailingBadge && !trailingIcon && (
-                    <Badge
-                        count={trailingBadge.count}
-                        size={trailingBadge.size}
-                        surfaceBorder={trailingBadge.surfaceBorder}
-                    />
-                )}
-            </>
+            {isValidElement(leadingIcon) && (
+                <span aria-hidden="true" data-chip-icon>
+                    {leadingIcon}
+                </span>
+            )}
+            <span>{label}</span>
+            {isValidElement(trailingIcon) && (
+                <span aria-hidden="true" data-chip-icon>
+                    {trailingIcon}
+                </span>
+            )}
+            {trailingBadge && !trailingIcon && (
+                <Badge
+                    count={trailingBadge.count}
+                    size={trailingBadge.size}
+                    surfaceBorder={trailingBadge.surfaceBorder}
+                />
+            )}
             <span data-touch-target />
         </button>
     );

package/src/components/{ChipUtility/ChipUtilityExample.tsx → Chip/ChipExample.tsx}

@@ -1,7 +1,7 @@
-import { BadgeItem, ChipUtilityProps } from '.';
+import { BadgeItem, ChipProps } from '.';
 import { ComponentExample, Preset } from '-/utils/demo';
 
-export const presets: Preset<ChipUtilityProps>[] = [
+export const presets: Preset<ChipProps>[] = [
     {
         label: 'Basic',
         propState: {
@@ -59,7 +59,7 @@ export const presets: Preset<ChipUtilityProps>[] = [
     },
 ];
 
-export const ChipUtilityExample: ComponentExample<ChipUtilityProps> = {
+export const ChipExample: ComponentExample<ChipProps> = {
     render: ({ props, Component }) => <Component {...props} />,
     presets,
 };

package/src/components/{ChipUtility/chip-utility.scss → Chip/chip.scss}

@@ -1,4 +1,4 @@
-[data-bspk-utility='chip-utility'] {
+[data-bspk='chip'] {
     flex-direction: row;
     gap: var(--spacing-sizing-02);
     height: var(--spacing-sizing-08);

package/src/components/Chip/index.tsx

@@ -0,0 +1 @@
+export * from './Chip';

package/src/components/ChipGroup/ChipGroup.rtl.test.tsx

@@ -1,6 +1,6 @@
 import { ChipGroup } from './ChipGroup';
 import { presets } from './ChipGroupExample';
-import { ChipSuggestion } from '-/components/ChipSuggestion';
+import { Chip } from '-/components/Chip';
 import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
 import { render } from '-/rtl/util';
 
@@ -10,9 +10,9 @@ describe('ChipGroup (RTL)', () => {
             `has no basic a11y issues - ${preset.label}`,
             hasNoBasicA11yIssues(
                 <ChipGroup {...preset.propState}>
-                    <ChipSuggestion label="suggestion 1" onClick={() => {}} />
-                    <ChipSuggestion label="suggestion 2" onClick={() => {}} />
-                    <ChipSuggestion label="suggestion 3" onClick={() => {}} />
+                    <Chip label="suggestion 1" onClick={() => {}} />
+                    <Chip label="suggestion 2" onClick={() => {}} />
+                    <Chip label="suggestion 3" onClick={() => {}} />
                 </ChipGroup>,
             ),
         );
@@ -21,9 +21,9 @@ describe('ChipGroup (RTL)', () => {
     it('renders', () => {
         const { getByText } = render(
             <ChipGroup {...presets[1].propState}>
-                <ChipSuggestion label="suggestion 1" onClick={() => {}} />
-                <ChipSuggestion label="suggestion 2" onClick={() => {}} />
-                <ChipSuggestion label="suggestion 3" onClick={() => {}} />
+                <Chip label="suggestion 1" onClick={() => {}} />
+                <Chip label="suggestion 2" onClick={() => {}} />
+                <Chip label="suggestion 3" onClick={() => {}} />
             </ChipGroup>,
         );
 

package/src/components/ChipGroup/ChipGroup.tsx

@@ -2,10 +2,10 @@ import './chip-group.scss';
 
 import { ReactNode } from 'react';
 
-import { ChipUtilityProps } from '-/components/ChipUtility';
+import { ChipProps } from '-/components/Chip';
 
 export type ChipGroupItem = Pick<
-    ChipUtilityProps,
+    ChipProps,
     'disabled' | 'flat' | 'label' | 'leadingIcon' | 'onClick' | 'selected' | 'trailingBadge' | 'trailingIcon'
 >;
 
@@ -16,21 +16,22 @@ export type ChipGroupProps = {
      * @default true
      */
     wrap?: boolean;
-    /** Only ChipUtility, ChipInput, ChipFilter, ChipSuggestion, or ChipAssist components should be used as children. */
+    /** Only Chip components should be used as children. */
     children?: ReactNode;
 };
 /**
- * A group of chips that can be used to display a set of related items or actions.
+ * A component that manages the layout of a group of chips.
  *
  * @example
  *     import { ChipGroup } from '@bspk/ui/ChipGroup';
+ *     import { Chip } from '@bspk/ui/Chip';
  *
  *     function Example() {
  *         return (
  *             <ChipGroup wrap={false}>
- *                 <ChipSuggestion label="suggestion 1" onClick={() => console.log('Suggestion 1')} />
- *                 <ChipSuggestion label="suggestion 2" onClick={() => console.log('Suggestion 2')} />
- *                 <ChipSuggestion label="suggestion 3" onClick={() => console.log('Suggestion 3')} />
+ *                 <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>
  *         );
  *     }

package/src/components/ChipGroup/ChipGroupExample.tsx

@@ -7,153 +7,53 @@ import { SvgLightbulb } from '@bspk/icons/Lightbulb';
 import { SvgOpportunities } from '@bspk/icons/Opportunities';
 import { SvgSignLanguage } from '@bspk/icons/SignLanguage';
 
-import { ChipAssist } from '-/components/ChipAssist';
-import { ChipFilter } from '-/components/ChipFilter';
-import { ChipGroup, ChipGroupProps } from '-/components/ChipGroup';
-import { ChipInput } from '-/components/ChipInput';
-import { ChipSuggestion } from '-/components/ChipSuggestion';
-import { ChipUtility } from '-/components/ChipUtility';
+import { Chip } from '-/components/Chip';
+import { ChipGroupProps } from '-/components/ChipGroup';
 import { ComponentExampleFn, Preset } from '-/utils/demo';
 
 export const presets: Preset<ChipGroupProps>[] = [
-    { label: 'wrap', propState: { wrap: true } },
     { label: 'scroll', propState: { wrap: false } },
-    { label: 'suggestion', propState: { wrap: true } },
-    { label: 'assist', propState: { wrap: true } },
-    { label: 'input', propState: { wrap: true } },
-    { label: 'filter', propState: { wrap: true } },
+    { label: 'wrap', propState: { wrap: true } },
 ];
 
 export const ChipGroupExample: ComponentExampleFn<ChipGroupProps> = ({ action }) => ({
     presets,
-    // containerStyle: { width: '100%' },
-    render: ({ props, preset }) => {
-        if (!preset) return null;
-
+    render: ({ props, Component }) => {
         const handleChipInputClick = () => action('Chip clicked!');
 
-        switch (preset.label) {
-            case 'wrap':
-                return (
-                    <ChipGroup {...props}>
-                        <ChipUtility
-                            label="chip 1"
-                            leadingIcon={<SvgLightbulb />}
-                            onClick={handleChipInputClick}
-                            trailingIcon={<SvgChevronRight />}
-                        />
-                        <ChipUtility
-                            label="chip 2"
-                            leadingIcon={<SvgIcecream />}
-                            onClick={handleChipInputClick}
-                            trailingIcon={<SvgChevronRight />}
-                        />
-                        <ChipUtility
-                            label="chip 3"
-                            leadingIcon={<SvgSignLanguage />}
-                            onClick={handleChipInputClick}
-                            trailingIcon={<SvgClose />}
-                        />
-                        <ChipUtility
-                            label="chip 4"
-                            leadingIcon={<SvgOpportunities />}
-                            onClick={handleChipInputClick}
-                            trailingIcon={<SvgClose />}
-                        />
-                        <ChipUtility
-                            label="chip 5"
-                            leadingIcon={<SvgCloud />}
-                            onClick={handleChipInputClick}
-                            trailingIcon={<SvgKeyboardArrowDown />}
-                        />
-                    </ChipGroup>
-                );
-            case 'scroll':
-                return (
-                    <ChipGroup {...props}>
-                        <ChipUtility
-                            label="chip 1"
-                            leadingIcon={<SvgLightbulb />}
-                            onClick={handleChipInputClick}
-                            trailingIcon={<SvgChevronRight />}
-                        />
-                        <ChipUtility
-                            label="chip 2"
-                            leadingIcon={<SvgIcecream />}
-                            onClick={handleChipInputClick}
-                            trailingIcon={<SvgChevronRight />}
-                        />
-                        <ChipUtility
-                            label="chip 3"
-                            leadingIcon={<SvgSignLanguage />}
-                            onClick={handleChipInputClick}
-                            trailingIcon={<SvgClose />}
-                        />
-                        <ChipUtility
-                            label="chip 4"
-                            leadingIcon={<SvgOpportunities />}
-                            onClick={handleChipInputClick}
-                            trailingIcon={<SvgClose />}
-                        />
-                        <ChipUtility
-                            label="chip 5"
-                            leadingIcon={<SvgCloud />}
-                            onClick={handleChipInputClick}
-                            trailingIcon={<SvgKeyboardArrowDown />}
-                        />
-                    </ChipGroup>
-                );
-            case 'suggestion':
-                return (
-                    <ChipGroup {...props}>
-                        <ChipSuggestion label="suggestion 1" onClick={handleChipInputClick} />
-                        <ChipSuggestion label="suggestion 2" onClick={handleChipInputClick} />
-                        <ChipSuggestion label="suggestion 3" onClick={handleChipInputClick} />
-                        <ChipSuggestion label="suggestion 4" onClick={handleChipInputClick} />
-                        <ChipSuggestion label="suggestion 5" onClick={handleChipInputClick} />
-                    </ChipGroup>
-                );
-            case 'assist':
-                return (
-                    <ChipGroup {...props}>
-                        <ChipAssist label="assist 1" leadingIcon={<SvgLightbulb />} onClick={handleChipInputClick} />
-                        <ChipAssist label="assist 2" onClick={handleChipInputClick} />
-                        <ChipAssist label="assist 3" leadingIcon={<SvgSignLanguage />} onClick={handleChipInputClick} />
-                        <ChipAssist label="assist 4" onClick={handleChipInputClick} />
-                        <ChipAssist label="assist 5" leadingIcon={<SvgCloud />} onClick={handleChipInputClick} />
-                    </ChipGroup>
-                );
-            case 'input':
-                return (
-                    <ChipGroup {...props}>
-                        <ChipInput label="input 1" onClick={handleChipInputClick} removable={false} />
-                        <ChipInput label="input 2" onClick={handleChipInputClick} />
-                        <ChipInput label="input 3" onClick={handleChipInputClick} />
-                        <ChipInput label="input 4" onClick={handleChipInputClick} />
-                        <ChipInput label="input 5" onClick={handleChipInputClick} />
-                    </ChipGroup>
-                );
-            case 'filter':
-                return (
-                    <ChipGroup {...props}>
-                        <ChipFilter label="filter 1" onClick={handleChipInputClick} trailingIcon="SvgClose" />
-                        <ChipFilter label="filter 2" onClick={handleChipInputClick} trailingIcon="SvgChevronRight" />
-                        <ChipFilter
-                            label="filter 3"
-                            onClick={handleChipInputClick}
-                            trailingIcon="SvgKeyboardArrowDown"
-                        />
-                        <ChipFilter label="filter 1" onClick={handleChipInputClick} trailingBadgeCount={5} />
-                        <ChipFilter
-                            label="filter 1"
-                            leadingIcon={<SvgIcecream />}
-                            onClick={handleChipInputClick}
-                            trailingBadgeCount={7}
-                        />
-                    </ChipGroup>
-                );
-            default:
-                return null;
-        }
+        return (
+            <Component {...props}>
+                <Chip
+                    label="chip 1"
+                    leadingIcon={<SvgLightbulb />}
+                    onClick={handleChipInputClick}
+                    trailingIcon={<SvgChevronRight />}
+                />
+                <Chip
+                    label="chip 2"
+                    leadingIcon={<SvgIcecream />}
+                    onClick={handleChipInputClick}
+                    trailingIcon={<SvgChevronRight />}
+                />
+                <Chip
+                    label="chip 3"
+                    leadingIcon={<SvgSignLanguage />}
+                    onClick={handleChipInputClick}
+                    trailingIcon={<SvgClose />}
+                />
+                <Chip
+                    label="chip 4"
+                    leadingIcon={<SvgOpportunities />}
+                    onClick={handleChipInputClick}
+                    trailingIcon={<SvgClose />}
+                />
+                <Chip
+                    label="chip 5"
+                    leadingIcon={<SvgCloud />}
+                    onClick={handleChipInputClick}
+                    trailingIcon={<SvgKeyboardArrowDown />}
+                />
+            </Component>
+        );
     },
 });

package/src/components/DatePicker/DatePicker.rtl.test.tsx

@@ -0,0 +1,17 @@
+import { DatePicker } from './';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => (
+    <DatePicker name="calendar input" onChange={() => {}} placeholder="Select Date" value={new Date()} />
+);
+
+describe('DatePicker', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders', () => {
+        const { getByPlaceholderText } = render(<TestBed />);
+
+        expect(getByPlaceholderText('Select Date')).toBeInTheDocument();
+    });
+});