@helsenorge/designsystem-react 15.5.1 → 15.6.0

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/InfoTeaser/index.js

@@ -1,2 +1,72 @@
-import { t as InfoTeaser_default } from "../../InfoTeaser.js";
+import { AnalyticsId, IconSize, LanguageLocales } from "../../constants.js";
+import { t as Icon_default } from "../../Icon.js";
+import { useLanguage } from "../../hooks/useLanguage.js";
+import { t as LazyIcon_default } from "../../LazyIcon.js";
+import Title_default from "../Title/index.js";
+import { useExpand } from "../../hooks/useExpand.js";
+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/InfoTeaser/InfoTeaser.tsx
+var InfoTeaser = (props) => {
+	const { buttonClassName, children, className, expanded = false, htmlMarkup = "div", onExpand, resources, svgIcon, testId, title, titleHtmlMarkup = "h2", collapsedMaxHeight } = props;
+	const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);
+	const { language } = useLanguage(LanguageLocales.NORWEGIAN);
+	const defaultResources = getResources(language);
+	const infoteaserTextId = useId();
+	const mergedResources = {
+		...defaultResources,
+		...resources
+	};
+	return /* @__PURE__ */ jsxs(htmlMarkup, {
+		className: styles.wrapper,
+		"data-testid": testId,
+		"data-analyticsid": AnalyticsId.InfoTeaser,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: classNames(styles.infoteaser, className, { [styles["infoteaser--collapsed"]]: !isExpanded }),
+			style: { maxHeight: !isExpanded ? collapsedMaxHeight ? collapsedMaxHeight : "12.25rem" : void 0 },
+			children: [
+				svgIcon && (typeof svgIcon === "string" ? /* @__PURE__ */ jsx(LazyIcon_default, {
+					iconName: svgIcon,
+					size: IconSize.Small,
+					className: styles.infoteaser__icon
+				}) : /* @__PURE__ */ jsx(Icon_default, {
+					svgIcon,
+					size: IconSize.Small,
+					className: styles.infoteaser__icon
+				})),
+				title && typeof title !== "undefined" && /* @__PURE__ */ jsx(Title_default, {
+					testId: "titleId",
+					htmlMarkup: titleHtmlMarkup,
+					appearance: "title4",
+					className: styles.infoteaser__title,
+					children: title
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: styles.infoteaser__text,
+					"aria-hidden": isExpanded ? false : true,
+					id: infoteaserTextId,
+					children
+				})
+			]
+		}), /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: classNames(styles.infoteaser__button, buttonClassName),
+			onClick: () => {
+				setIsExpanded(!isExpanded);
+			},
+			"aria-expanded": isExpanded,
+			"aria-controls": infoteaserTextId,
+			children: isExpanded ? mergedResources.expandButtonOpen : mergedResources.expandButtonClose
+		})]
+	});
+};
+//#endregion
+//#region src/components/InfoTeaser/index.ts
+var InfoTeaser_default = InfoTeaser;
+//#endregion
 export { InfoTeaser_default as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/InfoTeaser/InfoTeaser.tsx","../../../src/components/InfoTeaser/index.ts"],"sourcesContent":["import { useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { HNDesignsystemInfoTeaser } from '../../resources/Resources';\nimport type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\nimport type { TitleTags } from '../Title';\n\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport Icon, { IconSize } from '../Icon';\nimport LazyIcon from '../LazyIcon';\nimport Title from '../Title';\nimport { getResources } from './resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport type InfoTeaserTags = 'div' | 'section' | 'aside' | 'article';\n\nexport interface InfoTeaserProps {\n  /** For overriding styling on the button */\n  buttonClassName?: string;\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  /** For overriding styling on infoteaser box */\n  className?: string;\n  /** Opens or closes the teaser */\n  expanded?: boolean;\n  /** Changes the underlying element of the wrapper */\n  htmlMarkup?: InfoTeaserTags;\n  /** Called when the teaser is expanded/collapsed. */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemInfoTeaser>;\n  /** Adds an icon */\n  svgIcon?: SvgIcon | IconName;\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 InfoTeaser: React.FC<InfoTeaserProps> = props => {\n  const {\n    buttonClassName,\n    children,\n    className,\n    expanded = false,\n    htmlMarkup = 'div',\n    onExpand,\n    resources,\n    svgIcon,\n    testId,\n    title,\n    titleHtmlMarkup = 'h2',\n    collapsedMaxHeight,\n  } = props;\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n  const infoteaserTextId = useId();\n\n  const mergedResources: HNDesignsystemInfoTeaser = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const WrapperTag = htmlMarkup;\n\n  return (\n    <WrapperTag className={styles.wrapper} data-testid={testId} data-analyticsid={AnalyticsId.InfoTeaser}>\n      <div\n        className={classNames(styles.infoteaser, className, {\n          [styles['infoteaser--collapsed']]: !isExpanded,\n        })}\n        style={{ maxHeight: !isExpanded ? (collapsedMaxHeight ? collapsedMaxHeight : '12.25rem') : undefined }}\n      >\n        {svgIcon &&\n          (typeof svgIcon === 'string' ? (\n            <LazyIcon iconName={svgIcon} size={IconSize.Small} className={styles.infoteaser__icon} />\n          ) : (\n            <Icon svgIcon={svgIcon} size={IconSize.Small} className={styles.infoteaser__icon} />\n          ))}\n        {title && typeof title !== 'undefined' && (\n          <Title testId=\"titleId\" htmlMarkup={titleHtmlMarkup} appearance=\"title4\" className={styles.infoteaser__title}>\n            {title}\n          </Title>\n        )}\n        <div className={styles.infoteaser__text} aria-hidden={isExpanded ? false : true} id={infoteaserTextId}>\n          {children}\n        </div>\n      </div>\n      <button\n        type=\"button\"\n        className={classNames(styles.infoteaser__button, buttonClassName)}\n        onClick={() => {\n          setIsExpanded(!isExpanded);\n        }}\n        aria-expanded={isExpanded}\n        aria-controls={infoteaserTextId}\n      >\n        {isExpanded ? mergedResources.expandButtonOpen : mergedResources.expandButtonClose}\n      </button>\n    </WrapperTag>\n  );\n};\n\nexport default InfoTeaser;\n","import InfoTeaser from './InfoTeaser';\nexport * from './InfoTeaser';\nexport default InfoTeaser;\n"],"mappings":";;;;;;;;;;;;AAgDA,IAAM,cAAwC,UAAS;CACrD,MAAM,EACJ,iBACA,UACA,WACA,WAAW,OACX,aAAa,OACb,UACA,WACA,SACA,QACA,OACA,kBAAkB,MAClB,uBACE;CACJ,MAAM,CAAC,YAAY,iBAAiB,UAAU,UAAU,QAAQ;CAChE,MAAM,EAAE,aAAa,YAA6B,gBAAgB,SAAS;CAC3E,MAAM,mBAAmB,aAAa,QAAQ;CAC9C,MAAM,mBAAmB,MAAM;CAE/B,MAAM,kBAA4C;EAChD,GAAG;EACH,GAAG;CACL;CAIA,OACE,qBAAC,YAAD;EAAY,WAAW,OAAO;EAAS,eAAa;EAAQ,oBAAkB,YAAY;EAA1F,UAAA,CACE,qBAAC,OAAD;GACE,WAAW,WAAW,OAAO,YAAY,WAAW,GACjD,OAAO,2BAA2B,CAAC,WACtC,CAAC;GACD,OAAO,EAAE,WAAW,CAAC,aAAc,qBAAqB,qBAAqB,aAAc,KAAA,EAAU;GAJvG,UAAA;IAMG,YACE,OAAO,YAAY,WAClB,oBAAC,kBAAD;KAAU,UAAU;KAAS,MAAM,SAAS;KAAO,WAAW,OAAO;IAAmB,CAAA,IAExF,oBAAC,cAAD;KAAe;KAAS,MAAM,SAAS;KAAO,WAAW,OAAO;IAAmB,CAAA;IAEtF,SAAS,OAAO,UAAU,eACzB,oBAAC,eAAD;KAAO,QAAO;KAAU,YAAY;KAAiB,YAAW;KAAS,WAAW,OAAO;KACxF,UAAA;IACI,CAAA;IAET,oBAAC,OAAD;KAAK,WAAW,OAAO;KAAkB,eAAa,aAAa,QAAQ;KAAM,IAAI;KAClF;IACE,CAAA;GACF;EACL,CAAA,GAAA,oBAAC,UAAD;GACE,MAAK;GACL,WAAW,WAAW,OAAO,oBAAoB,eAAe;GAChE,eAAe;IACb,cAAc,CAAC,UAAU;GAC3B;GACA,iBAAe;GACf,iBAAe;GAEd,UAAA,aAAa,gBAAgB,mBAAmB,gBAAgB;EAC3D,CAAA,CACE;;AAEhB;;;AC7GA,IAAA,qBAAe"}

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

@@ -1,9 +1,9 @@
 @use 'sass:map';
-@use '../../scss/spacers' as spacers;
 @use '../../scss/palette' as palette;
 @use '../../scss/font-settings' as font-settings;
 @use '../../scss/breakpoints' as breakpoints;
 @use '../../scss/screen-reader' as *;
+@import '../../scss/supernova/styles/spacers';
 
 $padding-clickable-area-top-bottom: 8px;
 $padding-clickable-area-left: 8px;
@@ -19,10 +19,10 @@ $padding-clickable-area-left: 8px;
   margin-left: -$padding-clickable-area-left;
 
   &__large {
-    margin: spacers.getSpacer(2xs) 0;
+    margin-bottom: var(--core-space-2xs);
 
     &:has(input:focus-visible) {
-      box-shadow: 0 0 0 spacers.getSpacer(3xs);
+      box-shadow: 0 0 0 var(--core-space-3xs);
       color: palette.$neutral500;
     }
 
@@ -62,7 +62,7 @@ $padding-clickable-area-left: 8px;
   }
 
   &__large {
-    padding: spacers.getSpacer(s);
+    padding: var(--core-space-s);
     background-color: palette.$neutral50;
     border: 1px solid transparent;
 
@@ -168,7 +168,7 @@ $padding-clickable-area-left: 8px;
 
   @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     &__large {
-      padding: 1.68rem spacers.getSpacer(l);
+      padding: 1.68rem var(--core-space-l);
     }
   }
 }
@@ -178,7 +178,7 @@ $padding-clickable-area-left: 8px;
 }
 
 .radio-button__marker-wrapper {
-  margin-right: spacers.getSpacer(s);
+  margin-right: var(--core-space-s);
 }
 
 .radiobutton-sublabel-wrapper {