@dbcdk/react-components 0.0.103 → 0.0.105

package/dist/components/page-layout/components/footer/Footer.js

@@ -0,0 +1,47 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Logo } from '../../../../assets/logo';
+import { Hyperlink } from '../../../../components/hyperlink/Hyperlink';
+import styles from './Footer.module.css';
+
+const DEFAULT_META_PARTS = [
+  "Tempovej 7-11",
+  "DK-2750 Ballerup",
+  "+45 44 86 77 11",
+  `\xA9 ${(/* @__PURE__ */ new Date()).getFullYear()} DBC DIGITAL A/S`
+];
+const DEFAULT_LINKS = [
+  {
+    label: "Kundeservice",
+    href: "https://kundeservice.dbc.dk",
+    external: true
+  }
+];
+function Footer({
+  links = DEFAULT_LINKS,
+  metaParts = DEFAULT_META_PARTS,
+  version,
+  extraLinks
+}) {
+  const displayMetaParts = version && metaParts.length > 0 ? metaParts.map(
+    (part, index) => index === metaParts.length - 1 ? `${part} \xB7 ${version}` : part
+  ) : metaParts;
+  return /* @__PURE__ */ jsx("footer", { className: styles.footer, children: /* @__PURE__ */ jsxs("div", { className: styles.inner, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.brand, children: [
+      /* @__PURE__ */ jsx("div", { className: styles.logoRow, children: /* @__PURE__ */ jsx(Logo, {}) }),
+      /* @__PURE__ */ jsx("address", { className: styles.meta, children: displayMetaParts.map((part) => /* @__PURE__ */ jsx("span", { className: styles.part, children: part }, part)) })
+    ] }),
+    /* @__PURE__ */ jsxs("nav", { className: styles.links, "aria-label": "Footer navigation", children: [
+      extraLinks && extraLinks.length > 0 && (extraLinks == null ? void 0 : extraLinks.map((link, index) => /* @__PURE__ */ jsx("span", { children: link }, index))),
+      links.map((link) => /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+        Hyperlink,
+        {
+          href: link.href,
+          ...link.external ? { target: "_blank", rel: "noopener noreferrer" } : {},
+          children: link.label
+        }
+      ) }, link.label))
+    ] })
+  ] }) });
+}
+
+export { Footer };

package/dist/components/page-layout/components/footer/Footer.module.css

@@ -0,0 +1,89 @@
+.footer {
+  inline-size: 100%;
+  background: var(--color-bg-surface-subtle);
+  line-height: var(--line-height-normal);
+}
+
+.inner {
+  inline-size: 100%;
+  max-inline-size: var(--container-xl);
+  margin-inline: auto;
+  padding-block: var(--spacing-lg);
+  padding-inline: var(--spacing-md);
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--spacing-2xl);
+}
+
+.brand {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  flex-shrink: 0;
+}
+
+.logoRow {
+  flex-shrink: 0;
+}
+
+.logoRow svg {
+  height: 24px;
+  width: auto;
+  color: var(--color-brand);
+  display: block;
+}
+
+.meta {
+  font-style: normal;
+  margin: 0;
+  color: var(--color-fg-subtle);
+  line-height: var(--line-height-normal);
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.part {
+  white-space: nowrap;
+}
+
+.links {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0;
+  line-height: var(--line-height-normal);
+}
+
+.linkGroup {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-2xs);
+}
+
+.linkGroup + .linkGroup {
+  margin-block-start: var(--spacing-sm);
+  padding-inline: 0;
+  border-inline-start: none;
+}
+
+.linkItem {
+  white-space: nowrap;
+}
+
+@media (max-width: 640px) {
+  .inner {
+    flex-direction: column;
+    gap: var(--spacing-md);
+  }
+
+  .linkGroup {
+    padding-inline: 0;
+  }
+
+  .linkGroup:first-child {
+    padding-inline-start: 0;
+  }
+}

package/dist/components/pagination/Pagination.cjs

