@helsenorge/designsystem-react 16.0.0 → 16.2.0

package/lib/hooks/useSynchronousResizeObserver.d.ts

@@ -0,0 +1,11 @@
+import { RefObject } from 'react';
+/**
+ * Kjører measure før første paint og hver gang elementet eller dets overordnede element endrer størrelse.
+ * State-oppdateringer i measure rendres synkront, slik at elementet ikke vises en frame med utdatert layout
+ * (for eksempel når en overordnet komponent åpnes).
+ *
+ * @param ref Elementet som observeres, sammen med dets overordnede element
+ * @param measure Leser størrelser og setter state
+ * @param deps Når disse endres settes observeren opp på nytt
+ */
+export declare const useSynchronousResizeObserver: <T extends HTMLElement>(ref: RefObject<T | null>, measure: (element: T, parentElement: HTMLElement) => void, deps?: ReadonlyArray<unknown>) => void;

package/lib/hooks/useSynchronousResizeObserver.js

@@ -0,0 +1,29 @@
+import { useLayoutEffect } from "react";
+import { flushSync } from "react-dom";
+//#region src/hooks/useSynchronousResizeObserver.ts
+/**
+* Kjører measure før første paint og hver gang elementet eller dets overordnede element endrer størrelse.
+* State-oppdateringer i measure rendres synkront, slik at elementet ikke vises en frame med utdatert layout
+* (for eksempel når en overordnet komponent åpnes).
+*
+* @param ref Elementet som observeres, sammen med dets overordnede element
+* @param measure Leser størrelser og setter state
+* @param deps Når disse endres settes observeren opp på nytt
+*/
+var useSynchronousResizeObserver = (ref, measure, deps = []) => {
+	useLayoutEffect(() => {
+		const element = ref.current;
+		const parentElement = element?.parentElement;
+		if (!element || !parentElement) return;
+		const run = () => flushSync(() => measure(element, parentElement));
+		run();
+		const observer = new ResizeObserver(run);
+		observer.observe(element, { box: "border-box" });
+		observer.observe(parentElement, { box: "border-box" });
+		return () => observer.disconnect();
+	}, deps);
+};
+//#endregion
+export { useSynchronousResizeObserver };
+
+//# sourceMappingURL=useSynchronousResizeObserver.js.map

package/lib/hooks/useSynchronousResizeObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSynchronousResizeObserver.js","names":[],"sources":["../../src/hooks/useSynchronousResizeObserver.ts"],"sourcesContent":["import { useLayoutEffect, type RefObject } from 'react';\n\nimport { flushSync } from 'react-dom';\n\n/**\n * Kjører measure før første paint og hver gang elementet eller dets overordnede element endrer størrelse.\n * State-oppdateringer i measure rendres synkront, slik at elementet ikke vises en frame med utdatert layout\n * (for eksempel når en overordnet komponent åpnes).\n *\n * @param ref Elementet som observeres, sammen med dets overordnede element\n * @param measure Leser størrelser og setter state\n * @param deps Når disse endres settes observeren opp på nytt\n */\nexport const useSynchronousResizeObserver = <T extends HTMLElement>(\n  ref: RefObject<T | null>,\n  measure: (element: T, parentElement: HTMLElement) => void,\n  deps: ReadonlyArray<unknown> = []\n): void => {\n  useLayoutEffect(() => {\n    const element = ref.current;\n    const parentElement = element?.parentElement;\n    if (!element || !parentElement) {\n      return;\n    }\n\n    const run = (): void => flushSync(() => measure(element, parentElement));\n\n    run();\n    const observer = new ResizeObserver(run);\n    observer.observe(element, { box: 'border-box' });\n    observer.observe(parentElement, { box: 'border-box' });\n    return (): void => observer.disconnect();\n  }, deps);\n};\n"],"mappings":";;;;;;;;;;;;AAaA,IAAa,gCACX,KACA,SACA,OAA+B,CAAC,MACvB;CACT,sBAAsB;EACpB,MAAM,UAAU,IAAI;EACpB,MAAM,gBAAgB,SAAS;EAC/B,IAAI,CAAC,WAAW,CAAC,eACf;EAGF,MAAM,YAAkB,gBAAgB,QAAQ,SAAS,aAAa,CAAC;EAEvE,IAAI;EACJ,MAAM,WAAW,IAAI,eAAe,GAAG;EACvC,SAAS,QAAQ,SAAS,EAAE,KAAK,aAAa,CAAC;EAC/C,SAAS,QAAQ,eAAe,EAAE,KAAK,aAAa,CAAC;EACrD,aAAmB,SAAS,WAAW;CACzC,GAAG,IAAI;AACT"}

package/lib/resources/HN.Designsystem.Table.nb-NO.json.d.ts

@@ -0,0 +1,9 @@
+declare const _default: {
+  "showMoreButton": "Vis mer",
+  "menuHeadCell": "Valg",
+  "expandRowButton": "Vis detaljer",
+  "collapseRowButton": "Skjul detaljer"
+}
+;
+
+export default _default;

package/lib/resources/Resources.d.ts

@@ -200,4 +200,23 @@ export type HNDesignsystemChip = {
   removeAriaLabel: string;
 };
 
