@helsenorge/designsystem-react 12.0.0-beta.1 → 12.0.0-beta.2

package/components/ExpanderList/index.js

@@ -7,9 +7,10 @@ import { usePseudoClasses } from "../../hooks/usePseudoClasses.js";
 import { useUuid } from "../../hooks/useUuid.js";
 import { mergeRefs } from "../../utils/refs.js";
 import { isElementInViewport } from "../../utils/viewport.js";
+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 { r as renderListHeader } from "../../ListHeader.js";
 import expanderListStyles from "./styles.module.scss";
 const Expander = React__default.forwardRef((props, ref) => {
   const {
@@ -28,7 +29,9 @@ const Expander = React__default.forwardRef((props, ref) => {
     onExpand,
     renderChildrenWhenClosed,
     variant = "line",
-    zIndex = 0
+    zIndex = 0,
+    highlightText,
+    status = "none"
   } = props;
   const [isExpanded] = useExpand(expanded, onExpand);
   const expanderRef = useRef(null);
@@ -42,34 +45,41 @@ const Expander = React__default.forwardRef((props, ref) => {
     [expanderListStyles[`expander-list__item--fill`]]: isFill,
     [expanderListStyles[`expander-list__item--fill--${color}`]]: isFill,
     [expanderListStyles[`expander-list__item--fill-negative`]]: isFillNegative,
+    [expanderListStyles[`expander-list__item--fill-negative--${color}`]]: isFillNegative,
     [expanderListStyles["expander-list__item--outline"]]: isOutline,
     [expanderListStyles[`expander-list__item--outline--${color}`]]: isOutline,
     [expanderListStyles["expander-list__item--line"]]: isLine,
-    [expanderListStyles[`expander-list__item--line--${color}`]]: isLine
+    [expanderListStyles[`expander-list__item--line--${color}`]]: isLine,
+    [expanderListStyles[`expander-list__item--new`]]: status === "new"
   });
   const expanderClasses = classNames(expanderListStyles["expander-list-link"], expanderListStyles[`expander-list-link--${color}`], {
-    [expanderListStyles[`expander-list-link--fill`]]: isFill,
     [expanderListStyles[`expander-list-link--fill--${color}`]]: isFill,
     [expanderListStyles[`expander-list-link--fill-negative`]]: isFillNegative,
+    [expanderListStyles[`expander-list-link--fill-negative--${color}`]]: isFillNegative,
     [expanderListStyles["expander-list-link--outline"]]: isOutline,
     [expanderListStyles[`expander-list-link--outline--${color}`]]: isOutline,
     [expanderListStyles[`expander-list-link--line--${color}`]]: isLine,
-    [expanderListStyles["expander-list-link--closed"]]: !isExpanded,
     [expanderListStyles["expander-list-link--open"]]: isExpanded,
-    [expanderListStyles["expander-list-link--large"]]: large
+    [expanderListStyles["expander-list-link--large"]]: large,
+    [expanderListStyles[`expander-list-link--new`]]: status === "new"
   });
   const renderContent = () => {
     if (!renderChildrenWhenClosed && !isExpanded) {
       return null;
     }
-    const mainContentClasses = classNames(
-      expanderListStyles["expander-list-link__main-content"],
-      isExpanded && expanderListStyles["expander-list-link__main-content--expanded"],
-      padding ? expanderListStyles["expander-list-link__main-content--padding"] : ""
-    );
-    return /* @__PURE__ */ jsx("div", { className: mainContentClasses, children });
+    const mainContentClasses = classNames(expanderListStyles["expander-list-link__main-content"], {
+      [expanderListStyles["expander-list-link__main-content--expanded"]]: isExpanded,
+      [expanderListStyles["expander-list-link__main-content--padding"]]: padding,
+      [expanderListStyles[`expander-list-link__main-content--outline--${color}`]]: isOutline,
+      [expanderListStyles[`expander-list-link__main-content--new`]]: status === "new"
+    });
+    return /* @__PURE__ */ jsx("div", { className: mainContentClasses, "data-state": isExpanded ? "open" : "closed", children: /* @__PURE__ */ jsx(Highlighter, { searchText: highlightText, children }) });
   };
+  const statusMarkerClasses = classNames(expanderListStyles["expander-list__item__status-marker"], {
+    [expanderListStyles["expander-list__item__status-marker--new"]]: status === "new"
+  });
   return /* @__PURE__ */ jsxs("li", { className: itemClasses, ref: mergeRefs([ref, expanderRef]), children: [
+    status !== "none" && /* @__PURE__ */ jsx("div", { className: statusMarkerClasses }),
     /* @__PURE__ */ jsx(
       "button",
       {
@@ -84,14 +94,15 @@ const Expander = React__default.forwardRef((props, ref) => {
         style: {
           zIndex: isFocused ? zIndex + 1 : zIndex
         },
-        children: renderListHeader(
-          title,
+        children: renderElementHeader(title, {
           titleHtmlMarkup,
-          isHovered || isFocused,
-          large ? "large" : "medium",
-          isExpanded ? ChevronUp : ChevronDown,
-          icon
-        )
+          isHovered: isHovered || isFocused,
+          size: large ? "large" : "medium",
+          parentType: "expanderlist",
+          chevronIcon: isExpanded ? ChevronUp : ChevronDown,
+          icon,
+          highlightText
+        })
       }
     ),
     renderContent()
@@ -104,17 +115,21 @@ const ExpanderList = React__default.forwardRef((props, ref) => {
     childPadding = true,
     large,
     renderChildrenWhenClosed = false,
-    color,
+    color = "white",
     className = "",
     accordion = false,
     testId,
     variant,
-    zIndex
+    zIndex,
+    highlightText
   } = props;
   const [activeExpander, setActiveExpander] = useState();
   const [latestExpander, setLatestExpander] = useState();
   const uuid = useUuid();
-  const expanderListClasses = classNames(expanderListStyles["expander-list"], className);
+  const expanderListClasses = classNames(expanderListStyles["expander-list"], className, {
+    [expanderListStyles[`expander-list--outline--${color}`]]: variant === "outline",
+    [expanderListStyles[`expander-list--fill`]]: variant === "fill" || variant === "fill-negative"
+  });
   function handleExpanderClick(event, id) {
     setActiveExpander((prevState) => accordion ? { [id]: !(prevState == null ? void 0 : prevState[id]) } : { ...prevState, [id]: !(prevState == null ? void 0 : prevState[id]) });
     setLatestExpander(event.currentTarget);
@@ -143,6 +158,7 @@ const ExpanderList = React__default.forwardRef((props, ref) => {
     if (isExpanderComponent(child)) {
       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,
@@ -155,7 +171,8 @@ const ExpanderList = React__default.forwardRef((props, ref) => {
         handleExpanderClick: (event) => handleExpanderClick(event, `${uuid}-${index}`),
         renderChildrenWhenClosed,
         variant,
-        zIndex
+        zIndex,
+        highlightText: highlightTextChild
       });
     }
     return child;

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 ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport { ListHeaderType, renderListHeader } from '../ListHeader/ListHeader';\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  ListHeader?: ListHeaderType;\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\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}\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  }\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  } = 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--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  });\n\n  const expanderClasses = classNames(expanderListStyles['expander-list-link'], expanderListStyles[`expander-list-link--${color}`], {\n    [expanderListStyles[`expander-list-link--fill`]]: isFill,\n    [expanderListStyles[`expander-list-link--fill--${color}`]]: isFill,\n    [expanderListStyles[`expander-list-link--fill-negative`]]: 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--closed']]: !isExpanded,\n    [expanderListStyles['expander-list-link--open']]: isExpanded,\n    [expanderListStyles['expander-list-link--large']]: large,\n  });\n\n  const renderContent = (): React.ReactNode => {\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const mainContentClasses = classNames(\n      expanderListStyles['expander-list-link__main-content'],\n      isExpanded && expanderListStyles['expander-list-link__main-content--expanded'],\n      padding ? expanderListStyles['expander-list-link__main-content--padding'] : ''\n    );\n\n    return <div className={mainContentClasses}>{children}</div>;\n  };\n\n  return (\n    <li className={itemClasses} ref={mergeRefs([ref, expanderRef])}>\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        {renderListHeader(\n          title,\n          titleHtmlMarkup,\n          isHovered || isFocused,\n          large ? 'large' : 'medium',\n          isExpanded ? ChevronUp : ChevronDown,\n          icon\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,\n    className = '',\n    accordion = false,\n    testId,\n    variant,\n    zIndex,\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\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\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          });\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 { 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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"}

package/components/ExpanderList/styles.module.scss

@@ -5,14 +5,51 @@
 @import '../../scss/supernova/styles/colors.css';
 
 .expander-list {
+  --statusmarker-left-space: 8px;
+
   list-style: none;
   padding: 0;
   width: inherit;
   margin: 0;
 
+  &--outline {
+    &--neutral {
+      border: 1px solid var(--color-base-border-onlight);
+    }
+
+    &--blueberry {
+      border: 1px solid var(--core-color-blueberry-500);
+    }
+
+    &--cherry {
+      border: 1px solid var(--core-color-cherry-400);
+    }
+
+    &--white {
+      border: 1px solid var(--color-base-border-onlight);
+    }
+  }
+
+  &--fill {
+    display: flex;
+    flex-flow: column;
+    gap: spacers.getSpacer(2xs);
+  }
+
   &__item {
     border: 0;
-    position: relative;
+    display: grid;
+    grid-template:
+      'header' auto
+      'content' auto / 1fr auto;
+
+    &--new {
+      grid-template:
+        'statusmarker header' auto
+        'statusmarker content' auto / 8px auto;
+
+      --statusmarker-left-space: 0px;
+    }
 
     &--line {
       border-bottom: 1px solid var(--color-base-border-onlight);
@@ -111,6 +148,36 @@
     &--fill-negative {
       background-color: var(--color-base-background-white);
     }
+
+    &--fill,
+    &--fill-negative {
+      &--blueberry {
+        border: 1px solid var(--core-color-blueberry-500);
+      }
+
+      &--cherry {
+        border: 1px solid var(--core-color-cherry-400);
+      }
+
+      &--neutral {
+        border: 1px solid var(--color-base-border-onlight);
+      }
+
+      &--white {
+        border: 1px solid var(--color-base-border-onlight);
+      }
+    }
+
+    &__status-marker {
+      width: 8px;
+      height: 100%;
+      grid-area: statusmarker;
+      background-color: transparent;
+
+      &--new {
+        background-color: var(--core-color-blueberry-500);
+      }
+    }
   }
 }
 
@@ -130,108 +197,226 @@
   border: 0;
   width: 100%;
   outline: none;
+  grid-area: header;
+  padding-left: var(--statusmarker-left-space);
 
   @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     font-size: font-settings.$font-size-md;
     line-height: font-settings.$lineheight-size-md;
   }
 
-  &--open {
-    font-weight: 600;
+  &[aria-expanded='true'] {
+    border-bottom: 1px solid var(--color-action-border-ondark);
   }
 
-  &--fill,
-  &--fill-negative {
-    margin-top: spacers.getSpacer(s);
+  &--open {
+    font-weight: 600;
   }
 
   &--fill-negative {
     background-color: var(--color-base-background-white);
   }
 
-  &--closed#{&}--fill {
-    margin-bottom: spacers.getSpacer(s);
-  }
-
-  &:focus-visible:not(.expander-list-link--outline) {
+  &:focus-visible {
     outline: 0.25rem solid var(--color-action-border-onlight-focus);
   }
 
-  &--white:not(.expander-list-link--outline) {
-    &:hover {
-      background-color: var(--core-color-blueberry-50);
+  &--white:not(.expander-list-link--outline, .expander-list-link--fill-negative) {
+    &[aria-expanded='false'] {
+      &:hover {
+        background-color: var(--core-color-neutral-50);
+      }
+
+      &:active {
+        background-color: var(--core-color-neutral-100);
+      }
     }
 
-    &:active {
-      background-color: var(--core-color-blueberry-100);
+    &[aria-expanded='true'] {
+      background-color: var(--core-color-neutral-50);
+
+      &:hover {
+        background-color: var(--core-color-neutral-100);
+      }
+
+      &:active {
+        background-color: var(--core-color-neutral-200);
+      }
     }
   }
 
-  &--blueberry:not(.expander-list-link--outline) {
-    &:hover {
-      background-color: var(--core-color-blueberry-100);
+  &--blueberry:not(.expander-list-link--outline, .expander-list-link--fill-negative) {
+    &[aria-expanded='false'] {
+      &:hover {
+        background-color: var(--core-color-blueberry-100);
+      }
+
+      &:active {
+        background-color: var(--color-action-background-ondark-hoverselected);
+      }
     }
 
-    &:active {
-      background-color: var(--color-action-background-ondark-hoverselected);
+    &[aria-expanded='true'] {
+      background-color: var(--core-color-blueberry-100);
+
+      &:hover {
+        background-color: var(--core-color-blueberry-200);
+      }
+
+      &:active {
+        background-color: var(--core-color-blueberry-300);
+      }
     }
   }
 
-  &--cherry:not(.expander-list-link--outline) {
-    &:hover {
-      background-color: var(--core-color-cherry-100);
+  &--cherry:not(.expander-list-link--outline, .expander-list-link--fill-negative) {
+    &[aria-expanded='false'] {
+      &:hover {
+        background-color: var(--core-color-cherry-100);
+      }
+
+      &:active {
+        background-color: var(--core-color-cherry-200);
+      }
     }
 
-    &:active {
-      background-color: var(--core-color-cherry-200);
+    &[aria-expanded='true'] {
+      background-color: var(--core-color-cherry-100);
+
+      &:hover {
+        background-color: var(--core-color-cherry-200);
+      }
+
+      &:active {
+        background-color: var(--core-color-cherry-300);
+      }
     }
   }
 
-  &--neutral:not(.expander-list-link--outline) {
-    &:hover {
-      background-color: var(--core-color-neutral-100);
+  &--neutral:not(.expander-list-link--outline, .expander-list-link--fill-negative) {
+    &[aria-expanded='false'] {
+      &:hover {
+        background-color: var(--core-color-neutral-100);
+      }
+
+      &:active {
+        background-color: var(--core-color-neutral-200);
+      }
     }
 
-    &:active {
-      background-color: var(--core-color-neutral-200);
+    &[aria-expanded='true'] {
+      background-color: var(--core-color-neutral-100);
+
+      &:hover {
+        background-color: var(--core-color-neutral-200);
+      }
+
+      &:active {
+        background-color: var(--core-color-neutral-300);
+      }
     }
   }
 
   &--outline {
-    background-color: var(--color-base-background-white);
+    &--blueberry {
+      &[aria-expanded='false'] {
+        border-bottom: 1px solid var(--core-color-blueberry-500);
+      }
+    }
+
+    &--cherry {
+      &[aria-expanded='false'] {
+        border-bottom: 1px solid var(--core-color-cherry-400);
+      }
+    }
+
+    &--neutral {
+      &[aria-expanded='false'] {
+        border-bottom: 1px solid var(--color-base-border-onlight);
+      }
+    }
 
-    &:focus-visible {
-      outline: 0.5rem solid var(--color-action-border-onlight-focus);
+    &--white {
+      &[aria-expanded='false'] {
+        border-bottom: 1px solid var(--color-base-border-onlight);
+      }
     }
+  }
+
+  &--outline,
+  &--fill-negative {
+    background-color: var(--color-base-background-white);
 
     &--blueberry {
-      &:hover {
-        background-color: var(--core-color-blueberry-50);
+      &[aria-expanded='false'] {
+        &:hover {
+          background-color: var(--core-color-blueberry-50);
+        }
+
+        &:active {
+          background-color: var(--core-color-blueberry-100);
+        }
       }
 
-      &:active {
-        background-color: var(--core-color-blueberry-100);
+      &[aria-expanded='true'] {
+        background-color: var(--core-color-blueberry-50);
+
+        &:hover {
+          background-color: var(--core-color-blueberry-100);
+        }
+
+        &:active {
+          background-color: var(--core-color-blueberry-200);
+        }
       }
     }
 
     &--cherry {
-      &:hover {
-        background-color: var(--core-color-cherry-50);
+      &[aria-expanded='false'] {
+        &:hover {
+          background-color: var(--core-color-cherry-50);
+        }
+
+        &:active {
+          background-color: var(--core-color-cherry-100);
+        }
       }
 
-      &:active {
-        background-color: var(--core-color-cherry-100);
+      &[aria-expanded='true'] {
+        background-color: var(--core-color-cherry-50);
+
+        &:hover {
+          background-color: var(--core-color-cherry-100);
+        }
+
+        &:active {
+          background-color: var(--core-color-cherry-200);
+        }
       }
     }
 
     &--neutral,
     &--white {
-      &:hover {
-        background-color: var(--core-color-neutral-50);
+      &[aria-expanded='false'] {
+        &:hover {
+          background-color: var(--core-color-neutral-50);
+        }
+
+        &:active {
+          background-color: var(--core-color-neutral-100);
+        }
       }
 
-      &:active {
-        background-color: var(--core-color-neutral-100);
+      &[aria-expanded='true'] {
+        background-color: var(--core-color-neutral-50);
+
+        &:hover {
+          background-color: var(--core-color-neutral-100);
+        }
+
+        &:active {
+          background-color: var(--core-color-neutral-200);
+        }
       }
     }
   }
@@ -241,6 +426,30 @@
     line-height: font-settings.$lineheight-size-lg;
   }
 
+  &--new {
+    background-color: var(--core-color-blueberry-50) !important;
+
+    &:hover {
+      background-color: var(--core-color-blueberry-100) !important;
+    }
+
+    &:active {
+      background-color: var(--core-color-blueberry-200) !important;
+    }
+
+    &[aria-expanded='true'] {
+      background-color: var(--core-color-blueberry-100) !important;
+
+      &:hover {
+        background-color: var(--core-color-blueberry-200) !important;
+      }
+
+      &:active {
+        background-color: var(--core-color-blueberry-300) !important;
+      }
+    }
+  }
+
   &__icon {
     display: flex;
     align-items: center;
@@ -257,6 +466,8 @@
   &__main-content {
     padding: 0;
     display: none;
+    grid-area: content;
+    padding-left: var(--statusmarker-left-space);
 
     @media print {
       display: block;
@@ -266,8 +477,38 @@
       display: block;
     }
 
+    &--new {
+      background-color: var(--core-color-blueberry-50);
+    }
+
     &--padding {
-      padding: spacers.getSpacer(xs) spacers.getSpacer(s) spacers.getSpacer(l);
+      padding: spacers.getSpacer(xs) spacers.getSpacer(s) spacers.getSpacer(l) calc(spacers.getSpacer(s) + var(--statusmarker-left-space));
+    }
+
+    &--outline {
+      &--blueberry {
+        &[aria-expanded='true'] {
+          border-bottom: 1px solid var(--core-color-blueberry-500);
+        }
+      }
+
+      &--cherry {
+        &[aria-expanded='true'] {
+          border-bottom: 1px solid var(--core-color-cherry-400);
+        }
+      }
+
+      &--neutral {
+        &[aria-expanded='true'] {
+          border-bottom: 1px solid var(--color-base-border-onlight);
+        }
+      }
+
+      &--white {
+        &[aria-expanded='true'] {
+          border-bottom: 1px solid var(--color-base-border-onlight);
+        }
+      }
     }
   }
 }