@dbcdk/react-components 0.0.5 → 0.0.6

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

@@ -1,28 +1,27 @@
-import * as React from 'react';
-import type { PropsWithChildren } from 'react';
+import type { PropsWithChildren, ReactNode, FC } from 'react';
 import { PageLayoutHeroProps } from './components/page-layout-hero/PageLayoutHero';
 type Orientation = 'vertical' | 'horizontal';
 export interface PageLayoutProps extends PropsWithChildren {
     containScrolling?: boolean;
     orientation?: Orientation;
-    sidebar?: React.ReactNode;
-    header?: React.ReactNode;
+    sidebar?: ReactNode;
+    header?: ReactNode;
 }
 export interface PageLayoutHeaderProps {
     maxWidth?: boolean;
-    children: React.ReactNode;
+    children: ReactNode;
 }
 export interface PageLayoutContentProps {
     maxWidth?: boolean;
-    children: React.ReactNode;
+    children: ReactNode;
 }
 export interface PageLayoutFooterProps {
-    children: React.ReactNode;
+    children: ReactNode;
 }
-export declare const PageLayout: React.FC<PageLayoutProps> & {
-    Header: React.FC<PageLayoutHeaderProps>;
-    Hero: React.FC<PageLayoutHeroProps>;
-    Content: React.FC<PageLayoutContentProps>;
-    Footer: React.FC<PageLayoutFooterProps>;
+export declare const PageLayout: FC<PageLayoutProps> & {
+    Header: FC<PageLayoutHeaderProps>;
+    Hero: FC<PageLayoutHeroProps>;
+    Content: FC<PageLayoutContentProps>;
+    Footer: FC<PageLayoutFooterProps>;
 };
 export {};

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

@@ -1,78 +1,42 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import styles from './PageLayout.module.css';
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PageLayoutHero } from './components/page-layout-hero/PageLayoutHero';
-
-const PageLayoutBase = ({
-  children,
-  sidebar,
-  header,
-  containScrolling = false,
-  orientation = "vertical"
-}) => {
-  if (orientation === "vertical") {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: `${styles.container} ${styles.vertical} ${containScrolling ? styles.containScrolling : ""}`,
-        children: /* @__PURE__ */ jsxs("div", { style: { flex: 1, display: "flex", height: "100%", maxWidth: "100%" }, children: [
-          sidebar,
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                flex: 1,
-                display: "flex",
-                flexDirection: "column",
-                height: "100%",
-                maxHeight: "100vh",
-                overflow: "auto"
-              },
-              children: [
-                header && /* @__PURE__ */ jsx("div", { className: styles.header, children: header }),
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    style: {
-                      flex: 1,
-                      display: "flex",
-                      flexDirection: "column",
-                      padding: "var(--spacing-md)",
-                      gap: "var(--spacing-md)",
-                      backgroundColor: "var(--color-bg-surface)",
-                      overflow: "auto"
-                    },
-                    children
-                  }
-                )
-              ]
-            }
-          )
-        ] })
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx("div", { className: `${styles.container} ${containScrolling ? styles.containScrolling : ""}`, children });
+import styles from './PageLayout.module.css';
+/** Base component */
+const PageLayoutBase = ({ children, sidebar, header, containScrolling = false, orientation = 'vertical', }) => {
+    if (orientation === 'vertical') {
+        return (_jsx("div", { className: `${styles.container} ${styles.vertical} ${containScrolling ? styles.containScrolling : ''}`, children: _jsxs("div", { style: { flex: 1, display: 'flex', height: '100%', maxWidth: '100%' }, children: [sidebar, _jsxs("div", { style: {
+                            flex: 1,
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            maxHeight: '100vh',
+                            overflow: 'auto',
+                        }, children: [header && _jsx("div", { className: styles.header, children: header }), _jsx("div", { style: {
+                                    flex: 1,
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    padding: 'var(--spacing-md)',
+                                    gap: 'var(--spacing-md)',
+                                    backgroundColor: 'var(--color-bg-surface)',
+                                    overflow: 'auto',
+                                }, children: children })] })] }) }));
+    }
+    return (_jsx("div", { className: `${styles.container} ${containScrolling ? styles.containScrolling : ''}`, children: children }));
 };