@@ -0,0 +1,160 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var react = require('react');
+var styles = require('./Pagination.module.css');
+var Button = require('../button/Button');
+var Menu = require('../menu/Menu');
+var Popover = require('../popover/Popover');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+const DEFAULT_PAGE_SIZE_OPTIONS = [20, 50, 100];
+const NUMBER_LOCALE = "da-DK";
+function Pagination({
+  itemsCount = 0,
+  skip = 0,
+  take = DEFAULT_PAGE_SIZE_OPTIONS[1],
+  onPageChange,
+  pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
+  showFirstLast = true,
+  showGoToPage = true
+}) {
+  const popoverRef = react.useRef(null);
+  const pageSizeRef = react.useRef(null);
+  const formatNumber = react.useCallback((value) => value.toLocaleString(NUMBER_LOCALE), []);
+  const totalPages = react.useMemo(
+    () => Math.max(1, Math.ceil(itemsCount / Math.max(1, take))),
+    [itemsCount, take]
+  );
+  const currentPage = react.useMemo(() => {
+    const p = Math.floor(skip / Math.max(1, take)) + 1;
+    return Math.min(Math.max(1, p), totalPages);
+  }, [skip, take, totalPages]);
+  const emit = react.useCallback(
+    (page, nextTake = take) => {
+      const nextTotalPages = Math.max(1, Math.ceil(itemsCount / Math.max(1, nextTake)));
+      const clampedPage = Math.min(Math.max(1, page), nextTotalPages);
+      const nextSkip = (clampedPage - 1) * nextTake;
+      onPageChange == null ? void 0 : onPageChange({
+        page: clampedPage,
+        take: nextTake,
+        skip: nextSkip,
+        totalPages: nextTotalPages
+      });
+    },
+    [onPageChange, take, itemsCount]
+  );
+  const firstPage = react.useCallback(() => emit(1), [emit]);
+  const lastPage = react.useCallback(() => emit(totalPages), [emit, totalPages]);
+  const prevPage = react.useCallback(() => emit(currentPage - 1), [emit, currentPage]);
+  const nextPage = react.useCallback(() => emit(currentPage + 1), [emit, currentPage]);
+  const goToPage = react.useCallback((page) => emit(page), [emit]);
+  const canPrev = currentPage > 1;
+  const canNext = currentPage < totalPages;
+  const rangeLabel = react.useMemo(() => {
+    if (itemsCount <= 0) return "0 af 0";
+    const first = skip + 1;
+    const last = Math.min(skip + take, itemsCount);
+    return `${formatNumber(first)}\u2013${formatNumber(last)} af ${formatNumber(itemsCount)}`;
+  }, [formatNumber, itemsCount, skip, take]);
+  const pages = react.useMemo(() => Array.from({ length: totalPages }, (_, i) => i + 1), [totalPages]);
+  const handlePageSizeChange = react.useCallback((size) => emit(1, size), [emit]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.container, children: [
+    showFirstLast && /* @__PURE__ */ jsxRuntime.jsx(
+      Button.Button,
+      {
+        size: "sm",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsLeft, {}),
+        disabled: !canPrev,
+        onClick: firstPage,
+        "aria-label": "First page"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Button.Button,
+      {
+        size: "sm",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, {}),
+        disabled: !canPrev,
+        onClick: prevPage,
+        "aria-label": "Previous page"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.range, "aria-live": "polite", children: rangeLabel }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Button.Button,
+      {
+        size: "sm",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, {}),
+        disabled: !canNext,
+        onClick: nextPage,
+        "aria-label": "Next page"
+      }
+    ),
+    showFirstLast && /* @__PURE__ */ jsxRuntime.jsx(
+      Button.Button,
+      {
+        size: "sm",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsRight, {}),
+        disabled: !canNext,
+        onClick: lastPage,
+        "aria-label": "Last page"
+      }
+    ),
+    showGoToPage && /* @__PURE__ */ jsxRuntime.jsx(
+      Popover.Popover,
+      {
+        ref: popoverRef,
+        trigger: (open) => /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, { size: "sm", variant: "outlined", onClick: open, children: [
+          "Side ",
+          formatNumber(currentPage),
+          "/",
+          formatNumber(totalPages),
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 16 })
+        ] }),
+        children: /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: pages == null ? void 0 : pages.map((page) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { active: page === currentPage, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => {
+              var _a;
+              goToPage(page);
+              (_a = popoverRef.current) == null ? void 0 : _a.close();
+            },
+            children: formatNumber(page)
+          }
+        ) }, page)) })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Popover.Popover,
+      {
+        ref: pageSizeRef,
+        trigger: (open) => /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, { size: "sm", variant: "outlined", onClick: open, children: [
+          "Vis ",
+          formatNumber(take),
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 16 })
+        ] }),
+        children: /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: pageSizeOptions == null ? void 0 : pageSizeOptions.map((size) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { active: size === take, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => {
+              var _a;
+              handlePageSizeChange(size);
+              (_a = pageSizeRef.current) == null ? void 0 : _a.close();
+            },
+            children: formatNumber(size)
+          }
+        ) }, size)) })
+      }
+    )
+  ] });
+}
+
+exports.Pagination = Pagination;

