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

package/components/DictionaryTrigger/styles.module.scss

@@ -10,14 +10,18 @@
   padding: 0 var(--core-space-4xs);
   background-color: transparent;
 
-  // The background svg consists of a circle with empty space to the right, making up a dotted pattern when repeated horizontally
-  background-image: url("data:image/svg+xml,<svg width='8' height='3' viewBox='0 0 8 3' xmlns='http://www.w3.org/2000/svg'><circle cx='1.5' cy='1.5' r='1.5' fill='%236A2ABF' /></svg>");
-  background-position: bottom left;
+  --dot-color: var(--color-help-border-normal);
+
+  // The radial-gradient consists of a circle with empty space to the right, making up a dotted pattern when repeated horizontally
+  background-image: radial-gradient(circle at 1.5px 1.5px, var(--dot-color) 1.5px, transparent 1.5px);
   background-repeat: repeat-x;
+  background-size: 8px 3px;
+  background-position: bottom left;
 
   &:hover {
     background-color: var(--color-help-background-transparent-onlight-hover);
-    background-image: url("data:image/svg+xml,<svg width='8' height='3' viewBox='0 0 8 3' xmlns='http://www.w3.org/2000/svg'><circle cx='1.5' cy='1.5' r='1.5' fill='%236A2ABF' /></svg>");
+
+    --dot-color: var(--color-help-border-dark);
   }
 
   &:focus-visible {
@@ -27,7 +31,8 @@
 
   &[aria-expanded='true'] {
     background-color: var(--color-help-background-transparent-onlight-hover);
-    background-image: url("data:image/svg+xml,<svg width='8' height='3' viewBox='0 0 8 3' xmlns='http://www.w3.org/2000/svg'><circle cx='1.5' cy='1.5' r='1.5' fill='%236A2ABF' /></svg>");
+
+    --dot-color: var(--color-help-border-dark);
 
     &:hover,
     &:focus-visible {
@@ -41,5 +46,7 @@
 
   &:active {
     background-color: var(--color-help-background-transparent-onlight-hover-selected);
+
+    --dot-color: var(--color-help-border-dark);
   }
 }

package/components/Dropdown/styles.module.scss

@@ -209,7 +209,15 @@
 
   &__input {
     border-bottom: 1px solid palette.$neutral300;
-    padding: spacers.getSpacer(2xs) spacers.getSpacer(s);
+    padding: 0 spacers.getSpacer(s);
+
+    &[role='menuitemradio'] {
+      padding: 0 spacers.getSpacer(s);
+    }
+
+    &[role='menuitemcheckbox'] {
+      padding: 1px spacers.getSpacer(s) spacers.getSpacer(2xs) spacers.getSpacer(s);
+    }
 
     @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       padding: spacers.getSpacer(s);

package/components/Duolist/index.js

@@ -1,93 +1,8 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import React__default from "react";
-import classNames from "classnames";
-import { AnalyticsId } from "../../constants.js";
-import { useBreakpoint, Breakpoint } from "../../hooks/useBreakpoint.js";
-import { S as Spacer } from "../../Spacer.js";
-import duolistStyles from "./styles.module.scss";
-const DuolistGroup = (props) => {
-  const { format = "formatted", boldColumn = format === "non-formatted" ? "none" : "first", description, separator = ": ", term } = props;
-  const firstBold = boldColumn === "first";
-  const secondBold = boldColumn === "second";
-  const nonFormatted = format === "non-formatted";
-  const dtClassNames = classNames(duolistStyles["duolist__dt"], {
-    [duolistStyles["duolist__dt--bold"]]: firstBold,
-    [duolistStyles["duolist__dt--non-formatted"]]: nonFormatted
-  });
-  const ddClassNames = classNames(duolistStyles["duolist__dd"], {
-    [duolistStyles["duolist__dd--bold"]]: secondBold,
-    [duolistStyles["duolist__dd--non-formatted"]]: nonFormatted
-  });
-  const renderContent = () => {
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("dt", { "data-separator": nonFormatted ? separator : void 0, className: dtClassNames, children: term }),
-      /* @__PURE__ */ jsx("dd", { className: ddClassNames, children: description })
-    ] });
-  };
-  return nonFormatted ? /* @__PURE__ */ jsx("div", { children: renderContent() }) : /* @__PURE__ */ jsx(Fragment, { children: renderContent() });
-};
-const Duolist = (props) => {
-  const {
-    boldColumn,
-    border = "no-border",
-    descriptionWidth,
-    label,
-    format = "formatted",
-    separator,
-    variant = "normal",
-    children,
-    className,
-    testId,
-    useCollapsedFromAndBelowBreakpoint
-  } = props;
-  const hasBorder = border === "border";
-  const hasLines = variant === "line";
-  const extraPaddingTop = hasBorder && (label || hasLines);
-  const nonFormatted = format === "non-formatted";
-  const breakpoint = useBreakpoint();
-  const useCollapsedMode = useCollapsedFromAndBelowBreakpoint && breakpoint <= Breakpoint[useCollapsedFromAndBelowBreakpoint];
-  const duolistWrapperClasses = classNames(
-    {
-      [duolistStyles["duolist-wrapper--border"]]: hasBorder,
-      [duolistStyles["duolist-wrapper--extra-padding-top"]]: extraPaddingTop
-    },
-    className
-  );
-  const duolistClasses = classNames(duolistStyles.duolist, {
-    [duolistStyles["duolist--line"]]: hasLines,
-    [duolistStyles["duolist--non-formatted"]]: nonFormatted,
-    [duolistStyles["duolist--collapsed"]]: useCollapsedMode,
-    [duolistStyles["duolist--not-collapsed"]]: !useCollapsedMode
-  });
-  const duolistColumnStyle = descriptionWidth ? descriptionWidth + "%" : "minmax(60%, 1fr)";
-  return /* @__PURE__ */ jsxs("div", { className: duolistWrapperClasses, "data-testid": testId, "data-analyticsid": AnalyticsId.Duolist, children: [
-    label && /* @__PURE__ */ jsxs(Fragment, { children: [
-      label,
-      /* @__PURE__ */ jsx(Spacer, {})
-    ] }),
-    /* @__PURE__ */ jsx(
-      "dl",
-      {
-        style: !nonFormatted ? { gridTemplateColumns: useCollapsedMode ? `1fr` : `auto ${duolistColumnStyle}` } : void 0,
-        className: duolistClasses,
-        children: React__default.Children.map(children, (child) => {
-          if (child === null || typeof child === "undefined") return;
-          const duolistGroup = child;
-          if (duolistGroup.type === DuolistGroup) {
-            return React__default.cloneElement(child, {
-              boldColumn: duolistGroup.props.boldColumn ?? boldColumn,
-              format: duolistGroup.props.format ?? format,
-              separator: duolistGroup.props.separator ?? separator
-            });
-          }
-        })
-      }
-    )
-  ] });
-};
+import { D as Duolist } from "../../Duolist.js";
+import { a } from "../../Duolist.js";
 export {
   Duolist,
-  DuolistGroup,
+  a as DuolistGroup,
   Duolist as default
 };
 //# sourceMappingURL=index.js.map

