@helsenorge/designsystem-react 12.5.0 → 12.7.0

package/components/StickyNote/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/StickyNote/Triangle.tsx","../../../src/components/StickyNote/StickyNote.tsx"],"sourcesContent":["interface TriangleProps {\n  type: 'default' | 'active' | 'error';\n}\n\nexport interface Palette {\n  border: string;\n  background: string;\n}\n\nconst Triangle: React.FC<TriangleProps> = ({ type }) => {\n  const palette = ((): Palette => {\n    switch (type) {\n      case 'active':\n        return {\n          border: '#C59302',\n          background: '#F5E080',\n        };\n      case 'error':\n        return {\n          border: '#C83521',\n          background: '#EEC0A5',\n        };\n      default:\n        return {\n          border: '#F5E080',\n          background: '#F5E080',\n        };\n    }\n  })();\n  return (\n    <svg width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <mask id=\"path-1-inside-1_1_44\" fill=\"white\">\n        <path d=\"M22 0L1.80043e-06 22L2.83099e-06 -8.97354e-07L22 0Z\" />\n      </mask>\n      <path d=\"M22 0L1.80043e-06 22L2.83099e-06 -8.97354e-07L22 0Z\" fill={palette.background} />\n      <path\n        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\"\n        fill={palette.border}\n        mask=\"url(#path-1-inside-1_1_44)\"\n      />\n    </svg>\n  );\n};\n\nexport default Triangle;\n","import React, { useLayoutEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useHover } from '../../hooks/useHover';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport Icon, { IconSize } from '../Icon';\nimport Triangle from './Triangle';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface StickyNoteProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n  /** Aria label for the delete/close button */\n  arialabelXButton: string;\n  /** Activates the error styling */\n  error?: boolean;\n  /** Error text to show below the note */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Text shown under the textarea  */\n  footerText?: string;\n  /** Function run when clicking the delete/close button */\n  onXButtonClick?: () => void;\n  /** Function run if user clicks the component while it is disabled */\n  onClickWhileDisabled?: () => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Timestamp shown over the textarea  */\n  timestamp: string;\n  /** Classname for the outer wrapper */\n  wrapperClassName?: string;\n}\n\nconst StickyNote: React.FC<StickyNoteProps> = (props: StickyNoteProps) => {\n  const {\n    wrapperClassName,\n    timestamp,\n    onXButtonClick,\n    arialabelXButton,\n    footerText,\n    error,\n    errorText,\n    errorTextId,\n    onClickWhileDisabled,\n    testId,\n    ...textareaProps\n  } = props;\n  const errorTextUuid = useUuid(errorTextId);\n  const stickynoteRef = useRef<HTMLDivElement>(null);\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const { isFocused: isTextareaFocused } = usePseudoClasses<HTMLTextAreaElement>(textareaRef);\n  const { isHovered } = useHover<HTMLDivElement>(stickynoteRef);\n  const triangleType = error ? 'error' : isTextareaFocused ? 'active' : 'default';\n\n  const handleWrapperClick = (event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>): void => {\n    if ((event.target as HTMLElement).closest('button')) {\n      return;\n    }\n    if (textareaProps.disabled) {\n      if (onClickWhileDisabled) onClickWhileDisabled();\n      return;\n    }\n    textareaRef.current?.focus();\n  };\n\n  const resizeTextarea = (): void => {\n    const textarea = textareaRef.current;\n    if (!textarea) return;\n    resizeTarget(textarea);\n  };\n\n  const resizeTarget = (target: HTMLTextAreaElement): void => {\n    // Reset field height\n    target.style.height = 'inherit';\n    // Set new height\n    target.style.height = `${target.scrollHeight}px`;\n  };\n\n  useLayoutEffect(() => {\n    resizeTextarea();\n    // Must run after the shadow DOM has been set up to work on microweb\n    setTimeout(() => resizeTextarea(), 1000);\n  }, []);\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    const textarea = e.target as HTMLTextAreaElement;\n    resizeTarget(textarea);\n    if (textareaProps.onChange) textareaProps.onChange(e);\n  };\n\n  return (\n    <div>\n      <div\n        data-testid={testId}\n        ref={stickynoteRef}\n        className={classNames(styles['sticky-note'], wrapperClassName, {\n          [styles['sticky-note--focused']]: isTextareaFocused,\n          [styles['sticky-note--hovered']]: isHovered && !isTextareaFocused && !textareaProps.disabled,\n          [styles['sticky-note--error']]: error,\n        })}\n        onClick={handleWrapperClick}\n        role=\"textbox\"\n        tabIndex={-1}\n        onKeyDown={e => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            handleWrapperClick(e as React.KeyboardEvent<HTMLDivElement>);\n          }\n        }}\n      >\n        <div className={classNames(styles['sticky-note__header'])}>\n          {timestamp && <span className={styles['sticky-note__header__timestamp']}>{timestamp}</span>}\n        </div>\n        <textarea\n          ref={textareaRef}\n          data-testid={`${testId}-textarea`}\n          className={classNames(styles['sticky-note__textarea'], textareaProps.className)}\n          {...textareaProps}\n          onChange={handleChange}\n          aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n        />\n        <button\n          onClick={onXButtonClick}\n          aria-label={arialabelXButton}\n          data-testid=\"closeButton\"\n          className={classNames(styles['sticky-note__x-button'])}\n          type=\"button\"\n        >\n          <Icon svgIcon={X} color=\"black\" size={IconSize.XXSmall} />\n        </button>\n        <div className={classNames(styles['sticky-note__footer'])}>{footerText && <span>{footerText}</span>}</div>\n        <div className={classNames(styles['sticky-note__triangle'])}>\n          <Triangle type={triangleType} />\n        </div>\n      </div>\n      {error && (\n        <p className={styles['sticky-note__error-text']} id={errorTextId}>\n          {errorText}\n        </p>\n      )}\n    </div>\n  );\n};\n\nexport default StickyNote;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/StickyNote/Close.tsx","../../../src/components/StickyNote/Triangle.tsx","../../../src/components/StickyNote/StickyNote.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { useHover } from '../../hooks/useHover';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { mergeRefs } from '../../utils/refs';\nimport Icon from '../Icon';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface CloseProps {\n  /** Function is called when user clicks the button */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Sets the aria-label of the button */\n  ariaLabel?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\n/*\n  Denne er kopiert fra Close-komponent. \n  Det er for å kunne ha en egen lokal variant for StickyNote. \n  Likt som i Figma.\n */\n\nconst Close = React.forwardRef(function ButtonForwardedRef(props: CloseProps, ref: React.ForwardedRef<HTMLButtonElement>) {\n  const { testId, ariaLabel = 'Lukk', onClick } = props;\n  const { hoverRef, isHovered } = useHover();\n\n  const iconSize = useIsMobileBreakpoint() ? 38 : 48;\n\n  const closeClasses = classNames(styles.close);\n\n  return (\n    <button\n      ref={mergeRefs([ref, hoverRef])}\n      data-testid={testId}\n      className={closeClasses}\n      aria-label={ariaLabel}\n      onClick={onClick}\n      type=\"button\"\n    >\n      <span className={classNames(styles['close__inner-container'])}>\n        <Icon svgIcon={X} color=\"black\" size={iconSize} isHovered={isHovered} />\n      </span>\n    </button>\n  );\n});\n\nexport default Close;\n","import React from 'react';\n\ninterface TriangleProps {\n  isHover: boolean;\n  isFocus: boolean;\n  isActive: boolean;\n  isError: boolean;\n}\n\nexport interface Palette {\n  border: string;\n  background: string;\n}\n\nconst Triangle: React.FC<TriangleProps> = ({ isHover, isFocus, isActive, isError }) => {\n  const palette = ((): Palette => {\n    const colors: Palette = {\n      border: 'var(--component-stickynote-border-normal)',\n      background: 'var(--component-stickynote-background-fold-normal-light)',\n    };\n\n    if (!isError) {\n      if (isHover) {\n        colors.background = 'var(--component-stickynote-background-fold-normal-medium)';\n      }\n      if (isFocus) {\n        colors.border = 'var(--color-action-border-onlight-focus)';\n        colors.background = 'var(--component-stickynote-background-fold-normal-medium)';\n      }\n      if (isActive) {\n        colors.background = 'var(--component-stickynote-background-fold-normal-dark)';\n      }\n    } else {\n      colors.border = 'var(--component-stickynote-border-error)';\n      colors.background = 'var(--component-stickynote-background-fold-error-light)';\n      if (isHover) {\n        colors.background = 'var(--component-stickynote-background-fold-error-medium)';\n      }\n      if (isFocus) {\n        colors.border = 'var(--color-action-border-onlight-focus)';\n        colors.background = 'var(--component-stickynote-background-fold-error-medium)';\n      }\n      if (isActive) {\n        colors.background = 'var(--component-stickynote-background-fold-error-dark)';\n      }\n    }\n    return colors;\n  })();\n\n  let svg: React.ReactNode;\n\n  if (isFocus) {\n    svg = (\n      <svg width=\"21\" height=\"21\" viewBox=\"0 0 21 21\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <mask id=\"path-1-inside-1_7753_1401\" fill=\"white\">\n          <path d=\"M0.493163 20.9211L0.276366 20.9211L0.276367 0.921142L20.2764 0.921143L20.2764 1.13794L0.493163 20.9211Z\" />\n        </mask>\n        <path\n          d=\"M0.493163 20.9211L0.276366 20.9211L0.276367 0.921142L20.2764 0.921143L20.2764 1.13794L0.493163 20.9211Z\"\n          fill={palette.background}\n        />\n        <path\n          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\"\n          fill={palette.border}\n          mask=\"url(#path-1-inside-1_7753_1401)\"\n        />\n      </svg>\n    );\n  } else {\n    svg = (\n      <svg width=\"21\" height=\"21\" viewBox=\"0 0 21 21\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <mask id=\"path-1-inside-1_7717_293537\" fill=\"white\">\n          <path d=\"M0.923827 20.9211L0.70703 20.9211L0.707031 0.921142L20.707 0.921143L20.707 1.13794L0.923827 20.9211Z\" />\n        </mask>\n        <path\n          d=\"M0.923827 20.9211L0.70703 20.9211L0.707031 0.921142L20.707 0.921143L20.707 1.13794L0.923827 20.9211Z\"\n          fill={palette.background}\n        />\n        <path\n          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\"\n          fill={palette.border}\n          mask=\"url(#path-1-inside-1_7717_293537)\"\n        />\n      </svg>\n    );\n  }\n\n  return <>{svg}</>;\n};\n\nexport default Triangle;\n","import React, { useLayoutEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Close from './Close';\nimport Triangle from './Triangle';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\n\nimport styles from './styles.module.scss';\n\nexport interface StickyNoteProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n  /** Aria label for the delete/close button */\n  arialabelXButton: string;\n  /** Activates the error styling */\n  error?: boolean;\n  /** Error text to show below the note */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Text shown under the textarea  */\n  footerText?: string;\n  /** Function run when clicking the delete/close button */\n  onXButtonClick?: () => void;\n  /** Function run if user clicks the component while it is disabled */\n  onClickWhileDisabled?: () => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Timestamp shown over the textarea  */\n  timestamp: string;\n  /** Classname for the outer wrapper */\n  wrapperClassName?: string;\n}\n\nconst StickyNote: React.FC<StickyNoteProps> = (props: StickyNoteProps) => {\n  const {\n    wrapperClassName,\n    timestamp,\n    onXButtonClick,\n    arialabelXButton,\n    footerText,\n    error,\n    errorText,\n    errorTextId,\n    onClickWhileDisabled,\n    testId,\n    ...textareaProps\n  } = props;\n  const errorTextUuid = useUuid(errorTextId);\n  const stickynoteRef = useRef<HTMLDivElement>(null);\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const { isFocused: isTextareaFocused } = usePseudoClasses<HTMLTextAreaElement>(textareaRef);\n  const { isHovered, isActive } = usePseudoClasses<HTMLDivElement>(stickynoteRef);\n\n  const handleWrapperClick = (event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>): void => {\n    if ((event.target as HTMLElement).closest('button')) {\n      return;\n    }\n    if (textareaProps.disabled) {\n      if (onClickWhileDisabled) onClickWhileDisabled();\n      return;\n    }\n    textareaRef.current?.focus();\n  };\n\n  const resizeTextarea = (): void => {\n    const textarea = textareaRef.current;\n    if (!textarea) return;\n    resizeTarget(textarea);\n  };\n\n  const resizeTarget = (target: HTMLTextAreaElement): void => {\n    // Reset field height\n    target.style.height = 'inherit';\n    // Set new height\n    target.style.height = `${target.scrollHeight}px`;\n  };\n\n  useLayoutEffect(() => {\n    resizeTextarea();\n    // Must run after the shadow DOM has been set up to work on microweb\n    setTimeout(() => resizeTextarea(), 1000);\n  }, []);\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    const textarea = e.target as HTMLTextAreaElement;\n    resizeTarget(textarea);\n    if (textareaProps.onChange) textareaProps.onChange(e);\n  };\n\n  return (\n    <div>\n      <div\n        data-testid={testId}\n        ref={stickynoteRef}\n        className={classNames(styles['sticky-note'], wrapperClassName, {\n          [styles['sticky-note--focused']]: isTextareaFocused,\n          [styles['sticky-note--active']]: isActive,\n          [styles['sticky-note--hovered']]: isHovered && !isTextareaFocused && !textareaProps.disabled,\n          [styles['sticky-note--error']]: error,\n        })}\n        onClick={handleWrapperClick}\n        role=\"textbox\"\n        tabIndex={-1}\n        onKeyDown={e => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            handleWrapperClick(e as React.KeyboardEvent<HTMLDivElement>);\n          }\n        }}\n      >\n        <div className={classNames(styles['sticky-note__header'])}>\n          {timestamp && <span className={styles['sticky-note__header__timestamp']}>{timestamp}</span>}\n        </div>\n        <textarea\n          ref={textareaRef}\n          data-testid={`${testId}-textarea`}\n          className={classNames(styles['sticky-note__textarea'], textareaProps.className)}\n          {...textareaProps}\n          onChange={handleChange}\n          aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n        />\n        <Close onClick={onXButtonClick} ariaLabel={arialabelXButton} testId=\"closeButton\" />\n        <div className={classNames(styles['sticky-note__footer'])}>{footerText && <span>{footerText}</span>}</div>\n        <div className={classNames(styles['sticky-note__triangle'])}>\n          <Triangle isHover={isHovered} isActive={isActive} isFocus={isTextareaFocused} isError={!!error} />\n        </div>\n      </div>\n      {error && (\n        <p className={styles['sticky-note__error-text']} id={errorTextId}>\n          {errorText}\n        </p>\n      )}\n    </div>\n  );\n};\n\nexport default StickyNote;\n"],"names":["React"],"mappings":"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"}

