@dbcdk/react-components 0.0.2 → 0.0.4

package/dist/components/nav-bar/NavBar.cjs

@@ -0,0 +1,55 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('./NavBar.module.css');
+var logo = require('../../assets/logo');
+var Headline = require('../headline/Headline');
+var AppHeader = require('../app-header/AppHeader');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function NavBar({ logo: logo$1, items, productName, addition }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(AppHeader.AppHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "nav",
+    {
+      className: styles__default.default.container,
+      "aria-label": productName ? `${productName} navigation` : "Main navigation",
+      children: [
+        logo$1,
+        productName && /* @__PURE__ */ jsxRuntime.jsxs(
+          "span",
+          {
+            className: styles__default.default.productName,
+            style: { display: "flex", alignItems: "center", gap: 16 },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(logo.Logo, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { disableMargin: true, size: 1, children: productName })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("ul", { className: styles__default.default.navItems, role: "list", children: items == null ? void 0 : items.filter((i) => i.enabled !== false).map((item, id) => {
+          const { component: Component, label, icon, href, active, external } = item;
+          const linkClass = [styles__default.default.link, active ? styles__default.default.active : ""].filter(Boolean).join(" ");
+          const commonProps = {
+            className: linkClass,
+            href,
+            ...active ? { "aria-current": "page" } : {},
+            ...external ? { target: "_blank", rel: "noopener noreferrer" } : {}
+          };
+          return /* @__PURE__ */ jsxRuntime.jsx("li", { className: styles__default.default.navItem, role: "listitem", children: Component ? /* @__PURE__ */ jsxRuntime.jsxs(Component, { ...commonProps, children: [
+            icon,
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: label })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs("a", { ...commonProps, children: [
+            icon,
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: label })
+          ] }) }, id);
+        }) }),
+        addition
+      ]
+    }
+  ) });
+}
+
+exports.NavBar = NavBar;

package/dist/components/nav-bar/NavBar.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+export type NavBarItem = {
+    component?: React.ElementType<any>;
+    label: string;
+    icon?: React.ReactNode;
+    active?: boolean;
+    external?: boolean;
+    enabled?: boolean;
+    href: string;
+    tags?: string[];
+    children?: NavBarItem[];
+};
+interface NavBarProps {
+    logo?: React.ReactNode;
+    items: NavBarItem[];
+    productName?: string;
+    addition?: React.ReactNode;
+}
+export declare function NavBar({ logo, items, productName, addition }: NavBarProps): JSX.Element;
+export {};

package/dist/components/nav-bar/NavBar.js

@@ -0,0 +1,49 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import styles from './NavBar.module.css';
+import { Logo } from '../../assets/logo';
+import { Headline } from '../headline/Headline';
+import { AppHeader } from '../app-header/AppHeader';
+
+function NavBar({ logo, items, productName, addition }) {
+  return /* @__PURE__ */ jsx(AppHeader, { children: /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      className: styles.container,
+      "aria-label": productName ? `${productName} navigation` : "Main navigation",
+      children: [
+        logo,
+        productName && /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: styles.productName,
+            style: { display: "flex", alignItems: "center", gap: 16 },
+            children: [
+              /* @__PURE__ */ jsx(Logo, {}),
+              /* @__PURE__ */ jsx(Headline, { disableMargin: true, size: 1, children: productName })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("ul", { className: styles.navItems, role: "list", children: items == null ? void 0 : items.filter((i) => i.enabled !== false).map((item, id) => {
+          const { component: Component, label, icon, href, active, external } = item;
+          const linkClass = [styles.link, active ? styles.active : ""].filter(Boolean).join(" ");
+          const commonProps = {
+            className: linkClass,
+            href,
+            ...active ? { "aria-current": "page" } : {},
+            ...external ? { target: "_blank", rel: "noopener noreferrer" } : {}
+          };
+          return /* @__PURE__ */ jsx("li", { className: styles.navItem, role: "listitem", children: Component ? /* @__PURE__ */ jsxs(Component, { ...commonProps, children: [
+            icon,
+            /* @__PURE__ */ jsx("span", { className: styles.label, children: label })
+          ] }) : /* @__PURE__ */ jsxs("a", { ...commonProps, children: [
+            icon,
+            /* @__PURE__ */ jsx("span", { className: styles.label, children: label })
+          ] }) }, id);
+        }) }),
+        addition
+      ]
+    }
+  ) });
+}
+
+export { NavBar };

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