package/components/Duolist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Duolist/Duolist.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport Spacer from '../Spacer';\nimport { TitleProps } from '../Title';\n\nimport duolistStyles from './styles.module.scss';\n\nexport type DuolistVariants = 'normal' | 'line';\nexport type BoldColumn = 'first' | 'second' | 'none';\nexport type Border = 'no-border' | 'border';\nexport type Formats = 'formatted' | 'non-formatted';\n\nexport interface DuolistProps {\n  /** Determines which column is bold */\n  boldColumn?: BoldColumn;\n  /** Label of the Duolist */\n  border?: Border;\n  /** Label of the Duolist */\n  label?: React.ReactElement<TitleProps>;\n  /** Formatted or non-formatted visual variants */\n  format?: Formats;\n  /** Character separator for non-formatted format */\n  separator?: string;\n  /** Sets the visual variant of the Duolist. */\n  variant?: DuolistVariants;\n  /** Sets the content of the Duolist. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Width of the description column in percentage */\n  descriptionWidth?: number;\n  /** Use collapsed mode on columns from chosen breakpoint and below. */\n  useCollapsedFromAndBelowBreakpoint?: keyof typeof Breakpoint;\n}\n\nexport interface DuolistGroupProps {\n  /** Determines which column is bold */\n  boldColumn?: BoldColumn;\n  /** Sets content of the <dd> tag. */\n  description: React.ReactNode;\n  /** Formatted or non-formatted visual variants */\n  format?: Formats;\n  /** Character separator for non-formatted format */\n  separator?: string;\n  /** Sets content of the <dt> tag. */\n  term: React.ReactNode;\n}\n\nexport const DuolistGroup: React.FC<DuolistGroupProps> = props => {\n  const { format = 'formatted', boldColumn = format === 'non-formatted' ? 'none' : 'first', description, separator = ': ', term } = props;\n\n  const firstBold = boldColumn === 'first';\n  const secondBold = boldColumn === 'second';\n  const nonFormatted = format === 'non-formatted';\n\n  const dtClassNames = classNames(duolistStyles['duolist__dt'], {\n    [duolistStyles['duolist__dt--bold']]: firstBold,\n    [duolistStyles['duolist__dt--non-formatted']]: nonFormatted,\n  });\n  const ddClassNames = classNames(duolistStyles['duolist__dd'], {\n    [duolistStyles['duolist__dd--bold']]: secondBold,\n    [duolistStyles['duolist__dd--non-formatted']]: nonFormatted,\n  });\n\n  const renderContent = () => {\n    return (\n      <>\n        <dt data-separator={nonFormatted ? separator : undefined} className={dtClassNames}>\n          {term}\n        </dt>\n        <dd className={ddClassNames}>{description}</dd>\n      </>\n    );\n  };\n\n  return nonFormatted ? <div>{renderContent()}</div> : <>{renderContent()}</>;\n};\n\nexport const Duolist: React.FC<DuolistProps> = props => {\n  const {\n    boldColumn,\n    border = 'no-border',\n    descriptionWidth,\n    label,\n    format = 'formatted',\n    separator,\n    variant = 'normal',\n    children,\n    className,\n    testId,\n    useCollapsedFromAndBelowBreakpoint,\n  } = props;\n\n  const hasBorder = border === 'border';\n  const hasLines = variant === 'line';\n  const extraPaddingTop = hasBorder && (label || hasLines);\n  const nonFormatted = format === 'non-formatted';\n  const breakpoint = useBreakpoint();\n  const useCollapsedMode = useCollapsedFromAndBelowBreakpoint && breakpoint <= Breakpoint[useCollapsedFromAndBelowBreakpoint];\n\n  const duolistWrapperClasses = classNames(\n    {\n      [duolistStyles['duolist-wrapper--border']]: hasBorder,\n      [duolistStyles['duolist-wrapper--extra-padding-top']]: extraPaddingTop,\n    },\n    className\n  );\n\n  const duolistClasses = classNames(duolistStyles.duolist, {\n    [duolistStyles['duolist--line']]: hasLines,\n    [duolistStyles['duolist--non-formatted']]: nonFormatted,\n    [duolistStyles['duolist--collapsed']]: useCollapsedMode,\n    [duolistStyles['duolist--not-collapsed']]: !useCollapsedMode,\n  });\n\n  const duolistColumnStyle = descriptionWidth ? descriptionWidth + '%' : 'minmax(60%, 1fr)';\n\n  return (\n    <div className={duolistWrapperClasses} data-testid={testId} data-analyticsid={AnalyticsId.Duolist}>\n      {label && (\n        <>\n          {label}\n          <Spacer />\n        </>\n      )}\n      <dl\n        style={!nonFormatted ? { gridTemplateColumns: useCollapsedMode ? `1fr` : `auto ${duolistColumnStyle}` } : undefined}\n        className={duolistClasses}\n      >\n        {React.Children.map(children, (child: React.ReactNode | React.ReactElement<DuolistGroupProps>) => {\n          if (child === null || typeof child === 'undefined') return;\n          const duolistGroup = child as React.ReactElement<DuolistGroupProps>;\n          if (duolistGroup.type === DuolistGroup) {\n            return React.cloneElement(child as React.ReactElement<DuolistGroupProps>, {\n              boldColumn: duolistGroup.props.boldColumn ?? boldColumn,\n              format: duolistGroup.props.format ?? format,\n              separator: duolistGroup.props.separator ?? separator,\n            });\n          }\n        })}\n      </dl>\n    </div>\n  );\n};\n\nexport default Duolist;\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/components/ElementHeader/ElementHeader.d.ts