package/dist/components/pagination/Pagination.js

@@ -0,0 +1,154 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ChevronsLeft, ArrowLeft, ArrowRight, ChevronsRight, ChevronDown } from 'lucide-react';
+import { useRef, useCallback, useMemo } from 'react';
+import styles from './Pagination.module.css';
+import { Button } from '../button/Button';
+import { Menu } from '../menu/Menu';
+import { Popover } from '../popover/Popover';
+
+const DEFAULT_PAGE_SIZE_OPTIONS = [20, 50, 100];
+const NUMBER_LOCALE = "da-DK";
+function Pagination({
+  itemsCount = 0,
+  skip = 0,
+  take = DEFAULT_PAGE_SIZE_OPTIONS[1],
+  onPageChange,
+  pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
+  showFirstLast = true,
+  showGoToPage = true
+}) {
+  const popoverRef = useRef(null);
+  const pageSizeRef = useRef(null);
+  const formatNumber = useCallback((value) => value.toLocaleString(NUMBER_LOCALE), []);
+  const totalPages = useMemo(
+    () => Math.max(1, Math.ceil(itemsCount / Math.max(1, take))),
+    [itemsCount, take]
+  );
+  const currentPage = useMemo(() => {
+    const p = Math.floor(skip / Math.max(1, take)) + 1;
+    return Math.min(Math.max(1, p), totalPages);
+  }, [skip, take, totalPages]);
+  const emit = useCallback(
+    (page, nextTake = take) => {
+      const nextTotalPages = Math.max(1, Math.ceil(itemsCount / Math.max(1, nextTake)));
+      const clampedPage = Math.min(Math.max(1, page), nextTotalPages);
+      const nextSkip = (clampedPage - 1) * nextTake;
+      onPageChange == null ? void 0 : onPageChange({
+        page: clampedPage,
+        take: nextTake,
+        skip: nextSkip,
+        totalPages: nextTotalPages
+      });
+    },
+    [onPageChange, take, itemsCount]
+  );
+  const firstPage = useCallback(() => emit(1), [emit]);
+  const lastPage = useCallback(() => emit(totalPages), [emit, totalPages]);
+  const prevPage = useCallback(() => emit(currentPage - 1), [emit, currentPage]);
+  const nextPage = useCallback(() => emit(currentPage + 1), [emit, currentPage]);
+  const goToPage = useCallback((page) => emit(page), [emit]);
+  const canPrev = currentPage > 1;
+  const canNext = currentPage < totalPages;
+  const rangeLabel = useMemo(() => {
+    if (itemsCount <= 0) return "0 af 0";
+    const first = skip + 1;
+    const last = Math.min(skip + take, itemsCount);
+    return `${formatNumber(first)}\u2013${formatNumber(last)} af ${formatNumber(itemsCount)}`;
+  }, [formatNumber, itemsCount, skip, take]);
+  const pages = useMemo(() => Array.from({ length: totalPages }, (_, i) => i + 1), [totalPages]);
+  const handlePageSizeChange = useCallback((size) => emit(1, size), [emit]);
+  return /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
+    showFirstLast && /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "sm",
+        icon: /* @__PURE__ */ jsx(ChevronsLeft, {}),
+        disabled: !canPrev,
+        onClick: firstPage,
+        "aria-label": "First page"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "sm",
+        icon: /* @__PURE__ */ jsx(ArrowLeft, {}),
+        disabled: !canPrev,
+        onClick: prevPage,
+        "aria-label": "Previous page"
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: styles.range, "aria-live": "polite", children: rangeLabel }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "sm",
+        icon: /* @__PURE__ */ jsx(ArrowRight, {}),
+        disabled: !canNext,
+        onClick: nextPage,
+        "aria-label": "Next page"
+      }
+    ),
+    showFirstLast && /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "sm",
+        icon: /* @__PURE__ */ jsx(ChevronsRight, {}),
+        disabled: !canNext,
+        onClick: lastPage,
+        "aria-label": "Last page"
+      }
+    ),
+    showGoToPage && /* @__PURE__ */ jsx(
+      Popover,
+      {
+        ref: popoverRef,
+        trigger: (open) => /* @__PURE__ */ jsxs(Button, { size: "sm", variant: "outlined", onClick: open, children: [
+          "Side ",
+          formatNumber(currentPage),
+          "/",
+          formatNumber(totalPages),
+          " ",
+          /* @__PURE__ */ jsx(ChevronDown, { size: 16 })
+        ] }),
+        children: /* @__PURE__ */ jsx(Menu, { children: pages == null ? void 0 : pages.map((page) => /* @__PURE__ */ jsx(Menu.Item, { active: page === currentPage, children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => {
+              var _a;
+              goToPage(page);
+              (_a = popoverRef.current) == null ? void 0 : _a.close();
+            },
+            children: formatNumber(page)
+          }
+        ) }, page)) })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        ref: pageSizeRef,
+        trigger: (open) => /* @__PURE__ */ jsxs(Button, { size: "sm", variant: "outlined", onClick: open, children: [
+          "Vis ",
+          formatNumber(take),
+          " ",
+          /* @__PURE__ */ jsx(ChevronDown, { size: 16 })
+        ] }),
+        children: /* @__PURE__ */ jsx(Menu, { children: pageSizeOptions == null ? void 0 : pageSizeOptions.map((size) => /* @__PURE__ */ jsx(Menu.Item, { active: size === take, children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => {
+              var _a;
+              handlePageSizeChange(size);
+              (_a = pageSizeRef.current) == null ? void 0 : _a.close();
+            },
+            children: formatNumber(size)
+          }
+        ) }, size)) })
+      }
+    )
+  ] });
+}
+
+export { Pagination };

