@dbcdk/react-components 0.0.123 → 0.0.125

package/dist/client.cjs

@@ -28,6 +28,7 @@ var Page = require('./components/page/Page');
 var Breadcrumbs = require('./components/breadcrumbs/Breadcrumbs');
 var Circle = require('./components/circle/Circle');
 var Checkbox = require('./components/forms/checkbox/Checkbox');
+var Switch = require('./components/forms/switch/Switch');
 var Table = require('./components/table/Table');
 var chartColors = require('./constants/chart-colors');
 var chartColors_types = require('./constants/chart-colors.types');
@@ -251,6 +252,12 @@ Object.keys(Checkbox).forEach(function (k) {
 		get: function () { return Checkbox[k]; }
 	});
 });
+Object.keys(Switch).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return Switch[k]; }
+	});
+});
 Object.keys(Table).forEach(function (k) {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,

package/dist/client.d.ts

@@ -25,6 +25,7 @@ export * from './components/page/Page';
 export * from './components/breadcrumbs/Breadcrumbs';
 export * from './components/circle/Circle';
 export * from './components/forms/checkbox/Checkbox';
+export * from './components/forms/switch/Switch';
 export * from './components/table/Table';
 export * from './constants/chart-colors';
 export * from './constants/chart-colors.types';

package/dist/client.js

@@ -26,6 +26,7 @@ export * from './components/page/Page';
 export * from './components/breadcrumbs/Breadcrumbs';
 export * from './components/circle/Circle';
 export * from './components/forms/checkbox/Checkbox';
+export * from './components/forms/switch/Switch';
 export * from './components/table/Table';
 export * from './constants/chart-colors';
 export * from './constants/chart-colors.types';

package/dist/components/card/Card.module.css

@@ -75,7 +75,7 @@
 }
 
 .lg .content {
-  gap: var(--spacing-lg);
+  gap: var(--spacing-md);
 }
 
 /* Layout */

package/dist/components/circle/Circle.module.css

@@ -34,6 +34,9 @@
 }
 
 /* Status variants */
+.neutral {
+  background-color: var(--color-neutral);
+}
 .brand {
   background-color: var(--color-brand);
 }

package/dist/components/forms/switch/Switch.cjs

@@ -0,0 +1,90 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var Tooltip = require('../../../components/overlay/tooltip/Tooltip');
+var styles = require('./Switch.module.css');
+var InputContainer = require('../input-container/InputContainer');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function Switch({
+  checked: controlled,
+  onChange,
+  disabled,
+  modified,
+  label,
+  labelAs = "label",
+  size = "md",
+  containerLabel,
+  error,
+  helpText,
+  orientation = "horizontal",
+  labelWidth = "160px",
+  fullWidth = false,
+  required = false,
+  noContainer = false,
+  id,
+  "data-cy": dataCy,
+  tooltip,
+  tooltipPlacement
+}) {
+  const [internal, setInternal] = react.useState(false);
+  const isChecked = controlled != null ? controlled : internal;
+  const generatedId = react.useId();
+  const controlId = id != null ? id : `switch-${generatedId}`;
+  const toggle = (e) => {
+    if (disabled) return;
+    const value = !isChecked;
+    setInternal(value);
+    onChange == null ? void 0 : onChange(value, e);
+  };
+  const trackClass = [styles__default.default.switch, isChecked ? styles__default.default.on : "", size === "sm" ? styles__default.default.sm : ""].filter(Boolean).join(" ");
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: [styles__default.default.container, size === "sm" ? styles__default.default.containerSm : ""].filter(Boolean).join(" "),
+      "data-cy": dataCy,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { content: tooltip, placement: tooltipPlacement, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            id: controlId,
+            disabled,
+            type: "button",
+            role: "switch",
+            "aria-checked": isChecked,
+            "aria-disabled": disabled || void 0,
+            "aria-invalid": Boolean(error) || void 0,
+            onClick: toggle,
+            className: trackClass,
+            children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.thumb, "aria-hidden": "true" })
+          }
+        ) }),
+        label && (labelAs === "label" ? /* @__PURE__ */ jsxRuntime.jsx("label", { className: styles__default.default.label, htmlFor: controlId, children: label }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: label }))
+      ]
+    }
+  );
+  if (noContainer) return content;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    InputContainer.InputContainer,
+    {
+      modified,
+      label: containerLabel,
+      htmlFor: controlId,
+      error,
+      helpText,
+      orientation,
+      size,
+      labelWidth,
+      fullWidth,
+      required,
+      children: content
+    }
+  );
+}
+
+exports.Switch = Switch;

