@helsenorge/designsystem-react 3.1.0 → 3.1.1

package/CHANGELOG.md

@@ -1,3 +1,5 @@
+## [3.1.0](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv3.0.2&targetVersion=GTv3.1.0) (2023-03-29)
+
 ## [3.0.2](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv3.0.1&targetVersion=GTv3.0.2) (2023-03-29)
 
 ### Features

package/components/ServiceMessage/ServiceMessage.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { AnchorLinkTargets } from '../AnchorLink';
+import { NotificationPanelVariants } from '../NotificationPanel';
+export interface ServiceMessageProps {
+    /** Sets a label for the notification panel. */
+    label: string;
+    /** String displayed in service-message when expended*/
+    info?: string;
+    /** String displayed in service-message when expended, with a smaller font*/
+    extraInfo?: string;
+    /** function that runs on dismiss */
+    onDismiss?: () => void;
+    /** Allows for dismiss to be an option, also for ServiceMessage with only label as content */
+    dismissable?: boolean;
+    /** Makes expander be open from start. */
+    expanderOpenFromStart?: boolean;
+    /** Name that describes a url-link for the user*/
+    urlTitle?: string;
+    /** Url for further information*/
+    url?: string;
+    /** Sets target for the anchorlink to the url*/
+    target?: AnchorLinkTargets;
+    /** Text on close-button in service messages. */
+    closeBtnText?: string;
+    /** Changes the visual representation. */
+    variant?: NotificationPanelVariants;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** First of its type. Used to remove border-top */
+    first?: boolean;
+}
+declare const ServiceMessage: React.FC<ServiceMessageProps>;
+export default ServiceMessage;
+//# sourceMappingURL=ServiceMessage.d.ts.map

package/components/ServiceMessage/ServiceMessage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ServiceMessage.d.ts","sourceRoot":"","sources":["../../../src/components/ServiceMessage/ServiceMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAWhD,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAUlD,OAAO,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAIjE,MAAM,WAAW,mBAAmB;IAClC,+CAA+C;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,6FAA6F;IAC7F,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yCAAyC;IACzC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iCAAiC;IACjC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,+CAA+C;IAC/C,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yCAAyC;IACzC,OAAO,CAAC,EAAE,yBAAyB,CAAC;IACpC,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mDAAmD;IACnD,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AACD,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAiIjD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/components/ServiceMessage/componentdata.json

@@ -0,0 +1 @@
+{"props":{"label":{"defaultValue":null,"description":"Sets a label for the notification panel.","name":"label","parent":{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"},"declarations":[{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"}],"required":true,"type":{"name":"string"}},"info":{"defaultValue":null,"description":"String displayed in service-message when expended","name":"info","parent":{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"},"declarations":[{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"}],"required":false,"type":{"name":"string"}},"extraInfo":{"defaultValue":null,"description":"String displayed in service-message when expended, with a smaller font","name":"extraInfo","parent":{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"},"declarations":[{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"}],"required":false,"type":{"name":"string"}},"onDismiss":{"defaultValue":null,"description":"function that runs on dismiss","name":"onDismiss","parent":{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"},"declarations":[{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"}],"required":false,"type":{"name":"(() => void)"}},"dismissable":{"defaultValue":{"value":"true"},"description":"Allows for dismiss to be an option, also for ServiceMessage with only label as content","name":"dismissable","parent":{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"},"declarations":[{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"}],"required":false,"type":{"name":"boolean"}},"expanderOpenFromStart":{"defaultValue":{"value":"false"},"description":"Makes expander be open from start.","name":"expanderOpenFromStart","parent":{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"},"declarations":[{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"}],"required":false,"type":{"name":"boolean"}},"urlTitle":{"defaultValue":null,"description":"Name that describes a url-link for the user","name":"urlTitle","parent":{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"},"declarations":[{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"}],"required":false,"type":{"name":"string"}},"url":{"defaultValue":null,"description":"Url for further information","name":"url","parent":{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"},"declarations":[{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"}],"required":false,"type":{"name":"string"}},"target":{"defaultValue":{"value":"_self"},"description":"Sets target for the anchorlink to the url","name":"target","parent":{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"},"declarations":[{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"}],"required":false,"type":{"name":"enum","raw":"AnchorLinkTargets","value":[{"value":"\"_self\""},{"value":"\"_blank\""},{"value":"\"_parent\""}]}},"closeBtnText":{"defaultValue":{"value":"fjern melding"},"description":"Text on close-button in service messages.","name":"closeBtnText","parent":{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"},"declarations":[{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"}],"required":false,"type":{"name":"string"}},"variant":{"defaultValue":{"value":"alert"},"description":"Changes the visual representation.","name":"variant","parent":{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"},"declarations":[{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"}],"required":false,"type":{"name":"enum","raw":"NotificationPanelVariants","value":[{"value":"\"info\""},{"value":"\"warn\""},{"value":"\"alert\""},{"value":"\"success\""}]}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"},"declarations":[{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"}],"required":false,"type":{"name":"string"}},"first":{"defaultValue":{"value":"false"},"description":"First of its type. Used to remove border-top","name":"first","parent":{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"},"declarations":[{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"}],"required":false,"type":{"name":"boolean"}}}}