+export type HNDesignsystemTable = {
+  /**
+   * Vis mer
+   */
+  showMoreButton: string;
+  /**
+   * Valg
+   */
+  menuHeadCell: string;
+  /**
+   * Vis detaljer
+   */
+  expandRowButton: string;
+  /**
+   * Skjul detaljer
+   */
+  collapseRowButton: string;
+};
+
 /* eslint:enable */

package/lib/rolldown-runtime.js

@@ -0,0 +1,33 @@
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJSMin = (cb, mod) => () => (mod || (cb((mod = { exports: {} }).exports, mod), cb = null), mod.exports);
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule || !__hasOwnProp.call(mod, "default") ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+//#endregion
+export { __exportAll as n, __toESM as r, __commonJSMin as t };

package/lib/scss/_font-mixins.scss

@@ -170,8 +170,35 @@
 }
 
 @mixin table-cell {
+  font-size: 1rem;
+  line-height: 1.28rem;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.125rem;
+    line-height: 1.463rem;
+  }
+}
+
+@mixin table-header {
   font-size: 1.125rem;
-  line-height: 1.4375rem;
+  line-height: 1.375rem;
+  font-weight: 600;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.25rem;
+    line-height: 1.625rem;
+  }
+}
+
+@mixin table-header-stack {
+  font-size: 1rem;
+  line-height: 1.28rem;
+  font-weight: 600;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.125rem;
+    line-height: 1.463rem;
+  }
 }
 
 @mixin image-caption {

package/lib/scss/typography.module.scss

@@ -81,6 +81,14 @@ import designsystemtypography from './scss/typography.scss'
   @include fonts.table-cell;
 }
 