@@ -0,0 +1,101 @@
+.container {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-lg);
+  inline-size: 100%;
+  box-sizing: border-box;
+  flex-grow: 1;
+}
+
+.productName {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  color: inherit;
+  text-decoration: none;
+}
+.productName svg {
+  inline-size: var(--icon-size);
+  block-size: var(--icon-size);
+}
+
+.navItems {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-lg);
+  inline-size: 100%;
+  min-inline-size: 0;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.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-text-secondary);
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  text-decoration: none;
+  text-transform: var(--nav-link-transform);
+  border-radius: var(--border-radius-default);
+  padding-block: calc(var(--spacing-xs) + var(--density));
+  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 {
+  background-color: var(--color-surface-hover);
+  color: var(--color-text);
+}
+.link:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+/* Active underline (no radius warp) */
+.link {
+  position: relative; /* establish positioning context for ::after */
+}
+
+/* Base: reset any previous inset shadows */
+.link.active,
+.link[aria-current='page'] {
+  color: var(--color-text);
+  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-primary);
+  transition: inline-size var(--transition-fast) var(--ease-standard);
+}
+
+.link.active::after,
+.link[aria-current='page']::after {
+  inline-size: 100%;
+}
+/* Icons/images inside links */
+.link svg,
+.link img {
+  inline-size: var(--icon-size);
+  block-size: var(--icon-size);
+  flex: 0 0 auto;
+}

package/dist/components/page/Page.cjs

