@dbcdk/react-components 0.0.169 → 0.0.171

package/dist/components/nav-bar/NavBar.module.css

@@ -0,0 +1,243 @@
+.container {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xl);
+  inline-size: 100%;
+  box-sizing: border-box;
+  flex-grow: 1;
+}
+
+.logoRow {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  flex-shrink: 0;
+}
+
+.logoRow a {
+  color: unset;
+}
+
+.navContent {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  min-inline-size: 0;
+  flex: 1 1 auto;
+}
+
+/* Burger: hidden on desktop, visible on mobile */
+.burger {
+  display: none;
+  margin-inline-start: auto;
+}
+
+.burgerButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--component-size-md);
+  block-size: var(--component-size-md);
+  border: none;
+  background: transparent;
+  color: var(--color-fg-default);
+  border-radius: var(--border-radius-default);
+  cursor: pointer;
+  padding: 0;
+  transition: background-color var(--transition-fast) var(--ease-standard);
+}
+
+.burgerButton:hover {
+  background-color: var(--color-bg-hover-subtle);
+}
+
+.burgerButton:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+/* Mobile dropdown content */
+.mobileMenu {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-xs);
+}
+
+.mobileNavItems {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.mobileAddition {
+  border-top: var(--border-width-thin) solid var(--color-border-subtle);
+  padding-top: var(--spacing-xs);
+}
+
+@media (max-width: 1024px) {
+  .container {
+    flex-wrap: nowrap;
+    overflow: hidden;
+  }
+
+  .logoRow {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    overflow: hidden;
+  }
+
+  .navContent {
+    display: none;
+  }
+
+  .addition {
+    display: none;
+  }
+
+  .burger {
+    display: flex;
+    flex-shrink: 0;
+    margin-inline-start: 0;
+  }
+}
+
+.productName {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  color: inherit;
+  text-decoration: none;
+}
+
+.productNameLabel {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  color: var(--color-fg-default);
+}
+
+.productNameSquare {
+  inline-size: 5px;
+  block-size: 5px;
+  flex: 0 0 auto;
+  background-color: var(--color-logo);
+}
+
+.productNameLabel h1 {
+  font-size: var(--font-size-sm);
+}
+.productName svg {
+  inline-size: auto;
+  block-size: var(--icon-size-md);
+}
+
+.navItems {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  min-inline-size: 0;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.addition {
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  margin-inline-start: auto;
+}
+
+.mobileAddition {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--spacing-xs);
+}
+
+.navItem {
+  list-style: none;
+  min-inline-size: 0;
+}
+
+.link {
+  text-transform: var(--nav-link-transform);
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  color: var(--color-fg-muted);
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  text-decoration: none;
+  border-radius: var(--border-radius-default);
+  padding-block: var(--spacing-xs);
+  padding-inline: var(--spacing-sm);
+  transition:
+    background-color var(--transition-fast) var(--ease-standard),
+    color var(--transition-fast) var(--ease-standard),
+    box-shadow var(--transition-fast) var(--ease-standard);
+}
+
+/* Hover + focus */
+.link:hover {
+  color: var(--color-fg-default);
+}
+.link:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+/* Active underline */
+.link.active,
+.link[aria-current='page'] {
+  color: var(--color-brand);
+  box-shadow: none;
+}
+
+.link::after {
+  content: '';
+  position: absolute;
+  inset-inline-start: 0;
+  inset-block-end: 0;
+  inline-size: 0;
+  block-size: 2px;
+  background-color: var(--color-border-strong);
+  transition: inline-size var(--transition-fast) var(--ease-standard);
+}
+
+.link:hover::after {
+  inline-size: 100%;
+}
+
+.link.active::after,
+.link[aria-current='page']::after {
+  inline-size: 100%;
+  background-color: var(--color-brand);
+}
+
+/* Icons/images inside links */
+.link svg,
+.link img {
+  inline-size: var(--icon-size-md);
+  block-size: var(--icon-size-md);
+  flex: 0 0 auto;
+}
+
+@media (max-width: 767px) {
+  .addition,
+  .mobileAddition {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--spacing-xs);
+  }
+
+  .addition > *,
+  .mobileAddition > * {
+    width: 100%;
+  }
+}

package/dist/components/overlay/fade-overlay/FadeOverlay.cjs

@@ -0,0 +1,30 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('./FadeOverlay.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function cx(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function FadeOverlay({
+  edge = "bottom",
+  size = "md",
+  className,
+  "aria-hidden": ariaHidden = true,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "aria-hidden": ariaHidden,
+      className: cx(styles__default.default.overlay, styles__default.default[edge], styles__default.default[size], className),
+      ...rest
+    }
+  );
+}
+
+exports.FadeOverlay = FadeOverlay;