package/components/ServiceMessage/index.d.ts

@@ -0,0 +1,4 @@
+import ServiceMessage from './ServiceMessage';
+export * from './ServiceMessage';
+export default ServiceMessage;
+//# sourceMappingURL=index.d.ts.map

package/components/ServiceMessage/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ServiceMessage/index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,cAAc,kBAAkB,CAAC;AACjC,eAAe,cAAc,CAAC"}

package/components/ServiceMessage/index.js

@@ -0,0 +1,2 @@
+import s,{useState as Q,useRef as f}from"react";import o from"classnames";import{useBreakpoint as V}from"../../hooks/useBreakpoint.js";import{useHover as p}from"../../hooks/useHover.js";import{useUuid as Y}from"../../hooks/useUuid.js";import{getColor as w}from"../../theme/currys/color.js";import{breakpoints as Z}from"../../theme/grid.js";import{palette as t}from"../../theme/palette.js";import{getAriaLabelAttributes as ee}from"../../utils/accessibility.js";import{Icon as a}from"../Icons/Icon.js";import{IconSize as v}from"../../constants.js";import se from"../Icons/CheckFill.js";import re from"../Icons/ChevronDown.js";import oe from"../Icons/ChevronUp.js";import te from"../Icons/ErrorSignFill.js";import ae from"../Icons/Forward.js";import ne from"../Icons/InfoSignFill.js";import ce from"../Icons/TriangleX.js";import S from"../Icons/X.js";import e from"./styles.module.scss";import"../../uuid.js";import"../../utils/environment.js";import"../../theme/index.js";import"../../theme/spacers.js";const me=({label:E,dismissable:C=!0,onDismiss:h,info:g,extraInfo:b,urlTitle:N,url:k,target:z="_self",closeBtnText:d="fjern melding",first:I=!1,expanderOpenFromStart:y=!1,variant:r="alert",testId:x})=>{const n=!!g||!!b,F=n?"button":"span",c=V()<Z.lg?v.XSmall:v.Small,R=Y(),M=r==="alert"?"alert":"region",X=ee({label:E,id:R}),[m,$]=Q(y),A={info:s.createElement(a,{svgIcon:ne,color:t.blueberry700,hoverColor:t.blueberry700,size:c}),warn:s.createElement(a,{svgIcon:te,color:t.banana700,hoverColor:t.banana700,size:c}),alert:s.createElement(a,{svgIcon:ce,color:t.cherry700,hoverColor:t.cherry700,size:c}),success:s.createElement(a,{svgIcon:se,color:t.kiwi900,hoverColor:t.kiwi900,size:c})},T=o(e["service-message__top-row--container"],e["service-message__wrapper--inner"]),j=o(e["service-message__bottom-row__button"],e["service-message__bottom-row__close-button--top"]),B=()=>{const l=p(),{isHovered:u,hoverRef:i}=l,_=f(null),{isHovered:P}=p(_);return s.createElement("span",{className:T,ref:i},s.createElement("span",{className:e["service-message__icon--signal"]},A[r]),s.createElement("h1",{className:e["service-message__label"],id:R},E),n&&s.createElement("span",{className:e["service-message__icon--expander"]},s.createElement(a,{size:c,svgIcon:m?oe:re,isHovered:u})),!n&&C&&s.createElement("button",{ref:_,className:j,"aria-label":d,onClick:h},s.createElement(a,{size:c,svgIcon:S,color:w("blueberry",700),isHovered:P})))},L=()=>{n&&$(!m)},U=o(e["service-message__bottom-row__button"],e["service-message__bottom-row__read-more-btn--spacing"]),H=!!k&&!!N,O=o(e["service-message__bottom-row__button"],e["service-message__bottom-row__close-button"]),W=o(e["service-message__bottom-row"],{[e["service-message__bottom-row--only-close-button"]]:!H}),q=()=>{const l=f(null),{isHovered:u}=p(l),i=f(null),{isHovered:_}=p(i);return s.createElement("div",{className:W},H&&s.createElement("a",{className:U,href:k,ref:l,target:z},N,s.createElement(a,{size:v.XSmall,svgIcon:ae,color:w("blueberry",700),isHovered:u})),C&&s.createElement("button",{ref:i,className:O,"aria-label":d,onClick:h},d,s.createElement(a,{size:v.XSmall,svgIcon:S,color:w("blueberry",700),isHovered:_})))},D=()=>s.createElement("span",{className:e["service-message__content"]},!!g&&s.createElement("span",{className:e["service-message__content__info"]},g),!!b&&s.createElement("span",{className:e["service-message__content__info--smaller"]},b),s.createElement(q,null)),G=o({[e[`service-message__wrapper--${r}`]]:r,[e[`service-message__wrapper--${r}--expanded`]]:m&&r}),J=o(e["service-message__wrapper--inner"],e["service-message__content__wrapper"]),K=o(e["service-message__wrapper"],e["service-message__wrapper__btn"],{[e["service-message__wrapper__btn--width"]]:n,[e[`service-message__wrapper__border--${r}`]]:r,[e["service-message__wrapper__btn--expanded"]]:m,[e["service-message__wrapper__btn--first"]]:I,[e["service-message__wrapper__btn--not-first"]]:!I});return s.createElement("div",{className:G,role:M,...X},s.createElement(F,{className:K,onClick:L,"aria-expanded":n&&m,"data-testid":x},s.createElement(B,null)),s.createElement("div",{className:e["service-message__content--spacing"]},s.createElement("div",{className:J},n&&m&&s.createElement(D,null))))},$e=me;export{$e as default};
+//# sourceMappingURL=index.js.map

