@helsenorge/designsystem-react 15.5.1 → 15.7.0

package/lib/components/HelpPanel/index.js

@@ -1,17 +1,57 @@
-import { t as HighlightPanel_default } from "../../HighlightPanel.js";
+import { IconSize } from "../../constants.js";
+import { t as Icon_default } from "../../Icon.js";
+import { useIsMobileBreakpoint } from "../../hooks/useIsMobileBreakpoint.js";
+import Title_default from "../Title/index.js";
 import HandWaving from "../Icons/HandWaving.js";
 import classNames from "classnames";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
 //#region src/components/HelpPanel/HelpPanel.tsx
 var HelpPanel = ({ className, variant = "normal", testId, children, title }) => {
-	return /* @__PURE__ */ jsx(HighlightPanel_default, {
-		className: classNames([styles["help-panel"]], className),
-		testId,
-		svgIcon: HandWaving,
-		title,
-		variant,
-		children
+	const isMobile = useIsMobileBreakpoint();
+	const containerClassName = classNames(styles["help-panel"], {
+		[styles["help-panel--compact"]]: variant === "compact",
+		[styles["help-panel--subdued"]]: variant === "subdued"
+	}, className);
+	const renderContent = () => {
+		const titleElement = title && /* @__PURE__ */ jsx(Title_default, {
+			testId: "titleId",
+			htmlMarkup: "h2",
+			appearance: "title6",
+			children: title
+		});
+		const iconSize = isMobile ? IconSize.XSmall : IconSize.Small;
+		if (variant === "compact") return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+			className: classNames(styles["help-panel__icon"], styles["help-panel__icon--compact"]),
+			children: /* @__PURE__ */ jsx(Icon_default, {
+				svgIcon: HandWaving,
+				size: iconSize
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: classNames(styles["help-panel__content"], styles["help-panel__content--compact"]),
+			children: [title && /* @__PURE__ */ jsx("div", {
+				className: styles["help-panel__title-wrapper"],
+				children: titleElement
+			}), children]
+		})] });
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+			className: styles["help-panel__icon"],
+			children: /* @__PURE__ */ jsx(Icon_default, {
+				svgIcon: HandWaving,
+				size: iconSize
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: styles["help-panel__content"],
+			children: [/* @__PURE__ */ jsx("div", {
+				className: styles["help-panel__title-wrapper"],
+				children: titleElement
+			}), children]
+		})] });
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: containerClassName,
+		"data-testid": testId,
+		children: renderContent()
 	});
 };
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/HelpPanel/HelpPanel.tsx","../../../src/components/HelpPanel/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport HighlightPanel from '../HighlightPanel';\nimport HandWaving from '../Icons/HandWaving';\n\nimport styles from './styles.module.scss';\n\nexport type HelpPanelVariants = 'normal' | 'compact';\n\nexport interface HelpPanelProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** If set the compact styling will be used */\n  variant?: HelpPanelVariants;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets title if needed */\n  title?: string;\n}\n\nconst HelpPanel: React.FC<HelpPanelProps> = ({ className, variant = 'normal', testId, children, title }) => {\n  return (\n    <HighlightPanel\n      className={classNames([styles['help-panel']], className)}\n      testId={testId}\n      svgIcon={HandWaving}\n      title={title}\n      variant={variant}\n    >\n      {children}\n    </HighlightPanel>\n  );\n};\n\nexport default HelpPanel;\n","import HelpPanel from './HelpPanel';\nexport * from './HelpPanel';\nexport default HelpPanel;\n"],"mappings":";;;;;;AAsBA,IAAM,aAAuC,EAAE,WAAW,UAAU,UAAU,QAAQ,UAAU,YAAY;CAC1G,OACE,oBAAC,wBAAD;EACE,WAAW,WAAW,CAAC,OAAO,aAAa,GAAG,SAAS;EAC/C;EACR,SAAS;EACF;EACE;EAER;CACa,CAAA;AAEpB;;;AChCA,IAAA,oBAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/HelpPanel/HelpPanel.tsx","../../../src/components/HelpPanel/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { useIsMobileBreakpoint } from '@helsenorge/designsystem-react/hooks/useIsMobileBreakpoint';\n\nimport Icon, { IconSize } from '../Icon';\nimport HandWaving from '../Icons/HandWaving';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type HelpPanelVariants = 'normal' | 'compact' | 'subdued';\n\nexport interface HelpPanelProps {\n  /** The content of the component */\n  children: React.ReactNode;\n  /** If set the compact styling will be used */\n  variant?: HelpPanelVariants;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets title if needed */\n  title?: string;\n}\n\nconst HelpPanel: React.FC<HelpPanelProps> = ({ className, variant = 'normal', testId, children, title }) => {\n  const isMobile = useIsMobileBreakpoint();\n\n  const containerClassName = classNames(\n    styles['help-panel'],\n    {\n      [styles['help-panel--compact']]: variant === 'compact',\n      [styles['help-panel--subdued']]: variant === 'subdued',\n    },\n    className\n  );\n\n  const renderContent = (): React.ReactNode => {\n    const titleElement = title && (\n      <Title testId=\"titleId\" htmlMarkup={'h2'} appearance={'title6'}>\n        {title}\n      </Title>\n    );\n\n    const iconSize = isMobile ? IconSize.XSmall : IconSize.Small;\n\n    if (variant === 'compact') {\n      return (\n        <>\n          <div className={classNames(styles['help-panel__icon'], styles['help-panel__icon--compact'])}>\n            <Icon svgIcon={HandWaving} size={iconSize} />\n          </div>\n          <div className={classNames(styles['help-panel__content'], styles['help-panel__content--compact'])}>\n            {title && <div className={styles['help-panel__title-wrapper']}>{titleElement}</div>}\n            {children}\n          </div>\n        </>\n      );\n    }\n\n    return (\n      <>\n        <div className={styles['help-panel__icon']}>{<Icon svgIcon={HandWaving} size={iconSize} />}</div>\n        <div className={styles['help-panel__content']}>\n          <div className={styles['help-panel__title-wrapper']}>{titleElement}</div>\n          {children}\n        </div>\n      </>\n    );\n  };\n\n  return (\n    <div className={containerClassName} data-testid={testId}>\n      {renderContent()}\n    </div>\n  );\n};\n\nexport default HelpPanel;\n","import HelpPanel from './HelpPanel';\nexport * from './HelpPanel';\nexport default HelpPanel;\n"],"mappings":";;;;;;;;;AAyBA,IAAM,aAAuC,EAAE,WAAW,UAAU,UAAU,QAAQ,UAAU,YAAY;CAC1G,MAAM,WAAW,sBAAsB;CAEvC,MAAM,qBAAqB,WACzB,OAAO,eACP;GACG,OAAO,yBAAyB,YAAY;GAC5C,OAAO,yBAAyB,YAAY;CAC/C,GACA,SACF;CAEA,MAAM,sBAAuC;EAC3C,MAAM,eAAe,SACnB,oBAAC,eAAD;GAAO,QAAO;GAAU,YAAY;GAAM,YAAY;GACnD,UAAA;EACI,CAAA;EAGT,MAAM,WAAW,WAAW,SAAS,SAAS,SAAS;EAEvD,IAAI,YAAY,WACd,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD;GAAK,WAAW,WAAW,OAAO,qBAAqB,OAAO,4BAA4B;GACxF,UAAA,oBAAC,cAAD;IAAM,SAAS;IAAY,MAAM;GAAW,CAAA;EACzC,CAAA,GACL,qBAAC,OAAD;GAAK,WAAW,WAAW,OAAO,wBAAwB,OAAO,+BAA+B;GAAhG,UAAA,CACG,SAAS,oBAAC,OAAD;IAAK,WAAW,OAAO;IAA+B,UAAA;GAAkB,CAAA,GACjF,QACE;EACL,CAAA,CAAA,EAAA,CAAA;EAIN,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD;GAAK,WAAW,OAAO;GAAsB,UAAA,oBAAC,cAAD;IAAM,SAAS;IAAY,MAAM;GAAW,CAAA;EAAO,CAAA,GAChG,qBAAC,OAAD;GAAK,WAAW,OAAO;GAAvB,UAAA,CACE,oBAAC,OAAD;IAAK,WAAW,OAAO;IAA+B,UAAA;GAAkB,CAAA,GACvE,QACE;EACL,CAAA,CAAA,EAAA,CAAA;CAEN;CAEA,OACE,oBAAC,OAAD;EAAK,WAAW;EAAoB,eAAa;EAC9C,UAAA,cAAc;CACZ,CAAA;AAET;;;AC1EA,IAAA,oBAAe"}

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

@@ -1,6 +1,70 @@
+@use 'sass:map';
+@use '../../scss/font-mixins' as fonts;
+@use '../../scss/screen-reader' as *;
+@use '../../scss/breakpoints' as breakpoints;
 @import '../../scss/supernova/styles/colors.css';
+@import '../../scss/supernova/styles/spacers.css';
 
 .help-panel {
-  background-color: var(--color-help-background-normal) !important;
-  border: 1px solid var(--color-help-border-subtle-wcag) !important;
+  display: flex;
+  flex-direction: row;
+  padding: var(--core-space-xs) var(--core-space-xs) var(--core-space-m);
+  background-color: var(--color-help-background-normal);
+  border: 1px solid var(--color-help-border-subtle-wcag);
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
+    padding: var(--core-space-s) var(--core-space-s) var(--core-space-m);
+  }
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
+    padding: var(--core-space-s) var(--core-space-m) var(--core-space-m);
+  }
+
+  &--compact {
+    padding: var(--core-space-2xs) var(--core-space-s);
+  }
+
+  &--subdued {
+    background-color: transparent;
+  }
+
+  &--white {
+    background-color: var(--color-base-background-white);
+    border: 1px solid var(--color-base-border-onlight-subtle);
+  }
+
+  &__content {
+    @include fonts.help-text;
+
+    margin-top: 0.625rem;
+
+    &--compact {
+      margin-top: 0.625rem;
+    }
+  }
+
+  &__icon {
+    display: inline-flex;
+    gap: var(--core-space-xs);
+    margin-right: var(--core-space-3xs);
+    margin-bottom: 0;
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      margin-right: var(--core-space-2xs);
+    }
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
+      margin-right: var(--core-space-s);
+    }
+
+    &--compact {
+      margin-right: var(--core-space-2xs);
+      margin-bottom: 0;
+    }
+  }
+
+  &__title-wrapper {
+    display: flex;
+    align-items: center;
+  }
 }

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

