@dbcdk/react-components 0.0.172 → 0.0.173

package/dist/components/grid/Grid.cjs

@@ -39,14 +39,15 @@ function Grid({
   );
 }
 function GridItem({ children, base = 12, md, lg, className, style }) {
+  const toTrackSpan = (span) => span * 2;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: [styles__default.default.item, className].filter(Boolean).join(" "),
       style: {
-        "--span-base": base,
-        ...md != null ? { "--span-md": md } : {},
-        ...lg != null ? { "--span-lg": lg } : {},
+        "--span-base": toTrackSpan(base),
+        ...md != null ? { "--span-md": toTrackSpan(md) } : {},
+        ...lg != null ? { "--span-lg": toTrackSpan(lg) } : {},
         ...style
       },
       children

package/dist/components/grid/Grid.d.ts

@@ -17,11 +17,11 @@ export interface GridProps {
 export declare function Grid({ children, gap, equalHeight, maxWidth, className, style, }: GridProps): import("react/jsx-runtime").JSX.Element;
 export interface GridItemProps {
     children?: ReactNode;
-    /** Default span: <768px */
+    /** Default span: <768px. Supports 0.5 increments, e.g. 4.5 */
     base?: number;
-    /** Medium span: ≥768px */
+    /** Medium span: ≥768px. Supports 0.5 increments, e.g. 4.5 */
     md?: number;
-    /** Large span: ≥1200px */
+    /** Large span: ≥1200px. Supports 0.5 increments, e.g. 4.5 */
     lg?: number;
     className?: string;
     style?: CSSProperties;

package/dist/components/grid/Grid.js

@@ -33,14 +33,15 @@ function Grid({
   );
 }
 function GridItem({ children, base = 12, md, lg, className, style }) {
+  const toTrackSpan = (span) => span * 2;
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: [styles.item, className].filter(Boolean).join(" "),
       style: {
-        "--span-base": base,
-        ...md != null ? { "--span-md": md } : {},
-        ...lg != null ? { "--span-lg": lg } : {},
+        "--span-base": toTrackSpan(base),
+        ...md != null ? { "--span-md": toTrackSpan(md) } : {},
+        ...lg != null ? { "--span-lg": toTrackSpan(lg) } : {},
         ...style
       },
       children

package/dist/components/grid/Grid.module.css

@@ -1,6 +1,6 @@
 .grid {
   display: grid;
-  grid-template-columns: repeat(12, minmax(0, 1fr));
+  grid-template-columns: repeat(24, minmax(0, 1fr));
   align-items: start;
   max-width: var(--max-width-base);
 }

package/dist/components/metric-tile/MetricTile.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
 var client = require('../../client');
 var styles = require('./MetricTile.module.css');
 
@@ -11,23 +12,91 @@ var styles__default = /*#__PURE__*/_interopDefault(styles);
 function toSize(v) {
   return typeof v === "number" ? `${v}px` : v;
 }
-function MetricTile({
+function getSlotName(el) {
+  var _a;
+  const t = el.type;
+  return (_a = t.__METRIC_TILE_SLOT__) != null ? _a : null;
+}
+function splitSlots(children) {
+  const slots = {};
+  const rest = [];
+  react.Children.forEach(children, (child) => {
+    if (!react.isValidElement(child)) {
+      if (child != null) rest.push(child);
+      return;
+    }
+    const slot = getSlotName(child);
+    if (!slot) {
+      rest.push(child);
+      return;
+    }
+    slots[slot] = child;
+  });
+  return { slots, rest };
+}
+const MetricTileValue = ({
+  children
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+};
+MetricTileValue.__METRIC_TILE_SLOT__ = "Value";
+MetricTileValue.displayName = "MetricTile.Value";
+const MetricTileAdornment = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+};
+MetricTileAdornment.__METRIC_TILE_SLOT__ = "Adornment";
+MetricTileAdornment.displayName = "MetricTile.Adornment";
+const MetricTileBase = ({
   severity,
   label,
+  icon,
   value,
   tooltip,
   size = "md",
+  variant = "filled",
   minWidth,
-  maxWidth
-}) {
+  maxWidth,
+  secondaryLabel,
+  secondaryValue,
+  children
+}) => {
+  var _a, _b, _c;
   const style = minWidth != null || maxWidth != null ? {
     ...minWidth != null ? { minWidth: toSize(minWidth) } : {},
     ...maxWidth != null ? { maxWidth: toSize(maxWidth) } : {}
   } : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(client.Tooltip, { content: tooltip, placement: "bottom", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.tile, "data-severity": severity, "data-size": size, style, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: label }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.value, children: value })
-  ] }) });
-}
+  const { slots } = splitSlots(children);
+  const resolvedValue = (_b = (_a = slots.Value) == null ? void 0 : _a.props.children) != null ? _b : value;
+  const resolvedAdornment = (_c = slots.Adornment) == null ? void 0 : _c.props.children;
+  const showValueRow = resolvedValue != null || resolvedAdornment != null;
+  return /* @__PURE__ */ jsxRuntime.jsx(client.Tooltip, { content: tooltip, placement: "bottom", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: styles__default.default.tile,
+      "data-severity": severity,
+      "data-size": size,
+      "data-variant": variant,
+      style,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.labelRow, children: [
+          icon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: icon }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: label })
+        ] }),
+        showValueRow ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.valueRow, children: [
+          resolvedValue != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.value, children: resolvedValue }) : null,
+          resolvedAdornment != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.adornment, children: resolvedAdornment }) : null
+        ] }) : null,
+        secondaryLabel != null && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.secondary, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.secondaryLabel, children: secondaryLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.secondaryValue, children: secondaryValue })
+        ] })
+      ]
+    }
+  ) });
+};
+const MetricTile = Object.assign(MetricTileBase, {
+  Value: MetricTileValue,
+  Adornment: MetricTileAdornment
+});
 
 exports.MetricTile = MetricTile;

