feat: busy state for select component

nl-design-system · Jun 22, 2023 · 1bea505 · 1bea505
1 parent ef5ecf7
commit 1bea505
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 3 deletions.
diff --git a/components/select/css/_mixin.scss b/components/select/css/_mixin.scss
@@ -87,6 +87,10 @@
   @include utrecht-focus-visible;
 }
 
+@mixin utrecht-select--busy {
+  cursor: var(--utrecht-action-busy-cursor, busy);
+}
+
 @mixin utrecht-select--invalid {
   --_utrecht-select-border-width: var(
     --utrecht-select-invalid-border-width,

diff --git a/components/select/css/index.scss b/components/select/css/index.scss
@@ -22,6 +22,10 @@
   @include utrecht-select--focus-visible;
 }
 
+.utrecht-select--busy {
+  @include utrecht-select--busy;
+}
+
 .utrecht-select--invalid {
   @include utrecht-select--invalid;
 }

diff --git a/packages/component-library-react/src/Select.test.tsx b/packages/component-library-react/src/Select.test.tsx
@@ -56,6 +56,50 @@ describe('Select', () => {
     expect(select).toContain(option);
   });
 
+  describe('busy state', () => {
+    it('is not busy by default', () => {
+      const { container } = render(<Select />);
+
+      const select = container.querySelector(':only-child');
+
+      expect(select).not.toHaveAttribute('aria-busy');
+      expect(select).not.toHaveClass('utrecht-select--busy');
+    });
+
+    it('does not specify `aria-busy` when not busy', () => {
+      const { container } = render(<Select busy={false} />);
+
+      const select = container.querySelector(':only-child');
+
+      expect(select).not.toHaveAttribute('aria-busy');
+    });
+
+    it('can have a busy state', () => {
+      const { container } = render(<Select busy={true} />);
+
+      const select = container.querySelector(':only-child');
+
+      expect(select).toHaveAttribute('aria-busy', 'true');
+    });
+
+    it('can configure aria-busy', () => {
+      /* The `busy` property is preferred, but this should work too */
+      const { container } = render(<Select aria-busy={true} />);
+
+      const select = container.querySelector(':only-child');
+
+      expect(select).toHaveAttribute('aria-busy', 'true');
+    });
+
+    it('renders a design system BEM class name', () => {
+      const { container } = render(<Select busy={true} />);
+
+      const select = container.querySelector(':only-child');
+
+      expect(select).toHaveClass('utrecht-select--busy');
+    });
+  });
+
   describe('invalid variant', () => {
     it('can have an invalid state', () => {
       const { container } = render(<Select invalid />);

diff --git a/packages/component-library-react/src/Select.tsx b/packages/component-library-react/src/Select.tsx
@@ -2,6 +2,7 @@ import clsx from 'clsx';
 import { ForwardedRef, forwardRef, OptionHTMLAttributes, PropsWithChildren, SelectHTMLAttributes } from 'react';
 
 export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+  busy?: boolean;
   invalid?: boolean;
   /**
    * `noscript`: Don't let it affect CSS :invalid
@@ -11,23 +12,25 @@ export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
 
 export const Select = forwardRef(
   (
-    { invalid, required, className, noscript, children, ...restProps }: PropsWithChildren<SelectProps>,
+    { busy, invalid, required, className, noscript, children, ...restProps }: PropsWithChildren<SelectProps>,
     ref: ForwardedRef<HTMLSelectElement>,
   ) => {
     return (
       <select
-        {...restProps}
-        ref={ref}
+        aria-busy={busy || undefined}
         aria-invalid={invalid || undefined}
         required={noscript ? required : false}
         aria-required={noscript ? undefined : required}
         className={clsx(
           'utrecht-select',
           'utrecht-select--html-select',
+          busy && 'utrecht-select--busy',
           invalid && 'utrecht-select--invalid',
           required && 'utrecht-select--required',
           className,
         )}
+        ref={ref}
+        {...restProps}
       >
         {children}
       </select>

diff --git a/packages/storybook/stories/components/Select.stories.tsx b/packages/storybook/stories/components/Select.stories.tsx
@@ -15,6 +15,10 @@ const meta = {
   id: 'css-select',
   component: Select,
   argTypes: {
+    busy: {
+      description: 'Busy',
+      control: 'boolean',
+    },
     disabled: {
       description: 'Disabled',
       control: 'boolean',
@@ -110,6 +114,13 @@ export const Required: Story = {
   },
 };
 
+export const Busy: Story = {
+  args: {
+    busy: true,
+    options: [],
+  },
+};
+
 export const Focus: Story = {
   args: {
     className: 'utrecht-select--focus',