@@ -1,5 +1,13 @@
 export type Styles = {
   'help-panel': string;
+  'help-panel__content': string;
+  'help-panel__content--compact': string;
+  'help-panel__icon': string;
+  'help-panel__icon--compact': string;
+  'help-panel__title-wrapper': string;
+  'help-panel--compact': string;
+  'help-panel--subdued': string;
+  'help-panel--white': string;
 };
 
 export type ClassNames = keyof Styles;

package/lib/components/HelpTeaser/HelpTeaser.d.ts

@@ -1,13 +1,14 @@
 import { HNDesignsystemInfoTeaser } from '../../resources/Resources';
-import { InfoTeaserTags } from '../InfoTeaser';
 import { TitleTags } from '../Title';
+export type HelpTeaserVariants = 'normal' | 'subdued';
+export type HelpTeaserTags = 'div' | 'section' | 'aside' | 'article';
 export interface HelpTeaserProps {
     /** What's in the box? */
     children: React.ReactNode;
     /** Override the default max height for collapsed teaser. Default is 12.25rem */
     collapsedMaxHeight?: string;
     /** Changes the underlying element of the wrapper */
-    htmlMarkup?: InfoTeaserTags;
+    htmlMarkup?: HelpTeaserTags;
     /** Resources for component */
     resources?: Partial<HNDesignsystemInfoTeaser>;
     /** Sets the data-testid attribute */
@@ -16,6 +17,8 @@ export interface HelpTeaserProps {
     title: string;
     /** Markup props for title */
     titleHtmlMarkup?: TitleTags;
+    /** Sets the visual variant */
+    variant?: HelpTeaserVariants;
 }
 declare const HelpTeaser: React.FC<HelpTeaserProps>;
 export default HelpTeaser;

package/lib/components/HelpTeaser/index.js

@@ -1,21 +1,66 @@
+import { IconSize, LanguageLocales } from "../../constants.js";
+import { t as Icon_default } from "../../Icon.js";
+import { useLanguage } from "../../hooks/useLanguage.js";
+import { useIsMobileBreakpoint } from "../../hooks/useIsMobileBreakpoint.js";
+import Title_default from "../Title/index.js";
+import { useExpand } from "../../hooks/useExpand.js";
 import HandWaving from "../Icons/HandWaving.js";
-import { t as InfoTeaser_default } from "../../InfoTeaser.js";
-import { jsx } from "react/jsx-runtime";
+import { t as getResources } from "../../resourceHelper2.js";
+import classNames from "classnames";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
 //#region src/components/HelpTeaser/HelpTeaser.tsx
 var HelpTeaser = (props) => {
-	const { children, htmlMarkup, resources, testId, title, titleHtmlMarkup, collapsedMaxHeight } = props;
-	return /* @__PURE__ */ jsx(InfoTeaser_default, {
-		testId,
-		htmlMarkup,
-		className: styles.helpteaser,
-		title,
-		titleHtmlMarkup,
-		resources,
-		svgIcon: HandWaving,
-		buttonClassName: styles["helpteaser__button"],
-		collapsedMaxHeight,
-		children
+	const { children, htmlMarkup, resources, testId, title, titleHtmlMarkup, collapsedMaxHeight, variant = "normal" } = props;
+	const [isExpanded, setIsExpanded] = useExpand(false);
+	const { language } = useLanguage(LanguageLocales.NORWEGIAN);
+	const defaultResources = getResources(language);
+	const helpTeaserTextId = useId();
+	const isMobile = useIsMobileBreakpoint();
+	const mergedResources = {
+		...defaultResources,
+		...resources
+	};
+	return /* @__PURE__ */ jsxs(htmlMarkup ?? "div", {
+		className: styles.wrapper,
+		"data-testid": testId,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: classNames(styles.helpteaser, {
+				[styles["helpteaser--collapsed"]]: !isExpanded,
+				[styles["helpteaser--subdued"]]: variant === "subdued"
+			}),
+			style: { maxHeight: !isExpanded ? collapsedMaxHeight ?? "12.25rem" : void 0 },
+			children: [
+				/* @__PURE__ */ jsx(Icon_default, {
+					svgIcon: HandWaving,
+					size: isMobile ? IconSize.XSmall : IconSize.Small,
+					className: styles["helpteaser__icon"]
+				}),
+				title && typeof title !== "undefined" && /* @__PURE__ */ jsx(Title_default, {
+					testId: "titleId",
+					htmlMarkup: titleHtmlMarkup ?? "h2",
+					appearance: "title6",
+					className: styles["helpteaser__title"],
+					children: title
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: styles["helpteaser__text"],
+					"aria-hidden": isExpanded ? false : true,
+					id: helpTeaserTextId,
+					children
+				})
+			]
+		}), /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: styles["helpteaser__button"],
+			onClick: () => {
+				setIsExpanded(!isExpanded);
+			},
+			"aria-expanded": isExpanded,
+			"aria-controls": helpTeaserTextId,
+			children: isExpanded ? mergedResources.expandButtonOpen : mergedResources.expandButtonClose
+		})]
 	});
 };
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/HelpTeaser/HelpTeaser.tsx","../../../src/components/HelpTeaser/index.ts"],"sourcesContent":["import type { HNDesignsystemInfoTeaser } from '../../resources/Resources';\nimport type { InfoTeaserTags } from '../InfoTeaser';\nimport type { TitleTags } from '../Title';\n\nimport HandWaving from '../Icons/HandWaving';\nimport InfoTeaser from '../InfoTeaser';\n\nimport styles from './styles.module.scss';\n\nexport interface HelpTeaserProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Override the default max height for collapsed teaser. Default is 12.25rem */\n  collapsedMaxHeight?: string;\n  /** Changes the underlying element of the wrapper */\n  htmlMarkup?: InfoTeaserTags;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemInfoTeaser>;\n  /** Sets the data-testid attribute */\n  testId?: string;\n  /** Title on top of the component */\n  title: string;\n  /** Markup props for title */\n  titleHtmlMarkup?: TitleTags;\n}\n\nconst HelpTeaser: React.FC<HelpTeaserProps> = props => {\n  const { children, htmlMarkup, resources, testId, title, titleHtmlMarkup, collapsedMaxHeight } = props;\n  return (\n    <InfoTeaser\n      testId={testId}\n      htmlMarkup={htmlMarkup}\n      className={styles.helpteaser}\n      title={title}\n      titleHtmlMarkup={titleHtmlMarkup}\n      resources={resources}\n      svgIcon={HandWaving}\n      buttonClassName={styles['helpteaser__button']}\n      collapsedMaxHeight={collapsedMaxHeight}\n    >\n      {children}\n    </InfoTeaser>\n  );\n};\n\nexport default HelpTeaser;\n","import HelpTeaser from './HelpTeaser';\nexport * from './HelpTeaser';\nexport default HelpTeaser;\n"],"mappings":";;;;;AA0BA,IAAM,cAAwC,UAAS;CACrD,MAAM,EAAE,UAAU,YAAY,WAAW,QAAQ,OAAO,iBAAiB,uBAAuB;CAChG,OACE,oBAAC,oBAAD;EACU;EACI;EACZ,WAAW,OAAO;EACX;EACU;EACN;EACX,SAAS;EACT,iBAAiB,OAAO;EACJ;EAEnB;CACS,CAAA;AAEhB;;;ACzCA,IAAA,qBAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/HelpTeaser/HelpTeaser.tsx","../../../src/components/HelpTeaser/index.ts"],"sourcesContent":["import { useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { HNDesignsystemInfoTeaser } from '../../resources/Resources';\nimport type { TitleTags } from '../Title';\n\nimport { useIsMobileBreakpoint } from '@helsenorge/designsystem-react/hooks/useIsMobileBreakpoint';\n\nimport { LanguageLocales } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport Icon, { IconSize } from '../Icon';\nimport HandWaving from '../Icons/HandWaving';\nimport { getResources } from '../InfoTeaser/resourceHelper';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type HelpTeaserVariants = 'normal' | 'subdued';\nexport type HelpTeaserTags = 'div' | 'section' | 'aside' | 'article';\n\nexport interface HelpTeaserProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Override the default max height for collapsed teaser. Default is 12.25rem */\n  collapsedMaxHeight?: string;\n  /** Changes the underlying element of the wrapper */\n  htmlMarkup?: HelpTeaserTags;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemInfoTeaser>;\n  /** Sets the data-testid attribute */\n  testId?: string;\n  /** Title on top of the component */\n  title: string;\n  /** Markup props for title */\n  titleHtmlMarkup?: TitleTags;\n  /** Sets the visual variant */\n  variant?: HelpTeaserVariants;\n}\n\nconst HelpTeaser: React.FC<HelpTeaserProps> = props => {\n  const { children, htmlMarkup, resources, testId, title, titleHtmlMarkup, collapsedMaxHeight, variant = 'normal' } = props;\n\n  const [isExpanded, setIsExpanded] = useExpand(false);\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n  const helpTeaserTextId = useId();\n  const isMobile = useIsMobileBreakpoint();\n\n  const mergedResources: HNDesignsystemInfoTeaser = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const WrapperTag = htmlMarkup ?? 'div';\n\n  return (\n    <WrapperTag className={styles.wrapper} data-testid={testId}>\n      <div\n        className={classNames(styles.helpteaser, {\n          [styles['helpteaser--collapsed']]: !isExpanded,\n          [styles['helpteaser--subdued']]: variant === 'subdued',\n        })}\n        style={{ maxHeight: !isExpanded ? (collapsedMaxHeight ?? '12.25rem') : undefined }}\n      >\n        <Icon svgIcon={HandWaving} size={isMobile ? IconSize.XSmall : IconSize.Small} className={styles['helpteaser__icon']} />\n        {title && typeof title !== 'undefined' && (\n          <Title testId=\"titleId\" htmlMarkup={titleHtmlMarkup ?? 'h2'} appearance=\"title6\" className={styles['helpteaser__title']}>\n            {title}\n          </Title>\n        )}\n        <div className={styles['helpteaser__text']} aria-hidden={isExpanded ? false : true} id={helpTeaserTextId}>\n          {children}\n        </div>\n      </div>\n      <button\n        type=\"button\"\n        className={styles['helpteaser__button']}\n        onClick={() => {\n          setIsExpanded(!isExpanded);\n        }}\n        aria-expanded={isExpanded}\n        aria-controls={helpTeaserTextId}\n      >\n        {isExpanded ? mergedResources.expandButtonOpen : mergedResources.expandButtonClose}\n      </button>\n    </WrapperTag>\n  );\n};\n\nexport default HelpTeaser;\n","import HelpTeaser from './HelpTeaser';\nexport * from './HelpTeaser';\nexport default HelpTeaser;\n"],"mappings":";;;;;;;;;;;;;AAyCA,IAAM,cAAwC,UAAS;CACrD,MAAM,EAAE,UAAU,YAAY,WAAW,QAAQ,OAAO,iBAAiB,oBAAoB,UAAU,aAAa;CAEpH,MAAM,CAAC,YAAY,iBAAiB,UAAU,KAAK;CACnD,MAAM,EAAE,aAAa,YAA6B,gBAAgB,SAAS;CAC3E,MAAM,mBAAmB,aAAa,QAAQ;CAC9C,MAAM,mBAAmB,MAAM;CAC/B,MAAM,WAAW,sBAAsB;CAEvC,MAAM,kBAA4C;EAChD,GAAG;EACH,GAAG;CACL;CAIA,OACE,qBAHiB,cAAc,OAG/B;EAAY,WAAW,OAAO;EAAS,eAAa;EAApD,UAAA,CACE,qBAAC,OAAD;GACE,WAAW,WAAW,OAAO,YAAY;KACtC,OAAO,2BAA2B,CAAC;KACnC,OAAO,yBAAyB,YAAY;GAC/C,CAAC;GACD,OAAO,EAAE,WAAW,CAAC,aAAc,sBAAsB,aAAc,KAAA,EAAU;GALnF,UAAA;IAOE,oBAAC,cAAD;KAAM,SAAS;KAAY,MAAM,WAAW,SAAS,SAAS,SAAS;KAAO,WAAW,OAAO;IAAsB,CAAA;IACrH,SAAS,OAAO,UAAU,eACzB,oBAAC,eAAD;KAAO,QAAO;KAAU,YAAY,mBAAmB;KAAM,YAAW;KAAS,WAAW,OAAO;KAChG,UAAA;IACI,CAAA;IAET,oBAAC,OAAD;KAAK,WAAW,OAAO;KAAqB,eAAa,aAAa,QAAQ;KAAM,IAAI;KACrF;IACE,CAAA;GACF;EACL,CAAA,GAAA,oBAAC,UAAD;GACE,MAAK;GACL,WAAW,OAAO;GAClB,eAAe;IACb,cAAc,CAAC,UAAU;GAC3B;GACA,iBAAe;GACf,iBAAe;GAEd,UAAA,aAAa,gBAAgB,mBAAmB,gBAAgB;EAC3D,CAAA,CACE;;AAEhB;;;ACvFA,IAAA,qBAAe"}

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

@@ -1,14 +1,111 @@
+@use 'sass:map';
+@use '../../scss/font-mixins' as fonts;
+@use '../../scss/breakpoints' as breakpoints;
 @import '../../scss/supernova/styles/colors.css';
+@import '../../scss/supernova/styles/spacers.css';
+
+.wrapper {
+  position: relative;
+}
 
 .helpteaser {
+  display: grid;
+  grid-template-columns: [icon] auto [content] 1fr;
+  width: 100%;
+  overflow: hidden;
   background-color: var(--color-help-background-normal);
   border: 1px solid var(--color-help-border-subtle-wcag);
+  padding: var(--core-space-xs) var(--core-space-xs) var(--core-space-m);
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
+    padding: var(--core-space-s) var(--core-space-s) var(--core-space-m);
+  }
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    padding: var(--core-space-s) var(--core-space-s) var(--core-space-l);
+  }
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
+    padding: var(--core-space-s) var(--core-space-m) var(--core-space-l);
+  }
 
