@helsenorge/designsystem-react 7.5.0 → 7.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.
Files changed (8) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/components/ErrorWrapper/styles.module.scss +1 -0
  3. package/components/ExpanderList/styles.module.scss +6 -1
  4. package/components/NotificationPanel/NotificationPanel.d.ts +3 -0
  5. package/components/NotificationPanel/NotificationPanel.js +61 -60
  6. package/components/NotificationPanel/NotificationPanel.js.map +1 -1
  7. package/components/NotificationPanel/NotificationPanel.stories.d.ts +5 -0
  8. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,11 @@
1
+ ## [7.5.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv7.4.0&targetVersion=GTv7.5.0) (2024-05-08)
2
+
3
+ ### Features
4
+
5
+ - **notificationpanel:** compactmode kan nå vise children
6
+ ([8056e4a](https://github.com/helsenorge/designsystem/commit/8056e4a95ed03caecd05b69bedbb5c16f6ba1f4a)), closes
7
+ [#324320](https://github.com/helsenorge/designsystem/issues/324320)
8
+
1
9
  ## [7.4.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv7.3.1&targetVersion=GTv7.4.0) (2024-05-07)
2
10
 
3
11
  ### Features
package/components/ErrorWrapper/styles.module.scss CHANGED
@@ -5,6 +5,7 @@
5
5
  @import '../../scss/font-settings';
6
6
 
7
7
  .error-wrapper {
8
+ position: relative;
8
9
  padding-bottom: getSpacer(m);
9
10
 
10
11
  @media (min-width: map.get($grid-breakpoints, md)) {
package/components/ExpanderList/styles.module.scss CHANGED
@@ -89,8 +89,13 @@
89
89
  &--closed:not(:hover, .expander-list-link--fill) {
90
90
  background-color: transparent;
91
91
  }
92
+
93
+ &--fill {
94
+ margin-top: getSpacer(s);
95
+ }
96
+
92
97
  &--closed#{&}--fill {
93
- margin: getSpacer(s) 0;
98
+ margin-bottom: getSpacer(s);
94
99
 
95
100
  &:not(:hover) {
96
101
  background-color: $neutral50;
package/components/NotificationPanel/NotificationPanel.d.ts CHANGED
@@ -2,6 +2,7 @@ import React from 'react';
2
2
  export type NotificationPanelVariants = 'info' | 'warn' | 'alert' | 'success';
3
3
  export type NotificationCompactVariants = 'basic' | 'outline';
4
4
  export type NotificationPanelSizes = 'small' | 'medium' | 'large';
5
+ export type LabelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'span';
5
6
  export interface NotificationPanelProps {
6
7
  /** Adds custom classes to the element. */
7
8
  className?: string;
@@ -29,6 +30,8 @@ export interface NotificationPanelProps {
29
30
  fluid?: boolean;
30
31
  /** Sets a label for the notification panel. */
31
32
  label?: string;
33
+ /** Changes the underlying element of the label. */
34
+ labelHtmlMarkup?: LabelTags;
32
35
  /** Close button aria-label */
33
36
  ariaLabelCloseBtn?: string;
34
37
  /** Custom id for the label */
package/components/NotificationPanel/NotificationPanel.js CHANGED
@@ -1,28 +1,28 @@
1
1
  import t from "react";
2
2
  import c from "classnames";
3
- import { DetailButton as B } from "./DetailButton/DetailButton.js";
4
- import { IconSize as n, AnalyticsId as L } from "../../constants.js";
5
- import { useUuid as P } from "../../hooks/useUuid.js";
6
- import { getColor as R } from "../../theme/currys/color.js";
7
- import { palette as o } from "../../theme/palette.js";
8
- import { getAriaLabelAttributes as $ } from "../../utils/accessibility.js";
9
- import V from "../Close/Close.js";
10
- import { Icon as f } from "../Icon/Icon.js";
11
- import D from "../Icons/CheckFill.js";
12
- import M from "../Icons/ErrorSignFill.js";
13
- import O from "../Icons/InfoSignFill.js";
14
- import U from "../Icons/TriangleX.js";
3
+ import { DetailButton as P } from "./DetailButton/DetailButton.js";
4
+ import { IconSize as o, AnalyticsId as R } from "../../constants.js";
5
+ import { useUuid as $ } from "../../hooks/useUuid.js";
6
+ import { getColor as M } from "../../theme/currys/color.js";
7
+ import { palette as n } from "../../theme/palette.js";
8
+ import { getAriaLabelAttributes as V } from "../../utils/accessibility.js";
9
+ import D from "../Close/Close.js";
10
+ import { Icon as p } from "../Icon/Icon.js";
11
+ import H from "../Icons/CheckFill.js";
12
+ import O from "../Icons/ErrorSignFill.js";
13
+ import U from "../Icons/InfoSignFill.js";
14
+ import W from "../Icons/TriangleX.js";
15
15
  import e from "../NotificationPanel/styles.module.scss";
16
- const W = ({ fluid: s, children: m }) => {
16
+ const j = ({ fluid: s, children: m }) => {
17
17
  if (s) {
18
18
  const l = c(e["fluid-wrapper"]);
19
19
  return /* @__PURE__ */ t.createElement("div", { className: l }, m);
20
20
  }
21
21
  return m;
22
- }, j = t.forwardRef((s, m) => {
22
+ }, q = t.forwardRef((s, m) => {
23
23
  const {
24
24
  children: l,
25
- variant: p = "info",
25
+ variant: f = "info",
26
26
  dismissable: u = !1,
27
27
  onClick: E,
28
28
  expanderChildren: r,
@@ -31,61 +31,62 @@ const W = ({ fluid: s, children: m }) => {
31
31
  expanderOpenFromStart: N = !1,
32
32
  compactVariant: a,
33
33
  label: i,
34
- fluid: S = !1,
34
+ labelHtmlMarkup: S = "h1",
35
+ fluid: I = !1,
35
36
  size: C,
36
- className: I,
37
+ className: g,
37
38
  labelId: x,
38
- role: g,
39
- testId: w
40
- } = s, d = P(x), y = {
39
+ role: w,
40
+ testId: y
41
+ } = s, d = $(x), T = {
41
42
  info: /* @__PURE__ */ t.createElement(
42
- f,
43
+ p,
43
44
  {
44
- svgIcon: O,
45
- color: o.blueberry700,
46
- hoverColor: o.blueberry700,
47
- size: a ? n.XSmall : n.Small
45
+ svgIcon: U,
46
+ color: n.blueberry700,
47
+ hoverColor: n.blueberry700,
48
+ size: a ? o.XSmall : o.Small
48
49
  }
49
50
  ),
50
51
  warn: /* @__PURE__ */ t.createElement(
51
- f,
52
+ p,
52
53
  {
53
- svgIcon: M,
54
- color: o.banana700,
55
- hoverColor: o.banana700,
56
- size: a ? n.XSmall : n.Small
54
+ svgIcon: O,
55
+ color: n.banana700,
56
+ hoverColor: n.banana700,
57
+ size: a ? o.XSmall : o.Small
57
58
  }
58
59
  ),
59
60
  alert: /* @__PURE__ */ t.createElement(
60
- f,
61
+ p,
61
62
  {
62
- svgIcon: U,
63
- color: o.cherry700,
64
- hoverColor: o.cherry700,
65
- size: a ? n.XSmall : n.Small
63
+ svgIcon: W,
64
+ color: n.cherry700,
65
+ hoverColor: n.cherry700,
66
+ size: a ? o.XSmall : o.Small
66
67
  }
67
68
  ),
68
69
  success: /* @__PURE__ */ t.createElement(
69
- f,
70
+ p,
70
71
  {
71
- svgIcon: D,
72
- color: o.kiwi900,
73
- hoverColor: o.kiwi900,
74
- size: a ? n.XSmall : n.Small
72
+ svgIcon: H,
73
+ color: n.kiwi900,
74
+ hoverColor: n.kiwi900,
75
+ size: a ? o.XSmall : o.Small
75
76
  }
76
77
  )
77
- }, z = () => {
78
- const h = a === "outline", F = c(e["notification-panel__content"]), X = c(e["notification-panel__label"], {
78
+ }, k = () => {
79
+ const h = a === "outline", X = c(e["notification-panel__content"]), A = c(e["notification-panel__label"], {
79
80
  [e["notification-panel__label--no-content"]]: !l && !r,
80
81
  [e["notification-panel__label--compact"]]: !!a,
81
82
  [e["notification-panel__label--outline"]]: h
82
- }), A = c(e["notification-panel__children"], {
83
+ }), B = c(e["notification-panel__children"], {
83
84
  [e["notification-panel__children--with-label"]]: i,
84
85
  [e["notification-panel__children--expander-no-label"]]: r && !i,
85
86
  [e["notification-panel__children--outline"]]: h
86
- });
87
- return /* @__PURE__ */ t.createElement("div", { className: F, id: i ? void 0 : d }, i && /* @__PURE__ */ t.createElement("h1", { className: X, id: d }, i), l && /* @__PURE__ */ t.createElement("div", { className: A }, l), r && b && _ && !a && /* @__PURE__ */ t.createElement(
88
- B,
87
+ }), L = S;
88
+ return /* @__PURE__ */ t.createElement("div", { className: X, id: i ? void 0 : d }, i && /* @__PURE__ */ t.createElement(L, { className: A, id: d }, i), l && /* @__PURE__ */ t.createElement("div", { className: B }, l), r && b && _ && !a && /* @__PURE__ */ t.createElement(
89
+ P,
89
90
  {
90
91
  expanderOpenFromStart: N,
91
92
  content: r,
@@ -93,9 +94,9 @@ const W = ({ fluid: s, children: m }) => {
93
94
  buttonClosedText: _
94
95
  }
95
96
  ));
96
- }, T = c(
97
+ }, z = c(
97
98
  e["notification-panel"],
98
- e[`notification-panel--${p}`],
99
+ e[`notification-panel--${f}`],
99
100
  C && e[`notification-panel--${C}`],
100
101
  {
101
102
  [e["notification-panel--compact"]]: !!a,
@@ -104,24 +105,24 @@ const W = ({ fluid: s, children: m }) => {
104
105
  [e["notification-panel--with-content"]]: r || i && l,
105
106
  [e["notification-panel--dismissable"]]: u
106
107
  },
107
- I
108
- ), v = g || p === "alert" && "alert" || void 0, k = v ? $({ label: i, id: d }) : void 0;
109
- return /* @__PURE__ */ t.createElement(W, { fluid: S }, /* @__PURE__ */ t.createElement(
108
+ g
109
+ ), v = w || f === "alert" && "alert" || void 0, F = v ? V({ label: i, id: d }) : void 0;
110
+ return /* @__PURE__ */ t.createElement(j, { fluid: I }, /* @__PURE__ */ t.createElement(
110
111
  "div",
111
112
  {
112
113
  ref: m,
113
114
  role: v,
114
- "data-testid": w,
115
- "data-analyticsid": L.NotificationPanel,
116
- className: T,
117
- ...k
115
+ "data-testid": y,
116
+ "data-analyticsid": R.NotificationPanel,
117
+ className: z,
118
+ ...F
118
119
  },
119
- /* @__PURE__ */ t.createElement("span", { className: e["notification-panel__icon"] }, y[p]),
120
- u && /* @__PURE__ */ t.createElement("span", { className: e["notification-panel__close"] }, /* @__PURE__ */ t.createElement(V, { ariaLabel: s.ariaLabelCloseBtn, onClick: E, color: R("black") })),
121
- z()
120
+ /* @__PURE__ */ t.createElement("span", { className: e["notification-panel__icon"] }, T[f]),
121
+ u && /* @__PURE__ */ t.createElement("span", { className: e["notification-panel__close"] }, /* @__PURE__ */ t.createElement(D, { ariaLabel: s.ariaLabelCloseBtn, onClick: E, color: M("black") })),
122
+ k()
122
123
  ));
123
- }), re = j;
124
+ }), se = q;
124
125
  export {
125
- re as default
126
+ se as default
126
127
  };
127
128
  //# sourceMappingURL=NotificationPanel.js.map
package/components/NotificationPanel/NotificationPanel.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NotificationPanel.js","sources":["../../../src/components/NotificationPanel/NotificationPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { DetailButton } from './DetailButton/DetailButton';\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { palette } from '../../theme/palette';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport Close from '../Close';\nimport Icon from '../Icon';\nimport CheckFill from '../Icons/CheckFill';\nimport ErrorSignFill from '../Icons/ErrorSignFill';\nimport InfoSignFill from '../Icons/InfoSignFill';\nimport TriangleX from '../Icons/TriangleX';\n\nimport styles from './styles.module.scss';\n\nexport type NotificationPanelVariants = 'info' | 'warn' | 'alert' | 'success';\nexport type NotificationCompactVariants = 'basic' | 'outline';\nexport type NotificationPanelSizes = 'small' | 'medium' | 'large';\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 /** 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';\n /** Sets the data-testid attribute. */\n testId?: string;\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.forwardRef<HTMLDivElement, NotificationPanelProps>((props, ref) => {\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 fluid = false,\n size,\n className,\n labelId,\n role,\n testId,\n } = props;\n const uuid = useUuid(labelId);\n const variantToIconMap = {\n info: (\n <Icon\n svgIcon={InfoSignFill}\n color={palette.blueberry700}\n hoverColor={palette.blueberry700}\n size={compactVariant ? IconSize.XSmall : IconSize.Small}\n />\n ),\n warn: (\n <Icon\n svgIcon={ErrorSignFill}\n color={palette.banana700}\n hoverColor={palette.banana700}\n size={compactVariant ? IconSize.XSmall : IconSize.Small}\n />\n ),\n alert: (\n <Icon\n svgIcon={TriangleX}\n color={palette.cherry700}\n hoverColor={palette.cherry700}\n size={compactVariant ? IconSize.XSmall : IconSize.Small}\n />\n ),\n success: (\n <Icon\n svgIcon={CheckFill}\n color={palette.kiwi900}\n hoverColor={palette.kiwi900}\n size={compactVariant ? IconSize.XSmall : IconSize.Small}\n />\n ),\n };\n const renderContent = (): JSX.Element => {\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\n return (\n <div className={contentClasses} id={!label ? uuid : undefined}>\n {label && (\n <h1 className={labelClasses} id={uuid}>\n {label}\n </h1>\n )}\n {children && <div className={childrenClasses}>{children}</div>}\n {expanderChildren && expanderButtonText && expanderButtonClosedText && !compactVariant && (\n <DetailButton\n expanderOpenFromStart={expanderOpenFromStart}\n content={expanderChildren}\n buttonText={expanderButtonText}\n buttonClosedText={expanderButtonClosedText}\n />\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 === 'alert' && 'alert') || undefined;\n const ariaLabelAttributes = ariaRole ? getAriaLabelAttributes({ label, id: uuid }) : 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 <span className={styles['notification-panel__icon']}>{variantToIconMap[variant]}</span>\n {dismissable && (\n <span className={styles['notification-panel__close']}>\n <Close ariaLabel={props.ariaLabelCloseBtn} onClick={onClick} color={getColor('black')} />\n </span>\n )}\n {renderContent()}\n </div>\n </FluidWrapper>\n );\n});\n\nexport default NotificationPanel;\n"],"names":["FluidWrapper","fluid","children","fluidClasses","classNames","styles","React","NotificationPanel","props","ref","variant","dismissable","onClick","expanderChildren","expanderButtonText","expanderButtonClosedText","expanderOpenFromStart","compactVariant","label","size","className","labelId","role","testId","uuid","useUuid","variantToIconMap","Icon","InfoSignFill","palette","IconSize","ErrorSignFill","TriangleX","CheckFill","renderContent","outlineVariant","contentClasses","labelClasses","childrenClasses","DetailButton","notificationPanelClasses","ariaRole","ariaLabelAttributes","getAriaLabelAttributes","AnalyticsId","Close","getColor","NotificationPanel$1"],"mappings":"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"}
1
+ {"version":3,"file":"NotificationPanel.js","sources":["../../../src/components/NotificationPanel/NotificationPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { DetailButton } from './DetailButton/DetailButton';\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { palette } from '../../theme/palette';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport Close from '../Close';\nimport Icon from '../Icon';\nimport CheckFill from '../Icons/CheckFill';\nimport ErrorSignFill from '../Icons/ErrorSignFill';\nimport InfoSignFill from '../Icons/InfoSignFill';\nimport TriangleX from '../Icons/TriangleX';\n\nimport styles from './styles.module.scss';\n\nexport type NotificationPanelVariants = 'info' | 'warn' | 'alert' | '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';\n /** Sets the data-testid attribute. */\n testId?: string;\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.forwardRef<HTMLDivElement, NotificationPanelProps>((props, ref) => {\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 labelHtmlMarkup = 'h1',\n fluid = false,\n size,\n className,\n labelId,\n role,\n testId,\n } = props;\n const uuid = useUuid(labelId);\n const variantToIconMap = {\n info: (\n <Icon\n svgIcon={InfoSignFill}\n color={palette.blueberry700}\n hoverColor={palette.blueberry700}\n size={compactVariant ? IconSize.XSmall : IconSize.Small}\n />\n ),\n warn: (\n <Icon\n svgIcon={ErrorSignFill}\n color={palette.banana700}\n hoverColor={palette.banana700}\n size={compactVariant ? IconSize.XSmall : IconSize.Small}\n />\n ),\n alert: (\n <Icon\n svgIcon={TriangleX}\n color={palette.cherry700}\n hoverColor={palette.cherry700}\n size={compactVariant ? IconSize.XSmall : IconSize.Small}\n />\n ),\n success: (\n <Icon\n svgIcon={CheckFill}\n color={palette.kiwi900}\n hoverColor={palette.kiwi900}\n size={compactVariant ? IconSize.XSmall : IconSize.Small}\n />\n ),\n };\n const renderContent = (): JSX.Element => {\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 ? uuid : undefined}>\n {label && (\n <CustomTag className={labelClasses} id={uuid}>\n {label}\n </CustomTag>\n )}\n {children && <div className={childrenClasses}>{children}</div>}\n {expanderChildren && expanderButtonText && expanderButtonClosedText && !compactVariant && (\n <DetailButton\n expanderOpenFromStart={expanderOpenFromStart}\n content={expanderChildren}\n buttonText={expanderButtonText}\n buttonClosedText={expanderButtonClosedText}\n />\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 === 'alert' && 'alert') || undefined;\n const ariaLabelAttributes = ariaRole ? getAriaLabelAttributes({ label, id: uuid }) : 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 <span className={styles['notification-panel__icon']}>{variantToIconMap[variant]}</span>\n {dismissable && (\n <span className={styles['notification-panel__close']}>\n <Close ariaLabel={props.ariaLabelCloseBtn} onClick={onClick} color={getColor('black')} />\n </span>\n )}\n {renderContent()}\n </div>\n </FluidWrapper>\n );\n});\n\nexport default NotificationPanel;\n"],"names":["FluidWrapper","fluid","children","fluidClasses","classNames","styles","React","NotificationPanel","props","ref","variant","dismissable","onClick","expanderChildren","expanderButtonText","expanderButtonClosedText","expanderOpenFromStart","compactVariant","label","labelHtmlMarkup","size","className","labelId","role","testId","uuid","useUuid","variantToIconMap","Icon","InfoSignFill","palette","IconSize","ErrorSignFill","TriangleX","CheckFill","renderContent","outlineVariant","contentClasses","labelClasses","childrenClasses","CustomTag","DetailButton","notificationPanelClasses","ariaRole","ariaLabelAttributes","getAriaLabelAttributes","AnalyticsId","Close","getColor","NotificationPanel$1"],"mappings":"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"}
package/components/NotificationPanel/NotificationPanel.stories.d.ts CHANGED
@@ -16,6 +16,7 @@ declare const meta: {
16
16
  size: "large";
17
17
  fluid: false;
18
18
  label: string;
19
+ labelHtmlMarkup: "h1";
19
20
  variant: "alert";
20
21
  role: undefined;
21
22
  };
@@ -33,6 +34,10 @@ declare const meta: {
33
34
  label: {
34
35
  control: string;
35
36
  };
37
+ labelHtmlMarkup: {
38
+ control: string;
39
+ options: import("../Title").TitleTags[];
40
+ };
36
41
  variant: {
37
42
  control: string;
38
43
  options: string[];
package/package.json CHANGED
@@ -7,7 +7,7 @@
7
7
  "url": "git+https://github.com/helsenorge/designsystem.git"
8
8
  },
9
9
  "homepage": "https://helsenorge.design",
10
- "version": "7.5.0",
10
+ "version": "7.6.0",
11
11
  "author": "Helsenorge",
12
12
  "license": "MIT",
13
13
  "peerDependencies": {