@bspk/ui 1.3.11 → 1.3.17

package/src/components/Accordion/AccordionExample.tsx

@@ -11,7 +11,7 @@ const AccordionContent = () => (
 
 export const presets: Preset<AccordionProps>[] = [
     {
-        label: 'Multiple Sections',
+        label: 'Default',
         propState: {
             items: [
                 {
@@ -36,7 +36,7 @@ export const presets: Preset<AccordionProps>[] = [
         },
     },
     {
-        label: 'Multiple Sections with 1 disabled',
+        label: '1 disabled',
         propState: {
             items: [
                 {
@@ -50,7 +50,8 @@ export const presets: Preset<AccordionProps>[] = [
         },
     },
     {
-        label: 'Multiple Sections with 1 disabled and open',
+        label: '1 disabled and open (but not showing)',
+        hideDemo: true,
         propState: {
             items: [
                 {
@@ -66,7 +67,7 @@ export const presets: Preset<AccordionProps>[] = [
 ];
 
 export const AccordionExample: ComponentExampleFn<AccordionProps> = () => ({
-    containerStyle: { minHeight: 225 },
+    containerStyle: { width: 400, minHeight: 225 },
     defaultState: {
         items: [
             {

package/src/components/Avatar/Avatar.tsx

@@ -92,7 +92,6 @@ export type AvatarProps = CommonProps<'disabled'> & {
  *         image="/avatar-01.png"
  *         initials="AR"
  *         name="Andre Giant"
- *         hideTooltip
  *         size="large"
  *         disabled={false}
  *         onClick={() => action('Launch avatar popover')}
@@ -103,7 +102,7 @@ export type AvatarProps = CommonProps<'disabled'> & {
  * @exampleDescription The image if provided is displayed first, followed by the icon if provided, and finally the initials. If no initials are provided, the first two letters of the name will be used as initials.
  *
  * @name Avatar
- * @phase UXReview
+ * @phase Stable
  */
 export function Avatar({
     initials: initialsProp,
@@ -114,7 +113,7 @@ export function Avatar({
     name,
     hideTooltip = false,
     onClick,
-    disabled,
+    disabled = false,
     ...props
 }: AvatarProps) {
     const children = useMemo(() => {

package/src/components/Avatar/avatar.scss

@@ -118,16 +118,19 @@
         background: var(--state-background);
     }
 
-    &:hover {
-        --state-background: var(--interactions-neutral-hover-opacity);
-    }
+    &:not([aria-disabled]) {
+        &:hover {
+            --state-background: var(--interactions-neutral-hover-opacity);
+        }
 
-    &:active {
-        --state-background: var(--interactions-neutral-press-opacity);
+        &:active {
+            --state-background: var(--interactions-neutral-press-opacity);
+        }
     }
 
-    &[disabled] {
+    &[aria-disabled] {
         opacity: 0.5;
+        cursor: not-allowed;
     }
 
     &:focus:not(:active) {

package/src/components/AvatarGroup/AvatarGroup.tsx

@@ -83,7 +83,7 @@ export type AvatarGroupProps = CommonProps<'style'> & {
  *     />;
  *
  * @name AvatarGroup
- * @phase UXReview
+ * @phase Stable
  */
 export function AvatarGroup({ items, size = 'small', max: maxProp = 5, variant = 'stacked', style }: AvatarGroupProps) {
     const max = maxProp > items.length ? items.length : maxProp;

package/src/components/Badge/Badge.tsx

@@ -54,7 +54,7 @@ export type BadgeProps = {
  * @exampleDescription This example shows a badge with a count of 5, size small, and primary variant.
  *
  * @name Badge
- * @phase UXReview
+ * @phase Stable
  */
 export function Badge({ count: countProp, size = 'small', surfaceBorder, children, color = 'primary' }: BadgeProps) {
     const count: number | null = tryIntParse(countProp);

package/src/components/Badge/BadgeExample.tsx

@@ -10,7 +10,6 @@ export const BadgeExample: ComponentExample<BadgeProps> = {
             </Component>
         );
     },
-    containerStyle: { width: '100%' },
     variants: {
         surfaceBorder: { color: { options: ['primary', 'secondary'] } },
         size: { count: { options: [9, 99, 999] } },

package/src/components/BadgeDot/BadgeDot.tsx

@@ -51,7 +51,7 @@ export type BadgeDotProps = {
  * @exampleDescription This example shows a badge-dot with a count of 5, size small, and primary variant.
  *
  * @name BadgeDot
- * @phase UXReview
+ * @phase Stable
  */
 export function BadgeDot({ children, color = 'primary', size: sizeProp = 6, outline = false }: BadgeDotProps) {
     const size = sizeProp in OUTLINE_WIDTHS ? sizeProp : 6;

package/src/components/BadgeDot/BadgeDotExample.tsx

@@ -4,7 +4,6 @@ import { Button } from '-/components/Button';
 import { ComponentExample } from '-/utils/demo';
 
 export const BadgeDotExample: ComponentExample<BadgeDotProps> = {
-    containerStyle: { width: '100%' },
     defaultState: {},
     disableProps: [],
     render: ({ props, Component }) => {

package/src/components/BannerAlert/BannerAlert.tsx

@@ -54,17 +54,19 @@ export type BannerAlertProps = {
  * @example
  *     import { BannerAlert } from '@bspk/ui/BannerAlert';
  *
- *     <BannerAlert
- *         elevated={true}
- *         variant="success"
- *         header="Success"
- *         body="Your request was processed successfully."
- *         onClose={() => sendSnackbar('Alert closed')}
- *         callToAction={{
- *             label: 'Click me',
- *             onClick: () => action('Call to action clicked!'),
- *         }}
- *     />;
+ *     <div style={{ width: '100%', padding: '0 20px' }}>
+ *         <BannerAlert
+ *             elevated={true}
+ *             variant="success"
+ *             header="Success"
+ *             body="Your request was processed successfully."
+ *             onClose={() => sendSnackbar('Alert closed')}
+ *             callToAction={{
+ *                 label: 'Click me',
+ *                 onClick: () => action('Call to action clicked!'),
+ *             }}
+ *         />
+ *     </div>;
  *
  * @exampleDescription This example shows how to use the BannerAlert component with an error variant, a header, and a body message.
  *
@@ -72,7 +74,7 @@ export type BannerAlertProps = {
  *
  *
  * @name BannerAlert
- * @phase UXReview
+ * @phase Stable
  */
 export function BannerAlert({
     variant = 'informational',

package/src/components/BannerAlert/BannerAlertExample.tsx

@@ -2,7 +2,6 @@ import { BannerAlertProps } from '.';
 import { ComponentExampleFn } from '-/utils/demo';
 
 export const BannerAlertExample: ComponentExampleFn<BannerAlertProps> = ({ action }) => ({
-    containerStyle: { width: '100%' },
     render: ({ props, variant, Component }) => {
         let nextHeader = props.header || 'This is a banner alert';
         if (variant && variant.name === 'variant') {

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -41,26 +41,28 @@ export type BreadcrumbProps = CommonProps<'id'> &
  * @example
  *     import { Breadcrumb } from '@bspk/ui/breadcrumb';
  *
- *     <Breadcrumb
- *         id="example-breadcrumb"
- *         scrollLimit={5}
- *         items={[
- *             { label: 'Brioche', href: '#brioche' },
- *             { label: 'Whole Wheat', href: '#whole-wheat' },
- *             { label: 'Sourdough', href: '#sourdough' },
- *             { label: 'Rye', href: '#rye' },
- *             { label: 'Multigrain', href: '#multigrain' },
- *             { label: 'Baguette', href: '#baguette' },
- *             { label: 'Focaccia', href: '#focaccia' },
- *             { label: 'Ciabatta', href: '#ciabatta' },
- *             { label: 'Pita', href: '#pita' },
- *             { label: 'Naan', href: '#naan' },
- *             { label: 'Flatbread', href: '#flatbread' },
- *         ]}
- *     />;
+ *     <div style={{ padding: '0px 20px', width: '100%' }}>
+ *         <Breadcrumb
+ *             id="example-breadcrumb"
+ *             scrollLimit={5}
+ *             items={[
+ *                 { label: 'Brioche', href: '#brioche' },
+ *                 { label: 'Whole Wheat', href: '#whole-wheat' },
+ *                 { label: 'Sourdough', href: '#sourdough' },
+ *                 { label: 'Rye', href: '#rye' },
+ *                 { label: 'Multigrain', href: '#multigrain' },
+ *                 { label: 'Baguette', href: '#baguette' },
+ *                 { label: 'Focaccia', href: '#focaccia' },
+ *                 { label: 'Ciabatta', href: '#ciabatta' },
+ *                 { label: 'Pita', href: '#pita' },
+ *                 { label: 'Naan', href: '#naan' },
+ *                 { label: 'Flatbread', href: '#flatbread' },
+ *             ]}
+ *         />
+ *     </div>;
  *
  * @name Breadcrumb
- * @phase UXReview
+ * @phase Stable
  */
 export function Breadcrumb({ id: propId, items = [], scrollLimit }: BreadcrumbProps) {
     const id = useId(propId);

package/src/components/Button/Button.tsx

@@ -5,7 +5,7 @@ import { ButtonSize, CommonProps, ElementProps, SetRef } from '-/types/common';
 
 export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
 
-export type ButtonProps<As extends ElementType = ElementType> = CommonProps<'disabled' | 'owner'> & {
+export type ButtonProps<As extends ElementType = ElementType> = CommonProps<'aria-label' | 'disabled' | 'owner'> & {
     /**
      * The label of the button.
      *
@@ -69,7 +69,7 @@ export type ButtonProps<As extends ElementType = ElementType> = CommonProps<'dis
      */
     children?: ReactNode;
     /** The tool tip text that appears when hovered. */
-    toolTip?: string;
+    tooltip?: string;
     /** The function to call when the button is clicked. */
     onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     /** A ref to the Button element. */
@@ -83,10 +83,35 @@ export type ButtonProps<As extends ElementType = ElementType> = CommonProps<'dis
  *     import { Button } from '@bspk/ui/Button';
  *     import { SvgPerson } from '@bspk/icons/Person';
  *
- *     <Button label="Click Me" size="medium" onClick={() => action('Button clicked')} icon={<SvgPerson />} />;
+ *     () => {
+ *         return (
+ *             <div>
+ *                 <p>Standard usage</p>
+ *                 <Button label="Click Me" onClick={() => action('Button clicked')} icon={<SvgPerson />} />
+ *                 <p style={{ marginTop: '20px' }}>Custom usage</p>
+ *                 <Button
+ *                     aria-label="Hello world example"
+ *                     label="Custom Icon"
+ *                     onClick={() => action('Button clicked')}
+ *                     variant="secondary"
+ *                     tooltip="Hello world"
+ *                 >
+ *                     <svg
+ *                         focusable="false"
+ *                         aria-hidden="true"
+ *                         xmlns="http://www.w3.org/2000/svg"
+ *                         viewBox="0 0 24 24"
+ *                         fill="currentColor"
+ *                     >
+ *                         <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"></path>
+ *                     </svg>
+ *                 </Button>
+ *             </div>
+ *         );
+ *     };
  *
  * @name Button
- * @phase UXReview
+ * @phase Stable
  */
 export function Button<As extends ElementType = ElementType>(
     props: AriaAttributes & ElementProps<ButtonProps<As>, As>,
@@ -101,11 +126,12 @@ export function Button<As extends ElementType = ElementType>(
         label: labelProp,
         icon,
         iconOnly: iconOnlyProp = false,
-        toolTip: toolTipProp,
+        tooltip: tooltipProp,
         children,
         innerRef,
         owner,
         role,
+        'aria-label': ariaLabel,
         ...containerProps
     } = props;
     const label = typeof children === 'string' ? children : labelProp || '';
@@ -113,15 +139,15 @@ export function Button<As extends ElementType = ElementType>(
     // ignore iconOnly if there is no icon
     const iconOnly = iconOnlyProp === true && !!icon;
 
-    // if toolTip text is not provided and iconOnly is true, toolTip text should be label
-    const toolTip = toolTipProp || (iconOnly ? label : undefined);
+    // if tooltip text is not provided and iconOnly is true, tooltip text should be label
+    const tooltip = tooltipProp || (iconOnly ? label : undefined);
 
     const button = (triggerProps: TooltipTriggerProps) => (
         <As
             type={As === 'button' ? 'button' : undefined}
             {...containerProps}
             {...triggerProps}
-            aria-label={label}
+            aria-label={ariaLabel || label}
             data-bspk="button"
             data-bspk-owner={owner || undefined}
             data-destructive={destructive || undefined}
@@ -165,9 +191,9 @@ export function Button<As extends ElementType = ElementType>(
         </As>
     );
 
-    if (toolTip)
+    if (tooltip)
         return (
-            <Tooltip label={toolTip} placement="top">
+            <Tooltip label={tooltip} placement="top">
                 {button}
             </Tooltip>
         );

package/src/components/Button/button.scss

@@ -98,6 +98,7 @@
         display: flex;
         flex-direction: column;
         align-items: center;
+        justify-content: center;
     }
 
     [data-button-label] {
@@ -140,9 +141,11 @@
         }
 
         &[data-destructive] {
-            --primary-background: var(--status-error);
+            &:not([disabled]) {
+                --primary-background: var(--status-error);
 
-            color: var(--foreground-brand-on-primary);
+                color: var(--foreground-brand-on-primary);
+            }
         }
     }
 
@@ -174,9 +177,11 @@
         }
 
         &[data-destructive] {
-            background: transparent;
-            color: var(--status-error);
-            border: solid var(--button-border-width) var(--status-error);
+            &:not([disabled]) {
+                background: transparent;
+                color: var(--status-error);
+                border: solid var(--button-border-width) var(--status-error);
+            }
         }
     }
 
@@ -206,7 +211,9 @@
         }
 
         &[data-destructive] {
-            color: var(--status-error);
+            &:not([disabled]) {
+                color: var(--status-error);
+            }
         }
     }
 }

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

@@ -15,7 +15,7 @@ describe('Calendar (RTL)', () => {
     it('renders', () => {
         const { getByText } = render(<Calendar {...presets[0].propState} onChange={() => {}} />);
 
-        expect(getByText(format(presets[0].propState.value!, 'MMMM'))).toBeInTheDocument();
+        expect(getByText(format(presets[0].propState.value!, 'MMMM yyyy'))).toBeInTheDocument();
     });
 });