@helsenorge/designsystem-react 12.11.1 → 12.12.0

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [12.12.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv12.11.1&targetVersion=GTv12.12.0) (2025-11-11)
+
+### Features
+
+- **formfieldtag:** legg til flere muligheter
+  ([fa2260f](https://github.com/helsenorge/designsystem/commit/fa2260fb79fd594015fe9a2217a60904d5f91dc2)), closes
+  [#363797](https://github.com/helsenorge/designsystem/issues/363797)
+
+### Bug Fixes
+
+- unngå at ting flytter seg pga focus border
+  ([ecb515f](https://github.com/helsenorge/designsystem/commit/ecb515fa4d32c0e38453201cc2817466a6170e1c))
+- **radiobutton:** legg på manglende sjekk på størrelse
+  ([b451032](https://github.com/helsenorge/designsystem/commit/b4510324a7d6a2e3722d55f82a4a8ee83ba0a297))
+
 ## [12.11.1](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv12.11.0&targetVersion=GTv12.11.1) (2025-11-04)
 
 ### Bug Fixes

package/FormFieldTag.js

@@ -6,10 +6,18 @@ import styles from "./components/FormFieldTag/styles.module.scss";
 const allRequired = "Alle felt må fylles ut";
 const requiredField = "Må fylles ut";
 const optional = "Valgfritt";
+const allOptional = "Alle felt er valgfrie";
+const requiredRadiobuttonList = "Velg én";
+const requiredCheckboxList = "Velg en eller flere";
+const requiredSingleCheckbox = "Må velges";
 const nbNO = {
   allRequired,
   requiredField,
-  optional
+  optional,
+  allOptional,
+  requiredRadiobuttonList,
+  requiredCheckboxList,
+  requiredSingleCheckbox
 };
 const getResources = (language) => {
   switch (language) {
@@ -20,6 +28,7 @@ const getResources = (language) => {
 };
 const FormFieldTag = (props) => {
   const { id, level, resources, testId } = props;
+  const isOptional = level === "optional" || level === "all-optional";
   const { language } = useLanguage(LanguageLocales.NORWEGIAN);
   const defaultResources = getResources(language);
   const mergedResources = {
@@ -29,7 +38,11 @@ const FormFieldTag = (props) => {
   const textMap = {
     "all-required": mergedResources.allRequired,
     "required-field": mergedResources.requiredField,
-    optional: mergedResources.optional
+    optional: mergedResources.optional,
+    "all-optional": mergedResources.allOptional,
+    "required-radiobutton-list": mergedResources.requiredRadiobuttonList,
+    "required-checkbox-list": mergedResources.requiredCheckboxList,
+    "required-single-checkbox": mergedResources.requiredSingleCheckbox
   };
   return /* @__PURE__ */ jsx(
     "span",
@@ -37,7 +50,7 @@ const FormFieldTag = (props) => {
       id,
       "data-testid": testId,
       "data-analyticsid": AnalyticsId.FormFieldTag,
-      className: classNames(styles["form-field-tag"], { [styles["form-field-tag--optional"]]: level === "optional" }),
+      className: classNames(styles["form-field-tag"], { [styles["form-field-tag--optional"]]: isOptional }),
       children: textMap[level]
     }
   );

package/FormFieldTag.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldTag.js","sources":["../src/components/FormFieldTag/resourceHelper.ts","../src/components/FormFieldTag/FormFieldTag.tsx"],"sourcesContent":["import { LanguageLocales } from '../../constants';\nimport nbNO from '../../resources/HN.Designsystem.FormFieldTag.nb-NO.json';\nimport { HNDesignsystemFormFieldTag } from '../../resources/Resources';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemFormFieldTag => {\n  switch (language) {\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { HNDesignsystemFormFieldTag } from '../../resources/Resources';\nimport { useLanguage } from '../../utils/language';\n\nimport styles from './styles.module.scss';\n\nexport type FormFieldTagLevel = 'all-required' | 'required-field' | 'optional';\n\nexport interface FormFieldTagProps {\n  /** Id that is placed on the component */\n  id?: string;\n  /** What level is the required tag, sets the styling and the text. */\n  level: FormFieldTagLevel;\n  /** Texts if overriding SOT */\n  resources?: HNDesignsystemFormFieldTag;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst FormFieldTag: React.FC<FormFieldTagProps> = props => {\n  const { id, level, resources, testId } = props;\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemFormFieldTag = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const textMap = {\n    'all-required': mergedResources.allRequired,\n    'required-field': mergedResources.requiredField,\n    optional: mergedResources.optional,\n  };\n\n  return (\n    <span\n      id={id}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.FormFieldTag}\n      className={classNames(styles['form-field-tag'], { [styles['form-field-tag--optional']]: level === 'optional' })}\n    >\n      {textMap[level]}\n    </span>\n  );\n};\n\nexport default FormFieldTag;\n"],"names":[],"mappings":";;;;;;;;;;;;;AAIO,MAAM,eAAe,CAAC,aAA0D;AACrF,UAAQ,UAAA;AAAA,IACN,KAAK,gBAAgB;AAAA,IACrB;AACE,aAAO;AAAA,EAAA;AAEb;ACcA,MAAM,eAA4C,CAAA,UAAS;AACzD,QAAM,EAAE,IAAI,OAAO,WAAW,WAAW;AAEzC,QAAM,EAAE,SAAA,IAAa,YAA6B,gBAAgB,SAAS;AAC3E,QAAM,mBAAmB,aAAa,QAAQ;AAE9C,QAAM,kBAA8C;AAAA,IAClD,GAAG;AAAA,IACH,GAAG;AAAA,EAAA;AAGL,QAAM,UAAU;AAAA,IACd,gBAAgB,gBAAgB;AAAA,IAChC,kBAAkB,gBAAgB;AAAA,IAClC,UAAU,gBAAgB;AAAA,EAAA;AAG5B,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,eAAa;AAAA,MACb,oBAAkB,YAAY;AAAA,MAC9B,WAAW,WAAW,OAAO,gBAAgB,GAAG,EAAE,CAAC,OAAO,0BAA0B,CAAC,GAAG,UAAU,YAAY;AAAA,MAE7G,kBAAQ,KAAK;AAAA,IAAA;AAAA,EAAA;AAGpB;"}
+{"version":3,"file":"FormFieldTag.js","sources":["../src/components/FormFieldTag/resourceHelper.ts","../src/components/FormFieldTag/FormFieldTag.tsx"],"sourcesContent":["import { LanguageLocales } from '../../constants';\nimport nbNO from '../../resources/HN.Designsystem.FormFieldTag.nb-NO.json';\nimport { HNDesignsystemFormFieldTag } from '../../resources/Resources';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemFormFieldTag => {\n  switch (language) {\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { HNDesignsystemFormFieldTag } from '../../resources/Resources';\nimport { useLanguage } from '../../utils/language';\n\nimport styles from './styles.module.scss';\n\nexport type FormFieldTagLevel =\n  | 'all-required'\n  | 'required-field'\n  | 'optional'\n  | 'all-optional'\n  | 'required-radiobutton-list'\n  | 'required-checkbox-list'\n  | 'required-single-checkbox';\n\nexport interface FormFieldTagProps {\n  /** Id that is placed on the component */\n  id?: string;\n  /** What level is the required tag, sets the styling and the text. */\n  level: FormFieldTagLevel;\n  /** Texts if overriding SOT */\n  resources?: HNDesignsystemFormFieldTag;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst FormFieldTag: React.FC<FormFieldTagProps> = props => {\n  const { id, level, resources, testId } = props;\n  const isOptional = level === 'optional' || level === 'all-optional';\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemFormFieldTag = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const textMap = {\n    'all-required': mergedResources.allRequired,\n    'required-field': mergedResources.requiredField,\n    optional: mergedResources.optional,\n    'all-optional': mergedResources.allOptional,\n    'required-radiobutton-list': mergedResources.requiredRadiobuttonList,\n    'required-checkbox-list': mergedResources.requiredCheckboxList,\n    'required-single-checkbox': mergedResources.requiredSingleCheckbox,\n  };\n\n  return (\n    <span\n      id={id}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.FormFieldTag}\n      className={classNames(styles['form-field-tag'], { [styles['form-field-tag--optional']]: isOptional })}\n    >\n      {textMap[level]}\n    </span>\n  );\n};\n\nexport default FormFieldTag;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAIO,MAAM,eAAe,CAAC,aAA0D;AACrF,UAAQ,UAAA;AAAA,IACN,KAAK,gBAAgB;AAAA,IACrB;AACE,aAAO;AAAA,EAAA;AAEb;ACqBA,MAAM,eAA4C,CAAA,UAAS;AACzD,QAAM,EAAE,IAAI,OAAO,WAAW,WAAW;AACzC,QAAM,aAAa,UAAU,cAAc,UAAU;AAErD,QAAM,EAAE,SAAA,IAAa,YAA6B,gBAAgB,SAAS;AAC3E,QAAM,mBAAmB,aAAa,QAAQ;AAE9C,QAAM,kBAA8C;AAAA,IAClD,GAAG;AAAA,IACH,GAAG;AAAA,EAAA;AAGL,QAAM,UAAU;AAAA,IACd,gBAAgB,gBAAgB;AAAA,IAChC,kBAAkB,gBAAgB;AAAA,IAClC,UAAU,gBAAgB;AAAA,IAC1B,gBAAgB,gBAAgB;AAAA,IAChC,6BAA6B,gBAAgB;AAAA,IAC7C,0BAA0B,gBAAgB;AAAA,IAC1C,4BAA4B,gBAAgB;AAAA,EAAA;AAG9C,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,eAAa;AAAA,MACb,oBAAkB,YAAY;AAAA,MAC9B,WAAW,WAAW,OAAO,gBAAgB,GAAG,EAAE,CAAC,OAAO,0BAA0B,CAAC,GAAG,YAAY;AAAA,MAEnG,kBAAQ,KAAK;AAAA,IAAA;AAAA,EAAA;AAGpB;"}

package/RadioButton.js

@@ -64,7 +64,7 @@ const RadioButton = React__default.forwardRef((props, ref) => {
       [radioButtonStyles["radio-button-label--on-dark"]]: onDark,
       [radioButtonStyles["radio-button-label--invalid"]]: invalid,
       [radioButtonStyles["radio-button-label__large"]]: isLarge,
-      [radioButtonStyles["radio-button-label__large--focused"]]: isFocused,
+      [radioButtonStyles["radio-button-label__large--focused"]]: isFocused && isLarge,
       [radioButtonStyles["radio-button-label__large--disabled"]]: isLarge && disabled
     },
     labelClassNames

package/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","sources":["../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport interface RadioButtonProps\n  extends ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'defaultChecked' | 'required' | 'onChange'\n    > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** Adds custom classes to the label element. */\n  labelClassNames?: string;\n  /** input id of the radioButton */\n  inputId?: string;\n  /** Changes the visuals of the radioButton */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the radioButton. Large version only works when used inside a FormGroup wrapper. */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the radioButton - 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}\n\nexport const getRadioLabelClasses = (\n  radioId: string,\n  onColor: FormOnColor,\n  large: boolean,\n  checkedRadioId?: string\n): string | undefined => {\n  const onCherry = onColor === 'oninvalid';\n  const checked = radioId === checkedRadioId;\n\n  return classNames({\n    [radioButtonStyles['radio-button-label__large--on-grey']]: large && onColor === 'ongrey' && !checked,\n    [radioButtonStyles['radio-button-label__large--on-blueberry']]: onColor === 'onblueberry' && !checked && large,\n    [radioButtonStyles['radio-button-label__large--selected']]: large && checked && !onCherry,\n    [radioButtonStyles['radio-button-label__large--selected-invalid']]: large && checked && onCherry,\n  });\n};\n\nexport const RadioButton = React.forwardRef((props: RadioButtonProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultChecked,\n    onChange,\n    disabled,\n    label,\n    inputId = uuid(),\n    onColor = FormOnColor.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    error = !!errorText,\n    errorTextId,\n    errorWrapperClassName,\n    value = getLabelText(label),\n    testId,\n    required,\n    labelClassNames,\n    ...rest\n  } = props;\n  const invalid = error || onColor === FormOnColor.oninvalid;\n  const onDark = onColor === FormOnColor.ondark;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const onCherry = onColor === FormOnColor.oninvalid;\n  const isLarge = size === FormSize.large;\n  const [checked, changeChecked] = useState<boolean>();\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n  const errorTextUuid = useUuid(errorTextId);\n\n  const radioButtonWrapperClasses = classNames(radioButtonStyles['radio-button-wrapper'], {\n    [radioButtonStyles['radio-button-wrapper__large']]: isLarge,\n    [radioButtonStyles['radio-button-wrapper__large--focused']]: isLarge && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--selected']]: isLarge && checked && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--invalid']]: isLarge && onCherry && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--on-blueberry']]: isLarge && onBlueberry && isFocused,\n  });\n  const radioButtonLabelClasses = classNames(\n    radioButtonStyles['radio-button-label'],\n    {\n      [radioButtonStyles['radio-button-label--disabled']]: disabled,\n      [radioButtonStyles['radio-button-label--on-dark']]: onDark,\n      [radioButtonStyles['radio-button-label--invalid']]: invalid,\n      [radioButtonStyles['radio-button-label__large']]: isLarge,\n      [radioButtonStyles['radio-button-label__large--focused']]: isFocused,\n      [radioButtonStyles['radio-button-label__large--disabled']]: isLarge && disabled,\n    },\n    labelClassNames\n  );\n  const radioButtonClasses = classNames(\n    radioButtonStyles['radio-button'],\n    {\n      [radioButtonStyles['radio-button--on-dark']]: onDark,\n      [radioButtonStyles['radio-button--disabled']]: disabled,\n      [radioButtonStyles['radio-button--on-blueberry']]: onBlueberry,\n      [radioButtonStyles['radio-button--invalid']]: invalid,\n      [radioButtonStyles['radio-button__large']]: isLarge,\n      [radioButtonStyles['radio-button__large--disabled']]: isLarge && disabled,\n      [radioButtonStyles['radio-button__large--invalid']]: isLarge && invalid,\n    },\n    className\n  );\n\n  const change = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    changeChecked(e.target.checked);\n    if (onChange) onChange(e);\n  };\n\n  const getLabelContent = (): React.ReactNode => (\n    <input\n      {...rest}\n      id={inputId}\n      name={name}\n      className={radioButtonClasses}\n      type=\"radio\"\n      disabled={disabled}\n      value={value}\n      ref={mergedRefs}\n      defaultChecked={defaultChecked}\n      aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n      required={required}\n      onChange={(e): void => change(e)}\n    />\n  );\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.RadioButton} className={radioButtonWrapperClasses}>\n        {renderLabelAsParent(\n          label,\n          getLabelContent(),\n          inputId,\n          onColor as FormOnColor,\n          radioButtonLabelClasses,\n          undefined,\n          radioButtonStyles['radiobutton-sublabel-wrapper'],\n          isLarge\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"RadioButton.js","sources":["../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport interface RadioButtonProps\n  extends ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'defaultChecked' | 'required' | 'onChange'\n    > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** Adds custom classes to the label element. */\n  labelClassNames?: string;\n  /** input id of the radioButton */\n  inputId?: string;\n  /** Changes the visuals of the radioButton */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the radioButton. Large version only works when used inside a FormGroup wrapper. */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the radioButton - 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}\n\nexport const getRadioLabelClasses = (\n  radioId: string,\n  onColor: FormOnColor,\n  large: boolean,\n  checkedRadioId?: string\n): string | undefined => {\n  const onCherry = onColor === 'oninvalid';\n  const checked = radioId === checkedRadioId;\n\n  return classNames({\n    [radioButtonStyles['radio-button-label__large--on-grey']]: large && onColor === 'ongrey' && !checked,\n    [radioButtonStyles['radio-button-label__large--on-blueberry']]: onColor === 'onblueberry' && !checked && large,\n    [radioButtonStyles['radio-button-label__large--selected']]: large && checked && !onCherry,\n    [radioButtonStyles['radio-button-label__large--selected-invalid']]: large && checked && onCherry,\n  });\n};\n\nexport const RadioButton = React.forwardRef((props: RadioButtonProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultChecked,\n    onChange,\n    disabled,\n    label,\n    inputId = uuid(),\n    onColor = FormOnColor.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    error = !!errorText,\n    errorTextId,\n    errorWrapperClassName,\n    value = getLabelText(label),\n    testId,\n    required,\n    labelClassNames,\n    ...rest\n  } = props;\n  const invalid = error || onColor === FormOnColor.oninvalid;\n  const onDark = onColor === FormOnColor.ondark;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const onCherry = onColor === FormOnColor.oninvalid;\n  const isLarge = size === FormSize.large;\n  const [checked, changeChecked] = useState<boolean>();\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n  const errorTextUuid = useUuid(errorTextId);\n\n  const radioButtonWrapperClasses = classNames(radioButtonStyles['radio-button-wrapper'], {\n    [radioButtonStyles['radio-button-wrapper__large']]: isLarge,\n    [radioButtonStyles['radio-button-wrapper__large--focused']]: isLarge && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--selected']]: isLarge && checked && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--invalid']]: isLarge && onCherry && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--on-blueberry']]: isLarge && onBlueberry && isFocused,\n  });\n  const radioButtonLabelClasses = classNames(\n    radioButtonStyles['radio-button-label'],\n    {\n      [radioButtonStyles['radio-button-label--disabled']]: disabled,\n      [radioButtonStyles['radio-button-label--on-dark']]: onDark,\n      [radioButtonStyles['radio-button-label--invalid']]: invalid,\n      [radioButtonStyles['radio-button-label__large']]: isLarge,\n      [radioButtonStyles['radio-button-label__large--focused']]: isFocused && isLarge,\n      [radioButtonStyles['radio-button-label__large--disabled']]: isLarge && disabled,\n    },\n    labelClassNames\n  );\n  const radioButtonClasses = classNames(\n    radioButtonStyles['radio-button'],\n    {\n      [radioButtonStyles['radio-button--on-dark']]: onDark,\n      [radioButtonStyles['radio-button--disabled']]: disabled,\n      [radioButtonStyles['radio-button--on-blueberry']]: onBlueberry,\n      [radioButtonStyles['radio-button--invalid']]: invalid,\n      [radioButtonStyles['radio-button__large']]: isLarge,\n      [radioButtonStyles['radio-button__large--disabled']]: isLarge && disabled,\n      [radioButtonStyles['radio-button__large--invalid']]: isLarge && invalid,\n    },\n    className\n  );\n\n  const change = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    changeChecked(e.target.checked);\n    if (onChange) onChange(e);\n  };\n\n  const getLabelContent = (): React.ReactNode => (\n    <input\n      {...rest}\n      id={inputId}\n      name={name}\n      className={radioButtonClasses}\n      type=\"radio\"\n      disabled={disabled}\n      value={value}\n      ref={mergedRefs}\n      defaultChecked={defaultChecked}\n      aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n      required={required}\n      onChange={(e): void => change(e)}\n    />\n  );\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.RadioButton} className={radioButtonWrapperClasses}>\n        {renderLabelAsParent(\n          label,\n          getLabelContent(),\n          inputId,\n          onColor as FormOnColor,\n          radioButtonLabelClasses,\n          undefined,\n          radioButtonStyles['radiobutton-sublabel-wrapper'],\n          isLarge\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"names":["React"],"mappings":"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"}

package/components/Button/styles.module.scss

@@ -44,8 +44,6 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
 
   @if $with-uu-border {
     border: 1px solid var(--color-action-border-ondark-focus);
-  } @else {
-    border: none;
   }
 }
 
@@ -230,7 +228,6 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   min-height: 2.75rem;
   box-sizing: border-box;
   outline: none;
-  border: 0;
   border-radius: 0.5rem;
   letter-spacing: unset;
 
@@ -303,6 +300,9 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
     }
   }
 
+  // Gives space to focus border
+  border: 1px solid transparent;
+
   :focus > & {
     @include focus-shadow;
 

package/components/ExpanderList/styles.module.scss

@@ -13,20 +13,17 @@
   margin: 0;
 
   &--outline {
-    &--neutral {
-      border: 1px solid var(--color-base-border-onlight);
+    &--neutral,
+    &--white {
+      border: 1px solid var(--component-listelements-border-neutral-light);
     }
 
     &--blueberry {
-      border: 1px solid var(--core-color-blueberry-500);
+      border: 1px solid var(--component-listelements-border-blueberry-light);
     }
 
     &--cherry {
-      border: 1px solid var(--core-color-cherry-400);
-    }
-
-    &--white {
-      border: 1px solid var(--color-base-border-onlight);
+      border: 1px solidvar(--component-listelements-border-cherry-light);
     }
   }
 
@@ -52,25 +49,25 @@
     }
 
     &--line {
-      border-bottom: 1px solid var(--color-base-border-onlight);
+      border-bottom: 1px solid var(--component-listelements-border-neutral-normal);
 
       &:first-of-type {
-        border-top: 1px solid var(--color-base-border-onlight);
+        border-top: 1px solid var(--component-listelements-border-neutral-normal);
       }
 
       &--blueberry,
       .expander-list-link--line--blueberry {
-        background-color: var(--core-color-blueberry-50);
+        background-color: var(--component-listelements-background-blueberry-light);
       }
 
       &--cherry,
       .expander-list-link--line--cherry {
-        background-color: var(--core-color-cherry-50);
+        background-color: var(--component-listelements-background-cherry-light);
       }
 
       &--neutral,
       .expander-list-link--line--neutral {
-        background-color: var(--core-color-neutral-50);
+        background-color: var(--component-listelements-background-neutral-light);
       }
 
       &--white,
@@ -82,43 +79,34 @@
     &--outline {
       background-color: var(--color-base-background-white);
 
-      &--white {
-        border-top: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
-        border-left: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
-        border-right: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
+      &--white,
+      &--neutral {
+        border-top: spacers.getSpacer(2xs) var(--component-listelements-border-neutral-light) solid;
+        border-left: spacers.getSpacer(2xs) var(--component-listelements-border-neutral-light) solid;
+        border-right: spacers.getSpacer(2xs) var(--component-listelements-border-neutral-light) solid;
 
         &:last-of-type {
-          border-bottom: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
+          border-bottom: spacers.getSpacer(2xs) var(--component-listelements-border-neutral-light) solid;
         }
       }
 
       &--blueberry {
-        border-top: spacers.getSpacer(2xs) var(--core-color-blueberry-100) solid;
-        border-left: spacers.getSpacer(2xs) var(--core-color-blueberry-100) solid;
-        border-right: spacers.getSpacer(2xs) var(--core-color-blueberry-100) solid;
+        border-top: spacers.getSpacer(2xs) var(--component-listelements-border-blueberry-light) solid;
+        border-left: spacers.getSpacer(2xs) var(--component-listelements-border-blueberry-light) solid;
+        border-right: spacers.getSpacer(2xs) var(--component-listelements-border-blueberry-light) solid;
 
         &:last-of-type {
-          border-bottom: spacers.getSpacer(2xs) var(--core-color-blueberry-100) solid;
+          border-bottom: spacers.getSpacer(2xs) var(--component-listelements-border-blueberry-light) solid;
         }
       }
 
       &--cherry {
-        border-top: spacers.getSpacer(2xs) var(--core-color-cherry-100) solid;
-        border-left: spacers.getSpacer(2xs) var(--core-color-cherry-100) solid;
-        border-right: spacers.getSpacer(2xs) var(--core-color-cherry-100) solid;
+        border-top: spacers.getSpacer(2xs) var(--component-listelements-border-cherry-light) solid;
+        border-left: spacers.getSpacer(2xs) var(--component-listelements-border-cherry-light) solid;
+        border-right: spacers.getSpacer(2xs) var(--component-listelements-border-cherry-light) solid;
 
         &:last-of-type {
-          border-bottom: spacers.getSpacer(2xs) var(--core-color-cherry-100) solid;
-        }
-      }
-
-      &--neutral {
-        border-top: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
-        border-left: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
-        border-right: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
-
-        &:last-of-type {
-          border-bottom: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
+          border-bottom: spacers.getSpacer(2xs) var(--component-listelements-border-cherry-light) solid;
         }
       }
     }
@@ -126,17 +114,17 @@
     &--fill {
       &--blueberry,
       .expander-list-link--fill--blueberry {
-        background-color: var(--core-color-blueberry-50);
+        background-color: var(--component-listelements-background-blueberry-light);
       }
 
       &--cherry,
       .expander-list-link--fill--cherry {
-        background-color: var(--core-color-cherry-50);
+        background-color: var(--component-listelements-background-cherry-light);
       }
 
       &--neutral,
       .expander-list-link--fill--neutral {
-        background-color: var(--core-color-neutral-50);
+        background-color: var(--component-listelements-background-neutral-light);
       }
 
       &--white,
@@ -152,19 +140,16 @@
     &--fill,
     &--fill-negative {
       &--blueberry {
-        border: 1px solid var(--core-color-blueberry-500);
+        border: 1px solid var(--component-listelements-border-blueberry-normal);
       }
 
       &--cherry {
-        border: 1px solid var(--core-color-cherry-400);
-      }
-
-      &--neutral {
-        border: 1px solid var(--color-base-border-onlight);
+        border: 1px solid var(--component-listelements-border-cherry-normal);
       }
 
+      &--neutral,
       &--white {
-        border: 1px solid var(--color-base-border-onlight);
+        border: 1px solid var(--component-listelements-border-neutral-normal);
       }
     }
 
@@ -175,7 +160,7 @@
       background-color: transparent;
 
       &--new {
-        background-color: var(--core-color-blueberry-500);
+        background-color: var(--color-notification-status-info);
       }
     }
   }
@@ -228,23 +213,23 @@
     &[aria-expanded='false'] {
       // expander settes til div om man er i edit mode, og skal da ikke ha hover/active effekter
       &:hover:not(div) {
-        background-color: var(--core-color-neutral-50);
+        background-color: var(--component-listelements-background-neutral-light);
       }
 
       &:active:not(div) {
-        background-color: var(--core-color-neutral-100);
+        background-color: var(--component-listelements-background-neutral-medium);
       }
     }
 
     &[aria-expanded='true'] {
-      background-color: var(--core-color-neutral-50);
+      background-color: var(--component-listelements-background-neutral-light);
 
       &:hover:not(div) {
-        background-color: var(--core-color-neutral-100);
+        background-color: var(--component-listelements-background-neutral-medium);
       }
 
       &:active:not(div) {
-        background-color: var(--core-color-neutral-200);
+        background-color: var(--component-listelements-background-neutral-dark);
       }
     }
   }
@@ -252,23 +237,23 @@
   &--blueberry:not(.expander-list-link--outline, .expander-list-link--fill-negative) {
     &[aria-expanded='false'] {
       &:hover:not(div) {
-        background-color: var(--core-color-blueberry-100);
+        background-color: var(--component-listelements-background-blueberry-medium);
       }
 
       &:active:not(div) {
-        background-color: var(--color-action-background-ondark-hoverselected);
+        background-color: var(--component-listelements-background-blueberry-dark);
       }
     }
 
     &[aria-expanded='true'] {
-      background-color: var(--core-color-blueberry-100);
+      background-color: var(--component-listelements-background-blueberry-medium);
 
       &:hover:not(div) {
-        background-color: var(--core-color-blueberry-200);
+        background-color: var(--component-listelements-background-blueberry-dark);
       }
 
       &:active:not(div) {
-        background-color: var(--core-color-blueberry-300);
+        background-color: var(--component-listelements-background-blueberry-verydark);
       }
     }
   }
@@ -276,23 +261,23 @@
   &--cherry:not(.expander-list-link--outline, .expander-list-link--fill-negative) {
     &[aria-expanded='false'] {
       &:hover:not(div) {
-        background-color: var(--core-color-cherry-100);
+        background-color: var(--component-listelements-background-cherry-medium);
       }
 
       &:active:not(div) {
-        background-color: var(--core-color-cherry-200);
+        background-color: var(--component-listelements-background-cherry-dark);
       }
     }
 
     &[aria-expanded='true'] {
-      background-color: var(--core-color-cherry-100);
+      background-color: var(--component-listelements-background-cherry-medium);
 
       &:hover:not(div) {
-        background-color: var(--core-color-cherry-200);
+        background-color: var(--component-listelements-background-cherry-dark);
       }
 
       &:active:not(div) {
-        background-color: var(--core-color-cherry-300);
+        background-color: var(--component-listelements-background-cherry-verydark);
       }
     }
   }
@@ -300,23 +285,23 @@
   &--neutral:not(.expander-list-link--outline, .expander-list-link--fill-negative) {
     &[aria-expanded='false'] {
       &:hover:not(div) {
-        background-color: var(--core-color-neutral-100);
+        background-color: var(--component-listelements-background-neutral-medium);
       }
 
       &:active:not(div) {
-        background-color: var(--core-color-neutral-200);
+        background-color: var(--component-listelements-background-neutral-dark);
       }
     }
 
     &[aria-expanded='true'] {
-      background-color: var(--core-color-neutral-100);
+      background-color: var(--component-listelements-background-neutral-medium);
 
       &:hover:not(div) {
-        background-color: var(--core-color-neutral-200);
+        background-color: var(--component-listelements-background-neutral-dark);
       }
 
       &:active:not(div) {
-        background-color: var(--core-color-neutral-300);
+        background-color: var(--component-listelements-background-neutral-verydark);
       }
     }
   }
@@ -324,25 +309,25 @@
   &--outline {
     &--blueberry {
       &[aria-expanded='false'] {
-        border-bottom: 1px solid var(--core-color-blueberry-500);
+        border-bottom: 1px solid var(--component-listelements-border-blueberry-normal);
       }
     }
 
     &--cherry {
       &[aria-expanded='false'] {
-        border-bottom: 1px solid var(--core-color-cherry-400);
+        border-bottom: 1px solid var(--component-listelements-border-cherry-normal);
       }
     }
 
     &--neutral {
       &[aria-expanded='false'] {
-        border-bottom: 1px solid var(--color-base-border-onlight);
+        border-bottom: 1px solid var(--component-listelements-border-neutral-normal);
       }
     }
 
     &--white {
       &[aria-expanded='false'] {
-        border-bottom: 1px solid var(--color-base-border-onlight);
+        border-bottom: 1px solid var(--component-listelements-border-neutral-normal);
       }
     }
   }
@@ -354,23 +339,23 @@
     &--blueberry {
       &[aria-expanded='false'] {
         &:hover:not(div) {
-          background-color: var(--core-color-blueberry-50);
+          background-color: var(--component-listelements-background-blueberry-light);
         }
 
         &:active:not(div) {
-          background-color: var(--core-color-blueberry-100);
+          background-color: var(--component-listelements-background-blueberry-medium);
         }
       }
 
       &[aria-expanded='true'] {
-        background-color: var(--core-color-blueberry-50);
+        background-color: var(--component-listelements-background-blueberry-light);
 
         &:hover:not(div) {
-          background-color: var(--core-color-blueberry-100);
+          background-color: var(--component-listelements-background-blueberry-medium);
         }
 
         &:active:not(div) {
-          background-color: var(--core-color-blueberry-200);
+          background-color: var(--component-listelements-background-blueberry-dark);
         }
       }
     }
@@ -378,23 +363,23 @@
     &--cherry {
       &[aria-expanded='false'] {
         &:hover:not(div) {
-          background-color: var(--core-color-cherry-50);
+          background-color: var(--component-listelements-background-cherry-light);
         }
 
         &:active:not(div) {
-          background-color: var(--core-color-cherry-100);
+          background-color: var(--component-listelements-background-cherry-medium);
         }
       }
 
       &[aria-expanded='true'] {
-        background-color: var(--core-color-cherry-50);
+        background-color: var(--component-listelements-background-cherry-light);
 
         &:hover:not(div) {
-          background-color: var(--core-color-cherry-100);
+          background-color: var(--component-listelements-background-cherry-medium);
         }
 
         &:active:not(div) {
-          background-color: var(--core-color-cherry-200);
+          background-color: var(--component-listelements-background-cherry-dark);
         }
       }
     }
@@ -403,23 +388,23 @@
     &--white {
       &[aria-expanded='false'] {
         &:hover:not(div) {
-          background-color: var(--core-color-neutral-50);
+          background-color: var(--component-listelements-background-neutral-light);
         }
 
         &:active:not(div) {
-          background-color: var(--core-color-neutral-100);
+          background-color: var(--component-listelements-background-neutral-medium);
         }
       }
 
       &[aria-expanded='true'] {
-        background-color: var(--core-color-neutral-50);
+        background-color: var(--component-listelements-background-neutral-light);
 
         &:hover:not(div) {
-          background-color: var(--core-color-neutral-100);
+          background-color: var(--component-listelements-background-neutral-medium);
         }
 
         &:active:not(div) {
-          background-color: var(--core-color-neutral-200);
+          background-color: var(--component-listelements-background-neutral-dark);
         }
       }
     }
@@ -431,25 +416,25 @@
   }
 
   &--new {
-    background-color: var(--core-color-blueberry-50) !important;
+    background-color: var(--component-listelements-background-blueberry-light) !important;
 
     &:hover:not(div) {
-      background-color: var(--core-color-blueberry-100) !important;
+      background-color: var(--component-listelements-background-blueberry-medium) !important;
     }
 
     &:active:not(div) {
-      background-color: var(--core-color-blueberry-200) !important;
+      background-color: var(--component-listelements-background-blueberry-dark) !important;
     }
 
     &[aria-expanded='true'] {
-      background-color: var(--core-color-blueberry-100) !important;
+      background-color: var(--component-listelements-background-blueberry-medium) !important;
 
       &:hover:not(div) {
-        background-color: var(--core-color-blueberry-200) !important;
+        background-color: var(--component-listelements-background-blueberry-dark) !important;
       }
 
       &:active:not(div) {
-        background-color: var(--core-color-blueberry-300) !important;
+        background-color: var(--component-listelements-background-blueberry-verydark) !important;
       }
     }
   }
@@ -482,7 +467,7 @@
     }
 
     &--new {
-      background-color: var(--core-color-blueberry-50);
+      background-color: var(--component-listelements-background-blueberry-light);
     }
 
     &--padding {
@@ -492,25 +477,20 @@
     &--outline {
       &--blueberry {
         &[aria-expanded='true'] {
-          border-bottom: 1px solid var(--core-color-blueberry-500);
+          border-bottom: 1px solid var(--component-listelements-border-blueberry-normal);
         }
       }
 
       &--cherry {
         &[aria-expanded='true'] {
-          border-bottom: 1px solid var(--core-color-cherry-400);
-        }
-      }
-
-      &--neutral {
-        &[aria-expanded='true'] {
-          border-bottom: 1px solid var(--color-base-border-onlight);
+          border-bottom: 1px solid var(--component-listelements-border-cherry-normal);
         }
       }
 
+      &--neutral,
       &--white {
         &[aria-expanded='true'] {
-          border-bottom: 1px solid var(--color-base-border-onlight);
+          border-bottom: 1px solid var(--component-listelements-border-neutral-normal);
         }
       }
     }

package/components/FormFieldTag/FormFieldTag.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { HNDesignsystemFormFieldTag } from '../../resources/Resources';
-export type FormFieldTagLevel = 'all-required' | 'required-field' | 'optional';
+export type FormFieldTagLevel = 'all-required' | 'required-field' | 'optional' | 'all-optional' | 'required-radiobutton-list' | 'required-checkbox-list' | 'required-single-checkbox';
 export interface FormFieldTagProps {
     /** Id that is placed on the component */
     id?: string;

package/components/RadioButton/styles.module.scss

@@ -93,6 +93,7 @@ $padding-clickable-area-left: 8px;
   &__large {
     padding: spacers.getSpacer(s);
     background-color: palette.$neutral50;
+    border: 1px solid transparent;
 
     &:hover {
       background-color: palette.$neutral100;

package/components/StatusDot/styles.module.scss

@@ -28,12 +28,12 @@ $status-dot-size: 1rem;
 
     &--success,
     &--active {
-      fill: var(--color-notification-graphics-success);
+      fill: var(--component-statusdot-graphics-kiwi-onlight);
     }
 
     &--success#{&}--on-dark,
     &--active#{&}--on-dark {
-      fill: var(--core-color-kiwi-200);
+      fill: var(--component-statusdot-graphics-kiwi-ondark);
     }
 
     &--inprocess,
@@ -41,7 +41,7 @@ $status-dot-size: 1rem;
     &--unknown,
     &--inspected,
     &--pending {
-      fill: var(--color-notification-graphics-warning);
+      fill: var(--component-statusdot-graphics-banana-onlight);
     }
 
     &--inprocess#{&}--on-dark,
@@ -49,27 +49,27 @@ $status-dot-size: 1rem;
     &--unknown#{&}--on-dark,
     &--inspected#{&}--on-dark,
     &--pending#{&}--on-dark {
-      fill: var(--core-color-banana-300);
+      fill: var(--component-statusdot-graphics-banana-ondark);
     }
 
     &--cancelled,
     &--alert,
     &--inactive {
-      fill: var(--color-notification-graphics-error);
+      fill: var(--component-statusdot-graphics-cherry-onlight);
     }
 
     &--cancelled#{&}--on-dark,
     &--alert#{&}--on-dark,
     &--inactive#{&}--on-dark {
-      fill: var(--core-color-cherry-100);
+      fill: var(--component-statusdot-graphics-cherry-ondark);
     }
 
     &--info {
-      fill: var(--core-color-blueberry-500);
+      fill: var(--component-statusdot-graphics-blueberry-onlight);
     }
 
     &--info#{&}--on-dark {
-      fill: var(--core-color-blueberry-200);
+      fill: var(--component-statusdot-graphics-blueberry-ondark);
     }
 
     &--transparent {
@@ -93,7 +93,7 @@ $status-dot-size: 1rem;
   }
 
   &__label {
-    color: var(--core-color-neutral-800);
+    color: var(--color-base-text-onlight-subdued);
 
     @include fonts.sublabel-subdued;
 

package/package.json

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

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

@@ -1,7 +1,11 @@
 declare const _default: {
   "allRequired": "Alle felt må fylles ut",
   "requiredField": "Må fylles ut",
-  "optional": "Valgfritt"
+  "optional": "Valgfritt",
+  "allOptional": "Alle felt er valgfrie",
+  "requiredRadiobuttonList": "Velg én",
+  "requiredCheckboxList": "Velg en eller flere",
+  "requiredSingleCheckbox": "Må velges"
 }
 ;