-const PageLayoutHeader = ({
-  maxWidth = true,
-  children
-}) => {
-  return /* @__PURE__ */ jsx("div", { className: styles.headerContainer, children: /* @__PURE__ */ jsx("div", { className: `${styles.headerContent} ${maxWidth ? styles.maxWidth : ""}`, children }) });
+/** Subcomponents */
+const PageLayoutHeader = ({ maxWidth = true, children, }) => {
+    return (_jsx("div", { className: styles.headerContainer, children: _jsx("div", { className: `${styles.headerContent} ${maxWidth ? styles.maxWidth : ''}`, children: children }) }));
 };
-const PageLayoutContent = ({
-  maxWidth = true,
-  children
-}) => {
-  return /* @__PURE__ */ jsx("main", { className: `${styles.content} ${maxWidth ? styles.maxWidth : ""}`, children });
+const PageLayoutContent = ({ maxWidth = true, children, }) => {
+    return _jsx("main", { className: `${styles.content} ${maxWidth ? styles.maxWidth : ''}`, children: children });
 };
 const PageLayoutFooter = ({ children }) => {
-  return /* @__PURE__ */ jsx("footer", { className: styles.footer, children });
+    return _jsx("footer", { className: styles.footer, children: children });
 };
-const PageLayout = Object.assign(PageLayoutBase, {
-  Header: PageLayoutHeader,
-  Hero: PageLayoutHero,
-  Content: PageLayoutContent,
-  Footer: PageLayoutFooter
+export const PageLayout = Object.assign(PageLayoutBase, {
+    Header: PageLayoutHeader,
+    Hero: PageLayoutHero,
+    Content: PageLayoutContent,
+    Footer: PageLayoutFooter,
 });
-
-export { PageLayout };

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

@@ -1,25 +1,7 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _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 const PageLayoutHero = ({ children, link, metaHeadline, headline, image, maxWidth = true, textBgColor = 'var(--color-primary-900)', }) => {
+    const content = (_jsx("div", { className: `${heroStyles.heroContainer} ${maxWidth ? layoutStyles.maxWidth : ''}`, children: _jsxs("div", { className: heroStyles.splitWrapper, children: [_jsx("div", { className: heroStyles.imageColumn, children: image }), _jsx("div", { className: heroStyles.textColumn, style: { backgroundColor: textBgColor }, children: _jsxs("div", { className: heroStyles.textInner, children: [metaHeadline && _jsx("div", { className: heroStyles.metaHeadline, children: metaHeadline }), headline && (_jsx("div", { className: heroStyles.headline, children: _jsx("h2", { children: headline }) })), children] }) })] }) }));
+    return link ? _jsx(_Fragment, { children: link(content) }) : _jsx(_Fragment, { children: content });
 };
-
-export { PageLayoutHero };

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

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 export type PageChangeEvent = {
     page: number;
     take: number;
@@ -15,5 +16,5 @@ interface PaginationProps {
     showFirstLast?: boolean;
     showGoToPage?: boolean;
 }
-export declare function Pagination({ itemsCount, skip, take, onPageChange, pageSizeOptions, showFirstLast, showGoToPage, }: PaginationProps): React.ReactNode;
+export declare function Pagination({ itemsCount, skip, take, onPageChange, pageSizeOptions, showFirstLast, showGoToPage, }: PaginationProps): ReactNode;
 export {};

package/dist/components/pagination/Pagination.js

@@ -1,127 +1,44 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowLeft, ArrowRight, ChevronDown, ChevronsLeft, ChevronsRight } from 'lucide-react';
 import { useMemo, useCallback } from 'react';
 import styles from './Pagination.module.css';
 import { Button } from '../button/Button';
-import { ChevronsLeft, ArrowLeft, ArrowRight, ChevronsRight, ChevronDown } from 'lucide-react';
-import { Popover } from '../popover/Popover';
 import { Menu } from '../menu/Menu';
-
+import { Popover } from '../popover/Popover';
 const DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100];
-function Pagination({
-  itemsCount = 0,
-  skip = 0,
-  take = DEFAULT_PAGE_SIZE_OPTIONS[1],
-  onPageChange,
-  pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
-  showFirstLast = true,
-  showGoToPage = true
-}) {
-  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 `${first.toLocaleString("da-DK")}\u2013${last.toLocaleString("da-DK")} af ${itemsCount.toLocaleString("da-DK")}`;
-  }, [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,
-      {
-        trigger: (open) => /* @__PURE__ */ jsxs(Button, { size: "sm", variant: "outlined", onClick: open, children: [
-          "Side ",
-          currentPage,
-          "/",
-          totalPages,
-          " ",
-          /* @__PURE__ */ jsx(ChevronDown, { size: 16 })
-        ] }),
-        children: /* @__PURE__ */ jsx(Menu, { children: pages.map((page) => /* @__PURE__ */ jsx(Menu.Item, { active: page === currentPage, children: /* @__PURE__ */ jsx("button", { onClick: () => goToPage(page), children: page }) }, page)) })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Popover,
-      {
-        trigger: (open) => /* @__PURE__ */ jsxs(Button, { size: "sm", variant: "outlined", onClick: open, children: [
-          "Vis ",
-          take,
-          " ",
-          /* @__PURE__ */ jsx(ChevronDown, { size: 16 })
-        ] }),
-        children: /* @__PURE__ */ jsx(Menu, { children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx(Menu.Item, { active: size === take, children: /* @__PURE__ */ jsx("button", { onClick: () => handlePageSizeChange(size), children: size }) }, size)) })
-      }
-    )
-  ] });
+export function Pagination({ itemsCount = 0, skip = 0, take = DEFAULT_PAGE_SIZE_OPTIONS[1], onPageChange, pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, showFirstLast = true, showGoToPage = true, }) {
+    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 || onPageChange === void 0 ? 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 `${first.toLocaleString('da-DK')}\u2013${last.toLocaleString('da-DK')} af ${itemsCount.toLocaleString('da-DK')}`;
+    }, [itemsCount, skip, take]);
+    const pages = useMemo(() => Array.from({ length: totalPages }, (_, i) => i + 1), [totalPages]);
+    const handlePageSizeChange = useCallback((size) => emit(1, size), [emit]);
+    return (_jsxs("div", { className: styles.container, children: [showFirstLast && (_jsx(Button, { size: "sm", icon: _jsx(ChevronsLeft, {}), disabled: !canPrev, onClick: firstPage, "aria-label": "First page" })), _jsx(Button, { size: "sm", icon: _jsx(ArrowLeft, {}), disabled: !canPrev, onClick: prevPage, "aria-label": "Previous page" }), _jsx("div", { className: styles.range, "aria-live": "polite", children: rangeLabel }), _jsx(Button, { size: "sm", icon: _jsx(ArrowRight, {}), disabled: !canNext, onClick: nextPage, "aria-label": "Next page" }), showFirstLast && (_jsx(Button, { size: "sm", icon: _jsx(ChevronsRight, {}), disabled: !canNext, onClick: lastPage, "aria-label": "Last page" })), showGoToPage && (_jsx(Popover, { trigger: open => (_jsxs(Button, { size: "sm", variant: "outlined", onClick: open, children: ["Side ", currentPage, "/", totalPages, " ", _jsx(ChevronDown, { size: 16 })] })), children: _jsx(Menu, { children: pages.map(page => (_jsx(Menu.Item, { active: page === currentPage, children: _jsx("button", { onClick: () => goToPage(page), children: page }) }, page))) }) })), _jsx(Popover, { trigger: open => (_jsxs(Button, { size: "sm", variant: "outlined", onClick: open, children: ["Vis ", take, " ", _jsx(ChevronDown, { size: 16 })] })), children: _jsx(Menu, { children: pageSizeOptions.map(size => (_jsx(Menu.Item, { active: size === take, children: _jsx("button", { onClick: () => handlePageSizeChange(size), children: size }) }, size))) }) })] }));
 }