@@ -0,0 +1,59 @@
+import { default as React } from 'react';
+import { ElementHeaderTextProps, ElementHeaderTextType } from './ElementHeaderText/ElementHeaderText';
+import { AvatarProps, AvatarType } from '../Avatar';
+import { BadgeProps, BadgeType } from '../Badge';
+import { SvgIcon } from '../Icon';
+import { StatusDotProps, StatusDotType } from '../StatusDot';
+import { TitleTags } from '../Title';
+import { StatusDotMultiCompositionProps, StatusDotMultiCompositionType } from './StatusDotMultiComposition';
+export type ElementHeaderSize = 'small' | 'medium' | 'large';
+export type ParentType = 'linklist' | 'expanderlist';
+export interface ElementHeaderType extends React.FC<ElementHeaderProps> {
+    Avatar?: AvatarType;
+    Badge?: BadgeType;
+    ElementHeaderText?: ElementHeaderTextType;
+    StatusDot?: StatusDotType;
+    StatusDotMultiComposition?: StatusDotMultiCompositionType;
+}
+export declare const renderElementHeader: (element: React.ReactNode, options: Pick<ElementHeaderProps, "titleHtmlMarkup" | "isHovered" | "size" | "parentType" | "chevronIcon" | "icon" | "highlightText">) => React.ReactElement | undefined;
+export interface ElementHeaderProps {
+    /** Adds custom classes to the ElementHeader element. */
+    className?: string;
+    /** Chevron to render inside of the ElementHeader */
+    chevronIcon?: SvgIcon;
+    /** Children to be rendered inside of ElementHeader */
+    children: React.ReactNode;
+    /** Changes the underlying element of the title. Default: h2*/
+    titleHtmlMarkup?: TitleTags;
+    /** icon to be rendered inside of ElementHeader */
+    icon?: React.ReactElement;
+    /** whether or not the parent is hovered */
+    isHovered?: boolean;
+    /** Adjusts styling based on parent */
+    parentType?: ParentType;
+    /** Changes size of the ElementHeader. */
+    size?: ElementHeaderSize;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** Highlights text in title. Used for search results */
+    highlightText?: string;
+}
+interface ElementHeaderChildren {
+    avatarChild?: React.ReactElement<AvatarProps>;
+    elementHeaderTextChildren: React.ReactElement<ElementHeaderTextProps>[];
+    badgeChildren?: React.ReactElement<BadgeProps>[];
+    statusDotChildren?: React.ReactElement<StatusDotProps>[];
+    statusDotMCChild?: React.ReactElement<StatusDotMultiCompositionProps>;
+    elementChild?: React.ReactElement;
+    stringChildren: string[];
+    remainingChildren: React.ReactNode[];
+}
+type ChildrenMapper = (children: React.ReactNode, isJsxChild?: boolean) => ElementHeaderChildren | undefined;
+export declare const mapChildren: ChildrenMapper;
+export declare const ElementHeaderRoot: ElementHeaderType;
+type ElementHeaderComponent = typeof ElementHeaderRoot & {
+    Text: React.FC<ElementHeaderTextProps>;
+    StatusDotMultiComposition: React.FC<StatusDotMultiCompositionProps>;
+};
+declare const ElementHeader: ElementHeaderComponent;
+export default ElementHeader;

