@helsenorge/designsystem-react 7.3.0 → 7.4.0

package/components/Select/Select.d.ts

@@ -27,7 +27,7 @@ export interface SelectProps extends Pick<React.SelectHTMLAttributes<HTMLSelectE
     /** Gives defaultvalue to the comp. Preferred over selected prop on option by react */
     defaultValue?: string | number;
     /** Adds custom classes to the wrapper tag */
-    wrapperClassName?: boolean;
+    wrapperClassName?: string;
 }
 export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
 export default Select;

package/components/Select/Select.js

@@ -1,14 +1,15 @@
 import r from "react";
 import s from "classnames";
-import { FormMode as F, AnalyticsId as H, IconSize as M, AVERAGE_CHARACTER_WIDTH_PX as U } from "../../constants.js";
+import { FormMode as B, AnalyticsId as F, IconSize as H, AVERAGE_CHARACTER_WIDTH_PX as M } from "../../constants.js";
 import { useUuid as w } from "../../hooks/useUuid.js";
 import { getColor as v } from "../../theme/currys/color.js";
+import { getAriaDescribedBy as U } from "../../utils/accessibility.js";
 import V from "../ErrorWrapper/ErrorWrapper.js";
 import { Icon as X } from "../Icon/Icon.js";
-import j from "../Icons/ChevronDown.js";
-import { renderLabel as B } from "../Label/Label.js";
+import G from "../Icons/ChevronDown.js";
+import { renderLabel as L } from "../Label/Label.js";
 import e from "../Select/styles.module.scss";
