@dbcdk/react-components 0.0.102 → 0.0.104

package/dist/components/button/Button.module.css

@@ -0,0 +1,260 @@
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-xs);
+
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  line-height: 1;
+
+  height: var(--component-size-md);
+  min-block-size: var(--component-size-md);
+
+  padding-inline: var(--spacing-sm);
+  padding-block: var(--spacing-xs);
+
+  border-width: var(--border-width-thin, 1px);
+  border-style: solid;
+  border-color: transparent;
+
+  border-radius: var(--border-radius-default);
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.buttonLink {
+  color: inherit;
+  text-decoration: none;
+  user-select: default;
+}
+
+.button:hover {
+  transition:
+    background-color var(--transition-fast) var(--ease-standard),
+    color var(--transition-fast) var(--ease-standard),
+    border-color var(--transition-fast) var(--ease-standard),
+    box-shadow var(--transition-fast) var(--ease-standard);
+}
+
+.button:focus-visible {
+  outline: none;
+  border-color: var(--color-border-selected);
+  box-shadow: inset 0 0 0 1px var(--color-border-selected);
+}
+
+.round {
+  border-radius: 100%;
+}
+
+.rounded {
+  border-radius: var(--border-radius-rounded);
+}
+
+.button:disabled,
+.button[aria-disabled='true'] {
+  cursor: not-allowed;
+  background-color: var(--color-disabled-bg);
+  border-color: transparent;
+  color: var(--color-disabled-fg);
+  opacity: 0.5;
+}
+
+.button:is(:disabled, [aria-disabled='true']):hover {
+  background-color: var(--color-disabled-bg);
+  border-color: transparent;
+  color: var(--color-disabled-fg);
+}
+
+/* ==========================================================================
+ * LINK STYLE
+ * ======================================================================= */
+
+.link {
+  text-decoration: none;
+  font-size: var(--font-size-sm);
+  color: var(--color-link);
+  transition:
+    color var(--transition-fast) var(--ease-standard),
+    text-decoration-color var(--transition-fast) var(--ease-standard);
+  text-underline-offset: 0.15em;
+}
+
+.link:focus-visible {
+  outline: none;
+  text-decoration: underline;
+  text-decoration-color: currentColor;
+}
+
+/* Icons */
+.button svg,
+.icon svg {
+  inline-size: var(--icon-size-md);
+  block-size: var(--icon-size-md);
+}
+
+.icon {
+  display: inline-flex;
+}
+
+/* ==========================================================================
+ * SIZES
+ * ======================================================================= */
+
+.button.sm {
+  height: var(--component-size-sm);
+  min-block-size: var(--component-size-sm);
+  padding-inline: var(--spacing-sm);
+}
+
+.button.sm svg {
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
+}
+
+.button.lg {
+  height: var(--component-size-lg);
+  font-size: var(--font-size-md);
+  min-block-size: var(--component-size-lg);
+  padding-inline: var(--spacing-lg);
+}
+
+.button.fullWidth {
+  width: 100%;
+}
+
+/* ==========================================================================
+ * VARIANTS (semantic token-based)
+ * ======================================================================= */
+
+.primary {
+  background-color: var(--button-bg-primary);
+  color: var(--button-fg-primary);
+  border-color: transparent;
+}
+
+.primary:hover {
+  background-color: var(--button-bg-primary-hover);
+}
+
+.secondary {
+  background-color: var(--button-bg-secondary);
+  color: var(--button-fg-secondary);
+  border-color: var(--button-border-secondary);
+}
+
+.secondary:hover {
+  background-color: var(--button-bg-secondary-hover);
+  border-color: var(--color-border-strong);
+}
+
+.default {
+  background-color: var(--color-bg-toolbar);
+  color: var(--color-fg-default);
+  border-color: transparent;
+}
+
+.default:hover {
+  background-color: var(--color-bg-toolbar-hover);
+  border-color: transparent;
+}
+
+.default:focus-visible {
+  outline: none;
+  border-color: var(--color-border-selected);
+  box-shadow: inset 0 0 0 1px var(--color-border-selected);
+}
+
+.outlined {
+  background-color: transparent;
+  color: var(--color-fg-default);
+  border-width: var(--border-width-thin, 1px);
+  border-style: solid;
+  border-color: var(--color-border-default);
+}
+
+.outlined:not(.active):hover {
+  background-color: var(--color-bg-hover-subtle);
+  border-color: var(--color-border-strong);
+}
+
+.success {
+  background-color: transparent;
+  color: var(--color-status-success-fg);
+  border-color: var(--color-status-success-border);
+}
+
+.success .icon {
+  color: var(--color-status-success);
+}
+
+.success:hover {
+  border-color: var(--color-fg-default);
+}
+
+.danger {
+  background-color: transparent;
+  color: var(--color-status-error-fg);
+  border-color: var(--color-status-error-border);
+}
+
+.danger .icon {
+  color: var(--color-status-error);
+}
+
+.danger:hover {
+  border-color: var(--color-fg-default);
+}
+
+.button.inline {
+  background-color: transparent;
+  border-color: transparent;
+  padding: var(--spacing-xxs);
+  min-block-size: unset;
+  block-size: unset;
+  height: unset;
+  color: var(--color-fg-default);
+}
+
+.button.inline:hover {
+  background-color: var(--opac-bg-light);
+}
+
+.button.inline:focus-visible {
+  outline: none;
+  background-color: var(--opac-bg-light);
+  border-color: transparent;
+  box-shadow: inset 0 0 0 1px var(--color-border-selected);
+}
+
+.active {
+  background-color: var(--button-bg-primary);
+  color: var(--button-fg-primary);
+  border-color: var(--color-border-selected);
+}
+
+.inline.active {
+  color: var(--button-bg-primary);
+}
+
+.active:hover {
+  background-color: var(--button-bg-primary-hover);
+}
+
+.inline.active:hover {
+  color: var(--button-bg-primary-hover);
+}
+
+.button.xs {
+  height: auto;
+  min-block-size: 0;
+  padding-block: 0;
+  padding-inline: var(--spacing-xs);
+  font-size: var(--font-size-xs);
+}
+
+.button.xs svg {
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
+}