package/dist/components/overlay/fade-overlay/FadeOverlay.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes, ReactElement } from 'react';
+export interface FadeOverlayProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Which edge should have the solid background color.
+     * Defaults to bottom, which fits preview/paywall-style fades.
+     */
+    edge?: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * How far the fade reaches into the container.
+     */
+    size?: 'sm' | 'md' | 'lg';
+}
+export declare function FadeOverlay({ edge, size, className, 'aria-hidden': ariaHidden, ...rest }: FadeOverlayProps): ReactElement;

package/dist/components/overlay/fade-overlay/FadeOverlay.js

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import styles from './FadeOverlay.module.css';
+
+function cx(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function FadeOverlay({
+  edge = "bottom",
+  size = "md",
+  className,
+  "aria-hidden": ariaHidden = true,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": ariaHidden,
+      className: cx(styles.overlay, styles[edge], styles[size], className),
+      ...rest
+    }
+  );
+}
+
+export { FadeOverlay };

package/dist/components/overlay/fade-overlay/FadeOverlay.module.css

@@ -0,0 +1,54 @@
+.overlay {
+  --fade-overlay-color: var(--color-bg-surface);
+  --fade-overlay-size: 65%;
+
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+  border-radius: inherit;
+}
+
+.bottom {
+  background: linear-gradient(
+    to top,
+    var(--fade-overlay-color) 0%,
+    transparent var(--fade-overlay-size)
+  );
+}
+
+.top {
+  background: linear-gradient(
+    to bottom,
+    var(--fade-overlay-color) 0%,
+    transparent var(--fade-overlay-size)
+  );
+}
+
+.left {
+  background: linear-gradient(
+    to right,
+    var(--fade-overlay-color) 0%,
+    transparent var(--fade-overlay-size)
+  );
+}
+
+.right {
+  background: linear-gradient(
+    to left,
+    var(--fade-overlay-color) 0%,
+    transparent var(--fade-overlay-size)
+  );
+}
+
+.sm {
+  --fade-overlay-size: 40%;
+}
+
+.md {
+  --fade-overlay-size: 65%;
+}
+
+.lg {
+  --fade-overlay-size: 85%;
+}

package/dist/components/overlay/modal/Modal.cjs