@@ -0,0 +1,30 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var Headline = require('../headline/Headline');
+var styles = require('./Page.module.css');
+var Breadcrumbs = require('../breadcrumbs/Breadcrumbs');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function Page({
+  header,
+  severity,
+  headerIcon,
+  headerAddition,
+  breadcrumbs,
+  disableContentBox,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grow-container", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.headerContainer, children: [
+      breadcrumbs ? /* @__PURE__ */ jsxRuntime.jsx(Breadcrumbs.Breadcrumbs, { items: breadcrumbs }) : /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { disableMargin: true, size: 2, severity, icon: headerIcon, children: header }),
+      headerAddition
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles__default.default.content} ${disableContentBox ? styles__default.default.disableContentBox : ""}`, children })
+  ] });
+}
+
+exports.Page = Page;

package/dist/components/page/Page.d.ts

@@ -0,0 +1,13 @@
+import { Severity } from '@/constants/severity.types';
+import { BreadcrumbItem } from '../breadcrumbs/Breadcrumbs';
+interface Page {
+    header?: string;
+    severity?: Severity;
+    headerIcon?: React.ReactNode;
+    children?: React.ReactNode;
+    headerAddition?: React.ReactNode;
+    disableContentBox?: boolean;
+    breadcrumbs?: BreadcrumbItem[];
+}
+export declare function Page({ header, severity, headerIcon, headerAddition, breadcrumbs, disableContentBox, children, }: Page): React.ReactNode;
+export {};

package/dist/components/page/Page.js

@@ -0,0 +1,24 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Headline } from '../headline/Headline';
+import styles from './Page.module.css';
+import { Breadcrumbs } from '../breadcrumbs/Breadcrumbs';
+
+function Page({
+  header,
+  severity,
+  headerIcon,
+  headerAddition,
+  breadcrumbs,
+  disableContentBox,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "grow-container", children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.headerContainer, children: [
+      breadcrumbs ? /* @__PURE__ */ jsx(Breadcrumbs, { items: breadcrumbs }) : /* @__PURE__ */ jsx(Headline, { disableMargin: true, size: 2, severity, icon: headerIcon, children: header }),
+      headerAddition
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: `${styles.content} ${disableContentBox ? styles.disableContentBox : ""}`, children })
+  ] });
+}
+
+export { Page };

package/dist/components/page/Page.module.css

@@ -0,0 +1,26 @@
+.container {
+  padding: var(--spacing-md);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+  height: 100%;
+}
+
+.headerContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--spacing-lg) 0;
+}
+
+.content {
+  flex: 1 1 auto;
+  overflow: auto;
+}
+
+.content:not(.disableContentBox) {
+  padding: var(--spacing-lg);
+  border: 1px solid var(--opac-bg-dark);
+  border-radius: var(--border-radius-default);
+}

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

@@ -0,0 +1,101 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('./PageLayout.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+const PageLayoutBase = ({
+  children,
+  sidebar,
+  header,
+  containScrolling = false,
+  orientation = "vertical"
+}) => {
+  if (orientation === "vertical") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `${styles__default.default.container} ${styles__default.default.vertical} ${containScrolling ? styles__default.default.containScrolling : ""}`,
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, display: "flex", height: "100%", maxWidth: "100%" }, children: [
+          sidebar,
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              style: {
+                flex: 1,
+                display: "flex",
+                flexDirection: "column",
+                height: "100%",
+                maxHeight: "100vh",
+                overflow: "auto"
+              },
+              children: [
+                header && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.header, children: header }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    style: {
+                      flex: 1,
+                      display: "flex",
+                      flexDirection: "column",
+                      padding: "1rem",
+                      gap: 20,
+                      overflow: "auto"
+                    },
+                    children
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles__default.default.container} ${containScrolling ? styles__default.default.containScrolling : ""}`, children });
+};
+const PageLayoutHeader = ({
+  maxWidth = true,
+  children
+}) => {
+  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
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("main", { className: `${styles__default.default.content} ${maxWidth ? styles__default.default.maxWidth : ""}`, children });
+};
+const PageLayoutFooter = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("footer", { className: styles__default.default.footer, children });
+};
+const PageLayout = Object.assign(PageLayoutBase, {
+  Header: PageLayoutHeader,
+  Hero: PageLayoutHero,
+  Content: PageLayoutContent,
+  Footer: PageLayoutFooter
+});
+
+exports.PageLayout = PageLayout;

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

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import type { PropsWithChildren } from 'react';
+type Orientation = 'vertical' | 'horizontal';
+export interface PageLayoutProps extends PropsWithChildren {
+    containScrolling?: boolean;
+    orientation?: Orientation;
+    sidebar?: React.ReactNode;
+    header?: React.ReactNode;
+}
+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;
+}
+export interface PageLayoutFooterProps {
+    children: React.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 {};

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

@@ -0,0 +1,95 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import styles from './PageLayout.module.css';
+
+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: "1rem",
+                      gap: 20,
+                      overflow: "auto"
+                    },
+                    children
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className: `${styles.container} ${containScrolling ? styles.containScrolling : ""}`, children });
+};
+const PageLayoutHeader = ({
+  maxWidth = true,
+  children
+}) => {
+  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
+}) => {
+  return /* @__PURE__ */ jsx("main", { className: `${styles.content} ${maxWidth ? styles.maxWidth : ""}`, children });
+};
+const PageLayoutFooter = ({ children }) => {
+  return /* @__PURE__ */ jsx("footer", { className: styles.footer, children });
+};
+const PageLayout = Object.assign(PageLayoutBase, {
+  Header: PageLayoutHeader,
+  Hero: PageLayoutHero,
+  Content: PageLayoutContent,
+  Footer: PageLayoutFooter
+});
+
+export { PageLayout };