@helsenorge/designsystem-react 12.4.0 → 12.7.0

package/LinkList.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkList.js","sources":["../src/components/LinkList/LinkList.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { PaletteNames } from '../../theme/palette';\nimport { ElementHeaderType, renderElementHeader } from '../ElementHeader/ElementHeader';\nimport ChevronRight from '../Icons/ChevronRight';\n\nimport LinkListStyles from './styles.module.scss';\n\nexport type LinkListSize = 'small' | 'medium' | 'large';\n\nexport type LinkListStatus = 'none' | 'new';\n\nexport type LinkAnchorTargets = '_self' | '_blank' | '_parent';\n\nexport type LinkListColors = Extract<PaletteNames, 'white' | 'blueberry' | 'cherry' | 'neutral'>;\nexport type LinkListVariant = 'line' | 'outline' | 'fill' | 'fill-negative';\n\nexport interface LinkType extends React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLLIElement>> {\n  ElementHeader?: ElementHeaderType;\n}\n\nexport type LinkTags = 'button' | 'a';\nexport interface CompoundComponent extends React.ForwardRefExoticComponent<LinkListProps & React.RefAttributes<HTMLUListElement>> {\n  Link: LinkType;\n}\n\nexport interface LinkListProps {\n  /** Items in the LinkList */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**  Changes the colors of the list. */\n  color?: LinkListColors;\n  /** Toggles chevron icon on or off. */\n  chevron?: boolean;\n  /** Changes size of the LinkList. */\n  size?: LinkListSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets visual priority */\n  variant?: LinkListVariant;\n  /** Highlights text. Used for search results */\n  highlightText?: string;\n}\n\ntype Modify<T, R> = Omit<T, keyof R> & R;\n\nexport type LinkProps = Modify<\n  React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>,\n  {\n    children: React.ReactNode;\n    chevron?: boolean;\n    className?: string;\n    icon?: React.ReactElement;\n    /** Renders the image in the LinkList header */\n    image?: React.ReactElement;\n    /** Displays a status on the left side: default none */\n    status?: LinkListStatus;\n    href?: string;\n    target?: LinkAnchorTargets;\n    /** HTML markup for link. Default: a */\n    htmlMarkup?: LinkTags;\n    /**\n     * Ref for lenke/knapp\n     */\n    linkRef?: React.RefObject<HTMLButtonElement | HTMLAnchorElement>;\n    /** Sets the data-testid attribute. */\n    testId?: string;\n    /** Highlights text. Override if different from list */\n    highlightText?: string;\n  }\n> &\n  Pick<LinkListProps, 'color' | 'size' | 'variant'>;\n\nconst Link: LinkType = React.forwardRef((props: LinkProps, ref: React.Ref<HTMLLIElement>) => {\n  const {\n    children,\n    className = '',\n    color = 'white',\n    icon,\n    image,\n    size = 'medium',\n    chevron = false,\n    linkRef,\n    status = 'none',\n    testId,\n    target,\n    variant,\n    htmlMarkup = 'a',\n    highlightText,\n    ...restProps\n  } = props;\n  const { hoverRef, isHovered } = useHover<HTMLButtonElement | HTMLAnchorElement>(linkRef);\n\n  const isFill = variant === 'fill';\n  const isFillNegative = variant === 'fill-negative';\n  const isOutline = variant === 'outline';\n  const isLine = variant === 'line';\n\n  const liClasses = cn(LinkListStyles['link-list'], {\n    [LinkListStyles['link-list__list-item--line']]: isLine,\n    [LinkListStyles[`link-list__list-item--outline--${color}`]]: isOutline,\n  });\n  const linkClasses = cn(\n    LinkListStyles['link-list__anchor'],\n    LinkListStyles[`link-list__anchor--${color}`],\n    {\n      [LinkListStyles[`link-list__anchor--line--${color}`]]: isLine,\n      [LinkListStyles['link-list__anchor--fill']]: isFill,\n      [LinkListStyles[`link-list__anchor--fill--${color}`]]: isFill,\n      [LinkListStyles['link-list__anchor--outline']]: isOutline,\n      [LinkListStyles[`link-list__anchor--outline--${color}`]]: isOutline,\n      [LinkListStyles['link-list__anchor--fill-negative']]: isFillNegative,\n      [LinkListStyles[`link-list__anchor--fill-negative--${color}`]]: isFillNegative,\n      [LinkListStyles[`link-list__anchor--${size}`]]: size,\n      [LinkListStyles['link-list__anchor--button']]: htmlMarkup === 'button',\n      [LinkListStyles['link-list__anchor--new']]: status === 'new',\n    },\n    className\n  );\n\n  const statusMarkerClasses = cn(LinkListStyles['link-list__status-marker'], {\n    [LinkListStyles['link-list__status-marker--new']]: status === 'new',\n  });\n\n  const imageContainer = <span className={LinkListStyles['link-list__image-container']}>{image}</span>;\n\n  return (\n    <li className={liClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Link}>\n      {htmlMarkup === 'a' && (\n        <a\n          className={linkClasses}\n          ref={hoverRef as React.RefObject<HTMLAnchorElement>}\n          rel={target === '_blank' ? 'noopener noreferrer' : undefined}\n          target={target}\n          {...restProps}\n        >\n          <div className={statusMarkerClasses}></div>\n          {renderElementHeader(children, {\n            titleHtmlMarkup: 'span',\n            isHovered,\n            size,\n            parentType: 'linklist',\n            chevronIcon: chevron ? ChevronRight : undefined,\n            icon: icon ?? imageContainer,\n            highlightText,\n          })}\n        </a>\n      )}\n      {htmlMarkup === 'button' && (\n        <button className={linkClasses} ref={hoverRef as React.RefObject<HTMLButtonElement>} type=\"button\" {...restProps}>\n          <div className={statusMarkerClasses}></div>\n          {renderElementHeader(children, {\n            titleHtmlMarkup: 'span',\n            isHovered,\n            size,\n            parentType: 'linklist',\n            chevronIcon: chevron ? ChevronRight : undefined,\n            icon: icon ?? imageContainer,\n            highlightText,\n          })}\n        </button>\n      )}\n    </li>\n  );\n});\n\nexport const LinkList = React.forwardRef(function LinkListForwardedRef(props: LinkListProps, ref: React.Ref<HTMLUListElement>) {\n  const { children, className = '', chevron = false, size = 'medium', color = 'white', testId, variant = 'line', highlightText } = props;\n\n  const listClassNames = cn(LinkListStyles['link-list'], className, {\n    [LinkListStyles[`link-list--outline--${color}`]]: variant === 'outline',\n  });\n\n  return (\n    <ul ref={ref} className={listClassNames} data-testid={testId} data-analyticsid={AnalyticsId.LinkList}>\n      {React.Children.map(children, (child: React.ReactNode | React.ReactElement<LinkProps>) => {\n        if ((child as React.ReactElement<LinkProps>).type === Link) {\n          return React.cloneElement(child as React.ReactElement<LinkProps>, {\n            color,\n            size,\n            chevron,\n            variant,\n            highlightText: highlightText,\n          });\n        }\n      })}\n    </ul>\n  );\n}) as CompoundComponent;\n\nLinkList.displayName = 'LinkList';\nLinkList.Link = Link;\nLink.displayName = 'LinkList.Link';\n\nexport default LinkList;\n"],"names":["React","cn"],"mappings":"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"}
+{"version":3,"file":"LinkList.js","sources":["../src/components/LinkList/LinkList.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { PaletteNames } from '../../theme/palette';\nimport { ElementHeaderType, renderElementHeader } from '../ElementHeader/ElementHeader';\nimport ChevronRight from '../Icons/ChevronRight';\nimport ListEditModeItem, { ListEditModeItemProps, listEditModeWrapperClassnames } from '../ListEditMode';\n\nimport LinkListStyles from './styles.module.scss';\n\nexport type LinkListSize = 'small' | 'medium' | 'large';\n\nexport type LinkListStatus = 'none' | 'new';\n\nexport type LinkAnchorTargets = '_self' | '_blank' | '_parent';\n\nexport type LinkListColors = Extract<PaletteNames, 'white' | 'blueberry' | 'cherry' | 'neutral'>;\nexport type LinkListVariant = 'line' | 'outline' | 'fill' | 'fill-negative';\n\nexport interface LinkType extends React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLLIElement>> {\n  ElementHeader?: ElementHeaderType;\n}\n\nexport type LinkTags = 'button' | 'a';\nexport interface CompoundComponent extends React.ForwardRefExoticComponent<LinkListProps & React.RefAttributes<HTMLUListElement>> {\n  Link: LinkType;\n}\n\nexport interface LinkListProps {\n  /** Items in the LinkList */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**  Changes the colors of the list. */\n  color?: LinkListColors;\n  /** Toggles chevron icon on or off. */\n  chevron?: boolean;\n  /** Changes size of the LinkList. */\n  size?: LinkListSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets visual priority */\n  variant?: LinkListVariant;\n  /** Highlights text. Used for search results */\n  highlightText?: string;\n  /**\n   * @experimental This prop is experimental and may change in the future.\n   * Enables ListEditMode\n   */\n  editMode?: boolean;\n}\n\ntype Modify<T, R> = Omit<T, keyof R> & R;\n\nexport type LinkProps = Modify<\n  React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>,\n  {\n    children: React.ReactNode;\n    chevron?: boolean;\n    className?: string;\n    icon?: React.ReactElement;\n    /** Renders the image in the LinkList header */\n    image?: React.ReactElement;\n    /** Displays a status on the left side: default none */\n    status?: LinkListStatus;\n    href?: string;\n    target?: LinkAnchorTargets;\n    /** HTML markup for link. Default: a */\n    htmlMarkup?: LinkTags;\n    /**\n     * Ref for lenke/knapp\n     */\n    linkRef?: React.RefObject<HTMLButtonElement | HTMLAnchorElement>;\n    /** Sets the data-testid attribute. */\n    testId?: string;\n    /** Highlights text. Override if different from list */\n    highlightText?: string;\n  }\n> &\n  Pick<LinkListProps, 'color' | 'size' | 'variant'> &\n  ListEditModeItemProps;\n\nexport const Link: LinkType = React.forwardRef((props: LinkProps, ref: React.Ref<HTMLLIElement>) => {\n  const {\n    children,\n    className = '',\n    color = 'white',\n    icon,\n    image,\n    size = 'medium',\n    chevron = false,\n    linkRef,\n    status = 'none',\n    testId,\n    target,\n    variant,\n    htmlMarkup = 'a',\n    highlightText,\n    editMode = false,\n    ...restProps\n  } = props;\n  const { hoverRef, isHovered } = useHover<HTMLButtonElement | HTMLAnchorElement>(linkRef);\n\n  const isFill = variant === 'fill';\n  const isFillNegative = variant === 'fill-negative';\n  const isOutline = variant === 'outline';\n  const isLine = variant === 'line';\n\n  const liClasses = cn(LinkListStyles['link-list'], {\n    [LinkListStyles['link-list__list-item--line']]: isLine,\n    [LinkListStyles[`link-list__list-item--outline--${color}`]]: isOutline,\n  });\n  const linkClasses = cn(\n    LinkListStyles['link-list__anchor'],\n    LinkListStyles[`link-list__anchor--${color}`],\n    {\n      [LinkListStyles[`link-list__anchor--line--${color}`]]: isLine,\n      [LinkListStyles['link-list__anchor--fill']]: isFill,\n      [LinkListStyles[`link-list__anchor--fill--${color}`]]: isFill,\n      [LinkListStyles['link-list__anchor--outline']]: isOutline,\n      [LinkListStyles[`link-list__anchor--outline--${color}`]]: isOutline,\n      [LinkListStyles['link-list__anchor--fill-negative']]: isFillNegative,\n      [LinkListStyles[`link-list__anchor--fill-negative--${color}`]]: isFillNegative,\n      [LinkListStyles[`link-list__anchor--${size}`]]: size,\n      [LinkListStyles['link-list__anchor--button']]: htmlMarkup === 'button',\n      [LinkListStyles['link-list__anchor--new']]: status === 'new',\n    },\n    className\n  );\n\n  const statusMarkerClasses = cn(LinkListStyles['link-list__status-marker'], {\n    [LinkListStyles['link-list__status-marker--new']]: status === 'new',\n  });\n\n  const imageContainer = <span className={LinkListStyles['link-list__image-container']}>{image}</span>;\n\n  return (\n    <li className={liClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Link}>\n      {editMode ? (\n        <div className={linkClasses}>\n          <div className={statusMarkerClasses}></div>\n          {renderElementHeader(children, {\n            titleHtmlMarkup: 'span',\n            size,\n            parentType: 'linklist',\n            chevronIcon: chevron ? ChevronRight : undefined,\n            icon: icon ?? imageContainer,\n            highlightText,\n          })}\n        </div>\n      ) : htmlMarkup === 'a' ? (\n        <a\n          className={linkClasses}\n          ref={hoverRef as React.RefObject<HTMLAnchorElement>}\n          rel={target === '_blank' ? 'noopener noreferrer' : undefined}\n          target={target}\n          {...restProps}\n        >\n          <div className={statusMarkerClasses}></div>\n          {renderElementHeader(children, {\n            titleHtmlMarkup: 'span',\n            isHovered,\n            size,\n            parentType: 'linklist',\n            chevronIcon: chevron ? ChevronRight : undefined,\n            icon: icon ?? imageContainer,\n            highlightText,\n          })}\n        </a>\n      ) : (\n        htmlMarkup === 'button' && (\n          <button className={linkClasses} ref={hoverRef as React.RefObject<HTMLButtonElement>} type=\"button\" {...restProps}>\n            <div className={statusMarkerClasses}></div>\n            {renderElementHeader(children, {\n              titleHtmlMarkup: 'span',\n              isHovered,\n              size,\n              parentType: 'linklist',\n              chevronIcon: chevron ? ChevronRight : undefined,\n              icon: icon ?? imageContainer,\n              highlightText,\n            })}\n          </button>\n        )\n      )}\n    </li>\n  );\n});\n\nexport const LinkList = React.forwardRef(function LinkListForwardedRef(props: LinkListProps, ref: React.Ref<HTMLUListElement>) {\n  const {\n    children,\n    className = '',\n    chevron = false,\n    size = 'medium',\n    color = 'white',\n    testId,\n    variant = 'line',\n    highlightText,\n    editMode = false,\n  } = props;\n\n  const listClassNames = cn(LinkListStyles['link-list'], className, {\n    [LinkListStyles[`link-list--outline--${color}`]]: variant === 'outline',\n    [listEditModeWrapperClassnames]: editMode,\n  });\n\n  return (\n    <ul ref={ref} className={listClassNames} data-testid={testId} data-analyticsid={AnalyticsId.LinkList}>\n      {React.Children.map(children, (child: React.ReactNode) => {\n        if (React.isValidElement<LinkProps>(child) && child.type === Link) {\n          if (editMode) {\n            return (\n              <ListEditModeItem color={color} variant={variant} onDelete={child.props.onDelete}>\n                {React.cloneElement(child, {\n                  color,\n                  size,\n                  chevron: false,\n                  variant,\n                  highlightText: highlightText,\n                  editMode: true,\n                })}\n              </ListEditModeItem>\n            );\n          } else {\n            return React.cloneElement(child, {\n              color,\n              size,\n              chevron,\n              variant,\n              highlightText: highlightText,\n              editMode: false,\n            });\n          }\n        }\n        return null;\n      })}\n    </ul>\n  );\n}) as CompoundComponent;\n\nLinkList.displayName = 'LinkList';\nLinkList.Link = Link;\nLink.displayName = 'LinkList.Link';\n\nexport default LinkList;\n"],"names":["React","cn"],"mappings":"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"}

package/ListEditMode.js

@@ -0,0 +1,42 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { IconSize } from "./constants.js";
+import { useHover } from "./hooks/useHover.js";
+import { I as Icon } from "./Icon.js";
+import X from "./components/Icons/X.js";
+import styles from "./components/ListEditMode/styles.module.scss";
+const listEditModeWrapperClassnames = classNames([styles[`list-edit-mode`]]);
+const IconButton = ({
+  icon,
+  color,
+  onClick
+}) => {
+  const { hoverRef, isHovered } = useHover();
+  return /* @__PURE__ */ jsx("button", { ref: hoverRef, onClick, type: "button", className: classNames(styles["list-edit-mode__icon-button"]), children: /* @__PURE__ */ jsx(
+    Icon,
+    {
+      isHovered,
+      svgIcon: icon,
+      size: IconSize.Small,
+      color: color === "blue" ? "var(--color-action-graphics-onlight)" : "var(--color-destructive-graphics-normal"
+    }
+  ) });
+};
+const ListEditModeItem = (props) => {
+  const { children, variant = "line", color = "neutral", onDelete } = props;
+  const listClassNames = classNames(styles["list-edit-mode__item"], color && styles[`list-edit-mode__item--${color}`], {
+    [styles["list-edit-mode__item--line"]]: variant === "line",
+    [styles["list-edit-mode__item--fill"]]: variant === "fill" || variant === "fill-negative"
+  });
+  return /* @__PURE__ */ jsxs("div", { className: listClassNames, children: [
+    onDelete && /* @__PURE__ */ jsx(IconButton, { icon: X, onClick: onDelete, color: "red" }),
+    children
+  ] });
+};
+ListEditModeItem.displayName = "ListEditModeItem";
+export {
+  IconButton as I,
+  ListEditModeItem as L,
+  listEditModeWrapperClassnames as l
+};
+//# sourceMappingURL=ListEditMode.js.map

package/ListEditMode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListEditMode.js","sources":["../src/components/ListEditMode/ListEditMode.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { IconSize } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { ExpanderListColors, ExpanderListVariant } from '../ExpanderList';\nimport Icon, { SvgIcon } from '../Icon';\nimport X from '../Icons/X';\nimport { LinkListColors, LinkListVariant } from '../LinkList';\n\nimport styles from './styles.module.scss';\n\nexport interface ListEditModeProps extends ListEditModeItemProps {\n  /** Items in the ListEditMode */\n  children: React.ReactNode;\n  /** Sets visual priority */\n  variant?: LinkListVariant | ExpanderListVariant;\n  /** Sets color */\n  color?: LinkListColors | ExpanderListColors;\n}\n\nexport interface ListEditModeItemProps {\n  /** Enables ListEditMode */\n  editMode?: boolean;\n  /** Callback for delete button  */\n  onDelete?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n}\n\nexport const listEditModeWrapperClassnames = classNames([styles[`list-edit-mode`]]);\n\nexport const IconButton = ({\n  icon,\n  color,\n  onClick,\n}: {\n  icon: SvgIcon;\n  color: 'red' | 'blue';\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n}): React.JSX.Element => {\n  const { hoverRef, isHovered } = useHover<HTMLButtonElement>();\n\n  return (\n    <button ref={hoverRef} onClick={onClick} type=\"button\" className={classNames(styles['list-edit-mode__icon-button'])}>\n      <Icon\n        isHovered={isHovered}\n        svgIcon={icon}\n        size={IconSize.Small}\n        color={color === 'blue' ? 'var(--color-action-graphics-onlight)' : 'var(--color-destructive-graphics-normal'}\n      />\n    </button>\n  );\n};\n\nexport const ListEditModeItem = (props: ListEditModeProps): React.JSX.Element => {\n  const { children, variant = 'line', color = 'neutral', onDelete } = props;\n\n  const listClassNames = classNames(styles['list-edit-mode__item'], color && styles[`list-edit-mode__item--${color}`], {\n    [styles['list-edit-mode__item--line']]: variant === 'line',\n    [styles['list-edit-mode__item--fill']]: variant === 'fill' || variant === 'fill-negative',\n  });\n\n  return (\n    <div className={listClassNames}>\n      {onDelete && <IconButton icon={X} onClick={onDelete} color=\"red\" />}\n      {children}\n    </div>\n  );\n};\n\nListEditModeItem.displayName = 'ListEditModeItem';\n\nexport default ListEditModeItem;\n"],"names":[],"mappings":";;;;;;;AA6BO,MAAM,gCAAgC,WAAW,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAE3E,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,MAIyB;AACvB,QAAM,EAAE,UAAU,UAAA,IAAc,SAAA;AAEhC,SACE,oBAAC,UAAA,EAAO,KAAK,UAAU,SAAkB,MAAK,UAAS,WAAW,WAAW,OAAO,6BAA6B,CAAC,GAChH,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAS;AAAA,MACT,MAAM,SAAS;AAAA,MACf,OAAO,UAAU,SAAS,yCAAyC;AAAA,IAAA;AAAA,EAAA,GAEvE;AAEJ;AAEO,MAAM,mBAAmB,CAAC,UAAgD;AAC/E,QAAM,EAAE,UAAU,UAAU,QAAQ,QAAQ,WAAW,aAAa;AAEpE,QAAM,iBAAiB,WAAW,OAAO,sBAAsB,GAAG,SAAS,OAAO,yBAAyB,KAAK,EAAE,GAAG;AAAA,IACnH,CAAC,OAAO,4BAA4B,CAAC,GAAG,YAAY;AAAA,IACpD,CAAC,OAAO,4BAA4B,CAAC,GAAG,YAAY,UAAU,YAAY;AAAA,EAAA,CAC3E;AAED,SACE,qBAAC,OAAA,EAAI,WAAW,gBACb,UAAA;AAAA,IAAA,gCAAa,YAAA,EAAW,MAAM,GAAG,SAAS,UAAU,OAAM,OAAM;AAAA,IAChE;AAAA,EAAA,GACH;AAEJ;AAEA,iBAAiB,cAAc;"}

package/components/Drawer/Drawer.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { HNDesignsystemDrawer } from '../../resources/Resources';
 import { TitleTags } from '../Title';
 type DesktopDirections = 'left' | 'right';
 export interface DrawerProps extends InnerDrawerProps {
@@ -10,7 +11,7 @@ export interface InnerDrawerProps {
     ariaLabel?: string;
     /** Sets the aria-labelledby of the drawer */
     ariaLabelledBy?: string;
-    /** Close button aria-label */
+    /** @deprecated Close button aria-label */
     ariaLabelCloseBtn?: string;
     /** Sets the style of the Drawer Close button. Meant for use by HelpDrawer */
     closeColor?: 'blueberry' | 'plum';
@@ -42,6 +43,10 @@ export interface InnerDrawerProps {
     onSecondaryAction?: () => void;
     /** Customize the z-index of the drawer */
     zIndex?: number;
+    /** Resources for component */
+    resources?: Partial<HNDesignsystemDrawer>;
+    /** Sets mobile styling and animation from outer level Drawer */
+    isMobile?: boolean;
 }
 declare const Drawer: React.FC<DrawerProps>;
 export default Drawer;

package/components/Drawer/resourceHelper.d.ts

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

package/components/ExpanderList/ExpanderList.d.ts

@@ -1,6 +1,7 @@
 import { default as React } from 'react';
 import { PaletteNames } from '../../theme/palette';
 import { ElementHeaderType } from '../ElementHeader/ElementHeader';
+import { ListEditModeItemProps } from '../ListEditMode';
 import { TitleTags } from '../Title';
 export type ExpanderListColors = Extract<PaletteNames, 'white' | 'blueberry' | 'cherry' | 'neutral'>;
 export interface ExpanderType extends React.ForwardRefExoticComponent<ExpanderProps & React.RefAttributes<HTMLLIElement>> {
@@ -34,6 +35,11 @@ interface ExpanderListProps {
     zIndex?: number;
     /** Highlights text in title and content. Used for search results */
     highlightText?: string;
+    /**
+     * @experimental This prop is experimental and may change in the future.
+     * Enables ListEditMode
+     */
+    editMode?: boolean;
 }
 type Modify<T, R> = Omit<T, keyof R> & R;
 type ExpanderProps = Modify<React.HTMLAttributes<HTMLButtonElement>, {
@@ -58,6 +64,7 @@ type ExpanderProps = Modify<React.HTMLAttributes<HTMLButtonElement>, {
     highlightText?: string;
     /** Displays a status on the left side: default none */
     status?: ExpanderListStatus;
-}> & Pick<ExpanderListProps, 'renderChildrenWhenClosed' | 'variant'>;
+}> & Pick<ExpanderListProps, 'renderChildrenWhenClosed' | 'variant'> & ListEditModeItemProps;
+export declare const Expander: ExpanderType;
 export declare const ExpanderList: ExpanderListCompound;
 export default ExpanderList;

package/components/ExpanderList/index.js

@@ -11,6 +11,7 @@ import { r as renderElementHeader } from "../../ElementHeader.js";
 import { H as Highlighter } from "../../Highlighter.js";
 import ChevronDown from "../Icons/ChevronDown.js";
 import ChevronUp from "../Icons/ChevronUp.js";
+import { l as listEditModeWrapperClassnames, L as ListEditModeItem } from "../../ListEditMode.js";
 import expanderListStyles from "./styles.module.scss";
 const Expander = React__default.forwardRef((props, ref) => {
   const {
@@ -31,7 +32,8 @@ const Expander = React__default.forwardRef((props, ref) => {
     variant = "line",
     zIndex = 0,
     highlightText,
-    status = "none"
+    status = "none",
+    editMode = false
   } = props;
   const [isExpanded] = useExpand(expanded, onExpand);
   const expanderRef = useRef(null);
@@ -80,7 +82,15 @@ const Expander = React__default.forwardRef((props, ref) => {
   });
   return /* @__PURE__ */ jsxs("li", { className: itemClasses, ref: mergeRefs([ref, expanderRef]), children: [
     status !== "none" && /* @__PURE__ */ jsx("div", { className: statusMarkerClasses }),
-    /* @__PURE__ */ jsx(
+    editMode ? /* @__PURE__ */ jsx("div", { id, "data-testid": testId, "data-analyticsid": AnalyticsId.ExpanderListExpander, className: expanderClasses, children: renderElementHeader(title, {
+      titleHtmlMarkup,
+      isHovered: false,
+      size: large ? "large" : "medium",
+      parentType: "expanderlist",
+      chevronIcon: void 0,
+      icon,
+      highlightText
+    }) }) : /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
@@ -105,7 +115,7 @@ const Expander = React__default.forwardRef((props, ref) => {
         })
       }
     ),
-    renderContent()
+    !editMode && renderContent()
   ] });
 });
 const isExpanderComponent = (element) => React__default.isValidElement(element) && element.type === Expander;
@@ -121,14 +131,16 @@ const ExpanderList = React__default.forwardRef((props, ref) => {
     testId,
     variant,
     zIndex,
-    highlightText
+    highlightText,
+    editMode = false
   } = props;
   const [activeExpander, setActiveExpander] = useState();
   const [latestExpander, setLatestExpander] = useState();
   const uuid = useUuid();
   const expanderListClasses = classNames(expanderListStyles["expander-list"], className, {
     [expanderListStyles[`expander-list--outline--${color}`]]: variant === "outline",
-    [expanderListStyles[`expander-list--fill`]]: variant === "fill" || variant === "fill-negative"
+    [expanderListStyles[`expander-list--fill`]]: variant === "fill" || variant === "fill-negative",
+    [listEditModeWrapperClassnames]: editMode
   });
   function handleExpanderClick(event, id) {
     setActiveExpander((prevState) => accordion ? { [id]: !(prevState == null ? void 0 : prevState[id]) } : { ...prevState, [id]: !(prevState == null ? void 0 : prevState[id]) });
@@ -159,21 +171,39 @@ const ExpanderList = React__default.forwardRef((props, ref) => {
       const id = getExpanderId(index);
       const expanded = activeExpander == null ? void 0 : activeExpander[id];
       const highlightTextChild = child.props.highlightText || highlightText;
-      return React__default.cloneElement(child, {
-        id,
-        key: index,
-        expanded,
-        padding: childPadding,
-        color,
-        large,
-        "aria-expanded": expanded,
-        className: expanderListStyles["expander-list__item"],
-        handleExpanderClick: (event) => handleExpanderClick(event, `${uuid}-${index}`),
-        renderChildrenWhenClosed,
-        variant,
-        zIndex,
-        highlightText: highlightTextChild
-      });
+      if (editMode) {
+        return /* @__PURE__ */ jsx(ListEditModeItem, { color, variant, onDelete: child.props.onDelete, children: React__default.cloneElement(child, {
+          id,
+          key: index,
+          expanded,
+          padding: childPadding,
+          color,
+          large,
+          "aria-expanded": false,
+          className: expanderListStyles["expander-list__item"],
+          renderChildrenWhenClosed: false,
+          variant,
+          zIndex,
+          highlightText: highlightTextChild,
+          editMode: true
+        }) });
+      } else {
+        return React__default.cloneElement(child, {
+          id,
+          key: index,
+          expanded,
+          padding: childPadding,
+          color,
+          large,
+          "aria-expanded": expanded,
+          className: expanderListStyles["expander-list__item"],
+          handleExpanderClick: (event) => handleExpanderClick(event, `${uuid}-${index}`),
+          renderChildrenWhenClosed,
+          variant,
+          zIndex,
+          highlightText: highlightTextChild
+        });
+      }
     }
     return child;
   }) });
@@ -182,6 +212,7 @@ ExpanderList.displayName = "ExpanderList";
 ExpanderList.Expander = Expander;
 Expander.displayName = "ExpanderList.Expander";
 export {
+  Expander,
   ExpanderList,
   ExpanderList as default
 };

package/components/ExpanderList/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/ExpanderList/ExpanderList.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\nimport { PaletteNames } from '../../theme/palette';\nimport { mergeRefs } from '../../utils/refs';\nimport { isElementInViewport } from '../../utils/viewport';\nimport { ElementHeaderType, renderElementHeader } from '../ElementHeader/ElementHeader';\nimport Highlighter from '../Highlighter';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport { TitleTags } from '../Title';\n\nimport expanderListStyles from './styles.module.scss';\n\nexport type ExpanderListColors = Extract<PaletteNames, 'white' | 'blueberry' | 'cherry' | 'neutral'>;\nexport interface ExpanderType extends React.ForwardRefExoticComponent<ExpanderProps & React.RefAttributes<HTMLLIElement>> {\n  ElementHeader?: ElementHeaderType;\n}\n\nexport interface ExpanderListCompound extends React.ForwardRefExoticComponent<ExpanderListProps & React.RefAttributes<HTMLUListElement>> {\n  Expander: ExpanderType;\n}\n\nexport type ExpanderListVariant = 'line' | 'outline' | 'fill' | 'fill-negative';\n\nexport type ExpanderListStatus = 'none' | 'new';\n\ninterface ExpanderListProps {\n  /** Toggles accordion functionality for the expanders. */\n  accordion?: boolean;\n  /** Items in the ExpanderList */\n  children: React.ReactNode;\n  /** Toggles padding of child elements */\n  childPadding?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the colors of the list. */\n  color?: ExpanderListColors;\n  /** Changes the font size. */\n  large?: boolean;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets visual priority */\n  variant?: ExpanderListVariant;\n  /** Overrides the default z-index of the expander header */\n  zIndex?: number;\n  /** Highlights text in title and content. Used for search results */\n  highlightText?: string;\n}\n\ntype Modify<T, R> = Omit<T, keyof R> & R;\n\ntype ExpanderProps = Modify<\n  React.HTMLAttributes<HTMLButtonElement>,\n  {\n    id?: string;\n    title: JSX.Element | string;\n    /** Changes the underlying element of the title. Default: span*/\n    titleHtmlMarkup?: TitleTags;\n    children: React.ReactNode;\n    className?: string;\n    color?: ExpanderListColors;\n    icon?: React.ReactElement;\n    padding?: boolean;\n    expanded?: boolean;\n    large?: boolean;\n    testId?: string;\n    handleExpanderClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n    /** Called when expander is open/closed. */\n    onExpand?: (isExpanded: boolean) => void;\n    /** Overrides the default z-index of the expander header */\n    zIndex?: number;\n    /** Highlights text in title and content. Override if different from list. */\n    highlightText?: string;\n    /** Displays a status on the left side: default none */\n    status?: ExpanderListStatus;\n  }\n> &\n  Pick<ExpanderListProps, 'renderChildrenWhenClosed' | 'variant'>;\n\nconst Expander: ExpanderType = React.forwardRef<HTMLLIElement, ExpanderProps>((props, ref) => {\n  const {\n    id,\n    children,\n    padding = true,\n    color = 'neutral',\n    className = '',\n    icon,\n    large = false,\n    title,\n    titleHtmlMarkup = 'span',\n    expanded = false,\n    testId,\n    handleExpanderClick,\n    onExpand,\n    renderChildrenWhenClosed,\n    variant = 'line',\n    zIndex = 0,\n    highlightText,\n    status = 'none',\n  } = props;\n  const [isExpanded] = useExpand(expanded, onExpand);\n  const expanderRef = useRef<HTMLLIElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const { isHovered, isFocused } = usePseudoClasses(triggerRef);\n\n  const isFill = variant === 'fill';\n  const isFillNegative = variant === 'fill-negative';\n  const isOutline = variant === 'outline';\n  const isLine = variant === 'line';\n\n  const itemClasses = classNames(className, expanderListStyles['expander-list__item'], {\n    [expanderListStyles[`expander-list__item--fill`]]: isFill,\n    [expanderListStyles[`expander-list__item--fill--${color}`]]: isFill,\n    [expanderListStyles[`expander-list__item--fill-negative`]]: isFillNegative,\n    [expanderListStyles[`expander-list__item--fill-negative--${color}`]]: isFillNegative,\n    [expanderListStyles['expander-list__item--outline']]: isOutline,\n    [expanderListStyles[`expander-list__item--outline--${color}`]]: isOutline,\n    [expanderListStyles['expander-list__item--line']]: isLine,\n    [expanderListStyles[`expander-list__item--line--${color}`]]: isLine,\n    [expanderListStyles[`expander-list__item--new`]]: status === 'new',\n  });\n\n  const expanderClasses = classNames(expanderListStyles['expander-list-link'], expanderListStyles[`expander-list-link--${color}`], {\n    [expanderListStyles[`expander-list-link--fill--${color}`]]: isFill,\n    [expanderListStyles[`expander-list-link--fill-negative`]]: isFillNegative,\n    [expanderListStyles[`expander-list-link--fill-negative--${color}`]]: isFillNegative,\n    [expanderListStyles['expander-list-link--outline']]: isOutline,\n    [expanderListStyles[`expander-list-link--outline--${color}`]]: isOutline,\n    [expanderListStyles[`expander-list-link--line--${color}`]]: isLine,\n    [expanderListStyles['expander-list-link--open']]: isExpanded,\n    [expanderListStyles['expander-list-link--large']]: large,\n    [expanderListStyles[`expander-list-link--new`]]: status === 'new',\n  });\n\n  const renderContent = (): React.ReactNode => {\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const mainContentClasses = classNames(expanderListStyles['expander-list-link__main-content'], {\n      [expanderListStyles['expander-list-link__main-content--expanded']]: isExpanded,\n      [expanderListStyles['expander-list-link__main-content--padding']]: padding,\n      [expanderListStyles[`expander-list-link__main-content--outline--${color}`]]: isOutline,\n      [expanderListStyles[`expander-list-link__main-content--new`]]: status === 'new',\n    });\n\n    return (\n      <div className={mainContentClasses} data-state={isExpanded ? 'open' : 'closed'}>\n        <Highlighter searchText={highlightText}>{children}</Highlighter>\n      </div>\n    );\n  };\n\n  const statusMarkerClasses = classNames(expanderListStyles['expander-list__item__status-marker'], {\n    [expanderListStyles['expander-list__item__status-marker--new']]: status === 'new',\n  });\n\n  return (\n    <li className={itemClasses} ref={mergeRefs([ref, expanderRef])}>\n      {status !== 'none' && <div className={statusMarkerClasses}></div>}\n      <button\n        type=\"button\"\n        id={id}\n        onClick={handleExpanderClick}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.ExpanderListExpander}\n        className={expanderClasses}\n        ref={triggerRef}\n        aria-expanded={isExpanded}\n        style={{\n          zIndex: isFocused ? zIndex + 1 : zIndex,\n        }}\n      >\n        {renderElementHeader(title, {\n          titleHtmlMarkup,\n          isHovered: isHovered || isFocused,\n          size: large ? 'large' : 'medium',\n          parentType: 'expanderlist',\n          chevronIcon: isExpanded ? ChevronUp : ChevronDown,\n          icon,\n          highlightText,\n        })}\n      </button>\n      {renderContent()}\n    </li>\n  );\n});\n\ntype ActiveExpander = Record<string, boolean>;\n\nconst isExpanderComponent = (element: unknown | null | undefined): element is React.ReactElement<ExpanderProps> =>\n  React.isValidElement<ExpanderProps>(element) && (element as React.ReactElement).type === Expander;\n\nexport const ExpanderList = React.forwardRef((props: ExpanderListProps, ref: React.Ref<HTMLUListElement>) => {\n  const {\n    children,\n    childPadding = true,\n    large,\n    renderChildrenWhenClosed = false,\n    color = 'white',\n    className = '',\n    accordion = false,\n    testId,\n    variant,\n    zIndex,\n    highlightText,\n  } = props;\n  const [activeExpander, setActiveExpander] = useState<ActiveExpander>();\n  const [latestExpander, setLatestExpander] = useState<HTMLElement>();\n  const uuid = useUuid();\n  const expanderListClasses = classNames(expanderListStyles['expander-list'], className, {\n    [expanderListStyles[`expander-list--outline--${color}`]]: variant === 'outline',\n    [expanderListStyles[`expander-list--fill`]]: variant === 'fill' || variant === 'fill-negative',\n  });\n\n  function handleExpanderClick(event: React.MouseEvent<HTMLElement, MouseEvent>, id: string): void {\n    setActiveExpander(prevState => (accordion ? { [id]: !prevState?.[id] } : { ...prevState, [id]: !prevState?.[id] }));\n    setLatestExpander(event.currentTarget);\n  }\n\n  const getExpanderId = (index: number): string => `${uuid}-${index}`;\n\n  useEffect(() => {\n    if (accordion && latestExpander && !isElementInViewport(latestExpander)) {\n      latestExpander.scrollIntoView();\n    }\n  }, [accordion, latestExpander]);\n\n  useEffect(() => {\n    const newActiveExpander = React.Children.map(children, child => {\n      if (isExpanderComponent(child)) {\n        return child;\n      }\n    })?.reduce((acc, child, index) => {\n      // Expanded-status skal bare settes dersom prop er satt av den som bruker komponenten\n      if (typeof child.props.expanded !== 'undefined') {\n        acc[getExpanderId(index)] = child.props.expanded;\n      }\n      return acc;\n    }, {} as ActiveExpander);\n\n    setActiveExpander({ ...activeExpander, ...newActiveExpander });\n  }, [children]);\n\n  return (\n    <ul className={expanderListClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.ExpanderList}>\n      {React.Children.map(children, (child, index) => {\n        if (isExpanderComponent(child)) {\n          const id = getExpanderId(index);\n          const expanded = activeExpander?.[id];\n          const highlightTextChild: string | undefined = child.props.highlightText || highlightText;\n\n          return React.cloneElement(child as React.ReactElement<ExpanderProps>, {\n            id,\n            key: index,\n            expanded,\n            padding: childPadding,\n            color,\n            large,\n            'aria-expanded': expanded,\n            className: expanderListStyles['expander-list__item'],\n            handleExpanderClick: (event: React.MouseEvent<HTMLElement>) => handleExpanderClick(event, `${uuid}-${index}`),\n            renderChildrenWhenClosed,\n            variant,\n            zIndex: zIndex,\n            highlightText: highlightTextChild,\n          });\n        }\n        return child;\n      })}\n    </ul>\n  );\n}) as ExpanderListCompound;\n\nExpanderList.displayName = 'ExpanderList';\nExpanderList.Expander = Expander;\nExpander.displayName = 'ExpanderList.Expander';\n\nexport default ExpanderList;\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/ExpanderList/ExpanderList.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\nimport { PaletteNames } from '../../theme/palette';\nimport { mergeRefs } from '../../utils/refs';\nimport { isElementInViewport } from '../../utils/viewport';\nimport { ElementHeaderType, renderElementHeader } from '../ElementHeader/ElementHeader';\nimport Highlighter from '../Highlighter';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport ListEditModeItem, { ListEditModeItemProps, listEditModeWrapperClassnames } from '../ListEditMode';\nimport { TitleTags } from '../Title';\n\nimport expanderListStyles from './styles.module.scss';\n\nexport type ExpanderListColors = Extract<PaletteNames, 'white' | 'blueberry' | 'cherry' | 'neutral'>;\nexport interface ExpanderType extends React.ForwardRefExoticComponent<ExpanderProps & React.RefAttributes<HTMLLIElement>> {\n  ElementHeader?: ElementHeaderType;\n}\n\nexport interface ExpanderListCompound extends React.ForwardRefExoticComponent<ExpanderListProps & React.RefAttributes<HTMLUListElement>> {\n  Expander: ExpanderType;\n}\n\nexport type ExpanderListVariant = 'line' | 'outline' | 'fill' | 'fill-negative';\n\nexport type ExpanderListStatus = 'none' | 'new';\n\ninterface ExpanderListProps {\n  /** Toggles accordion functionality for the expanders. */\n  accordion?: boolean;\n  /** Items in the ExpanderList */\n  children: React.ReactNode;\n  /** Toggles padding of child elements */\n  childPadding?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the colors of the list. */\n  color?: ExpanderListColors;\n  /** Changes the font size. */\n  large?: boolean;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets visual priority */\n  variant?: ExpanderListVariant;\n  /** Overrides the default z-index of the expander header */\n  zIndex?: number;\n  /** Highlights text in title and content. Used for search results */\n  highlightText?: string;\n  /**\n   * @experimental This prop is experimental and may change in the future.\n   * Enables ListEditMode\n   */\n  editMode?: boolean;\n}\n\ntype Modify<T, R> = Omit<T, keyof R> & R;\n\ntype ExpanderProps = Modify<\n  React.HTMLAttributes<HTMLButtonElement>,\n  {\n    id?: string;\n    title: JSX.Element | string;\n    /** Changes the underlying element of the title. Default: span*/\n    titleHtmlMarkup?: TitleTags;\n    children: React.ReactNode;\n    className?: string;\n    color?: ExpanderListColors;\n    icon?: React.ReactElement;\n    padding?: boolean;\n    expanded?: boolean;\n    large?: boolean;\n    testId?: string;\n    handleExpanderClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n    /** Called when expander is open/closed. */\n    onExpand?: (isExpanded: boolean) => void;\n    /** Overrides the default z-index of the expander header */\n    zIndex?: number;\n    /** Highlights text in title and content. Override if different from list. */\n    highlightText?: string;\n    /** Displays a status on the left side: default none */\n    status?: ExpanderListStatus;\n  }\n> &\n  Pick<ExpanderListProps, 'renderChildrenWhenClosed' | 'variant'> &\n  ListEditModeItemProps;\n\nexport const Expander: ExpanderType = React.forwardRef<HTMLLIElement, ExpanderProps>((props, ref) => {\n  const {\n    id,\n    children,\n    padding = true,\n    color = 'neutral',\n    className = '',\n    icon,\n    large = false,\n    title,\n    titleHtmlMarkup = 'span',\n    expanded = false,\n    testId,\n    handleExpanderClick,\n    onExpand,\n    renderChildrenWhenClosed,\n    variant = 'line',\n    zIndex = 0,\n    highlightText,\n    status = 'none',\n    editMode = false,\n  } = props;\n  const [isExpanded] = useExpand(expanded, onExpand);\n  const expanderRef = useRef<HTMLLIElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const { isHovered, isFocused } = usePseudoClasses(triggerRef);\n\n  const isFill = variant === 'fill';\n  const isFillNegative = variant === 'fill-negative';\n  const isOutline = variant === 'outline';\n  const isLine = variant === 'line';\n\n  const itemClasses = classNames(className, expanderListStyles['expander-list__item'], {\n    [expanderListStyles[`expander-list__item--fill`]]: isFill,\n    [expanderListStyles[`expander-list__item--fill--${color}`]]: isFill,\n    [expanderListStyles[`expander-list__item--fill-negative`]]: isFillNegative,\n    [expanderListStyles[`expander-list__item--fill-negative--${color}`]]: isFillNegative,\n    [expanderListStyles['expander-list__item--outline']]: isOutline,\n    [expanderListStyles[`expander-list__item--outline--${color}`]]: isOutline,\n    [expanderListStyles['expander-list__item--line']]: isLine,\n    [expanderListStyles[`expander-list__item--line--${color}`]]: isLine,\n    [expanderListStyles[`expander-list__item--new`]]: status === 'new',\n  });\n\n  const expanderClasses = classNames(expanderListStyles['expander-list-link'], expanderListStyles[`expander-list-link--${color}`], {\n    [expanderListStyles[`expander-list-link--fill--${color}`]]: isFill,\n    [expanderListStyles[`expander-list-link--fill-negative`]]: isFillNegative,\n    [expanderListStyles[`expander-list-link--fill-negative--${color}`]]: isFillNegative,\n    [expanderListStyles['expander-list-link--outline']]: isOutline,\n    [expanderListStyles[`expander-list-link--outline--${color}`]]: isOutline,\n    [expanderListStyles[`expander-list-link--line--${color}`]]: isLine,\n    [expanderListStyles['expander-list-link--open']]: isExpanded,\n    [expanderListStyles['expander-list-link--large']]: large,\n    [expanderListStyles[`expander-list-link--new`]]: status === 'new',\n  });\n\n  const renderContent = (): React.ReactNode => {\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const mainContentClasses = classNames(expanderListStyles['expander-list-link__main-content'], {\n      [expanderListStyles['expander-list-link__main-content--expanded']]: isExpanded,\n      [expanderListStyles['expander-list-link__main-content--padding']]: padding,\n      [expanderListStyles[`expander-list-link__main-content--outline--${color}`]]: isOutline,\n      [expanderListStyles[`expander-list-link__main-content--new`]]: status === 'new',\n    });\n\n    return (\n      <div className={mainContentClasses} data-state={isExpanded ? 'open' : 'closed'}>\n        <Highlighter searchText={highlightText}>{children}</Highlighter>\n      </div>\n    );\n  };\n\n  const statusMarkerClasses = classNames(expanderListStyles['expander-list__item__status-marker'], {\n    [expanderListStyles['expander-list__item__status-marker--new']]: status === 'new',\n  });\n\n  return (\n    <li className={itemClasses} ref={mergeRefs([ref, expanderRef])}>\n      {status !== 'none' && <div className={statusMarkerClasses}></div>}\n      {editMode ? (\n        <div id={id} data-testid={testId} data-analyticsid={AnalyticsId.ExpanderListExpander} className={expanderClasses}>\n          {renderElementHeader(title, {\n            titleHtmlMarkup,\n            isHovered: false,\n            size: large ? 'large' : 'medium',\n            parentType: 'expanderlist',\n            chevronIcon: undefined,\n            icon,\n            highlightText,\n          })}\n        </div>\n      ) : (\n        <button\n          type=\"button\"\n          id={id}\n          onClick={handleExpanderClick}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.ExpanderListExpander}\n          className={expanderClasses}\n          ref={triggerRef}\n          aria-expanded={isExpanded}\n          style={{\n            zIndex: isFocused ? zIndex + 1 : zIndex,\n          }}\n        >\n          {renderElementHeader(title, {\n            titleHtmlMarkup,\n            isHovered: isHovered || isFocused,\n            size: large ? 'large' : 'medium',\n            parentType: 'expanderlist',\n            chevronIcon: isExpanded ? ChevronUp : ChevronDown,\n            icon,\n            highlightText,\n          })}\n        </button>\n      )}\n      {!editMode && renderContent()}\n    </li>\n  );\n});\n\ntype ActiveExpander = Record<string, boolean>;\n\nconst isExpanderComponent = (element: unknown | null | undefined): element is React.ReactElement<ExpanderProps> =>\n  React.isValidElement<ExpanderProps>(element) && (element as React.ReactElement).type === Expander;\n\nexport const ExpanderList = React.forwardRef((props: ExpanderListProps, ref: React.Ref<HTMLUListElement>) => {\n  const {\n    children,\n    childPadding = true,\n    large,\n    renderChildrenWhenClosed = false,\n    color = 'white',\n    className = '',\n    accordion = false,\n    testId,\n    variant,\n    zIndex,\n    highlightText,\n    editMode = false,\n  } = props;\n  const [activeExpander, setActiveExpander] = useState<ActiveExpander>();\n  const [latestExpander, setLatestExpander] = useState<HTMLElement>();\n  const uuid = useUuid();\n  const expanderListClasses = classNames(expanderListStyles['expander-list'], className, {\n    [expanderListStyles[`expander-list--outline--${color}`]]: variant === 'outline',\n    [expanderListStyles[`expander-list--fill`]]: variant === 'fill' || variant === 'fill-negative',\n    [listEditModeWrapperClassnames]: editMode,\n  });\n\n  function handleExpanderClick(event: React.MouseEvent<HTMLElement, MouseEvent>, id: string): void {\n    setActiveExpander(prevState => (accordion ? { [id]: !prevState?.[id] } : { ...prevState, [id]: !prevState?.[id] }));\n    setLatestExpander(event.currentTarget);\n  }\n\n  const getExpanderId = (index: number): string => `${uuid}-${index}`;\n\n  useEffect(() => {\n    if (accordion && latestExpander && !isElementInViewport(latestExpander)) {\n      latestExpander.scrollIntoView();\n    }\n  }, [accordion, latestExpander]);\n\n  useEffect(() => {\n    const newActiveExpander = React.Children.map(children, child => {\n      if (isExpanderComponent(child)) {\n        return child;\n      }\n    })?.reduce((acc, child, index) => {\n      // Expanded-status skal bare settes dersom prop er satt av den som bruker komponenten\n      if (typeof child.props.expanded !== 'undefined') {\n        acc[getExpanderId(index)] = child.props.expanded;\n      }\n      return acc;\n    }, {} as ActiveExpander);\n\n    setActiveExpander({ ...activeExpander, ...newActiveExpander });\n  }, [children]);\n\n  return (\n    <ul className={expanderListClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.ExpanderList}>\n      {React.Children.map(children, (child, index) => {\n        if (isExpanderComponent(child)) {\n          const id = getExpanderId(index);\n          const expanded = activeExpander?.[id];\n          const highlightTextChild: string | undefined = child.props.highlightText || highlightText;\n\n          if (editMode) {\n            return (\n              <ListEditModeItem color={color} variant={variant} onDelete={child.props.onDelete}>\n                {React.cloneElement(child, {\n                  id,\n                  key: index,\n                  expanded,\n                  padding: childPadding,\n                  color,\n                  large,\n                  'aria-expanded': false,\n                  className: expanderListStyles['expander-list__item'],\n                  renderChildrenWhenClosed: false,\n                  variant,\n                  zIndex: zIndex,\n                  highlightText: highlightTextChild,\n                  editMode: true,\n                })}\n              </ListEditModeItem>\n            );\n          } else {\n            return React.cloneElement(child as React.ReactElement<ExpanderProps>, {\n              id,\n              key: index,\n              expanded,\n              padding: childPadding,\n              color,\n              large,\n              'aria-expanded': expanded,\n              className: expanderListStyles['expander-list__item'],\n              handleExpanderClick: (event: React.MouseEvent<HTMLElement>) => handleExpanderClick(event, `${uuid}-${index}`),\n              renderChildrenWhenClosed,\n              variant,\n              zIndex: zIndex,\n              highlightText: highlightTextChild,\n            });\n          }\n        }\n        return child;\n      })}\n    </ul>\n  );\n}) as ExpanderListCompound;\n\nExpanderList.displayName = 'ExpanderList';\nExpanderList.Expander = Expander;\nExpander.displayName = 'ExpanderList.Expander';\n\nexport default ExpanderList;\n"],"names":["React"],"mappings":"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"}

package/components/ExpanderList/styles.module.scss

@@ -187,7 +187,6 @@
   font-size: font-settings.$font-size-sm;
   line-height: font-settings.$lineheight-size-sm;
   display: flex;
-  cursor: pointer;
   font-family: inherit;
   text-decoration: none;
   justify-content: space-between;
@@ -200,6 +199,10 @@
   grid-area: header;
   padding-left: var(--statusmarker-left-space);
 
+  &:not(div) {
+    cursor: pointer;
+  }
+
   @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     font-size: font-settings.$font-size-md;
     line-height: font-settings.$lineheight-size-md;
@@ -223,11 +226,12 @@
 
   &--white:not(.expander-list-link--outline, .expander-list-link--fill-negative) {
     &[aria-expanded='false'] {
-      &:hover {
+      // expander settes til div om man er i edit mode, og skal da ikke ha hover/active effekter
+      &:hover:not(div) {
         background-color: var(--core-color-neutral-50);
       }
 
-      &:active {
+      &:active:not(div) {
         background-color: var(--core-color-neutral-100);
       }
     }
@@ -235,11 +239,11 @@
     &[aria-expanded='true'] {
       background-color: var(--core-color-neutral-50);
 
-      &:hover {
+      &:hover:not(div) {
         background-color: var(--core-color-neutral-100);
       }
 
-      &:active {
+      &:active:not(div) {
         background-color: var(--core-color-neutral-200);
       }
     }
@@ -247,11 +251,11 @@
 
   &--blueberry:not(.expander-list-link--outline, .expander-list-link--fill-negative) {
     &[aria-expanded='false'] {
-      &:hover {
+      &:hover:not(div) {
         background-color: var(--core-color-blueberry-100);
       }
 
-      &:active {
+      &:active:not(div) {
         background-color: var(--color-action-background-ondark-hoverselected);
       }
     }
@@ -259,11 +263,11 @@
     &[aria-expanded='true'] {
       background-color: var(--core-color-blueberry-100);
 
-      &:hover {
+      &:hover:not(div) {
         background-color: var(--core-color-blueberry-200);
       }
 
-      &:active {
+      &:active:not(div) {
         background-color: var(--core-color-blueberry-300);
       }
     }
@@ -271,11 +275,11 @@
 
   &--cherry:not(.expander-list-link--outline, .expander-list-link--fill-negative) {
     &[aria-expanded='false'] {
-      &:hover {
+      &:hover:not(div) {
         background-color: var(--core-color-cherry-100);
       }
 
-      &:active {
+      &:active:not(div) {
         background-color: var(--core-color-cherry-200);
       }
     }
@@ -283,11 +287,11 @@
     &[aria-expanded='true'] {
       background-color: var(--core-color-cherry-100);
 
-      &:hover {
+      &:hover:not(div) {
         background-color: var(--core-color-cherry-200);
       }
 
-      &:active {
+      &:active:not(div) {
         background-color: var(--core-color-cherry-300);
       }
     }
@@ -295,11 +299,11 @@
 
   &--neutral:not(.expander-list-link--outline, .expander-list-link--fill-negative) {
     &[aria-expanded='false'] {
-      &:hover {
+      &:hover:not(div) {
         background-color: var(--core-color-neutral-100);
       }
 
-      &:active {
+      &:active:not(div) {
         background-color: var(--core-color-neutral-200);
       }
     }
@@ -307,11 +311,11 @@
     &[aria-expanded='true'] {
       background-color: var(--core-color-neutral-100);
 
-      &:hover {
+      &:hover:not(div) {
         background-color: var(--core-color-neutral-200);
       }
 
-      &:active {
+      &:active:not(div) {
         background-color: var(--core-color-neutral-300);
       }
     }
@@ -349,11 +353,11 @@
 
     &--blueberry {
       &[aria-expanded='false'] {
-        &:hover {
+        &:hover:not(div) {
           background-color: var(--core-color-blueberry-50);
         }
 
-        &:active {
+        &:active:not(div) {
           background-color: var(--core-color-blueberry-100);
         }
       }
@@ -361,11 +365,11 @@
       &[aria-expanded='true'] {
         background-color: var(--core-color-blueberry-50);
 
-        &:hover {
+        &:hover:not(div) {
           background-color: var(--core-color-blueberry-100);
         }
 
-        &:active {
+        &:active:not(div) {
           background-color: var(--core-color-blueberry-200);
         }
       }
@@ -373,11 +377,11 @@
 
     &--cherry {
       &[aria-expanded='false'] {
-        &:hover {
+        &:hover:not(div) {
           background-color: var(--core-color-cherry-50);
         }
 
-        &:active {
+        &:active:not(div) {
           background-color: var(--core-color-cherry-100);
         }
       }
@@ -385,11 +389,11 @@
       &[aria-expanded='true'] {
         background-color: var(--core-color-cherry-50);
 
-        &:hover {
+        &:hover:not(div) {
           background-color: var(--core-color-cherry-100);
         }
 
-        &:active {
+        &:active:not(div) {
           background-color: var(--core-color-cherry-200);
         }
       }
@@ -398,11 +402,11 @@
     &--neutral,
     &--white {
       &[aria-expanded='false'] {
-        &:hover {
+        &:hover:not(div) {
           background-color: var(--core-color-neutral-50);
         }
 
-        &:active {
+        &:active:not(div) {
           background-color: var(--core-color-neutral-100);
         }
       }
@@ -410,11 +414,11 @@
       &[aria-expanded='true'] {
         background-color: var(--core-color-neutral-50);
 
-        &:hover {
+        &:hover:not(div) {
           background-color: var(--core-color-neutral-100);
         }
 
-        &:active {
+        &:active:not(div) {
           background-color: var(--core-color-neutral-200);
         }
       }
@@ -429,22 +433,22 @@
   &--new {
     background-color: var(--core-color-blueberry-50) !important;
 
-    &:hover {
+    &:hover:not(div) {
       background-color: var(--core-color-blueberry-100) !important;
     }
 
-    &:active {
+    &:active:not(div) {
       background-color: var(--core-color-blueberry-200) !important;
     }
 
     &[aria-expanded='true'] {
       background-color: var(--core-color-blueberry-100) !important;
 
-      &:hover {
+      &:hover:not(div) {
         background-color: var(--core-color-blueberry-200) !important;
       }
 
-      &:active {
+      &:active:not(div) {
         background-color: var(--core-color-blueberry-300) !important;
       }
     }

package/components/FavoriteButton/StarIcon.d.ts

@@ -1,4 +1,4 @@
-export declare const starIconNormalMobile: (isFocused: boolean, isChecked: boolean, isActive: boolean) => React.JSX.Element;
-export declare const starIconHoverMobile: (isFocused: boolean, isChecked: boolean, isActive: boolean) => React.JSX.Element;
-export declare const starIconNormalDesktop: (isFocused: boolean, isChecked: boolean, isActive: boolean) => React.JSX.Element;
-export declare const starIconHoverDesktop: (isFocused: boolean, isChecked: boolean, isActive: boolean) => React.JSX.Element;
+export declare const starIconNormalMobile: (isChecked: boolean, isActive: boolean) => React.JSX.Element;
+export declare const starIconHoverMobile: (isChecked: boolean, isActive: boolean) => React.JSX.Element;
+export declare const starIconNormalDesktop: (isChecked: boolean, isActive: boolean) => React.JSX.Element;
+export declare const starIconHoverDesktop: (isChecked: boolean, isActive: boolean) => React.JSX.Element;