package/components/ElementHeader/ElementHeaderText/ElementHeaderText.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+import { TitleTags } from '../../Title';
+export type ElementHeaderTextType = React.FC<ElementHeaderTextProps>;
+export interface ElementHeaderTextProps {
+    /** The first text in the ElementHeaderText Component */
+    firstText: string;
+    /** Will style the first text as bold */
+    firstTextEmphasised?: boolean;
+    /** The second text in the ElementHeaderText Component */
+    secondText?: string;
+    /** Will style the second text as bold */
+    secondTextEmphasised?: boolean;
+    /** Whether or not this ElementHeaderText is a sub text */
+    subText?: boolean;
+    /** Adds custom classes to the ElementHeaderText component. */
+    className?: string;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** Changes the underlying element of the text. Default: span*/
+    titleHtmlMarkup?: TitleTags;
+    /** Highlights text. Used for search results */
+    highlightText?: string;
+}
+export declare const ElementHeaderText: ElementHeaderTextType;
+export default ElementHeaderText;

package/components/ElementHeader/ElementHeaderText/index.d.ts

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

package/components/ElementHeader/ElementHeaderText/index.js

@@ -0,0 +1,6 @@
+import { E as ElementHeaderText } from "../../../ElementHeaderText.js";
+export {
+  ElementHeaderText,
+  ElementHeaderText as default
+};
+//# sourceMappingURL=index.js.map