package/dist/components/forms/switch/Switch.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import type { JSX, ReactNode } from 'react';
+import type { TooltipPlacement } from '../../../components/overlay/tooltip/TooltipProvider';
+type Size = 'sm' | 'md';
+interface SwitchProps {
+    checked?: boolean;
+    onChange?: (checked: boolean, event: React.MouseEvent<HTMLButtonElement>) => void;
+    disabled?: boolean;
+    modified?: boolean;
+    label?: ReactNode;
+    labelAs?: 'label' | 'span';
+    size?: Size;
+    containerLabel?: string;
+    error?: string;
+    helpText?: string;
+    orientation?: 'vertical' | 'horizontal';
+    labelWidth?: string;
+    fullWidth?: boolean;
+    required?: boolean;
+    noContainer?: boolean;
+    id?: string;
+    'data-cy'?: string;
+    tooltip?: ReactNode;
+    tooltipPlacement?: TooltipPlacement;
+}
+export declare function Switch({ checked: controlled, onChange, disabled, modified, label, labelAs, size, containerLabel, error, helpText, orientation, labelWidth, fullWidth, required, noContainer, id, 'data-cy': dataCy, tooltip, tooltipPlacement, }: SwitchProps): JSX.Element;
+export {};

package/dist/components/forms/switch/Switch.js

@@ -0,0 +1,84 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useId } from 'react';
+import { Tooltip } from '../../../components/overlay/tooltip/Tooltip';
+import styles from './Switch.module.css';
+import { InputContainer } from '../input-container/InputContainer';
+
+function Switch({
+  checked: controlled,
+  onChange,
+  disabled,
+  modified,
+  label,
+  labelAs = "label",
+  size = "md",
+  containerLabel,
+  error,
+  helpText,
+  orientation = "horizontal",
+  labelWidth = "160px",
+  fullWidth = false,
+  required = false,
+  noContainer = false,
+  id,
+  "data-cy": dataCy,
+  tooltip,
+  tooltipPlacement
+}) {
+  const [internal, setInternal] = useState(false);
+  const isChecked = controlled != null ? controlled : internal;
+  const generatedId = useId();
+  const controlId = id != null ? id : `switch-${generatedId}`;
+  const toggle = (e) => {
+    if (disabled) return;
+    const value = !isChecked;
+    setInternal(value);
+    onChange == null ? void 0 : onChange(value, e);
+  };
+  const trackClass = [styles.switch, isChecked ? styles.on : "", size === "sm" ? styles.sm : ""].filter(Boolean).join(" ");
+  const content = /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: [styles.container, size === "sm" ? styles.containerSm : ""].filter(Boolean).join(" "),
+      "data-cy": dataCy,
+      children: [
+        /* @__PURE__ */ jsx(Tooltip, { content: tooltip, placement: tooltipPlacement, children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            id: controlId,
+            disabled,
+            type: "button",
+            role: "switch",
+            "aria-checked": isChecked,
+            "aria-disabled": disabled || void 0,
+            "aria-invalid": Boolean(error) || void 0,
+            onClick: toggle,
+            className: trackClass,
+            children: /* @__PURE__ */ jsx("span", { className: styles.thumb, "aria-hidden": "true" })
+          }
+        ) }),
+        label && (labelAs === "label" ? /* @__PURE__ */ jsx("label", { className: styles.label, htmlFor: controlId, children: label }) : /* @__PURE__ */ jsx("span", { className: styles.label, children: label }))
+      ]
+    }
+  );
+  if (noContainer) return content;
+  return /* @__PURE__ */ jsx(
+    InputContainer,
+    {
+      modified,
+      label: containerLabel,
+      htmlFor: controlId,
+      error,
+      helpText,
+      orientation,
+      size,
+      labelWidth,
+      fullWidth,
+      required,
+      children: content
+    }
+  );
+}
+
+export { Switch };

package/dist/components/forms/switch/Switch.module.css

@@ -0,0 +1,83 @@
+.container {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  vertical-align: middle;
+  line-height: var(--line-height-normal);
+  color: var(--color-fg-default);
+}
+
+.containerSm {
+  gap: var(--spacing-xs);
+}
+
+.switch {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  width: 36px;
+  height: 20px;
+  border-radius: 999px;
+  border: none;
+  background-color: var(--color-border-default);
+  cursor: pointer;
+  padding: 0;
+  transition:
+    background-color var(--transition-fast) var(--ease-standard),
+    box-shadow var(--transition-fast) var(--ease-standard);
+}
+
+.switch.sm {
+  width: 28px;
+  height: 16px;
+}
+
+.switch:hover {
+  opacity: 0.75;
+}
+
+.switch.on {
+  background-color: var(--color-brand);
+}
+
+.switch:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+.thumb {
+  position: absolute;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: var(--color-fg-inverse);
+  box-shadow: var(--shadow-sm);
+  transition: transform var(--transition-fast) var(--ease-standard);
+  pointer-events: none;
+}
+
+.switch.sm .thumb {
+  width: 12px;
+  height: 12px;
+}
+
+.switch.on .thumb {
+  transform: translateX(16px);
+}
+
+.switch.sm.on .thumb {
+  transform: translateX(12px);
+}
+
+.label {
+  display: block;
+  font-size: var(--font-size-sm);
+  min-width: 0;
+  flex: 1 1 auto;
+  line-height: var(--line-height-normal);
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}

