@helsenorge/designsystem-react 15.0.0-beta.0 → 15.0.0

package/lib/components/RadioButton/styles.module.scss

@@ -1,42 +1,13 @@
 @use 'sass:map';
-@use 'sass:meta';
-@use 'sass:string';
 @use '../../scss/spacers' as spacers;
 @use '../../scss/palette' as palette;
 @use '../../scss/font-settings' as font-settings;
 @use '../../scss/breakpoints' as breakpoints;
+@use '../../scss/screen-reader' as *;
 
 $padding-clickable-area-top-bottom: 8px;
 $padding-clickable-area-left: 8px;
 
-@mixin dashed-border() {
-  box-shadow: none;
-  position: relative;
-
-  &::after {
-    position: absolute;
-    content: '';
-
-    $encoded-color: string.slice(meta.inspect(palette.$neutral600), 2);
-
-    // Variabler for å lettere styre dashen i background-imaget under
-    $stroke: 4;
-    $dash: 0.2;
-    $gap: 7;
-    $scale: 1;
-    $stroke-scaled: $stroke * $scale;
-    $dash-scaled: $dash * $scale;
-    $gap-scaled: $gap * $scale;
-
-    border-radius: 100px;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='%23#{$encoded-color}' stroke-width='#{$stroke-scaled}' stroke-dasharray='#{$dash-scaled},#{$gap-scaled}' stroke-linecap='square'/%3E%3C/svg%3E");
-    background-repeat: no-repeat;
-    width: 28px;
-    height: 28px;
-    inset: -2px;
-  }
-}
-
 .radio-button-errors {
   font-size: font-settings.$font-size-sm;
   font-weight: 600;
@@ -50,20 +21,20 @@ $padding-clickable-area-left: 8px;
   &__large {
     margin: spacers.getSpacer(2xs) 0;
 
-    &--focused {
+    &:has(input:focus-visible) {
       box-shadow: 0 0 0 spacers.getSpacer(3xs);
       color: palette.$neutral500;
     }
 
-    &--focused#{&}--on-blueberry {
+    &--on-blueberry:has(input:focus-visible) {
       color: palette.$blueberry500;
     }
 
-    &--focused#{&}--selected {
+    &:has(input:checked):has(input:focus-visible) {
       color: palette.$blueberry900;
     }
 
-    &--focused#{&}--invalid {
+    &--invalid:has(input:focus-visible) {
       color: palette.$cherry400;
     }
   }
@@ -86,7 +57,7 @@ $padding-clickable-area-left: 8px;
   }
 
   &--disabled {
-    cursor: default;
+    cursor: not-allowed;
     color: palette.$neutral700;
   }
 
@@ -99,7 +70,7 @@ $padding-clickable-area-left: 8px;
       background-color: palette.$neutral100;
     }
 
-    &--focused {
+    &:has(input:focus-visible) {
       border: 1px solid var(--color-action-border-ondark-focus);
     }
 
@@ -140,7 +111,7 @@ $padding-clickable-area-left: 8px;
     }
   }
 
-  &__large#{&}__large--selected-invalid {
+  &__large#{&}__large--invalid:has(input:checked) {
     background-color: palette.$cherry100;
     color: palette.$black;
 
@@ -173,7 +144,7 @@ $padding-clickable-area-left: 8px;
     }
   }
 
