feat(react): Added FormField Checkbox

.changeset/purple-pumpkins-joke.md

@@ -0,0 +1,7 @@
+---
+"@lux-design-system/components-react": patch
+---
+
+In deze commit:
+
+Nieuw component: Form Field Checkbox

packages/components-react/package.json

@@ -25,6 +25,7 @@
     "clean": "rimraf dist/ pages/",
     "lint": "tsc --project ./tsconfig.json --noEmit && tsc --noEmit --project ./tsconfig.test.json",
     "test": "mkdirp pages && cross-env NODE_OPTIONS=--experimental-vm-modules jest --verbose",
+    "watch:components": "vite build --watch",
     "watch:test": "cross-env NODE_OPTIONS=--experimental-vm-modules jest --verbose --watch"
   },
   "main": "./dist/index.umd.js",
@@ -42,6 +43,7 @@
   "dependencies": {
     "@utrecht/component-library-css": "6.1.0",
     "@utrecht/component-library-react": "7.1.0",
+    "@utrecht/focus-ring-css": "2.3.0",
     "clsx": "2.1.1",
     "date-fns": "3.6.0",
     "lodash.chunk": "4.2.0"
@@ -77,9 +79,9 @@
     "tslib": "2.6.3",
     "typescript": "5.5.4",
     "vite": "5.3.5",
+    "vite-plugin-css-injected-by-js": "3.5.2",
     "vite-plugin-dts": "4.2.3",
-    "vite-plugin-runtime-config": "1.0.2",
-    "vite-plugin-css-injected-by-js": "3.5.2"
+    "vite-plugin-runtime-config": "1.0.2"
   },
   "peerDependencies": {
     "react": "18",

packages/components-react/src/checkbox/Checkbox.css

@@ -1,3 +1,9 @@
+:root {
+  /* Just for an example */
+  --lux-checkbox-target-hover-background-color: hsla(0 0% 76% / 19%);
+  --lux-checkbox-target-border-radius: 50%;
+}
+
 .lux-checkbox:checked:focus {
   border-color: var(--lux-checkbox-checked-focus-border-color);
   background-color: var(--lux-checkbox-checked-focus-background-color);
@@ -25,3 +31,26 @@
 .lux-checkbox--disabled {
   cursor: not-allowed;
 }
+
+.lux-checkbox--with-target {
+  display: inline-grid;
+  grid-template-areas: "input";
+  place-content: center center;
+}
+
+.lux-checkbox--with-target::before,
+.lux-checkbox--with-target::after {
+  grid-area: input;
+  min-inline-size: 44px;
+  min-block-size: 44px;
+  content: "";
+}
+
+.lux-checkbox--with-target::after {
+  z-index: -1;
+}
+
+.lux-checkbox--with-target:hover::after {
+  border-radius: var(--lux-checkbox-target-border-radius);
+  background-color: var(--lux-checkbox-target-hover-background-color);
+}

packages/components-react/src/checkbox/Checkbox.tsx

@@ -6,42 +6,31 @@ import './Checkbox.css';
 import clsx from 'clsx';
 import { ForwardedRef, forwardRef, PropsWithChildren } from 'react';
 
-export type LuxCheckboxProps = UtrechtCheckboxProps & {
-  invalid?: boolean;
-  name?: string;
-  checked?: boolean;
-  disabled?: boolean;
-  className?: string;
+export type LuxCheckboxProps = Omit<UtrechtCheckboxProps, 'appearance'> & {
+  withTarget?: boolean;
 };
 
 const CLASSNAME = {
   checkbox: 'lux-checkbox',
   disabled: 'lux-checkbox--disabled',
+  withTarget: 'lux-checkbox--with-target',
 };
 
 export const LuxCheckbox = forwardRef(
   (
-    { disabled, className, name, checked, ...restProps }: PropsWithChildren<LuxCheckboxProps>,
+    { disabled, withTarget, className, ...restProps }: PropsWithChildren<LuxCheckboxProps>,
     ref: ForwardedRef<HTMLInputElement>,
   ) => {
     const combinedClassName = clsx(
       CLASSNAME.checkbox,
       {
         [CLASSNAME.disabled]: disabled,
+        [CLASSNAME.withTarget]: withTarget,
       },
       className,
     );
 
-    return (
-      <UtrechtCheckbox
-        ref={ref}
-        name={name}
-        className={combinedClassName}
-        checked={checked}
-        disabled={disabled}
-        {...restProps}
-      />
-    );
+    return <UtrechtCheckbox ref={ref} className={combinedClassName} disabled={disabled} {...restProps} />;
   },
 );
 

packages/components-react/src/form-field-checkbox/FormFieldCheckbox.scss

@@ -0,0 +1,126 @@
+/* stylelint-disable-next-line scss/load-no-partial-leading-underscore */
+@use "@utrecht/focus-ring-css/src/_mixin.scss" as focus-ring;
+
+:root {
+  --lux-form-field-checkbox-inner-column-gap: var(--lux-space-100);
+  --lux-form-field-checkbox-inner-padding-inline-start: var(--lux-space-200, 0.5rem);
+  --lux-form-field-checkbox-inner-padding-inline-end: var(--lux-space-200, 0.5rem);
+  --lux-form-field-checkbox-inner-padding-block-start: var(--lux-space-200, 0.5rem);
+  --lux-form-field-checkbox-inner-padding-block-end: var(--lux-space-200, 0.5rem);
+  --lux-form-field-checkbox-inner-border-radius: var(--lux-border-radius-default);
+  --lux-form-field-checkbox-inner-border-width: var(--lux-border-width-default, 1px);
+  --lux-form-field-checkbox-inner-border-style: solid;
+  --lux-form-field-checkbox-inner-color: var(--lux-color-foreground-default);
+  --lux-form-field-checkbox-inner-border-color: var(--lux-color-brand-default);
+  --lux-form-field-checkbox-inner-background-color: var(--lux-color-none);
+  --lux-form-field-checkbox-invalid-inner-border-color: var(--lux-color-feedback-error-default);
+  --lux-form-field-checkbox-invalid-inner-background-color: var(--lux-color-none);
+  --lux-form-field-checkbox-invalid-inner-row-gap: var(--lux-space-100);
+  --lux-form-field-checkbox-hover-inner-color: var(--lux-color-foreground-default);
+  --lux-form-field-checkbox-hover-inner-border-color: var(--lux-color-brand-default);
+  --lux-form-field-checkbox-hover-inner-background-color: var(--lux-color-brand-subdued);
+  --lux-form-field-checkbox-focus-visible-inner-color: var(--lux-color-foreground-default);
+  --lux-form-field-checkbox-focus-visible-inner-border-color: var(--lux-color-brand-default);
+  --lux-form-field-checkbox-focus-visible-inner-background-color: var(--lux-color-none);
+  --lux-form-field-checkbox-disabled-inner-color: var(--lux-color-foreground-default);
+  --lux-form-field-checkbox-disabled-inner-border-color: var(--lux-color-border-subdued);
+  --lux-form-field-checkbox-disabled-inner-background-color: var(--lux-color-none);
+}
+
+.lux-form-field-checkbox {
+  /* prettier-ignore */
+  --_lux-checkbox-size: calc(var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end) + var(--lux-form-field-checkbox-inner-padding-inline-start));
+  --_lux-column-gap: var(--lux-form-field-checkbox-inner-column-gap, var(--utrecht-checkbox-margin-inline-end, 12px));
+
+  position: relative;
+  grid-template-columns: var(--_lux-checkbox-size) 100fr;
+  grid-template-areas:
+    "input label"
+    ". description"
+    "error-message error-message";
+  gap: 0 var(--_lux-column-gap);
+
+  &::before {
+    position: relative;
+    grid-row-start: label;
+    grid-row-end: description;
+    grid-column-start: input;
+    grid-column-end: description;
+    z-index: -1;
+    border: var(--lux-form-field-checkbox-inner-border-width) var(--lux-form-field-checkbox-inner-border-style)
+      var(--lux-form-field-checkbox-inner-border-color);
+    border-radius: var(--lux-form-field-checkbox-inner-border-radius);
+    pointer-events: none;
+    content: "";
+  }
+
+  &--disabled::before {
+    border-color: var(--lux-form-field-checkbox-disabled-inner-border-color);
+    background-color: var(--lux-form-field-checkbox-disabled-inner-background-color);
+    color: var(--lux-form-field-checkbox-disabled-inner-color);
+  }
+
+  &--invalid::before {
+    border-color: var(--lux-form-field-checkbox-invalid-inner-border-color);
+    background-color: var(--lux-form-field-checkbox-invalid-inner-background-color);
+    color: var(--lux-form-field-checkbox-invalid-inner-color);
+  }
+
+  &:has(:focus-visible)::before {
+    --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
+      var(--utrecht-focus-inverse-outline-color, transparent);
+
+    @include focus-ring.utrecht-focus-ring;
+
+    z-index: -1;
+    border-color: var(--lux-form-field-checkbox-focus-visible-inner-border-color);
+    background-color: var(--lux-form-field-checkbox-focus-visible-inner-background-color);
+    color: var(--lux-form-field-checkbox-focus-visible-inner-color);
+  }
+
+  .utrecht-checkbox:focus-visible {
+    outline: none;
+  }
+
+  &:not(#{&}--disabled):has(.utrecht-form-field__input .utrecht-checkbox:hover)::before {
+    border-color: var(--lux-form-field-checkbox-hover-inner-border-color);
+    background-color: var(--lux-form-field-checkbox-hover-inner-background-color);
+    color: var(--lux-form-field-checkbox-hover-inner-color);
+  }
+
+  &--with-target &__label::before,
+  &--with-target &__description label::before {
+    position: absolute;
+    inset-block-end: 0;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    inset-inline-start: calc(-1 * var(--_lux-checkbox-size) - var(--_lux-column-gap));
+    pointer-events: visible;
+    content: "";
+  }
+
+  .utrecht-form-field__label,
+  .utrecht-form-field__description {
+    position: relative;
+  }
+
+  .utrecht-form-field__label,
+  .utrecht-form-field__input {
+    padding-block-start: var(--lux-form-field-checkbox-inner-padding-block-start);
+  }
+
+  .utrecht-form-field__label + .utrecht-form-field__input,
+  .utrecht-form-field__description {
+    padding-block-end: var(--lux-form-field-checkbox-inner-padding-block-end);
+  }
+
+  .utrecht-form-field__input {
+    display: grid;
+    place-content: baseline center;
+    padding-inline-start: var(--lux-form-field-checkbox-inner-padding-inline-start);
+  }
+
+  .utrecht-form-field__error-message {
+    padding-block-start: var(--lux-form-field-checkbox-invalid-inner-row-gap);
+  }
+}

packages/components-react/src/form-field-checkbox/FormFieldCheckbox.tsx

@@ -0,0 +1,96 @@
+import clsx from 'clsx';
+import { useId } from 'react';
+import { LuxCheckbox } from '../checkbox/Checkbox';
+import { LuxFormField, LuxFormFieldProps } from '../form-field/FormField';
+import {
+  LuxFormFieldDescription,
+  type LuxFormFieldDescriptionAppearance,
+} from '../form-field-description/FormFieldDescription';
+import { LuxFormFieldErrorMessage } from '../form-field-error-message/FormFieldErrorMessage';
+import { LuxFormFieldLabel } from '../form-field-label/FormFieldLabel';
+import './FormFieldCheckbox.scss';
+
+export type LuxFormFieldCheckboxProps = LuxFormFieldProps & {
+  checked?: boolean;
+  disabled?: boolean;
+  appearance?: LuxFormFieldDescriptionAppearance;
+  withTarget?: boolean;
+  distanced?: boolean;
+};
+
+export const LuxFormFieldCheckbox = ({
+  label,
+  description,
+  errorMessage,
+  checked,
+  disabled,
+  invalid,
+  appearance,
+  withTarget,
+  distanced,
+  children,
+  ...restProps
+}: LuxFormFieldCheckboxProps) => {
+  const inputId = useId();
+  const descriptionId = useId();
+  const errorMessageId = useId();
+
+  const labelNode =
+    typeof label === 'string' ? (
+      <LuxFormFieldLabel
+        type="checkbox"
+        disabled={disabled}
+        htmlFor={inputId}
+        className="lux-form-field-checkbox__label"
+      >
+        {label}
+      </LuxFormFieldLabel>
+    ) : (
+      label
+    );
+  const descriptionNode =
+    typeof description === 'string' && description !== '' ? (
+      <LuxFormFieldDescription
+        appearance={invalid ? 'invalid' : appearance}
+        id={descriptionId}
+        className="lux-form-field-checkbox__description"
+      >
+        <label htmlFor={inputId}>{description}</label>
+      </LuxFormFieldDescription>
+    ) : (
+      description
+    );
+  const errorMessageNode =
+    typeof errorMessage === 'string' ? (
+      <LuxFormFieldErrorMessage
+        distanced={distanced}
+        id={errorMessageId}
+        className="lux-form-field-checkbox__error-message"
+      >
+        {errorMessage}
+      </LuxFormFieldErrorMessage>
+    ) : (
+      errorMessage
+    );
+
+  return (
+    <LuxFormField
+      type="checkbox"
+      label={labelNode}
+      description={descriptionNode}
+      errorMessage={errorMessageNode}
+      invalid={invalid}
+      input={
+        <LuxCheckbox id={inputId} disabled={disabled} invalid={invalid} checked={checked} withTarget={withTarget} />
+      }
+      className={clsx('lux-form-field-checkbox', {
+        'lux-form-field-checkbox--invalid': invalid,
+        'lux-form-field-checkbox--disabled': disabled,
+        'lux-form-field-checkbox--with-target': withTarget,
+      })}
+      {...restProps}
+    >
+      {children}
+    </LuxFormField>
+  );
+};

packages/components-react/src/index.ts

@@ -14,6 +14,7 @@ export {
 } from './heading/Heading';
 export { LuxHeadingGroup, type LuxHeadingGroupProps } from './heading-group/HeadingGroup';
 export { LuxFormField, type LuxFormFieldProps } from './form-field/FormField';
+export { LuxFormFieldCheckbox, type LuxFormFieldCheckboxProps } from './form-field-checkbox/FormFieldCheckbox';
 export {
   LuxFormFieldDescription,
   type LuxFormFieldDescriptionProps,

packages/storybook/src/react-components/checkbox/checkbox.mdx

@@ -51,6 +51,6 @@ import { CitationDocumentation } from "../../utils/CitationDocumentation.tsx";
 
 <Canvas of={CheckboxStories.Focus} />
 
-### Focus Visible
+## With Target
 
-<Canvas of={CheckboxStories.FocusVisible} />
+<Canvas of={CheckboxStories.WithTarget} />