@@ -0,0 +1,200 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var react = require('react');
+var reactDom = require('react-dom');
+var Button = require('../../../components/button/Button');
+var Headline = require('../../../components/headline/Headline');
+var styles = require('./Modal.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function Modal({
+  isOpen,
+  onRequestClose,
+  header,
+  subheader,
+  headerAddition,
+  content,
+  children,
+  primaryAction,
+  secondaryAction,
+  closeOnOverlayClick = true,
+  severity,
+  disableContentSpacing = false,
+  isLoading,
+  dataCy,
+  width,
+  ariaLabel
+}) {
+  const titleId = react.useId();
+  const dialogRef = react.useRef(null);
+  const lastActiveElementRef = react.useRef(null);
+  const [mounted, setMounted] = react.useState(false);
+  const onRequestCloseRef = react.useRef(onRequestClose);
+  react.useEffect(() => {
+    onRequestCloseRef.current = onRequestClose;
+  }, [onRequestClose]);
+  react.useEffect(() => {
+    setMounted(true);
+  }, []);
+  const wasOpenRef = react.useRef(false);
+  react.useEffect(() => {
+    var _a;
+    const wasOpen = wasOpenRef.current;
+    wasOpenRef.current = isOpen;
+    if (!isOpen) return;
+    if (!wasOpen) {
+      lastActiveElementRef.current = document.activeElement;
+      const dialog = dialogRef.current;
+      if (dialog) {
+        const focusableSelectors2 = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+        const focusable = dialog.querySelectorAll(focusableSelectors2);
+        if (focusable.length > 0) {
+          const preferred = (_a = dialog.querySelector("input, select, textarea")) != null ? _a : focusable[0];
+          preferred.focus();
+        } else {
+          dialog.focus();
+        }
+      }
+    }
+    const focusableSelectors = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+    const getFocusable = () => {
+      var _a2, _b;
+      return (_b = (_a2 = dialogRef.current) == null ? void 0 : _a2.querySelectorAll(focusableSelectors)) != null ? _b : [];
+    };
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        onRequestCloseRef.current();
+        return;
+      }
+      if (event.key === "Tab" && dialogRef.current) {
+        const focusable = getFocusable();
+        if (focusable.length === 0) return;
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        if (event.shiftKey) {
+          if (document.activeElement === first || !dialogRef.current.contains(document.activeElement)) {
+            event.preventDefault();
+            last.focus();
+          }
+        } else {
+          if (document.activeElement === last || !dialogRef.current.contains(document.activeElement)) {
+            event.preventDefault();
+            first.focus();
+          }
+        }
+      }
+    };
+    const handleFocusIn = (event) => {
+      const dialog = dialogRef.current;
+      if (!dialog || dialog.contains(event.target)) return;
+      const focusable = getFocusable();
+      if (focusable.length > 0) focusable[0].focus();
+      else dialog.focus();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    document.addEventListener("focusin", handleFocusIn);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("focusin", handleFocusIn);
+      if (lastActiveElementRef.current) {
+        lastActiveElementRef.current.focus();
+      }
+    };
+  }, [isOpen]);
+  if (!isOpen || !mounted) return null;
+  const handleOverlayClick = () => {
+    if (closeOnOverlayClick) {
+      onRequestCloseRef.current();
+    }
+  };
+  const stopPropagation = (e) => {
+    e.stopPropagation();
+  };
+  const resolvedSecondaryAction = primaryAction || secondaryAction ? { label: "Luk", onClick: onRequestClose, ...secondaryAction } : void 0;
+  const shouldRenderFooter = Boolean(primaryAction || resolvedSecondaryAction);
+  const body = children != null ? children : content;
+  const resolvedWidth = typeof width === "number" ? `${width}px` : typeof width === "string" ? width : void 0;
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.overlay, onClick: handleOverlayClick, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-cy": dataCy,
+        ref: dialogRef,
+        className: `${styles__default.default.modal} ${disableContentSpacing ? "" : styles__default.default.contentSpacing}`,
+        style: resolvedWidth ? { ["--modal-width"]: resolvedWidth } : void 0,
+        onClick: stopPropagation,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": header ? titleId : void 0,
+        "aria-label": !header ? ariaLabel : void 0,
+        tabIndex: -1,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.header, children: [
+            header && /* @__PURE__ */ jsxRuntime.jsx(
+              Headline.Headline,
+              {
+                id: titleId,
+                severity,
+                size: 2,
+                disableMargin: true,
+                subheader,
+                addition: headerAddition,
+                children: header
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Button.Button,
+              {
+                type: "button",
+                variant: "inline",
+                onClick: () => onRequestCloseRef.current(),
+                "aria-label": "Luk",
+                shape: "round",
+                icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {})
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.body, children: body }),
+          shouldRenderFooter && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.footer, children: [
+            resolvedSecondaryAction && /* @__PURE__ */ jsxRuntime.jsxs(
+              Button.Button,
+              {
+                type: "button",
+                onClick: resolvedSecondaryAction.onClick,
+                disabled: resolvedSecondaryAction.disabled || resolvedSecondaryAction.loading || isLoading,
+                loading: resolvedSecondaryAction.loading,
+                children: [
+                  resolvedSecondaryAction.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: resolvedSecondaryAction.icon }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: resolvedSecondaryAction.label })
+                ]
+              }
+            ),
+            primaryAction && /* @__PURE__ */ jsxRuntime.jsxs(
+              Button.Button,
+              {
+                type: "button",
+                variant: primaryAction.severity || "primary",
+                onClick: primaryAction.onClick,
+                disabled: primaryAction.disabled || primaryAction.loading || isLoading,
+                loading: primaryAction.loading || isLoading,
+                children: [
+                  primaryAction.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: primaryAction.icon }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: primaryAction.label })
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    ) }),
+    document.body
+  );
+}
+
+exports.Modal = Modal;

package/dist/components/overlay/modal/Modal.d.ts

@@ -0,0 +1,30 @@
+import React, { ReactNode } from 'react';
+import { ButtonVariant } from '../../../components/button/Button';
+import { Severity } from '../../../constants/severity.types';
+export type ModalActionConfig = {
+    label: string;
+    severity?: ButtonVariant;
+    onClick?: () => void;
+    icon?: ReactNode;
+    disabled?: boolean;
+    loading?: boolean;
+};
+export type ModalProps = {
+    isLoading?: boolean;
+    isOpen: boolean;
+    onRequestClose: () => void;
+    header?: ReactNode;
+    subheader?: ReactNode;
+    headerAddition?: ReactNode;
+    content?: ReactNode;
+    children?: ReactNode;
+    primaryAction?: ModalActionConfig;
+    secondaryAction?: ModalActionConfig;
+    closeOnOverlayClick?: boolean;
+    severity?: Severity;
+    disableContentSpacing?: boolean;
+    dataCy?: string;
+    width?: number | string;
+    ariaLabel?: string;
+};
+export declare function Modal({ isOpen, onRequestClose, header, subheader, headerAddition, content, children, primaryAction, secondaryAction, closeOnOverlayClick, severity, disableContentSpacing, isLoading, dataCy, width, ariaLabel, }: ModalProps): React.ReactNode;