package/dist/components/metric-tile/MetricTile.d.ts

@@ -1,15 +1,28 @@
-import type { ReactNode, JSX } from 'react';
+import type { FC, JSX, PropsWithChildren, ReactNode } from 'react';
 import { Severity } from '../../constants/severity.types';
 type MetricTileSize = 'sm' | 'md' | 'lg';
+type MetricTileVariant = 'filled' | 'outlined';
 type SizeValue = number | string;
-interface MetricTileProps {
+interface MetricTileSlotProps {
+    children: ReactNode;
+}
+interface MetricTileProps extends PropsWithChildren {
     severity: Severity;
     label: string;
-    value: string | number;
+    icon?: JSX.Element;
+    value?: string | number;
     tooltip?: ReactNode;
     size?: MetricTileSize;
+    variant?: MetricTileVariant;
     minWidth?: SizeValue;
     maxWidth?: SizeValue;
+    /** Smaller secondary label shown below the main value, e.g. a second time period. */
+    secondaryLabel?: string;
+    /** Smaller secondary value shown alongside secondaryLabel. Ignored if secondaryLabel is omitted. */
+    secondaryValue?: string | number;
 }
-export declare function MetricTile({ severity, label, value, tooltip, size, minWidth, maxWidth, }: MetricTileProps): JSX.Element;
+export declare const MetricTile: FC<MetricTileProps> & {
+    Value: FC<MetricTileSlotProps>;
+    Adornment: FC<MetricTileSlotProps>;
+};
 export {};

package/dist/components/metric-tile/MetricTile.js

@@ -1,27 +1,96 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { Children, isValidElement } from 'react';
 import { Tooltip } from '../../client';
 import styles from './MetricTile.module.css';
 
 function toSize(v) {
   return typeof v === "number" ? `${v}px` : v;
 }
-function MetricTile({
+function getSlotName(el) {
+  var _a;
+  const t = el.type;
+  return (_a = t.__METRIC_TILE_SLOT__) != null ? _a : null;
+}
+function splitSlots(children) {
+  const slots = {};
+  const rest = [];
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) {
+      if (child != null) rest.push(child);
+      return;
+    }
+    const slot = getSlotName(child);
+    if (!slot) {
+      rest.push(child);
+      return;
+    }
+    slots[slot] = child;
+  });
+  return { slots, rest };
+}
+const MetricTileValue = ({
+  children
+}) => {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+MetricTileValue.__METRIC_TILE_SLOT__ = "Value";
+MetricTileValue.displayName = "MetricTile.Value";
+const MetricTileAdornment = ({ children }) => {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+MetricTileAdornment.__METRIC_TILE_SLOT__ = "Adornment";
+MetricTileAdornment.displayName = "MetricTile.Adornment";
+const MetricTileBase = ({
   severity,
   label,
+  icon,
   value,
   tooltip,
   size = "md",
+  variant = "filled",
   minWidth,
-  maxWidth
-}) {
+  maxWidth,
+  secondaryLabel,
+  secondaryValue,
+  children
+}) => {
+  var _a, _b, _c;
   const style = minWidth != null || maxWidth != null ? {
     ...minWidth != null ? { minWidth: toSize(minWidth) } : {},
     ...maxWidth != null ? { maxWidth: toSize(maxWidth) } : {}
   } : void 0;
-  return /* @__PURE__ */ jsx(Tooltip, { content: tooltip, placement: "bottom", children: /* @__PURE__ */ jsxs("span", { className: styles.tile, "data-severity": severity, "data-size": size, style, children: [
-    /* @__PURE__ */ jsx("span", { className: styles.label, children: label }),
-    /* @__PURE__ */ jsx("span", { className: styles.value, children: value })
-  ] }) });
-}
+  const { slots } = splitSlots(children);
+  const resolvedValue = (_b = (_a = slots.Value) == null ? void 0 : _a.props.children) != null ? _b : value;
+  const resolvedAdornment = (_c = slots.Adornment) == null ? void 0 : _c.props.children;
+  const showValueRow = resolvedValue != null || resolvedAdornment != null;
+  return /* @__PURE__ */ jsx(Tooltip, { content: tooltip, placement: "bottom", children: /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: styles.tile,
+      "data-severity": severity,
+      "data-size": size,
+      "data-variant": variant,
+      style,
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: styles.labelRow, children: [
+          icon != null ? /* @__PURE__ */ jsx("span", { className: styles.icon, children: icon }) : null,
+          /* @__PURE__ */ jsx("span", { className: styles.label, children: label })
+        ] }),
+        showValueRow ? /* @__PURE__ */ jsxs("span", { className: styles.valueRow, children: [
+          resolvedValue != null ? /* @__PURE__ */ jsx("span", { className: styles.value, children: resolvedValue }) : null,
+          resolvedAdornment != null ? /* @__PURE__ */ jsx("span", { className: styles.adornment, children: resolvedAdornment }) : null
+        ] }) : null,
+        secondaryLabel != null && /* @__PURE__ */ jsxs("span", { className: styles.secondary, children: [
+          /* @__PURE__ */ jsx("span", { className: styles.secondaryLabel, children: secondaryLabel }),
+          /* @__PURE__ */ jsx("span", { className: styles.secondaryValue, children: secondaryValue })
+        ] })
+      ]
+    }
+  ) });
+};
+const MetricTile = Object.assign(MetricTileBase, {
+  Value: MetricTileValue,
+  Adornment: MetricTileAdornment
+});
 
 export { MetricTile };

