@dbcdk/react-components 0.0.3 → 0.0.5

package/dist/components/page-layout/PageLayout.cjs

@@ -2,6 +2,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var styles = require('./PageLayout.module.css');
+var PageLayoutHero = require('./components/page-layout-hero/PageLayoutHero');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -41,8 +42,9 @@ const PageLayoutBase = ({
                       flex: 1,
                       display: "flex",
                       flexDirection: "column",
-                      padding: "1rem",
-                      gap: 20,
+                      padding: "var(--spacing-md)",
+                      gap: "var(--spacing-md)",
+                      backgroundColor: "var(--color-bg-surface)",
                       overflow: "auto"
                     },
                     children
@@ -63,25 +65,6 @@ const PageLayoutHeader = ({
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.headerContainer, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles__default.default.headerContent} ${maxWidth ? styles__default.default.maxWidth : ""}`, children }) });
 };
-const PageLayoutHero = ({
-  children,
-  link,
-  metaHeadline,
-  headline,
-  image,
-  maxWidth = true
-}) => {
-  const content = /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles__default.default.heroContainer} ${maxWidth ? styles__default.default.maxWidth : ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.heroImageWrapper, children: [
-    image,
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.heroText, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      metaHeadline && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.metaHeadline, children: metaHeadline }),
-      headline && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.headline, children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: headline }) }),
-      children
-    ] }) })
-  ] }) });
-  const rendered = link ? link(content) : content;
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: rendered });
-};
 const PageLayoutContent = ({
   maxWidth = true,
   children
@@ -93,7 +76,7 @@ const PageLayoutFooter = ({ children }) => {
 };
 const PageLayout = Object.assign(PageLayoutBase, {
   Header: PageLayoutHeader,
-  Hero: PageLayoutHero,
+  Hero: PageLayoutHero.PageLayoutHero,
   Content: PageLayoutContent,
   Footer: PageLayoutFooter
 });

package/dist/components/page-layout/PageLayout.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import type { PropsWithChildren } from 'react';
+import { PageLayoutHeroProps } from './components/page-layout-hero/PageLayoutHero';
 type Orientation = 'vertical' | 'horizontal';
 export interface PageLayoutProps extends PropsWithChildren {
     containScrolling?: boolean;
@@ -11,14 +12,6 @@ export interface PageLayoutHeaderProps {
     maxWidth?: boolean;
     children: React.ReactNode;
 }
-export interface PageLayoutHeroProps {
-    children?: React.ReactNode;
-    link?: (children: React.ReactNode) => React.ReactNode;
-    image?: React.ReactNode;
-    headline?: string | React.ReactNode;
-    metaHeadline?: string | React.ReactNode;
-    maxWidth?: boolean;
-}
 export interface PageLayoutContentProps {
     maxWidth?: boolean;
     children: React.ReactNode;

package/dist/components/page-layout/PageLayout.js

@@ -1,5 +1,6 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import styles from './PageLayout.module.css';
+import { PageLayoutHero } from './components/page-layout-hero/PageLayoutHero';
 
 const PageLayoutBase = ({
   children,
@@ -35,8 +36,9 @@ const PageLayoutBase = ({
                       flex: 1,
                       display: "flex",
                       flexDirection: "column",
-                      padding: "1rem",
-                      gap: 20,
+                      padding: "var(--spacing-md)",
+                      gap: "var(--spacing-md)",
+                      backgroundColor: "var(--color-bg-surface)",
                       overflow: "auto"
                     },
                     children
@@ -57,25 +59,6 @@ const PageLayoutHeader = ({
 }) => {
   return /* @__PURE__ */ jsx("div", { className: styles.headerContainer, children: /* @__PURE__ */ jsx("div", { className: `${styles.headerContent} ${maxWidth ? styles.maxWidth : ""}`, children }) });
 };
-const PageLayoutHero = ({
-  children,
-  link,
-  metaHeadline,
-  headline,
-  image,
-  maxWidth = true
-}) => {
-  const content = /* @__PURE__ */ jsx("div", { className: `${styles.heroContainer} ${maxWidth ? styles.maxWidth : ""}`, children: /* @__PURE__ */ jsxs("div", { className: styles.heroImageWrapper, children: [
-    image,
-    /* @__PURE__ */ jsx("div", { className: styles.heroText, children: /* @__PURE__ */ jsxs("div", { children: [
-      metaHeadline && /* @__PURE__ */ jsx("div", { className: styles.metaHeadline, children: metaHeadline }),
-      headline && /* @__PURE__ */ jsx("div", { className: styles.headline, children: /* @__PURE__ */ jsx("h2", { children: headline }) }),
-      children
-    ] }) })
-  ] }) });
-  const rendered = link ? link(content) : content;
-  return /* @__PURE__ */ jsx(Fragment, { children: rendered });
-};
 const PageLayoutContent = ({
   maxWidth = true,
   children

package/dist/components/page-layout/PageLayout.module.css

@@ -22,91 +22,15 @@
   }
 }
 
-.heroContainer {
-  height: clamp(220px, 80svh, 520px);
-  height: clamp(220px, 80vh, 600px);
-  position: relative;
-  overflow: hidden;
-  margin: var(--spacing-lg) auto;
-  width: 100%;
-  padding: 0 var(--spacing-lg);
-  box-sizing: border-box;
-}
-
-.heroContainer img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: 0% 10%;
-  display: block;
-}
-
-.heroImageWrapper {
-  height: 100%;
-  position: relative;
-}
-.heroImageWrapper::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  background: rgba(0, 0, 0, 0.15);
-}
-
-.heroText {
-  z-index: 10;
-  position: absolute;
-  left: var(--spacing-2xl);
-  bottom: var(--spacing-2xl);
-  padding: var(--spacing-md);
-  letter-spacing: 1px;
-  color: #fff;
-  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
-  font-size: 1.5rem;
-  font-weight: 600;
-  line-height: 1.3;
-}
-
-.heroText h2 {
-  margin: 0;
-  font-size: var(--font-size-2xl);
-}
-
-.heroText .metaHeadline {
-  text-transform: uppercase;
-  opacity: 0.9;
-  font-size: var(--font-size-lg);
-  text-transform: uppercase;
-  opacity: 0.9;
-  font-weight: 500;
-  padding: 0 0 var(--spacing-xs) 0;
-  font-weight: 400;
-}
-
-.metaHeadline::after {
-  content: '';
-  display: block;
-  width: 40px;
-  height: 3px;
-  background: var(--color-primary);
-  margin-top: 4px;
-  border-radius: 2px;
-}
-
 .headerContainer {
   display: flex;
   justify-content: center;
 }
 
-.container:not(.containScrolling) {
-  .headerContainer {
-    position: sticky;
-    z-index: 1000;
-    top: 0;
-  }
+.container:not(.containScrolling) .headerContainer {
+  position: sticky;
+  z-index: 1000;
+  top: 0;
 }
 
 .headerContent {

package/dist/components/page-layout/components/page-layout-hero/PageLayoutHero.cjs

@@ -0,0 +1,32 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var heroStyles = require('./PageLayoutHero.module.css');
+var layoutStyles = require('../../PageLayout.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var heroStyles__default = /*#__PURE__*/_interopDefault(heroStyles);
+var layoutStyles__default = /*#__PURE__*/_interopDefault(layoutStyles);
+
+const PageLayoutHero = ({
+  children,
+  link,
+  metaHeadline,
+  headline,
+  image,
+  maxWidth = true,
+  textBgColor = "var(--color-primary-900)"
+}) => {
+  const content = /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${heroStyles__default.default.heroContainer} ${maxWidth ? layoutStyles__default.default.maxWidth : ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: heroStyles__default.default.splitWrapper, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: heroStyles__default.default.imageColumn, children: image }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: heroStyles__default.default.textColumn, style: { backgroundColor: textBgColor }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: heroStyles__default.default.textInner, children: [
+      metaHeadline && /* @__PURE__ */ jsxRuntime.jsx("div", { className: heroStyles__default.default.metaHeadline, children: metaHeadline }),
+      headline && /* @__PURE__ */ jsxRuntime.jsx("div", { className: heroStyles__default.default.headline, children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: headline }) }),
+      children
+    ] }) })
+  ] }) });
+  return link ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: link(content) }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: content });
+};
+
+exports.PageLayoutHero = PageLayoutHero;

package/dist/components/page-layout/components/page-layout-hero/PageLayoutHero.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export interface PageLayoutHeroProps {
+    children?: React.ReactNode;
+    link?: (children: React.ReactNode) => React.ReactNode;
+    image?: React.ReactNode;
+    headline?: string | React.ReactNode;
+    metaHeadline?: string | React.ReactNode;
+    maxWidth?: boolean;
+    textBgColor?: string;
+}
+export declare const PageLayoutHero: React.FC<PageLayoutHeroProps>;

package/dist/components/page-layout/components/page-layout-hero/PageLayoutHero.js

@@ -0,0 +1,25 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import heroStyles from './PageLayoutHero.module.css';
+import layoutStyles from '../../PageLayout.module.css';
+
+const PageLayoutHero = ({
+  children,
+  link,
+  metaHeadline,
+  headline,
+  image,
+  maxWidth = true,
+  textBgColor = "var(--color-primary-900)"
+}) => {
+  const content = /* @__PURE__ */ jsx("div", { className: `${heroStyles.heroContainer} ${maxWidth ? layoutStyles.maxWidth : ""}`, children: /* @__PURE__ */ jsxs("div", { className: heroStyles.splitWrapper, children: [
+    /* @__PURE__ */ jsx("div", { className: heroStyles.imageColumn, children: image }),
+    /* @__PURE__ */ jsx("div", { className: heroStyles.textColumn, style: { backgroundColor: textBgColor }, children: /* @__PURE__ */ jsxs("div", { className: heroStyles.textInner, children: [
+      metaHeadline && /* @__PURE__ */ jsx("div", { className: heroStyles.metaHeadline, children: metaHeadline }),
+      headline && /* @__PURE__ */ jsx("div", { className: heroStyles.headline, children: /* @__PURE__ */ jsx("h2", { children: headline }) }),
+      children
+    ] }) })
+  ] }) });
+  return link ? /* @__PURE__ */ jsx(Fragment, { children: link(content) }) : /* @__PURE__ */ jsx(Fragment, { children: content });
+};
+
+export { PageLayoutHero };

package/dist/components/page-layout/components/page-layout-hero/PageLayoutHero.module.css

@@ -0,0 +1,84 @@
+.heroContainer {
+  width: 100%;
+  box-sizing: border-box;
+  background-color: var(--color-brand);
+}
+
+.splitWrapper {
+  display: flex;
+  width: 100%;
+  height: clamp(260px, 60vh, 540px);
+  overflow: hidden;
+}
+
+/* LEFT SIDE — IMAGE */
+.imageColumn {
+  flex: 0 0 60%;
+  position: relative;
+  overflow: hidden;
+}
+
+.imageColumn img,
+.imageColumn picture,
+.imageColumn video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* RIGHT SIDE — TEXT BLOCK */
+.textColumn {
+  flex: 0 0 40%;
+  color: var(--color-fg-on-brand);
+  display: flex;
+  align-items: flex-end;
+  padding: var(--spacing-lg);
+  position: relative;
+}
+
+.textInner {
+  z-index: 1;
+  max-width: 500px;
+}
+
+.metaHeadline {
+  text-transform: uppercase;
+  opacity: 0.9;
+  font-size: var(--font-size-lg);
+  font-weight: 400;
+  margin-bottom: var(--spacing-xs);
+}
+
+.metaHeadline::after {
+  content: '';
+  display: block;
+  width: 40px;
+  height: 3px;
+  background-color: var(--color-fg-on-brand);
+  margin-top: 4px;
+  border-radius: 2px;
+}
+
+.headline h2 {
+  margin: 0 0 var(--spacing-sm) 0;
+  font-size: var(--font-size-3xl);
+  color: var(--color-fg-on-brand);
+}
+
+@media (max-width: 900px) {
+  .splitWrapper {
+    flex-direction: column;
+    height: auto;
+  }
+
+  .imageColumn,
+  .textColumn {
+    flex: none;
+    width: 100%;
+  }
+
+  .textColumn {
+    padding: var(--spacing-xl) var(--spacing-lg);
+  }
+}

package/dist/components/pagination/Pagination.cjs

@@ -18,97 +18,113 @@ function Pagination({
   skip = 0,
   take = DEFAULT_PAGE_SIZE_OPTIONS[1],
   onPageChange,
-  pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS
+  pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
+  showFirstLast = true,
+  showGoToPage = true
 }) {
-  const totalPages = react.useMemo(() => {
-    const pages = Math.max(1, Math.ceil(itemsCount / Math.max(1, take)));
-    return pages;
-  }, [itemsCount, take]);
+  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) => {
-      const clampedPage = Math.min(Math.max(1, page), totalPages);
-      const nextSkip = (clampedPage - 1) * take;
+    (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,
+        take: nextTake,
         skip: nextSkip,
-        totalPages
+        totalPages: nextTotalPages
       });
     },
-    [onPageChange, take, totalPages]
+    [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 pageList = react.useMemo(() => {
-    const visiblePages = 3;
-    const pages = Array.from({ length: totalPages }, (_, i) => i + 1);
-    let startIndex = Math.max(currentPage - Math.floor(visiblePages / 2) - 1, 0);
-    let endIndex = startIndex + visiblePages;
-    if (endIndex > totalPages) {
-      endIndex = totalPages;
-      startIndex = Math.max(endIndex - visiblePages, 0);
-    }
-    return {
-      first: startIndex > 0 ? 1 : void 0,
-      items: pages.slice(startIndex, endIndex),
-      last: endIndex < totalPages ? totalPages : void 0
-    };
-  }, [totalPages, currentPage]);
-  const handlePageSizeChange = react.useCallback(
-    (size) => {
-      onPageChange == null ? void 0 : onPageChange({
-        page: 1,
-        take: size,
-        skip: 0,
-        totalPages: Math.max(1, Math.ceil(itemsCount / Math.max(1, size)))
-      });
-    },
-    [onPageChange, itemsCount]
-  );
+  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 `${first.toLocaleString("da-DK")}\u2013${last.toLocaleString("da-DK")} af ${itemsCount.toLocaleString("da-DK")}`;
+  }, [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: [
-    /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { disabled: currentPage === 1, icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, {}), onClick: prevPage }),
-    pageList.first && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.ellipsisButton, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "outlined", onClick: () => goToPage(1), children: pageList.first }),
-      "\u2026"
-    ] }),
-    pageList.items.map((page) => /* @__PURE__ */ jsxRuntime.jsx(
+    showFirstLast && /* @__PURE__ */ jsxRuntime.jsx(
       Button.Button,
       {
-        "aria-current": page === currentPage ? "page" : void 0,
-        variant: "outlined",
-        onClick: () => goToPage(page),
-        active: page === currentPage,
-        children: page
-      },
-      page
-    )),
-    pageList.last !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.ellipsisButton, children: [
-      "\u2026",
-      /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "outlined", onClick: () => goToPage(pageList.last), children: pageList.last })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { disabled: currentPage === totalPages, icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, {}), onClick: nextPage }),
+        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,
+      {
+        trigger: (open) => /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, { size: "sm", variant: "outlined", onClick: open, children: [
+          "Side ",
+          currentPage,
+          "/",
+          totalPages,
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 16 })
+        ] }),
+        children: /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: pages.map((page) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { active: page === currentPage, children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => goToPage(page), children: page }) }, page)) })
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(
       Popover.Popover,
       {
-        trigger: (event, icon) => /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, { variant: "outlined", onClick: event, children: [
+        trigger: (open) => /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, { size: "sm", variant: "outlined", onClick: open, children: [
           "Vis ",
           take,
-          icon
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 16 })
         ] }),
-        children: /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: pageSizeOptions.map((size) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { active: size === take, children: /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            onClick: () => {
-              handlePageSizeChange(size);
-            },
-            children: size
-          }
-        ) }, size)) })
+        children: /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: pageSizeOptions.map((size) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { active: size === take, children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => handlePageSizeChange(size), children: size }) }, size)) })
       }
     )
   ] });

package/dist/components/pagination/Pagination.d.ts

@@ -12,6 +12,8 @@ interface PaginationProps {
     onPageChange?: (e: PageChangeEvent) => void;
     lazy?: boolean;
     pageSizeOptions?: number[];
+    showFirstLast?: boolean;
+    showGoToPage?: boolean;
 }
-export declare function Pagination({ itemsCount, skip, take, onPageChange, pageSizeOptions, }: PaginationProps): React.ReactNode;
+export declare function Pagination({ itemsCount, skip, take, onPageChange, pageSizeOptions, showFirstLast, showGoToPage, }: PaginationProps): React.ReactNode;
 export {};