-
-export { Pagination };

package/dist/components/panel/Panel.d.ts

@@ -1,10 +1,11 @@
+import type { ReactNode, JSX } from 'react';
 interface PanelProps {
     header: string;
-    headerIcon?: React.ReactNode;
+    headerIcon?: ReactNode;
     severity?: Severity;
-    children: React.ReactNode;
+    children: ReactNode;
     size?: 'sm' | 'md' | 'lg';
 }
-import { Severity } from '@/constants/severity.types';
+import { Severity } from '../../constants/severity.types';
 export declare function Panel({ header, headerIcon, children, severity, size }: PanelProps): JSX.Element;
 export {};

package/dist/components/panel/Panel.js

@@ -1,12 +1,7 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Headline } from '../headline/Headline';
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './Panel.module.css';
-
-function Panel({ header, headerIcon, 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: 3, icon: headerIcon, severity, children: header }) }),
-    /* @__PURE__ */ jsx("div", { className: styles.content, children })
-  ] });
+import { Headline } from '../headline/Headline';
+export function Panel({ header, headerIcon, children, severity, size }) {
+    return (_jsxs("section", { className: `${styles.container} ${size ? styles[size] : ''}`, children: [_jsx("div", { className: styles.header, children: _jsx(Headline, { disableMargin: true, size: 3, icon: headerIcon, severity: severity, children: header }) }), _jsx("div", { className: styles.content, children: children })] }));
 }
-
-export { Panel };

package/dist/components/popover/Popover.d.ts

@@ -6,6 +6,7 @@ interface PopoverProps {
     matchTriggerWidth?: boolean;
     viewportPadding?: number;
     edgeBuffer?: number;
+    dataCy?: string;
 }
 export interface PopoverHandle {
     close: () => void;