package/dist/components/metric-tile/MetricTile.module.css

@@ -1,4 +1,7 @@
 .tile {
+  --metric-tile-bg: var(--color-bg-surface);
+  --metric-tile-fg: var(--color-fg-default);
+  --metric-tile-outline: var(--color-border-default);
   display: inline-flex;
   flex-direction: column;
   align-items: center;
@@ -9,6 +12,9 @@
   overflow: hidden;
   box-sizing: border-box;
   border-radius: var(--border-radius-md);
+  border: var(--border-width-thin) solid transparent;
+  background-color: var(--metric-tile-bg);
+  color: var(--metric-tile-fg);
   font-family: var(--font-family);
   cursor: default;
 }
@@ -20,6 +26,10 @@
   border-radius: var(--border-radius-sm);
 }
 
+.tile[data-size='md'] {
+  gap: 8px;
+}
+
 .tile[data-size='lg'] {
   gap: var(--spacing-2xs);
   padding: var(--spacing-md) var(--spacing-lg);
@@ -28,55 +38,86 @@
 }
 
 .tile[data-severity='success'] {
-  background-color: var(--color-status-success-bg-soft);
-  color: var(--color-status-success-fg-soft);
+  --metric-tile-bg: var(--color-status-success-bg-soft);
+  --metric-tile-fg: var(--color-status-success-fg-soft);
+  --metric-tile-outline: var(--color-status-success-fg-soft);
 }
 
 .tile[data-severity='error'] {
-  background-color: var(--color-status-error-bg-soft);
-  color: var(--color-status-error-fg-soft);
+  --metric-tile-bg: var(--color-status-error-bg-soft);
+  --metric-tile-fg: var(--color-status-error-fg-soft);
+  --metric-tile-outline: var(--color-status-error-fg-soft);
 }
 
 .tile[data-severity='warning'] {
-  background-color: var(--color-status-warning-bg-soft);
-  color: var(--color-status-warning-fg-soft);
+  --metric-tile-bg: var(--color-status-warning-bg-soft);
+  --metric-tile-fg: var(--color-status-warning-fg-soft);
+  --metric-tile-outline: var(--color-status-warning-fg-soft);
 }
 
 .tile[data-severity='info'] {
-  background-color: var(--color-status-info-bg-soft);
-  color: var(--color-status-info-fg-soft);
+  --metric-tile-bg: var(--color-status-info-bg-soft);
+  --metric-tile-fg: var(--color-status-info-fg-soft);
+  --metric-tile-outline: var(--color-status-info-fg-soft);
 }
 
 .tile[data-severity='neutral'] {
-  background-color: var(--color-bg-toolbar);
-  color: var(--color-fg-default);
+  --metric-tile-bg: var(--color-bg-toolbar);
+  --metric-tile-fg: var(--color-fg-default);
+  --metric-tile-outline: var(--color-border-default);
 }
 
 .tile[data-severity='brand'] {
-  background-color: var(--color-brand);
-  color: var(--color-fg-on-brand);
+  --metric-tile-bg: var(--color-brand);
+  --metric-tile-fg: var(--color-fg-on-brand);
+  --metric-tile-outline: var(--color-brand);
 }
 
 .tile[data-severity='accent'] {
-  background-color: var(--color-accent-bg-soft);
-  color: var(--color-accent-fg-soft);
+  --metric-tile-bg: var(--color-accent-bg-soft);
+  --metric-tile-fg: var(--color-accent-fg-soft);
+  --metric-tile-outline: var(--color-accent-fg-soft);
+}
+
+.tile[data-variant='outlined'] {
+  background-color: var(--color-bg-surface);
+  color: var(--color-fg-default);
+  border-color: var(--metric-tile-outline);
+}
+
+.labelRow {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xxs);
+  max-width: 100%;
+  min-width: 0;
 }
 
 .label {
   font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-semibold, 600);
