feat: drawer component

Still experimental

components/drawer/README.md

@@ -0,0 +1,3 @@
+<!-- @license CC0-1.0 -->
+
+# Drawer component

components/drawer/css/_mixin.scss

@@ -0,0 +1,94 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+@import "../../backdrop/css/mixin";
+
+@mixin utrecht-drawer {
+  /* minimum size for backdrop with light-dismiss is 44px x 44px to meet WCAG SC 2.5.5 */
+  --_utrecht-drawer-backdrop-min-size: max(var(--utrecht-drawer-backdrop-min-size), 44px);
+
+  background-color: var(--utrecht-drawer-background-color, Canvas);
+  border-color: var(--utrecht-drawer-border-color, currentColor);
+  border-width: var(--utrecht-drawer-border-width, 0);
+  box-sizing: border-box;
+  color: var(--utrecht-drawer-color, CanvasText);
+  overflow: auto;
+  padding-block-end: var(--utrecht-drawer-padding-block-end);
+  padding-block-start: var(--utrecht-drawer-padding-block-start);
+  padding-inline-end: var(--utrecht-drawer-padding-inline-end);
+  padding-inline-start: var(--utrecht-drawer-padding-inline-start);
+  position: fixed;
+  z-index: var(--utrecht-drawer-z-index, 1);
+}
+
+@mixin utrecht-drawer--html-dialog {
+  margin-block-start: 0;
+}
+
+@mixin utrecht-drawer__backdrop {
+  @include utrecht-backdrop;
+}
+
+@mixin utrecht-drawer--inline {
+  block-size: 100%;
+  inset-block-end: 0;
+  inset-block-start: 0;
+  max-block-size: 100%;
+  max-inline-size: min(
+    var(--utrecht-drawer-max-inline-size, 100%),
+    calc(100% - var(--_utrecht-drawer-backdrop-min-size, 44px))
+  );
+  min-inline-size: var(--utrecht-drawer-min-inline-size, calc((1280px / 4) - var(--_utrecht-drawer-backdrop-min-size)));
+}
+
+@mixin utrecht-drawer--inline-start {
+  @include utrecht-drawer--inline;
+
+  border-end-end-radius: var(--utrecht-drawer-border-radius);
+  border-inline-start-width: 0;
+  border-start-end-radius: var(--utrecht-drawer-border-radius);
+  inset-inline-end: auto;
+  inset-inline-start: 0;
+}
+
+@mixin utrecht-drawer--inline-end {
+  @include utrecht-drawer--inline;
+
+  border-end-start-radius: var(--utrecht-drawer-border-radius);
+  border-inline-end-width: 0;
+  border-start-start-radius: var(--utrecht-drawer-border-radius);
+  inset-inline-end: 0;
+  inset-inline-start: auto;
+}
+
+@mixin utrecht-drawer--block {
+  block-size: fit-content;
+  inline-size: 100%;
+  inset-inline-end: 0;
+  inset-inline-start: 0;
+  max-block-size: min(var(--utrecht-drawer-max-block-size), calc(100% - var(--_utrecht-drawer-backdrop-min-size)));
+  max-inline-size: 100%;
+  min-block-size: var(--utrecht-drawer-min-block-size, calc((1024px / 4) - var(--_utrecht-drawer-backdrop-min-size)));
+}
+
+@mixin utrecht-drawer--block-start {
+  @include utrecht-drawer--block;
+
+  border-block-start-width: 0;
+  border-end-end-radius: var(--utrecht-drawer-border-radius);
+  border-end-start-radius: var(--utrecht-drawer-border-radius);
+  inset-block-end: auto;
+  inset-block-start: 0;
+}
+
+@mixin utrecht-drawer--block-end {
+  @include utrecht-drawer--block;
+
+  border-block-end-width: 0;
+  border-start-end-radius: var(--utrecht-drawer-border-radius);
+  border-start-start-radius: var(--utrecht-drawer-border-radius);
+  inset-block-end: 0;
+  inset-block-start: auto;
+}

components/drawer/css/index.scss

@@ -0,0 +1,30 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+@import "./mixin";
+
+.utrecht-drawer {
+  @include utrecht-drawer;
+}
+
+.utrecht-drawer::backdrop {
+  @include utrecht-drawer__backdrop;
+}
+
+.utrecht-drawer--inline-start {
+  @include utrecht-drawer--inline-start;
+}
+
+.utrecht-drawer--inline-end {
+  @include utrecht-drawer--inline-end;
+}
+
+.utrecht-drawer--block-start {
+  @include utrecht-drawer--block-start;
+}
+
+.utrecht-drawer--block-end {
+  @include utrecht-drawer--block-end;
+}