package/dist/components/button-select/ButtonSelect.cjs

@@ -0,0 +1,35 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var Button = require('../../components/button/Button');
+var styles = require('./ButtonSelect.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function ButtonSelect({
+  options,
+  value,
+  onChange,
+  size = "md",
+  disabled
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.group, role: "group", children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+    Button.Button,
+    {
+      className: option.value === value ? `${styles__default.default.btn} ${styles__default.default.btnSelected}` : styles__default.default.btn,
+      variant: "outlined",
+      shape: "default",
+      size,
+      active: option.value === value,
+      disabled: disabled || option.disabled,
+      onClick: () => onChange(option.value),
+      children: option.label
+    },
+    option.value
+  )) });
+}
+
+exports.ButtonSelect = ButtonSelect;

package/dist/components/button-select/ButtonSelect.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Button } from '../../components/button/Button';
+import styles from './ButtonSelect.module.css';
+
+function ButtonSelect({
+  options,
+  value,
+  onChange,
+  size = "md",
+  disabled
+}) {
+  return /* @__PURE__ */ jsx("div", { className: styles.group, role: "group", children: options.map((option) => /* @__PURE__ */ jsx(
+    Button,
+    {
+      className: option.value === value ? `${styles.btn} ${styles.btnSelected}` : styles.btn,
+      variant: "outlined",
+      shape: "default",
+      size,
+      active: option.value === value,
+      disabled: disabled || option.disabled,
+      onClick: () => onChange(option.value),
+      children: option.label
+    },
+    option.value
+  )) });
+}
+
+export { ButtonSelect };

package/dist/components/button-select/ButtonSelect.module.css

@@ -0,0 +1,40 @@
+.group {
+  display: inline-flex;
+  flex-wrap: nowrap;
+}
+
+/* Collapse the doubled border between adjacent buttons */
+.group .btn:not(:first-child) {
+  margin-left: -1px;
+}
+
+/* Flatten interior corners */
+.group .btn:not(:first-child) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.group .btn:not(:last-child) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+/* Raise hovered / focused / selected button so its full border is visible above siblings */
+.group .btn:hover,
+.group .btn:focus-visible,
+.group .btn:active,
+.group .btnSelected {
+  position: relative;
+  z-index: 1;
+}
+
+/* Selected state follows the system's selection language (same as Chip) */
+.group .btnSelected {
+  background-color: var(--color-bg-selected);
+  color: var(--color-brand);
+  border-color: var(--color-border-selected);
+}
+
+.group .btnSelected:hover {
+  background-color: var(--color-bg-selected);
+}

package/dist/components/card/Card.cjs