package/components/ElementHeader/StatusDotMultiComposition/StatusDotMultiComposition.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+import { StatusDotProps } from '../../StatusDot';
+export type StatusDotMultiCompositionType = React.FC<StatusDotMultiCompositionProps>;
+export interface StatusDotMultiCompositionProps {
+    /** Additional text to the bottom statusdot */
+    additionalText?: string;
+    /** StatusDot that is under the others and outside the stacking */
+    bottomStatusDot?: React.ReactElement<StatusDotProps>;
+    /** Stacking of the statusdots  */
+    stacking?: 'vertical' | 'horizontal';
+    /** StatusDots as children */
+    children?: React.ReactNode;
+    /** Adds custom classes */
+    className?: string;
+    /** Show a hidden for child statusdot over the other */
+    hiddenForChild?: boolean;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** StatusDot that is over the others and outside the stacking */
+    topStatusDot?: React.ReactElement<StatusDotProps>;
+}
+export declare const StatusDotMultiComposition: StatusDotMultiCompositionType;
+export default StatusDotMultiComposition;

package/components/ElementHeader/StatusDotMultiComposition/index.d.ts

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

package/components/ElementHeader/StatusDotMultiComposition/index.js

@@ -0,0 +1,6 @@
+import { S as StatusDotMultiComposition } from "../../../StatusDotMultiComposition.js";
+export {
+  StatusDotMultiComposition,
+  StatusDotMultiComposition as default
+};
+//# sourceMappingURL=index.js.map

package/components/{ListHeader → ElementHeader/StatusDotMultiComposition}/index.js.map

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

package/components/ElementHeader/StatusDotMultiComposition/styles.module.scss

@@ -0,0 +1,28 @@
+@use '../../../scss/font-mixins' as fonts;
+
+.statusdotmulticomposition {
+  display: flex;
+  flex-flow: column;
+
+  &__children {
+    display: flex;
+
+    &[data-stacking='horizontal'] {
+      flex-flow: row;
+      column-gap: 1rem;
+      flex-wrap: wrap;
+    }
+
+    &[data-stacking='vertical'] {
+      flex-flow: column;
+      flex-wrap: wrap;
+    }
+  }
+
+  &__additional-text {
+    @include fonts.sublabel-subdued;
+
+    padding-left: 1.5rem;
+    color: var(--core-color-neutral-800);
+  }
+}

package/components/ElementHeader/StatusDotMultiComposition/styles.module.scss.d.ts

@@ -0,0 +1,11 @@
+export type Styles = {
+  statusdotmulticomposition: string;
+  'statusdotmulticomposition__additional-text': string;
+  statusdotmulticomposition__children: string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/ElementHeader/index.d.ts

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

package/components/ElementHeader/index.js

@@ -0,0 +1,9 @@
+import { E as ElementHeader } from "../../ElementHeader.js";
+import { a, m, r } from "../../ElementHeader.js";
+export {
+  a as ElementHeaderRoot,
+  ElementHeader as default,
+  m as mapChildren,
+  r as renderElementHeader
+};
+//# sourceMappingURL=index.js.map

package/components/ElementHeader/index.js.map

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

package/components/{ListHeader → ElementHeader}/styles.module.scss

@@ -3,12 +3,13 @@
 @use '../../scss/palette' as palette;
 @use '../../scss/breakpoints' as breakpoints;
 
-.list-header {
+.element-header {
+  margin: 0.5rem;
   display: grid;
   grid-template:
-    'icon text badge chevron' 4rem
-    '. text . .' auto / min-content auto min-content min-content;
-  column-gap: spacers.getSpacer(2xs);
+    '. statusdots badge chevron' auto
+    'icon text badge chevron' 3rem
+    '. text badge chevron' auto / min-content auto min-content min-content;
   margin-left: spacers.getSpacer(2xs);
   margin-right: spacers.getSpacer(2xs);
   width: 100%;
@@ -28,8 +29,23 @@
     height: 100%;
     grid-area: text;
     align-self: center;
-    padding-top: 1.125rem;
-    padding-bottom: 1.125rem;
+    padding-top: 0.625rem;
+    padding-bottom: 0.625rem;
+    padding-left: 0.5rem;
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      padding-top: 0.75rem;
+      padding-bottom: 0.75rem;
+    }
+
+    &[data-hasstatusdots='true'] {
+      padding-top: 0.125rem;
+      padding-bottom: 0;
+
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+        padding-top: 0;
+      }
+    }
 
     &--element {
       display: flex;
@@ -47,6 +63,10 @@
     }
   }
 