package/components/StickyNote/styles.module.scss

@@ -1,52 +1,51 @@
+@use 'sass:map';
 @use '../../scss/font-settings' as font-settings;
+@use '../../scss/font-mixins' as fonts;
+@use '../../scss/breakpoints' as breakpoints;
 @import '../../scss/supernova/styles/colors.css';
 
 .sticky-note {
+  $sticky-note: &;
+
   position: relative;
-  background-color: var(--core-color-banana-50);
+  background-color: var(--component-stickynote-background-normal-light);
   width: 100%;
-  border: var(--core-color-banana-300) 1px solid;
+  max-width: 32rem;
+  border: var(--component-stickynote-border-normal) 1px solid;
   padding: 12px;
   overflow: hidden;
   clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
 
   &--focused {
-    background-color: var(--core-color-banana-50);
-    border-color: var(--core-color-banana-600);
+    box-shadow: inset 0 0 0 1px var(--color-action-border-onlight-focus);
+    border-color: var(--color-action-border-onlight-focus);
+    background-color: var(--component-stickynote-background-normal-medium);
   }
 
   &--hovered {
-    background-color: var(--core-color-banana-100);
-    border: var(--core-color-banana-100) 1px solid;
+    background-color: var(--component-stickynote-background-normal-medium);
   }
 
-  &--error {
-    background-color: var(--core-color-cherry-50);
-    border: var(--core-color-cherry-300) 1px solid;
+  &--active {
+    background-color: var(--component-stickynote-background-normal-dark);
   }
 
-  &__x-button {
-    cursor: pointer;
-    background-color: transparent;
-    color: var(--color-base-text-onlight);
-    border: 0;
-    width: 2.75rem;
-    height: 2.75rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: absolute;
-    top: 2px;
-    right: 2px;
+  &--error {
+    background-color: var(--component-stickynote-background-error-light);
+    border: var(--component-stickynote-border-error) 1px solid;
+
+    &#{$sticky-note}--hovered {
+      background-color: var(--component-stickynote-background-error-medium);
+    }
 
-    &:hover {
-      background-color: var(--core-color-banana-200); // todo: bestem farge her
-      outline: 1px solid var(--core-color-banana-500); // todo: bestem farge her
+    &#{$sticky-note}--focused {
+      box-shadow: inset 0 0 0 1px var(--color-action-border-onlight-focus);
+      border-color: var(--color-action-border-onlight-focus);
+      background-color: var(--component-stickynote-background-error-medium);
     }
 
-    &:focus-visible {
-      background-color: var(--color-action-background-transparent-onlight-hoverselected);
-      outline: 2px solid var(--color-action-border-onlight-focus);
+    &#{$sticky-note}--active {
+      background-color: var(--component-stickynote-background-error-dark);
     }
   }
 
@@ -57,8 +56,9 @@
     align-items: center;
 
     &__timestamp {
+      @include fonts.compact-data;
+
       color: var(--color-placeholder-text-onlight);
-      font-size: 1rem;
     }
   }
 
@@ -79,9 +79,9 @@
   }
 
   &__footer {
+    @include fonts.image-credit;
+
     color: var(--color-placeholder-text-onlight);
-    font-size: 0.75rem;
-    font-style: italic;
   }
 
   &__triangle {
@@ -93,9 +93,81 @@
   }
 
   &__error-text {
+    @include fonts.sublabel-subdued;
+
     color: var(--color-notification-status-error);
-    line-height: 1.875rem;
-    font-size: font-settings.$font-size-sm;
-    margin-top: 0.75rem;
+    margin-top: 0.5rem;
+  }
+}
+
+$desktop-size: 3rem;
+$mobile-inner-size: 2.375rem;
+$mobile-outer-size: 2.75rem;
+
+.close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  height: $mobile-outer-size;
+  width: $mobile-outer-size;
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    height: $desktop-size;
+    width: $desktop-size;
+  }
+
+  &--small {
+    height: $mobile-outer-size;
+    width: $mobile-outer-size;
+  }
+
+  &__inner-container {
+    width: $mobile-inner-size;
+    height: $mobile-inner-size;
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      height: $desktop-size;
+      width: $desktop-size;
+    }
+
+    &--small {
+      width: $mobile-inner-size;
+      height: $mobile-inner-size;
+    }
+
+    :hover > & {
+      background-color: var(--component-stickynote-background-transparent-onlight-hover);
+    }
+
+    :active > & {
+      background-color: var(--component-stickynote-background-transparent-onlight-active);
+    }
+
+    :focus-visible > & {
+      outline: 3px solid var(--color-action-border-onlight-focus);
+      border-radius: 0;
+      border: 0;
+    }
+
+    &--error {
+      :hover > & {
+        background-color: var(--component-stickynote-background-transparent-error-hover);
+      }
+
+      :active > & {
+        background-color: var(--component-stickynote-background-transparent-error-active);
+      }
+    }
   }
 }

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