components/drawer/tokens.json

@@ -0,0 +1,128 @@
+{
+  "utrecht": {
+    "drawer": {
+      "background-color": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<color>",
+            "inherits": true
+          }
+        }
+      },
+      "border-color": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<color>",
+            "inherits": true
+          }
+        }
+      },
+      "border-radius": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          }
+        }
+      },
+      "border-width": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          }
+        }
+      },
+      "color": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<color>",
+            "inherits": true
+          }
+        }
+      },
+      "max-block-size": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          }
+        }
+      },
+      "min-block-size": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          }
+        }
+      },
+      "max-inline-size": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          }
+        }
+      },
+      "min-inline-size": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          }
+        }
+      },
+      "padding-block-end": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          }
+        }
+      },
+      "padding-block-start": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          }
+        }
+      },
+      "padding-inline-start": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          }
+        }
+      },
+      "padding-inline-end": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          }
+        }
+      },
+      "z-index": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<number>",
+            "inherits": true
+          }
+        }
+      },
+      "backdrop": {
+        "min-size": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<length>",
+              "inherits": true
+            }
+          }
+        }
+      }
+    }
+  }
+}

components/index.scss

@@ -42,6 +42,7 @@
 @import "./data-list/css";
 @import "./digid-button/css";
 @import "./document/css";
+@import "./drawer/css";
 @import "./emphasis/css";
 @import "./figure/css";
 @import "./form/css";

packages/component-library-react/src/Drawer.tsx

@@ -0,0 +1,60 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import clsx from 'clsx';
+import {
+  DialogHTMLAttributes,
+  ForwardedRef,
+  forwardRef,
+  PropsWithChildren,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from 'react';
+
+export type DrawerAlignType = 'block-end' | 'block-start' | 'inline-end' | 'inline-start';
+
+export interface DrawerProps extends DialogHTMLAttributes<HTMLDialogElement> {
+  align?: string | DrawerAlignType;
+  modal?: boolean;
+}
+
+export const Drawer = forwardRef(
+  (
+    { align, children, className, modal, ...restProps }: PropsWithChildren<DrawerProps>,
+    ref: ForwardedRef<HTMLDialogElement>,
+  ) => {
+    let dialogRef = useRef<HTMLDialogElement>(null);
+
+    useImperativeHandle(ref, () => dialogRef.current as HTMLDialogElement);
+
+    useEffect(() => {
+      if (modal && restProps.open && dialogRef?.current) {
+        // Dialog must not be `open` initially, prevent the following error:
+        // "Cannot call showModal() on an open non-modal dialog"
+        dialogRef.current.close();
+        dialogRef.current.showModal();
+      }
+    });
+
+    return (
+      <dialog
+        {...restProps}
+        ref={dialogRef}
+        className={clsx('utrecht-drawer', {
+          'utrecht-drawer--block-end': align === 'block-end',
+          'utrecht-drawer--block-start': align === 'block-start',
+          'utrecht-drawer--inline-end': align === 'inline-end',
+          'utrecht-drawer--inline-start': align === 'inline-start' || !align,
+          className,
+        })}
+      >
+        {children}
+      </dialog>
+    );
+  },
+);
+
+Drawer.displayName = 'Drawer';

packages/component-library-react/src/css-module/Drawer.tsx

@@ -0,0 +1,8 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import '../../../../components/drawer/css/index.scss';
+
+export * from '../Drawer';

packages/component-library-react/src/css-module/index.ts

@@ -49,6 +49,8 @@ export type {
 } from '../DataList';
 export { DataList, DataListItem, DataListActions, DataListKey, DataListValue } from './DataList';
 export type { EmphasisProps } from '../Emphasis';
+export type { DrawerAlignType, DrawerProps } from './Drawer';
+export { Drawer } from './Drawer';
 export { Emphasis } from './Emphasis';
 export type { FieldsetProps } from '../Fieldset';
 export { Fieldset } from './Fieldset';

packages/component-library-react/src/index.ts

@@ -55,6 +55,8 @@ export type {
   DataListValueProps,
 } from './DataList';
 export { DataList, DataListItem, DataListActions, DataListKey, DataListValue } from './DataList';
+export type { DrawerAlignType, DrawerProps } from './Drawer';
+export { Drawer } from './Drawer';
 export type { EmphasisProps } from './Emphasis';
 export { Emphasis } from './Emphasis';
 export type { FieldsetProps } from './Fieldset';