+.table-header {
+  @include fonts.table-header;
+}
+
+.table-header-stack {
+  @include fonts.table-header-stack;
+}
+
 .strong {
   font-size: font-settings.$font-size-sm;
   line-height: font-settings.$lineheight-size-sm;

package/lib/scss/typography.module.scss.d.ts

@@ -21,6 +21,8 @@ export type Styles = {
   sublabel: string;
   'sublabel-subdued': string;
   'table-cell': string;
+  'table-header': string;
+  'table-header-stack': string;
   'text-list': string;
   'title-feature': string;
   title1: string;

package/lib/scss/typography.stories.tsx

@@ -83,6 +83,14 @@ export const TableCell: Story = {
   render: args => <div className={designsystemtypography['table-cell']}>{args.tekst}</div>,
 };
 
+export const TableHeader: Story = {
+  render: args => <div className={designsystemtypography['table-header']}>{args.tekst}</div>,
+};
+
+export const TableHeaderStack: Story = {
+  render: args => <div className={designsystemtypography['table-header-stack']}>{args.tekst}</div>,
+};
+
 export const Strong: Story = {
   render: args => <div className={designsystemtypography.strong}>{args.tekst}</div>,
 };

package/lib/utils/uuid.js

@@ -1,16 +1,5 @@
+import { n as __exportAll } from "../rolldown-runtime.js";
 import { isTest } from "./environment.js";
-//#region \0rolldown/runtime.js
-var __defProp = Object.defineProperty;
-var __exportAll = (all, no_symbols) => {
-	let target = {};
-	for (var name in all) __defProp(target, name, {
-		get: all[name],
-		enumerable: true
-	});
-	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
-	return target;
-};
-//#endregion
 //#region src/utils/uuid.ts
 var uuid_exports = /* @__PURE__ */ __exportAll({
 	default: () => uuid,

package/lib/utils/uuid.js.map

@@ -1 +1 @@
-{"version":3,"file":"uuid.js","names":[],"sources":["../../src/utils/uuid.ts"],"sourcesContent":["import { isTest } from './environment';\n\nexport const uuid = (): string => {\n  if (isTest()) {\n    return 'test';\n  }\n  return 'bxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'.replace(/[x]/g, function (c) {\n    const r = (Math.random() * 16) | 0,\n      v = c == 'x' ? r : (r & 0x3) | 0x8;\n    return v.toString(16);\n  });\n};\n\nexport default uuid;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAEA,IAAa,aAAqB;CAChC,IAAI,OAAO,GACT,OAAO;CAET,OAAO,uCAAuC,QAAQ,QAAQ,SAAU,GAAG;EACzE,MAAM,IAAK,KAAK,OAAO,IAAI,KAAM;EAEjC,QADM,KAAK,MAAM,IAAK,IAAI,IAAO,EAAA,CACxB,SAAS,EAAE;CACtB,CAAC;AACH"}
+{"version":3,"file":"uuid.js","names":[],"sources":["../../src/utils/uuid.ts"],"sourcesContent":["import { isTest } from './environment';\n\nexport const uuid = (): string => {\n  if (isTest()) {\n    return 'test';\n  }\n  return 'bxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'.replace(/[x]/g, function (c) {\n    const r = (Math.random() * 16) | 0,\n      v = c == 'x' ? r : (r & 0x3) | 0x8;\n    return v.toString(16);\n  });\n};\n\nexport default uuid;\n"],"mappings":";;;;;;;AAEA,IAAa,aAAqB;CAChC,IAAI,OAAO,GACT,OAAO;CAET,OAAO,uCAAuC,QAAQ,QAAQ,SAAU,GAAG;EACzE,MAAM,IAAK,KAAK,OAAO,IAAI,KAAM;EAEjC,QADM,KAAK,MAAM,IAAK,IAAI,IAAO,EAAA,CACxB,SAAS,EAAE;CACtB,CAAC;AACH"}

package/lib/utils2.js

@@ -41,7 +41,7 @@ var Sublabel = ({ children, className, id, onColor, sublabelTexts, testId }) =>
 };
 //#endregion
 //#region src/components/Label/Label.tsx
-var Label = ({ afterLabelChildren, children, className, formFieldTag, htmlFor, htmlMarkup = "label", labelClassName, labelTextClassName, labelId, labelTexts, onColor = FormOnColor.onwhite, statusDot, sublabel, sublabelWrapperClassName, testId, afterLabelChildrenClassName }) => {
+var Label = ({ afterLabelChildren, children, className, formFieldTag, htmlFor, htmlMarkup = "label", labelClassName, labelTextClassName, labelId, labelTexts, onColor = FormOnColor.onwhite, statusDot, sublabel, sublabelWrapperClassName, testId, afterLabelChildrenClassName, sublabelInsideLabel }) => {
 	const hasChildren = children && typeof children !== "undefined";
 	const labelWrapperClasses = classNames(styles["label-wrapper"], { [styles["label-wrapper--no-bottom-margin"]]: hasChildren }, className);
 	const mainLabelWrapperClasses = classNames({ [styles["label-wrapper--after-label-children"]]: afterLabelChildren });
@@ -60,11 +60,20 @@ var Label = ({ afterLabelChildren, children, className, formFieldTag, htmlFor, h
 			}, index);
 		});
 	};
+	const CustomTag = htmlMarkup;
+	const renderSublabels = () => (sublabel || statusDot || formFieldTag) && /* @__PURE__ */ jsxs("div", {
+		className: sublabelWrapperClassName,
+		children: [
+			formFieldTag && isComponent(formFieldTag, FormFieldTag_default) && React.cloneElement(formFieldTag),
+			sublabel && isComponent(sublabel, Sublabel) && React.cloneElement(sublabel, { onColor }),
+			statusDot && isComponent(statusDot, StatusDot_default) && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Spacer_default, { size: "3xs" }), React.cloneElement(statusDot, { onColor: onColor === FormOnColor.ondark ? "ondark" : "onwhite" })] })
+		]
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: labelWrapperClasses,
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: mainLabelWrapperClasses,
-			children: [/* @__PURE__ */ jsx(htmlMarkup, {
+			children: [/* @__PURE__ */ jsx(CustomTag, {
 				className: labelClassName,
 				id: labelId,
 				htmlFor,
@@ -72,23 +81,16 @@ var Label = ({ afterLabelChildren, children, className, formFieldTag, htmlFor, h
 				"data-analyticsid": AnalyticsId.Label,
 				children: /* @__PURE__ */ jsxs("span", {
 					className: styles["label-content-wrapper"],
-					children: [children, /* @__PURE__ */ jsx("span", {
+					children: [children, /* @__PURE__ */ jsxs("span", {
 						className: styles.label__texts,
-						children: mapLabels()
+						children: [mapLabels(), sublabelInsideLabel && renderSublabels()]
 					})]
 				})
 			}), afterLabelChildren && /* @__PURE__ */ jsx("div", {
 				className: afterLabelChildrenClasses,
 				children: afterLabelChildren
 			})]
-		}), (sublabel || statusDot || formFieldTag) && /* @__PURE__ */ jsxs("div", {
-			className: sublabelWrapperClassName,
-			children: [
-				formFieldTag && isComponent(formFieldTag, FormFieldTag_default) && React.cloneElement(formFieldTag),
-				sublabel && isComponent(sublabel, Sublabel) && React.cloneElement(sublabel, { onColor }),
-				statusDot && isComponent(statusDot, StatusDot_default) && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Spacer_default, { size: "3xs" }), React.cloneElement(statusDot, { onColor: onColor === FormOnColor.ondark ? "ondark" : "onwhite" })] })
-			]
-		})]
+		}), !sublabelInsideLabel && renderSublabels()]
 	});
 };
 //#endregion