package/components/ServiceMessage/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/ServiceMessage/ServiceMessage.tsx"],"sourcesContent":["import React, { useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { breakpoints } from '../../theme/grid';\nimport { palette } from '../../theme/palette';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { AnchorLinkTargets } from '../AnchorLink';\nimport Icon, { IconSize } from '../Icons';\nimport CheckFill from '../Icons/CheckFill';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport ErrorSignFill from '../Icons/ErrorSignFill';\nimport Forward from '../Icons/Forward';\nimport InfoSignFill from '../Icons/InfoSignFill';\nimport TriangleX from '../Icons/TriangleX';\nimport X from '../Icons/X';\nimport { NotificationPanelVariants } from '../NotificationPanel';\n\nimport styles from './styles.module.scss';\n\nexport interface ServiceMessageProps {\n  /** Sets a label for the notification panel. */\n  label: string;\n  /** String displayed in service-message when expended*/\n  info?: string;\n  /** String displayed in service-message when expended, with a smaller font*/\n  extraInfo?: string;\n  /** function that runs on dismiss */\n  onDismiss?: () => void;\n  /** Allows for dismiss to be an option, also for ServiceMessage with only label as content */\n  dismissable?: boolean;\n  /** Makes expander be open from start. */\n  expanderOpenFromStart?: boolean;\n  /** Name that describes a url-link for the user*/\n  urlTitle?: string;\n  /** Url for further information*/\n  url?: string;\n  /** Sets target for the anchorlink to the url*/\n  target?: AnchorLinkTargets;\n  /** Text on close-button in service messages. */\n  closeBtnText?: string;\n  /** Changes the visual representation. */\n  variant?: NotificationPanelVariants;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** First of its type. Used to remove border-top */\n  first?: boolean;\n}\nconst ServiceMessage: React.FC<ServiceMessageProps> = ({\n  label,\n  dismissable = true,\n  onDismiss,\n  info,\n  extraInfo,\n  urlTitle,\n  url,\n  target = '_self',\n  closeBtnText = 'fjern melding',\n  first = false,\n  expanderOpenFromStart = false,\n  variant = 'alert',\n  testId,\n}: ServiceMessageProps) => {\n  const hasExpander = !!info || !!extraInfo;\n\n  const CustomTag = hasExpander ? 'button' : 'span';\n  const breakpoint = useBreakpoint();\n  const desktop = breakpoint < breakpoints.lg;\n  const iconSize = desktop ? IconSize.XSmall : IconSize.Small;\n  const uuid = useUuid();\n  const ariaRole = variant === 'alert' ? 'alert' : 'region';\n  const ariaLabelAttributes = getAriaLabelAttributes({ label, id: uuid });\n\n  const [isExpanded, setIsExpanded] = useState<boolean>(expanderOpenFromStart);\n\n  const variantToIconMap = {\n    info: <Icon svgIcon={InfoSignFill} color={palette.blueberry700} hoverColor={palette.blueberry700} size={iconSize} />,\n    warn: <Icon svgIcon={ErrorSignFill} color={palette.banana700} hoverColor={palette.banana700} size={iconSize} />,\n    alert: <Icon svgIcon={TriangleX} color={palette.cherry700} hoverColor={palette.cherry700} size={iconSize} />,\n    success: <Icon svgIcon={CheckFill} color={palette.kiwi900} hoverColor={palette.kiwi900} size={iconSize} />,\n  };\n  const topTowClasses = classNames(styles['service-message__top-row--container'], styles['service-message__wrapper--inner']);\n  const topTowCloseButtonClasses = classNames(\n    styles['service-message__bottom-row__button'],\n    styles['service-message__bottom-row__close-button--top']\n  );\n  const TopRow = (): JSX.Element => {\n    const hoverRefObject = useHover<HTMLButtonElement>();\n    const { isHovered, hoverRef } = hoverRefObject;\n    const xRef = useRef<HTMLButtonElement>(null);\n    const { isHovered: xRefIsHovered } = useHover(xRef);\n    return (\n      <span className={topTowClasses} ref={hoverRef}>\n        <span className={styles['service-message__icon--signal']}>{variantToIconMap[variant]}</span>\n        <h1 className={styles['service-message__label']} id={uuid}>\n          {label}\n        </h1>\n        {hasExpander && (\n          <span className={styles['service-message__icon--expander']}>\n            <Icon size={iconSize} svgIcon={isExpanded ? ChevronUp : ChevronDown} isHovered={isHovered} />\n          </span>\n        )}\n        {!hasExpander && dismissable && (\n          <button ref={xRef} className={topTowCloseButtonClasses} aria-label={closeBtnText} onClick={onDismiss}>\n            <Icon size={iconSize} svgIcon={X} color={getColor('blueberry', 700)} isHovered={xRefIsHovered} />\n          </button>\n        )}\n      </span>\n    );\n  };\n  const tagClicked = (): void => {\n    hasExpander && setIsExpanded(!isExpanded);\n  };\n\n  const anchorlinkClasses = classNames(\n    styles['service-message__bottom-row__button'],\n    styles['service-message__bottom-row__read-more-btn--spacing']\n  );\n  const urlField = !!url && !!urlTitle;\n  const closeButtonClasses = classNames(styles['service-message__bottom-row__button'], styles['service-message__bottom-row__close-button']);\n  const bottomRowClasses = classNames(styles['service-message__bottom-row'], {\n    [styles['service-message__bottom-row--only-close-button']]: !urlField,\n  });\n  const ButtonRow = (): JSX.Element => {\n    const readMoreRef = useRef<HTMLAnchorElement>(null);\n    const { isHovered: readMoreHoverRefIsHovered } = useHover(readMoreRef);\n    const xRef = useRef<HTMLButtonElement>(null);\n    const { isHovered: xRefIsHovered } = useHover(xRef);\n    return (\n      <div className={bottomRowClasses}>\n        {urlField && (\n          <a className={anchorlinkClasses} href={url} ref={readMoreRef} target={target}>\n            {urlTitle}\n            <Icon size={IconSize.XSmall} svgIcon={Forward} color={getColor('blueberry', 700)} isHovered={readMoreHoverRefIsHovered} />\n          </a>\n        )}\n\n        {dismissable && (\n          <button ref={xRef} className={closeButtonClasses} aria-label={closeBtnText} onClick={onDismiss}>\n            {closeBtnText}\n            <Icon size={IconSize.XSmall} svgIcon={X} color={getColor('blueberry', 700)} isHovered={xRefIsHovered} />\n          </button>\n        )}\n      </div>\n    );\n  };\n  const Content = (): JSX.Element => {\n    return (\n      <span className={styles['service-message__content']}>\n        {!!info && <span className={styles['service-message__content__info']}>{info}</span>}\n        {!!extraInfo && <span className={styles['service-message__content__info--smaller']}>{extraInfo}</span>}\n        <ButtonRow />\n      </span>\n    );\n  };\n  const backgroundClass = classNames({\n    [styles[`service-message__wrapper--${variant}`]]: variant,\n    [styles[`service-message__wrapper--${variant}--expanded`]]: isExpanded && variant,\n  });\n  const contentWrapperClasses = classNames(styles['service-message__wrapper--inner'], styles['service-message__content__wrapper']);\n  const wrapperClasses = classNames(styles['service-message__wrapper'], styles['service-message__wrapper__btn'], {\n    [styles['service-message__wrapper__btn--width']]: hasExpander,\n    [styles[`service-message__wrapper__border--${variant}`]]: variant,\n    [styles['service-message__wrapper__btn--expanded']]: isExpanded,\n    [styles['service-message__wrapper__btn--first']]: first,\n    [styles['service-message__wrapper__btn--not-first']]: !first,\n  });\n  return (\n    <div className={backgroundClass} role={ariaRole} {...ariaLabelAttributes}>\n      <CustomTag className={wrapperClasses} onClick={tagClicked} aria-expanded={hasExpander && isExpanded} data-testid={testId}>\n        <TopRow />\n      </CustomTag>\n      <div className={styles['service-message__content--spacing']}>\n        <div className={contentWrapperClasses}>{hasExpander && isExpanded && <Content />}</div>\n      </div>\n    </div>\n  );\n};\n\nexport default ServiceMessage;\n"],"names":["ServiceMessage","label","dismissable","onDismiss","info","extraInfo","urlTitle","url","target","closeBtnText","first","expanderOpenFromStart","variant","testId","hasExpander","CustomTag","iconSize","useBreakpoint","breakpoints","IconSize","uuid","useUuid","ariaRole","ariaLabelAttributes","getAriaLabelAttributes","isExpanded","setIsExpanded","useState","variantToIconMap","React","Icon","InfoSignFill","palette","ErrorSignFill","TriangleX","CheckFill","topTowClasses","classNames","styles","topTowCloseButtonClasses","TopRow","hoverRefObject","useHover","isHovered","hoverRef","xRef","useRef","xRefIsHovered","ChevronUp","ChevronDown","X","getColor","tagClicked","anchorlinkClasses","urlField","closeButtonClasses","bottomRowClasses","ButtonRow","readMoreRef","readMoreHoverRefIsHovered","Forward","Content","backgroundClass","contentWrapperClasses","wrapperClasses","ServiceMessage$1"],"mappings":"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"}

package/components/ServiceMessage/styles.module.scss

@@ -0,0 +1,319 @@
+@import '../../scss/spacers';
+@import '../../scss/palette';
+@import '../../scss/breakpoints';
+@import '../../scss/font-settings';
+@import '../../scss/grid';
+
+.service-message {
+  font-family: 'Source Sans Pro', Arial, Verdana, sans-serif;
+
+  &__wrapper {
+    padding: getSpacer(3xs) getSpacer(xs);
+
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      padding: getSpacer(2xs) getSpacer(l);
+    }
+
+    &--inner {
+      @media (min-width: map-get($grid-breakpoints, lg)) {
+        @include make-container;
+        @include make-container-max-widths;
+      }
+    }
+
+    &--success {
+      background-color: $kiwi50;
+
+      &:hover {
+        background-color: rgb(51 190 132 / 10%);
+      }
+
+      &--expanded {
+        border-bottom: 0.0625rem solid $kiwi900;
+      }
+    }
+
+    &--info {
+      background-color: $blueberry50;
+
+      &:hover {
+        background-color: rgb(24 128 151 / 10%);
+      }
+
+      &--expanded {
+        border-bottom: 0.0625rem solid $blueberry700;
+      }
+    }
+
+    &--warn {
+      background-color: $banana50;
+
+      &:hover {
+        background-color: rgb(221 171 6 / 10%);
+      }
+
+      &--expanded {
+        border-bottom: 0.0625rem solid $banana700;
+      }
+    }
+
+    &--alert {
+      background-color: $cherry50;
+
+      &:hover {
+        background-color: rgb(200 53 33 / 10%);
+      }
+
+      &--expanded {
+        border-bottom: 0.0625rem solid $cherry700;
+      }
+    }
+
+    &__border {
+      &--success {
+        border: 0.0625rem solid $kiwi900;
+      }
+
+      &--info {
+        border: 0.0625rem solid $blueberry700;
+      }
+
+      &--warn {
+        border: 0.0625rem solid $banana700;
+      }
+
+      &--alert {
+        border: 0.0625rem solid $cherry700;
+      }
+    }
+
+    &__btn {
+      background-color: transparent;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      &--width {
+        width: 100%;
+      }
+
+      &--not-first {
+        border-top-color: transparent;
+        border-right-color: transparent;
+        border-left-color: transparent;
+      }
+
+      &:focus {
+        border: none;
+        outline: 0.125rem solid #000;
+        outline-offset: -2px;
+
+        // offset colliding border.
+        margin-top: -1px;
+        padding-top: 0.375rem;
+        padding-bottom: 0.3125rem;
+
+        @media (min-width: map-get($grid-breakpoints, md)) {
+          padding-top: 0.625rem;
+          padding-bottom: 0.5625rem;
+        }
+      }
+
+      &--first {
+        border-right-color: transparent;
+        border-left-color: transparent;
+
+        @media (max-width: map-get($grid-breakpoints, lg)) {
+          border-top-color: transparent;
+        }
+
+        &:focus {
+          padding-top: 0.3125rem;
+          padding-bottom: 0.3125rem;
+          margin-top: 0;
+
+          @media (min-width: map-get($grid-breakpoints, md)) {
+            padding-top: 0.5625rem;
+            padding-bottom: 0.5625rem;
+          }
+        }
+      }
+
+      &--expanded {
+        border-bottom-color: transparent;
+      }
+    }
+  }
+
+  &__content {
+    display: block;
+    margin: 0 3.75rem;
+    font-size: $font-size-xs;
+    line-height: 1.25rem;
+    padding: getSpacer(3xs) 0 getSpacer(xs) 0;
+
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      margin: 0 getSpacer(4xl);
+    }
+
+    @media (min-width: map-get($grid-breakpoints, lg)) {
+      padding: getSpacer(2xs) 0 getSpacer(s) 0;
+      margin: 0 4.5625rem;
+    }
+
+    &__info {
+      display: block;
+      font-size: $font-size-xs;
+      line-height: 1.25rem;
+
+      @media (min-width: map-get($grid-breakpoints, lg)) {
+        padding-top: getSpacer(xs);
+        line-height: 1.625rem;
+        font-size: $font-size-sm;
+      }
+
+      &--smaller {
+        display: block;
+        font-size: 0.875rem;
+        padding-top: getSpacer(2xs);
+        line-height: 1.25rem;
+
+        @media (min-width: map-get($grid-breakpoints, lg)) {
+          padding-top: getSpacer(xs);
+          font-size: $font-size-xs;
+          line-height: $lineheight-size-xs;
+        }
+      }
+    }
+
+    &--spacing {
+      @media (min-width: map-get($grid-breakpoints, lg)) {
+        padding: 0 getSpacer(l);
+      }
+    }
+  }
+
+  &__icon {
+    &--signal {
+      display: flex;
+      align-items: center;
+      margin-right: getSpacer(2xs);
+
+      @media (min-width: map-get($grid-breakpoints, md)) {
+        margin-right: getSpacer(m);
+      }
+    }
+
+    &--expander {
+      margin-left: auto;
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  &__label {
+    text-align: left;
+    font-weight: 700;
+    font-size: $font-size-xs;
+    line-height: 1.25rem;
+
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      font-size: $font-size-sm;
+    }
+  }
+
+  &__top-row {
+    line-height: $lineheight-size-xs;
+    align-items: center;
+
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      font-size: $font-size-sm;
+      line-height: 1.25rem;
+    }
+
+    &--container {
+      display: flex;
+      width: 100%;
+      align-items: center;
+    }
+  }
+
+  &__bottom-row {
+    display: flex;
+    justify-content: space-between;
+    flex-flow: column wrap;
+    padding: getSpacer(2xs) 0 0 0;
+    gap: getSpacer(2xs);
+
+    @media (min-width: map-get($grid-breakpoints, sm)) {
+      flex-direction: row;
+    }
+
+    @media (min-width: map-get($grid-breakpoints, lg)) {
+      padding: getSpacer(s) 0 0 0;
+    }
+
+    &--only-close-button {
+      @media (min-width: map-get($grid-breakpoints, sm)) {
+        flex-direction: row-reverse;
+      }
+    }
+
+    &__button {
+      display: flex;
+      align-items: center;
+      border: none;
+      white-space: nowrap;
+      overflow: initial;
+      text-overflow: clip;
+      width: fit-content;
+      color: $blueberry700;
+      font-weight: 600;
+      font-size: $font-size-xs;
+      line-height: 1.25rem;
+      background-color: transparent;
+      text-decoration: none;
+      height: 2.375rem;
+
+      &:hover,
+      &:active {
+        background-color: rgb(88 170 187 / 10%);
+      }
+
+      &:focus {
+        box-shadow: 0 0 0 2px $black;
+        background-color: transparent;
+        border-radius: 0;
+        border: 0;
+        outline: none;
+      }
+
+      svg {
+        margin-left: getSpacer(xs);
+      }
+    }
+
+    &__close-button {
+      padding: 0;
+
+      @media (min-width: map-get($grid-max-breakpoints, xs)) {
+        padding: getSpacer(2xs);
+      }
+
+      &--top {
+        margin-left: auto;
+        padding: 0;
+
+        svg {
+          margin-left: 0;
+        }
+      }
+    }
+
+    &__read-more-btn {
+      &--spacing {
+        padding: 0;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,43 @@
+export type Styles = {
+  'service-message': string;
+  'service-message__bottom-row': string;
+  'service-message__bottom-row__button': string;
+  'service-message__bottom-row__close-button': string;
+  'service-message__bottom-row__close-button--top': string;
+  'service-message__bottom-row__read-more-btn--spacing': string;
+  'service-message__bottom-row--only-close-button': string;
+  'service-message__content': string;
+  'service-message__content__info': string;
+  'service-message__content__info--smaller': string;
+  'service-message__content--spacing': string;
+  'service-message__icon--expander': string;
+  'service-message__icon--signal': string;
+  'service-message__label': string;
+  'service-message__top-row': string;
+  'service-message__top-row--container': string;
+  'service-message__wrapper': string;
+  'service-message__wrapper__border--alert': string;
+  'service-message__wrapper__border--info': string;
+  'service-message__wrapper__border--success': string;
+  'service-message__wrapper__border--warn': string;
+  'service-message__wrapper__btn': string;
+  'service-message__wrapper__btn--expanded': string;
+  'service-message__wrapper__btn--first': string;
+  'service-message__wrapper__btn--not-first': string;
+  'service-message__wrapper__btn--width': string;
+  'service-message__wrapper--alert': string;
+  'service-message__wrapper--alert--expanded': string;
+  'service-message__wrapper--info': string;
+  'service-message__wrapper--info--expanded': string;
+  'service-message__wrapper--inner': string;
+  'service-message__wrapper--success': string;
+  'service-message__wrapper--success--expanded': string;
+  'service-message__wrapper--warn': string;
+  'service-message__wrapper--warn--expanded': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "description": "The official design system for Helsenorge built with React.",
   "homepage": "https://helsenorge.design",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "author": "Helsenorge",
   "license": "MIT",
   "peerDependencies": {