package/dist/components/icon/Icon.module.css

@@ -13,6 +13,7 @@
 
 .icon svg {
   height: var(--icon-size-md);
+  width: auto;
 }
 
 .success {

package/dist/components/page/Page.cjs

@@ -39,7 +39,7 @@ function Page({
             Headline.Headline,
             {
               disableMargin: true,
-              size: 1,
+              size: 2,
               severity,
               icon: headerIcon,
               subheader,

package/dist/components/page/Page.js

@@ -33,7 +33,7 @@ function Page({
             Headline,
             {
               disableMargin: true,
-              size: 1,
+              size: 2,
               severity,
               icon: headerIcon,
               subheader,

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

@@ -132,7 +132,7 @@
   align-items: center;
 
   background: var(--color-bg-surface);
-  padding: var(--spacing-lg) var(--spacing-md);
+  padding: var(--spacing-xl) var(--spacing-xl);
   overflow: visible;
 }
 
@@ -154,7 +154,7 @@
   display: flex;
   justify-content: center;
   width: 100%;
-  padding-inline: var(--spacing-md);
+  padding-inline: var(--spacing-xl);
 }
 
 .headerContent {

package/dist/components/page-layout/components/footer/Footer.module.css

@@ -9,7 +9,7 @@
   max-inline-size: var(--container-xl);
   margin-inline: auto;
   padding-block: var(--spacing-lg);
-  padding-inline: var(--spacing-md);
+  padding-inline: var(--spacing-xl);
   display: flex;
   flex-direction: row;
   align-items: flex-start;

package/dist/components/segmented-progress-bar/SegmentedProgressBar.module.css

@@ -12,10 +12,10 @@
   --progress-fill-progress: color-mix(in srgb, var(--color-fg-default) 6%, transparent);
   --progress-fill-missing: color-mix(in srgb, var(--color-fg-default) 8%, transparent);
   --progress-fill-neutral: color-mix(in srgb, var(--color-fg-default) 8%, transparent);
-  --progress-fill-success: color-mix(in srgb, var(--color-status-success) 32%, transparent);
-  --progress-fill-info: color-mix(in srgb, var(--color-status-info) 32%, transparent);
-  --progress-fill-warning: color-mix(in srgb, var(--color-status-warning) 32%, transparent);
-  --progress-fill-error: color-mix(in srgb, var(--color-status-error) 32%, transparent);
+  --progress-fill-success: color-mix(in srgb, var(--color-status-success) 95%, transparent);
+  --progress-fill-info: color-mix(in srgb, var(--color-status-info) 70%, transparent);
+  --progress-fill-warning: color-mix(in srgb, var(--color-status-warning) 70%, transparent);
+  --progress-fill-error: color-mix(in srgb, var(--color-status-error) 75%, transparent);
 
   position: relative;
   width: 100%;

package/dist/components/table/Table.module.css

@@ -263,6 +263,10 @@
   padding-block: var(--spacing-xxs);
 }
 
+.headerCell:hover [data-resizer='true']::after {
+  opacity: 1;
+}
+
 .cell.contextMenuCell {
   vertical-align: top;
   padding-block: var(--spacing-2xs);

package/dist/components/table/components/TableRow.cjs

@@ -194,7 +194,7 @@ function RowContextMenu({
           "aria-label": `Flere handlinger for r\xE6kke ${String(rowId)}`,
           "aria-haspopup": "menu",
           "aria-expanded": isOpen ? true : false,
-          icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, { size: 16 }),
+          icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreVertical, { size: 16 }),
           "data-row-context-menu": "true",
           onClick: (e) => {
             e.stopPropagation();

package/dist/components/table/components/TableRow.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { MoreHorizontal } from 'lucide-react';
+import { MoreVertical } from 'lucide-react';
 import { Checkbox } from '../../../components/forms/checkbox/Checkbox';
 import { RadioButton } from '../../../components/forms/radio-buttons/RadioButton';
 import { Popover } from '../../../components/popover/Popover';
@@ -188,7 +188,7 @@ function RowContextMenu({
           "aria-label": `Flere handlinger for r\xE6kke ${String(rowId)}`,
           "aria-haspopup": "menu",
           "aria-expanded": isOpen ? true : false,
-          icon: /* @__PURE__ */ jsx(MoreHorizontal, { size: 16 }),
+          icon: /* @__PURE__ */ jsx(MoreVertical, { size: 16 }),
           "data-row-context-menu": "true",
           onClick: (e) => {
             e.stopPropagation();

package/dist/components/table/components/column-resizer/ColumnResizer.module.css

@@ -19,4 +19,6 @@
   top: 50%;
   transform: translateY(-50%);
   background-color: var(--opac-bg-default);
+  opacity: 0;
+  transition: opacity 0.15s;
 }

package/dist/components/tabs/Tabs.cjs

@@ -124,8 +124,12 @@ function Tabs({
     header ? /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: [styles__default.default.headerContainer, disableTopPadding ? styles__default.default.disableTopPadding : ""].filter(Boolean).join(" "),
-        children: /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { disableMargin: true, size: 1, subheader, addition, children: header })
+        className: [
+          styles__default.default.headerContainer,
+          variant === "outlined" ? styles__default.default.headerContainerOutlined : "",
+          disableTopPadding ? styles__default.default.disableTopPadding : ""
+        ].filter(Boolean).join(" "),
+        children: /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { disableMargin: true, size: 2, subheader, addition, children: header })
       }
     ) : null,
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.tabs} ${styles__default.default[variant]} ${panelStyle ? styles__default.default.panelStyle : ""}`, children: [

package/dist/components/tabs/Tabs.js

@@ -118,8 +118,12 @@ function Tabs({
     header ? /* @__PURE__ */ jsx(
       "div",
       {
-        className: [styles.headerContainer, disableTopPadding ? styles.disableTopPadding : ""].filter(Boolean).join(" "),
-        children: /* @__PURE__ */ jsx(Headline, { disableMargin: true, size: 1, subheader, addition, children: header })
+        className: [
+          styles.headerContainer,
+          variant === "outlined" ? styles.headerContainerOutlined : "",
+          disableTopPadding ? styles.disableTopPadding : ""
+        ].filter(Boolean).join(" "),
+        children: /* @__PURE__ */ jsx(Headline, { disableMargin: true, size: 2, subheader, addition, children: header })
       }
     ) : null,
     /* @__PURE__ */ jsxs("div", { className: `${styles.tabs} ${styles[variant]} ${panelStyle ? styles.panelStyle : ""}`, children: [

package/dist/components/tabs/Tabs.module.css

@@ -183,10 +183,19 @@
    Outlined variant
    ========================= */
 
-.outlined {
+.tabs.outlined {
   gap: var(--spacing-lg);
 }
 
+.headerContainerOutlined {
+  padding-block-start: var(--spacing-sm);
+  padding-block-end: var(--spacing-sm);
+}
+
+.headerContainerOutlined.disableTopPadding {
+  padding-block-start: 0;
+}
+
 .outlined .tab {
   color: var(--color-fg-muted);
   border-block-end: 2px solid var(--color-border-default);

package/dist/index.css

@@ -28,6 +28,7 @@
 @import './components/forms/input/Input.module.css';
 @import './components/forms/radio-buttons/RadioButtons.module.css';
 @import './components/forms/select/Select.module.css';
+@import './components/forms/switch/Switch.module.css';
 @import './components/forms/text-area/Textarea.module.css';
 @import './components/forms/typeahead/Typeahead.module.css';
 @import './components/grid/Grid.module.css';

package/dist/styles/themes/dbc/base.css

@@ -70,7 +70,7 @@
   --font-size-xs: 12px;
   --font-size-sm: 14px;
   --font-size-md: 16px;
-  --font-size-lg: 18px;
+  --font-size-lg: 20px;
   --font-size-xl: 24px;
   --font-size-2xl: 30px;
 

package/dist/styles/themes/dbc/colors.css

@@ -172,7 +172,7 @@ html {
   --color-status-info-fg-soft: var(--color-status-info-fg);
 
   /* Chart colors */
-  --color-chart-empty: color-mix(in srgb, var(--color-fg-muted) 15%, rgb(255 255 255 / 0));
+  --color-chart-empty: color-mix(in srgb, var(--color-fg-muted) 10%, rgb(255 255 255 / 0));
   --color-chart-neutral: color-mix(in srgb, var(--color-fg-muted) 25%, rgb(255 255 255 / 0));
   --color-chart-primary: color-mix(in srgb, var(--dbc-blue-500) 75%, rgb(255 255 255 / 0));
   --color-chart-success: color-mix(in srgb, var(--dbc-green-500) 75%, rgb(255 255 255 / 0));

package/package.json

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