@@ -125,8 +127,9 @@ var renderLabelAsParent = (props) => {
 		labelTextClassName: props.labelTextClassName,
 		htmlMarkup: props.markup || "label",
 		sublabelWrapperClassName: props.sublabelWrapperClassName,
-		sublabel: props.large ? void 0 : props.label.props.sublabel,
-		statusDot: props.large ? void 0 : props.label.props.statusDot,
+		sublabelInsideLabel: true,
+		sublabel: props.label.props.sublabel,
+		statusDot: props.label.props.statusDot,
 		afterLabelChildrenClassName: props.afterLabelChildrenClassName
 	}) : typeof props.label === "string" && /* @__PURE__ */ jsx(Label, {
 		labelTexts: [{
@@ -139,6 +142,7 @@ var renderLabelAsParent = (props) => {
 		labelClassName: props.labelClassName,
 		labelTextClassName: props.labelTextClassName,
 		sublabelWrapperClassName: props.sublabelWrapperClassName,
+		sublabelInsideLabel: true,
 		afterLabelChildrenClassName: props.afterLabelChildrenClassName,
 		children: props.children
 	}) });

package/lib/utils2.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils2.js","names":[],"sources":["../src/components/Label/SubLabel.tsx","../src/components/Label/Label.tsx","../src/components/Label/utils.tsx"],"sourcesContent":["import cn from 'classnames';\n\nimport type { LabelText } from './Label';\n\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport Spacer from '../Spacer';\n\nimport styles from './styles.module.scss';\n\nexport interface SublabelProps {\n  /** Sets the content of the Sublabel */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** id that is placed on the wrapper */\n  id: string;\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  onColor?: FormOnColor;\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  sublabelTexts?: LabelText[];\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Sublabel: React.FC<SublabelProps> = ({ children, className, id, onColor, sublabelTexts, testId }) => {\n  const mapSublabels = (hideFromScreenReader?: boolean): React.ReactNode => {\n    return (\n      sublabelTexts &&\n      sublabelTexts.map((sublabelText, index) => {\n        const labelClasses = cn(styles.label, styles['sublabel'], {\n          [styles['sublabel--subdued']]: sublabelText.type === 'subdued',\n          [styles['sublabel--on-dark']]: onColor === FormOnColor.ondark,\n        });\n        return (\n          hideFromScreenReader === sublabelText.hideFromScreenReader && (\n            <span className={labelClasses} key={index}>\n              {sublabelText.text}\n            </span>\n          )\n        );\n      })\n    );\n  };\n\n  const subLabels = mapSublabels();\n  const ariaHiddenSublabels = mapSublabels(true);\n\n  return (\n    <>\n      <Spacer size={'3xs'} />\n      {(subLabels || children) && (\n        <div className={className} id={id} data-testid={testId} data-analyticsid={AnalyticsId.Sublabel}>\n          {subLabels}\n          {children}\n        </div>\n      )}\n      {ariaHiddenSublabels && (\n        <div className={className} data-testid={testId}>\n          {ariaHiddenSublabels}\n        </div>\n      )}\n    </>\n  );\n};\n","import type { FunctionComponent } from 'react';\nimport React from 'react';\n\nimport cn from 'classnames';\n\nimport type { SublabelProps } from './SubLabel';\nimport type { FormFieldTagProps } from '../FormFieldTag';\nimport type { StatusDotProps } from '../StatusDot';\n\nimport { Sublabel } from './SubLabel';\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport { isComponent } from '../../utils/component';\nimport FormFieldTag from '../FormFieldTag';\nimport Spacer from '../Spacer';\nimport StatusDot from '../StatusDot';\n\nimport styles from './styles.module.scss';\n\nexport type LabelText = {\n  hideFromScreenReader?: boolean;\n  text: string;\n  type?: 'normal' | 'subdued';\n};\n\nexport type LabelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'label' | 'p' | 'legend';\n\nexport interface LabelProps {\n  /** Component shown after label - discourage use of this */\n  afterLabelChildren?: React.ReactNode;\n  /** Sets the content of the Label */\n  children?: React.ReactNode;\n  /** Sets a tag that describes whether the form field is required or optional */\n  formFieldTag?: React.ReactNode;\n  /** Adds custom classes to the label tag. */\n  labelClassName?: string;\n  /** Adds custom classes to the label text. */\n  labelTextClassName?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Id that is put on the \"for\" attribute of the label */\n  htmlFor?: string;\n  /** Changes the underlying element of the label */\n  htmlMarkup?: LabelTags;\n  /** Id som plasseres på <label/> */\n  labelId?: string;\n  /** Array of main label strings. Can be of type semibold or normal */\n  labelTexts?: LabelText[];\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  onColor?: keyof typeof FormOnColor;\n  /** StatusDot placed underneath the last sublabel */\n  statusDot?: React.ReactNode;\n  /** Sublabel component */\n  sublabel?: React.ReactNode;\n  /** Adds custom classes to the div wrapping the sublabels. */\n  sublabelWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Gives a custom classname to the afterLabelChildren wrapper. Used in checkbox and radiobutton */\n  afterLabelChildrenClassName?: string;\n}\n\nconst Label: FunctionComponent<LabelProps> = ({\n  afterLabelChildren,\n  children,\n  className,\n  formFieldTag,\n  htmlFor,\n  htmlMarkup = 'label',\n  labelClassName,\n  labelTextClassName,\n  labelId,\n  labelTexts,\n  onColor = FormOnColor.onwhite,\n  statusDot,\n  sublabel,\n  sublabelWrapperClassName,\n  testId,\n  afterLabelChildrenClassName,\n}) => {\n  const hasChildren = children && typeof children !== 'undefined';\n  const labelWrapperClasses = cn(styles['label-wrapper'], { [styles['label-wrapper--no-bottom-margin']]: hasChildren }, className);\n  const mainLabelWrapperClasses = cn({\n    [styles['label-wrapper--after-label-children']]: afterLabelChildren,\n  });\n  const afterLabelChildrenClasses = cn(styles['after-label-children'], afterLabelChildrenClassName);\n\n  const mapLabels = (): React.ReactNode => {\n    if (typeof labelTexts === 'undefined') return null;\n\n    return labelTexts.map((labelText, index) => {\n      const labelClasses = cn(\n        styles.label,\n        {\n          [styles['label--subdued']]: labelText.type === 'subdued',\n          [styles['label--on-dark']]: onColor === FormOnColor.ondark,\n        },\n        labelTextClassName\n      );\n      return (\n        <span aria-hidden={labelText.hideFromScreenReader} className={labelClasses} key={index}>\n          {labelText.text}\n        </span>\n      );\n    });\n  };\n  const CustomTag = htmlMarkup;\n\n  return (\n    <div className={labelWrapperClasses}>\n      <div className={mainLabelWrapperClasses}>\n        <CustomTag className={labelClassName} id={labelId} htmlFor={htmlFor} data-testid={testId} data-analyticsid={AnalyticsId.Label}>\n          <span className={styles['label-content-wrapper']}>\n            {children}\n            <span className={styles.label__texts}>{mapLabels()}</span>\n          </span>\n        </CustomTag>\n        {afterLabelChildren && <div className={afterLabelChildrenClasses}>{afterLabelChildren}</div>}\n      </div>\n      {(sublabel || statusDot || formFieldTag) && (\n        <div className={sublabelWrapperClassName}>\n          {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\n          {sublabel &&\n            isComponent<SublabelProps>(sublabel, Sublabel) &&\n            React.cloneElement(sublabel, {\n              onColor: onColor as FormOnColor,\n            })}\n          {statusDot && isComponent<StatusDotProps>(statusDot, StatusDot) && (\n            <>\n              <Spacer size={'3xs'} />\n              {React.cloneElement(statusDot, {\n                onColor: onColor === FormOnColor.ondark ? 'ondark' : 'onwhite',\n              })}\n            </>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default Label;\n","import React from 'react';\n\nimport cn from 'classnames';\n\nimport type { LabelProps, LabelTags } from './Label';\nimport type { FormOnColor } from '../../constants';\n\nimport Label from './Label';\nimport { isComponent } from '../../utils/component';\n\nexport const getLabelText = (label: React.ReactNode): string => {\n  let allLabelText = '';\n\n  if (isComponent<LabelProps>(label, Label)) {\n    label.props.labelTexts?.forEach(labelText => {\n      allLabelText += !labelText.hideFromScreenReader ? labelText.text : '';\n    });\n  }\n\n  return allLabelText;\n};\n\ninterface RenderLabelProps {\n  label: React.ReactNode;\n  inputId: string;\n  onColor: FormOnColor;\n  markup?: LabelTags;\n  className?: string;\n}\n\nexport const renderLabel = (props: RenderLabelProps): React.ReactNode => {\n  return (\n    <>\n      {props.label && isComponent<LabelProps>(props.label, Label)\n        ? React.cloneElement(props.label, {\n            htmlFor: props.inputId,\n            htmlMarkup: props.markup || 'label',\n            onColor: props.onColor,\n            className: props.className,\n          })\n        : typeof props.label === 'string' && (\n            <Label\n              labelTexts={[{ text: props.label, type: 'normal' }]}\n              htmlFor={props.inputId}\n              onColor={props.onColor}\n              className={props.className}\n            />\n          )}\n    </>\n  );\n};\n\ninterface RenderLabelAsParentProps {\n  label: React.ReactNode;\n  children: React.ReactNode;\n  inputId: string;\n  onColor: FormOnColor;\n  labelClassName?: string;\n  labelTextClassName?: string;\n  sublabelWrapperClassName?: string;\n  large?: boolean;\n  markup?: LabelTags;\n  afterLabelChildrenClassName?: string;\n}\n\nexport const renderLabelAsParent = (props: RenderLabelAsParentProps): React.ReactNode => {\n  return (\n    <>\n      {props.label && isComponent<LabelProps>(props.label, Label)\n        ? React.cloneElement(props.label, {\n            htmlFor: props.inputId,\n            onColor: props.onColor,\n            children: props.children,\n            labelClassName: cn(props.labelClassName, props.label.props.labelClassName),\n            labelTextClassName: props.labelTextClassName,\n            htmlMarkup: props.markup || 'label',\n            sublabelWrapperClassName: props.sublabelWrapperClassName,\n            sublabel: props.large ? undefined : props.label.props.sublabel,\n            statusDot: props.large ? undefined : props.label.props.statusDot,\n            afterLabelChildrenClassName: props.afterLabelChildrenClassName,\n          })\n        : typeof props.label === 'string' && (\n            <Label\n              labelTexts={[{ text: props.label, type: 'subdued' }]}\n              htmlFor={props.inputId}\n              onColor={props.onColor}\n              htmlMarkup={props.markup || 'label'}\n              labelClassName={props.labelClassName}\n              labelTextClassName={props.labelTextClassName}\n              sublabelWrapperClassName={props.sublabelWrapperClassName}\n              afterLabelChildrenClassName={props.afterLabelChildrenClassName}\n            >\n              {props.children}\n            </Label>\n          )}\n    </>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"utils2.js","names":[],"sources":["../src/components/Label/SubLabel.tsx","../src/components/Label/Label.tsx","../src/components/Label/utils.tsx"],"sourcesContent":["import cn from 'classnames';\n\nimport type { LabelText } from './Label';\n\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport Spacer from '../Spacer';\n\nimport styles from './styles.module.scss';\n\nexport interface SublabelProps {\n  /** Sets the content of the Sublabel */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** id that is placed on the wrapper */\n  id: string;\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  onColor?: FormOnColor;\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  sublabelTexts?: LabelText[];\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Sublabel: React.FC<SublabelProps> = ({ children, className, id, onColor, sublabelTexts, testId }) => {\n  const mapSublabels = (hideFromScreenReader?: boolean): React.ReactNode => {\n    return (\n      sublabelTexts &&\n      sublabelTexts.map((sublabelText, index) => {\n        const labelClasses = cn(styles.label, styles['sublabel'], {\n          [styles['sublabel--subdued']]: sublabelText.type === 'subdued',\n          [styles['sublabel--on-dark']]: onColor === FormOnColor.ondark,\n        });\n        return (\n          hideFromScreenReader === sublabelText.hideFromScreenReader && (\n            <span className={labelClasses} key={index}>\n              {sublabelText.text}\n            </span>\n          )\n        );\n      })\n    );\n  };\n\n  const subLabels = mapSublabels();\n  const ariaHiddenSublabels = mapSublabels(true);\n\n  return (\n    <>\n      <Spacer size={'3xs'} />\n      {(subLabels || children) && (\n        <div className={className} id={id} data-testid={testId} data-analyticsid={AnalyticsId.Sublabel}>\n          {subLabels}\n          {children}\n        </div>\n      )}\n      {ariaHiddenSublabels && (\n        <div className={className} data-testid={testId}>\n          {ariaHiddenSublabels}\n        </div>\n      )}\n    </>\n  );\n};\n","import type { FunctionComponent } from 'react';\nimport React from 'react';\n\nimport cn from 'classnames';\n\nimport type { SublabelProps } from './SubLabel';\nimport type { FormFieldTagProps } from '../FormFieldTag';\nimport type { StatusDotProps } from '../StatusDot';\n\nimport { Sublabel } from './SubLabel';\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport { isComponent } from '../../utils/component';\nimport FormFieldTag from '../FormFieldTag';\nimport Spacer from '../Spacer';\nimport StatusDot from '../StatusDot';\n\nimport styles from './styles.module.scss';\n\nexport type LabelText = {\n  hideFromScreenReader?: boolean;\n  text: string;\n  type?: 'normal' | 'subdued';\n};\n\nexport type LabelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'label' | 'p' | 'legend';\n\nexport interface LabelProps {\n  /** Component shown after label - discourage use of this */\n  afterLabelChildren?: React.ReactNode;\n  /** Sets the content of the Label */\n  children?: React.ReactNode;\n  /** Sets a tag that describes whether the form field is required or optional */\n  formFieldTag?: React.ReactNode;\n  /** Adds custom classes to the label tag. */\n  labelClassName?: string;\n  /** Adds custom classes to the label text. */\n  labelTextClassName?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Id that is put on the \"for\" attribute of the label */\n  htmlFor?: string;\n  /** Changes the underlying element of the label */\n  htmlMarkup?: LabelTags;\n  /** Id som plasseres på <label/> */\n  labelId?: string;\n  /** Array of main label strings. Can be of type semibold or normal */\n  labelTexts?: LabelText[];\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  onColor?: keyof typeof FormOnColor;\n  /** StatusDot placed underneath the last sublabel */\n  statusDot?: React.ReactNode;\n  /** Sublabel component */\n  sublabel?: React.ReactNode;\n  /** Adds custom classes to the div wrapping the sublabels. */\n  sublabelWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Gives a custom classname to the afterLabelChildren wrapper. Used in checkbox and radiobutton */\n  afterLabelChildrenClassName?: string;\n  /** Renders formFieldTag, sublabel and statusDot inside the label element, underneath the label texts. Used by Checkbox and Radio. */\n  sublabelInsideLabel?: boolean;\n}\n\nconst Label: FunctionComponent<LabelProps> = ({\n  afterLabelChildren,\n  children,\n  className,\n  formFieldTag,\n  htmlFor,\n  htmlMarkup = 'label',\n  labelClassName,\n  labelTextClassName,\n  labelId,\n  labelTexts,\n  onColor = FormOnColor.onwhite,\n  statusDot,\n  sublabel,\n  sublabelWrapperClassName,\n  testId,\n  afterLabelChildrenClassName,\n  sublabelInsideLabel,\n}) => {\n  const hasChildren = children && typeof children !== 'undefined';\n  const labelWrapperClasses = cn(styles['label-wrapper'], { [styles['label-wrapper--no-bottom-margin']]: hasChildren }, className);\n  const mainLabelWrapperClasses = cn({\n    [styles['label-wrapper--after-label-children']]: afterLabelChildren,\n  });\n  const afterLabelChildrenClasses = cn(styles['after-label-children'], afterLabelChildrenClassName);\n\n  const mapLabels = (): React.ReactNode => {\n    if (typeof labelTexts === 'undefined') return null;\n\n    return labelTexts.map((labelText, index) => {\n      const labelClasses = cn(\n        styles.label,\n        {\n          [styles['label--subdued']]: labelText.type === 'subdued',\n          [styles['label--on-dark']]: onColor === FormOnColor.ondark,\n        },\n        labelTextClassName\n      );\n      return (\n        <span aria-hidden={labelText.hideFromScreenReader} className={labelClasses} key={index}>\n          {labelText.text}\n        </span>\n      );\n    });\n  };\n  const CustomTag = htmlMarkup;\n\n  const renderSublabels = (): React.ReactNode =>\n    (sublabel || statusDot || formFieldTag) && (\n      <div className={sublabelWrapperClassName}>\n        {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\n        {sublabel &&\n          isComponent<SublabelProps>(sublabel, Sublabel) &&\n          React.cloneElement(sublabel, {\n            onColor: onColor as FormOnColor,\n          })}\n        {statusDot && isComponent<StatusDotProps>(statusDot, StatusDot) && (\n          <>\n            <Spacer size={'3xs'} />\n            {React.cloneElement(statusDot, {\n              onColor: onColor === FormOnColor.ondark ? 'ondark' : 'onwhite',\n            })}\n          </>\n        )}\n      </div>\n    );\n\n  return (\n    <div className={labelWrapperClasses}>\n      <div className={mainLabelWrapperClasses}>\n        <CustomTag className={labelClassName} id={labelId} htmlFor={htmlFor} data-testid={testId} data-analyticsid={AnalyticsId.Label}>\n          <span className={styles['label-content-wrapper']}>\n            {children}\n            <span className={styles.label__texts}>\n              {mapLabels()}\n              {sublabelInsideLabel && renderSublabels()}\n            </span>\n          </span>\n        </CustomTag>\n        {afterLabelChildren && <div className={afterLabelChildrenClasses}>{afterLabelChildren}</div>}\n      </div>\n      {!sublabelInsideLabel && renderSublabels()}\n    </div>\n  );\n};\n\nexport default Label;\n","import React from 'react';\n\nimport cn from 'classnames';\n\nimport type { LabelProps, LabelTags } from './Label';\nimport type { FormOnColor } from '../../constants';\n\nimport Label from './Label';\nimport { isComponent } from '../../utils/component';\n\nexport const getLabelText = (label: React.ReactNode): string => {\n  let allLabelText = '';\n\n  if (isComponent<LabelProps>(label, Label)) {\n    label.props.labelTexts?.forEach(labelText => {\n      allLabelText += !labelText.hideFromScreenReader ? labelText.text : '';\n    });\n  }\n\n  return allLabelText;\n};\n\ninterface RenderLabelProps {\n  label: React.ReactNode;\n  inputId: string;\n  onColor: FormOnColor;\n  markup?: LabelTags;\n  className?: string;\n}\n\nexport const renderLabel = (props: RenderLabelProps): React.ReactNode => {\n  return (\n    <>\n      {props.label && isComponent<LabelProps>(props.label, Label)\n        ? React.cloneElement(props.label, {\n            htmlFor: props.inputId,\n            htmlMarkup: props.markup || 'label',\n            onColor: props.onColor,\n            className: props.className,\n          })\n        : typeof props.label === 'string' && (\n            <Label\n              labelTexts={[{ text: props.label, type: 'normal' }]}\n              htmlFor={props.inputId}\n              onColor={props.onColor}\n              className={props.className}\n            />\n          )}\n    </>\n  );\n};\n\ninterface RenderLabelAsParentProps {\n  label: React.ReactNode;\n  children: React.ReactNode;\n  inputId: string;\n  onColor: FormOnColor;\n  labelClassName?: string;\n  labelTextClassName?: string;\n  sublabelWrapperClassName?: string;\n  markup?: LabelTags;\n  afterLabelChildrenClassName?: string;\n}\n\nexport const renderLabelAsParent = (props: RenderLabelAsParentProps): React.ReactNode => {\n  return (\n    <>\n      {props.label && isComponent<LabelProps>(props.label, Label)\n        ? React.cloneElement(props.label, {\n            htmlFor: props.inputId,\n            onColor: props.onColor,\n            children: props.children,\n            labelClassName: cn(props.labelClassName, props.label.props.labelClassName),\n            labelTextClassName: props.labelTextClassName,\n            htmlMarkup: props.markup || 'label',\n            sublabelWrapperClassName: props.sublabelWrapperClassName,\n            sublabelInsideLabel: true,\n            sublabel: props.label.props.sublabel,\n            statusDot: props.label.props.statusDot,\n            afterLabelChildrenClassName: props.afterLabelChildrenClassName,\n          })\n        : typeof props.label === 'string' && (\n            <Label\n              labelTexts={[{ text: props.label, type: 'subdued' }]}\n              htmlFor={props.inputId}\n              onColor={props.onColor}\n              htmlMarkup={props.markup || 'label'}\n              labelClassName={props.labelClassName}\n              labelTextClassName={props.labelTextClassName}\n              sublabelWrapperClassName={props.sublabelWrapperClassName}\n              sublabelInsideLabel\n              afterLabelChildrenClassName={props.afterLabelChildrenClassName}\n            >\n              {props.children}\n            </Label>\n          )}\n    </>\n  );\n};\n"],"mappings":"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"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@helsenorge/designsystem-react",
   "sideEffects": false,
   "private": false,
-  "version": "16.0.0",
+  "version": "16.2.0",
   "description": "The official design system for Helsenorge built with React.",
   "repository": {
     "type": "git",
@@ -843,7 +843,58 @@
     "./scss/reset": "./scss/_reset.scss",
     "./scss/screen-reader": "./scss/_screen-reader.scss",
     "./scss/spacers": "./scss/_spacers.scss",
-    "./scss/visual-form": "./scss/_visual-form.scss"
+    "./scss/visual-form": "./scss/_visual-form.scss",
+    "./components/Drawer/DrawerBackButton": {
+      "types": "./lib/components/Drawer/DrawerBackButton.d.ts",
+      "import": "./lib/components/Drawer/index.js",
+      "require": "./lib/components/Drawer/index.js",
+      "default": "./lib/components/Drawer/index.js"
+    },
+    "./components/Drawer/DrawerHeaderContent": {
+      "types": "./lib/components/Drawer/DrawerHeaderContent.d.ts",
+      "import": "./lib/components/Drawer/index.js",
+      "require": "./lib/components/Drawer/index.js",
+      "default": "./lib/components/Drawer/index.js"
+    },
+    "./components/UNSAFE_Table/TableCaption": {
+      "types": "./lib/components/UNSAFE_Table/TableCaption.d.ts",
+      "import": "./lib/components/UNSAFE_Table/index.js",
+      "require": "./lib/components/UNSAFE_Table/index.js",
+      "default": "./lib/components/UNSAFE_Table/index.js"
+    },
+    "./components/UNSAFE_Table/TableContext": {
+      "types": "./lib/components/UNSAFE_Table/TableContext.d.ts",
+      "import": "./lib/components/UNSAFE_Table/index.js",
+      "require": "./lib/components/UNSAFE_Table/index.js",
+      "default": "./lib/components/UNSAFE_Table/index.js"
+    },
+    "./components/UNSAFE_Table/UNSAFE_Table": {
+      "types": "./lib/components/UNSAFE_Table/UNSAFE_Table.d.ts"
+    },
+    "./components/UNSAFE_Table/constants": {
+      "types": "./lib/components/UNSAFE_Table/constants.d.ts"
+    },
+    "./components/UNSAFE_Table/useTableExpandedRows": {
+      "types": "./lib/components/UNSAFE_Table/useTableExpandedRows.d.ts"
+    },
+    "./components/UNSAFE_Table/useTableShowMore": {
+      "types": "./lib/components/UNSAFE_Table/useTableShowMore.d.ts"
+    },
+    "./components/UNSAFE_Table/utils": {
+      "types": "./lib/components/UNSAFE_Table/utils.d.ts"
+    },
+    "./components/VisualContentgroupWithImage/VisualContentgroupWithImage": {
+      "types": "./lib/components/VisualContentgroupWithImage/VisualContentgroupWithImage.d.ts",
+      "import": "./lib/components/VisualContentgroupWithImage/index.js",
+      "require": "./lib/components/VisualContentgroupWithImage/index.js",
+      "default": "./lib/components/VisualContentgroupWithImage/index.js"
+    },
+    "./components/UNSAFE_Table/StackLabelledContent": {
+      "types": "./lib/components/UNSAFE_Table/StackLabelledContent.d.ts",
+      "import": "./lib/components/UNSAFE_Table/index.js",
+      "require": "./lib/components/UNSAFE_Table/index.js",
+      "default": "./lib/components/UNSAFE_Table/index.js"
+    }
   },
   "scripts": {
     "start": "storybook dev -p 3000",
@@ -861,6 +912,7 @@
     "generate:illustrationnames": "node __scripts__/generateIllustrationNames.mjs",
     "generate:cssdefinitions": "typed-scss-modules \"src/**/*.module.scss\" --nameFormat none --exportType default --includePaths node_modules ../../node_modules",
     "generate:scssexports": "node __scripts__/gen-scss-exports.mjs",
+    "generate:deepexports": "node __scripts__/gen-deep-exports.mjs",
     "eslint": "eslint \"src/**/*.{ts,tsx}\"",
     "eslint:fix": "npm run eslint -- --fix",
     "stylelint": "stylelint \"src/**/*.{css,scss}\"",

package/scss/_font-mixins.scss

@@ -170,8 +170,35 @@
 }
 
 @mixin table-cell {
+  font-size: 1rem;
+  line-height: 1.28rem;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.125rem;
+    line-height: 1.463rem;
+  }
+}
+
+@mixin table-header {
   font-size: 1.125rem;
-  line-height: 1.4375rem;
+  line-height: 1.375rem;
+  font-weight: 600;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.25rem;
+    line-height: 1.625rem;
+  }
+}
+
+@mixin table-header-stack {
+  font-size: 1rem;
+  line-height: 1.28rem;
+  font-weight: 600;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.125rem;
+    line-height: 1.463rem;
+  }
 }
 
 @mixin image-caption {

package/scss/typography.module.scss

@@ -81,6 +81,14 @@ import designsystemtypography from './scss/typography.scss'
   @include fonts.table-cell;
 }
 
+.table-header {
+  @include fonts.table-header;
+}
+
+.table-header-stack {
+  @include fonts.table-header-stack;
+}
+
 .strong {
   font-size: font-settings.$font-size-sm;
   line-height: font-settings.$lineheight-size-sm;

package/scss/typography.module.scss.d.ts

@@ -21,6 +21,8 @@ export type Styles = {
   sublabel: string;
   'sublabel-subdued': string;
   'table-cell': string;
+  'table-header': string;
+  'table-header-stack': string;
   'text-list': string;
   'title-feature': string;
   title1: string;

package/scss/typography.stories.tsx

@@ -83,6 +83,14 @@ export const TableCell: Story = {
   render: args => <div className={designsystemtypography['table-cell']}>{args.tekst}</div>,
 };
 
+export const TableHeader: Story = {
+  render: args => <div className={designsystemtypography['table-header']}>{args.tekst}</div>,
+};
+
+export const TableHeaderStack: Story = {
+  render: args => <div className={designsystemtypography['table-header-stack']}>{args.tekst}</div>,
+};
+
 export const Strong: Story = {
   render: args => <div className={designsystemtypography.strong}>{args.tekst}</div>,
 };