-  &::after {
-    background: linear-gradient(180deg, #f4ecfe40 0%, #f4ecfe 80%);
+  &--subdued {
+    background-color: var(--color-base-background-white);
+  }
+
+  &--collapsed {
+    &::after {
+      content: '';
+      position: absolute;
+      height: 5.875rem;
+      background: linear-gradient(180deg, #f4ecfe40 0%, #f4ecfe 80%);
+
+      /* 1px på hver side for å ikke ligge over border */
+      bottom: 1px;
+      left: 1px;
+      width: calc(100% - 2px);
+    }
+  }
+
+  &--collapsed#{&}--subdued {
+    &::after {
+      background: linear-gradient(180deg, #fff6 0%, #fff 80%);
+    }
+  }
+
+  &__title {
+    grid-column: content;
+    grid-row: 1;
+    align-self: center;
+    padding: var(--core-space-2xs) 0;
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      padding-top: 0.62rem;
+    }
+  }
+
+  &__icon {
+    grid-column: icon;
+    grid-row: 1;
+    align-self: center;
+    margin-right: var(--core-space-3xs);
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      margin-right: var(--core-space-2xs);
+    }
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
+      margin-right: var(--core-space-s);
+    }
+  }
+
+  &__text {
+    @include fonts.help-text;
+
+    grid-column: content;
+    overflow: hidden;
+    height: inherit;
   }
 
   &__button {
+    position: absolute;
+    right: calc(50%);
+    border: none;
+    width: fit-content;
+    white-space: nowrap;
+    border-radius: 1.25rem;
+    color: var(--core-color-white, #fff);
+    padding: 0.375rem 1rem;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%) translateY(50%);
+    cursor: pointer;
+
+    /* @todo Mobile/HelpTriggerText */
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 120%; // 1.2rem
     background-color: var(--color-help-graphics-normal);
 
     &:hover {
@@ -18,5 +115,11 @@
     &:active {
       background-color: var(--color-help-graphics-dark);
     }
+
+    &:focus-visible {
+      border: 1px solid var(--color-base-graphics-ondark);
+      outline: none;
+      box-shadow: 0 0 0 3px var(--color-base-graphics-onlight);
+    }
   }
 }

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

