@helsenorge/designsystem-react 14.5.1 → 14.6.0
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/lib/CHANGELOG.md +14 -0
- package/lib/components/Dropdown/styles.module.scss +4 -4
- package/lib/components/Highlighter/styles.module.scss +1 -1
- package/lib/components/Icons/HTMLFile.js +3 -11
- package/lib/components/Icons/HTMLFile.js.map +1 -1
- package/lib/components/NotificationPanel/NotificationPanel.d.ts +1 -1
- package/lib/components/NotificationPanel/index.js +1 -1
- package/lib/components/NotificationPanel/index.js.map +1 -1
- package/package.json +1 -1
package/lib/CHANGELOG.md
CHANGED
|
@@ -1,4 +1,18 @@
|
|
|
1
1
|
|
|
2
|
+
## [14.6.0](https://github.com/helsenorge/designsystem/compare/v14.5.1...v14.6.0) (2026-04-30)
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* **highlighter:** legg til semibold ([5df732d](https://github.com/helsenorge/designsystem/commit/5df732d9d931794a8413682b10b00852bcd806e4)), closes [#376890](https://github.com/helsenorge/designsystem/issues/376890)
|
|
7
|
+
* **icon:** nytt ikon for html file ([50ceb7c](https://github.com/helsenorge/designsystem/commit/50ceb7cb48247ed38ad73bd702f7a768f7eb5d5a)), closes [#376670](https://github.com/helsenorge/designsystem/issues/376670)
|
|
8
|
+
* **lightbox:** legg på dropshadow på knapper ved hover og focus ([35e6f97](https://github.com/helsenorge/designsystem/commit/35e6f97dca8c164466f3e17e39ddcf90382b07b6)), closes [#376430](https://github.com/helsenorge/designsystem/issues/376430)
|
|
9
|
+
* **notificationpanel:** legg til mulighet for role none ([ce1d030](https://github.com/helsenorge/designsystem/commit/ce1d0302266b52ec1fe55abae80c51c12a25cd24)), closes [#375231](https://github.com/helsenorge/designsystem/issues/375231)
|
|
10
|
+
|
|
11
|
+
### Bug Fixes
|
|
12
|
+
|
|
13
|
+
* **datepicker:** legg på bakgrunnsfarge ([6d2857b](https://github.com/helsenorge/designsystem/commit/6d2857b3dad47bb11862a157eae573e92633e714)), closes [#376737](https://github.com/helsenorge/designsystem/issues/376737)
|
|
14
|
+
* **dropdown:** ikke ha hoverstyling på disabled trigger ([0861b10](https://github.com/helsenorge/designsystem/commit/0861b10b3a828062e2ecf7bb923aac14ecc61da0)), closes [#373943](https://github.com/helsenorge/designsystem/issues/373943)
|
|
15
|
+
|
|
2
16
|
## [14.5.1](https://github.com/helsenorge/designsystem/compare/v14.5.0...v14.5.1) (2026-04-24)
|
|
3
17
|
|
|
4
18
|
### Bug Fixes
|
|
@@ -24,11 +24,11 @@
|
|
|
24
24
|
border-color: var(--color-base-border-onlight-emphasized);
|
|
25
25
|
background-color: var(--core-color-white);
|
|
26
26
|
|
|
27
|
-
&:hover {
|
|
27
|
+
&:hover:not(:disabled) {
|
|
28
28
|
background-color: var(--color-base-background-neutral);
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
-
&:active {
|
|
31
|
+
&:active:not(:disabled) {
|
|
32
32
|
background-color: var(--core-color-neutral-100);
|
|
33
33
|
}
|
|
34
34
|
|
|
@@ -65,11 +65,11 @@
|
|
|
65
65
|
&--borderless {
|
|
66
66
|
background-color: transparent;
|
|
67
67
|
|
|
68
|
-
&:hover {
|
|
68
|
+
&:hover:not(:disabled) {
|
|
69
69
|
background-color: var(--core-color-neutral-100);
|
|
70
70
|
}
|
|
71
71
|
|
|
72
|
-
&:active {
|
|
72
|
+
&:active:not(:disabled) {
|
|
73
73
|
background-color: var(--core-color-neutral-200);
|
|
74
74
|
}
|
|
75
75
|
}
|
|
@@ -1,19 +1,11 @@
|
|
|
1
1
|
import { t as getIcon } from "../../utils.js";
|
|
2
|
-
import {
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
var HTMLFile = ({ size, isHovered }) => {
|
|
4
4
|
return getIcon({
|
|
5
5
|
size,
|
|
6
6
|
isHovered,
|
|
7
|
-
normal: /* @__PURE__ */
|
|
8
|
-
|
|
9
|
-
d: "M10 7v34h27.6V7H10Zm26.35 1.25h-25.1v31.5h25.1V8.25Z",
|
|
10
|
-
clipRule: "evenodd"
|
|
11
|
-
})] }),
|
|
12
|
-
normalHover: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", { d: "m19.565 22.235-2.292-2.292 2.292-2.292-.707-.707-2.999 3 2.999 2.998.707-.707Zm12.178-2.292-2.998 3-.707-.708 2.291-2.292-2.291-2.292.707-.707 2.998 3Zm2.052 12.441V33h-3.112v-4.722h.75v4.106h2.362Zm-8.377-4.106h-.968V33h.745v-1.63l-.076-2.139L26.727 33h.547l1.612-3.779-.076 2.15V33h.75v-4.722h-.977l-1.58 3.692-1.585-3.692Zm-3.323.62V33h-.746v-4.102H19.74v-.62h3.972v.62h-1.617Zm-3.834 1.463v-2.083h.75V33h-.75v-2.018h-2.448V33h-.75v-4.722h.75v2.083h2.448Z" }), /* @__PURE__ */ jsx("path", {
|
|
13
|
-
fillRule: "evenodd",
|
|
14
|
-
d: "M10 7v34.016h27.6V7H10Zm26.35 1.25h-25.1v31.516h25.1V8.25Z",
|
|
15
|
-
clipRule: "evenodd"
|
|
16
|
-
})] })
|
|
7
|
+
normal: /* @__PURE__ */ jsx("path", { d: "M37.6 41H10V7h27.6v34Zm-26.35-1.25h25.1V8.25h-25.1v31.5Zm4.563-9.389h2.448v-2.083h.75V33h-.75v-2.019h-2.447V33h-.75v-4.722h.75v2.083Zm7.899-1.463h-1.617V33h-.745v-4.102h-1.61v-.62h3.972v.62Zm3.29 3.073 1.581-3.693h.978V33h-.75v-1.63l.075-2.151L27.274 33h-.547l-1.608-3.769.076 2.14V33h-.746v-4.722h.969l1.585 3.693Zm4.43.413h2.363V33h-3.112v-4.722h.75v4.106ZM21.886 15.78v9.2h-7.042v-9.2h7.042Zm10.873 8.889H24.59v-1h8.167v1ZM15.843 16.78v7.2h5.042v-7.2h-5.042Zm16.915 4.1H24.59v-1h8.167v1Zm0-3.79-8.167.003v-.998l8.167-.002v.998Z" }),
|
|
8
|
+
normalHover: /* @__PURE__ */ jsx("path", { d: "M37.6 41H10V7h27.6v34Zm-26.35-1.25h25.1V8.25h-25.1v31.5Zm4.563-9.389h2.448v-2.083h.75V33h-.75v-2.019h-2.447V33h-.75v-4.722h.75v2.083Zm7.899-1.463h-1.617V33h-.745v-4.102h-1.61v-.62h3.972v.62Zm3.29 3.073 1.581-3.693h.977V33h-.75v-1.629l.076-2.152L27.274 33h-.547l-1.608-3.769.076 2.14V33h-.746v-4.722h.969l1.585 3.693Zm4.43.413h2.363V33h-3.112v-4.722h.75v4.106Zm-8.55-16.604v9.2h-8.04v-9.2h8.04Zm9.876 8.889h-7.17v-1h7.17v1ZM15.843 16.78v7.2h6.04v-7.2h-6.04Zm16.915 4.1h-7.17v-1h7.17v1Zm0-3.79-7.17.003v-.998l7.17-.002v.998Z" })
|
|
17
9
|
});
|
|
18
10
|
};
|
|
19
11
|
var HTMLFile_default = HTMLFile;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HTMLFile.js","names":["HTMLFile: React.FC<SvgPathProps>"],"sources":["../../../src/components/Icons/HTMLFile.tsx"],"sourcesContent":["import type { SvgPathProps } from '../Icon';\n\nimport { getIcon } from '../Icon/utils';\n\nconst HTMLFile: React.FC<SvgPathProps> = ({ size, isHovered }: SvgPathProps): React.ReactElement => {\n const normal = (\n
|
|
1
|
+
{"version":3,"file":"HTMLFile.js","names":["HTMLFile: React.FC<SvgPathProps>"],"sources":["../../../src/components/Icons/HTMLFile.tsx"],"sourcesContent":["import type { SvgPathProps } from '../Icon';\n\nimport { getIcon } from '../Icon/utils';\n\nconst HTMLFile: React.FC<SvgPathProps> = ({ size, isHovered }: SvgPathProps): React.ReactElement => {\n const normal = (\n <path d=\"M37.6 41H10V7h27.6v34Zm-26.35-1.25h25.1V8.25h-25.1v31.5Zm4.563-9.389h2.448v-2.083h.75V33h-.75v-2.019h-2.447V33h-.75v-4.722h.75v2.083Zm7.899-1.463h-1.617V33h-.745v-4.102h-1.61v-.62h3.972v.62Zm3.29 3.073 1.581-3.693h.978V33h-.75v-1.63l.075-2.151L27.274 33h-.547l-1.608-3.769.076 2.14V33h-.746v-4.722h.969l1.585 3.693Zm4.43.413h2.363V33h-3.112v-4.722h.75v4.106ZM21.886 15.78v9.2h-7.042v-9.2h7.042Zm10.873 8.889H24.59v-1h8.167v1ZM15.843 16.78v7.2h5.042v-7.2h-5.042Zm16.915 4.1H24.59v-1h8.167v1Zm0-3.79-8.167.003v-.998l8.167-.002v.998Z\" />\n );\n\n const normalHover = (\n <path d=\"M37.6 41H10V7h27.6v34Zm-26.35-1.25h25.1V8.25h-25.1v31.5Zm4.563-9.389h2.448v-2.083h.75V33h-.75v-2.019h-2.447V33h-.75v-4.722h.75v2.083Zm7.899-1.463h-1.617V33h-.745v-4.102h-1.61v-.62h3.972v.62Zm3.29 3.073 1.581-3.693h.977V33h-.75v-1.629l.076-2.152L27.274 33h-.547l-1.608-3.769.076 2.14V33h-.746v-4.722h.969l1.585 3.693Zm4.43.413h2.363V33h-3.112v-4.722h.75v4.106Zm-8.55-16.604v9.2h-8.04v-9.2h8.04Zm9.876 8.889h-7.17v-1h7.17v1ZM15.843 16.78v7.2h6.04v-7.2h-6.04Zm16.915 4.1h-7.17v-1h7.17v1Zm0-3.79-7.17.003v-.998l7.17-.002v.998Z\" />\n );\n\n return getIcon({ size, isHovered, normal, normalHover });\n};\n\nexport default HTMLFile;\n"],"mappings":";;AAIA,IAAMA,YAAoC,EAAE,MAAM,gBAAkD;AASlG,QAAO,QAAQ;EAAE;EAAM;EAAW,QAPhC,oBAAC,QAAA,EAAK,GAAE,shBAAA,CAAuhB;EAOvf,aAHxC,oBAAC,QAAA,EAAK,GAAE,8gBAAA,CAA+gB;EAGle,CAAC;;AAG1D,IAAA,mBAAe"}
|
|
@@ -37,7 +37,7 @@ export interface NotificationPanelProps {
|
|
|
37
37
|
/** Custom id for the label */
|
|
38
38
|
labelId?: string;
|
|
39
39
|
/** Custom role for the panel. Default is no role. If variant is alert or crisis, the aria role will be set to "alert" unless the role-prop is also set. */
|
|
40
|
-
role?: 'region' | 'alert' | 'status';
|
|
40
|
+
role?: 'region' | 'alert' | 'status' | 'none';
|
|
41
41
|
/** Sets the data-testid attribute. */
|
|
42
42
|
testId?: string;
|
|
43
43
|
/** Ref passed to the component */
|
|
@@ -65,7 +65,7 @@ var NotificationPanel = (props) => {
|
|
|
65
65
|
[styles["notification-panel--dismissable"]]: dismissable
|
|
66
66
|
}, className);
|
|
67
67
|
const ariaRole = role || variant === "error" && "alert" || void 0;
|
|
68
|
-
const ariaLabelAttributes = ariaRole ? getAriaLabelAttributes({
|
|
68
|
+
const ariaLabelAttributes = ariaRole && ariaRole !== "none" ? getAriaLabelAttributes({
|
|
69
69
|
label,
|
|
70
70
|
id: labelId
|
|
71
71
|
}) : void 0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["FluidWrapper: React.FC<WrapFluidProps>","NotificationPanel: React.FC<NotificationPanelProps>"],"sources":["../../../src/components/NotificationPanel/NotificationPanel.tsx","../../../src/components/NotificationPanel/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport NotificationBadge from '../Badge/NotificationBadge';\nimport Close from '../Close';\nimport Expander from '../Expander';\n\nimport styles from './styles.module.scss';\n\nexport type NotificationPanelVariants = 'info' | 'warn' | 'error' | 'success';\nexport type NotificationCompactVariants = 'basic' | 'outline';\nexport type NotificationPanelSizes = 'small' | 'medium' | 'large';\nexport type LabelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'span';\n\nexport interface NotificationPanelProps {\n /** Adds custom classes to the element. */\n className?: string;\n /** Adds inner child elements. */\n children?: React.ReactNode;\n /** Adds inner expander elements. */\n expanderChildren?: React.ReactNode;\n /** Text for expanderButton. */\n expanderButtonText?: string;\n /** Text for expanderButton when closed. */\n expanderButtonClosedText?: string;\n /** Makes expander be open from start. */\n expanderOpenFromStart?: boolean;\n /** Changes the visual representation of the notification panel. */\n variant?: NotificationPanelVariants;\n /** Makes the panel more compact. Available in basic and outline. */\n compactVariant?: NotificationCompactVariants;\n /** Sets a fixed size for the content container. */\n size?: NotificationPanelSizes;\n /** Used in combination with dismissiable property to close the notification panel. */\n onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n /** Toggles the close button in the top right corner. */\n dismissable?: boolean;\n /** Enables a fluid outer container that spans the entire width of parent. */\n fluid?: boolean;\n /** Sets a label for the notification panel. */\n label?: string;\n /** Changes the underlying element of the label. */\n labelHtmlMarkup?: LabelTags;\n /** Close button aria-label */\n ariaLabelCloseBtn?: string;\n /** Custom id for the label */\n labelId?: string;\n /** Custom role for the panel. Default is no role. If variant is alert or crisis, the aria role will be set to \"alert\" unless the role-prop is also set. */\n role?: 'region' | 'alert' | 'status';\n /** Sets the data-testid attribute. */\n testId?: string;\n /** Ref passed to the component */\n ref?: React.Ref<HTMLDivElement | null>;\n}\n\ntype WrapFluidProps = Pick<NotificationPanelProps, 'fluid'> & {\n children: React.ReactElement;\n};\n\nconst FluidWrapper: React.FC<WrapFluidProps> = ({ fluid, children }) => {\n if (fluid) {\n const fluidClasses = classNames(styles['fluid-wrapper']);\n\n return <div className={fluidClasses}>{children}</div>;\n }\n return children;\n};\n\nconst NotificationPanel: React.FC<NotificationPanelProps> = props => {\n const {\n children,\n variant = 'info',\n dismissable = false,\n onClick,\n expanderChildren,\n expanderButtonText,\n expanderButtonClosedText,\n expanderOpenFromStart = false,\n compactVariant,\n label,\n labelId: labelIdProp,\n labelHtmlMarkup = 'h1',\n fluid = false,\n size,\n className,\n role,\n testId,\n ref,\n } = props;\n const labelId = useIdWithFallback(labelIdProp);\n const [expanderOpen, setExpanderOpen] = React.useState(expanderOpenFromStart);\n const isMobile = useIsMobileBreakpoint();\n\n const renderContent = (): React.ReactNode => {\n const outlineVariant = compactVariant === 'outline';\n const contentClasses = classNames(styles['notification-panel__content']);\n const labelClasses = classNames(styles['notification-panel__label'], {\n [styles['notification-panel__label--no-content']]: !children && !expanderChildren,\n [styles['notification-panel__label--compact']]: !!compactVariant,\n [styles['notification-panel__label--outline']]: outlineVariant,\n });\n const childrenClasses = classNames(styles['notification-panel__children'], {\n [styles['notification-panel__children--with-label']]: label,\n [styles['notification-panel__children--expander-no-label']]: expanderChildren && !label,\n [styles['notification-panel__children--outline']]: outlineVariant,\n });\n const CustomTag = labelHtmlMarkup;\n\n return (\n <div className={contentClasses} id={!label ? labelId : undefined}>\n {label && (\n <CustomTag className={labelClasses} id={labelId}>\n {label}\n </CustomTag>\n )}\n {children && <div className={childrenClasses}>{children}</div>}\n {expanderChildren && expanderButtonText && expanderButtonClosedText && !compactVariant && (\n <Expander\n title={expanderOpen ? expanderButtonText : expanderButtonClosedText}\n onExpand={setExpanderOpen}\n expanded={expanderOpen}\n testId=\"expand\"\n >\n {expanderChildren}\n </Expander>\n )}\n </div>\n );\n };\n\n const notificationPanelClasses = classNames(\n styles['notification-panel'],\n styles[`notification-panel--${variant}`],\n size && styles[`notification-panel--${size}`],\n {\n [styles['notification-panel--compact']]: !!compactVariant,\n [styles['notification-panel--compact--basic']]: compactVariant === 'basic',\n [styles['notification-panel--compact--outline']]: compactVariant === 'outline',\n [styles['notification-panel--with-content']]: expanderChildren || (label && children),\n [styles['notification-panel--dismissable']]: dismissable,\n },\n className\n );\n\n const ariaRole = role || (variant === 'error' && 'alert') || undefined;\n const ariaLabelAttributes = ariaRole ? getAriaLabelAttributes({ label, id: labelId }) : undefined;\n\n return (\n <FluidWrapper fluid={fluid}>\n <div\n ref={ref}\n role={ariaRole}\n data-testid={testId}\n data-analyticsid={AnalyticsId.NotificationPanel}\n className={notificationPanelClasses}\n {...ariaLabelAttributes}\n >\n <NotificationBadge\n variant={variant}\n size={compactVariant || isMobile ? IconSize.XSmall : IconSize.Small}\n className={styles['notification-panel__icon']}\n />\n {dismissable && (\n <span className={styles['notification-panel__close']}>\n <Close ariaLabel={props.ariaLabelCloseBtn} onClick={onClick} color=\"black\" />\n </span>\n )}\n {renderContent()}\n </div>\n </FluidWrapper>\n );\n};\n\nexport default NotificationPanel;\n","import NotificationPanel from './NotificationPanel';\nexport * from './NotificationPanel';\nexport default NotificationPanel;\n"],"mappings":";;;;;;;;;;;AAgEA,IAAMA,gBAA0C,EAAE,OAAO,eAAe;AACtE,KAAI,MAGF,QAAO,oBAAC,OAAA;EAAI,WAFS,WAAW,OAAO,iBAAiB;EAElB;GAAe;AAEvD,QAAO;;AAGT,IAAMC,qBAAsD,UAAS;CACnE,MAAM,EACJ,UACA,UAAU,QACV,cAAc,OACd,SACA,kBACA,oBACA,0BACA,wBAAwB,OACxB,gBACA,OACA,SAAS,aACT,kBAAkB,MAClB,QAAQ,OACR,MACA,WACA,MACA,QACA,QACE;CACJ,MAAM,UAAU,kBAAkB,YAAY;CAC9C,MAAM,CAAC,cAAc,mBAAmB,MAAM,SAAS,sBAAsB;CAC7E,MAAM,WAAW,uBAAuB;CAExC,MAAM,sBAAuC;EAC3C,MAAM,iBAAiB,mBAAmB;EAC1C,MAAM,iBAAiB,WAAW,OAAO,+BAA+B;EACxE,MAAM,eAAe,WAAW,OAAO,8BAA8B;IAClE,OAAO,2CAA2C,CAAC,YAAY,CAAC;IAChE,OAAO,wCAAwC,CAAC,CAAC;IACjD,OAAO,wCAAwC;GACjD,CAAC;EACF,MAAM,kBAAkB,WAAW,OAAO,iCAAiC;IACxE,OAAO,8CAA8C;IACrD,OAAO,qDAAqD,oBAAoB,CAAC;IACjF,OAAO,2CAA2C;GACpD,CAAC;AAGF,SACE,qBAAC,OAAA;GAAI,WAAW;GAAgB,IAAI,CAAC,QAAQ,UAAU,KAAA;;IACpD,SACC,oBALY,iBAKX;KAAU,WAAW;KAAc,IAAI;eACrC;MACS;IAEb,YAAY,oBAAC,OAAA;KAAI,WAAW;KAAkB;MAAe;IAC7D,oBAAoB,sBAAsB,4BAA4B,CAAC,kBACtE,oBAAC,kBAAA;KACC,OAAO,eAAe,qBAAqB;KAC3C,UAAU;KACV,UAAU;KACV,QAAO;eAEN;MACQ;;IAET;;CAIV,MAAM,2BAA2B,WAC/B,OAAO,uBACP,OAAO,uBAAuB,YAC9B,QAAQ,OAAO,uBAAuB,SACtC;GACG,OAAO,iCAAiC,CAAC,CAAC;GAC1C,OAAO,wCAAwC,mBAAmB;GAClE,OAAO,0CAA0C,mBAAmB;GACpE,OAAO,sCAAsC,oBAAqB,SAAS;GAC3E,OAAO,qCAAqC;EAC9C,EACD,UACD;CAED,MAAM,WAAW,QAAS,YAAY,WAAW,WAAY,KAAA;CAC7D,MAAM,sBAAsB,
|
|
1
|
+
{"version":3,"file":"index.js","names":["FluidWrapper: React.FC<WrapFluidProps>","NotificationPanel: React.FC<NotificationPanelProps>"],"sources":["../../../src/components/NotificationPanel/NotificationPanel.tsx","../../../src/components/NotificationPanel/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport NotificationBadge from '../Badge/NotificationBadge';\nimport Close from '../Close';\nimport Expander from '../Expander';\n\nimport styles from './styles.module.scss';\n\nexport type NotificationPanelVariants = 'info' | 'warn' | 'error' | 'success';\nexport type NotificationCompactVariants = 'basic' | 'outline';\nexport type NotificationPanelSizes = 'small' | 'medium' | 'large';\nexport type LabelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'span';\n\nexport interface NotificationPanelProps {\n /** Adds custom classes to the element. */\n className?: string;\n /** Adds inner child elements. */\n children?: React.ReactNode;\n /** Adds inner expander elements. */\n expanderChildren?: React.ReactNode;\n /** Text for expanderButton. */\n expanderButtonText?: string;\n /** Text for expanderButton when closed. */\n expanderButtonClosedText?: string;\n /** Makes expander be open from start. */\n expanderOpenFromStart?: boolean;\n /** Changes the visual representation of the notification panel. */\n variant?: NotificationPanelVariants;\n /** Makes the panel more compact. Available in basic and outline. */\n compactVariant?: NotificationCompactVariants;\n /** Sets a fixed size for the content container. */\n size?: NotificationPanelSizes;\n /** Used in combination with dismissiable property to close the notification panel. */\n onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n /** Toggles the close button in the top right corner. */\n dismissable?: boolean;\n /** Enables a fluid outer container that spans the entire width of parent. */\n fluid?: boolean;\n /** Sets a label for the notification panel. */\n label?: string;\n /** Changes the underlying element of the label. */\n labelHtmlMarkup?: LabelTags;\n /** Close button aria-label */\n ariaLabelCloseBtn?: string;\n /** Custom id for the label */\n labelId?: string;\n /** Custom role for the panel. Default is no role. If variant is alert or crisis, the aria role will be set to \"alert\" unless the role-prop is also set. */\n role?: 'region' | 'alert' | 'status' | 'none';\n /** Sets the data-testid attribute. */\n testId?: string;\n /** Ref passed to the component */\n ref?: React.Ref<HTMLDivElement | null>;\n}\n\ntype WrapFluidProps = Pick<NotificationPanelProps, 'fluid'> & {\n children: React.ReactElement;\n};\n\nconst FluidWrapper: React.FC<WrapFluidProps> = ({ fluid, children }) => {\n if (fluid) {\n const fluidClasses = classNames(styles['fluid-wrapper']);\n\n return <div className={fluidClasses}>{children}</div>;\n }\n return children;\n};\n\nconst NotificationPanel: React.FC<NotificationPanelProps> = props => {\n const {\n children,\n variant = 'info',\n dismissable = false,\n onClick,\n expanderChildren,\n expanderButtonText,\n expanderButtonClosedText,\n expanderOpenFromStart = false,\n compactVariant,\n label,\n labelId: labelIdProp,\n labelHtmlMarkup = 'h1',\n fluid = false,\n size,\n className,\n role,\n testId,\n ref,\n } = props;\n const labelId = useIdWithFallback(labelIdProp);\n const [expanderOpen, setExpanderOpen] = React.useState(expanderOpenFromStart);\n const isMobile = useIsMobileBreakpoint();\n\n const renderContent = (): React.ReactNode => {\n const outlineVariant = compactVariant === 'outline';\n const contentClasses = classNames(styles['notification-panel__content']);\n const labelClasses = classNames(styles['notification-panel__label'], {\n [styles['notification-panel__label--no-content']]: !children && !expanderChildren,\n [styles['notification-panel__label--compact']]: !!compactVariant,\n [styles['notification-panel__label--outline']]: outlineVariant,\n });\n const childrenClasses = classNames(styles['notification-panel__children'], {\n [styles['notification-panel__children--with-label']]: label,\n [styles['notification-panel__children--expander-no-label']]: expanderChildren && !label,\n [styles['notification-panel__children--outline']]: outlineVariant,\n });\n const CustomTag = labelHtmlMarkup;\n\n return (\n <div className={contentClasses} id={!label ? labelId : undefined}>\n {label && (\n <CustomTag className={labelClasses} id={labelId}>\n {label}\n </CustomTag>\n )}\n {children && <div className={childrenClasses}>{children}</div>}\n {expanderChildren && expanderButtonText && expanderButtonClosedText && !compactVariant && (\n <Expander\n title={expanderOpen ? expanderButtonText : expanderButtonClosedText}\n onExpand={setExpanderOpen}\n expanded={expanderOpen}\n testId=\"expand\"\n >\n {expanderChildren}\n </Expander>\n )}\n </div>\n );\n };\n\n const notificationPanelClasses = classNames(\n styles['notification-panel'],\n styles[`notification-panel--${variant}`],\n size && styles[`notification-panel--${size}`],\n {\n [styles['notification-panel--compact']]: !!compactVariant,\n [styles['notification-panel--compact--basic']]: compactVariant === 'basic',\n [styles['notification-panel--compact--outline']]: compactVariant === 'outline',\n [styles['notification-panel--with-content']]: expanderChildren || (label && children),\n [styles['notification-panel--dismissable']]: dismissable,\n },\n className\n );\n\n const ariaRole = role || (variant === 'error' && 'alert') || undefined;\n const ariaLabelAttributes = ariaRole && ariaRole !== 'none' ? getAriaLabelAttributes({ label, id: labelId }) : undefined;\n\n return (\n <FluidWrapper fluid={fluid}>\n <div\n ref={ref}\n role={ariaRole}\n data-testid={testId}\n data-analyticsid={AnalyticsId.NotificationPanel}\n className={notificationPanelClasses}\n {...ariaLabelAttributes}\n >\n <NotificationBadge\n variant={variant}\n size={compactVariant || isMobile ? IconSize.XSmall : IconSize.Small}\n className={styles['notification-panel__icon']}\n />\n {dismissable && (\n <span className={styles['notification-panel__close']}>\n <Close ariaLabel={props.ariaLabelCloseBtn} onClick={onClick} color=\"black\" />\n </span>\n )}\n {renderContent()}\n </div>\n </FluidWrapper>\n );\n};\n\nexport default NotificationPanel;\n","import NotificationPanel from './NotificationPanel';\nexport * from './NotificationPanel';\nexport default NotificationPanel;\n"],"mappings":";;;;;;;;;;;AAgEA,IAAMA,gBAA0C,EAAE,OAAO,eAAe;AACtE,KAAI,MAGF,QAAO,oBAAC,OAAA;EAAI,WAFS,WAAW,OAAO,iBAAiB;EAElB;GAAe;AAEvD,QAAO;;AAGT,IAAMC,qBAAsD,UAAS;CACnE,MAAM,EACJ,UACA,UAAU,QACV,cAAc,OACd,SACA,kBACA,oBACA,0BACA,wBAAwB,OACxB,gBACA,OACA,SAAS,aACT,kBAAkB,MAClB,QAAQ,OACR,MACA,WACA,MACA,QACA,QACE;CACJ,MAAM,UAAU,kBAAkB,YAAY;CAC9C,MAAM,CAAC,cAAc,mBAAmB,MAAM,SAAS,sBAAsB;CAC7E,MAAM,WAAW,uBAAuB;CAExC,MAAM,sBAAuC;EAC3C,MAAM,iBAAiB,mBAAmB;EAC1C,MAAM,iBAAiB,WAAW,OAAO,+BAA+B;EACxE,MAAM,eAAe,WAAW,OAAO,8BAA8B;IAClE,OAAO,2CAA2C,CAAC,YAAY,CAAC;IAChE,OAAO,wCAAwC,CAAC,CAAC;IACjD,OAAO,wCAAwC;GACjD,CAAC;EACF,MAAM,kBAAkB,WAAW,OAAO,iCAAiC;IACxE,OAAO,8CAA8C;IACrD,OAAO,qDAAqD,oBAAoB,CAAC;IACjF,OAAO,2CAA2C;GACpD,CAAC;AAGF,SACE,qBAAC,OAAA;GAAI,WAAW;GAAgB,IAAI,CAAC,QAAQ,UAAU,KAAA;;IACpD,SACC,oBALY,iBAKX;KAAU,WAAW;KAAc,IAAI;eACrC;MACS;IAEb,YAAY,oBAAC,OAAA;KAAI,WAAW;KAAkB;MAAe;IAC7D,oBAAoB,sBAAsB,4BAA4B,CAAC,kBACtE,oBAAC,kBAAA;KACC,OAAO,eAAe,qBAAqB;KAC3C,UAAU;KACV,UAAU;KACV,QAAO;eAEN;MACQ;;IAET;;CAIV,MAAM,2BAA2B,WAC/B,OAAO,uBACP,OAAO,uBAAuB,YAC9B,QAAQ,OAAO,uBAAuB,SACtC;GACG,OAAO,iCAAiC,CAAC,CAAC;GAC1C,OAAO,wCAAwC,mBAAmB;GAClE,OAAO,0CAA0C,mBAAmB;GACpE,OAAO,sCAAsC,oBAAqB,SAAS;GAC3E,OAAO,qCAAqC;EAC9C,EACD,UACD;CAED,MAAM,WAAW,QAAS,YAAY,WAAW,WAAY,KAAA;CAC7D,MAAM,sBAAsB,YAAY,aAAa,SAAS,uBAAuB;EAAE;EAAO,IAAI;EAAS,CAAC,GAAG,KAAA;AAE/G,QACE,oBAAC,cAAA;EAAoB;YACnB,qBAAC,OAAA;GACM;GACL,MAAM;GACN,eAAa;GACb,oBAAkB,YAAY;GAC9B,WAAW;GACX,GAAI;;IAEJ,oBAAC,2BAAA;KACU;KACT,MAAM,kBAAkB,WAAW,SAAS,SAAS,SAAS;KAC9D,WAAW,OAAO;MAClB;IACD,eACC,oBAAC,QAAA;KAAK,WAAW,OAAO;eACtB,oBAAC,eAAA;MAAM,WAAW,MAAM;MAA4B;MAAS,OAAM;OAAU;MACxE;IAER,eAAe;;IACZ;GACO;;AC5KnB,IAAA,4BDgLe"}
|
package/package.json
CHANGED