@helsenorge/designsystem-react 3.1.1 → 3.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +11 -3
- package/components/ServiceMessage/ServiceMessage.d.ts.map +1 -1
- package/components/ServiceMessage/index.js +1 -1
- package/components/ServiceMessage/index.js.map +1 -1
- package/components/ServiceMessage/styles.module.scss +5 -16
- package/components/ServiceMessage/styles.module.scss.d.ts +0 -2
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,11 @@
|
|
|
1
|
+
## [3.1.1](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv3.1.0&targetVersion=GTv3.1.1) (2023-03-30)
|
|
2
|
+
|
|
3
|
+
### Features
|
|
4
|
+
|
|
5
|
+
- service message
|
|
6
|
+
([fdbb1a6](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/fdbb1a6557c092eabc1c18ff2f7fb4515bf1b016)), closes
|
|
7
|
+
[#292736](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/292736)
|
|
8
|
+
|
|
1
9
|
## [3.1.0](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv3.0.2&targetVersion=GTv3.1.0) (2023-03-29)
|
|
2
10
|
|
|
3
11
|
## [3.0.2](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv3.0.1&targetVersion=GTv3.0.2) (2023-03-29)
|
|
@@ -681,12 +689,12 @@
|
|
|
681
689
|
|
|
682
690
|
### Bug Fixes
|
|
683
691
|
|
|
684
|
-
- panel har avstand fra tittel til badge
|
|
685
|
-
([09034c4](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/09034c4844408c7cfe8f65d7a1a0d82a7828c2ef)), closes
|
|
686
|
-
[#282359](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/282359)
|
|
687
692
|
- økt kontrast på understreking av lenker
|
|
688
693
|
([50b7fa4](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/50b7fa47fb44cb7d75fb877bd53e2309b35e1e21)), closes
|
|
689
694
|
[#229049](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/229049)
|
|
695
|
+
- panel har avstand fra tittel til badge
|
|
696
|
+
([09034c4](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/09034c4844408c7cfe8f65d7a1a0d82a7828c2ef)), closes
|
|
697
|
+
[#282359](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/282359)
|
|
690
698
|
|
|
691
699
|
## [1.2.2](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv1.2.1&targetVersion=GTv1.2.2) (2022-08-31)
|
|
692
700
|
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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,CAkIjD,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import e,{useState as Q,useRef as u}from"react";import o from"classnames";import{useBreakpoint as V}from"../../hooks/useBreakpoint.js";import{useHover as _}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 s 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:e.createElement(a,{svgIcon:ne,color:t.blueberry700,hoverColor:t.blueberry700,size:c}),warn:e.createElement(a,{svgIcon:te,color:t.banana700,hoverColor:t.banana700,size:c}),alert:e.createElement(a,{svgIcon:ce,color:t.cherry700,hoverColor:t.cherry700,size:c}),success:e.createElement(a,{svgIcon:se,color:t.kiwi900,hoverColor:t.kiwi900,size:c})},T=o(s["service-message__top-row--container"],s["service-message__wrapper--inner"]),j=o(s["service-message__bottom-row__button"],s["service-message__bottom-row__close-button--top"]),B=()=>{const l=_(),{isHovered:f,hoverRef:i}=l,p=u(null),{isHovered:P}=_(p);return e.createElement("span",{className:T,ref:i},e.createElement("span",{className:s["service-message__icon--signal"]},A[r]),e.createElement("h1",{className:s["service-message__label"],id:R},E),n&&e.createElement("span",{className:s["service-message__icon--expander"]},e.createElement(a,{size:c,svgIcon:m?oe:re,isHovered:f})),!n&&C&&e.createElement("button",{ref:p,className:j,"aria-label":d,onClick:h},e.createElement(a,{size:c,svgIcon:S,color:w("blueberry",700),isHovered:P})))},L=()=>{n&&$(!m)},U=o(s["service-message__bottom-row__button"]),H=!!k&&!!N,O=o(s["service-message__bottom-row__button"]),W=o(s["service-message__bottom-row"],{[s["service-message__bottom-row--only-close-button"]]:!H}),q=()=>{const l=u(null),{isHovered:f}=_(l),i=u(null),{isHovered:p}=_(i);return e.createElement("div",{className:W},H&&e.createElement("a",{className:U,href:k,ref:l,target:z},N,e.createElement(a,{size:v.XSmall,svgIcon:ae,color:w("blueberry",700),isHovered:f})),C&&e.createElement("button",{ref:i,className:O,"aria-label":d,onClick:h},d,e.createElement(a,{size:v.XSmall,svgIcon:S,color:w("blueberry",700),isHovered:p})))},D=()=>e.createElement("span",{className:s["service-message__content"]},!!g&&e.createElement("span",{className:s["service-message__content__info"]},g),!!b&&e.createElement("span",{className:s["service-message__content__info--smaller"]},b),e.createElement(q,null)),G=o({[s[`service-message__wrapper--${r}`]]:r,[s[`service-message__wrapper--${r}--expanded`]]:m&&r}),J=o(s["service-message__wrapper--inner"],s["service-message__content__wrapper"]),K=o(s["service-message__wrapper"],s["service-message__wrapper__btn"],{[s["service-message__wrapper__btn--width"]]:n,[s[`service-message__wrapper__border--${r}`]]:r,[s["service-message__wrapper__btn--expanded"]]:m,[s["service-message__wrapper__btn--first"]]:I,[s["service-message__wrapper__btn--not-first"]]:!I});return e.createElement("div",{className:G,role:M,...X},e.createElement(F,{className:K,onClick:L,"aria-expanded":n&&m,"data-testid":x},e.createElement(B,null)),n&&m&&e.createElement("div",{className:s["service-message__content--spacing"]},e.createElement("div",{className:J},e.createElement(D,null))))},$e=me;export{$e as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
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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"}
|
|
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(styles['service-message__bottom-row__button']);\n const urlField = !!url && !!urlTitle;\n const closeButtonClasses = classNames(styles['service-message__bottom-row__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 {hasExpander && isExpanded && (\n <div className={styles['service-message__content--spacing']}>\n <div className={contentWrapperClasses}>\n <Content />\n </div>\n </div>\n )}\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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"}
|
|
@@ -187,7 +187,10 @@
|
|
|
187
187
|
}
|
|
188
188
|
|
|
189
189
|
&--spacing {
|
|
190
|
+
margin-top: getSpacer(2xs);
|
|
191
|
+
|
|
190
192
|
@media (min-width: map-get($grid-breakpoints, lg)) {
|
|
193
|
+
margin-top: 0;
|
|
191
194
|
padding: 0 getSpacer(l);
|
|
192
195
|
}
|
|
193
196
|
}
|
|
@@ -263,9 +266,6 @@
|
|
|
263
266
|
display: flex;
|
|
264
267
|
align-items: center;
|
|
265
268
|
border: none;
|
|
266
|
-
white-space: nowrap;
|
|
267
|
-
overflow: initial;
|
|
268
|
-
text-overflow: clip;
|
|
269
269
|
width: fit-content;
|
|
270
270
|
color: $blueberry700;
|
|
271
271
|
font-weight: 600;
|
|
@@ -273,7 +273,8 @@
|
|
|
273
273
|
line-height: 1.25rem;
|
|
274
274
|
background-color: transparent;
|
|
275
275
|
text-decoration: none;
|
|
276
|
-
|
|
276
|
+
padding: 0.5rem;
|
|
277
|
+
margin-left: -0.5rem;
|
|
277
278
|
|
|
278
279
|
&:hover,
|
|
279
280
|
&:active {
|
|
@@ -294,12 +295,6 @@
|
|
|
294
295
|
}
|
|
295
296
|
|
|
296
297
|
&__close-button {
|
|
297
|
-
padding: 0;
|
|
298
|
-
|
|
299
|
-
@media (min-width: map-get($grid-max-breakpoints, xs)) {
|
|
300
|
-
padding: getSpacer(2xs);
|
|
301
|
-
}
|
|
302
|
-
|
|
303
298
|
&--top {
|
|
304
299
|
margin-left: auto;
|
|
305
300
|
padding: 0;
|
|
@@ -309,11 +304,5 @@
|
|
|
309
304
|
}
|
|
310
305
|
}
|
|
311
306
|
}
|
|
312
|
-
|
|
313
|
-
&__read-more-btn {
|
|
314
|
-
&--spacing {
|
|
315
|
-
padding: 0;
|
|
316
|
-
}
|
|
317
|
-
}
|
|
318
307
|
}
|
|
319
308
|
}
|
|
@@ -2,9 +2,7 @@ export type Styles = {
|
|
|
2
2
|
'service-message': string;
|
|
3
3
|
'service-message__bottom-row': string;
|
|
4
4
|
'service-message__bottom-row__button': string;
|
|
5
|
-
'service-message__bottom-row__close-button': string;
|
|
6
5
|
'service-message__bottom-row__close-button--top': string;
|
|
7
|
-
'service-message__bottom-row__read-more-btn--spacing': string;
|
|
8
6
|
'service-message__bottom-row--only-close-button': string;
|
|
9
7
|
'service-message__content': string;
|
|
10
8
|
'service-message__content__info': string;
|
package/package.json
CHANGED