+  &__statusdot-container {
+    grid-area: statusdots;
+  }
+
   &__icon,
   &__icon svg,
   &__avatar,
@@ -67,7 +87,15 @@
 
   &__chevron {
     grid-area: chevron;
-    height: 100%;
+
+    &[data-parenttype='linklist'] {
+      align-self: center;
+      height: 100%;
+    }
+
+    &[data-parenttype='expanderlist'] {
+      align-self: start;
+    }
   }
 
   &__chevron svg,
@@ -79,9 +107,18 @@
     grid-area: badge;
     display: flex;
     flex-flow: row;
-    align-items: center;
-    gap: 0.5rem;
     height: 100%;
+    gap: 0.5rem;
+  }
+
+  &__badge {
+    &[data-parenttype='linklist'] {
+      align-self: center;
+    }
+
+    &[data-parenttype='expanderlist'] {
+      align-self: start;
+    }
   }
 
   &__badge:has(svg),

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

@@ -0,0 +1,22 @@
+export type Styles = {
+  'element-header': string;
+  'element-header__avatar': string;
+  'element-header__badge': string;
+  'element-header__badge-container': string;
+  'element-header__chevron': string;
+  'element-header__content': string;
+  'element-header__content--element': string;
+  'element-header__content--spacing': string;
+  'element-header__icon': string;
+  'element-header__statusdot-container': string;
+  'element-header__title': string;
+  'text-wrapper': string;
+  'text-wrapper__text--emphasised': string;
+  'text-wrapper--sub-level': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/ExpanderList/ExpanderList.d.ts

@@ -1,15 +1,16 @@
 import { default as React } from 'react';
 import { PaletteNames } from '../../theme/palette';
-import { ListHeaderType } from '../ListHeader/ListHeader';
+import { ElementHeaderType } from '../ElementHeader/ElementHeader';
 import { TitleTags } from '../Title';
 export type ExpanderListColors = Extract<PaletteNames, 'white' | 'blueberry' | 'cherry' | 'neutral'>;
 export interface ExpanderType extends React.ForwardRefExoticComponent<ExpanderProps & React.RefAttributes<HTMLLIElement>> {
-    ListHeader?: ListHeaderType;
+    ElementHeader?: ElementHeaderType;
 }
 export interface ExpanderListCompound extends React.ForwardRefExoticComponent<ExpanderListProps & React.RefAttributes<HTMLUListElement>> {
     Expander: ExpanderType;
 }
 export type ExpanderListVariant = 'line' | 'outline' | 'fill' | 'fill-negative';
+export type ExpanderListStatus = 'none' | 'new';
 interface ExpanderListProps {
     /** Toggles accordion functionality for the expanders. */
     accordion?: boolean;
@@ -31,6 +32,8 @@ interface ExpanderListProps {
     variant?: ExpanderListVariant;
     /** Overrides the default z-index of the expander header */
     zIndex?: number;
+    /** Highlights text in title and content. Used for search results */
+    highlightText?: string;
 }
 type Modify<T, R> = Omit<T, keyof R> & R;
 type ExpanderProps = Modify<React.HTMLAttributes<HTMLButtonElement>, {
@@ -51,6 +54,10 @@ type ExpanderProps = Modify<React.HTMLAttributes<HTMLButtonElement>, {
     onExpand?: (isExpanded: boolean) => void;
     /** Overrides the default z-index of the expander header */
     zIndex?: number;
+    /** Highlights text in title and content. Override if different from list. */
+    highlightText?: string;
+    /** Displays a status on the left side: default none */
+    status?: ExpanderListStatus;
 }> & Pick<ExpanderListProps, 'renderChildrenWhenClosed' | 'variant'>;
 export declare const ExpanderList: ExpanderListCompound;
 export default ExpanderList;