@@ -1,4 +1,9 @@
 export type Styles = {
+  close: string;
+  'close__inner-container': string;
+  'close__inner-container--error': string;
+  'close__inner-container--small': string;
+  'close--small': string;
   'sticky-note': string;
   'sticky-note__error-text': string;
   'sticky-note__footer': string;
@@ -6,7 +11,7 @@ export type Styles = {
   'sticky-note__header__timestamp': string;
   'sticky-note__textarea': string;
   'sticky-note__triangle': string;
-  'sticky-note__x-button': string;
+  'sticky-note--active': string;
   'sticky-note--error': string;
   'sticky-note--focused': string;
   'sticky-note--hovered': string;

package/constants.d.ts

@@ -70,6 +70,7 @@ export declare enum AnalyticsId {
     ExpanderListExpander = "expander-list-expander",
     EyebrowHeader = "eyebrow-header",
     FavoriteButton = "favorite-button",
+    FormFieldTag = "form-field-tag",
     FormGroup = "form-group",
     FormLayout = "form-layout",
     HelpBubble = "help-bubble",

package/constants.js

@@ -48,6 +48,7 @@ var AnalyticsId = /* @__PURE__ */ ((AnalyticsId2) => {
   AnalyticsId2["ExpanderListExpander"] = "expander-list-expander";
   AnalyticsId2["EyebrowHeader"] = "eyebrow-header";
   AnalyticsId2["FavoriteButton"] = "favorite-button";
+  AnalyticsId2["FormFieldTag"] = "form-field-tag";
   AnalyticsId2["FormGroup"] = "form-group";
   AnalyticsId2["FormLayout"] = "form-layout";
   AnalyticsId2["HelpBubble"] = "help-bubble";

package/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../src/constants.ts"],"sourcesContent":["export enum IconSize {\n  XXSmall = 24,\n  XSmall = 38,\n  Small = 48,\n  Medium = 64,\n  Large = 80,\n  XLarge = 130,\n}\n\nexport enum ZIndex {\n  OverlayScreen = 1300000,\n  PopOver = 11000,\n  LightBoxButtons = 1000,\n}\n\nexport const AVERAGE_CHARACTER_WIDTH_PX = 12;\n\nexport interface HTMLButtonProps {\n  autoFocus?: boolean;\n  disabled?: boolean;\n  form?: string;\n  formAction?: string;\n  formEncType?: string;\n  formMethod?: string;\n  formNoValidate?: boolean;\n  formTarget?: string;\n  name?: string;\n  type?: 'submit' | 'reset' | 'button' | string;\n  value?: string | string[] | number;\n  id?: string;\n}\n\nexport type AnchorTarget = '_self' | '_blank' | '_parent' | '_top';\n\nexport interface HTMLAnchorProps {\n  download?: string;\n  href?: string;\n  hrefLang?: string;\n  media?: string;\n  ping?: string;\n  rel?: AnchorTarget;\n  target?: string;\n  referrerPolicy?:\n    | ''\n    | 'same-origin'\n    | 'no-referrer'\n    | 'no-referrer-when-downgrade'\n    | 'origin'\n    | 'origin-when-cross-origin'\n    | 'strict-origin'\n    | 'strict-origin-when-cross-origin'\n    | 'unsafe-url';\n}\n\nexport type ButtonVariant = 'secondary' | 'tertiary' | string | undefined | null;\n\nexport enum FormOnColor {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  ondark = 'ondark',\n  oninvalid = 'oninvalid',\n}\n\nexport enum FormSize {\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum AnalyticsId {\n  AnchorLink = 'anchor-link',\n  ArticleTeaser = 'article-teaser',\n  Avatar = 'avatar',\n  Badge = 'badge',\n  Button = 'button',\n  Checkbox = 'checkbox',\n  Chip = 'chip',\n  Close = 'close',\n  DictionaryTrigger = 'dictionary-trigger',\n  Drawer = 'Drawer',\n  Dropdown = 'dropdown',\n  Duolist = 'duolist',\n  EmptyState = 'empty-state',\n  Expander = 'expander',\n  ExpanderHierarchy = 'expander-hierarchy',\n  ExpanderHierarchyExpander = 'expander-hierarchy-expander',\n  ExpanderList = 'expander-list',\n  ExpanderListExpander = 'expander-list-expander',\n  EyebrowHeader = 'eyebrow-header',\n  FavoriteButton = 'favorite-button',\n  FormGroup = 'form-group',\n  FormLayout = 'form-layout',\n  HelpBubble = 'help-bubble',\n  HelpDrawer = 'help-drawer',\n  HelpExpanderInline = 'help-expander-inline',\n  HelpExpanderStandalone = 'help-expander-standalone',\n  HelpTooltip = 'help-tooltip',\n  HelpTriggerIcon = 'help-trigger-icon',\n  HelpTriggerInline = 'help-trigger-inline',\n  HelpTriggerStandalone = 'help-trigger-standalone',\n  HighlightPanel = 'highlight-panel',\n  Icon = 'icon',\n  Illustration = 'Illustration',\n  InfoTeaser = 'info-teaser',\n  Input = 'input',\n  Label = 'label',\n  Link = 'link',\n  LinkList = 'link-list',\n  List = 'list',\n  Loader = 'loader',\n  Logo = 'logo',\n  Modal = 'modal',\n  NotificationPanel = 'notification-panel',\n  PanelOld = 'panel',\n  PanelList = 'panel-list',\n  PopMenu = 'pop-menu',\n  PopOver = 'pop-over',\n  Portal = 'portal',\n  PromoPanel = 'promo-panel',\n  RadioButton = 'radio-button',\n  Select = 'select',\n  SharingStatus = 'sharing-status',\n  Slider = 'slider',\n  Spacer = 'spacer',\n  StatusDot = 'status-dot',\n  Step = 'step',\n  StepButtons = 'step-buttons',\n  Stepper = 'stepper',\n  Sublabel = 'sublabel',\n  Table = 'table',\n  Tag = 'tag',\n  TagList = 'tag-list',\n  Textarea = 'textarea',\n  Tile = 'tile',\n  Title = 'title',\n  Toggle = 'toggle',\n  Validation = 'validation',\n}\n\nexport enum KeyboardEventKey {\n  Enter = 'Enter',\n  Escape = 'Escape',\n  ArrowDown = 'ArrowDown',\n  ArrowUp = 'ArrowUp',\n  ArrowRight = 'ArrowRight',\n  ArrowLeft = 'ArrowLeft',\n  Home = 'Home',\n  End = 'End',\n  Space = ' ',\n  Tab = 'Tab',\n}\n\nexport enum LanguageLocales {\n  NORWEGIAN = 'nb-NO',\n  NORWEGIAN_NYNORSK = 'nn-NO',\n  ENGLISH = 'en-GB',\n  SAMI_NORTHERN = 'se-NO',\n}\n"],"names":["IconSize","ZIndex","FormOnColor","FormSize","AnalyticsId","KeyboardEventKey","LanguageLocales"],"mappings":"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"}
+{"version":3,"file":"constants.js","sources":["../src/constants.ts"],"sourcesContent":["export enum IconSize {\n  XXSmall = 24,\n  XSmall = 38,\n  Small = 48,\n  Medium = 64,\n  Large = 80,\n  XLarge = 130,\n}\n\nexport enum ZIndex {\n  OverlayScreen = 1300000,\n  PopOver = 11000,\n  LightBoxButtons = 1000,\n}\n\nexport const AVERAGE_CHARACTER_WIDTH_PX = 12;\n\nexport interface HTMLButtonProps {\n  autoFocus?: boolean;\n  disabled?: boolean;\n  form?: string;\n  formAction?: string;\n  formEncType?: string;\n  formMethod?: string;\n  formNoValidate?: boolean;\n  formTarget?: string;\n  name?: string;\n  type?: 'submit' | 'reset' | 'button' | string;\n  value?: string | string[] | number;\n  id?: string;\n}\n\nexport type AnchorTarget = '_self' | '_blank' | '_parent' | '_top';\n\nexport interface HTMLAnchorProps {\n  download?: string;\n  href?: string;\n  hrefLang?: string;\n  media?: string;\n  ping?: string;\n  rel?: AnchorTarget;\n  target?: string;\n  referrerPolicy?:\n    | ''\n    | 'same-origin'\n    | 'no-referrer'\n    | 'no-referrer-when-downgrade'\n    | 'origin'\n    | 'origin-when-cross-origin'\n    | 'strict-origin'\n    | 'strict-origin-when-cross-origin'\n    | 'unsafe-url';\n}\n\nexport type ButtonVariant = 'secondary' | 'tertiary' | string | undefined | null;\n\nexport enum FormOnColor {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  ondark = 'ondark',\n  oninvalid = 'oninvalid',\n}\n\nexport enum FormSize {\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum AnalyticsId {\n  AnchorLink = 'anchor-link',\n  ArticleTeaser = 'article-teaser',\n  Avatar = 'avatar',\n  Badge = 'badge',\n  Button = 'button',\n  Checkbox = 'checkbox',\n  Chip = 'chip',\n  Close = 'close',\n  DictionaryTrigger = 'dictionary-trigger',\n  Drawer = 'Drawer',\n  Dropdown = 'dropdown',\n  Duolist = 'duolist',\n  EmptyState = 'empty-state',\n  Expander = 'expander',\n  ExpanderHierarchy = 'expander-hierarchy',\n  ExpanderHierarchyExpander = 'expander-hierarchy-expander',\n  ExpanderList = 'expander-list',\n  ExpanderListExpander = 'expander-list-expander',\n  EyebrowHeader = 'eyebrow-header',\n  FavoriteButton = 'favorite-button',\n  FormFieldTag = 'form-field-tag',\n  FormGroup = 'form-group',\n  FormLayout = 'form-layout',\n  HelpBubble = 'help-bubble',\n  HelpDrawer = 'help-drawer',\n  HelpExpanderInline = 'help-expander-inline',\n  HelpExpanderStandalone = 'help-expander-standalone',\n  HelpTooltip = 'help-tooltip',\n  HelpTriggerIcon = 'help-trigger-icon',\n  HelpTriggerInline = 'help-trigger-inline',\n  HelpTriggerStandalone = 'help-trigger-standalone',\n  HighlightPanel = 'highlight-panel',\n  Icon = 'icon',\n  Illustration = 'Illustration',\n  InfoTeaser = 'info-teaser',\n  Input = 'input',\n  Label = 'label',\n  Link = 'link',\n  LinkList = 'link-list',\n  List = 'list',\n  Loader = 'loader',\n  Logo = 'logo',\n  Modal = 'modal',\n  NotificationPanel = 'notification-panel',\n  PanelOld = 'panel',\n  PanelList = 'panel-list',\n  PopMenu = 'pop-menu',\n  PopOver = 'pop-over',\n  Portal = 'portal',\n  PromoPanel = 'promo-panel',\n  RadioButton = 'radio-button',\n  Select = 'select',\n  SharingStatus = 'sharing-status',\n  Slider = 'slider',\n  Spacer = 'spacer',\n  StatusDot = 'status-dot',\n  Step = 'step',\n  StepButtons = 'step-buttons',\n  Stepper = 'stepper',\n  Sublabel = 'sublabel',\n  Table = 'table',\n  Tag = 'tag',\n  TagList = 'tag-list',\n  Textarea = 'textarea',\n  Tile = 'tile',\n  Title = 'title',\n  Toggle = 'toggle',\n  Validation = 'validation',\n}\n\nexport enum KeyboardEventKey {\n  Enter = 'Enter',\n  Escape = 'Escape',\n  ArrowDown = 'ArrowDown',\n  ArrowUp = 'ArrowUp',\n  ArrowRight = 'ArrowRight',\n  ArrowLeft = 'ArrowLeft',\n  Home = 'Home',\n  End = 'End',\n  Space = ' ',\n  Tab = 'Tab',\n}\n\nexport enum LanguageLocales {\n  NORWEGIAN = 'nb-NO',\n  NORWEGIAN_NYNORSK = 'nn-NO',\n  ENGLISH = 'en-GB',\n  SAMI_NORTHERN = 'se-NO',\n}\n"],"names":["IconSize","ZIndex","FormOnColor","FormSize","AnalyticsId","KeyboardEventKey","LanguageLocales"],"mappings":"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"}

package/designsystem-react.css

@@ -8,93 +8,8 @@
  */
 
 :root {
-  --core-color-black: #000000;
-  --core-color-white: #ffffff;
-  --core-color-blueberry-50: #e4f7f9;
-  --core-color-neutral-500: #989693;
-  --core-color-neutral-700: #62625f;
-  --color-action-text-ondark: #ffffff;
-
-  /* Hoverfarge for bakgrunn på interaktive elementer - onLight */
-  --color-action-background-transparent-onlight-hover: #126f8721;
-
-  /* Hoverfarge for bakgrunn på interaktive elementer - onLight selected */
-  --color-action-background-transparent-onlight-hoverselected: #126f872b;
-  --color-notification-background-info: #e4f7f9;
-  --color-notification-background-error: #fff2ea;
-  --color-destructive-graphics-normal: #c83521;
-  --color-base-text-onlight: #000000;
-  --color-action-background-ondark: #ffffff;
-  --color-action-border-ondark: #ffffff;
-  --color-action-border-ondark-focus: #ffffff;
-  --color-action-graphics-ondark: #ffffff;
-  --color-base-text-ondark: #ffffff;
-  --color-base-background-neutral: #f5f3f3;
-  --color-base-background-white: #ffffff;
-  --color-base-graphics-ondark: #ffffff;
-  --color-disabled-text-ondark: #ffffff;
-  --color-action-border-onlight: #188097;
-  --color-action-border-onlight-hover: #08667c;
-  --color-action-border-onlight-focus: #000000;
-  --color-action-text-onlight: #126f87;
-  --color-action-text-onlight-hover: #08667c;
   --color-action-graphics-onlight: #188097;
   --color-action-graphics-onlight-hover: #126f87;
-  --color-action-graphics-ondark-hover: #e4f7f9;
-  --color-action-background-ondark-hover: #e4f7f9;
-  --color-action-background-ondark-selected: #cae7ed;
-  --color-action-background-ondark-hoverselected: #afdae3;
-  --color-action-background-onlight: #188097;
-  --color-action-background-onlight-hover: #08667c;
-  --color-notification-background-warning: #fdf8df;
-  --color-notification-background-success: #e6f8ee;
-  --color-notification-border-info: #08667c;
-  --color-notification-border-error: #a31f0e;
-  --color-notification-border-warning: #ab7c00;
-  --color-notification-border-success: #078141;
-  --color-notification-graphics-info: #08667c;
-  --color-notification-graphics-error: #a31f0e;
-  --color-notification-graphics-warning: #ab7c00;
-  --color-notification-graphics-success: #078141;
-  --color-notification-status-warning: #ebc840;
-  --color-notification-status-success: #099150;
-  --color-destructive-graphics-hover: #b62e1c;
-  --color-destructive-text-normal: #b62e1c;
-  --color-destructive-text-hover: #a31f0e;
-  --color-disabled-background: #d6d4d3;
-  --color-disabled-text: #62625f;
-  --color-disabled-border: #7d7c79;
-  --color-disabled-graphics: #62625f;
-  --color-disabled-border-ondark: #d6d4d3;
-  --color-disabled-graphics-ondark: #d6d4d3;
-  --color-base-background-blueberry: #e4f7f9;
-  --color-base-background-cherry: #fff2ea;
-  --color-base-background-dark-blueberry: #188097;
-  --color-base-background-dark-cherry: #c83521;
-  --color-base-graphics-onlight: #000000;
-  --color-base-border-ondark: #d6d4d3;
-  --color-base-border-onlight: #7d7c79;
-  --color-base-border-onlight-emphasized: #62625f;
-  --color-help-background-normal: #f4ecfe;
-  --color-help-graphics-normal: #5b22a6;
-  --color-help-border-normal: #5b22a6;
-  --core-color-blueberry-100: #cae7ed;
-  --core-color-blueberry-200: #afdae3;
-  --core-color-blueberry-300: #7abecc;
-  --core-color-blueberry-400: #58aabb;
-  --core-color-blueberry-500: #188097;
-  --core-color-blueberry-600: #126f87;
-  --core-color-blueberry-700: #08667c;
-  --core-color-blueberry-800: #06596c;
-  --core-color-blueberry-900: #084350;
-  --core-color-neutral-50: #f5f3f3;
-  --core-color-neutral-100: #eae7e7;
-  --core-color-neutral-200: #d6d4d3;
-  --core-color-neutral-300: #bdbab9;
-  --core-color-neutral-400: #aaa8a6;
-  --core-color-neutral-600: #7d7c79;
-  --core-color-neutral-800: #474745;
-  --core-color-neutral-900: #2b2c2b;
   --core-color-banana-50: #fdf8df;
   --core-color-banana-100: #fcf2bf;
   --core-color-banana-200: #f9ea9f;
@@ -105,6 +20,16 @@
   --core-color-banana-700: #ab7c00;
   --core-color-banana-800: #916500;
   --core-color-banana-900: #764f00;
+  --core-color-blueberry-50: #e4f7f9;
+  --core-color-blueberry-100: #cae7ed;
+  --core-color-blueberry-200: #afdae3;
+  --core-color-blueberry-300: #7abecc;
+  --core-color-blueberry-400: #58aabb;
+  --core-color-blueberry-500: #188097;
+  --core-color-blueberry-600: #126f87;
+  --core-color-blueberry-700: #08667c;
+  --core-color-blueberry-800: #06596c;
+  --core-color-blueberry-900: #084350;
   --core-color-cherry-50: #fff2ea;
   --core-color-cherry-100: #f7e1d2;
   --core-color-cherry-200: #eec0a5;
@@ -125,6 +50,16 @@
   --core-color-kiwi-700: #0ca161;
   --core-color-kiwi-800: #099150;
   --core-color-kiwi-900: #078141;
+  --core-color-neutral-50: #f5f3f3;
+  --core-color-neutral-100: #eae7e7;
+  --core-color-neutral-200: #d6d4d3;
+  --core-color-neutral-300: #bdbab9;
+  --core-color-neutral-400: #aaa8a6;
+  --core-color-neutral-500: #989693;
+  --core-color-neutral-600: #7d7c79;
+  --core-color-neutral-700: #62625f;
+  --core-color-neutral-800: #474745;
+  --core-color-neutral-900: #2b2c2b;
   --core-color-plum-50: #f4ecfe;
   --core-color-plum-100: #e5d5fb;
   --core-color-plum-200: #cfb1f6;
@@ -135,8 +70,84 @@
   --core-color-plum-700: #5c27a1;
   --core-color-plum-800: #4c1b8c;
   --core-color-plum-900: #3c1471;
+  --core-color-black: #000000;
+  --core-color-white: #ffffff;
+  --color-action-border-ondark: #ffffff;
+  --color-action-text-ondark: #ffffff;
+  --color-action-graphics-ondark: #ffffff;
+  --color-notification-background-info: #e4f7f9;
+  --color-notification-background-error: #fff2ea;
+  --color-notification-background-warning: #fdf8df;
+  --color-notification-background-success: #e6f8ee;
+  --color-notification-border-info: #08667c;
+  --color-notification-border-error: #a31f0e;
+  --color-notification-border-warning: #ab7c00;
+  --color-notification-border-success: #078141;
+  --color-notification-graphics-info: #08667c;
+  --color-notification-graphics-error: #a31f0e;
+  --color-notification-graphics-warning: #ab7c00;
+  --color-notification-graphics-success: #078141;
+  --color-notification-status-info: #188097;
+  --color-notification-status-error: #c83521;
+  --color-notification-status-warning: #ebc840;
+  --color-notification-status-success: #099150;
+  --color-disabled-background: #d6d4d3;
+  --color-disabled-text: #62625f;
+  --color-disabled-border: #7d7c79;
   --color-destructive-background-emphasized: #f7e1d2;
   --color-destructive-background-normal: #fff2ea;
+  --color-destructive-graphics-normal: #c83521;
+  --color-destructive-graphics-hover: #b62e1c;
+  --color-destructive-text-normal: #b62e1c;
+  --color-destructive-text-hover: #a31f0e;
+  --color-help-background-normal: #f4ecfe;
+  --color-help-graphics-normal: #5c27a1;
+  --color-help-border-normal: #5c27a1;
+  --color-disabled-graphics: #62625f;
+  --color-destructive-border-normal: #c83521;
+  --color-action-border-ondark-hover: #e4f7f9;
+  --color-action-graphics-ondark-hover: #e4f7f9;
+
+  /* Hoverfarge for bakgrunn på interaktive elementer - onLight */
+  --color-action-background-transparent-onlight-hover: #126f8721;
+
+  /* Hoverfarge for bakgrunn på interaktive elementer - onLight selected */
+  --color-action-background-transparent-onlight-hoverselected: #126f872b;
+  --color-action-border-ondark-focus: #ffffff;
+  --color-disabled-border-ondark: #d6d4d3;
+  --color-disabled-graphics-ondark: #d6d4d3;
+  --color-disabled-text-ondark: #ffffff;
+  --color-action-text-onlight: #126f87;
+  --color-action-text-onlight-hover: #08667c;
+  --color-action-border-onlight: #188097;
+  --color-action-border-onlight-hover: #08667c;
+  --color-action-border-onlight-focus: #000000;
+  --color-action-background-ondark: #ffffff;
+  --color-action-background-ondark-hover: #e4f7f9;
+  --color-action-background-ondark-selected: #cae7ed;
+  --color-action-background-ondark-hoverselected: #afdae3;
+  --color-action-background-onlight: #188097;
+  --color-action-background-onlight-hover: #08667c;
+
+  /* Hoverfarge for bakgrunn på interaktive elementer - onDark */
+  --color-action-background-transparent-ondark-hover: #00000026;
+
+  /* Hoverfarge for bakgrunn på interaktive elementer - onDark selected */
+  --color-action-background-transparent-ondark-hoverselected: #000000bf;
+  --color-base-background-blueberry: #e4f7f9;
+  --color-base-background-cherry: #fff2ea;
+  --color-base-background-neutral: #f5f3f3;
+  --color-base-background-white: #ffffff;
+  --color-base-background-dark-blueberry: #188097;
+  --color-base-background-dark-cherry: #c83521;
+  --color-base-background-dark-neutral: #2b2c2b;
+  --color-base-text-onlight: #000000;
+  --color-base-text-ondark: #ffffff;
+  --color-base-border-ondark: #d6d4d3;
+  --color-base-border-onlight: #7d7c79;
+  --color-base-border-onlight-emphasized: #62625f;
+  --color-base-graphics-onlight: #000000;
+  --color-base-graphics-ondark: #ffffff;
   --brandcolor-white: #ffffff;
   --brandcolor-black: #000000;
   --brandcolor-neutral-verylight: #f5f3f3;
@@ -156,17 +167,6 @@
   --brandcolor-cherry-medium: #c83521;
   --brandcolor-cherry-mediumdark: #b62e1c;
   --brandcolor-cherry-dark: #a31f0e;
-  --color-notification-status-info: #188097;
-  --color-notification-status-error: #c83521;
-  --color-destructive-border-normal: #c83521;
-  --color-action-border-ondark-hover: #e4f7f9;
-
-  /* Hoverfarge for bakgrunn på interaktive elementer - onDark */
-  --color-action-background-transparent-ondark-hover: #00000026;
-
-  /* Hoverfarge for bakgrunn på interaktive elementer - onDark selected */
-  --color-action-background-transparent-ondark-hoverselected: #000000bf;
-  --color-base-background-dark-neutral: #2b2c2b;
 
   /* Placeholdertext in input- and textarea-controls */
   --color-placeholder-text-onlight: #62625f;
@@ -177,10 +177,10 @@
 
   /* In a few cases where coloured text is required to stress the semantics of an information notification text */
   --color-notification-text-info: #08667c;
-  --color-notification-text-warning: #916500;
 
   /* In a few cases where coloured text is required to stress the semantics of an error notification text */
   --color-notification-text-error: #a31f0e;
+  --color-notification-text-warning: #916500;
   --color-notification-text-success: #078141;
   --color-base-border-neutral-emphasized: #bdbab9;
   --color-notification-status-draft: #7d7c79;
@@ -193,9 +193,47 @@
 
   /* Background outside of modal and bottomsheet to mask inactive screen-area */
   --color-shadow-pagemask: #2c2b2cb8;
-  --color-help-border-subtle-wcag: #9153e2;
+  --color-help-border-subtle-wcag: #9862df;
   --color-help-graphics-dark: #4c1b8c;
   --color-help-border-dark: #4c1b8c;
   --color-help-graphics-verydark: #3c1471;
   --color-help-border-verydark: #3c1471;
+  --color-action-background-onlight-active: #06596c;
+  --color-action-background-like-transparent-but-opaque-onlight-hover: #e0ecef;
+  --color-action-background-like-transparent-but-opaque-onlight-hoverselected: #d7e7eb;
+  --color-action-background-stroke-onlight: #126f87;
+  --component-stickynote-background-normal-light: #fdf8df;
+  --component-stickynote-background-normal-medium: #fcf2bf;
+  --component-stickynote-background-normal-dark: #f9ea9f;
+  --component-stickynote-border-normal: #916500;
+  --component-stickynote-border-error: #d56147;
+  --component-stickynote-background-error-dark: #eec0a5;
+  --component-stickynote-background-error-medium: #f7e1d2;
+  --component-stickynote-background-error-light: #fff2ea;
+  --color-base-text-onlight-subdued: #000000;
+  --component-stickynote-background-fold-error-dark: #e39376;
+  --component-stickynote-background-fold-error-light: #f7e1d2;
+  --component-stickynote-background-fold-error-medium: #eec0a5;
+  --component-stickynote-background-fold-normal-light: #fcf2bf;
+  --component-stickynote-background-fold-normal-medium: #f9ea9f;
+  --component-stickynote-background-fold-normal-dark: #ebc840;
+  --component-stickynote-background-transparent-onlight-hover: #ebc84021;
+  --component-stickynote-background-transparent-onlight-active: #ebc8404d;
+  --component-stickynote-background-transparent-error-hover: #d5614721;
+  --component-stickynote-background-transparent-error-active: #d5614740;
+  --component-listelements-background-neutral-light: #f5f3f3;
+  --component-listelements-background-neutral-medium: #eae7e7;
+  --component-listelements-background-neutral-dark: #d6d4d3;
+  --component-listelements-border-neutral-light: #eae7e7;
+  --component-listelements-background-blueberry-light: #e4f7f9;
+  --component-listelements-background-blueberry-medium: #cae7ed;
+  --component-listelements-border-blueberry-light: #cae7ed;
+  --component-listelements-background-blueberry-dark: #afdae3;
+  --component-listelements-border-blueberry-normal: #188097;
+  --component-listelements-background-cherry-light: #fff2ea;
+  --component-listelements-background-cherry-medium: #f7e1d2;
+  --component-listelements-border-cherry-light: #f7e1d2;
+  --component-listelements-background-cherry-dark: #eec0a5;
+  --component-listelements-border-cherry-normal: #d56147;
+  --component-listelements-border-neutral-normal: #7d7c79;
 }

package/package.json

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

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

@@ -0,0 +1,8 @@
+declare const _default: {
+  "allRequired": "Alle felt må fylles ut",
+  "requiredField": "Må fylles ut",
+  "optional": "Valgfritt"
+}
+;
+
+export default _default;