-const G = (o) => `calc(${o * U}px + 2rem)`, L = (o, t) => t ? v("neutral", 500) : v(o ? "cherry" : "blueberry", 600), P = r.forwardRef(function(t, c) {
+const P = (o) => `calc(${o * M}px + 2rem)`, j = (o, t) => t ? v("neutral", 500) : v(o ? "cherry" : "blueberry", 600), k = r.forwardRef(function(t, c) {
   const {
     className: y,
     children: I,
@@ -20,16 +21,16 @@ const G = (o) => `calc(${o * U}px + 2rem)`, L = (o, t) => t ? v("neutral", 500)
     label: S,
     selectId: d,
     name: W = d,
-    mode: n = F.onwhite,
-    testId: N,
+    mode: n = B.onwhite,
+    testId: g,
     width: m,
     required: p,
-    value: g,
-    defaultValue: R,
+    value: N,
+    defaultValue: A,
     autoComplete: u = "off",
-    wrapperClassName: T,
-    ...A
-  } = t, f = w(d), b = w(x), C = n === "onblueberry", a = n === "oninvalid" || !!i || !!E, _ = L(a, !!l), $ = m ? G(m) : void 0, q = s(
+    wrapperClassName: R,
+    ...T
+  } = t, f = w(d), b = w(x), C = n === "onblueberry", a = n === "oninvalid" || !!i || !!E, _ = j(a, !!l), D = m ? P(m) : void 0, $ = s(
     e["select-inner-wrapper"],
     {
       [e["select-inner-wrapper--transparent"]]: h === "transparent",
@@ -38,32 +39,32 @@ const G = (o) => `calc(${o * U}px + 2rem)`, L = (o, t) => t ? v("neutral", 500)
       [e["select-inner-wrapper--disabled"]]: l
     },
     y
-  ), z = s(e.select, {
+  ), q = s(e.select, {
     [e["select--on-blueberry"]]: C,
     [e["select--invalid"]]: a
-  }), D = s(e["select-wrapper"], T);
-  return /* @__PURE__ */ r.createElement(V, { errorText: i, errorTextId: b }, /* @__PURE__ */ r.createElement("div", { "data-testid": N, "data-analyticsid": H.Select, className: D, style: { maxWidth: $ } }, B(S, f, n), /* @__PURE__ */ r.createElement("div", { className: q }, /* @__PURE__ */ r.createElement(X, { className: e["select-arrow"], svgIcon: j, color: _, size: M.XSmall }), /* @__PURE__ */ r.createElement(
+  }), z = s(e["select-wrapper"], R);
+  return /* @__PURE__ */ r.createElement(V, { errorText: i, errorTextId: b }, /* @__PURE__ */ r.createElement("div", { "data-testid": g, "data-analyticsid": F.Select, className: z, style: { maxWidth: D } }, L(S, f, n), /* @__PURE__ */ r.createElement("div", { className: $ }, /* @__PURE__ */ r.createElement(X, { className: e["select-arrow"], svgIcon: G, color: _, size: H.XSmall }), /* @__PURE__ */ r.createElement(
     "select",
     {
       "aria-invalid": !!a,
       id: f,
       name: W,
-      className: z,
+      className: q,
       disabled: l,
       ref: c,
       required: p,
-      "aria-describedby": [t["aria-describedby"] || "", b].join(" "),
+      "aria-describedby": U(t, b),
       "aria-required": !!p,
-      value: g,
-      defaultValue: R,
+      value: N,
+      defaultValue: A,
       autoComplete: u || void 0,
-      ...A
+      ...T
     },
     I
   ))));
-}), oe = P;
+}), le = k;
 export {
-  P as Select,
-  oe as default
+  k as Select,
+  le as default
 };
 //# sourceMappingURL=Select.js.map

package/components/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormMode, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport { renderLabel } from '../Label';\n\nimport selectStyles from './styles.module.scss';\n\ntype SelectConcept = 'normal' | 'transparent';\n\nexport interface SelectProps\n  extends Pick<\n    React.SelectHTMLAttributes<HTMLSelectElement>,\n    'aria-describedby' | 'name' | 'disabled' | 'required' | 'value' | 'onChange' | 'autoComplete'\n  > {\n  /** Sets the content of the select element. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the component */\n  concept?: SelectConcept;\n  /** The label text above the select */\n  label?: React.ReactNode;\n  /** Changes the visuals of the component */\n  mode?: keyof typeof FormMode;\n  /** Activates Error style for the select component - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** select id of the select element */\n  selectId?: string;\n  /** Width of select in characters (approximate) */\n  width?: number;\n  /** Gives defaultvalue to the comp. Preferred over selected prop on option by react */\n  defaultValue?: string | number;\n  /** Adds custom classes to the wrapper tag */\n  wrapperClassName?: boolean;\n}\n\nconst getSelectMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth})`;\n};\n\nconst getIconColor = (invalid: boolean, disabled: boolean) => {\n  const iconColor = invalid ? 'cherry' : 'blueberry';\n  return disabled ? getColor('neutral', 500) : getColor(iconColor, 600);\n};\n\nexport const Select = React.forwardRef(function SelectForwardedRef(props: SelectProps, ref: React.Ref<HTMLSelectElement>) {\n  const {\n    className,\n    children,\n    concept = 'normal',\n    disabled,\n    error,\n    errorText,\n    errorTextId,\n    label,\n    selectId,\n    name = selectId,\n    mode = FormMode.onwhite,\n    testId,\n    width,\n    required,\n    value,\n    defaultValue,\n    autoComplete = 'off',\n    wrapperClassName,\n    ...rest\n  } = props;\n\n  const uuid = useUuid(selectId);\n  const errorTextUuid = useUuid(errorTextId);\n  const onBlueberry = mode === 'onblueberry';\n  const invalid = mode === 'oninvalid' || !!errorText || !!error;\n  const iconColor = getIconColor(invalid, !!disabled);\n  const maxWidth = width ? getSelectMaxWidth(width) : undefined;\n\n  const selectInnerWrapperClasses = classNames(\n    selectStyles['select-inner-wrapper'],\n    {\n      [selectStyles['select-inner-wrapper--transparent']]: concept === 'transparent',\n      [selectStyles['select-inner-wrapper--on-blueberry']]: onBlueberry,\n      [selectStyles['select-inner-wrapper--invalid']]: invalid,\n      [selectStyles['select-inner-wrapper--disabled']]: disabled,\n    },\n    className\n  );\n\n  const selectClasses = classNames(selectStyles.select, {\n    [selectStyles['select--on-blueberry']]: onBlueberry,\n    [selectStyles['select--invalid']]: invalid,\n  });\n\n  const selectWrapperClasses = classNames(selectStyles['select-wrapper'], wrapperClassName);\n\n  return (\n    <ErrorWrapper errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Select} className={selectWrapperClasses} style={{ maxWidth }}>\n        {renderLabel(label, uuid, mode as FormMode)}\n        <div className={selectInnerWrapperClasses}>\n          <Icon className={selectStyles['select-arrow']} svgIcon={ChevronDown} color={iconColor} size={IconSize.XSmall} />\n          <select\n            aria-invalid={!!invalid}\n            id={uuid}\n            name={name}\n            className={selectClasses}\n            disabled={disabled}\n            ref={ref}\n            required={required}\n            aria-describedby={[props['aria-describedby'] || '', errorTextUuid].join(' ')}\n            aria-required={!!required}\n            value={value}\n            defaultValue={defaultValue}\n            autoComplete={autoComplete ? autoComplete : undefined}\n            {...rest}\n          >\n            {children}\n          </select>\n        </div>\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nexport default Select;\n"],"names":["getSelectMaxWidth","characters","AVERAGE_CHARACTER_WIDTH_PX","getIconColor","invalid","disabled","getColor","Select","React","props","ref","className","children","concept","error","errorText","errorTextId","label","selectId","name","mode","FormMode","testId","width","required","value","defaultValue","autoComplete","wrapperClassName","rest","uuid","useUuid","errorTextUuid","onBlueberry","iconColor","maxWidth","selectInnerWrapperClasses","classNames","selectStyles","selectClasses","selectWrapperClasses","ErrorWrapper","AnalyticsId","renderLabel","Icon","ChevronDown","IconSize","Select$1"],"mappings":";;;;;;;;;;AAiDA,MAAMA,IAAoB,CAACC,MAGlB,QAAQA,IAAaC,CAA0B,cAGlDC,IAAe,CAACC,GAAkBC,MAE/BA,IAAWC,EAAS,WAAW,GAAG,IAAIA,EAD3BF,IAAU,WAAW,aAC0B,GAAG,GAGzDG,IAASC,EAAM,WAAW,SAA4BC,GAAoBC,GAAmC;AAClH,QAAA;AAAA,IACJ,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,UAAAR;AAAA,IACA,OAAAS;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC,IAAOD;AAAA,IACP,MAAAE,IAAOC,EAAS;AAAA,IAChB,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,cAAAC,IAAe;AAAA,IACf,kBAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAApB,GAEEqB,IAAOC,EAAQb,CAAQ,GACvBc,IAAgBD,EAAQf,CAAW,GACnCiB,IAAcb,MAAS,eACvBhB,IAAUgB,MAAS,eAAe,CAAC,CAACL,KAAa,CAAC,CAACD,GACnDoB,IAAY/B,EAAaC,GAAS,CAAC,CAACC,CAAQ,GAC5C8B,IAAWZ,IAAQvB,EAAkBuB,CAAK,IAAI,QAE9Ca,IAA4BC;AAAA,IAChCC,EAAa,sBAAsB;AAAA,IACnC;AAAA,MACE,CAACA,EAAa,mCAAmC,CAAC,GAAGzB,MAAY;AAAA,MACjE,CAACyB,EAAa,oCAAoC,CAAC,GAAGL;AAAA,MACtD,CAACK,EAAa,+BAA+B,CAAC,GAAGlC;AAAA,MACjD,CAACkC,EAAa,gCAAgC,CAAC,GAAGjC;AAAA,IACpD;AAAA,IACAM;AAAA,EAAA,GAGI4B,IAAgBF,EAAWC,EAAa,QAAQ;AAAA,IACpD,CAACA,EAAa,sBAAsB,CAAC,GAAGL;AAAA,IACxC,CAACK,EAAa,iBAAiB,CAAC,GAAGlC;AAAA,EAAA,CACpC,GAEKoC,IAAuBH,EAAWC,EAAa,gBAAgB,GAAGV,CAAgB;AAExF,yCACGa,GAAa,EAAA,WAAA1B,GAAsB,aAAaiB,KAC/CxB,gBAAAA,EAAA,cAAC,SAAI,eAAac,GAAQ,oBAAkBoB,EAAY,QAAQ,WAAWF,GAAsB,OAAO,EAAE,UAAAL,EAAA,KACvGQ,EAAY1B,GAAOa,GAAMV,CAAgB,GACzCZ,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAW4B,EACd,GAAA5B,gBAAAA,EAAA,cAACoC,KAAK,WAAWN,EAAa,cAAc,GAAG,SAASO,GAAa,OAAOX,GAAW,MAAMY,EAAS,QAAQ,GAC9GtC,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,gBAAc,CAAC,CAACJ;AAAA,MAChB,IAAI0B;AAAA,MACJ,MAAAX;AAAA,MACA,WAAWoB;AAAA,MACX,UAAAlC;AAAA,MACA,KAAAK;AAAA,MACA,UAAAc;AAAA,MACA,oBAAkB,CAACf,EAAM,kBAAkB,KAAK,IAAIuB,CAAa,EAAE,KAAK,GAAG;AAAA,MAC3E,iBAAe,CAAC,CAACR;AAAA,MACjB,OAAAC;AAAA,MACA,cAAAC;AAAA,MACA,cAAcC,KAA8B;AAAA,MAC3C,GAAGE;AAAA,IAAA;AAAA,IAEHjB;AAAA,EAEL,CAAA,CACF,CACF;AAEJ,CAAC,GAEDmC,KAAexC;"}
+{"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormMode, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport { renderLabel } from '../Label';\n\nimport selectStyles from './styles.module.scss';\n\ntype SelectConcept = 'normal' | 'transparent';\n\nexport interface SelectProps\n  extends Pick<\n    React.SelectHTMLAttributes<HTMLSelectElement>,\n    'aria-describedby' | 'name' | 'disabled' | 'required' | 'value' | 'onChange' | 'autoComplete'\n  > {\n  /** Sets the content of the select element. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the component */\n  concept?: SelectConcept;\n  /** The label text above the select */\n  label?: React.ReactNode;\n  /** Changes the visuals of the component */\n  mode?: keyof typeof FormMode;\n  /** Activates Error style for the select component - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** select id of the select element */\n  selectId?: string;\n  /** Width of select in characters (approximate) */\n  width?: number;\n  /** Gives defaultvalue to the comp. Preferred over selected prop on option by react */\n  defaultValue?: string | number;\n  /** Adds custom classes to the wrapper tag */\n  wrapperClassName?: string;\n}\n\nconst getSelectMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth})`;\n};\n\nconst getIconColor = (invalid: boolean, disabled: boolean) => {\n  const iconColor = invalid ? 'cherry' : 'blueberry';\n  return disabled ? getColor('neutral', 500) : getColor(iconColor, 600);\n};\n\nexport const Select = React.forwardRef(function SelectForwardedRef(props: SelectProps, ref: React.Ref<HTMLSelectElement>) {\n  const {\n    className,\n    children,\n    concept = 'normal',\n    disabled,\n    error,\n    errorText,\n    errorTextId,\n    label,\n    selectId,\n    name = selectId,\n    mode = FormMode.onwhite,\n    testId,\n    width,\n    required,\n    value,\n    defaultValue,\n    autoComplete = 'off',\n    wrapperClassName,\n    ...rest\n  } = props;\n\n  const uuid = useUuid(selectId);\n  const errorTextUuid = useUuid(errorTextId);\n  const onBlueberry = mode === 'onblueberry';\n  const invalid = mode === 'oninvalid' || !!errorText || !!error;\n  const iconColor = getIconColor(invalid, !!disabled);\n  const maxWidth = width ? getSelectMaxWidth(width) : undefined;\n\n  const selectInnerWrapperClasses = classNames(\n    selectStyles['select-inner-wrapper'],\n    {\n      [selectStyles['select-inner-wrapper--transparent']]: concept === 'transparent',\n      [selectStyles['select-inner-wrapper--on-blueberry']]: onBlueberry,\n      [selectStyles['select-inner-wrapper--invalid']]: invalid,\n      [selectStyles['select-inner-wrapper--disabled']]: disabled,\n    },\n    className\n  );\n\n  const selectClasses = classNames(selectStyles.select, {\n    [selectStyles['select--on-blueberry']]: onBlueberry,\n    [selectStyles['select--invalid']]: invalid,\n  });\n\n  const selectWrapperClasses = classNames(selectStyles['select-wrapper'], wrapperClassName);\n\n  return (\n    <ErrorWrapper errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Select} className={selectWrapperClasses} style={{ maxWidth }}>\n        {renderLabel(label, uuid, mode as FormMode)}\n        <div className={selectInnerWrapperClasses}>\n          <Icon className={selectStyles['select-arrow']} svgIcon={ChevronDown} color={iconColor} size={IconSize.XSmall} />\n          <select\n            aria-invalid={!!invalid}\n            id={uuid}\n            name={name}\n            className={selectClasses}\n            disabled={disabled}\n            ref={ref}\n            required={required}\n            aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n            aria-required={!!required}\n            value={value}\n            defaultValue={defaultValue}\n            autoComplete={autoComplete ? autoComplete : undefined}\n            {...rest}\n          >\n            {children}\n          </select>\n        </div>\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nexport default Select;\n"],"names":["getSelectMaxWidth","characters","AVERAGE_CHARACTER_WIDTH_PX","getIconColor","invalid","disabled","getColor","Select","React","props","ref","className","children","concept","error","errorText","errorTextId","label","selectId","name","mode","FormMode","testId","width","required","value","defaultValue","autoComplete","wrapperClassName","rest","uuid","useUuid","errorTextUuid","onBlueberry","iconColor","maxWidth","selectInnerWrapperClasses","classNames","selectStyles","selectClasses","selectWrapperClasses","ErrorWrapper","AnalyticsId","renderLabel","Icon","ChevronDown","IconSize","getAriaDescribedBy","Select$1"],"mappings":";;;;;;;;;;;AAkDA,MAAMA,IAAoB,CAACC,MAGlB,QAAQA,IAAaC,CAA0B,cAGlDC,IAAe,CAACC,GAAkBC,MAE/BA,IAAWC,EAAS,WAAW,GAAG,IAAIA,EAD3BF,IAAU,WAAW,aAC0B,GAAG,GAGzDG,IAASC,EAAM,WAAW,SAA4BC,GAAoBC,GAAmC;AAClH,QAAA;AAAA,IACJ,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,UAAAR;AAAA,IACA,OAAAS;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC,IAAOD;AAAA,IACP,MAAAE,IAAOC,EAAS;AAAA,IAChB,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,cAAAC,IAAe;AAAA,IACf,kBAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAApB,GAEEqB,IAAOC,EAAQb,CAAQ,GACvBc,IAAgBD,EAAQf,CAAW,GACnCiB,IAAcb,MAAS,eACvBhB,IAAUgB,MAAS,eAAe,CAAC,CAACL,KAAa,CAAC,CAACD,GACnDoB,IAAY/B,EAAaC,GAAS,CAAC,CAACC,CAAQ,GAC5C8B,IAAWZ,IAAQvB,EAAkBuB,CAAK,IAAI,QAE9Ca,IAA4BC;AAAA,IAChCC,EAAa,sBAAsB;AAAA,IACnC;AAAA,MACE,CAACA,EAAa,mCAAmC,CAAC,GAAGzB,MAAY;AAAA,MACjE,CAACyB,EAAa,oCAAoC,CAAC,GAAGL;AAAA,MACtD,CAACK,EAAa,+BAA+B,CAAC,GAAGlC;AAAA,MACjD,CAACkC,EAAa,gCAAgC,CAAC,GAAGjC;AAAA,IACpD;AAAA,IACAM;AAAA,EAAA,GAGI4B,IAAgBF,EAAWC,EAAa,QAAQ;AAAA,IACpD,CAACA,EAAa,sBAAsB,CAAC,GAAGL;AAAA,IACxC,CAACK,EAAa,iBAAiB,CAAC,GAAGlC;AAAA,EAAA,CACpC,GAEKoC,IAAuBH,EAAWC,EAAa,gBAAgB,GAAGV,CAAgB;AAExF,yCACGa,GAAa,EAAA,WAAA1B,GAAsB,aAAaiB,KAC/CxB,gBAAAA,EAAA,cAAC,SAAI,eAAac,GAAQ,oBAAkBoB,EAAY,QAAQ,WAAWF,GAAsB,OAAO,EAAE,UAAAL,EAAA,KACvGQ,EAAY1B,GAAOa,GAAMV,CAAgB,GACzCZ,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAW4B,EACd,GAAA5B,gBAAAA,EAAA,cAACoC,KAAK,WAAWN,EAAa,cAAc,GAAG,SAASO,GAAa,OAAOX,GAAW,MAAMY,EAAS,QAAQ,GAC9GtC,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,gBAAc,CAAC,CAACJ;AAAA,MAChB,IAAI0B;AAAA,MACJ,MAAAX;AAAA,MACA,WAAWoB;AAAA,MACX,UAAAlC;AAAA,MACA,KAAAK;AAAA,MACA,UAAAc;AAAA,MACA,oBAAkBuB,EAAmBtC,GAAOuB,CAAa;AAAA,MACzD,iBAAe,CAAC,CAACR;AAAA,MACjB,OAAAC;AAAA,MACA,cAAAC;AAAA,MACA,cAAcC,KAA8B;AAAA,MAC3C,GAAGE;AAAA,IAAA;AAAA,IAEHjB;AAAA,EAEL,CAAA,CACF,CACF;AAEJ,CAAC,GAEDoC,KAAezC;"}

package/components/ServiceMessage/ServiceMessage.stories.d.ts

@@ -19,7 +19,7 @@ declare const meta: {
         expanderOpenFromStart: true;
         urlTitle: string;
         url: string;
-        target: "_self";
+        target: "_parent";
         closeBtnText: string;
         variant: "alert";
         testId: string;

package/components/Textarea/Textarea.js

@@ -1,41 +1,42 @@
-import o, { useState as A, useRef as te, useEffect as N } from "react";
+import o, { useState as A, useRef as te, useEffect as B } from "react";
 import p from "classnames";
 import { FormMode as m, AnalyticsId as re, AVERAGE_CHARACTER_WIDTH_PX as ae } from "../../constants.js";
 import { useUuid as oe } from "../../hooks/useUuid.js";
-import { uuid as ne } from "../../utils/uuid.js";
-import ie from "../ErrorWrapper/ErrorWrapper.js";
-import { renderLabel as se } from "../Label/Label.js";
-import ce from "../MaxCharacters/MaxCharacters.js";
+import { getAriaDescribedBy as ne } from "../../utils/accessibility.js";
+import { uuid as ie } from "../../utils/uuid.js";
+import se from "../ErrorWrapper/ErrorWrapper.js";
+import { renderLabel as ce } from "../Label/Label.js";
+import de from "../MaxCharacters/MaxCharacters.js";
 import t from "../Textarea/styles.module.scss";
-const de = (a) => `calc(${a * ae}px + 2rem + 16px + 4px)`, $ = o.forwardRef((a, x) => {
+const le = (a) => `calc(${a * ae}px + 2rem + 16px + 4px)`, N = o.forwardRef((a, x) => {
   const {
     maxCharacters: n,
     maxText: h,
     width: f,
-    testId: B,
+    testId: $,
     defaultValue: s,
     marginBottom: M,
     transparent: k,
     mode: i = m.onwhite,
-    label: L,
-    textareaId: b = ne(),
+    label: D,
+    textareaId: b = ie(),
     minRows: g = 3,
     maxRows: c = 10,
     grow: w,
-    error: S,
+    error: L,
     errorText: C,
-    errorTextId: D,
+    errorTextId: S,
     autoFocus: F,
     disabled: U,
     name: V,
     autoComplete: T = "off",
-    placeholder: j,
-    readOnly: q,
-    required: z,
+    placeholder: q,
+    readOnly: z,
+    required: G,
     onChange: E,
-    ...G
-  } = a, [O, W] = A(g), [y, R] = A(s || ""), d = te(null), v = oe(D);
-  N(() => {
+    ...O
+  } = a, [P, W] = A(g), [y, R] = A(s || ""), d = te(null), v = oe(S);
+  B(() => {
     R(s || "");
   }, [s]);
   const _ = (e) => {
@@ -43,18 +44,18 @@ const de = (a) => `calc(${a * ae}px + 2rem + 16px + 4px)`, $ = o.forwardRef((a,
     e.rows = g;
     const r = Math.floor((e.scrollHeight - 16) / 28);
     r === l && (e.rows = r), r >= c && (e.rows = c, e.scrollTop = e.scrollHeight), r < c ? W(r) : W(c);
-  }, P = i === m.ondark, X = i === m.onblueberry, J = !!n && y.toString().length > n, H = i === m.oninvalid || !!C || !!S || J, K = p(t.textarea, {
+  }, X = i === m.ondark, j = i === m.onblueberry, J = !!n && y.toString().length > n, H = i === m.oninvalid || !!C || !!L || J, K = p(t.textarea, {
     [t["textarea--gutterBottom"]]: M
   }), Q = p(t["input-container"], {
     [t["input-container--transparent"]]: k,
-    [t["input-container--on-blueberry"]]: X,
-    [t["input-container--on-dark"]]: P,
+    [t["input-container--on-blueberry"]]: j,
+    [t["input-container--on-dark"]]: X,
     [t["input-container--invalid"]]: H,
     [t["input-container--disabled"]]: a.disabled
   }), Y = p(t["input-container__input"], {
     [t["input-container__input--disabled"]]: a.disabled
   });
-  N(() => {
+  B(() => {
     var e, u, l;
     if (w && ((e = d.current) != null && e.children) && ((u = d.current) != null && u.children[0])) {
       const r = (l = d.current) == null ? void 0 : l.children[0];
@@ -65,29 +66,29 @@ const de = (a) => `calc(${a * ae}px + 2rem + 16px + 4px)`, $ = o.forwardRef((a,
     w && _(e.target), R(e.target.value);
   }, ee = (e) => {
     E && E(e), Z(e);
-  }, I = f ? de(f) : void 0;
-  return /* @__PURE__ */ o.createElement(ie, { errorText: C, errorTextId: v }, /* @__PURE__ */ o.createElement("div", { "data-testid": B, "data-analyticsid": re.Textarea, className: K }, se(L, b, i), /* @__PURE__ */ o.createElement("div", { className: Q, ref: d, style: { maxWidth: I } }, /* @__PURE__ */ o.createElement(
+  }, I = f ? le(f) : void 0;
+  return /* @__PURE__ */ o.createElement(se, { errorText: C, errorTextId: v }, /* @__PURE__ */ o.createElement("div", { "data-testid": $, "data-analyticsid": re.Textarea, className: K }, ce(D, b, i), /* @__PURE__ */ o.createElement("div", { className: Q, ref: d, style: { maxWidth: I } }, /* @__PURE__ */ o.createElement(
     "textarea",
     {
-      rows: O,
+      rows: P,
       defaultValue: s,
       id: b,
       className: Y,
       ref: x,
-      "aria-describedby": [a["aria-describedby"] || "", v].join(" "),
+      "aria-describedby": ne(a, v),
       "aria-invalid": !!H,
       autoFocus: F,
       disabled: U,
       name: V,
       autoComplete: T || void 0,
-      placeholder: j,
-      readOnly: q,
-      required: z,
+      placeholder: q,
+      readOnly: z,
+      required: G,
       onChange: ee,
-      ...G
+      ...O
     }
   )), n && /* @__PURE__ */ o.createElement(
-    ce,
+    de,
     {
       maxCharacters: n,
       length: y.toString().length,
@@ -97,9 +98,9 @@ const de = (a) => `calc(${a * ae}px + 2rem + 16px + 4px)`, $ = o.forwardRef((a,
     }
   )));
 });
-$.displayName = "Textarea";
-const we = $;
+N.displayName = "Textarea";
+const Te = N;
 export {
-  we as default
+  Te as default
 };
 //# sourceMappingURL=Textarea.js.map

package/components/Textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormMode } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { renderLabel } from '../Label';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface TextareaProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLTextAreaElement>,\n    | 'aria-describedby'\n    | 'autoFocus'\n    | 'disabled'\n    | 'name'\n    | 'autoComplete'\n    | 'placeholder'\n    | 'readOnly'\n    | 'required'\n    | 'defaultValue'\n    | 'onChange'\n  > {\n  /** max character limit in textarea  */\n  maxCharacters?: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n  /** Width of textarea in characters (approximate) */\n  width?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** If true, the component will have a bottom margin. */\n  marginBottom?: boolean;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Changes the visuals of the textarea */\n  mode?: keyof typeof FormMode;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** id of the textarea */\n  textareaId?: string;\n  /** max rows */\n  maxRows?: number;\n  /** min rows */\n  minRows?: number;\n  /** auto-grows until maxRows */\n  grow?: boolean;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n}\n\nconst getTextareaMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n  const scrollbarWidth = '16px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${scrollbarWidth} + ${borderWidth})`;\n};\n\nconst Textarea = React.forwardRef((props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>) => {\n  const {\n    maxCharacters,\n    maxText,\n    width,\n    testId,\n    defaultValue,\n    marginBottom: gutterBottom,\n    transparent,\n    mode = FormMode.onwhite,\n    label,\n    textareaId = uuid(),\n    minRows = 3,\n    maxRows = 10,\n    grow,\n    error,\n    errorText,\n    errorTextId,\n    autoFocus,\n    disabled,\n    name,\n    autoComplete = 'off',\n    placeholder,\n    readOnly,\n    required,\n    onChange,\n    ...rest\n  } = props;\n\n  const [rows, setRows] = useState(minRows);\n  const [textareaInput, setTextareaInput] = useState(defaultValue || '');\n  const referanse = useRef<HTMLDivElement>(null);\n  const errorTextUuid = useUuid(errorTextId);\n\n  useEffect(() => {\n    setTextareaInput(defaultValue || '');\n  }, [defaultValue]);\n\n  const resizeHeight = (target: HTMLTextAreaElement): void => {\n    const textareaLineHeight = 28;\n\n    const previousRows = target.rows;\n    target.rows = minRows; // reset number of rows in textarea\n\n    const currentRows = Math.floor((target.scrollHeight - 16) / textareaLineHeight); // scrollHeight - 16px of padding to calculate the rows\n\n    if (currentRows === previousRows) {\n      target.rows = currentRows;\n    }\n\n    if (currentRows >= maxRows) {\n      target.rows = maxRows;\n      target.scrollTop = target.scrollHeight;\n    }\n\n    if (currentRows < maxRows) {\n      setRows(currentRows);\n    } else {\n      setRows(maxRows);\n    }\n  };\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && textareaInput.toString().length > maxCharacters;\n  const onError = mode === FormMode.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n\n  const textareaWrapperClass = cn(styles.textarea, {\n    [styles['textarea--gutterBottom']]: gutterBottom,\n  });\n\n  const contentWrapperClass = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: transparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--disabled']]: props.disabled,\n  });\n\n  const textareaClass = cn(styles['input-container__input'], {\n    [styles[`input-container__input--disabled`]]: props.disabled,\n  });\n\n  useEffect(() => {\n    if (grow && referanse.current?.children && referanse.current?.children[0]) {\n      const textarea = referanse.current?.children[0] as HTMLTextAreaElement;\n      resizeHeight(textarea);\n    }\n  }, []);\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (grow) {\n      resizeHeight(e.target);\n    }\n    setTextareaInput(e.target.value);\n  };\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (onChange) {\n      onChange(e);\n    }\n    handleChange(e);\n  };\n\n  const maxWidth = width ? getTextareaMaxWidth(width) : undefined;\n\n  return (\n    <ErrorWrapper errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Textarea} className={textareaWrapperClass}>\n        {renderLabel(label, textareaId, mode as FormMode)}\n        <div className={contentWrapperClass} ref={referanse} style={{ maxWidth }}>\n          <textarea\n            rows={rows}\n            defaultValue={defaultValue}\n            id={textareaId}\n            className={textareaClass}\n            ref={ref}\n            aria-describedby={[props['aria-describedby'] || '', errorTextUuid].join(' ')}\n            aria-invalid={!!onError}\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus={autoFocus}\n            disabled={disabled}\n            name={name}\n            autoComplete={autoComplete ? autoComplete : undefined}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            required={required}\n            onChange={onChangeHandler}\n            {...rest}\n          />\n        </div>\n        {maxCharacters && (\n          <MaxCharacters\n            maxCharacters={maxCharacters}\n            length={textareaInput.toString().length}\n            maxText={maxText}\n            mode={mode}\n            maxWidth={maxWidth}\n          />\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nTextarea.displayName = 'Textarea';\n\nexport default Textarea;\n"],"names":["getTextareaMaxWidth","characters","AVERAGE_CHARACTER_WIDTH_PX","Textarea","React","props","ref","maxCharacters","maxText","width","testId","defaultValue","gutterBottom","transparent","mode","FormMode","label","textareaId","uuid","minRows","maxRows","grow","error","errorText","errorTextId","autoFocus","disabled","name","autoComplete","placeholder","readOnly","required","onChange","rest","rows","setRows","useState","textareaInput","setTextareaInput","referanse","useRef","errorTextUuid","useUuid","useEffect","resizeHeight","target","previousRows","currentRows","onDark","onBlueberry","maxCharactersExceeded","onError","textareaWrapperClass","cn","styles","contentWrapperClass","textareaClass","_a","_b","textarea","_c","handleChange","onChangeHandler","maxWidth","ErrorWrapper","AnalyticsId","renderLabel","MaxCharacters","Textarea$1"],"mappings":"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"}
+{"version":3,"file":"Textarea.js","sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormMode } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { renderLabel } from '../Label';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface TextareaProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLTextAreaElement>,\n    | 'aria-describedby'\n    | 'autoFocus'\n    | 'disabled'\n    | 'name'\n    | 'autoComplete'\n    | 'placeholder'\n    | 'readOnly'\n    | 'required'\n    | 'defaultValue'\n    | 'onChange'\n  > {\n  /** max character limit in textarea  */\n  maxCharacters?: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n  /** Width of textarea in characters (approximate) */\n  width?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** If true, the component will have a bottom margin. */\n  marginBottom?: boolean;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Changes the visuals of the textarea */\n  mode?: keyof typeof FormMode;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** id of the textarea */\n  textareaId?: string;\n  /** max rows */\n  maxRows?: number;\n  /** min rows */\n  minRows?: number;\n  /** auto-grows until maxRows */\n  grow?: boolean;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n}\n\nconst getTextareaMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n  const scrollbarWidth = '16px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${scrollbarWidth} + ${borderWidth})`;\n};\n\nconst Textarea = React.forwardRef((props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>) => {\n  const {\n    maxCharacters,\n    maxText,\n    width,\n    testId,\n    defaultValue,\n    marginBottom: gutterBottom,\n    transparent,\n    mode = FormMode.onwhite,\n    label,\n    textareaId = uuid(),\n    minRows = 3,\n    maxRows = 10,\n    grow,\n    error,\n    errorText,\n    errorTextId,\n    autoFocus,\n    disabled,\n    name,\n    autoComplete = 'off',\n    placeholder,\n    readOnly,\n    required,\n    onChange,\n    ...rest\n  } = props;\n\n  const [rows, setRows] = useState(minRows);\n  const [textareaInput, setTextareaInput] = useState(defaultValue || '');\n  const referanse = useRef<HTMLDivElement>(null);\n  const errorTextUuid = useUuid(errorTextId);\n\n  useEffect(() => {\n    setTextareaInput(defaultValue || '');\n  }, [defaultValue]);\n\n  const resizeHeight = (target: HTMLTextAreaElement): void => {\n    const textareaLineHeight = 28;\n\n    const previousRows = target.rows;\n    target.rows = minRows; // reset number of rows in textarea\n\n    const currentRows = Math.floor((target.scrollHeight - 16) / textareaLineHeight); // scrollHeight - 16px of padding to calculate the rows\n\n    if (currentRows === previousRows) {\n      target.rows = currentRows;\n    }\n\n    if (currentRows >= maxRows) {\n      target.rows = maxRows;\n      target.scrollTop = target.scrollHeight;\n    }\n\n    if (currentRows < maxRows) {\n      setRows(currentRows);\n    } else {\n      setRows(maxRows);\n    }\n  };\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && textareaInput.toString().length > maxCharacters;\n  const onError = mode === FormMode.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n\n  const textareaWrapperClass = cn(styles.textarea, {\n    [styles['textarea--gutterBottom']]: gutterBottom,\n  });\n\n  const contentWrapperClass = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: transparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--disabled']]: props.disabled,\n  });\n\n  const textareaClass = cn(styles['input-container__input'], {\n    [styles[`input-container__input--disabled`]]: props.disabled,\n  });\n\n  useEffect(() => {\n    if (grow && referanse.current?.children && referanse.current?.children[0]) {\n      const textarea = referanse.current?.children[0] as HTMLTextAreaElement;\n      resizeHeight(textarea);\n    }\n  }, []);\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (grow) {\n      resizeHeight(e.target);\n    }\n    setTextareaInput(e.target.value);\n  };\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (onChange) {\n      onChange(e);\n    }\n    handleChange(e);\n  };\n\n  const maxWidth = width ? getTextareaMaxWidth(width) : undefined;\n\n  return (\n    <ErrorWrapper errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Textarea} className={textareaWrapperClass}>\n        {renderLabel(label, textareaId, mode as FormMode)}\n        <div className={contentWrapperClass} ref={referanse} style={{ maxWidth }}>\n          <textarea\n            rows={rows}\n            defaultValue={defaultValue}\n            id={textareaId}\n            className={textareaClass}\n            ref={ref}\n            aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n            aria-invalid={!!onError}\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus={autoFocus}\n            disabled={disabled}\n            name={name}\n            autoComplete={autoComplete ? autoComplete : undefined}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            required={required}\n            onChange={onChangeHandler}\n            {...rest}\n          />\n        </div>\n        {maxCharacters && (\n          <MaxCharacters\n            maxCharacters={maxCharacters}\n            length={textareaInput.toString().length}\n            maxText={maxText}\n            mode={mode}\n            maxWidth={maxWidth}\n          />\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nTextarea.displayName = 'Textarea';\n\nexport default Textarea;\n"],"names":["getTextareaMaxWidth","characters","AVERAGE_CHARACTER_WIDTH_PX","Textarea","React","props","ref","maxCharacters","maxText","width","testId","defaultValue","gutterBottom","transparent","mode","FormMode","label","textareaId","uuid","minRows","maxRows","grow","error","errorText","errorTextId","autoFocus","disabled","name","autoComplete","placeholder","readOnly","required","onChange","rest","rows","setRows","useState","textareaInput","setTextareaInput","referanse","useRef","errorTextUuid","useUuid","useEffect","resizeHeight","target","previousRows","currentRows","onDark","onBlueberry","maxCharactersExceeded","onError","textareaWrapperClass","cn","styles","contentWrapperClass","textareaClass","_a","_b","textarea","_c","handleChange","onChangeHandler","maxWidth","ErrorWrapper","AnalyticsId","renderLabel","getAriaDescribedBy","MaxCharacters","Textarea$1"],"mappings":"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"}

package/package.json

@@ -7,7 +7,7 @@
     "url": "git+https://github.com/helsenorge/designsystem.git"
   },
   "homepage": "https://helsenorge.design",
-  "version": "7.3.0",
+  "version": "7.4.0",
   "author": "Helsenorge",
   "license": "MIT",
   "peerDependencies": {

package/scss/supernova/index.css

@@ -0,0 +1,3 @@
+/* This file was generated by Supernova and should not be changed manually */
+@import "./colors.css";
+@import "./typography.css";

package/scss/supernova/styles/colors.css

@@ -0,0 +1,173 @@
+/* stylelint-disable color-hex-length */
+
+/* This file was generated by Supernova and should not be changed manually */
+:root {
+  --core-color-black: #000000;
+  --core-color-white: #ffffff;
+  --core-color-blueberry-50: #e4f7f9;
+  --core-color-neutral-500: #989693;
+  --core-color-neutral-700: #62625f;
+  --color-action-text-ondark: #ffffff;
+
+  /* Hoverfarge for bakgrunn på interaktive elementer - onLight */
+  --color-action-background-transparent-onlight-hover: #126f8721;
+
+  /* Hoverfarge for bakgrunn på interaktive elementer - onLight selected */
+  --color-action-background-transparent-onlight-hoverselected: #126f872b;
+  --color-notification-background-info: #e4f7f9;
+  --color-notification-background-error: #fff2ea;
+  --color-destructive-graphics-normal: #c83521;
+  --color-base-text-onlight: #000000;
+  --color-action-background-ondark: #ffffff;
+  --color-action-border-ondark: #ffffff;
+  --color-action-border-ondark-focus: #ffffff;
+  --color-action-graphics-ondark: #ffffff;
+  --color-base-text-ondark: #ffffff;
+  --color-base-background-neutral: #f5f3f3;
+  --color-base-background-white: #ffffff;
+  --color-base-graphics-ondark: #ffffff;
+  --color-disabled-text-ondark: #ffffff;
+  --color-action-border-onlight: #188097;
+  --color-action-border-onlight-hover: #08667c;
+  --color-action-border-onlight-focus: #000000;
+  --color-action-text-onlight: #126f87;
+  --color-action-text-onlight-hover: #08667c;
+  --color-action-graphics-onlight: #188097;
+  --color-action-graphics-onlight-hover: #126f87;
+  --color-action-graphics-ondark-hover: #e4f7f9;
+  --color-action-background-ondark-hover: #e4f7f9;
+  --color-action-background-ondark-selected: #cae7ed;
+  --color-action-background-ondark-hoverselected: #afdae3;
+  --color-action-background-onlight: #188097;
+  --color-action-background-onlight-hover: #08667c;
+  --color-notification-background-warning: #fdf8df;
+  --color-notification-background-success: #e6f8ee;
+  --color-notification-border-info: #08667c;
+  --color-notification-border-error: #a31f0e;
+  --color-notification-border-warning: #ab7c00;
+  --color-notification-border-success: #078141;
+  --color-notification-graphics-info: #08667c;
+  --color-notification-graphics-error: #a31f0e;
+  --color-notification-graphics-warning: #ab7c00;
+  --color-notification-graphics-success: #078141;
+  --color-notification-status-warning: #ebc840;
+  --color-notification-status-success: #099150;
+  --color-destructive-graphics-hover: #b62e1c;
+  --color-destructive-text-normal: #b62e1c;
+  --color-destructive-text-hover: #a31f0e;
+  --color-disabled-background: #d6d4d3;
+  --color-disabled-text: #62625f;
+  --color-disabled-border: #7d7c79;
+  --color-disabled-graphics: #62625f;
+  --color-disabled-border-ondark: #d6d4d3;
+  --color-disabled-graphics-ondark: #d6d4d3;
+  --color-base-background-blueberry: #e4f7f9;
+  --color-base-background-cherry: #fff2ea;
+  --color-base-background-dark-blueberry: #188097;
+  --color-base-background-dark-cherry: #c83521;
+  --color-base-graphics-onlight: #000000;
+  --color-base-border-ondark: #d6d4d3;
+  --color-base-border-onlight: #989693;
+  --color-base-border-onlight-emphasized: #62625f;
+  --color-help-background: #efe4fd;
+  --color-help-graphics: #5b22a6;
+  --color-help-border: #5b22a6;
+  --core-color-blueberry-100: #cae7ed;
+  --core-color-blueberry-200: #afdae3;
+  --core-color-blueberry-300: #7abecc;
+  --core-color-blueberry-400: #58aabb;
+  --core-color-blueberry-500: #188097;
+  --core-color-blueberry-600: #126f87;
+  --core-color-blueberry-700: #08667c;
+  --core-color-blueberry-800: #06596c;
+  --core-color-blueberry-900: #084350;
+  --core-color-neutral-50: #f5f3f3;
+  --core-color-neutral-100: #eae7e7;
+  --core-color-neutral-200: #d6d4d3;
+  --core-color-neutral-300: #bdbab9;
+  --core-color-neutral-400: #aaa8a6;
+  --core-color-neutral-600: #7d7c79;
+  --core-color-neutral-800: #474745;
+  --core-color-neutral-900: #2b2c2b;
+  --core-color-banana-50: #fdf8df;
+  --core-color-banana-100: #fcf2bf;
+  --core-color-banana-200: #f9ea9f;
+  --core-color-banana-300: #f5e080;
+  --core-color-banana-400: #ebc840;
+  --core-color-banana-500: #ddab06;
+  --core-color-banana-600: #c59302;
+  --core-color-banana-700: #ab7c00;
+  --core-color-banana-800: #916500;
+  --core-color-banana-900: #764f00;
+  --core-color-cherry-50: #fff2ea;
+  --core-color-cherry-100: #f7e1d2;
+  --core-color-cherry-200: #eec0a5;
+  --core-color-cherry-300: #e39376;
+  --core-color-cherry-400: #d56147;
+  --core-color-cherry-500: #c83521;
+  --core-color-cherry-600: #b62e1c;
+  --core-color-cherry-700: #a31f0e;
+  --core-color-cherry-800: #912112;
+  --core-color-cherry-900: #7e1c0e;
+  --core-color-kiwi-50: #e6f8ee;
+  --core-color-kiwi-100: #c2edd6;
+  --core-color-kiwi-200: #9de2bf;
+  --core-color-kiwi-300: #79d6aa;
+  --core-color-kiwi-400: #56ca96;
+  --core-color-kiwi-500: #33be84;
+  --core-color-kiwi-600: #10b172;
+  --core-color-kiwi-700: #0ca161;
+  --core-color-kiwi-800: #099150;
+  --core-color-kiwi-900: #078141;
+  --core-color-plum-50: #efe4fd;
+  --core-color-plum-100: #d7bdf9;
+  --core-color-plum-200: #bf98f3;
+  --core-color-plum-300: #a875eb;
+  --core-color-plum-400: #9153e2;
+  --core-color-plum-500: #7a33d7;
+  --core-color-plum-600: #6a2abf;
+  --core-color-plum-700: #5b22a6;
+  --core-color-plum-800: #4c1b8c;
+  --core-color-plum-900: #3c1471;
+  --color-destructive-background-emphasized: #f7e1d2;
+  --color-destructive-background-normal: #fff2ea;
+  --brandcolor-white: #ffffff;
+  --brandcolor-black: #000000;
+  --brandcolor-neutral-verylight: #f5f3f3;
+  --brandcolor-neutral-light: #eae7e7;
+  --brandcolor-neutral-mediumlight: #d6d4d3;
+  --brandcolor-neutral-medium: #989693;
+  --brandcolor-neutral-dark: #62625f;
+  --brandcolor-neutral-verydark: #2b2c2b;
+  --brandcolor-blueberry-verylight: #e4f7f9;
+  --brandcolor-blueberry-light: #cae7ed;
+  --brandcolor-blueberry-mediumlight: #afdae3;
+  --brandcolor-blueberry-medium: #188097;
+  --brandcolor-blueberry-mediumdark: #126f87;
+  --brandcolor-blueberry-dark: #08667c;
+  --brandcolor-cherry-verylight: #fff2ea;
+  --brandcolor-cherry-light: #f7e1d2;
+  --brandcolor-cherry-medium: #c83521;
+  --brandcolor-cherry-mediumdark: #b62e1c;
+  --brandcolor-cherry-dark: #a31f0e;
+  --color-notification-status-info: #188097;
+  --color-notification-status-error: #c83521;
+  --color-destructive-border-normal: #c83521;
+  --color-action-border-ondark-hover: #e4f7f9;
+
+  /* Hoverfarge for bakgrunn på interaktive elementer - onDark */
+  --color-action-background-transparent-ondark-hover: #00000026;
+
+  /* Hoverfarge for bakgrunn på interaktive elementer - onDark selected */
+  --color-action-background-transparent-ondark-hoverselected: #00000040;
+  --color-base-background-dark-neutral: #2b2c2b;
+
+  /* Placeholdertext in input- and textarea-controls */
+  --color-placeholder-text-onlight: #62625f;
+  --color-base-border-onlight-subtle: #d6d4d3;
+  --color-base-border-neutral: #d6d4d3;
+
+  /* Subtle border for Blueberry 50 background */
+  --color-base-border-blueberry: #afdae3;
+  --color-base-border-cherry: #eec0a5;
+}

package/utils/accessibility.d.ts

@@ -6,4 +6,16 @@ interface AriaLabelAttributesConfig {
 }
 export type AriaLabelAttributes = Pick<AriaAttributes, 'aria-label' | 'aria-labelledby'>;
 export declare const getAriaLabelAttributes: (config: AriaLabelAttributesConfig) => AriaLabelAttributes | undefined;
+export interface ErrorAriaProps {
+    'aria-describedby'?: string;
+    errorText?: string;
+    errorTextId?: string;
+}
+/**
+ * Get IDs to be used with aria-describedby in form components like <Input />
+ * @param props Props from form component
+ * @param errorTextUuid Unique ID of the form component's error text
+ * @returns Element IDs or undefined if there is no aria-description
+ */
+export declare const getAriaDescribedBy: (props: ErrorAriaProps, errorTextUuid?: string) => string | undefined;
 export {};

package/utils/accessibility.js

@@ -1,19 +1,28 @@
-const l = (a) => {
-  const { label: r, id: e, prefer: i = "id" } = a;
-  if (e && i === "id")
+const l = (e) => {
+  const { label: i, id: r, prefer: a = "id" } = e;
+  if (r && a === "id")
     return {
-      "aria-labelledby": e
+      "aria-labelledby": r
     };
-  if (r)
+  if (i)
     return {
-      "aria-label": r
+      "aria-label": i
     };
-  if (e)
+  if (r)
     return {
-      "aria-labelledby": e
+      "aria-labelledby": r
     };
+}, b = (e, i) => {
+  const r = e["aria-describedby"], t = !!(e.errorText || e.errorTextId) ? i : void 0;
+  if (r && !t)
+    return r;
+  if (!r && t)
+    return t;
+  if (r && t)
+    return r + " " + t;
 };
 export {
+  b as getAriaDescribedBy,
   l as getAriaLabelAttributes
 };
 //# sourceMappingURL=accessibility.js.map

package/utils/accessibility.js.map

@@ -1 +1 @@
-{"version":3,"file":"accessibility.js","sources":["../../src/utils/accessibility.ts"],"sourcesContent":["import { AriaAttributes } from 'react';\n\ninterface AriaLabelAttributesConfig {\n  label?: string;\n  id?: string;\n  prefer?: 'id' | 'label';\n}\n\nexport type AriaLabelAttributes = Pick<AriaAttributes, 'aria-label' | 'aria-labelledby'>;\n\nexport const getAriaLabelAttributes = (config: AriaLabelAttributesConfig): AriaLabelAttributes | undefined => {\n  const { label, id, prefer = 'id' } = config;\n\n  if (id && prefer === 'id') {\n    return {\n      'aria-labelledby': id,\n    };\n  }\n\n  if (label) {\n    return {\n      'aria-label': label,\n    };\n  }\n\n  if (id) {\n    return {\n      'aria-labelledby': id,\n    };\n  }\n};\n"],"names":["getAriaLabelAttributes","config","label","id","prefer"],"mappings":"AAUa,MAAAA,IAAyB,CAACC,MAAuE;AAC5G,QAAM,EAAE,OAAAC,GAAO,IAAAC,GAAI,QAAAC,IAAS,SAASH;AAEjC,MAAAE,KAAMC,MAAW;AACZ,WAAA;AAAA,MACL,mBAAmBD;AAAA,IAAA;AAIvB,MAAID;AACK,WAAA;AAAA,MACL,cAAcA;AAAA,IAAA;AAIlB,MAAIC;AACK,WAAA;AAAA,MACL,mBAAmBA;AAAA,IAAA;AAGzB;"}
+{"version":3,"file":"accessibility.js","sources":["../../src/utils/accessibility.ts"],"sourcesContent":["import { AriaAttributes } from 'react';\n\ninterface AriaLabelAttributesConfig {\n  label?: string;\n  id?: string;\n  prefer?: 'id' | 'label';\n}\n\nexport type AriaLabelAttributes = Pick<AriaAttributes, 'aria-label' | 'aria-labelledby'>;\n\nexport const getAriaLabelAttributes = (config: AriaLabelAttributesConfig): AriaLabelAttributes | undefined => {\n  const { label, id, prefer = 'id' } = config;\n\n  if (id && prefer === 'id') {\n    return {\n      'aria-labelledby': id,\n    };\n  }\n\n  if (label) {\n    return {\n      'aria-label': label,\n    };\n  }\n\n  if (id) {\n    return {\n      'aria-labelledby': id,\n    };\n  }\n};\n\nexport interface ErrorAriaProps {\n  'aria-describedby'?: string;\n  errorText?: string;\n  errorTextId?: string;\n}\n\n/**\n * Get IDs to be used with aria-describedby in form components like <Input />\n * @param props Props from form component\n * @param errorTextUuid Unique ID of the form component's error text\n * @returns Element IDs or undefined if there is no aria-description\n */\nexport const getAriaDescribedBy = (props: ErrorAriaProps, errorTextUuid?: string): string | undefined => {\n  const ariaDescribedBy: string | undefined = props['aria-describedby'];\n  const hasErrorText: boolean = !!(props.errorText || props.errorTextId);\n  const errorTextId: string | undefined = hasErrorText ? errorTextUuid : undefined;\n\n  if (ariaDescribedBy && !errorTextId) {\n    return ariaDescribedBy;\n  } else if (!ariaDescribedBy && errorTextId) {\n    return errorTextId;\n  } else if (ariaDescribedBy && errorTextId) {\n    return ariaDescribedBy + ' ' + errorTextId;\n  }\n};\n"],"names":["getAriaLabelAttributes","config","label","id","prefer","getAriaDescribedBy","props","errorTextUuid","ariaDescribedBy","errorTextId"],"mappings":"AAUa,MAAAA,IAAyB,CAACC,MAAuE;AAC5G,QAAM,EAAE,OAAAC,GAAO,IAAAC,GAAI,QAAAC,IAAS,SAASH;AAEjC,MAAAE,KAAMC,MAAW;AACZ,WAAA;AAAA,MACL,mBAAmBD;AAAA,IAAA;AAIvB,MAAID;AACK,WAAA;AAAA,MACL,cAAcA;AAAA,IAAA;AAIlB,MAAIC;AACK,WAAA;AAAA,MACL,mBAAmBA;AAAA,IAAA;AAGzB,GAcaE,IAAqB,CAACC,GAAuBC,MAA+C;AACjG,QAAAC,IAAsCF,EAAM,kBAAkB,GAE9DG,IADwB,CAAC,EAAEH,EAAM,aAAaA,EAAM,eACHC,IAAgB;AAEnE,MAAAC,KAAmB,CAACC;AACf,WAAAD;AACT,MAAW,CAACA,KAAmBC;AACtB,WAAAA;AACT,MAAWD,KAAmBC;AAC5B,WAAOD,IAAkB,MAAMC;AAEnC;"}