@bspk/ui 1.3.3 → 1.3.4

package/src/components/ChipAssist/ChipAssist.tsx

@@ -1,37 +0,0 @@
-import { ChipUtility, ChipUtilityProps } from '-/components/ChipUtility';
-
-export type ChipAssistProps = Pick<ChipUtilityProps, 'disabled' | 'label' | 'leadingIcon' | 'onClick'>;
-
-/**
- * A dynamic action element that helps trigger and perform an action for the customer. A supplement option to buttons.
- *
- * @example
- *     import { ChipAssist } from '@bspk/ui/ChipAssist';
- *     import { SvgCloud } from '@bspk/icons/Cloud';
- *
- *     function Example() {
- *         return (
- *             <ChipAssist
- *                 label="Assist Chip"
- *                 leadingIcon=<SvgCloud />
- *                 onClick={() => console.log('Assist Chip clicked')}
- *             />
- *         );
- *     }
- *
- * @name ChipAssist
- * @phase UXReview
- */
-export function ChipAssist({ disabled, label, leadingIcon, onClick }: ChipAssistProps) {
-    return (
-        <ChipUtility
-            data-bspk="chip-assist"
-            disabled={disabled}
-            label={label}
-            leadingIcon={leadingIcon}
-            onClick={onClick}
-        />
-    );
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/ChipAssist/ChipAssistExample.tsx

@@ -1,34 +0,0 @@
-import { ChipAssistProps } from '.';
-import { ComponentExampleFn, Preset } from '-/utils/demo';
-
-export const presets: Preset<ChipAssistProps>[] = [
-    {
-        label: 'Basic ChipAssist',
-        propState: {
-            label: 'chip option',
-        },
-    },
-    {
-        label: 'with leadingIcon',
-        propState: {
-            label: 'chip option',
-            leadingIcon: 'SignLanguage',
-        },
-    },
-    {
-        label: 'disabled',
-        propState: {
-            label: 'chip option',
-            leadingIcon: 'SignLanguage',
-            disabled: true,
-        },
-    },
-];
-
-export const ChipAssistExample: ComponentExampleFn<ChipAssistProps> = ({ action }) => ({
-    containerStyle: { width: '100%' },
-    render: ({ props, Component }) => {
-        return <Component {...props} onClick={() => action('ChipAssist clicked!')} />;
-    },
-    presets,
-});

package/src/components/ChipAssist/index.tsx

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

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

@@ -1,15 +0,0 @@
-import { ChipFilter } from './ChipFilter';
-import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
-import { render } from '-/rtl/util';
-
-const TestBed = () => <ChipFilter label="FilterChip" onClick={() => {}} trailingIcon="SvgChevronRight" />;
-
-describe('ChipFilter', () => {
-    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
-
-    it('renders', () => {
-        const { getByText } = render(<TestBed />);
-
-        expect(getByText('FilterChip')).toBeInTheDocument();
-    });
-});

package/src/components/ChipFilter/ChipFilter.tsx

@@ -1,75 +0,0 @@
-import { SvgChevronRight } from '@bspk/icons/ChevronRight';
-import { SvgClose } from '@bspk/icons/Close';
-import { SvgKeyboardArrowDown } from '@bspk/icons/KeyboardArrowDown';
-
-import { ChipUtility, ChipUtilityProps } from '-/components/ChipUtility';
-
-export type chipTrailingIcon = 'SvgChevronRight' | 'SvgClose' | 'SvgKeyboardArrowDown';
-
-export type ChipFilterProps = Pick<ChipUtilityProps, 'disabled' | 'label' | 'leadingIcon' | 'onClick'> & {
-    /**
-     * The trailing icon of the filter chip.
-     *
-     * You can only have one of the trailing options, a trailing icon **or** a trailing badge. If both are present the
-     * trailingIcon will be visible.
-     */
-    trailingIcon?: chipTrailingIcon;
-    /**
-     * The trailing Badge count.
-     *
-     * If a trailingIcon is provided the Badge will **not** be visible.
-     */
-    trailingBadgeCount?: number;
-};
-
-/**
- * Short form descriptive words that filter out content or represent active filter setting.
- *
- * @example
- *     import { ChipFilter } from '@bspk/ui/ChipFilter';
- *     import { SvgCloud } from '@bspk/icons/Cloud';
- *
- *     function Example() {
- *         return (
- *             <ChipFilter
- *                 label="FilterChip"
- *                 leadingIcon=<SvgCloud />
- *                 onClick={() => console.log('Filter Chip clicked')}
- *                 trailingIcon="SvgChevronRight"
- *             />
- *         );
- *     }
- *
- * @name ChipFilter
- * @phase UXReview
- */
-export function ChipFilter({
-    disabled,
-    label,
-    leadingIcon,
-    onClick,
-    trailingIcon,
-    trailingBadgeCount,
-}: ChipFilterProps) {
-    const trailingIconComponent =
-        trailingIcon === 'SvgChevronRight' ? (
-            <SvgChevronRight />
-        ) : trailingIcon === 'SvgKeyboardArrowDown' ? (
-            <SvgKeyboardArrowDown />
-        ) : trailingIcon === 'SvgClose' ? (
-            <SvgClose />
-        ) : undefined;
-    return (
-        <ChipUtility
-            data-bspk="chip-filter"
-            disabled={disabled}
-            label={label}
-            leadingIcon={leadingIcon}
-            onClick={onClick}
-            trailingBadge={trailingBadgeCount ? { count: trailingBadgeCount } : undefined}
-            trailingIcon={trailingIconComponent}
-        />
-    );
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/ChipFilter/ChipFilterExample.tsx

@@ -1,63 +0,0 @@
-import { ChipFilterProps } from '.';
-import { ComponentExampleFn } from '-/utils/demo';
-
-export const ChipFilterExample: ComponentExampleFn<ChipFilterProps> = ({ action }) => ({
-    containerStyle: { width: '100%' },
-    render: ({ props, Component }) => {
-        return <Component {...props} onClick={() => action('ChipFilter clicked!')} />;
-    },
-    presets: [
-        {
-            label: 'basic ChipFilter',
-            propState: {
-                label: 'chip option',
-                trailingIcon: undefined,
-            },
-        },
-        {
-            label: 'with leading icon',
-            propState: {
-                label: 'chip option',
-                leadingIcon: 'SignLanguage',
-            },
-        },
-        {
-            label: 'with close icon',
-            propState: {
-                label: 'chip option',
-                trailingIcon: 'SvgClose',
-            },
-        },
-        {
-            label: 'with chevron right icon',
-            propState: {
-                label: 'chip option',
-                trailingIcon: 'SvgChevronRight',
-            },
-        },
-        {
-            label: 'with keyboard arrow down icon',
-            propState: {
-                label: 'chip option',
-                trailingIcon: 'SvgKeyboardArrowDown',
-            },
-        },
-        {
-            label: 'with Badge',
-            propState: {
-                label: 'chip option',
-                trailingBadgeCount: 3,
-                trailingIcon: undefined,
-            },
-        },
-        {
-            label: 'disabled',
-            propState: {
-                label: 'chip option',
-                trailingBadgeCount: 3,
-                disabled: true,
-                trailingIcon: undefined,
-            },
-        },
-    ],
-});

package/src/components/ChipFilter/index.tsx

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

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

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

package/src/components/ChipInput/ChipInput.tsx

@@ -1,47 +0,0 @@
-import { SvgClose } from '@bspk/icons/Close';
-
-import { ChipUtility, ChipUtilityProps } from '-/components/ChipUtility';
-
-export type ChipInputProps = Pick<ChipUtilityProps, 'disabled' | 'label' | 'leadingIcon' | 'onClick'> & {
-    /**
-     * If true, a close icon will be added and the chip can be removed.
-     *
-     * @default true
-     */
-    removable?: boolean;
-};
-
-/**
- * A range of short form key words or pieces of information a customer enters within multi entry field.
- *
- * @example
- *     import { ChipInput } from '@bspk/ui/ChipInput';
- *     import { SvgCloud } from '@bspk/icons/Cloud';
- *
- *     function Example() {
- *         return (
- *             <ChipInput
- *                 label="InputChip"
- *                 leadingIcon=<SvgCloud />
- *                 onClick={() => console.log('Input Chip clicked')}
- *             />
- *         );
- *     }
- *
- * @name ChipInput
- * @phase UXReview
- */
-export function ChipInput({ disabled, label, leadingIcon, onClick, removable = true }: ChipInputProps) {
-    return (
-        <ChipUtility
-            data-bspk="chip-input"
-            disabled={disabled}
-            label={label}
-            leadingIcon={leadingIcon}
-            onClick={onClick}
-            trailingIcon={removable ? <SvgClose /> : undefined}
-        />
-    );
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/ChipInput/ChipInputExample.tsx

@@ -1,49 +0,0 @@
-import { ChipInputProps } from '.';
-import { ComponentExampleFn, Preset } from '-/utils/demo';
-
-export const presets: Preset<ChipInputProps>[] = [
-    {
-        label: 'Basic ChipInput',
-        propState: {
-            label: 'chip option',
-        },
-    },
-    {
-        label: 'with leadingIcon',
-        propState: {
-            label: 'chip option',
-            leadingIcon: 'SignLanguage',
-        },
-    },
-    {
-        label: 'with removable = false',
-        propState: {
-            label: 'chip option',
-            removable: false,
-        },
-    },
-    {
-        label: 'with removable = false and leadingIcon',
-        propState: {
-            label: 'chip option',
-            leadingIcon: 'SignLanguage',
-            removable: false,
-        },
-    },
-    {
-        label: 'disabled',
-        propState: {
-            label: 'chip option',
-            leadingIcon: 'SignLanguage',
-            disabled: true,
-        },
-    },
-];
-
-export const ChipInputExample: ComponentExampleFn<ChipInputProps> = ({ action }) => ({
-    containerStyle: { width: '100%' },
-    render: ({ props, Component }) => {
-        return <Component {...props} onClick={() => action('ChipInput clicked!')} />;
-    },
-    presets,
-});

package/src/components/ChipInput/index.tsx

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

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

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

package/src/components/ChipSuggestion/ChipSuggestion.tsx

@@ -1,22 +0,0 @@
-import { ChipUtility, ChipUtilityProps } from '-/components/ChipUtility';
-
-export type ChipSuggestionProps = Pick<ChipUtilityProps, 'disabled' | 'label' | 'onClick'>;
-
-/**
- * Dynamically generated options that are suggested to the customer as responses or prompts.
- *
- * @example
- *     import { ChipSuggestion } from '@bspk/ui/ChipSuggestion';
- *
- *     function Example() {
- *         return <ChipSuggestion label="Suggestion Chip" onClick={() => console.log('Suggestion')} />;
- *     }
- *
- * @name ChipSuggestion
- * @phase UXReview
- */
-export function ChipSuggestion({ disabled, label, onClick }: ChipSuggestionProps) {
-    return <ChipUtility data-bspk="chip-suggestion" disabled={disabled} label={label} onClick={onClick} />;
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/ChipSuggestion/ChipSuggestionExample.tsx

@@ -1,26 +0,0 @@
-import { ChipSuggestionProps } from '.';
-import { ComponentExampleFn, Preset } from '-/utils/demo';
-
-export const presets: Preset<ChipSuggestionProps>[] = [
-    {
-        label: 'ChipSuggestion example',
-        propState: {
-            label: 'chip option',
-        },
-    },
-    {
-        label: 'disabled',
-        propState: {
-            label: 'chip option',
-            disabled: true,
-        },
-    },
-];
-
-export const ChipSuggestionExample: ComponentExampleFn<ChipSuggestionProps> = ({ action }) => ({
-    containerStyle: { width: '100%' },
-    render: ({ props, Component }) => {
-        return <Component {...props} onClick={() => action('ChipSuggestion clicked!')} />;
-    },
-    presets,
-});

package/src/components/ChipSuggestion/index.tsx

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

package/src/components/ChipUtility/index.tsx

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

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

@@ -1,24 +0,0 @@
-import { DateField } from './DateField';
-import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
-import { render } from '-/rtl/util';
-
-const TestBed = () => (
-    <DateField
-        aria-label="calendar input"
-        controlId="Example controlId"
-        label="calendar input"
-        name="calendar input"
-        onChange={() => {}}
-        value={new Date()}
-    />
-);
-
-describe('DateField', () => {
-    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
-
-    it('renders', () => {
-        const { getByLabelText } = render(<TestBed />);
-
-        expect(getByLabelText('calendar input')).toBeInTheDocument();
-    });
-});

package/src/components/DateField/DateField.tsx

@@ -1,58 +0,0 @@
-import './date-field.scss';
-import { DateInput, DateInputProps } from '-/components/DateInput';
-import { FormField, FormFieldWrapProps } from '-/components/FormField';
-
-export type DateFieldProps = FormFieldWrapProps<DateInputProps>;
-/**
- * An input field that allows a customer to manually type in a specific date or triggers a date picker combobox to
- * select a date.
- *
- * @example
- *     import { DateField } from '@bspk/ui/DateField';
- *     import { useState } from 'react';
- *
- *     function Example() {
- *         const [date, setDate] = useState<Date | undefined>(new Date());
- *
- *         return (
- *             <DateField
- *                 name="calendar input"
- *                 aria-label="calendar input"
- *                 label="calendar input"
- *                 value={date}
- *                 onChange={setDate}
- *                 controlId="Example controlId"
- *             />
- *         );
- *     }
- *
- * @name DateField
- * @phase Dev
- */
-export function DateField({
-    label,
-    errorMessage,
-    helperText,
-    invalid,
-    labelTrailing,
-    required,
-    controlId,
-    ...inputProps
-}: DateFieldProps) {
-    return (
-        <FormField
-            controlId={controlId}
-            data-bspk="date-field"
-            errorMessage={errorMessage}
-            helperText={helperText}
-            invalid={invalid}
-            label={label}
-            labelTrailing={labelTrailing}
-            required={required}
-        >
-            {(fieldProps) => <DateInput {...inputProps} {...fieldProps} aria-label={label} invalid={invalid} />}
-        </FormField>
-    );
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/DateField/DateFieldExample.tsx

@@ -1,13 +0,0 @@
-import { DateFieldProps } from '.';
-import { ComponentExample, Preset } from '-/utils/demo';
-
-export const presets: Preset<DateFieldProps>[] = [];
-
-export const DateFieldExample: ComponentExample<DateFieldProps> = {
-    defaultState: {},
-    disableProps: [],
-    presets,
-    render: ({ props, Component }) => <Component {...props} value={props.value?.getDate ? props.value : undefined} />,
-    sections: [],
-    variants: {},
-};

package/src/components/DateField/date-field.scss

@@ -1,8 +0,0 @@
-[data-bspk='date-field'] {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    width: fit-content;
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/DateField/index.tsx

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

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

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