@bspk/ui 1.3.8 → 1.3.9

package/src/components/Pagination/Pagination.tsx

@@ -1,9 +1,9 @@
 import './pagination.scss';
 import { SvgIcon } from '@bspk/icons/SvgIcon';
-import { AriaAttributes } from 'react';
-import { PageInput } from './PageInput';
+import { AriaAttributes, useEffect, useState } from 'react';
 import { PageList } from './PageList';
 import { Button } from '-/components/Button';
+import { InputElement } from '-/components/Input';
 
 // After this point the manual input renders. With equal or fewer pages the individual page buttons render instead.
 const INPUT_TYPE_THRESHOLD = 7;
@@ -12,7 +12,9 @@ export type PaginationProps = {
     /**
      * The number of pages to display in the pagination component.
      *
-     * @default 1
+     * If there is only one page, the component will not render.
+     *
+     * @default 2
      */
     numPages: number;
     /**
@@ -32,14 +34,11 @@ export type PaginationProps = {
  *
  * @example
  *     import { Pagination } from '@bspk/ui/Pagination';
- *     import { usePaginationState } from '@bspk/ui/hooks/usePaginationState';
  *
  *     function Example() {
- *         const numPages = 10;
- *
- *         const { currentPage, setCurrentPage } = usePaginationState(numPages);
+ *         const [currentPage, setCurrentPage] = useState(1);
  *
- *         return <Pagination value={currentPage} onChange={setCurrentPage} numPages={numPages} />;
+ *         return <Pagination value={currentPage} onChange={setCurrentPage} numPages={10} />;
  *     }
  *
  * @name Pagination
@@ -47,46 +46,73 @@ export type PaginationProps = {
  */
 export function Pagination({ numPages, value, onChange, ...ariaProps }: AriaAttributes & PaginationProps) {
     const nextPage = () => {
-        if (value < numPages) {
-            onChange(value + 1);
-        }
+        if (value < numPages) onChange(value + 1);
     };
 
     const previousPage = () => {
-        if (value > 1) {
-            onChange(value - 1);
-        }
+        if (value > 1) onChange(value - 1);
     };
 
-    const isFirstPage = value === 1;
-    const isLastPage = value === numPages;
-    const isOutOfBoundsValue = value < 1 || value > numPages;
-    const isOneOrFewerPages = numPages <= 1;
+    const [inputValue, setInputValue] = useState<string | undefined>(`${value}`);
+
+    useEffect(() => setInputValue(`${value}`), [value]);
+
+    const submitInputChange = () => {
+        const parsedValue = parseInt(inputValue || '', 10);
+        if (isNaN(parsedValue)) return setInputValue(`${value}`);
+
+        let next = parsedValue;
+        if (parsedValue < 1) next = 1;
+        if (parsedValue > numPages) next = numPages;
+
+        onChange(next);
+        if (next !== parsedValue) setInputValue(`${next}`);
+    };
+
+    const inBounds = (n: number) => n >= 1 && n <= numPages;
+
+    if (numPages <= 1) return null;
 
     return (
         <span data-bspk="pagination" role="group" {...ariaProps}>
             <Button
-                disabled={isOutOfBoundsValue || isOneOrFewerPages || isFirstPage}
+                disabled={!inBounds(value - 1)}
                 icon={<SvgIcon name="ChevronLeft" />}
                 iconOnly
-                label={isFirstPage ? 'First page' : `Previous page (${value - 1})`}
+                label={value === 1 ? 'First page' : `Previous page (${value - 1})`}
                 onClick={previousPage}
                 owner="pagination"
                 size="small"
                 variant="tertiary"
             />
-
             {numPages > INPUT_TYPE_THRESHOLD ? (
-                <PageInput numPages={numPages} onChange={onChange} value={value} />
+                <form
+                    data-input-form
+                    onSubmit={(e) => {
+                        e.preventDefault();
+                        submitInputChange();
+                    }}
+                >
+                    <InputElement
+                        name="page-number"
+                        onBlur={() => submitInputChange()}
+                        onChange={setInputValue}
+                        owner="pagination"
+                        showClearButton={false}
+                        type="number"
+                        value={inputValue}
+                    />
+                    of {numPages}
+                </form>
             ) : (
                 <PageList numPages={numPages} onChange={onChange} value={value} />
             )}
 
             <Button
-                disabled={isOutOfBoundsValue || isOneOrFewerPages || isLastPage}
+                disabled={!inBounds(value + 1)}
                 icon={<SvgIcon name="ChevronRight" />}
                 iconOnly
-                label={isLastPage ? 'Last page' : `Next page (${value + 1})`}
+                label={value === numPages ? 'Last page' : `Next page (${value + 1})`}
                 onClick={nextPage}
                 owner="pagination"
                 size="small"

package/src/components/Pagination/pagination.scss

@@ -6,25 +6,15 @@
     gap: var(--spacing-sizing-01);
     flex: 1;
 
-    [data-bspk='page-input'] {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: center;
-        gap: var(--spacing-sizing-01);
-
-        [data-bspk='txt'] {
-            color: var(--foreground-neutral-on-surface-variant-02);
-            text-wrap: nowrap;
-        }
+    [data-input-form] {
+        display: contents;
+    }
 
-        [data-bspk='text-input'] {
-            width: var(--spacing-sizing-12);
+    [data-bspk='input'] {
+        max-width: var(--spacing-sizing-12);
 
-            input {
-                text-align: center;
-                flex: 1;
-            }
+        input {
+            text-align: center;
         }
     }
 

package/src/components/Password/Password.tsx

@@ -16,30 +16,29 @@ export type PasswordProps = FieldControlProps & Pick<InputProps, 'containerRef'
  *     import { Password } from '@bspk/ui/Password';
  *     import { useState } from 'react';
  *
- *     function ExampleStandalone() {
+ *     () => {
  *         const [value, setValue] = useState('');
  *
  *         return (
- *             <Password
- *                 aria-label="Enter password"
- *                 value={value}
- *                 onChange={setValue}
- *                 aria-label="password"
- *                 name="password"
- *             />
+ *             <>
+ *                 // standalone password example
+ *                 <Password
+ *                     aria-label="Enter password"
+ *                     value={value}
+ *                     onChange={setValue}
+ *                     aria-label="password"
+ *                     name="password"
+ *                 />
+ *                 <br />
+ *                 // password used within a field
+ *                 <Field>
+ *                     <FieldLabel>Password</FieldLabel>
+ *                     <Password value={value} onChange={setValue} aria-label="password" name="password" />
+ *                     <FieldDescription>The password field allows you to enter a secure password.</FieldDescription>
+ *                 </Field>
+ *             </>
  *         );
- *     }
- *
- *     function ExampleWithField() {
- *         const [value, setValue] = useState('');
- *         return (
- *             <Field>
- *                 <FieldLabel>Password</FieldLabel>
- *                 <Password value={value} onChange={setValue} aria-label="password" name="password" />
- *                 <FieldDescription>The password field allows you to enter a secure password.</FieldDescription>
- *             </Field>
- *         );
- *     }
+ *     };
  *
  * @name Password
  * @phase UXReview

package/src/components/Popover/Popover.tsx

@@ -60,26 +60,17 @@ export type PopoverProps = CommonProps<'disabled'> &
  *     import { Popover } from '@bspk/ui/Popover';
  *     import { Button } from '@bspk/ui/Button';
  *
- *     function Example() {
- *         const [showPopover, setShowPopover] = useState<boolean>(false);
- *
- *         const togglePopover = () => setShowPopover(!showPopover);
- *         const onPopoverCallToActionClick = () => alert('Action clicked');
- *
- *         return (
- *             <Popover
- *                 placement="bottom"
- *                 content="This is a popover content"
- *                 header="Popover Header"
- *                 callToAction={{
- *                     label: 'Action',
- *                     onClick: onPopoverCallToActionClick,
- *                 }}
- *             >
- *                 <Button label="Toggle popover" onClick={togglePopover} />
- *             </Popover>
- *         );
- *     }
+ *     <Popover
+ *         placement="bottom"
+ *         content="This is a popover content"
+ *         header="Popover Header"
+ *         callToAction={{
+ *             label: 'Action',
+ *             onClick: () => action('Action clicked'),
+ *         }}
+ *     >
+ *         {(triggerProps) => <Button {...triggerProps} label="Toggle popover" />}
+ *     </Popover>;
  *
  * @name Popover
  * @phase UXReview

package/src/components/Popover/PopoverExample.tsx

@@ -8,7 +8,7 @@ export const PopoverExample: ComponentExampleFn<PopoverProps> = ({ action }) =>
     render: ({ props, Component }) => {
         return (
             <>
-                <Txt style={{ marginBottom: `var(--spacing-sizing-02)` }}>Click button for a Popover</Txt>
+                <Txt style={{ marginBottom: `var(--spacing-sizing-02)` }}>Click for a Popover</Txt>
                 <Component {...props}>
                     {(triggerProps) => <Button label={`${props.placement}`} variant="secondary" {...triggerProps} />}
                 </Component>

package/src/components/ProgressBar/ProgressBar.tsx

@@ -53,9 +53,7 @@ export type ProgressBarProps = {
  * @example
  *     import { ProgressBar } from '@bspk/ui/ProgressBar';
  *
- *     function Example() {
- *         return <ProgressBar label="Example label" completion={50} />;
- *     }
+ *     <ProgressBar label="Example label" completion={50} />;
  *
  * @name ProgressBar
  * @phase UXReview

package/src/components/ProgressCircle/ProgressCircle.tsx

@@ -27,9 +27,7 @@ export type ProgressCircleProps = {
  * @example
  *     import { ProgressCircle } from '@bspk/ui/ProgressCircle';
  *
- *     function Example() {
- *         return <ProgressCircle label="Example label" />;
- *     }
+ *     <ProgressCircle label="Example label" />;
  *
  * @name ProgressCircle
  * @phase UXReview

package/src/components/ProgressionStepper/ProgressionStepper.tsx

@@ -59,9 +59,7 @@ export type ProgressionStepperProps = {
  * @example
  *     import { ProgressionStepper } from '@bspk/ui/ProgressionStepper';
  *
- *     function Example() {
- *         return <ProgressionStepper steps={[{ name: 'Step 1' }, { name: 'Step 2' }, { name: 'Step 3' }]} />;
- *     }
+ *     <ProgressionStepper steps={[{ name: 'Step 1' }, { name: 'Step 2' }, { name: 'Step 3' }]} />;
  *
  * @name ProgressionStepper
  * @phase UXReview

package/src/components/RadioGroup/RadioGroup.tsx

@@ -40,7 +40,7 @@ export type RadioGroupProps = Omit<FieldControlProps, 'readOnly'> & {
  *     import { useState } from 'react';
  *     import { RadioGroup } from '@bspk/ui/RadioGroup';
  *
- *     function Example() {
+ *     () => {
  *         const [selectedOption, setSelectedOption] = useState<string>('1');
  *
  *         return (
@@ -59,7 +59,7 @@ export type RadioGroupProps = Omit<FieldControlProps, 'readOnly'> & {
  *                 value={selectedOption}
  *             />
  *         );
- *     }
+ *     };
  *
  * @name RadioGroup
  * @phase UXReview

package/src/components/Rating/Rating.tsx

@@ -1,6 +1,5 @@
 import './rating.scss';
 import { SvgStarFill } from '@bspk/icons/StarFill';
-import { ElementType } from 'react';
 
 export type RatingSize = 'large' | 'medium' | 'small';
 export type RatingProps = {
@@ -12,7 +11,7 @@ export type RatingProps = {
      */
     value?: number;
     /**
-     * If included the component is in interactive mode and this callback is fired when a star is selected.
+     * If included the component is interactive and this callback is fired when the user selects a new rating value.
      *
      * @param value - The new value of the rating.
      */
@@ -39,37 +38,58 @@ const iconWidths: Record<RatingSize, number> = {
  * @example
  *     import { Rating } from '@bspk/ui/Rating';
  *
- *     function Example() {
- *         return <Rating value={4.5} />;
- *     }
+ *     <Rating value={4.5} size="large" />;
  *
  * @name Rating
  * @phase UXReview
  */
 export function Rating({ size = 'medium', value, onChange }: RatingProps) {
-    const As: ElementType = onChange ? 'button' : 'div';
+    if (!onChange)
+        return (
+            <div
+                aria-label={value ? `${value} out of ${MAX_STARS} stars` : 'Rating'}
+                data-bspk="rating"
+                data-size={size}
+                role="img"
+            >
+                {Array.from({ length: MAX_STARS }, (_, index) => {
+                    const fill = getFill(index + 1, value);
+                    return (
+                        <div data-fill={fill} data-star key={index} role="presentation" tabIndex={-1}>
+                            <SvgStarFill width={iconWidths[size]} />
+                            {fill === 'half' && (
+                                <div data-fill-half>
+                                    <div data-star>
+                                        <SvgStarFill width={iconWidths[size]} />
+                                    </div>
+                                </div>
+                            )}
+                        </div>
+                    );
+                })}
+            </div>
+        );
 
     return (
         <div
-            aria-label={onChange ? 'Select a star rating' : value ? `${value} out of ${MAX_STARS} stars` : 'Rating'}
+            aria-label={value ? `${value} out of ${MAX_STARS} stars` : 'Select a star rating'}
             data-bspk="rating"
             data-size={size}
-            role={onChange ? 'radiogroup' : 'img'}
+            role="radiogroup"
         >
             {Array.from({ length: MAX_STARS }, (_, index) => {
                 const fill = getFill(index + 1, value);
                 const selected = value !== undefined && Math.floor(value) === index;
                 return (
-                    <As
+                    <button
                         aria-checked={selected}
-                        aria-hidden={!onChange}
-                        aria-label={onChange ? `Rate ${index + 1}` : undefined}
+                        aria-label={`Rate ${index + 1}`}
                         data-fill={fill}
                         data-star
                         key={index}
                         onClick={() => onChange?.(index + 1)}
-                        role={onChange ? 'radio' : 'presentation'}
-                        tabIndex={onChange ? (selected ? 0 : -1) : -1}
+                        role="radio"
+                        tabIndex={selected ? 0 : -1}
                         type="button"
                     >
                         <SvgStarFill width={iconWidths[size]} />
@@ -80,7 +100,7 @@ export function Rating({ size = 'medium', value, onChange }: RatingProps) {
                                 </div>
                             </div>
                         )}
-                    </As>
+                    </button>
                 );
             })}
         </div>

package/src/components/Rating/RatingExample.tsx

@@ -3,11 +3,28 @@ import { ComponentExampleFn, Preset } from '-/utils/demo';
 
 export const presets: Preset<RatingProps>[] = [
     {
-        label: 'Non interactive',
+        label: 'Read Only, No Value',
         propState: {
             onChange: undefined,
+            value: undefined,
         },
     },
+    {
+        label: 'Read Only',
+        propState: {
+            onChange: undefined,
+            value: 4.5,
+        },
+        designPattern: 'A read only representation of ratings, a scale of 1 to 5.',
+    },
+    {
+        label: 'Interactive',
+        propState: {
+            onChange: () => {},
+        },
+        designPattern:
+            'Interactive control that allow customers to indicate their feelings about an experience or product on a scale of 1 to 5.',
+    },
 ];
 
 export const RatingExample: ComponentExampleFn<RatingProps> = () => {

package/src/components/SearchBar/SearchBar.tsx

@@ -72,7 +72,7 @@ export type SearchBarProps<O extends SearchBarOption = SearchBarOption> = Omit<
  *     import { useState } from 'react';
  *     import { SearchBar } from '@bspk/ui/SearchBar';
  *
- *     function Example() {
+ *     () => {
  *         const [searchText, setSearchText] = useState('');
  *
  *         return (
@@ -96,7 +96,7 @@ export type SearchBarProps<O extends SearchBarOption = SearchBarOption> = Omit<
  *                 onChange={setSearchText}
  *             />
  *         );
- *     }
+ *     };
  *
  * @name SearchBar
  * @phase UXReview

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -12,8 +12,8 @@ export type SegmentedControlProps = TabListProps<SegmentedControlOption>;
  *     import { useState } from 'react';
  *     import { SegmentedControl } from '@bspk/ui/SegmentedControl';
  *
- *     function Example() {
- *         const [selectedOption, setSelectedOption] = useState<string>();
+ *     () => {
+ *         const [selectedOption, setSelectedOption] = useState<string>('');
  *
  *         return (
  *             <SegmentedControl
@@ -26,7 +26,7 @@ export type SegmentedControlProps = TabListProps<SegmentedControlOption>;
  *                 value={selectedOption}
  *             />
  *         );
- *     }
+ *     };
  *
  * @name SegmentedControl
  * @phase UXReview

package/src/components/SegmentedControl/SegmentedControlExample.tsx

@@ -1,9 +1,3 @@
-import { SvgCircle } from '@bspk/icons/Circle';
-import { SvgDiamond } from '@bspk/icons/Diamond';
-import { SvgDiamondFill } from '@bspk/icons/DiamondFill';
-import { SvgSquare } from '@bspk/icons/Square';
-import { SvgSquareFill } from '@bspk/icons/SquareFill';
-
 import { SegmentedControlOption, SegmentedControlProps } from '.';
 import { ComponentExample, Preset } from '-/utils/demo';
 
@@ -11,20 +5,20 @@ const PRESET_OPTIONS: SegmentedControlOption[] = [
     {
         value: '1',
         label: 'Option 1',
-        icon: <SvgDiamond />,
-        iconSelected: <SvgDiamondFill />,
+        icon: 'Diamond',
+        iconSelected: 'DiamondFill',
     },
     {
         value: '2',
         label: 'Disabled 2',
         disabled: true,
-        icon: <SvgCircle />,
+        icon: 'Circle',
     },
     {
         value: '3',
         label: 'Option 3',
-        icon: <SvgSquare />,
-        iconSelected: <SvgSquareFill />,
+        icon: 'Square',
+        iconSelected: 'SquareFill',
     },
 ];
 
@@ -64,7 +58,11 @@ export const presets: Preset<SegmentedControlProps>[] = [
 export const SegmentedControlExample: ComponentExample<SegmentedControlProps> = {
     containerStyle: { width: '100%', overflow: 'auto', alignItems: 'start' },
     defaultState: {
-        options: PRESET_OPTIONS,
+        options: PRESET_OPTIONS.map((option) => ({
+            ...option,
+            icon: undefined,
+            iconSelected: undefined,
+        })),
     },
     presets,
     variants: false,

package/src/components/Select/Select.tsx

@@ -77,29 +77,14 @@ export type SelectProps = CommonProps<'size'> &
  *         { id: '6', label: 'Option 6' },
  *     ];
  *
- *     function ExampleStandalone() {
- *         const [selected, setSelected] = React.useState<string[]>([]);
+ *     () => {
+ *         const [selected, setSelected] = useState<string[]>([]);
  *
  *         return (
- *             <Select
- *                 aria-label="Select an option"
- *                 itemCount={5}
- *                 name="example-select"
- *                 onChange={setSelected}
- *                 options={OPTIONS}
- *                 placeholder="Select an option"
- *                 size="medium"
- *                 value={selected}
- *             />
- *         );
- *     }
- *
- *     function ExampleWithField() {
- *         const [selected, setSelected] = React.useState<string[]>([]);
- *         return (
- *             <Field>
- *                 <FieldLabel>Select an option</FieldLabel>
+ *             <>
+ *                 // standalone select example
  *                 <Select
+ *                     aria-label="Select an option"
  *                     itemCount={5}
  *                     name="example-select"
  *                     onChange={setSelected}
@@ -108,12 +93,26 @@ export type SelectProps = CommonProps<'size'> &
  *                     size="medium"
  *                     value={selected}
  *                 />
- *                 <FieldDescription>
- *                     The select allows you to choose one option from a list of options.
- *                 </FieldDescription>
- *             </Field>
+ *                 <br />
+ *                 // select used within a field
+ *                 <Field>
+ *                     <FieldLabel>Select an option</FieldLabel>
+ *                     <Select
+ *                         itemCount={5}
+ *                         name="example-select"
+ *                         onChange={setSelected}
+ *                         options={OPTIONS}
+ *                         placeholder="Select an option"
+ *                         size="medium"
+ *                         value={selected}
+ *                     />
+ *                     <FieldDescription>
+ *                         The select allows you to choose one option from a list of options.
+ *                     </FieldDescription>
+ *                 </Field>
+ *             </>
  *         );
- *     }
+ *     };
  *
  * @name Select
  * @phase UXReview

package/src/components/Skeleton/Skeleton.tsx

@@ -49,20 +49,16 @@ export type SkeletonProps = {
  * @example
  *     import { Skeleton } from '@bspk/ui/skeleton';
  *
- *     function Example(item: { title: string; src: string } | null) {
- *         return (
- *             <Skeleton variant="photo" width={210} height={118}>
- *                 <img
- *                     style={{
- *                         width: 210,
- *                         height: 118,
- *                     }}
- *                     alt={item.title}
- *                     src={item.src}
- *                 />
- *             </Skeleton>
- *         );
- *     }
+ *     <Skeleton variant="photo" width={210} height={118}>
+ *         <img
+ *             style={{
+ *                 width: 210,
+ *                 height: 118,
+ *             }}
+ *             alt={'A cool photo'}
+ *             src={'https://example.com/cool-photo.jpg'}
+ *         />
+ *     </Skeleton>;
  *
  * @exampleDescription This example shows a skeleton loading state for an image but can be used for any element.
  *

package/src/components/Skeleton/SkeletonExample.tsx

@@ -1,8 +1,7 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { SkeletonProps, SkeletonVariant } from '.';
 import { Avatar } from '-/components/Avatar';
 import { ExamplePlaceholder } from '-/components/ExamplePlaceholder';
-import { useTimeout } from '-/hooks/useTimeout';
 import { ComponentExample, ComponentExampleRenderProps, Preset } from '-/utils/demo';
 
 export const presets: Preset<SkeletonProps>[] = [
@@ -29,7 +28,10 @@ function SkeletonTransition({
     props,
 }: Pick<ComponentExampleRenderProps<SkeletonProps>, 'Component' | 'props'>) {
     const [loaded, setLoaded] = useState(false);
-    useTimeout(() => setLoaded(true), 3000);
+
+    useEffect(() => {
+        setTimeout(() => setLoaded(true), 3000);
+    }, []);
 
     return <Component {...props}>{loaded && PROP_VARIANT_CHILDREN[props!.variant as SkeletonVariant]}</Component>;
 }