@@ -1,6 +1,12 @@
 export type Styles = {
   helpteaser: string;
   helpteaser__button: string;
+  helpteaser__icon: string;
+  helpteaser__text: string;
+  helpteaser__title: string;
+  'helpteaser--collapsed': string;
+  'helpteaser--subdued': string;
+  wrapper: string;
 };
 
 export type ClassNames = keyof Styles;

package/lib/components/HighlightPanel/index.js

@@ -1,2 +1,80 @@
-import { t as HighlightPanel_default } from "../../HighlightPanel.js";
+import { AnalyticsId, IconSize } from "../../constants.js";
+import { t as Icon_default } from "../../Icon.js";
+import { t as LazyIcon_default } from "../../LazyIcon.js";
+import { Breakpoint, useBreakpoint } from "../../hooks/useBreakpoint.js";
+import Title_default from "../Title/index.js";
+import classNames from "classnames";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import styles from "./styles.module.scss";
+//#region src/components/HighlightPanel/HighlightPanel.tsx
+var HighlightPanel = (props) => {
+	const { children, color = "white", testId, svgIcon, htmlMarkup = "div", className, variant = "normal", title, titleHtmlMarkup = "h2" } = props;
+	const breakpoint = useBreakpoint();
+	const containerClassName = classNames(styles.highlightpanel, styles[`highlightpanel--${color}`], svgIcon && styles["highlightpanel--has-icon"], className, { [styles["highlightpanel--compact"]]: variant === "compact" });
+	const renderContent = () => {
+		const titleElement = title && /* @__PURE__ */ jsx(Title_default, {
+			testId: "titleId",
+			htmlMarkup: titleHtmlMarkup,
+			appearance: variant === "compact" ? "title6" : "title4",
+			children: title
+		});
+		if (svgIcon) {
+			const iconSize = IconSize.Small;
+			if (variant === "compact") return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+				className: classNames(styles.highlightpanel__icon, styles["highlightpanel__icon--compact"]),
+				children: typeof svgIcon === "string" ? /* @__PURE__ */ jsx(LazyIcon_default, {
+					iconName: svgIcon,
+					size: iconSize
+				}) : /* @__PURE__ */ jsx(Icon_default, {
+					svgIcon,
+					size: iconSize
+				})
+			}), /* @__PURE__ */ jsxs("div", {
+				className: classNames(styles.highlightpanel__content, styles["highlightpanel__content--compact"]),
+				children: [title && /* @__PURE__ */ jsx("div", {
+					className: styles["highlightpanel__title-wrapper"],
+					children: titleElement
+				}), /* @__PURE__ */ jsx("div", {
+					className: styles["highlightpanel__content__children--compact"],
+					children
+				})]
+			})] });
+			return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+				className: styles.highlightpanel__icon,
+				children: [typeof svgIcon === "string" ? /* @__PURE__ */ jsx(LazyIcon_default, {
+					iconName: svgIcon,
+					size: iconSize
+				}) : /* @__PURE__ */ jsx(Icon_default, {
+					svgIcon,
+					size: iconSize
+				}), title && breakpoint < Breakpoint.md && /* @__PURE__ */ jsx("div", {
+					className: styles["highlightpanel__title-wrapper"],
+					children: titleElement
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: styles.highlightpanel__content,
+				children: [title && breakpoint >= Breakpoint.md && /* @__PURE__ */ jsx("div", {
+					className: styles["highlightpanel__title-wrapper"],
+					children: titleElement
+				}), children]
+			})] });
+		}
+		return /* @__PURE__ */ jsxs(Fragment, { children: [title && /* @__PURE__ */ jsx("div", {
+			className: styles.highlightpanel__content,
+			children: /* @__PURE__ */ jsx("div", { children: titleElement })
+		}), children] });
+	};
+	return /* @__PURE__ */ jsx(htmlMarkup, {
+		className: containerClassName,
+		"data-testid": testId,
+		"data-analyticsid": AnalyticsId.HighlightPanel,
+		children: renderContent()
+	});
+};
+//#endregion
+//#region src/components/HighlightPanel/index.ts
+var HighlightPanel_default = HighlightPanel;
+//#endregion
 export { HighlightPanel_default as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/HighlightPanel/HighlightPanel.tsx","../../../src/components/HighlightPanel/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { PaletteNames } from '../../theme/palette';\nimport type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\nimport type { TitleTags } from '../Title';\n\nimport { useBreakpoint, Breakpoint } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport Icon, { IconSize } from '../Icon';\nimport LazyIcon from '../LazyIcon';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type HighlightPanelColors = Extract<PaletteNames, 'white' | 'neutral' | 'blueberry' | 'cherry'>;\n\nexport type HighlightPanelTags = Exclude<\n  keyof HTMLElementTagNameMap,\n  'dir' | 'font' | 'frame' | 'frameset' | 'marquee' | 'applet' | 'basefont' | 'search'\n>;\n\nexport type HighlightPanelVariants = 'normal' | 'compact';\n\nexport interface HighlightPanelProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Changes the background color. Default: white */\n  color?: HighlightPanelColors;\n  /** Adds an icon to the highlightpanel. */\n  svgIcon?: SvgIcon | IconName;\n  /** Changes the underlying element. Default: div */\n  htmlMarkup?: HighlightPanelTags;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Uses the compact styling if set to compact */\n  variant?: HighlightPanelVariants;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Element that is set after the icon-element in the DOM, often a title-element */\n  title?: string;\n  /** Markup props for title */\n  titleHtmlMarkup?: TitleTags;\n}\n\nconst HighlightPanel: React.FC<HighlightPanelProps> = props => {\n  const {\n    children,\n    color = 'white',\n    testId,\n    svgIcon,\n    htmlMarkup = 'div',\n    className,\n    variant = 'normal',\n    title,\n    titleHtmlMarkup = 'h2',\n  } = props;\n  const breakpoint = useBreakpoint();\n\n  const containerClassName = classNames(\n    styles.highlightpanel,\n    styles[`highlightpanel--${color}`],\n    svgIcon && styles['highlightpanel--has-icon'],\n    className,\n    { [styles['highlightpanel--compact']]: variant === 'compact' }\n  );\n\n  const renderContent = (): React.ReactNode => {\n    const titleElement = title && (\n      <Title testId=\"titleId\" htmlMarkup={titleHtmlMarkup} appearance={variant === 'compact' ? 'title6' : 'title4'}>\n        {title}\n      </Title>\n    );\n\n    if (svgIcon) {\n      const iconSize = IconSize.Small;\n\n      if (variant === 'compact') {\n        return (\n          <>\n            <div className={classNames(styles.highlightpanel__icon, styles['highlightpanel__icon--compact'])}>\n              {typeof svgIcon === 'string' ? <LazyIcon iconName={svgIcon} size={iconSize} /> : <Icon svgIcon={svgIcon} size={iconSize} />}\n            </div>\n            <div className={classNames(styles.highlightpanel__content, styles['highlightpanel__content--compact'])}>\n              {title && <div className={styles['highlightpanel__title-wrapper']}>{titleElement}</div>}\n              <div className={styles['highlightpanel__content__children--compact']}>{children}</div>\n            </div>\n          </>\n        );\n      }\n\n      return (\n        <>\n          <div className={styles.highlightpanel__icon}>\n            {typeof svgIcon === 'string' ? <LazyIcon iconName={svgIcon} size={iconSize} /> : <Icon svgIcon={svgIcon} size={iconSize} />}\n            {title && breakpoint < Breakpoint.md && <div className={styles['highlightpanel__title-wrapper']}>{titleElement}</div>}\n          </div>\n          <div className={styles.highlightpanel__content}>\n            {title && breakpoint >= Breakpoint.md && <div className={styles['highlightpanel__title-wrapper']}>{titleElement}</div>}\n            {children}\n          </div>\n        </>\n      );\n    }\n\n    return (\n      <>\n        {title && (\n          <div className={styles.highlightpanel__content}>\n            <div>{titleElement}</div>\n          </div>\n        )}\n        {children}\n      </>\n    );\n  };\n\n  const CustomTag = htmlMarkup;\n\n  return (\n    <CustomTag className={containerClassName} data-testid={testId} data-analyticsid={AnalyticsId.HighlightPanel}>\n      {renderContent()}\n    </CustomTag>\n  );\n};\n\nexport default HighlightPanel;\n","import HighlightPanel from './HighlightPanel';\nexport * from './HighlightPanel';\nexport default HighlightPanel;\n"],"mappings":";;;;;;;;;AA6CA,IAAM,kBAAgD,UAAS;CAC7D,MAAM,EACJ,UACA,QAAQ,SACR,QACA,SACA,aAAa,OACb,WACA,UAAU,UACV,OACA,kBAAkB,SAChB;CACJ,MAAM,aAAa,cAAc;CAEjC,MAAM,qBAAqB,WACzB,OAAO,gBACP,OAAO,mBAAmB,UAC1B,WAAW,OAAO,6BAClB,WACA,GAAG,OAAO,6BAA6B,YAAY,UAAU,CAC/D;CAEA,MAAM,sBAAuC;EAC3C,MAAM,eAAe,SACnB,oBAAC,eAAD;GAAO,QAAO;GAAU,YAAY;GAAiB,YAAY,YAAY,YAAY,WAAW;GACjG,UAAA;EACI,CAAA;EAGT,IAAI,SAAS;GACX,MAAM,WAAW,SAAS;GAE1B,IAAI,YAAY,WACd,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD;IAAK,WAAW,WAAW,OAAO,sBAAsB,OAAO,gCAAgC;IAC5F,UAAA,OAAO,YAAY,WAAW,oBAAC,kBAAD;KAAU,UAAU;KAAS,MAAM;IAAW,CAAA,IAAI,oBAAC,cAAD;KAAe;KAAS,MAAM;IAAW,CAAA;GACvH,CAAA,GACL,qBAAC,OAAD;IAAK,WAAW,WAAW,OAAO,yBAAyB,OAAO,mCAAmC;IAArG,UAAA,CACG,SAAS,oBAAC,OAAD;KAAK,WAAW,OAAO;KAAmC,UAAA;IAAkB,CAAA,GACtF,oBAAC,OAAD;KAAK,WAAW,OAAO;KAAgD;IAAc,CAAA,CAClF;GACL,CAAA,CAAA,EAAA,CAAA;GAIN,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,qBAAC,OAAD;IAAK,WAAW,OAAO;IAAvB,UAAA,CACG,OAAO,YAAY,WAAW,oBAAC,kBAAD;KAAU,UAAU;KAAS,MAAM;IAAW,CAAA,IAAI,oBAAC,cAAD;KAAe;KAAS,MAAM;IAAW,CAAA,GACzH,SAAS,aAAa,WAAW,MAAM,oBAAC,OAAD;KAAK,WAAW,OAAO;KAAmC,UAAA;IAAkB,CAAA,CACjH;GACL,CAAA,GAAA,qBAAC,OAAD;IAAK,WAAW,OAAO;IAAvB,UAAA,CACG,SAAS,cAAc,WAAW,MAAM,oBAAC,OAAD;KAAK,WAAW,OAAO;KAAmC,UAAA;IAAkB,CAAA,GACpH,QACE;GACL,CAAA,CAAA,EAAA,CAAA;EAEN;EAEA,OACE,qBAAA,UAAA,EAAA,UAAA,CACG,SACC,oBAAC,OAAD;GAAK,WAAW,OAAO;GACrB,UAAA,oBAAC,OAAD,EAAA,UAAM,aAAkB,CAAA;EACrB,CAAA,GAEN,QACD,EAAA,CAAA;CAEN;CAIA,OACE,oBAAC,YAAD;EAAW,WAAW;EAAoB,eAAa;EAAQ,oBAAkB,YAAY;EAC1F,UAAA,cAAc;CACN,CAAA;AAEf;;;AC1HA,IAAA,yBAAe"}

package/lib/components/Icons/AdditionalIconInformation.d.ts

@@ -1411,5 +1411,25 @@ declare const _default: {
         alternativeName: string;
         categories: string;
     };
+    consentdocument: {
+        alternativeName: string;
+        categories: string;
+    };
+    healthcarepersonnelsecurity: {
+        alternativeName: string;
+        categories: string;
+    };
+    historydocument: {
+        alternativeName: string;
+        categories: string;
+    };
+    personcommunication: {
+        alternativeName: string;
+        categories: string;
+    };
+    persondocument: {
+        alternativeName: string;
+        categories: string;
+    };
 };
 export default _default;

package/lib/components/Icons/AdditionalIconInformation.js

@@ -1411,6 +1411,26 @@ var AdditionalIconInformation_default = {
 	thumbsdown: {
 		alternativeName: "Tommel Ned",
 		categories: ""
+	},
+	consentdocument: {
+		alternativeName: "",
+		categories: ""
+	},
+	healthcarepersonnelsecurity: {
+		alternativeName: "",
+		categories: ""
+	},
+	historydocument: {
+		alternativeName: "",
+		categories: ""
+	},
+	personcommunication: {
+		alternativeName: "",
+		categories: ""
+	},
+	persondocument: {
+		alternativeName: "",
+		categories: ""
 	}
 };
 //#endregion