-  text-transform: uppercase;
-  letter-spacing: var(--letter-spacing-wide);
+  font-weight: 400;
+  color: var(--color-fg-subtle);
   line-height: 1;
-  opacity: 0.85;
   max-width: 100%;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
+.icon {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+}
+
+.icon :global(svg) {
+  width: 0.9em;
+  height: 0.9em;
+}
+
 .value {
   font-size: var(--font-size-md);
+  font-weight: 500;
   line-height: 1;
   font-variant-numeric: tabular-nums;
   max-width: 100%;
@@ -85,15 +126,51 @@
   text-overflow: ellipsis;
 }
 
+.valueRow {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-xxs);
+  max-width: 100%;
+  min-width: 0;
+}
+
+.adornment {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xxs);
+  flex: 0 0 auto;
+  font-size: var(--font-size-xs);
+  line-height: 1;
+  opacity: 0.9;
+}
+
+.adornment :global(svg) {
+  width: 0.9em;
+  height: 0.9em;
+}
+
 .tile[data-size='sm'] .label {
   font-size: var(--font-size-xs);
-  letter-spacing: normal;
+}
+
+.tile[data-size='sm'] .labelRow {
+  gap: 2px;
 }
 
 .tile[data-size='sm'] .value {
   font-size: var(--font-size-xs);
 }
 
+.tile[data-size='sm'] .valueRow {
+  gap: 2px;
+}
+
+.tile[data-size='sm'] .adornment {
+  gap: 2px;
+  font-size: 10px;
+}
+
 .tile[data-size='lg'] .label {
   font-size: var(--font-size-sm);
 }
@@ -101,3 +178,29 @@
 .tile[data-size='lg'] .value {
   font-size: var(--font-size-xl);
 }
+
+.secondary {
+  display: flex;
+  align-items: baseline;
+  gap: var(--spacing-2xs, 4px);
+  font-size: var(--font-size-xs);
+  opacity: 0.75;
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.secondaryLabel {
+  text-transform: none;
+  letter-spacing: normal;
+}
+
+.secondaryValue {
+  font-variant-numeric: tabular-nums;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tile[data-size='sm'] .secondary {
+  font-size: 10px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.172",
+  "version": "0.0.173",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",