-  &__large--selected {
+  &__large:has(input:checked) {
     background-color: palette.$blueberry500;
     color: palette.$white;
 
@@ -203,244 +174,11 @@ $padding-clickable-area-left: 8px;
 }
 
 .radio-button {
-  appearance: none;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 10rem;
-  margin: 0 spacers.getSpacer(s) 0 0;
-  height: 1.5rem;
-  width: 1.5rem;
-  min-height: 1.5rem;
-  min-width: 1.5rem;
-  color: palette.$neutral700;
-  box-shadow: 0 0 0 spacers.getSpacer(4xs);
-  outline: none;
-
-  &:focus {
-    box-shadow: 0 0 0 spacers.getSpacer(3xs);
-    color: palette.$black;
-  }
-
-  &:hover {
-    box-shadow: 0 0 0 spacers.getSpacer(3xs);
-    background-color: palette.$neutral100;
-  }
-
-  :active > & {
-    box-shadow: 0 0 0 spacers.getSpacer(3xs);
-    color: palette.$black;
-  }
-
-  &:checked {
-    color: palette.$blueberry500;
-
-    &:hover {
-      box-shadow: 0 0 0 spacers.getSpacer(4xs);
-      background-color: palette.$blueberry50;
-    }
-
-    &:focus {
-      box-shadow: 0 0 0 spacers.getSpacer(3xs);
-      color: palette.$black;
-    }
-  }
-
-  &--on-blueberry {
-    color: palette.$blueberry500;
-
-    :hover > & {
-      background-color: palette.$blueberry100;
-    }
-  }
-
-  &--on-dark {
-    color: palette.$neutral200;
-
-    &:hover {
-      background-color: palette.$inverted-hover-old;
-      box-shadow: 0 0 0 spacers.getSpacer(3xs);
-    }
-
-    &:focus {
-      color: palette.$white;
-    }
-
-    :active > & {
-      box-shadow: 0 0 0 spacers.getSpacer(3xs);
-      color: palette.$white;
-    }
-
-    &:checked {
-      color: palette.$blueberry200;
-
-      &:hover {
-        background-color: palette.$inverted-hover-old;
-      }
-
-      &:focus {
-        color: palette.$white;
-      }
-    }
-  }
-
-  &--invalid {
-    color: palette.$cherry600;
-
-    &:hover {
-      background-color: palette.$cherry100;
-    }
-
-    &:active {
-      color: palette.$black;
-    }
-
-    &:focus {
-      color: palette.$black;
-    }
-
-    &:checked {
-      color: palette.$cherry600;
-
-      &:hover {
-        background-color: palette.$cherry100;
-      }
-    }
-  }
-
-  &--disabled {
-    cursor: default;
-
-    @include dashed-border;
-
-    background-color: transparent;
-
-    &:hover {
-      box-shadow: none;
-      background-color: transparent;
-    }
-
-    :hover > & {
-      background-color: transparent;
-    }
-
-    &:active {
-      color: palette.$neutral600;
-    }
-
-    &:checked {
-      color: palette.$neutral600;
-
-      &:hover {
-        box-shadow: none;
-        background-color: transparent;
-      }
-    }
-  }
-
-  // :before er dot i RadioButton
-  &:checked::before {
-    content: '';
-    display: flex;
-    background-color: palette.$blueberry500;
-    width: 0.875rem;
-    height: 0.875rem;
-    border-radius: 10rem;
-
-    // Vi overstyrer farger satt ved high-contrast mode i nettleser/os
-    @media (forced-colors: active) {
-      forced-color-adjust: none;
-      background-color: #fff !important;
-    }
-  }
-
-  &--on-dark:checked::before {
-    background-color: palette.$blueberry200;
-  }
-
-  &--invalid:checked::before {
-    background-color: palette.$cherry600;
-  }
-
-  &--disabled:checked::before {
-    background-color: palette.$neutral600;
-  }
-
-  &__large {
-    &:checked {
-      outline: none;
-      color: palette.$blueberry100;
-    }
-
-    &:hover {
-      box-shadow: 0 0 0 spacers.getSpacer(3xs);
-    }
-
-    &:focus {
-      box-shadow: 0 0 0 spacers.getSpacer(3xs);
-      color: palette.$black;
-    }
-
-    &:focus:checked {
-      color: palette.$white;
-    }
-
-    &:checked::before {
-      background-color: palette.$blueberry100;
-    }
-
-    &:checked:hover {
-      box-shadow: 0 0 0 spacers.getSpacer(4xs);
-      background-color: unset;
-    }
-
-    &:checked:hover:focus {
-      box-shadow: 0 0 0 spacers.getSpacer(3xs);
-      color: palette.$white;
-    }
-
-    &--invalid {
-      &:checked {
-        color: palette.$cherry500;
-      }
-
-      &:checked::before {
-        background-color: palette.$cherry500;
-      }
-
-      &:checked:hover {
-        background-color: transparent;
-      }
-
-      &:checked:focus {
-        color: palette.$black;
-      }
-
-      &:checked:focus:hover {
-        color: palette.$black;
-      }
-    }
-
-    &--disabled {
-      &:hover,
-      &:focus,
-      &:checked:hover {
-        box-shadow: none;
-      }
-
-      &:checked::before {
-        background-color: palette.$neutral600;
-      }
-    }
-  }
+  @include sr-only;
+}
 
-  // Vi overstyrer farger satt ved high-contrast mode i nettleser/os
-  @media (forced-colors: active) {
-    forced-color-adjust: none;
-    color: #fff !important;
-    background-color: transparent !important;
-  }
+.radio-button__marker-wrapper {
+  margin-right: spacers.getSpacer(s);
 }
 
 .radiobutton-sublabel-wrapper {

package/lib/components/RadioButton/styles.module.scss.d.ts

@@ -1,30 +1,20 @@
 export type Styles = {
   'radio-button': string;
-  'radio-button__large': string;
-  'radio-button__large--disabled': string;
-  'radio-button__large--invalid': string;
-  'radio-button--disabled': string;
-  'radio-button--invalid': string;
-  'radio-button--on-blueberry': string;
-  'radio-button--on-dark': string;
+  'radio-button__marker-wrapper': string;
   'radio-button-errors': string;
   'radio-button-label': string;
   'radio-button-label__large': string;
   'radio-button-label__large--disabled': string;
-  'radio-button-label__large--focused': string;
+  'radio-button-label__large--invalid': string;
   'radio-button-label__large--on-blueberry': string;
   'radio-button-label__large--on-grey': string;
-  'radio-button-label__large--selected': string;
-  'radio-button-label__large--selected-invalid': string;
   'radio-button-label--disabled': string;
   'radio-button-label--invalid': string;
   'radio-button-label--on-dark': string;
   'radio-button-wrapper': string;
   'radio-button-wrapper__large': string;
-  'radio-button-wrapper__large--focused': string;
   'radio-button-wrapper__large--invalid': string;
   'radio-button-wrapper__large--on-blueberry': string;
-  'radio-button-wrapper__large--selected': string;
   'radiobutton-afterlabelchildren-wrapper': string;
   'radiobutton-sublabel-wrapper': string;
 };

package/lib/components/ServiceMessage/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/ServiceMessage/ServiceMessage.tsx","../../../src/components/ServiceMessage/index.ts"],"sourcesContent":["import { useId, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { AnchorLinkTargets } from '../AnchorLink';\nimport type { NotificationPanelVariants } from '../NotificationPanel';\n\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getColor } from '../../theme/currys';\nimport { breakpoints } from '../../theme/grid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport NotificationBadge from '../Badge/NotificationBadge';\nimport Close from '../Close';\nimport { renderElementHeader } from '../ElementHeader/utils';\nimport Icon, { IconSize } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport Forward from '../Icons/Forward';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\ninterface LabelProps {\n  label: string;\n  variant: NotificationPanelVariants;\n  id: string;\n  hasExpander: boolean;\n  isExpanded: boolean;\n  dismissable: boolean;\n  onExpand: () => void;\n  onDismiss?: () => void;\n  closeBtnText?: string;\n}\n\nconst Label: React.FC<LabelProps> = ({ label, variant, id, hasExpander, isExpanded, dismissable, onExpand, onDismiss, closeBtnText }) => {\n  const breakpoint = useBreakpoint();\n  const { isHovered, refObject } = usePseudoClasses<HTMLDivElement>();\n\n  const iconSize = breakpoint < breakpoints.lg ? IconSize.XSmall : IconSize.Small;\n  const labelContainerClasses = classNames(\n    styles['service-message__label-container'],\n    styles[`service-message__label-container--${variant}`],\n    hasExpander && styles[`service-message__label-container--has-expander`]\n  );\n\n  const elementHeader = renderElementHeader(label, {\n    titleHtmlMarkup: 'span',\n    isHovered,\n    size: 'compact',\n    parentType: 'expanderlist',\n    chevronIcon: hasExpander ? (isExpanded ? ChevronUp : ChevronDown) : undefined,\n    icon: <NotificationBadge variant={variant} size={iconSize} isHovered={hasExpander && isHovered} />,\n    closeButton:\n      !hasExpander && dismissable ? (\n        <Close onClick={onDismiss} ariaLabel={closeBtnText} className={styles['service-message__close']} />\n      ) : undefined,\n  });\n\n  return (\n    <div className={labelContainerClasses} ref={refObject}>\n      <div className={styles['service-message__container']}>\n        <div className={styles['service-message__row']}>\n          <div className={styles['service-message__col']}>\n            <div className={styles['service-message__label']}>\n              {hasExpander ? (\n                <h1 className={styles['service-message__title']} id={id}>\n                  <button type=\"button\" className={styles['service-message__toggle']} onClick={onExpand} aria-expanded={isExpanded}>\n                    {elementHeader}\n                  </button>\n                </h1>\n              ) : (\n                <h1 className={styles['service-message__title']} id={id}>\n                  {elementHeader}\n                </h1>\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\ninterface ContentProps {\n  info?: string;\n  extraInfo?: string;\n  urlTitle?: string;\n  url?: string;\n  target?: AnchorLinkTargets;\n  dismissable: boolean;\n  onDismiss?: () => void;\n  closeBtnText?: string;\n}\n\nconst Content: React.FC<ContentProps> = ({ info, extraInfo, urlTitle, url, target, dismissable, closeBtnText, onDismiss }) => {\n  const { refObject: readMoreRef, isHovered: readMoreHoverRefIsHovered } = usePseudoClasses<HTMLAnchorElement>();\n  const { refObject: closeButtonRef, isHovered: closeButtonIsHovered } = usePseudoClasses<HTMLButtonElement>();\n\n  const hasUrl = url && urlTitle;\n\n  return (\n    <div className={styles['service-message__container']}>\n      <div className={styles['service-message__row']}>\n        <div className={styles['service-message__col']}>\n          <div className={styles['service-message__content']}>\n            {info && <p className={styles['service-message__info']}>{info}</p>}\n            {extraInfo && (\n              <p className={classNames(styles['service-message__info'], styles['service-message__info--extra'])}>{extraInfo}</p>\n            )}\n            <div className={styles['service-message__actions']}>\n              {hasUrl && (\n                <a className={styles['service-message__action']} href={url} ref={readMoreRef} target={target}>\n                  {urlTitle}\n                  <Icon size={IconSize.XSmall} svgIcon={Forward} color={getColor('blueberry', 700)} isHovered={readMoreHoverRefIsHovered} />\n                </a>\n              )}\n\n              {dismissable && (\n                <button\n                  ref={closeButtonRef}\n                  className={classNames(styles['service-message__action'], styles['service-message__action--close'])}\n                  aria-label={closeBtnText}\n                  onClick={onDismiss}\n                >\n                  {closeBtnText}\n                  <Icon size={IconSize.XSmall} svgIcon={X} color={getColor('blueberry', 700)} isHovered={closeButtonIsHovered} />\n                </button>\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport type ServiceMessageRoles = 'alert' | 'region' | 'auto' | 'none';\n\nexport interface ServiceMessageProps {\n  /** Sets a label for the notification panel. */\n  label: string;\n  /** String displayed in service-message when expanded */\n  info?: string;\n  /** String displayed in service-message when expanded, with a smaller font */\n  extraInfo?: string;\n  /** function that runs on dismiss */\n  onDismiss?: () => void;\n  /** Allows for dismiss to be an option, also for ServiceMessage with only label as content */\n  dismissable?: boolean;\n  /** Makes expander be open from start. */\n  expanderOpenFromStart?: boolean;\n  /** Name that describes a url-link for the user*/\n  urlTitle?: string;\n  /** Url for further information*/\n  url?: string;\n  /** Sets target for the anchorlink to the url*/\n  target?: AnchorLinkTargets;\n  /** Text on close-button in service messages. */\n  closeBtnText?: string;\n  /** Changes the visual representation. */\n  variant?: NotificationPanelVariants;\n  /** Sets the role of the service message - default: auto, will decide based on variant */\n  messageRole?: ServiceMessageRoles;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst ServiceMessage: React.FC<ServiceMessageProps> = ({\n  label,\n  dismissable = true,\n  onDismiss,\n  info,\n  extraInfo,\n  urlTitle,\n  url,\n  target = '_self',\n  closeBtnText = 'fjern melding',\n  expanderOpenFromStart = false,\n  variant = 'error',\n  messageRole = 'auto',\n  testId,\n}) => {\n  const [isExpanded, setIsExpanded] = useState<boolean>(expanderOpenFromStart);\n\n  const labelId = useId();\n  const hasExpander = !!info || !!extraInfo;\n\n  const autoRole = variant === 'error' ? 'alert' : 'region';\n  const ariaRole = messageRole === 'auto' ? autoRole : messageRole === 'none' ? undefined : messageRole;\n  const ariaLabelAttributes = getAriaLabelAttributes({ label, id: labelId });\n\n  const handleClick = (): void => {\n    if (hasExpander) setIsExpanded(!isExpanded);\n  };\n\n  const classes = classNames(styles['service-message'], styles[`service-message--${variant}`]);\n\n  return (\n    <div className={classes} role={ariaRole} {...ariaLabelAttributes} data-testid={testId}>\n      <Label\n        label={label}\n        variant={variant}\n        id={labelId}\n        hasExpander={hasExpander}\n        isExpanded={isExpanded}\n        dismissable={dismissable}\n        onExpand={handleClick}\n        onDismiss={onDismiss}\n        closeBtnText={closeBtnText}\n      />\n      {hasExpander && isExpanded && (\n        <Content\n          info={info}\n          extraInfo={extraInfo}\n          urlTitle={urlTitle}\n          url={url}\n          target={target}\n          dismissable={dismissable}\n          onDismiss={onDismiss}\n          closeBtnText={closeBtnText}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default ServiceMessage;\n","import ServiceMessage from './ServiceMessage';\nexport * from './ServiceMessage';\nexport default ServiceMessage;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAmCA,IAAM,SAA+B,EAAE,OAAO,SAAS,IAAI,aAAa,YAAY,aAAa,UAAU,WAAW,mBAAmB;CACvI,MAAM,aAAa,eAAe;CAClC,MAAM,EAAE,WAAW,cAAc,kBAAkC;CAEnE,MAAM,WAAW,aAAa,YAAY,KAAK,SAAS,SAAS,SAAS;CAC1E,MAAM,wBAAwB,WAC5B,OAAO,qCACP,OAAO,qCAAqC,YAC5C,eAAe,OAAO,kDACvB;CAED,MAAM,gBAAgB,oBAAoB,OAAO;EAC/C,iBAAiB;EACjB;EACA,MAAM;EACN,YAAY;EACZ,aAAa,cAAe,aAAa,YAAY,cAAe,KAAA;EACpE,MAAM,oBAAC,mBAAD;GAA4B;GAAS,MAAM;GAAU,WAAW,eAAe;GAAa,CAAA;EAClG,aACE,CAAC,eAAe,cACd,oBAAC,eAAD;GAAO,SAAS;GAAW,WAAW;GAAc,WAAW,OAAO;GAA6B,CAAA,GACjG,KAAA;EACP,CAAC;CAEF,OACE,oBAAC,OAAD;EAAK,WAAW;EAAuB,KAAK;YAC1C,oBAAC,OAAD;GAAK,WAAW,OAAO;aACrB,oBAAC,OAAD;IAAK,WAAW,OAAO;cACrB,oBAAC,OAAD;KAAK,WAAW,OAAO;eACrB,oBAAC,OAAD;MAAK,WAAW,OAAO;gBACpB,cACC,oBAAC,MAAD;OAAI,WAAW,OAAO;OAA+B;iBACnD,oBAAC,UAAD;QAAQ,MAAK;QAAS,WAAW,OAAO;QAA4B,SAAS;QAAU,iBAAe;kBACnG;QACM,CAAA;OACN,CAAA,GAEL,oBAAC,MAAD;OAAI,WAAW,OAAO;OAA+B;iBAClD;OACE,CAAA;MAEH,CAAA;KACF,CAAA;IACF,CAAA;GACF,CAAA;EACF,CAAA;;AAeV,IAAM,WAAmC,EAAE,MAAM,WAAW,UAAU,KAAK,QAAQ,aAAa,cAAc,gBAAgB;CAC5H,MAAM,EAAE,WAAW,aAAa,WAAW,8BAA8B,kBAAqC;CAC9G,MAAM,EAAE,WAAW,gBAAgB,WAAW,yBAAyB,kBAAqC;CAE5G,MAAM,SAAS,OAAO;CAEtB,OACE,oBAAC,OAAD;EAAK,WAAW,OAAO;YACrB,oBAAC,OAAD;GAAK,WAAW,OAAO;aACrB,oBAAC,OAAD;IAAK,WAAW,OAAO;cACrB,qBAAC,OAAD;KAAK,WAAW,OAAO;eAAvB;MACG,QAAQ,oBAAC,KAAD;OAAG,WAAW,OAAO;iBAA2B;OAAS,CAAA;MACjE,aACC,oBAAC,KAAD;OAAG,WAAW,WAAW,OAAO,0BAA0B,OAAO,gCAAgC;iBAAG;OAAc,CAAA;MAEpH,qBAAC,OAAD;OAAK,WAAW,OAAO;iBAAvB,CACG,UACC,qBAAC,KAAD;QAAG,WAAW,OAAO;QAA4B,MAAM;QAAK,KAAK;QAAqB;kBAAtF,CACG,UACD,oBAAC,cAAD;SAAM,MAAM,SAAS;SAAQ,SAAS;SAAS,OAAO,SAAS,aAAa,IAAI;SAAE,WAAW;SAA6B,CAAA,CACxH;WAGL,eACC,qBAAC,UAAD;QACE,KAAK;QACL,WAAW,WAAW,OAAO,4BAA4B,OAAO,kCAAkC;QAClG,cAAY;QACZ,SAAS;kBAJX,CAMG,cACD,oBAAC,cAAD;SAAM,MAAM,SAAS;SAAQ,SAAS;SAAG,OAAO,SAAS,aAAa,IAAI;SAAE,WAAW;SAAwB,CAAA,CACxG;UAEP;;MACF;;IACF,CAAA;GACF,CAAA;EACF,CAAA;;AAmCV,IAAM,kBAAiD,EACrD,OACA,cAAc,MACd,WACA,MACA,WACA,UACA,KACA,SAAS,SACT,eAAe,iBACf,wBAAwB,OACxB,UAAU,SACV,cAAc,QACd,aACI;CACJ,MAAM,CAAC,YAAY,iBAAiB,SAAkB,sBAAsB;CAE5E,MAAM,UAAU,OAAO;CACvB,MAAM,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC;CAGhC,MAAM,WAAW,gBAAgB,SADhB,YAAY,UAAU,UAAU,WACI,gBAAgB,SAAS,KAAA,IAAY;CAC1F,MAAM,sBAAsB,uBAAuB;EAAE;EAAO,IAAI;EAAS,CAAC;CAE1E,MAAM,oBAA0B;EAC9B,IAAI,aAAa,cAAc,CAAC,WAAW;;CAK7C,OACE,qBAAC,OAAD;EAAK,WAHS,WAAW,OAAO,oBAAoB,OAAO,oBAAoB,WAG/D;EAAS,MAAM;EAAU,GAAI;EAAqB,eAAa;YAA/E,CACE,oBAAC,OAAD;GACS;GACE;GACT,IAAI;GACS;GACD;GACC;GACb,UAAU;GACC;GACG;GACd,CAAA,EACD,eAAe,cACd,oBAAC,SAAD;GACQ;GACK;GACD;GACL;GACG;GACK;GACF;GACG;GACd,CAAA,CAEA;;;;;AC7NV,IAAA,yBAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/ServiceMessage/ServiceMessage.tsx","../../../src/components/ServiceMessage/index.ts"],"sourcesContent":["import { useId, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { AnchorLinkTargets } from '../AnchorLink';\nimport type { NotificationPanelVariants } from '../NotificationPanel';\n\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getColor } from '../../theme/currys';\nimport { breakpoints } from '../../theme/grid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport NotificationBadge from '../Badge/NotificationBadge';\nimport Close from '../Close';\nimport { renderElementHeader } from '../ElementHeader/utils';\nimport Icon, { IconSize } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport Forward from '../Icons/Forward';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\ninterface LabelProps {\n  label: string;\n  variant: NotificationPanelVariants;\n  id: string;\n  hasExpander: boolean;\n  isExpanded: boolean;\n  dismissable: boolean;\n  onExpand: () => void;\n  onDismiss?: () => void;\n  closeBtnText?: string;\n}\n\nconst Label: React.FC<LabelProps> = ({ label, variant, id, hasExpander, isExpanded, dismissable, onExpand, onDismiss, closeBtnText }) => {\n  const breakpoint = useBreakpoint();\n  const { isHovered, refObject } = usePseudoClasses<HTMLDivElement>();\n\n  const iconSize = breakpoint < breakpoints.lg ? IconSize.XSmall : IconSize.Small;\n  const labelContainerClasses = classNames(\n    styles['service-message__label-container'],\n    styles[`service-message__label-container--${variant}`],\n    hasExpander && styles[`service-message__label-container--has-expander`]\n  );\n\n  const elementHeader = renderElementHeader(label, {\n    titleHtmlMarkup: 'span',\n    isHovered,\n    size: 'compact',\n    parentType: 'expanderlist',\n    chevronIcon: hasExpander ? (isExpanded ? ChevronUp : ChevronDown) : undefined,\n    icon: <NotificationBadge variant={variant} size={iconSize} isHovered={hasExpander && isHovered} />,\n    closeButton:\n      !hasExpander && dismissable ? (\n        <Close onClick={onDismiss} ariaLabel={closeBtnText} className={styles['service-message__close']} />\n      ) : undefined,\n  });\n\n  return (\n    <div className={labelContainerClasses} ref={refObject}>\n      <div className={styles['service-message__container']}>\n        <div className={styles['service-message__row']}>\n          <div className={styles['service-message__col']}>\n            <div className={styles['service-message__label']}>\n              {hasExpander ? (\n                <h1 className={styles['service-message__title']} id={id}>\n                  <button type=\"button\" className={styles['service-message__toggle']} onClick={onExpand} aria-expanded={isExpanded}>\n                    {elementHeader}\n                  </button>\n                </h1>\n              ) : (\n                <h1 className={styles['service-message__title']} id={id}>\n                  {elementHeader}\n                </h1>\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\ninterface ContentProps {\n  info?: string;\n  extraInfo?: string;\n  urlTitle?: string;\n  url?: string;\n  target?: AnchorLinkTargets;\n  dismissable: boolean;\n  onDismiss?: () => void;\n  closeBtnText?: string;\n}\n\nconst Content: React.FC<ContentProps> = ({ info, extraInfo, urlTitle, url, target, dismissable, closeBtnText, onDismiss }) => {\n  const { refObject: readMoreRef, isHovered: readMoreHoverRefIsHovered } = usePseudoClasses<HTMLAnchorElement>();\n  const { refObject: closeButtonRef, isHovered: closeButtonIsHovered } = usePseudoClasses<HTMLButtonElement>();\n\n  const hasUrl = url && urlTitle;\n\n  return (\n    <div className={styles['service-message__container']}>\n      <div className={styles['service-message__row']}>\n        <div className={styles['service-message__col']}>\n          <div className={styles['service-message__content']}>\n            {info && <p className={styles['service-message__info']}>{info}</p>}\n            {extraInfo && (\n              <p className={classNames(styles['service-message__info'], styles['service-message__info--extra'])}>{extraInfo}</p>\n            )}\n            <div className={styles['service-message__actions']}>\n              {hasUrl && (\n                <a className={styles['service-message__action']} href={url} ref={readMoreRef} target={target}>\n                  {urlTitle}\n                  <Icon size={IconSize.XSmall} svgIcon={Forward} color={getColor('blueberry', 700)} isHovered={readMoreHoverRefIsHovered} />\n                </a>\n              )}\n\n              {dismissable && (\n                <button\n                  ref={closeButtonRef}\n                  className={classNames(styles['service-message__action'], styles['service-message__action--close'])}\n                  aria-label={closeBtnText}\n                  onClick={onDismiss}\n                >\n                  {closeBtnText}\n                  <Icon size={IconSize.XSmall} svgIcon={X} color={getColor('blueberry', 700)} isHovered={closeButtonIsHovered} />\n                </button>\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport type ServiceMessageRoles = 'alert' | 'region' | 'auto' | 'none';\n\nexport interface ServiceMessageProps {\n  /** Sets a label for the notification panel. */\n  label: string;\n  /** String displayed in service-message when expanded */\n  info?: string;\n  /** String displayed in service-message when expanded, with a smaller font */\n  extraInfo?: string;\n  /** function that runs on dismiss */\n  onDismiss?: () => void;\n  /** Allows for dismiss to be an option, also for ServiceMessage with only label as content */\n  dismissable?: boolean;\n  /** Makes expander be open from start. */\n  expanderOpenFromStart?: boolean;\n  /** Name that describes a url-link for the user*/\n  urlTitle?: string;\n  /** Url for further information*/\n  url?: string;\n  /** Sets target for the anchorlink to the url*/\n  target?: AnchorLinkTargets;\n  /** Text on close-button in service messages. */\n  closeBtnText?: string;\n  /** Changes the visual representation. */\n  variant?: NotificationPanelVariants;\n  /** Sets the role of the service message - default: auto, will decide based on variant */\n  messageRole?: ServiceMessageRoles;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst ServiceMessage: React.FC<ServiceMessageProps> = ({\n  label,\n  dismissable = true,\n  onDismiss,\n  info,\n  extraInfo,\n  urlTitle,\n  url,\n  target = '_self',\n  closeBtnText = 'fjern melding',\n  expanderOpenFromStart = false,\n  variant = 'error',\n  messageRole = 'auto',\n  testId,\n}) => {\n  const [isExpanded, setIsExpanded] = useState<boolean>(expanderOpenFromStart);\n\n  const labelId = useId();\n  const hasExpander = !!info || !!extraInfo;\n\n  const autoRole = variant === 'error' ? 'alert' : 'region';\n  const ariaRole = messageRole === 'auto' ? autoRole : messageRole === 'none' ? undefined : messageRole;\n  const ariaLabelAttributes = getAriaLabelAttributes({ label, id: labelId });\n\n  const handleClick = (): void => {\n    if (hasExpander) setIsExpanded(!isExpanded);\n  };\n\n  const classes = classNames(styles['service-message'], styles[`service-message--${variant}`]);\n\n  return (\n    <div className={classes} role={ariaRole} {...ariaLabelAttributes} data-testid={testId}>\n      <Label\n        label={label}\n        variant={variant}\n        id={labelId}\n        hasExpander={hasExpander}\n        isExpanded={isExpanded}\n        dismissable={dismissable}\n        onExpand={handleClick}\n        onDismiss={onDismiss}\n        closeBtnText={closeBtnText}\n      />\n      {hasExpander && isExpanded && (\n        <Content\n          info={info}\n          extraInfo={extraInfo}\n          urlTitle={urlTitle}\n          url={url}\n          target={target}\n          dismissable={dismissable}\n          onDismiss={onDismiss}\n          closeBtnText={closeBtnText}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default ServiceMessage;\n","import ServiceMessage from './ServiceMessage';\nexport * from './ServiceMessage';\nexport default ServiceMessage;\n"],"mappings":"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"}

package/lib/components/SharingStatus/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/SharingStatus/SharingStatus.tsx","../../../src/components/SharingStatus/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { PaletteNames } from '../../theme/palette';\nimport type { SvgIcon } from '../Icon';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { palette } from '../../theme/palette';\nimport Icon from '../Icon';\n\nimport styles from './styles.module.scss';\n\nexport type SharingStatusColor = Extract<PaletteNames, 'kiwi' | 'cherry' | 'neutral'>;\n\nexport interface SharingStatusProps {\n  /** Color choices represent variants of sharingstatus */\n  color?: SharingStatusColor;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Icon to be displayed next to the sharingstatus */\n  icon: SvgIcon;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the text placed to the right of the sharingstatus */\n  children: string;\n  /** turn on and off word wrapping */\n  wrapText?: boolean;\n}\n\nconst SharingStatus: React.FC<SharingStatusProps> = props => {\n  const { color = 'neutral', icon, children, className, testId, wrapText } = props;\n\n  const sharingStatusClasses = classNames(styles['sharing-status'], className);\n  const dotClasses = classNames(styles['sharing-status__dot'], styles[`sharing-status__dot--${color}`]);\n  const labelClasses = classNames(styles['sharing-status__label'], styles[`sharing-status__label--${color}`], {\n    [styles['sharing-status__label--wrap']]: wrapText,\n  });\n\n  return (\n    <span className={sharingStatusClasses} data-testid={testId} data-analyticsid={AnalyticsId.SharingStatus}>\n      <span className={dotClasses}>\n        <Icon color={palette.white} svgIcon={icon} size={IconSize.XXSmall} />\n      </span>\n      <span className={labelClasses}>{children}</span>\n    </span>\n  );\n};\n\nexport default SharingStatus;\n","import SharingStatus from './SharingStatus';\nexport * from './SharingStatus';\nexport default SharingStatus;\n"],"mappings":";;;;;;;AA4BA,IAAM,iBAA8C,UAAS;CAC3D,MAAM,EAAE,QAAQ,WAAW,MAAM,UAAU,WAAW,QAAQ,aAAa;CAE3E,MAAM,uBAAuB,WAAW,OAAO,mBAAmB,UAAU;CAC5E,MAAM,aAAa,WAAW,OAAO,wBAAwB,OAAO,wBAAwB,SAAS;CACrG,MAAM,eAAe,WAAW,OAAO,0BAA0B,OAAO,0BAA0B,UAAU,GACzG,OAAO,iCAAiC,UAC1C,CAAC;CAEF,OACE,qBAAC,QAAD;EAAM,WAAW;EAAsB,eAAa;EAAQ,oBAAkB,YAAY;YAA1F,CACE,oBAAC,QAAD;GAAM,WAAW;aACf,oBAAC,cAAD;IAAM,OAAO,QAAQ;IAAO,SAAS;IAAM,MAAM,SAAS;IAAW,CAAA;GAChE,CAAA,EACP,oBAAC,QAAD;GAAM,WAAW;GAAe;GAAgB,CAAA,CAC3C;;;;;ACzCX,IAAA,wBAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/SharingStatus/SharingStatus.tsx","../../../src/components/SharingStatus/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { PaletteNames } from '../../theme/palette';\nimport type { SvgIcon } from '../Icon';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { palette } from '../../theme/palette';\nimport Icon from '../Icon';\n\nimport styles from './styles.module.scss';\n\nexport type SharingStatusColor = Extract<PaletteNames, 'kiwi' | 'cherry' | 'neutral'>;\n\nexport interface SharingStatusProps {\n  /** Color choices represent variants of sharingstatus */\n  color?: SharingStatusColor;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Icon to be displayed next to the sharingstatus */\n  icon: SvgIcon;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the text placed to the right of the sharingstatus */\n  children: string;\n  /** turn on and off word wrapping */\n  wrapText?: boolean;\n}\n\nconst SharingStatus: React.FC<SharingStatusProps> = props => {\n  const { color = 'neutral', icon, children, className, testId, wrapText } = props;\n\n  const sharingStatusClasses = classNames(styles['sharing-status'], className);\n  const dotClasses = classNames(styles['sharing-status__dot'], styles[`sharing-status__dot--${color}`]);\n  const labelClasses = classNames(styles['sharing-status__label'], styles[`sharing-status__label--${color}`], {\n    [styles['sharing-status__label--wrap']]: wrapText,\n  });\n\n  return (\n    <span className={sharingStatusClasses} data-testid={testId} data-analyticsid={AnalyticsId.SharingStatus}>\n      <span className={dotClasses}>\n        <Icon color={palette.white} svgIcon={icon} size={IconSize.XXSmall} />\n      </span>\n      <span className={labelClasses}>{children}</span>\n    </span>\n  );\n};\n\nexport default SharingStatus;\n","import SharingStatus from './SharingStatus';\nexport * from './SharingStatus';\nexport default SharingStatus;\n"],"mappings":";;;;;;;AA4BA,IAAM,iBAA8C,UAAS;CAC3D,MAAM,EAAE,QAAQ,WAAW,MAAM,UAAU,WAAW,QAAQ,aAAa;CAE3E,MAAM,uBAAuB,WAAW,OAAO,mBAAmB,SAAS;CAC3E,MAAM,aAAa,WAAW,OAAO,wBAAwB,OAAO,wBAAwB,QAAQ;CACpG,MAAM,eAAe,WAAW,OAAO,0BAA0B,OAAO,0BAA0B,UAAU,GACzG,OAAO,iCAAiC,SAC3C,CAAC;CAED,OACE,qBAAC,QAAD;EAAM,WAAW;EAAsB,eAAa;EAAQ,oBAAkB,YAAY;YAA1F,CACE,oBAAC,QAAD;GAAM,WAAW;aACf,oBAAC,cAAD;IAAM,OAAO,QAAQ;IAAO,SAAS;IAAM,MAAM,SAAS;GAAU,CAAA;EAChE,CAAA,GACN,oBAAC,QAAD;GAAM,WAAW;GAAe;EAAe,CAAA,CAC3C;;AAEV;;;AC3CA,IAAA,wBAAe"}

package/lib/components/Step/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Step/Step.tsx","../../../src/components/Step/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { ButtonProps } from '../Button';\nimport type { StepperProps } from '../Stepper';\n\nimport { AnalyticsId } from '../../constants';\nimport StepButtons from '../StepButtons';\n\nimport styles from './styles.module.scss';\n\nexport interface StepProps {\n  /** Stepper viser fremdriften */\n  stepper?: React.ReactElement<StepperProps>;\n  /** Innhold i steget */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the content element. */\n  contentClassName?: string;\n  /** Knapp for å gå tilbake. Vises med \"outline\" variant. */\n  backButton?: React.ReactElement<ButtonProps>;\n  /** Knapp for å gå videre. Vises med \"fill\" variant. */\n  forwardButton?: React.ReactElement<ButtonProps>;\n  /** Ekstra knapper. Valgfritt utseende. */\n  additionalButtons?: React.ReactElement<ButtonProps>[];\n  /** Knapp for å avbryte eller fortsette senere. Vises med \"borderless\" variant. */\n  cancelButton?: React.ReactElement<ButtonProps>;\n  /** Knappene vil vises sticky nederst på skjermen dersom innholdet i Step tar mer plass enn vinduet. Default: false  */\n  stickyButtons?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Step: React.FC<StepProps> = ({\n  stepper,\n  children,\n  className,\n  contentClassName,\n  backButton,\n  forwardButton,\n  additionalButtons,\n  cancelButton,\n  stickyButtons = false,\n  testId,\n}) => {\n  const hasNavigation = backButton || forwardButton || additionalButtons || cancelButton;\n\n  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.Step} className={className}>\n      {stepper && <div className={styles.step__stepper}>{stepper}</div>}\n      <div className={classNames(styles.step__content, contentClassName)}>{children}</div>\n      {hasNavigation && (\n        <StepButtons\n          backButton={backButton}\n          forwardButton={forwardButton}\n          additionalButtons={additionalButtons}\n          cancelButton={cancelButton}\n          sticky={stickyButtons}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default Step;\n","import Step from './Step';\nexport * from './Step';\nexport default Step;\n"],"mappings":";;;;;;AAiCA,IAAM,QAA6B,EACjC,SACA,UACA,WACA,kBACA,YACA,eACA,mBACA,cACA,gBAAgB,OAChB,aACI;CACJ,MAAM,gBAAgB,cAAc,iBAAiB,qBAAqB;CAE1E,OACE,qBAAC,OAAD;EAAK,eAAa;EAAQ,oBAAkB,YAAY;EAAiB;YAAzE;GACG,WAAW,oBAAC,OAAD;IAAK,WAAW,OAAO;cAAgB;IAAc,CAAA;GACjE,oBAAC,OAAD;IAAK,WAAW,WAAW,OAAO,eAAe,iBAAiB;IAAG;IAAe,CAAA;GACnF,iBACC,oBAAC,qBAAD;IACc;IACG;IACI;IACL;IACd,QAAQ;IACR,CAAA;GAEA;;;;;AC1DV,IAAA,eAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Step/Step.tsx","../../../src/components/Step/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { ButtonProps } from '../Button';\nimport type { StepperProps } from '../Stepper';\n\nimport { AnalyticsId } from '../../constants';\nimport StepButtons from '../StepButtons';\n\nimport styles from './styles.module.scss';\n\nexport interface StepProps {\n  /** Stepper viser fremdriften */\n  stepper?: React.ReactElement<StepperProps>;\n  /** Innhold i steget */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the content element. */\n  contentClassName?: string;\n  /** Knapp for å gå tilbake. Vises med \"outline\" variant. */\n  backButton?: React.ReactElement<ButtonProps>;\n  /** Knapp for å gå videre. Vises med \"fill\" variant. */\n  forwardButton?: React.ReactElement<ButtonProps>;\n  /** Ekstra knapper. Valgfritt utseende. */\n  additionalButtons?: React.ReactElement<ButtonProps>[];\n  /** Knapp for å avbryte eller fortsette senere. Vises med \"borderless\" variant. */\n  cancelButton?: React.ReactElement<ButtonProps>;\n  /** Knappene vil vises sticky nederst på skjermen dersom innholdet i Step tar mer plass enn vinduet. Default: false  */\n  stickyButtons?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Step: React.FC<StepProps> = ({\n  stepper,\n  children,\n  className,\n  contentClassName,\n  backButton,\n  forwardButton,\n  additionalButtons,\n  cancelButton,\n  stickyButtons = false,\n  testId,\n}) => {\n  const hasNavigation = backButton || forwardButton || additionalButtons || cancelButton;\n\n  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.Step} className={className}>\n      {stepper && <div className={styles.step__stepper}>{stepper}</div>}\n      <div className={classNames(styles.step__content, contentClassName)}>{children}</div>\n      {hasNavigation && (\n        <StepButtons\n          backButton={backButton}\n          forwardButton={forwardButton}\n          additionalButtons={additionalButtons}\n          cancelButton={cancelButton}\n          sticky={stickyButtons}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default Step;\n","import Step from './Step';\nexport * from './Step';\nexport default Step;\n"],"mappings":";;;;;;AAiCA,IAAM,QAA6B,EACjC,SACA,UACA,WACA,kBACA,YACA,eACA,mBACA,cACA,gBAAgB,OAChB,aACI;CACJ,MAAM,gBAAgB,cAAc,iBAAiB,qBAAqB;CAE1E,OACE,qBAAC,OAAD;EAAK,eAAa;EAAQ,oBAAkB,YAAY;EAAiB;YAAzE;GACG,WAAW,oBAAC,OAAD;IAAK,WAAW,OAAO;cAAgB;GAAa,CAAA;GAChE,oBAAC,OAAD;IAAK,WAAW,WAAW,OAAO,eAAe,gBAAgB;IAAI;GAAc,CAAA;GAClF,iBACC,oBAAC,qBAAD;IACc;IACG;IACI;IACL;IACd,QAAQ;GACT,CAAA;EAEA;;AAET;;;AC5DA,IAAA,eAAe"}

package/lib/components/Stepper/index.js

@@ -7,10 +7,6 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
 //#region src/components/Stepper/utils.ts
 /**
-* Minimum avstand fra markør til prikk
-*/
-var MARKER_DOT_MIN_DISTANCE_PX = 4;
-/**
 * Bredde på markør
 */
 var MARKER_WIDTH_PX = 24;
@@ -48,7 +44,7 @@ var getValidatedValue = (value, min, max) => {
 * @param stepperWidth Bredde på stepper
 * @returns Antall prikker
 */
-var getMaximumDots = (stepperWidth) => Math.floor(stepperWidth / (MARKER_WIDTH_PX + MARKER_DOT_MIN_DISTANCE_PX));
+var getMaximumDots = (stepperWidth) => Math.floor(stepperWidth / 28);
 /**
 * Beregn riktig distance mellom prikker
 * @param stepperWidth Bredde på stepper

package/lib/components/Stepper/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Stepper/utils.ts","../../../src/components/Stepper/Dot.tsx","../../../src/components/Stepper/DotList.tsx","../../../src/components/Stepper/Stepper.tsx","../../../src/components/Stepper/index.ts"],"sourcesContent":["/**\n * Minimum avstand fra markør til prikk\n */\nconst MARKER_DOT_MIN_DISTANCE_PX = 4;\n\n/**\n * Bredde på markør\n */\nconst MARKER_WIDTH_PX = 24;\n\n/**\n * Horisontal padding på stepper\n */\nexport const STEPPER_PADDING_X_PX = 8;\n\n/**\n * Valider at minimum-verdi er innenfor gyldig område\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Mimimum-verdi, ikke større enn eller lik maksimum-verdi\n */\nexport const getValidatedMin = (min: number, max: number): number => (min < max ? min : max - 1);\n\n/**\n * Valider at maksimum-verdi er innenfor gyldig område\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Maksimum-verdi, ikke mindre enn minimum-verdi\n */\nexport const getValidatedMax = (min: number, max: number): number => (max < min ? min : max);\n\n/**\n * Valider at verdi er innenfor gyldig område\n * @param value Nåværende verdi\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Verdi, ikke mindre enn 0, ikke mer enn max\n */\nexport const getValidatedValue = (value: number | undefined, min: number, max: number): number => {\n  if (typeof value === 'undefined' || value < min) {\n    return min;\n  }\n\n  return value > max ? max : value;\n};\n\n/**\n * Finn antall prikker det er plass til\n * @param stepperWidth Bredde på stepper\n * @returns Antall prikker\n */\nexport const getMaximumDots = (stepperWidth: number): number => Math.floor(stepperWidth / (MARKER_WIDTH_PX + MARKER_DOT_MIN_DISTANCE_PX));\n\n/**\n * Beregn riktig distance mellom prikker\n * @param stepperWidth Bredde på stepper\n * @param dots Antall prikker som skal vises\n * @returns Distanse mellom prikker\n */\nexport const getDistanceBetweenDots = (stepperWidth: number, dots: number): number => (stepperWidth - MARKER_WIDTH_PX) / (dots - 1);\n\n/**\n * Beregn riktig plassering av markør\n * @param distanceBetweenDots Distanse mellom prikker\n * @param index Nåværende verdi i stepper\n * @returns Plassering til markør fra venstre\n */\nexport const getMarkerPosition = (distanceBetweenDots: number, index: number): number => distanceBetweenDots * index;\n\n/**\n * Lag liste med tillate verdier fra min til maks\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Liste med verdier\n */\nexport const getAllowedValues = (min: number, max: number): number[] => Array.from(Array(max - min + 1), (_, index) => index + min);\n\n/**\n * Valider props som skal brukes til beregning av posisjon m.m.\n * @param value Nåværende verdi\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Objekt med gyldige verdier\n */\nexport const getValidatedProps = (\n  value: number | undefined,\n  min: number,\n  max: number\n): { validatedValue: number; validatedMin: number; validatedMax: number } => {\n  const validatedMin = getValidatedMin(min, max);\n  const validatedMax = getValidatedMax(validatedMin, max);\n  const validatedValue = getValidatedValue(value, validatedMin, validatedMax);\n\n  return { validatedValue, validatedMin, validatedMax };\n};\n","import classNames from 'classnames';\n\nimport { STEPPER_PADDING_X_PX } from './utils';\n\nimport styles from './styles.module.scss';\n\ninterface DotProps {\n  index?: number;\n  completed: boolean;\n  distanceBetweenDots?: number;\n  position?: 'left' | 'right';\n}\n\nconst Dot: React.FC<DotProps> = ({ index, completed, distanceBetweenDots, position }) => {\n  const classes = classNames(\n    styles.stepper__dot,\n    completed && styles['stepper__dot--completed'],\n    position && styles[`stepper__dot--${position}`]\n  );\n  const positionWithStyle = !position && typeof index !== 'undefined' && typeof distanceBetweenDots !== 'undefined';\n  const style: React.HTMLAttributes<HTMLSpanElement>['style'] = positionWithStyle\n    ? { left: `${index * distanceBetweenDots + STEPPER_PADDING_X_PX}px` }\n    : undefined;\n\n  return <span className={classes} style={style} data-testid=\"dot\" />;\n};\n\nexport default Dot;\n","import Dot from './Dot';\n\ninterface DotListProps {\n  allowedValues: number[];\n  currentValue: number;\n  distanceBetweenDots: number;\n}\n\nconst Dots: React.FC<DotListProps> = ({ allowedValues, currentValue, distanceBetweenDots }) => (\n  <>\n    {allowedValues.map((value, index) => (\n      <Dot index={index} key={value} completed={value < currentValue} distanceBetweenDots={distanceBetweenDots} />\n    ))}\n  </>\n);\n\nexport default Dots;\n","import { useRef } from 'react';\n\nimport Dot from './Dot';\nimport DotList from './DotList';\nimport { getMaximumDots, getDistanceBetweenDots, getMarkerPosition, getAllowedValues, getValidatedProps } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { useSize } from '../../hooks/useSize';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\n\nimport styles from './styles.module.scss';\n\nexport interface StepperProps {\n  /**\n   * Sets aria-label of the stepper. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabel?: string;\n  /**\n   * Sets aria-labelledby of the stepper. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabelledById?: string;\n  /**\n   * Current value. Must be between min and max\n   */\n  value?: number;\n  /**\n   * Minimum value\n   */\n  min?: number;\n  /**\n   * Maximum value\n   */\n  max?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Stepper: React.FC<StepperProps> = ({ ariaLabelledById, ariaLabel, value, min = 0, max = 2, testId }) => {\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const ref = useRef<HTMLSpanElement>(null);\n  const { width: wrapperWidth = 0 } = useSize(wrapperRef) || {};\n  const { width: stepperWidth = 0 } = useSize(ref) || {};\n\n  const { validatedValue, validatedMin, validatedMax } = getValidatedProps(value, min, max);\n  const allowedValues = getAllowedValues(validatedMin, validatedMax);\n  const index = allowedValues.indexOf(validatedValue);\n  const maximumDots = getMaximumDots(wrapperWidth);\n  const distanceBetweenDots = getDistanceBetweenDots(stepperWidth, allowedValues.length);\n  const markerPosition = getMarkerPosition(distanceBetweenDots, index);\n\n  const showAllDots = allowedValues.length <= maximumDots;\n  const isCompleted = validatedValue === validatedMax;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n\n  return (\n    <div className={styles['stepper-wrapper']} ref={wrapperRef}>\n      <span\n        role=\"progressbar\"\n        {...ariaLabelAttributes}\n        aria-valuenow={validatedValue}\n        aria-valuemin={validatedMin}\n        aria-valuemax={validatedMax}\n        className={styles.stepper}\n        style={{\n          backgroundPositionX: `${isCompleted ? stepperWidth : markerPosition}px`,\n        }}\n        ref={ref}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Stepper}\n      >\n        {showAllDots && <DotList allowedValues={allowedValues} currentValue={validatedValue} distanceBetweenDots={distanceBetweenDots} />}\n        {!showAllDots && (\n          <>\n            <Dot completed={validatedValue > validatedMin} position=\"left\" />\n            <Dot completed={validatedValue === validatedMax} position=\"right\" />\n          </>\n        )}\n        <span className={styles.stepper__marker} style={{ left: `${markerPosition}px` }} />\n      </span>\n      {!showAllDots && <span className={styles.stepper__number}>{`${validatedValue}/${validatedMax}`}</span>}\n    </div>\n  );\n};\n\nexport default Stepper;\n","import Stepper from './Stepper';\nexport * from './Stepper';\nexport * from './utils';\nexport default Stepper;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Stepper/utils.ts","../../../src/components/Stepper/Dot.tsx","../../../src/components/Stepper/DotList.tsx","../../../src/components/Stepper/Stepper.tsx","../../../src/components/Stepper/index.ts"],"sourcesContent":["/**\n * Minimum avstand fra markør til prikk\n */\nconst MARKER_DOT_MIN_DISTANCE_PX = 4;\n\n/**\n * Bredde på markør\n */\nconst MARKER_WIDTH_PX = 24;\n\n/**\n * Horisontal padding på stepper\n */\nexport const STEPPER_PADDING_X_PX = 8;\n\n/**\n * Valider at minimum-verdi er innenfor gyldig område\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Mimimum-verdi, ikke større enn eller lik maksimum-verdi\n */\nexport const getValidatedMin = (min: number, max: number): number => (min < max ? min : max - 1);\n\n/**\n * Valider at maksimum-verdi er innenfor gyldig område\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Maksimum-verdi, ikke mindre enn minimum-verdi\n */\nexport const getValidatedMax = (min: number, max: number): number => (max < min ? min : max);\n\n/**\n * Valider at verdi er innenfor gyldig område\n * @param value Nåværende verdi\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Verdi, ikke mindre enn 0, ikke mer enn max\n */\nexport const getValidatedValue = (value: number | undefined, min: number, max: number): number => {\n  if (typeof value === 'undefined' || value < min) {\n    return min;\n  }\n\n  return value > max ? max : value;\n};\n\n/**\n * Finn antall prikker det er plass til\n * @param stepperWidth Bredde på stepper\n * @returns Antall prikker\n */\nexport const getMaximumDots = (stepperWidth: number): number => Math.floor(stepperWidth / (MARKER_WIDTH_PX + MARKER_DOT_MIN_DISTANCE_PX));\n\n/**\n * Beregn riktig distance mellom prikker\n * @param stepperWidth Bredde på stepper\n * @param dots Antall prikker som skal vises\n * @returns Distanse mellom prikker\n */\nexport const getDistanceBetweenDots = (stepperWidth: number, dots: number): number => (stepperWidth - MARKER_WIDTH_PX) / (dots - 1);\n\n/**\n * Beregn riktig plassering av markør\n * @param distanceBetweenDots Distanse mellom prikker\n * @param index Nåværende verdi i stepper\n * @returns Plassering til markør fra venstre\n */\nexport const getMarkerPosition = (distanceBetweenDots: number, index: number): number => distanceBetweenDots * index;\n\n/**\n * Lag liste med tillate verdier fra min til maks\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Liste med verdier\n */\nexport const getAllowedValues = (min: number, max: number): number[] => Array.from(Array(max - min + 1), (_, index) => index + min);\n\n/**\n * Valider props som skal brukes til beregning av posisjon m.m.\n * @param value Nåværende verdi\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Objekt med gyldige verdier\n */\nexport const getValidatedProps = (\n  value: number | undefined,\n  min: number,\n  max: number\n): { validatedValue: number; validatedMin: number; validatedMax: number } => {\n  const validatedMin = getValidatedMin(min, max);\n  const validatedMax = getValidatedMax(validatedMin, max);\n  const validatedValue = getValidatedValue(value, validatedMin, validatedMax);\n\n  return { validatedValue, validatedMin, validatedMax };\n};\n","import classNames from 'classnames';\n\nimport { STEPPER_PADDING_X_PX } from './utils';\n\nimport styles from './styles.module.scss';\n\ninterface DotProps {\n  index?: number;\n  completed: boolean;\n  distanceBetweenDots?: number;\n  position?: 'left' | 'right';\n}\n\nconst Dot: React.FC<DotProps> = ({ index, completed, distanceBetweenDots, position }) => {\n  const classes = classNames(\n    styles.stepper__dot,\n    completed && styles['stepper__dot--completed'],\n    position && styles[`stepper__dot--${position}`]\n  );\n  const positionWithStyle = !position && typeof index !== 'undefined' && typeof distanceBetweenDots !== 'undefined';\n  const style: React.HTMLAttributes<HTMLSpanElement>['style'] = positionWithStyle\n    ? { left: `${index * distanceBetweenDots + STEPPER_PADDING_X_PX}px` }\n    : undefined;\n\n  return <span className={classes} style={style} data-testid=\"dot\" />;\n};\n\nexport default Dot;\n","import Dot from './Dot';\n\ninterface DotListProps {\n  allowedValues: number[];\n  currentValue: number;\n  distanceBetweenDots: number;\n}\n\nconst Dots: React.FC<DotListProps> = ({ allowedValues, currentValue, distanceBetweenDots }) => (\n  <>\n    {allowedValues.map((value, index) => (\n      <Dot index={index} key={value} completed={value < currentValue} distanceBetweenDots={distanceBetweenDots} />\n    ))}\n  </>\n);\n\nexport default Dots;\n","import { useRef } from 'react';\n\nimport Dot from './Dot';\nimport DotList from './DotList';\nimport { getMaximumDots, getDistanceBetweenDots, getMarkerPosition, getAllowedValues, getValidatedProps } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { useSize } from '../../hooks/useSize';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\n\nimport styles from './styles.module.scss';\n\nexport interface StepperProps {\n  /**\n   * Sets aria-label of the stepper. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabel?: string;\n  /**\n   * Sets aria-labelledby of the stepper. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabelledById?: string;\n  /**\n   * Current value. Must be between min and max\n   */\n  value?: number;\n  /**\n   * Minimum value\n   */\n  min?: number;\n  /**\n   * Maximum value\n   */\n  max?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Stepper: React.FC<StepperProps> = ({ ariaLabelledById, ariaLabel, value, min = 0, max = 2, testId }) => {\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const ref = useRef<HTMLSpanElement>(null);\n  const { width: wrapperWidth = 0 } = useSize(wrapperRef) || {};\n  const { width: stepperWidth = 0 } = useSize(ref) || {};\n\n  const { validatedValue, validatedMin, validatedMax } = getValidatedProps(value, min, max);\n  const allowedValues = getAllowedValues(validatedMin, validatedMax);\n  const index = allowedValues.indexOf(validatedValue);\n  const maximumDots = getMaximumDots(wrapperWidth);\n  const distanceBetweenDots = getDistanceBetweenDots(stepperWidth, allowedValues.length);\n  const markerPosition = getMarkerPosition(distanceBetweenDots, index);\n\n  const showAllDots = allowedValues.length <= maximumDots;\n  const isCompleted = validatedValue === validatedMax;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n\n  return (\n    <div className={styles['stepper-wrapper']} ref={wrapperRef}>\n      <span\n        role=\"progressbar\"\n        {...ariaLabelAttributes}\n        aria-valuenow={validatedValue}\n        aria-valuemin={validatedMin}\n        aria-valuemax={validatedMax}\n        className={styles.stepper}\n        style={{\n          backgroundPositionX: `${isCompleted ? stepperWidth : markerPosition}px`,\n        }}\n        ref={ref}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Stepper}\n      >\n        {showAllDots && <DotList allowedValues={allowedValues} currentValue={validatedValue} distanceBetweenDots={distanceBetweenDots} />}\n        {!showAllDots && (\n          <>\n            <Dot completed={validatedValue > validatedMin} position=\"left\" />\n            <Dot completed={validatedValue === validatedMax} position=\"right\" />\n          </>\n        )}\n        <span className={styles.stepper__marker} style={{ left: `${markerPosition}px` }} />\n      </span>\n      {!showAllDots && <span className={styles.stepper__number}>{`${validatedValue}/${validatedMax}`}</span>}\n    </div>\n  );\n};\n\nexport default Stepper;\n","import Stepper from './Stepper';\nexport * from './Stepper';\nexport * from './utils';\nexport default Stepper;\n"],"mappings":"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"}

package/lib/components/StickyNote/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/StickyNote/Close.tsx","../../../src/components/StickyNote/Triangle.tsx","../../../src/components/StickyNote/StickyNote.tsx","../../../src/components/StickyNote/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\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  /** Ref passed to the button element */\n  ref?: React.Ref<HTMLButtonElement | null>;\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.FC<CloseProps> = (props: CloseProps) => {\n  const { testId, ariaLabel = 'Lukk', onClick, ref } = props;\n  const { refObject, isHovered } = usePseudoClasses();\n\n  const iconSize = useIsMobileBreakpoint() ? 38 : 48;\n\n  const closeClasses = classNames(styles.close);\n\n  return (\n    <button\n      ref={mergeRefs([ref, refObject])}\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 { useId } 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 uniqueId = useId();\n  const maskIdFocus = `${uniqueId}-mask-focus`;\n  const maskIdNormal = `${uniqueId}-mask-normal`;\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={maskIdFocus} 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(#${maskIdFocus})`}\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={maskIdNormal} 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(#${maskIdNormal})`}\n        />\n      </svg>\n    );\n  }\n\n  return <>{svg}</>;\n};\n\nexport default Triangle;\n","import { useLayoutEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Close from './Close';\nimport Triangle from './Triangle';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\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: errorTextIdProp,\n    onClickWhileDisabled,\n    testId,\n    ...textareaProps\n  } = props;\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const showErrorStyling = error || !!errorText;\n  const stickynoteRef = useRef<HTMLDivElement>(null);\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const { isFocused: isTextareaFocused } = usePseudoClasses<HTMLTextAreaElement | null>(textareaRef);\n  const { isHovered, isActive } = usePseudoClasses<HTMLDivElement | null>(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']]: showErrorStyling,\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, errorTextId)}\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={showErrorStyling} />\n        </div>\n      </div>\n      {errorText && (\n        <p className={styles['sticky-note__error-text']} id={errorTextId}>\n          {errorText}\n        </p>\n      )}\n    </div>\n  );\n};\n\nexport default StickyNote;\n","import StickyNote from './StickyNote';\nexport * from './StickyNote';\nexport default StickyNote;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/StickyNote/Close.tsx","../../../src/components/StickyNote/Triangle.tsx","../../../src/components/StickyNote/StickyNote.tsx","../../../src/components/StickyNote/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\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  /** Ref passed to the button element */\n  ref?: React.Ref<HTMLButtonElement | null>;\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.FC<CloseProps> = (props: CloseProps) => {\n  const { testId, ariaLabel = 'Lukk', onClick, ref } = props;\n  const { refObject, isHovered } = usePseudoClasses();\n\n  const iconSize = useIsMobileBreakpoint() ? 38 : 48;\n\n  const closeClasses = classNames(styles.close);\n\n  return (\n    <button\n      ref={mergeRefs([ref, refObject])}\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 { useId } 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 uniqueId = useId();\n  const maskIdFocus = `${uniqueId}-mask-focus`;\n  const maskIdNormal = `${uniqueId}-mask-normal`;\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={maskIdFocus} 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(#${maskIdFocus})`}\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={maskIdNormal} 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(#${maskIdNormal})`}\n        />\n      </svg>\n    );\n  }\n\n  return <>{svg}</>;\n};\n\nexport default Triangle;\n","import { useLayoutEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Close from './Close';\nimport Triangle from './Triangle';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\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: errorTextIdProp,\n    onClickWhileDisabled,\n    testId,\n    ...textareaProps\n  } = props;\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const showErrorStyling = error || !!errorText;\n  const stickynoteRef = useRef<HTMLDivElement>(null);\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const { isFocused: isTextareaFocused } = usePseudoClasses<HTMLTextAreaElement | null>(textareaRef);\n  const { isHovered, isActive } = usePseudoClasses<HTMLDivElement | null>(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']]: showErrorStyling,\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, errorTextId)}\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={showErrorStyling} />\n        </div>\n      </div>\n      {errorText && (\n        <p className={styles['sticky-note__error-text']} id={errorTextId}>\n          {errorText}\n        </p>\n      )}\n    </div>\n  );\n};\n\nexport default StickyNote;\n","import StickyNote from './StickyNote';\nexport * from './StickyNote';\nexport default StickyNote;\n"],"mappings":"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"}

package/lib/components/Table/index.js

@@ -5,7 +5,7 @@ import { useIsVisible } from "../../hooks/useIsVisible.js";
 import { useLayoutEvent } from "../../hooks/useLayoutEvent.js";
 import { t as HorizontalScroll_default } from "../../HorizontalScroll.js";
 import { a as TextAlign, i as SortDirection, n as ModeType, o as defaultConfig, r as ResponsiveTableVariant, s as simpleConfig, t as HeaderCategory } from "../../constants2.js";
-import { a as omitProps, i as mapChildrenWithMode, n as getCenteredOverflowTableStyle, r as getCurrentConfig, t as getBreakpointClass } from "../../utils6.js";
+import { a as omitProps, i as mapChildrenWithMode, n as getCenteredOverflowTableStyle, r as getCurrentConfig, t as getBreakpointClass } from "../../utils5.js";
 import { n as TableBody } from "../../TableBody.js";
 import { n as TableCell } from "../../TableCell.js";
 import { n as TableExpandedRow } from "../../TableExpandedRow.js";