@helsenorge/designsystem-react 12.5.0 → 12.7.0

package/CHANGELOG.md

@@ -1,3 +1,43 @@
+## [12.7.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv12.6.4&targetVersion=GTv12.7.0) (2025-10-17)
+
+### Features
+
+- **formgroup:** endre prop for FormFieldTag til å være lik som i label
+  ([850b4e0](https://github.com/helsenorge/designsystem/commit/850b4e0cdc5888dbe29ba894c23e460dfe9d4930)), closes
+  [#362503](https://github.com/helsenorge/designsystem/issues/362503)
+
+## [12.6.4](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv12.6.3&targetVersion=GTv12.6.4) (2025-10-16)
+
+### Reverts
+
+- Revert "v12.6.3" ([973e6b8](https://github.com/helsenorge/designsystem/commit/973e6b8893fc765892a993adf83d93f4d5bfd5dd))
+
+## [12.6.3](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv12.6.2&targetVersion=GTv12.6.3) (2025-10-16)
+
+## [12.6.2](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv12.6.1&targetVersion=GTv12.6.2) (2025-10-16)
+
+## [12.6.1](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv12.6.0&targetVersion=GTv12.6.1) (2025-10-16)
+
+## [12.6.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv12.5.0&targetVersion=GTv12.6.0) (2025-10-16)
+
+### Features
+
+- **formfieldtag:** ny komponent for å markere obligatoriske felter
+  ([43186e8](https://github.com/helsenorge/designsystem/commit/43186e85e06d6b3e34124c3afd372180ecff9af9)), closes
+  [#361861](https://github.com/helsenorge/designsystem/issues/361861)
+- **stickynote:** justeringer etter ny figma komponent
+  ([b3afb5a](https://github.com/helsenorge/designsystem/commit/b3afb5a41f1400bef0afce40b244deafcac7b505)), closes
+  [#361520](https://github.com/helsenorge/designsystem/issues/361520)
+
+### Bug Fixes
+
+- **formfieldtag:** fiks display for at den holder seg i riktig størrelse
+  ([1e53dc1](https://github.com/helsenorge/designsystem/commit/1e53dc1cf52215a3476a1d6d86c36f8108b0fbc1)), closes
+  [#361861](https://github.com/helsenorge/designsystem/issues/361861)
+- **label:** bruk formfieldtag som komponent slik at man får satt id
+  ([006e152](https://github.com/helsenorge/designsystem/commit/006e1520cc16b66f637c11c193902510ebd72b76)), closes
+  [#361861](https://github.com/helsenorge/designsystem/issues/361861)
+
 ## [12.5.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv12.4.0&targetVersion=GTv12.5.0) (2025-10-08)
 
 ### Features

package/FormFieldTag.js

@@ -0,0 +1,48 @@
+import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { LanguageLocales, AnalyticsId } from "./constants.js";
+import { useLanguage } from "./utils/language.js";
+import styles from "./components/FormFieldTag/styles.module.scss";
+const allRequired = "Alle felt må fylles ut";
+const requiredField = "Må fylles ut";
+const optional = "Valgfritt";
+const nbNO = {
+  allRequired,
+  requiredField,
+  optional
+};
+const getResources = (language) => {
+  switch (language) {
+    case LanguageLocales.NORWEGIAN:
+    default:
+      return nbNO;
+  }
+};
+const FormFieldTag = (props) => {
+  const { id, level, resources, testId } = props;
+  const { language } = useLanguage(LanguageLocales.NORWEGIAN);
+  const defaultResources = getResources(language);
+  const mergedResources = {
+    ...defaultResources,
+    ...resources
+  };
+  const textMap = {
+    "all-required": mergedResources.allRequired,
+    "required-field": mergedResources.requiredField,
+    optional: mergedResources.optional
+  };
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      id,
+      "data-testid": testId,
+      "data-analyticsid": AnalyticsId.FormFieldTag,
+      className: classNames(styles["form-field-tag"], { [styles["form-field-tag--optional"]]: level === "optional" }),
+      children: textMap[level]
+    }
+  );
+};
+export {
+  FormFieldTag as F
+};
+//# sourceMappingURL=FormFieldTag.js.map

package/FormFieldTag.js.map

@@ -0,0 +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;"}

package/FormGroup.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import React__default, { useState } from "react";
 import classNames from "classnames";
 import { FormOnColor, FormSize, AnalyticsId } from "./constants.js";
@@ -6,6 +6,7 @@ import { useUuid } from "./hooks/useUuid.js";
 import { isComponent } from "./utils/component.js";
 import { C as Checkbox } from "./Checkbox.js";
 import { E as ErrorWrapper } from "./ErrorWrapper.js";
+import { F as FormFieldTag } from "./FormFieldTag.js";
 import { F as FormLayout } from "./FormLayout.js";
 import { I as Input } from "./Input.js";
 import { R as RadioButton, g as getRadioLabelClasses } from "./RadioButton.js";
@@ -19,6 +20,7 @@ const FormGroup = React__default.forwardRef((props, ref) => {
     ariaLabelledBy,
     className,
     fieldsetClassName,
+    formFieldTag,
     legendClassName,
     onColor = FormOnColor.onwhite,
     size = FormSize.medium,
@@ -118,11 +120,17 @@ const FormGroup = React__default.forwardRef((props, ref) => {
   const formGroupContent = () => {
     return /* @__PURE__ */ jsxs("div", { children: [
       htmlMarkup === "div" && /* @__PURE__ */ jsxs("div", { className: fieldsetClasses, children: [
-        props.legend && /* @__PURE__ */ jsx("h5", { className: legendClasses, children: props.legend }),
+        props.legend && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("h5", { className: legendClasses, children: [
+          props.legend,
+          formFieldTag && isComponent(formFieldTag, FormFieldTag) && React__default.cloneElement(formFieldTag)
+        ] }) }),
         React__default.Children.map(props.children, mapFormComponent)
       ] }),
       htmlMarkup === "fieldset" && /* @__PURE__ */ jsxs("fieldset", { "aria-labelledby": ariaLabelledBy, name: props.fieldsetName, className: fieldsetClasses, children: [
-        props.legend && /* @__PURE__ */ jsx("legend", { className: legendClasses, children: props.legend }),
+        props.legend && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("legend", { className: legendClasses, children: [
+          props.legend,
+          formFieldTag && isComponent(formFieldTag, FormFieldTag) && React__default.cloneElement(formFieldTag)
+        ] }) }),
         React__default.Children.map(props.children, mapFormComponent)
       ] })
     ] });

package/FormGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormGroup.js","sources":["../src/components/FormGroup/FormGroup.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { isComponent } from '../../utils/component';\nimport Checkbox, { CheckboxProps } from '../Checkbox/Checkbox';\nimport ErrorWrapper from '../ErrorWrapper';\nimport FormLayout, { FormLayoutProps } from '../FormLayout';\nimport Input, { InputProps } from '../Input/Input';\nimport RadioButton, { RadioButtonProps, getRadioLabelClasses } from '../RadioButton/RadioButton';\nimport Select, { SelectProps } from '../Select';\nimport Slider, { SliderProps } from '../Slider';\nimport Textarea, { TextareaProps } from '../Textarea';\nimport Title from '../Title';\n\nimport formGroupStyles from './styles.module.scss';\n\nexport type FormGroupTags = 'fieldset' | 'div';\n\nexport interface FormGroupProps {\n  /** Can be used as a replacement text for legend in cases where the group title already exists externally */\n  ariaLabelledBy?: string;\n  /** title for the the fieldset */\n  title?: string;\n  /** text placed in the legend tag of the fieldset */\n  legend?: string;\n  /** Items in the FormGroup component */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the errorWrapper. */\n  errorWrapperClassName?: string;\n  /** Adds custom classes to the fieldset element. */\n  fieldsetClassName?: string;\n  /** Adds custom classes to the legend element. */\n  legendClassName?: string;\n  /** Changes the visuals of the formgroup */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Error message */\n  error?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the data-testid attribute for the error-wrapper. */\n  errorWrapperTestId?: string;\n  /** Unique name for the child input element */\n  name?: string;\n  /** Unique name for the fieldset */\n  fieldsetName?: string;\n  /** Sets div instead of fieldset tag */\n  htmlMarkup?: FormGroupTags;\n  /** Renders the error component (Default: true) */\n  renderError?: boolean;\n}\n\nexport const FormGroup = React.forwardRef((props: FormGroupProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n  const {\n    ariaLabelledBy,\n    className,\n    fieldsetClassName,\n    legendClassName,\n    onColor = FormOnColor.onwhite,\n    size = FormSize.medium,\n    error,\n    errorTextId,\n    name,\n    htmlMarkup = 'fieldset',\n    renderError = true,\n    errorWrapperClassName,\n    errorWrapperTestId,\n  } = props;\n  const [checkedRadioId, setCheckedRadioId] = useState<string>();\n  const radioGroupId = useUuid();\n  const errorTextUuid = useUuid(errorTextId);\n  const onDark = onColor === FormOnColor.ondark;\n  const isLarge = size === FormSize.large;\n  const formGroupWrapperClasses = classNames(formGroupStyles['form-group-wrapper'], className);\n  const titleClasses = classNames({\n    [formGroupStyles['form-group-wrapper__title--on-dark']]: onDark && !error,\n  });\n\n  const legendClasses = classNames(\n    formGroupStyles['field-set__legend'],\n    {\n      [formGroupStyles['field-set__legend--on-dark']]: onDark && !error,\n    },\n    legendClassName\n  );\n\n  const fieldsetClasses = classNames(formGroupStyles['field-set'], fieldsetClassName);\n\n  const mapFormComponent = (child: React.ReactNode, index: number): React.ReactNode => {\n    if (isComponent<FormLayoutProps>(child, FormLayout)) {\n      return React.cloneElement(child, {\n        size,\n        mapHelper: mapFormComponent,\n      });\n    } else if (isComponent<FormGroupProps>(child, FormGroup)) {\n      return React.cloneElement(child, {\n        onColor,\n        size,\n        error,\n        renderError: false,\n        errorTextId: errorTextUuid,\n      });\n    } else if (isComponent<CheckboxProps>(child, Checkbox)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        size,\n        error: !!error,\n        errorTextId: errorTextUuid,\n      });\n    } else if (isComponent<RadioButtonProps>(child, RadioButton)) {\n      const radioId = typeof child.props.inputId === 'undefined' ? radioGroupId + index : child.props.inputId;\n      return React.cloneElement(child, {\n        inputId: radioId,\n        name: name ?? child.props.name,\n        onColor,\n        size,\n        onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n          setCheckedRadioId(event.target.id);\n          if (child.props.onChange) child.props.onChange(event);\n        },\n        error: !!error,\n        errorTextId: errorTextUuid,\n        labelClassNames: getRadioLabelClasses(radioId, onColor as FormOnColor, isLarge, checkedRadioId),\n      });\n    } else if (isComponent<InputProps>(child, Input)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        size,\n        error: !!error,\n        errorTextId: errorTextUuid,\n      });\n    } else if (isComponent<TextareaProps>(child, Textarea)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        error: !!error,\n        errorTextId: errorTextUuid,\n      });\n    } else if (isComponent<SelectProps>(child, Select)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        error: !!error,\n        errorTextId: errorTextUuid,\n      });\n    } else if (isComponent<SliderProps>(child, Slider)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        error: !!error,\n        errorTextId: errorTextUuid,\n      });\n    }\n    return child;\n  };\n\n  const formGroupContent = (): React.ReactNode => {\n    return (\n      <div>\n        {htmlMarkup === 'div' && (\n          <div className={fieldsetClasses}>\n            {props.legend && <h5 className={legendClasses}>{props.legend}</h5>}\n            {React.Children.map(props.children, mapFormComponent)}\n          </div>\n        )}\n        {htmlMarkup === 'fieldset' && (\n          <fieldset aria-labelledby={ariaLabelledBy} name={props.fieldsetName} className={fieldsetClasses}>\n            {props.legend && <legend className={legendClasses}>{props.legend}</legend>}\n            {React.Children.map(props.children, mapFormComponent)}\n          </fieldset>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div data-testid={props.testId} data-analyticsid={AnalyticsId.FormGroup} className={formGroupWrapperClasses}>\n      {props.title && (\n        <Title className={titleClasses} htmlMarkup={'h4'} appearance={'title4'} margin={{ marginTop: 0, marginBottom: error ? 1 : 2 }}>\n          {props.title}\n        </Title>\n      )}\n      <ErrorWrapper\n        className={errorWrapperClassName}\n        errorText={error}\n        testId={errorWrapperTestId}\n        errorTextId={errorTextUuid}\n        errorMessageRef={ref}\n        renderError={renderError}\n      >\n        {formGroupContent()}\n      </ErrorWrapper>\n    </div>\n  );\n});\n\nFormGroup.displayName = 'FormGroup';\n\nexport default FormGroup;\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"FormGroup.js","sources":["../src/components/FormGroup/FormGroup.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { isComponent } from '../../utils/component';\nimport Checkbox, { CheckboxProps } from '../Checkbox/Checkbox';\nimport ErrorWrapper from '../ErrorWrapper';\nimport FormFieldTag, { FormFieldTagProps } from '../FormFieldTag';\nimport FormLayout, { FormLayoutProps } from '../FormLayout';\nimport Input, { InputProps } from '../Input/Input';\nimport RadioButton, { RadioButtonProps, getRadioLabelClasses } from '../RadioButton/RadioButton';\nimport Select, { SelectProps } from '../Select';\nimport Slider, { SliderProps } from '../Slider';\nimport Textarea, { TextareaProps } from '../Textarea';\nimport Title from '../Title';\n\nimport formGroupStyles from './styles.module.scss';\n\nexport type FormGroupTags = 'fieldset' | 'div';\n\nexport interface FormGroupProps {\n  /** Can be used as a replacement text for legend in cases where the group title already exists externally */\n  ariaLabelledBy?: string;\n  /** title for the the fieldset */\n  title?: string;\n  /** text placed in the legend tag of the fieldset */\n  legend?: string;\n  /** Items in the FormGroup component */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the errorWrapper. */\n  errorWrapperClassName?: string;\n  /** Adds custom classes to the fieldset element. */\n  fieldsetClassName?: string;\n  /** Sets a tag that describes whether the form group is required or optional */\n  formFieldTag?: React.ReactNode;\n  /** Adds custom classes to the legend element. */\n  legendClassName?: string;\n  /** Changes the visuals of the formgroup */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Error message */\n  error?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the data-testid attribute for the error-wrapper. */\n  errorWrapperTestId?: string;\n  /** Unique name for the child input element */\n  name?: string;\n  /** Unique name for the fieldset */\n  fieldsetName?: string;\n  /** Sets div instead of fieldset tag */\n  htmlMarkup?: FormGroupTags;\n  /** Renders the error component (Default: true) */\n  renderError?: boolean;\n}\n\nexport const FormGroup = React.forwardRef((props: FormGroupProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n  const {\n    ariaLabelledBy,\n    className,\n    fieldsetClassName,\n    formFieldTag,\n    legendClassName,\n    onColor = FormOnColor.onwhite,\n    size = FormSize.medium,\n    error,\n    errorTextId,\n    name,\n    htmlMarkup = 'fieldset',\n    renderError = true,\n    errorWrapperClassName,\n    errorWrapperTestId,\n  } = props;\n  const [checkedRadioId, setCheckedRadioId] = useState<string>();\n  const radioGroupId = useUuid();\n  const errorTextUuid = useUuid(errorTextId);\n  const onDark = onColor === FormOnColor.ondark;\n  const isLarge = size === FormSize.large;\n  const formGroupWrapperClasses = classNames(formGroupStyles['form-group-wrapper'], className);\n  const titleClasses = classNames({\n    [formGroupStyles['form-group-wrapper__title--on-dark']]: onDark && !error,\n  });\n\n  const legendClasses = classNames(\n    formGroupStyles['field-set__legend'],\n    {\n      [formGroupStyles['field-set__legend--on-dark']]: onDark && !error,\n    },\n    legendClassName\n  );\n\n  const fieldsetClasses = classNames(formGroupStyles['field-set'], fieldsetClassName);\n\n  const mapFormComponent = (child: React.ReactNode, index: number): React.ReactNode => {\n    if (isComponent<FormLayoutProps>(child, FormLayout)) {\n      return React.cloneElement(child, {\n        size,\n        mapHelper: mapFormComponent,\n      });\n    } else if (isComponent<FormGroupProps>(child, FormGroup)) {\n      return React.cloneElement(child, {\n        onColor,\n        size,\n        error,\n        renderError: false,\n        errorTextId: errorTextUuid,\n      });\n    } else if (isComponent<CheckboxProps>(child, Checkbox)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        size,\n        error: !!error,\n        errorTextId: errorTextUuid,\n      });\n    } else if (isComponent<RadioButtonProps>(child, RadioButton)) {\n      const radioId = typeof child.props.inputId === 'undefined' ? radioGroupId + index : child.props.inputId;\n      return React.cloneElement(child, {\n        inputId: radioId,\n        name: name ?? child.props.name,\n        onColor,\n        size,\n        onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n          setCheckedRadioId(event.target.id);\n          if (child.props.onChange) child.props.onChange(event);\n        },\n        error: !!error,\n        errorTextId: errorTextUuid,\n        labelClassNames: getRadioLabelClasses(radioId, onColor as FormOnColor, isLarge, checkedRadioId),\n      });\n    } else if (isComponent<InputProps>(child, Input)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        size,\n        error: !!error,\n        errorTextId: errorTextUuid,\n      });\n    } else if (isComponent<TextareaProps>(child, Textarea)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        error: !!error,\n        errorTextId: errorTextUuid,\n      });\n    } else if (isComponent<SelectProps>(child, Select)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        error: !!error,\n        errorTextId: errorTextUuid,\n      });\n    } else if (isComponent<SliderProps>(child, Slider)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        error: !!error,\n        errorTextId: errorTextUuid,\n      });\n    }\n    return child;\n  };\n\n  const formGroupContent = (): React.ReactNode => {\n    return (\n      <div>\n        {htmlMarkup === 'div' && (\n          <div className={fieldsetClasses}>\n            {props.legend && (\n              <>\n                <h5 className={legendClasses}>\n                  {props.legend}\n                  {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\n                </h5>\n              </>\n            )}\n            {React.Children.map(props.children, mapFormComponent)}\n          </div>\n        )}\n        {htmlMarkup === 'fieldset' && (\n          <fieldset aria-labelledby={ariaLabelledBy} name={props.fieldsetName} className={fieldsetClasses}>\n            {props.legend && (\n              <>\n                <legend className={legendClasses}>\n                  {props.legend}\n                  {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\n                </legend>\n              </>\n            )}\n            {React.Children.map(props.children, mapFormComponent)}\n          </fieldset>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div data-testid={props.testId} data-analyticsid={AnalyticsId.FormGroup} className={formGroupWrapperClasses}>\n      {props.title && (\n        <Title className={titleClasses} htmlMarkup={'h4'} appearance={'title4'} margin={{ marginTop: 0, marginBottom: error ? 1 : 2 }}>\n          {props.title}\n        </Title>\n      )}\n      <ErrorWrapper\n        className={errorWrapperClassName}\n        errorText={error}\n        testId={errorWrapperTestId}\n        errorTextId={errorTextUuid}\n        errorMessageRef={ref}\n        renderError={renderError}\n      >\n        {formGroupContent()}\n      </ErrorWrapper>\n    </div>\n  );\n});\n\nFormGroup.displayName = 'FormGroup';\n\nexport default FormGroup;\n"],"names":["React"],"mappings":"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"}

package/Label.js

@@ -5,6 +5,7 @@ import { AnalyticsId, FormOnColor } from "./constants.js";
 import { S as Spacer } from "./Spacer.js";
 import styles from "./components/Label/styles.module.scss";
 import { isComponent } from "./utils/component.js";
+import { F as FormFieldTag } from "./FormFieldTag.js";
 import { S as StatusDot } from "./StatusDot.js";
 const Sublabel = ({ children, className, id, onColor, sublabelTexts, testId }) => {
   const mapSublabels = (hideFromScreenReader) => {
@@ -73,6 +74,7 @@ const Label = ({
   afterLabelChildren,
   children,
   className,
+  formFieldTag,
   htmlFor,
   htmlMarkup = "label",
   labelClassName,
@@ -113,6 +115,7 @@ const Label = ({
         /* @__PURE__ */ jsx("span", { className: styles.label__texts, children: mapLabels() })
       ] }) }),
       /* @__PURE__ */ jsxs("div", { className: sublabelWrapperClassName, children: [
+        formFieldTag && isComponent(formFieldTag, FormFieldTag) && React__default.cloneElement(formFieldTag),
         sublabel && isComponent(sublabel, Sublabel) && React__default.cloneElement(sublabel, {
           onColor
         }),

package/Label.js.map

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

package/components/FormFieldTag/FormFieldTag.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { HNDesignsystemFormFieldTag } from '../../resources/Resources';
+export type FormFieldTagLevel = 'all-required' | 'required-field' | 'optional';
+export interface FormFieldTagProps {
+    /** Id that is placed on the component */
+    id?: string;
+    /** What level is the required tag, sets the styling and the text. */
+    level: FormFieldTagLevel;
+    /** Texts if overriding SOT */
+    resources?: HNDesignsystemFormFieldTag;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+declare const FormFieldTag: React.FC<FormFieldTagProps>;
+export default FormFieldTag;

package/components/FormFieldTag/FormFieldTag.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/FormFieldTag/index.d.ts

@@ -0,0 +1,3 @@
+import { default as FormFieldTag } from './FormFieldTag';
+export * from './FormFieldTag';
+export default FormFieldTag;

package/components/FormFieldTag/index.js

@@ -0,0 +1,5 @@
+import { F as FormFieldTag } from "../../FormFieldTag.js";
+export {
+  FormFieldTag as default
+};
+//# sourceMappingURL=index.js.map

package/components/FormFieldTag/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/components/FormFieldTag/resourceHelper.d.ts

@@ -0,0 +1,3 @@
+import { LanguageLocales } from '../../constants';
+import { HNDesignsystemFormFieldTag } from '../../resources/Resources';
+export declare const getResources: (language: LanguageLocales) => HNDesignsystemFormFieldTag;

package/components/FormFieldTag/styles.module.scss

@@ -0,0 +1,23 @@
+@use '../../scss/font-mixins' as fonts;
+@import '../../scss/supernova/styles/colors.css';
+
+.form-field-tag {
+  @include fonts.image-caption;
+
+  font-weight: 400;
+  display: block;
+  width: fit-content;
+  background: linear-gradient(180deg, transparent 8%, var(--core-color-banana-100) 8%, var(--core-color-banana-100) 92%, transparent 92%);
+  color: var(--core-color-neutral-800);
+  padding: 0 0.1875rem;
+
+  &--optional {
+    background: linear-gradient(
+      180deg,
+      transparent 8%,
+      var(--core-color-blueberry-100) 8%,
+      var(--core-color-blueberry-100) 92%,
+      transparent 92%
+    );
+  }
+}

package/components/FormFieldTag/styles.module.scss.d.ts

@@ -0,0 +1,10 @@
+export type Styles = {
+  'form-field-tag': string;
+  'form-field-tag--optional': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/FormGroup/FormGroup.d.ts

@@ -16,6 +16,8 @@ export interface FormGroupProps {
     errorWrapperClassName?: string;
     /** Adds custom classes to the fieldset element. */
     fieldsetClassName?: string;
+    /** Sets a tag that describes whether the form group is required or optional */
+    formFieldTag?: React.ReactNode;
     /** Adds custom classes to the legend element. */
     legendClassName?: string;
     /** Changes the visuals of the formgroup */

package/components/FormGroup/styles.module.scss

@@ -30,6 +30,9 @@
   &__legend {
     margin-bottom: spacers.getSpacer(m);
     margin-top: 0;
+    display: flex;
+    flex-flow: column;
+    gap: 0.25rem;
 
     @include fonts.legend;
 

package/components/Label/Label.d.ts

@@ -11,6 +11,8 @@ export interface LabelProps {
     afterLabelChildren?: React.ReactNode;
     /** Sets the content of the Label */
     children?: React.ReactNode;
+    /** Sets a tag that describes whether the form field is required or optional */
+    formFieldTag?: React.ReactNode;
     /** Adds custom classes to the label tag. */
     labelClassName?: string;
     /** Adds custom classes to the label text. */

package/components/StickyNote/Close.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+export interface CloseProps {
+    /** Function is called when user clicks the button */
+    onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    /** Sets the aria-label of the button */
+    ariaLabel?: string;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+declare const Close: React.ForwardRefExoticComponent<CloseProps & React.RefAttributes<HTMLButtonElement>>;
+export default Close;

package/components/StickyNote/Triangle.d.ts

@@ -1,5 +1,9 @@
+import { default as React } from 'react';
 interface TriangleProps {
-    type: 'default' | 'active' | 'error';
+    isHover: boolean;
+    isFocus: boolean;
+    isActive: boolean;
+    isError: boolean;
 }
 export interface Palette {
     border: string;

package/components/StickyNote/index.js

@@ -1,46 +1,107 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useRef, useLayoutEffect } from "react";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import React__default, { useRef, useLayoutEffect } from "react";
 import classNames from "classnames";
 import { useHover } from "../../hooks/useHover.js";
-import { usePseudoClasses } from "../../hooks/usePseudoClasses.js";
+import { useIsMobileBreakpoint } from "../../hooks/useIsMobileBreakpoint.js";
+import { mergeRefs } from "../../utils/refs.js";
 import { I as Icon } from "../../Icon.js";
-import { IconSize } from "../../constants.js";
-import { useUuid } from "../../hooks/useUuid.js";
-import { getAriaDescribedBy } from "../../utils/accessibility.js";
 import X from "../Icons/X.js";
 import styles from "./styles.module.scss";
-const Triangle = ({ type }) => {
+import { usePseudoClasses } from "../../hooks/usePseudoClasses.js";
+import { useUuid } from "../../hooks/useUuid.js";
+import { getAriaDescribedBy } from "../../utils/accessibility.js";
+const Close = React__default.forwardRef(function ButtonForwardedRef(props, ref) {
+  const { testId, ariaLabel = "Lukk", onClick } = props;
+  const { hoverRef, isHovered } = useHover();
+  const iconSize = useIsMobileBreakpoint() ? 38 : 48;
+  const closeClasses = classNames(styles.close);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref: mergeRefs([ref, hoverRef]),
+      "data-testid": testId,
+      className: closeClasses,
+      "aria-label": ariaLabel,
+      onClick,
+      type: "button",
+      children: /* @__PURE__ */ jsx("span", { className: classNames(styles["close__inner-container"]), children: /* @__PURE__ */ jsx(Icon, { svgIcon: X, color: "black", size: iconSize, isHovered }) })
+    }
+  );
+});
+const Triangle = ({ isHover, isFocus, isActive, isError }) => {
   const palette = (() => {
-    switch (type) {
-      case "active":
-        return {
-          border: "#C59302",
-          background: "#F5E080"
-        };
-      case "error":
-        return {
-          border: "#C83521",
-          background: "#EEC0A5"
-        };
-      default:
-        return {
-          border: "#F5E080",
-          background: "#F5E080"
-        };
+    const colors = {
+      border: "var(--component-stickynote-border-normal)",
+      background: "var(--component-stickynote-background-fold-normal-light)"
+    };
+    if (!isError) {
+      if (isHover) {
+        colors.background = "var(--component-stickynote-background-fold-normal-medium)";
+      }
+      if (isFocus) {
+        colors.border = "var(--color-action-border-onlight-focus)";
+        colors.background = "var(--component-stickynote-background-fold-normal-medium)";
+      }
+      if (isActive) {
+        colors.background = "var(--component-stickynote-background-fold-normal-dark)";
+      }
+    } else {
+      colors.border = "var(--component-stickynote-border-error)";
+      colors.background = "var(--component-stickynote-background-fold-error-light)";
+      if (isHover) {
+        colors.background = "var(--component-stickynote-background-fold-error-medium)";
+      }
+      if (isFocus) {
+        colors.border = "var(--color-action-border-onlight-focus)";
+        colors.background = "var(--component-stickynote-background-fold-error-medium)";
+      }
+      if (isActive) {
+        colors.background = "var(--component-stickynote-background-fold-error-dark)";
+      }
     }
+    return colors;
   })();
-  return /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 22 22", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-    /* @__PURE__ */ jsx("mask", { id: "path-1-inside-1_1_44", fill: "white", children: /* @__PURE__ */ jsx("path", { d: "M22 0L1.80043e-06 22L2.83099e-06 -8.97354e-07L22 0Z" }) }),
-    /* @__PURE__ */ jsx("path", { d: "M22 0L1.80043e-06 22L2.83099e-06 -8.97354e-07L22 0Z", fill: palette.background }),
-    /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: "M22 0L22.7071 0.707107L24.4142 -1L22 -1L22 0ZM1.80043e-06 22L-0.999998 22L-0.999998 24.4142L0.707109 22.7071L1.80043e-06 22ZM2.83099e-06 -8.97354e-07L2.87783e-06 -1L-0.999997 -1L-0.999997 -9.38143e-07L2.83099e-06 -8.97354e-07ZM21.2929 -0.707107L-0.707105 21.2929L0.707109 22.7071L22.7071 0.707107L21.2929 -0.707107ZM1 22L1 -8.56565e-07L-0.999997 -9.38143e-07L-0.999998 22L1 22ZM2.78414e-06 0.999999L22 1L22 -1L2.87783e-06 -1L2.78414e-06 0.999999Z",
-        fill: palette.border,
-        mask: "url(#path-1-inside-1_1_44)"
-      }
-    )
-  ] });
+  let svg;
+  if (isFocus) {
+    svg = /* @__PURE__ */ jsxs("svg", { width: "21", height: "21", viewBox: "0 0 21 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+      /* @__PURE__ */ jsx("mask", { id: "path-1-inside-1_7753_1401", fill: "white", children: /* @__PURE__ */ jsx("path", { d: "M0.493163 20.9211L0.276366 20.9211L0.276367 0.921142L20.2764 0.921143L20.2764 1.13794L0.493163 20.9211Z" }) }),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M0.493163 20.9211L0.276366 20.9211L0.276367 0.921142L20.2764 0.921143L20.2764 1.13794L0.493163 20.9211Z",
+          fill: palette.background
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M0.493163 20.9211L0.493163 22.9211L1.32159 22.9211L1.90738 22.3354L0.493163 20.9211ZM0.276366 20.9211L-1.72363 20.9211L-1.72363 22.9211L0.276366 22.9211L0.276366 20.9211ZM0.276367 0.921142L0.276367 -1.07886L-1.72363 -1.07886L-1.72363 0.921142L0.276367 0.921142ZM20.2764 0.921143L22.2764 0.921143L22.2764 -1.07886L20.2764 -1.07886L20.2764 0.921143ZM20.2764 1.13794L21.6906 2.55215L22.2764 1.96637L22.2764 1.13794L20.2764 1.13794ZM0.493163 20.9211L0.493163 18.9211L0.276366 18.9211L0.276366 20.9211L0.276366 22.9211L0.493163 22.9211L0.493163 20.9211ZM0.276366 20.9211L2.27637 20.9211L2.27637 0.921142L0.276367 0.921142L-1.72363 0.921142L-1.72363 20.9211L0.276366 20.9211ZM0.276367 0.921142L0.276367 2.92114L20.2764 2.92114L20.2764 0.921143L20.2764 -1.07886L0.276367 -1.07886L0.276367 0.921142ZM20.2764 0.921143L18.2764 0.921142L18.2764 1.13794L20.2764 1.13794L22.2764 1.13794L22.2764 0.921143L20.2764 0.921143ZM20.2764 1.13794L18.8622 -0.276274L-0.92105 19.5069L0.493163 20.9211L1.90738 22.3354L21.6906 2.55215L20.2764 1.13794Z",
+          fill: palette.border,
+          mask: "url(#path-1-inside-1_7753_1401)"
+        }
+      )
+    ] });
+  } else {
+    svg = /* @__PURE__ */ jsxs("svg", { width: "21", height: "21", viewBox: "0 0 21 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+      /* @__PURE__ */ jsx("mask", { id: "path-1-inside-1_7717_293537", fill: "white", children: /* @__PURE__ */ jsx("path", { d: "M0.923827 20.9211L0.70703 20.9211L0.707031 0.921142L20.707 0.921143L20.707 1.13794L0.923827 20.9211Z" }) }),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M0.923827 20.9211L0.70703 20.9211L0.707031 0.921142L20.707 0.921143L20.707 1.13794L0.923827 20.9211Z",
+          fill: palette.background
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M0.923827 20.9211L0.923827 21.9211L1.33804 21.9211L1.63093 21.6282L0.923827 20.9211ZM0.70703 20.9211L-0.29297 20.9211L-0.29297 21.9211L0.70703 21.9211L0.70703 20.9211ZM0.707031 0.921142L0.707031 -0.0788582L-0.292969 -0.0788583L-0.292969 0.921142L0.707031 0.921142ZM20.707 0.921143L21.707 0.921143L21.707 -0.0788574L20.707 -0.0788574L20.707 0.921143ZM20.707 1.13794L21.4141 1.84505L21.707 1.55215L21.707 1.13794L20.707 1.13794ZM0.923827 20.9211L0.923827 19.9211L0.70703 19.9211L0.70703 20.9211L0.70703 21.9211L0.923827 21.9211L0.923827 20.9211ZM0.70703 20.9211L1.70703 20.9211L1.70703 0.921142L0.707031 0.921142L-0.292969 0.921142L-0.29297 20.9211L0.70703 20.9211ZM0.707031 0.921142L0.707031 1.92114L20.707 1.92114L20.707 0.921143L20.707 -0.0788574L0.707031 -0.0788582L0.707031 0.921142ZM20.707 0.921143L19.707 0.921143L19.707 1.13794L20.707 1.13794L21.707 1.13794L21.707 0.921143L20.707 0.921143ZM20.707 1.13794L19.9999 0.430833L0.21672 20.214L0.923827 20.9211L1.63093 21.6282L21.4141 1.84505L20.707 1.13794Z",
+          fill: palette.border,
+          mask: "url(#path-1-inside-1_7717_293537)"
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: svg });
 };
 const StickyNote = (props) => {
   const {
@@ -60,8 +121,7 @@ const StickyNote = (props) => {
   const stickynoteRef = useRef(null);
   const textareaRef = useRef(null);
   const { isFocused: isTextareaFocused } = usePseudoClasses(textareaRef);
-  const { isHovered } = useHover(stickynoteRef);
-  const triangleType = error ? "error" : isTextareaFocused ? "active" : "default";
+  const { isHovered, isActive } = usePseudoClasses(stickynoteRef);
   const handleWrapperClick = (event) => {
     var _a;
     if (event.target.closest("button")) {
@@ -99,6 +159,7 @@ const StickyNote = (props) => {
         ref: stickynoteRef,
         className: classNames(styles["sticky-note"], wrapperClassName, {
           [styles["sticky-note--focused"]]: isTextareaFocused,
+          [styles["sticky-note--active"]]: isActive,
           [styles["sticky-note--hovered"]]: isHovered && !isTextareaFocused && !textareaProps.disabled,
           [styles["sticky-note--error"]]: error
         }),
@@ -123,19 +184,9 @@ const StickyNote = (props) => {
               "aria-describedby": getAriaDescribedBy(props, errorTextUuid)
             }
           ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: onXButtonClick,
-              "aria-label": arialabelXButton,
-              "data-testid": "closeButton",
-              className: classNames(styles["sticky-note__x-button"]),
-              type: "button",
-              children: /* @__PURE__ */ jsx(Icon, { svgIcon: X, color: "black", size: IconSize.XXSmall })
-            }
-          ),
+          /* @__PURE__ */ jsx(Close, { onClick: onXButtonClick, ariaLabel: arialabelXButton, testId: "closeButton" }),
           /* @__PURE__ */ jsx("div", { className: classNames(styles["sticky-note__footer"]), children: footerText && /* @__PURE__ */ jsx("span", { children: footerText }) }),
-          /* @__PURE__ */ jsx("div", { className: classNames(styles["sticky-note__triangle"]), children: /* @__PURE__ */ jsx(Triangle, { type: triangleType }) })
+          /* @__PURE__ */ jsx("div", { className: classNames(styles["sticky-note__triangle"]), children: /* @__PURE__ */ jsx(Triangle, { isHover: isHovered, isActive, isFocus: isTextareaFocused, isError: !!error }) })
         ]
       }
     ),