package/dist/components/pagination/Pagination.module.css

@@ -0,0 +1,25 @@
+.container {
+  display: flex;
+  gap: var(--spacing-xxs);
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto;
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+.ellipsisButton {
+  display: none;
+}
+
+@media (min-width: 480px) {
+  .ellipsisButton {
+    display: contents;
+  }
+}
+.range {
+  min-width: 110px;
+  text-align: center;
+  font-size: var(--font-size-xs);
+  padding: 0 var(--spacing-xxs);
+}

package/dist/components/panel/Panel.cjs

@@ -0,0 +1,38 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('./Panel.module.css');
+var Headline = require('../headline/Headline');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function Panel({
+  header,
+  subheader,
+  headerIcon,
+  headerAddition,
+  children,
+  severity,
+  size
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: `${styles__default.default.container} ${size ? styles__default.default[size] : ""}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.header, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Headline.Headline,
+      {
+        disableMargin: true,
+        size: size === "sm" ? 4 : 3,
+        icon: headerIcon,
+        addition: headerAddition,
+        subheader,
+        severity,
+        children: header
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.content, children })
+  ] });
+}
+
+exports.Panel = Panel;

package/dist/components/panel/Panel.js

@@ -0,0 +1,32 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styles from './Panel.module.css';
+import { Headline } from '../headline/Headline';
+
+function Panel({
+  header,
+  subheader,
+  headerIcon,
+  headerAddition,
+  children,
+  severity,
+  size
+}) {
+  return /* @__PURE__ */ jsxs("section", { className: `${styles.container} ${size ? styles[size] : ""}`, children: [
+    /* @__PURE__ */ jsx("div", { className: styles.header, children: /* @__PURE__ */ jsx(
+      Headline,
+      {
+        disableMargin: true,
+        size: size === "sm" ? 4 : 3,
+        icon: headerIcon,
+        addition: headerAddition,
+        subheader,
+        severity,
+        children: header
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: styles.content, children })
+  ] });
+}
+
+export { Panel };

package/dist/components/panel/Panel.module.css

@@ -0,0 +1,30 @@
+.container {
+  border: var(--border-width-thin) solid var(--color-border-subtle);
+  border-radius: var(--border-radius-md);
+  background-color: var(--color-bg-surface);
+  box-shadow: var(--shadow-md);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
+  border-bottom: var(--border-width-thin) solid var(--color-border-subtle);
+}
+
+.content {
+  padding: var(--spacing-md);
+}
+
+.header {
+  padding: var(--spacing-sm) var(--spacing-md);
+  background-color: var(--table-header-bg);
+}
+
+.container.sm {
+  .header,
+  .content {
+    padding: var(--spacing-xs) var(--spacing-md);
+  }
+}