@@ -0,0 +1,112 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('./Card.module.css');
+var CardMeta = require('./components/CardMeta');
+var Headline = require('../headline/Headline');
+var Hyperlink = require('../hyperlink/Hyperlink');
+var SkeletonLoaderItem = require('../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function getInnerPlacementClass(imgPlacement, s) {
+  switch (imgPlacement) {
+    case "top":
+      return s.innerImgTop;
+    case "right":
+      return s.innerImgRight;
+    case "left":
+    default:
+      return s.innerImgLeft;
+  }
+}
+function getVariantClass(variant, s) {
+  switch (variant) {
+    case "subtle":
+      return s.variantSubtle;
+    case "default":
+    default:
+      return s.variantDefault;
+  }
+}
+function CardImpl({
+  title,
+  subheader,
+  loading = false,
+  variant = "default",
+  size = "md",
+  elevation = "sm",
+  headerMarker = true,
+  headerIcon,
+  headerAddition,
+  severity,
+  image,
+  imgPlacement = "left",
+  mediaWidth,
+  actions,
+  headerMeta,
+  sectionTitle,
+  showSectionDivider = false,
+  children,
+  link,
+  width,
+  headlineSize = 4,
+  truncateTitle = false
+}) {
+  var _a;
+  const outerStyle = width != null ? {
+    width: typeof width === "number" ? `${width}px` : width,
+    flex: "0 0 auto"
+  } : void 0;
+  const mediaStyle = mediaWidth ? { ["--card-media-width"]: `${mediaWidth}px` } : void 0;
+  const innerPlacementClass = getInnerPlacementClass(imgPlacement, styles__default.default);
+  const variantClass = getVariantClass(variant, styles__default.default);
+  const elevationClass = (_a = styles__default.default[`elevation${elevation.charAt(0).toUpperCase()}${elevation.slice(1)}`]) != null ? _a : styles__default.default.elevationSm;
+  const hasHeader = !!title || !!headerMeta;
+  const showSection = !loading && (showSectionDivider || !!sectionTitle);
+  const showBody = !loading && !!children;
+  const showActions = !loading && !!actions;
+  const inner = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.inner} ${innerPlacementClass}`, children: [
+    image ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.media, style: mediaStyle, children: image }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.content, children: [
+      hasHeader ? /* @__PURE__ */ jsxRuntime.jsxs("header", { className: styles__default.default.header, children: [
+        title ? /* @__PURE__ */ jsxRuntime.jsx(
+          Headline.Headline,
+          {
+            severity,
+            marker: headerMarker,
+            icon: headerIcon,
+            addition: headerAddition,
+            subheader,
+            size: headlineSize,
+            weight: 500,
+            disableMargin: true,
+            allowWrap: !truncateTitle,
+            children: title
+          }
+        ) : null,
+        headerMeta ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.headerMeta, children: headerMeta }) : null
+      ] }) : null,
+      loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.loadingList, "aria-busy": "true", "aria-live": "polite", children: Array.from({ length: 4 }, (_, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.loadingRow, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoaderItem.SkeletonLoaderItem, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoaderItem.SkeletonLoaderItem, { width: "100%" })
+      ] }, index)) }) : null,
+      showSection ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.section, children: [
+        showSectionDivider ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.sectionDivider }) : null,
+        sectionTitle ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.sectionTitle, children: sectionTitle }) : null
+      ] }) : null,
+      showBody ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.body, children }) : null,
+      showActions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.actions, children: actions }) : null
+    ] })
+  ] });
+  const cardContent = link ? /* @__PURE__ */ jsxRuntime.jsx(Hyperlink.Hyperlink, { children: link }) : inner;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles__default.default.outerContainer} ${styles__default.default[size]}`, style: outerStyle, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles__default.default.container} ${variantClass} ${elevationClass}`, children: cardContent }) });
+}
+const Card = Object.assign(CardImpl, {
+  Meta: CardMeta.CardMeta,
+  MetaRow: CardMeta.CardMetaRow
+});
+
+exports.Card = Card;

package/dist/components/card/Card.d.ts

@@ -25,8 +25,9 @@ export interface CardProps {
     showSectionDivider?: boolean;
     children?: ReactNode;
     link?: ReactNode;
-    width?: 25 | 33 | 50 | 66 | 75 | 100;
+    width?: number | string;
     headlineSize?: 1 | 2 | 3 | 4 | 5 | 6;
+    truncateTitle?: boolean;
 }
 type CardComponent = ((props: CardProps) => JSX.Element) & {
     Meta: typeof CardMeta;

package/dist/components/card/Card.js

@@ -0,0 +1,106 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styles from './Card.module.css';
+import { CardMetaRow, CardMeta } from './components/CardMeta';
+import { Headline } from '../headline/Headline';
+import { Hyperlink } from '../hyperlink/Hyperlink';
+import { SkeletonLoaderItem } from '../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
+
+function getInnerPlacementClass(imgPlacement, s) {
+  switch (imgPlacement) {
+    case "top":
+      return s.innerImgTop;
+    case "right":
+      return s.innerImgRight;
+    case "left":
+    default:
+      return s.innerImgLeft;
+  }
+}
+function getVariantClass(variant, s) {
+  switch (variant) {
+    case "subtle":
+      return s.variantSubtle;
+    case "default":
+    default:
+      return s.variantDefault;
+  }
+}
+function CardImpl({
+  title,
+  subheader,
+  loading = false,
+  variant = "default",
+  size = "md",
+  elevation = "sm",
+  headerMarker = true,
+  headerIcon,
+  headerAddition,
+  severity,
+  image,
+  imgPlacement = "left",
+  mediaWidth,
+  actions,
+  headerMeta,
+  sectionTitle,
+  showSectionDivider = false,
+  children,
+  link,
+  width,
+  headlineSize = 4,
+  truncateTitle = false
+}) {
+  var _a;
+  const outerStyle = width != null ? {
+    width: typeof width === "number" ? `${width}px` : width,
+    flex: "0 0 auto"
+  } : void 0;
+  const mediaStyle = mediaWidth ? { ["--card-media-width"]: `${mediaWidth}px` } : void 0;
+  const innerPlacementClass = getInnerPlacementClass(imgPlacement, styles);
+  const variantClass = getVariantClass(variant, styles);
+  const elevationClass = (_a = styles[`elevation${elevation.charAt(0).toUpperCase()}${elevation.slice(1)}`]) != null ? _a : styles.elevationSm;
+  const hasHeader = !!title || !!headerMeta;
+  const showSection = !loading && (showSectionDivider || !!sectionTitle);
+  const showBody = !loading && !!children;
+  const showActions = !loading && !!actions;
+  const inner = /* @__PURE__ */ jsxs("div", { className: `${styles.inner} ${innerPlacementClass}`, children: [
+    image ? /* @__PURE__ */ jsx("div", { className: styles.media, style: mediaStyle, children: image }) : null,
+    /* @__PURE__ */ jsxs("div", { className: styles.content, children: [
+      hasHeader ? /* @__PURE__ */ jsxs("header", { className: styles.header, children: [
+        title ? /* @__PURE__ */ jsx(
+          Headline,
+          {
+            severity,
+            marker: headerMarker,
+            icon: headerIcon,
+            addition: headerAddition,
+            subheader,
+            size: headlineSize,
+            weight: 500,
+            disableMargin: true,
+            allowWrap: !truncateTitle,
+            children: title
+          }
+        ) : null,
+        headerMeta ? /* @__PURE__ */ jsx("div", { className: styles.headerMeta, children: headerMeta }) : null
+      ] }) : null,
+      loading ? /* @__PURE__ */ jsx("div", { className: styles.loadingList, "aria-busy": "true", "aria-live": "polite", children: Array.from({ length: 4 }, (_, index) => /* @__PURE__ */ jsxs("div", { className: styles.loadingRow, children: [
+        /* @__PURE__ */ jsx(SkeletonLoaderItem, {}),
+        /* @__PURE__ */ jsx(SkeletonLoaderItem, { width: "100%" })
+      ] }, index)) }) : null,
+      showSection ? /* @__PURE__ */ jsxs("div", { className: styles.section, children: [
+        showSectionDivider ? /* @__PURE__ */ jsx("div", { className: styles.sectionDivider }) : null,
+        sectionTitle ? /* @__PURE__ */ jsx("div", { className: styles.sectionTitle, children: sectionTitle }) : null
+      ] }) : null,
+      showBody ? /* @__PURE__ */ jsx("div", { className: styles.body, children }) : null,
+      showActions ? /* @__PURE__ */ jsx("div", { className: styles.actions, children: actions }) : null
+    ] })
+  ] });
+  const cardContent = link ? /* @__PURE__ */ jsx(Hyperlink, { children: link }) : inner;
+  return /* @__PURE__ */ jsx("div", { className: `${styles.outerContainer} ${styles[size]}`, style: outerStyle, children: /* @__PURE__ */ jsx("div", { className: `${styles.container} ${variantClass} ${elevationClass}`, children: cardContent }) });
+}
+const Card = Object.assign(CardImpl, {
+  Meta: CardMeta,
+  MetaRow: CardMetaRow
+});
+
+export { Card };