@helsenorge/designsystem-react 6.6.0 → 6.6.3

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 (12) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/components/ExpanderHierarchy/expander.module.scss +0 -20
  3. package/components/ExpanderHierarchy/expander.module.scss.d.ts +0 -1
  4. package/components/Icon/Icon.stories.d.ts +5 -2
  5. package/components/NotificationPanel/NotificationPanel.js +55 -57
  6. package/components/NotificationPanel/NotificationPanel.js.map +1 -1
  7. package/components/NotificationPanel/NotificationPanel.stories.d.ts +1 -0
  8. package/components/NotificationPanel/styles.module.scss +28 -26
  9. package/components/NotificationPanel/styles.module.scss.d.ts +7 -6
  10. package/components/PopMenu/PopMenu.js +73 -61
  11. package/components/PopMenu/PopMenu.js.map +1 -1
  12. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,19 @@
1
+ ## [6.6.1](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv6.6.0&targetVersion=GTv6.6.1) (2024-03-19)
2
+
3
+ ### Bug Fixes
4
+
5
+ - reactdaypicker styling eksporterer riktig
6
+ ([45352f0](https://github.com/helsenorge/designsystem/commit/45352f099804e22af77d6ee5c8e903865151ed2d)), closes
7
+ [#322222](https://github.com/helsenorge/designsystem/issues/322222)
8
+
9
+ ## [6.6.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv6.5.0&targetVersion=GTv6.6.0) (2024-03-15)
10
+
11
+ ### Features
12
+
13
+ - zindex med prop lagt til i datepicker dropdown expander og popover
14
+ ([915fabc](https://github.com/helsenorge/designsystem/commit/915fabcb890fe3d339d874a74701fbadb606dcc9)), closes
15
+ [#309420](https://github.com/helsenorge/designsystem/issues/309420)
16
+
1
17
  ## [6.5.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv6.4.0&targetVersion=GTv6.5.0) (2024-03-07)
2
18
 
3
19
  ### Features
package/components/ExpanderHierarchy/expander.module.scss CHANGED
@@ -7,10 +7,6 @@
7
7
  .expander {
8
8
  $item: &;
9
9
 
10
- @media (prefers-reduced-motion: no-preference) {
11
- animation: fade-in 150ms linear forwards;
12
- }
13
-
14
10
  &:first-of-type {
15
11
  border-top: 1px solid $neutral500;
16
12
  }
@@ -141,19 +137,3 @@
141
137
  }
142
138
  }
143
139
  }
144
-
145
- @keyframes fade-in {
146
- 0% {
147
- opacity: 0;
148
- max-height: 0;
149
- }
150
-
151
- 99% {
152
- max-height: 24rem;
153
- }
154
-
155
- 100% {
156
- opacity: 1;
157
- max-height: none;
158
- }
159
- }
package/components/ExpanderHierarchy/expander.module.scss.d.ts CHANGED
@@ -17,7 +17,6 @@ export type Styles = {
17
17
  'expander__title--4-and-lower': string;
18
18
  'expander__title--expanded': string;
19
19
  'expander__title--print': string;
20
- 'fade-in': string;
21
20
  };
22
21
 
23
22
  export type ClassNames = keyof Styles;
package/components/Icon/Icon.stories.d.ts CHANGED
@@ -1,5 +1,7 @@
1
1
  import React from 'react';
2
2
  import { StoryObj } from '@storybook/react';
3
+ import LazyIcon from '../LazyIcon';
4
+ import Icon from '.';
3
5
  declare const meta: {
4
6
  title: string;
5
7
  component: React.ForwardRefExoticComponent<import("./Icon").IconProps & React.RefAttributes<SVGSVGElement>>;
@@ -28,8 +30,9 @@ declare const meta: {
28
30
  };
29
31
  };
30
32
  export default meta;
31
- type Story = StoryObj<typeof meta>;
33
+ type Story = StoryObj<typeof Icon>;
32
34
  export declare const Default: Story;
33
35
  export declare const Accessibility: Story;
34
- export declare const IconWall: Story;
36
+ type LazyIconStory = StoryObj<typeof LazyIcon>;
37
+ export declare const IconWall: LazyIconStory;
35
38
  //# sourceMappingURL=Icon.stories.d.ts.map
package/components/NotificationPanel/NotificationPanel.js CHANGED
@@ -1,123 +1,121 @@
1
1
  import t from "react";
2
2
  import s from "classnames";
3
3
  import { DetailButton as A } from "./DetailButton/DetailButton.js";
4
- import { IconSize as n, AnalyticsId as B } from "../../constants.js";
4
+ import { IconSize as o, AnalyticsId as B } from "../../constants.js";
5
5
  import { useUuid as L } from "../../hooks/useUuid.js";
6
6
  import { getColor as P } from "../../theme/currys/color.js";
7
- import { palette as i } from "../../theme/palette.js";
8
- import { getAriaLabelAttributes as $ } from "../../utils/accessibility.js";
9
- import R from "../Close/Close.js";
7
+ import { palette as n } from "../../theme/palette.js";
8
+ import { getAriaLabelAttributes as R } from "../../utils/accessibility.js";
9
+ import $ from "../Close/Close.js";
10
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";
11
+ import V from "../Icons/CheckFill.js";
12
+ import D from "../Icons/ErrorSignFill.js";
13
+ import M from "../Icons/InfoSignFill.js";
14
+ import O from "../Icons/TriangleX.js";
15
15
  import e from "./styles.module.scss";
16
- const V = ({ fluid: m, variant: p, children: o }) => {
16
+ const U = ({ fluid: m, variant: p, children: i }) => {
17
17
  if (m) {
18
18
  const r = s(e["fluid-wrapper"], { [e[`fluid-wrapper--${p}`]]: p });
19
- return /* @__PURE__ */ t.createElement("div", { className: r }, o);
19
+ return /* @__PURE__ */ t.createElement("div", { className: r }, i);
20
20
  }
21
- return o;
21
+ return i;
22
22
  }, W = t.forwardRef((m, p) => {
23
23
  const {
24
- children: o,
24
+ children: i,
25
25
  variant: r = "info",
26
- dismissable: _ = !1,
27
- onClick: h,
26
+ dismissable: u = !1,
27
+ onClick: v,
28
28
  expanderChildren: c,
29
29
  expanderButtonText: b,
30
- expanderButtonClosedText: u,
30
+ expanderButtonClosedText: _,
31
31
  expanderOpenFromStart: E = !1,
32
32
  compactVariant: a,
33
33
  label: l,
34
34
  fluid: N = !1,
35
- size: C,
36
35
  className: S,
37
36
  labelId: I,
38
- role: g,
39
- testId: x
37
+ role: x,
38
+ testId: g
40
39
  } = m, d = L(I), w = {
41
40
  info: /* @__PURE__ */ t.createElement(
42
41
  f,
43
42
  {
44
- svgIcon: O,
45
- color: i.blueberry700,
46
- hoverColor: i.blueberry700,
47
- size: a ? n.XSmall : n.Small
43
+ svgIcon: M,
44
+ color: n.blueberry700,
45
+ hoverColor: n.blueberry700,
46
+ size: a ? o.XSmall : o.Small
48
47
  }
49
48
  ),
50
49
  warn: /* @__PURE__ */ t.createElement(
51
50
  f,
52
51
  {
53
- svgIcon: M,
54
- color: i.banana700,
55
- hoverColor: i.banana700,
56
- size: a ? n.XSmall : n.Small
52
+ svgIcon: D,
53
+ color: n.banana700,
54
+ hoverColor: n.banana700,
55
+ size: a ? o.XSmall : o.Small
57
56
  }
58
57
  ),
59
58
  alert: /* @__PURE__ */ t.createElement(
60
59
  f,
61
60
  {
62
- svgIcon: U,
63
- color: i.cherry700,
64
- hoverColor: i.cherry700,
65
- size: a ? n.XSmall : n.Small
61
+ svgIcon: O,
62
+ color: n.cherry700,
63
+ hoverColor: n.cherry700,
64
+ size: a ? o.XSmall : o.Small
66
65
  }
67
66
  ),
68
67
  success: /* @__PURE__ */ t.createElement(
69
68
  f,
70
69
  {
71
- svgIcon: D,
72
- color: i.kiwi900,
73
- hoverColor: i.kiwi900,
74
- size: a ? n.XSmall : n.Small
70
+ svgIcon: V,
71
+ color: n.kiwi900,
72
+ hoverColor: n.kiwi900,
73
+ size: a ? o.XSmall : o.Small
75
74
  }
76
75
  )
77
76
  }, y = () => {
78
- const k = s(e["notification-panel__content"]), F = s(e["notification-panel__label"], {
79
- [e["notification-panel__label--no-content"]]: !o && !c,
80
- [e["notification-panel__label__compact"]]: !!a,
81
- [e["notification-panel__label__compact--basic"]]: a === "basic"
77
+ const h = a === "outline", z = s(e["notification-panel__content"]), F = s(e["notification-panel__label"], {
78
+ [e["notification-panel__label--no-content"]]: !i && !c,
79
+ [e["notification-panel__label--compact"]]: !!a,
80
+ [e["notification-panel__label--outline"]]: h
82
81
  }), X = s(e["notification-panel__children"], {
83
- [e["notification-panel__label-and-content--spacing"]]: l,
84
- [e["notification-panel__children--expander-no-label"]]: c && !l
82
+ [e["notification-panel__children--with-label"]]: l,
83
+ [e["notification-panel__children--expander-no-label"]]: c && !l,
84
+ [e["notification-panel__children--outline"]]: h
85
85
  });
86
- return /* @__PURE__ */ t.createElement("div", { className: k, id: l ? void 0 : d }, l && /* @__PURE__ */ t.createElement("h1", { className: F, id: d }, l), o && !a && /* @__PURE__ */ t.createElement("div", { className: X }, o), c && b && u && !a && /* @__PURE__ */ t.createElement(
86
+ return /* @__PURE__ */ t.createElement("div", { className: z, id: l ? void 0 : d }, l && /* @__PURE__ */ t.createElement("h1", { className: F, id: d }, l), i && /* @__PURE__ */ t.createElement("div", { className: X }, i), c && b && _ && !a && /* @__PURE__ */ t.createElement(
87
87
  A,
88
88
  {
89
89
  expanderOpenFromStart: E,
90
90
  content: c,
91
91
  buttonText: b,
92
- buttonClosedText: u
92
+ buttonClosedText: _
93
93
  }
94
94
  ));
95
- }, z = s(
95
+ }, T = s(
96
96
  e["notification-panel"],
97
97
  e[`notification-panel--${r}`],
98
98
  {
99
- [e[`notification-panel--${C}`]]: !!C,
100
- [e["notification-panel__compact"]]: !!a,
101
- [e["notification-panel__compact--basic"]]: a === "basic",
102
- [e["notification-panel__compact--outline"]]: a === "outline",
103
- [e["notification-panel--has-children"]]: !!o,
104
- [e["notification-panel--with-content"]]: c || l && o,
105
- [e["notification-panel--dismissable"]]: _
99
+ [e["notification-panel--compact"]]: !!a,
100
+ [e["notification-panel--compact--basic"]]: a === "basic",
101
+ [e["notification-panel--compact--outline"]]: a === "outline",
102
+ [e["notification-panel--with-content"]]: c || l && i,
103
+ [e["notification-panel--dismissable"]]: u
106
104
  },
107
105
  S
108
- ), v = g || r === "alert" && "alert" || void 0, T = v ? $({ label: l, id: d }) : void 0;
109
- return /* @__PURE__ */ t.createElement(V, { fluid: N, variant: r }, /* @__PURE__ */ t.createElement(
106
+ ), C = x || r === "alert" && "alert" || void 0, k = C ? R({ label: l, id: d }) : void 0;
107
+ return /* @__PURE__ */ t.createElement(U, { fluid: N, variant: r }, /* @__PURE__ */ t.createElement(
110
108
  "div",
111
109
  {
112
110
  ref: p,
113
- role: v,
114
- "data-testid": x,
111
+ role: C,
112
+ "data-testid": g,
115
113
  "data-analyticsid": B.NotificationPanel,
116
- className: z,
117
- ...T
114
+ className: T,
115
+ ...k
118
116
  },
119
117
  /* @__PURE__ */ t.createElement("span", { className: e["notification-panel__icon"] }, w[r]),
120
- _ && /* @__PURE__ */ t.createElement("span", { className: e["notification-panel__close"] }, /* @__PURE__ */ t.createElement(R, { ariaLabel: m.ariaLabelCloseBtn, onClick: h, color: P("black") })),
118
+ u && /* @__PURE__ */ t.createElement("span", { className: e["notification-panel__close"] }, /* @__PURE__ */ t.createElement($, { ariaLabel: m.ariaLabelCloseBtn, onClick: v, color: P("black") })),
121
119
  y()
122
120
  ));
123
121
  }), le = W;
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' | 'variant'> & {\n children: React.ReactElement;\n};\n\nconst FluidWrapper: React.FC<WrapFluidProps> = ({ fluid, variant, children }) => {\n if (fluid) {\n const fluidClasses = classNames(styles['fluid-wrapper'], { [styles[`fluid-wrapper--${variant}`]]: variant });\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 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__compact--basic']]: compactVariant === 'basic',\n });\n const childrenClasses = classNames(styles['notification-panel__children'], {\n [styles['notification-panel__label-and-content--spacing']]: label,\n [styles['notification-panel__children--expander-no-label']]: expanderChildren && !label,\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 && !compactVariant && <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 {\n [styles[`notification-panel--${size}`]]: !!size,\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--has-children']]: !!children,\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} variant={variant}>\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","variant","children","fluidClasses","classNames","styles","React","NotificationPanel","props","ref","dismissable","onClick","expanderChildren","expanderButtonText","expanderButtonClosedText","expanderOpenFromStart","compactVariant","label","size","className","labelId","role","testId","uuid","useUuid","variantToIconMap","Icon","InfoSignFill","palette","IconSize","ErrorSignFill","TriangleX","CheckFill","renderContent","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';\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' | 'variant'> & {\n children: React.ReactElement;\n};\n\nconst FluidWrapper: React.FC<WrapFluidProps> = ({ fluid, variant, children }) => {\n if (fluid) {\n const fluidClasses = classNames(styles['fluid-wrapper'], { [styles[`fluid-wrapper--${variant}`]]: variant });\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 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 {\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} variant={variant}>\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","variant","children","fluidClasses","classNames","styles","React","NotificationPanel","props","ref","dismissable","onClick","expanderChildren","expanderButtonText","expanderButtonClosedText","expanderOpenFromStart","compactVariant","label","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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"}
package/components/NotificationPanel/NotificationPanel.stories.d.ts CHANGED
@@ -50,5 +50,6 @@ export declare const AllVariants: Story;
50
50
  export declare const Expander: Story;
51
51
  export declare const Dismissable: Story;
52
52
  export declare const Compact: Story;
53
+ export declare const CompactWithChildren: Story;
53
54
  export declare const WithSetWidth: Story;
54
55
  //# sourceMappingURL=NotificationPanel.stories.d.ts.map
package/components/NotificationPanel/styles.module.scss CHANGED
@@ -21,9 +21,8 @@
21
21
  }
22
22
  }
23
23
 
24
- &__compact {
24
+ &--compact {
25
25
  width: fit-content;
26
- font-weight: 600;
27
26
  font-size: $font-size-xs;
28
27
  line-height: 1.25rem;
29
28
  box-shadow: none;
@@ -33,10 +32,6 @@
33
32
  padding-right: getSpacer(s);
34
33
  }
35
34
 
36
- &--basic {
37
- font-weight: 400;
38
- }
39
-
40
35
  &--outline {
41
36
  border: none;
42
37
  }
@@ -66,12 +61,12 @@
66
61
  background-color: $blueberry50;
67
62
  }
68
63
 
69
- &--info.notification-panel__compact {
64
+ &--info#{&}--compact {
70
65
  box-shadow: none;
71
66
  background-color: transparent;
72
67
  }
73
68
 
74
- &--info.notification-panel__compact--basic {
69
+ &--info#{&}--compact--basic {
75
70
  border: none;
76
71
  }
77
72
 
@@ -80,12 +75,12 @@
80
75
  background-color: $banana50;
81
76
  }
82
77
 
83
- &--warn.notification-panel__compact {
78
+ &--warn#{&}--compact {
84
79
  box-shadow: none;
85
80
  background-color: transparent;
86
81
  }
87
82
 
88
- &--warn.notification-panel__compact--basic {
83
+ &--warn#{&}--compact--basic {
89
84
  border: none;
90
85
  }
91
86
 
@@ -94,12 +89,12 @@
94
89
  background-color: $cherry50;
95
90
  }
96
91
 
97
- &--alert.notification-panel__compact {
92
+ &--alert#{&}--compact {
98
93
  box-shadow: none;
99
94
  background-color: transparent;
100
95
  }
101
96
 
102
- &--alert.notification-panel__compact--basic {
97
+ &--alert#{&}--compact--basic {
103
98
  border: none;
104
99
  }
105
100
 
@@ -108,12 +103,12 @@
108
103
  background-color: $kiwi50;
109
104
  }
110
105
 
111
- &--success.notification-panel__compact {
106
+ &--success#{&}--compact {
112
107
  box-shadow: none;
113
108
  background-color: transparent;
114
109
  }
115
110
 
116
- &--success.notification-panel__compact--basic {
111
+ &--success#{&}--compact--basic {
117
112
  border: none;
118
113
  }
119
114
 
@@ -132,10 +127,6 @@
132
127
  }
133
128
  }
134
129
 
135
- &__children.notification-panel__label-and-content--spacing {
136
- font-weight: 500;
137
- }
138
-
139
130
  &__label,
140
131
  &__children {
141
132
  font-size: $font-size-xs;
@@ -152,26 +143,33 @@
152
143
  font-weight: 700;
153
144
  margin: getSpacer(2xs) 0 0 0;
154
145
 
155
- &__compact {
156
- font-weight: 600;
146
+ &--compact {
157
147
  font-size: $font-size-xs;
158
148
  line-height: 1.25rem;
159
149
  }
160
150
 
161
- &__compact--basic {
162
- font-weight: 400;
151
+ &--no-content {
152
+ margin: 0;
163
153
  }
164
- }
165
154
 
166
- &__label--no-content {
167
- margin: 0;
168
- font-weight: 600;
155
+ &--compact,
156
+ &--no-content {
157
+ font-weight: 600;
158
+ }
159
+
160
+ &--outline {
161
+ font-weight: 500;
162
+ }
169
163
  }
170
164
 
171
165
  &__children {
172
166
  font-weight: 600;
173
167
  padding: getSpacer(3xs) 0;
174
168
 
169
+ &--with-label {
170
+ font-weight: 500;
171
+ }
172
+
175
173
  &--expander-no-label {
176
174
  margin: getSpacer(2xs) 0 0 0;
177
175
 
@@ -179,6 +177,10 @@
179
177
  padding-top: 0;
180
178
  }
181
179
  }
180
+
181
+ &--outline {
182
+ font-weight: 500;
183
+ }
182
184
  }
183
185
 
184
186
  &__icon {
package/components/NotificationPanel/styles.module.scss.d.ts CHANGED
@@ -6,18 +6,19 @@ export type Styles = {
6
6
  'notification-panel': string;
7
7
  'notification-panel__children': string;
8
8
  'notification-panel__children--expander-no-label': string;
9
+ 'notification-panel__children--outline': string;
10
+ 'notification-panel__children--with-label': string;
9
11
  'notification-panel__close': string;
10
- 'notification-panel__compact': string;
11
- 'notification-panel__compact--basic': string;
12
- 'notification-panel__compact--outline': string;
13
12
  'notification-panel__content': string;
14
13
  'notification-panel__icon': string;
15
14
  'notification-panel__label': string;
16
- 'notification-panel__label__compact': string;
17
- 'notification-panel__label__compact--basic': string;
15
+ 'notification-panel__label--compact': string;
18
16
  'notification-panel__label--no-content': string;
19
- 'notification-panel__label-and-content--spacing': string;
17
+ 'notification-panel__label--outline': string;
20
18
  'notification-panel--alert': string;
19
+ 'notification-panel--compact': string;
20
+ 'notification-panel--compact--basic': string;
21
+ 'notification-panel--compact--outline': string;
21
22
  'notification-panel--dismissable': string;
22
23
  'notification-panel--info': string;
23
24
  'notification-panel--large': string;
package/components/PopMenu/PopMenu.js CHANGED
@@ -1,77 +1,89 @@
1
- import t, { useRef as s, useState as g } from "react";
2
- import a from "classnames";
3
- import { IconSize as I, AnalyticsId as w } from "../../constants.js";
4
- import { useBreakpoint as H } from "../../hooks/useBreakpoint.js";
5
- import { useHover as z } from "../../hooks/useHover.js";
6
- import { useOutsideEvent as A } from "../../hooks/useOutsideEvent.js";
7
- import { getColor as M } from "../../theme/currys/color.js";
8
- import { breakpoints as P } from "../../theme/grid.js";
9
- import { isComponent as T } from "../../utils/component.js";
10
- import $ from "../Close/Close.js";
11
- import { Icon as x } from "../Icon/Icon.js";
12
- import D from "../Icons/VerticalDots.js";
13
- import G from "../LinkList/LinkList.js";
14
- import W from "../PopOver/PopOver.js";
1
+ import o, { useRef as a, useState as A } from "react";
2
+ import p from "classnames";
3
+ import { IconSize as k, AnalyticsId as M } from "../../constants.js";
4
+ import { useBreakpoint as P } from "../../hooks/useBreakpoint.js";
5
+ import { useHover as T } from "../../hooks/useHover.js";
6
+ import { useOutsideEvent as $ } from "../../hooks/useOutsideEvent.js";
7
+ import { getColor as x } from "../../theme/currys/color.js";
8
+ import { breakpoints as D } from "../../theme/grid.js";
9
+ import { isComponent as v } from "../../utils/component.js";
10
+ import G from "../Close/Close.js";
11
+ import { Icon as W } from "../Icon/Icon.js";
12
+ import X from "../Icons/VerticalDots.js";
13
+ import I from "../LinkList/LinkList.js";
14
+ import j from "../PopOver/PopOver.js";
15
15
  import r from "./styles.module.scss";
16
- var X = /* @__PURE__ */ ((e) => (e.onWhite = "on-white", e.onGray = "on-gray", e.onBlueberry = "on-blueberry", e))(X || {});
17
- const j = (e) => {
18
- const l = s(null), m = s(null), p = s(null), [n, i] = g(!1), {
19
- children: c,
20
- popOverClassName: C,
21
- popMenuClassName: k,
22
- openButtonTestId: B,
23
- closeButtonTestId: N,
24
- popOverTestId: y,
25
- popMenuVariant: u = "on-white",
26
- openButtonAriaLabel: O,
27
- closeButtonAriaLabel: h
28
- } = e, f = a(r["pop-menu-button"], {
29
- [r[`pop-menu-button--${u}`]]: u
30
- }), d = H() < P.md;
31
- A(p, () => i(!n));
32
- const { isHovered: E } = z(m), R = d ? I.XSmall : I.Small, S = () => {
33
- if (T(c, G))
34
- return /* @__PURE__ */ t.createElement(
35
- W,
16
+ var q = /* @__PURE__ */ ((n) => (n.onWhite = "on-white", n.onGray = "on-gray", n.onBlueberry = "on-blueberry", n))(q || {});
17
+ const F = (n) => {
18
+ const m = a(null), i = a(null), c = a(null), [s, l] = A(!1), {
19
+ children: u,
20
+ popOverClassName: B,
21
+ popMenuClassName: N,
22
+ openButtonTestId: y,
23
+ closeButtonTestId: E,
24
+ popOverTestId: O,
25
+ popMenuVariant: f = "on-white",
26
+ openButtonAriaLabel: h,
27
+ closeButtonAriaLabel: L
28
+ } = n, d = p(r["pop-menu-button"], {
29
+ [r[`pop-menu-button--${f}`]]: f
30
+ }), b = P() < D.md;
31
+ $(c, () => l(!s));
32
+ const { isHovered: R } = T(i), S = b ? k.XSmall : k.Small, _ = (e) => {
33
+ l(!1), e && e();
34
+ }, g = () => {
35
+ if (v(u, I))
36
+ return /* @__PURE__ */ o.createElement(
37
+ j,
36
38
  {
37
- testId: y,
38
- className: a(r["pop-menu__pop-over"], C),
39
+ testId: O,
40
+ className: p(r["pop-menu__pop-over"], B),
39
41
  arrowClassName: r["pop-menu__pop-over-arrow"],
40
- controllerRef: l,
41
- popOverRef: p
42
+ controllerRef: m,
43
+ popOverRef: c
42
44
  },
43
- c
45
+ o.Children.map(
46
+ u,
47
+ (e) => o.cloneElement(e, {
48
+ children: o.Children.map(
49
+ e.props.children,
50
+ (t) => v(t, I.Link) ? o.cloneElement(t, {
51
+ onClick: (z) => _(() => t.props.onClick && t.props.onClick(z))
52
+ }) : t
53
+ )
54
+ })
55
+ )
44
56
  );
45
- }, b = (o, v) => {
46
- v && v.stopPropagation(), i(o);
47
- }, _ = /* @__PURE__ */ t.createElement(
57
+ }, C = (e, t) => {
58
+ t && t.stopPropagation(), l(e);
59
+ }, w = /* @__PURE__ */ o.createElement(
48
60
  "button",
49
61
  {
50
- ref: m,
51
- "data-testid": B,
52
- className: f,
53
- "aria-label": O || "Se mer",
54
- onClick: (o) => b(!0, o),
62
+ ref: i,
63
+ "data-testid": y,
64
+ className: d,
65
+ "aria-label": h || "Se mer",
66
+ onClick: (e) => C(!0, e),
55
67
  type: "button"
56
68
  },
57
- /* @__PURE__ */ t.createElement(x, { svgIcon: D, className: "test", color: M("black"), size: R, isHovered: E })
58
- ), L = /* @__PURE__ */ t.createElement(
59
- $,
69
+ /* @__PURE__ */ o.createElement(W, { svgIcon: X, className: "test", color: x("black"), size: S, isHovered: R })
70
+ ), H = /* @__PURE__ */ o.createElement(
71
+ G,
60
72
  {
61
- ariaLabel: h,
73
+ ariaLabel: L,
62
74
  color: "black",
63
- className: f,
64
- testId: N,
65
- ref: l,
66
- onClick: (o) => b(!1, o),
67
- small: d
75
+ className: d,
76
+ testId: E,
77
+ ref: m,
78
+ onClick: (e) => C(!1, e),
79
+ small: b
68
80
  }
69
81
  );
70
- return /* @__PURE__ */ t.createElement("div", { className: a(r["pop-menu-button"], k), "data-analyticsid": w.PopMenu }, n ? L : _, n && S());
71
- }, le = j;
82
+ return /* @__PURE__ */ o.createElement("div", { className: p(r["pop-menu-button"], N), "data-analyticsid": M.PopMenu }, s ? H : w, s && g());
83
+ }, me = F;
72
84
  export {
73
- j as PopMenu,
74
- X as PopMenuVariant,
75
- le as default
85
+ F as PopMenu,
86
+ q as PopMenuVariant,
87
+ me as default
76
88
  };
77
89
  //# sourceMappingURL=PopMenu.js.map
package/components/PopMenu/PopMenu.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PopMenu.js","sources":["../../../src/components/PopMenu/PopMenu.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { getColor } from '../../theme/currys';\nimport { breakpoints } from '../../theme/grid';\nimport { isComponent } from '../../utils/component';\nimport Close from '../Close';\nimport Icon from '../Icon';\nimport VerticalDots from '../Icons/VerticalDots';\nimport LinkList, { LinkListProps } from '../LinkList';\nimport PopOver from '../PopOver';\n\nimport styles from './styles.module.scss';\n\nexport enum PopMenuVariant {\n onWhite = 'on-white',\n onGray = 'on-gray',\n onBlueberry = 'on-blueberry',\n}\n\nexport interface PopMenuProps {\n /** Content shown inside PopOver. Can only be a LinkList */\n children: React.ReactElement<LinkListProps>;\n /** Adds custom classes to the popover element. */\n popOverClassName?: string;\n /** Adds custom classes to the element. */\n popMenuClassName?: string;\n /** Changes responsive design for the trigger buttons. */\n popMenuVariant?: PopMenuVariant;\n /** Sets the data-testid attribute for the button that opens. */\n openButtonTestId?: string;\n /** Sets the data-testid attribute for the button that closes. */\n closeButtonTestId?: string;\n /** Sets the data-testid attribute for the popover. */\n popOverTestId?: string;\n /** Sets the arial-label attribute for the openButton. */\n openButtonAriaLabel?: string;\n /** Sets the arial-label attribute for the closeButton. */\n closeButtonAriaLabel?: string;\n}\n\nexport const PopMenu: React.FC<PopMenuProps> = (props: PopMenuProps) => {\n const closeRef = useRef<HTMLButtonElement>(null);\n const openRef = useRef<HTMLButtonElement>(null);\n const popOverRef = useRef<HTMLDivElement>(null);\n const [isOpen, setIsOpen] = useState(false);\n const {\n children,\n popOverClassName,\n popMenuClassName,\n openButtonTestId,\n closeButtonTestId,\n popOverTestId,\n popMenuVariant = PopMenuVariant.onWhite,\n openButtonAriaLabel,\n closeButtonAriaLabel,\n } = props;\n const buttonClasses = classNames(styles['pop-menu-button'], {\n [styles[`pop-menu-button--${popMenuVariant}`]]: popMenuVariant,\n });\n const breakpoint = useBreakpoint();\n const mobile = breakpoint < breakpoints.md;\n useOutsideEvent(popOverRef, () => setIsOpen(!isOpen));\n const { isHovered: openButtonIsHovered } = useHover(openRef);\n const mobileIconSize = mobile ? IconSize.XSmall : IconSize.Small;\n\n const renderChildren = () => {\n if (isComponent<LinkListProps>(children, LinkList)) {\n return (\n <PopOver\n testId={popOverTestId}\n className={classNames(styles['pop-menu__pop-over'], popOverClassName)}\n arrowClassName={styles['pop-menu__pop-over-arrow']}\n controllerRef={closeRef}\n popOverRef={popOverRef}\n >\n {children}\n </PopOver>\n );\n }\n };\n\n const handleOnClick = (isOpen: boolean, e?: React.MouseEvent<HTMLElement, MouseEvent>): void => {\n e && e.stopPropagation();\n setIsOpen(isOpen);\n };\n\n const openButton = (\n <button\n ref={openRef}\n data-testid={openButtonTestId}\n className={buttonClasses}\n aria-label={openButtonAriaLabel || 'Se mer'}\n onClick={(e?: React.MouseEvent<HTMLElement, MouseEvent>) => handleOnClick(true, e)}\n type=\"button\"\n >\n <Icon svgIcon={VerticalDots} className=\"test\" color={getColor('black')} size={mobileIconSize} isHovered={openButtonIsHovered} />\n </button>\n );\n\n const closeButton = (\n <Close\n ariaLabel={closeButtonAriaLabel}\n color=\"black\"\n className={buttonClasses}\n testId={closeButtonTestId}\n ref={closeRef}\n onClick={(e?: React.MouseEvent<HTMLElement, MouseEvent>) => handleOnClick(false, e)}\n small={mobile}\n />\n );\n\n return (\n <div className={classNames(styles['pop-menu-button'], popMenuClassName)} data-analyticsid={AnalyticsId.PopMenu}>\n {!isOpen ? openButton : closeButton}\n {isOpen && renderChildren()}\n </div>\n );\n};\n\nexport default PopMenu;\n"],"names":["PopMenuVariant","PopMenu","props","closeRef","useRef","openRef","popOverRef","isOpen","setIsOpen","useState","children","popOverClassName","popMenuClassName","openButtonTestId","closeButtonTestId","popOverTestId","popMenuVariant","openButtonAriaLabel","closeButtonAriaLabel","buttonClasses","classNames","styles","mobile","useBreakpoint","breakpoints","useOutsideEvent","openButtonIsHovered","useHover","mobileIconSize","IconSize","renderChildren","isComponent","LinkList","React","PopOver","handleOnClick","e","openButton","Icon","VerticalDots","getColor","closeButton","Close","AnalyticsId","PopMenu$1"],"mappings":";;;;;;;;;;;;;;;AAmBY,IAAAA,sBAAAA,OACVA,EAAA,UAAU,YACVA,EAAA,SAAS,WACTA,EAAA,cAAc,gBAHJA,IAAAA,KAAA,CAAA,CAAA;AA2BC,MAAAC,IAAkC,CAACC,MAAwB;AAChE,QAAAC,IAAWC,EAA0B,IAAI,GACzCC,IAAUD,EAA0B,IAAI,GACxCE,IAAaF,EAAuB,IAAI,GACxC,CAACG,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpC;AAAA,IACJ,UAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,qBAAAC;AAAA,IACA,sBAAAC;AAAA,EACE,IAAAhB,GACEiB,IAAgBC,EAAWC,EAAO,iBAAiB,GAAG;AAAA,IAC1D,CAACA,EAAO,oBAAoBL,CAAc,EAAE,CAAC,GAAGA;AAAA,EAAA,CACjD,GAEKM,IADaC,MACSC,EAAY;AACxC,EAAAC,EAAgBnB,GAAY,MAAME,EAAU,CAACD,CAAM,CAAC;AACpD,QAAM,EAAE,WAAWmB,EAAoB,IAAIC,EAAStB,CAAO,GACrDuB,IAAiBN,IAASO,EAAS,SAASA,EAAS,OAErDC,IAAiB,MAAM;AACvB,QAAAC,EAA2BrB,GAAUsB,CAAQ;AAE7C,aAAAC,gBAAAA,EAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,QAAQnB;AAAA,UACR,WAAWK,EAAWC,EAAO,oBAAoB,GAAGV,CAAgB;AAAA,UACpE,gBAAgBU,EAAO,0BAA0B;AAAA,UACjD,eAAelB;AAAA,UACf,YAAAG;AAAA,QAAA;AAAA,QAECI;AAAA,MAAA;AAAA,EAGP,GAGIyB,IAAgB,CAAC5B,GAAiB6B,MAAwD;AAC9F,IAAAA,KAAKA,EAAE,mBACP5B,EAAUD,CAAM;AAAA,EAAA,GAGZ8B,IACJJ,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK5B;AAAA,MACL,eAAaQ;AAAA,MACb,WAAWM;AAAA,MACX,cAAYF,KAAuB;AAAA,MACnC,SAAS,CAACmB,MAAkDD,EAAc,IAAMC,CAAC;AAAA,MACjF,MAAK;AAAA,IAAA;AAAA,IAEJH,gBAAAA,EAAA,cAAAK,GAAA,EAAK,SAASC,GAAc,WAAU,QAAO,OAAOC,EAAS,OAAO,GAAG,MAAMZ,GAAgB,WAAWF,GAAqB;AAAA,EAAA,GAI5He,IACJR,gBAAAA,EAAA;AAAA,IAACS;AAAA,IAAA;AAAA,MACC,WAAWxB;AAAA,MACX,OAAM;AAAA,MACN,WAAWC;AAAA,MACX,QAAQL;AAAA,MACR,KAAKX;AAAA,MACL,SAAS,CAACiC,MAAkDD,EAAc,IAAOC,CAAC;AAAA,MAClF,OAAOd;AAAA,IAAA;AAAA,EAAA;AAIX,yCACG,OAAI,EAAA,WAAWF,EAAWC,EAAO,iBAAiB,GAAGT,CAAgB,GAAG,oBAAkB+B,EAAY,WACnGpC,IAAsBkC,IAAbJ,GACV9B,KAAUuB,GACb;AAEJ,GAEAc,KAAe3C;"}
1
+ {"version":3,"file":"PopMenu.js","sources":["../../../src/components/PopMenu/PopMenu.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { getColor } from '../../theme/currys';\nimport { breakpoints } from '../../theme/grid';\nimport { isComponent } from '../../utils/component';\nimport Close from '../Close';\nimport Icon from '../Icon';\nimport VerticalDots from '../Icons/VerticalDots';\nimport LinkList, { LinkListProps, LinkProps } from '../LinkList';\nimport PopOver from '../PopOver';\n\nimport styles from './styles.module.scss';\n\nexport enum PopMenuVariant {\n onWhite = 'on-white',\n onGray = 'on-gray',\n onBlueberry = 'on-blueberry',\n}\n\nexport interface PopMenuProps {\n /** Content shown inside PopOver. Can only be a LinkList */\n children: React.ReactElement<LinkListProps>;\n /** Adds custom classes to the popover element. */\n popOverClassName?: string;\n /** Adds custom classes to the element. */\n popMenuClassName?: string;\n /** Changes responsive design for the trigger buttons. */\n popMenuVariant?: PopMenuVariant;\n /** Sets the data-testid attribute for the button that opens. */\n openButtonTestId?: string;\n /** Sets the data-testid attribute for the button that closes. */\n closeButtonTestId?: string;\n /** Sets the data-testid attribute for the popover. */\n popOverTestId?: string;\n /** Sets the arial-label attribute for the openButton. */\n openButtonAriaLabel?: string;\n /** Sets the arial-label attribute for the closeButton. */\n closeButtonAriaLabel?: string;\n}\n\nexport const PopMenu: React.FC<PopMenuProps> = (props: PopMenuProps) => {\n const closeRef = useRef<HTMLButtonElement>(null);\n const openRef = useRef<HTMLButtonElement>(null);\n const popOverRef = useRef<HTMLDivElement>(null);\n const [isOpen, setIsOpen] = useState(false);\n const {\n children,\n popOverClassName,\n popMenuClassName,\n openButtonTestId,\n closeButtonTestId,\n popOverTestId,\n popMenuVariant = PopMenuVariant.onWhite,\n openButtonAriaLabel,\n closeButtonAriaLabel,\n } = props;\n const buttonClasses = classNames(styles['pop-menu-button'], {\n [styles[`pop-menu-button--${popMenuVariant}`]]: popMenuVariant,\n });\n const breakpoint = useBreakpoint();\n const mobile = breakpoint < breakpoints.md;\n useOutsideEvent(popOverRef, () => setIsOpen(!isOpen));\n const { isHovered: openButtonIsHovered } = useHover(openRef);\n const mobileIconSize = mobile ? IconSize.XSmall : IconSize.Small;\n\n const handleClick = (cb?: () => void): void => {\n setIsOpen(false);\n cb && cb();\n };\n\n const renderChildren = () => {\n if (isComponent<LinkListProps>(children, LinkList)) {\n return (\n <PopOver\n testId={popOverTestId}\n className={classNames(styles['pop-menu__pop-over'], popOverClassName)}\n arrowClassName={styles['pop-menu__pop-over-arrow']}\n controllerRef={closeRef}\n popOverRef={popOverRef}\n >\n {React.Children.map(children, child =>\n React.cloneElement(child, {\n children: React.Children.map(child.props.children, child =>\n isComponent<LinkProps>(child, LinkList.Link)\n ? React.cloneElement(child, {\n onClick: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) =>\n handleClick(() => child.props.onClick && child.props.onClick(event)),\n })\n : child\n ),\n })\n )}\n </PopOver>\n );\n }\n };\n\n const handleOnClick = (isOpen: boolean, e?: React.MouseEvent<HTMLElement, MouseEvent>): void => {\n e && e.stopPropagation();\n setIsOpen(isOpen);\n };\n\n const openButton = (\n <button\n ref={openRef}\n data-testid={openButtonTestId}\n className={buttonClasses}\n aria-label={openButtonAriaLabel || 'Se mer'}\n onClick={(e): void => handleOnClick(true, e)}\n type=\"button\"\n >\n <Icon svgIcon={VerticalDots} className=\"test\" color={getColor('black')} size={mobileIconSize} isHovered={openButtonIsHovered} />\n </button>\n );\n\n const closeButton = (\n <Close\n ariaLabel={closeButtonAriaLabel}\n color=\"black\"\n className={buttonClasses}\n testId={closeButtonTestId}\n ref={closeRef}\n onClick={(e): void => handleOnClick(false, e)}\n small={mobile}\n />\n );\n\n return (\n <div className={classNames(styles['pop-menu-button'], popMenuClassName)} data-analyticsid={AnalyticsId.PopMenu}>\n {!isOpen ? openButton : closeButton}\n {isOpen && renderChildren()}\n </div>\n );\n};\n\nexport default PopMenu;\n"],"names":["PopMenuVariant","PopMenu","props","closeRef","useRef","openRef","popOverRef","isOpen","setIsOpen","useState","children","popOverClassName","popMenuClassName","openButtonTestId","closeButtonTestId","popOverTestId","popMenuVariant","openButtonAriaLabel","closeButtonAriaLabel","buttonClasses","classNames","styles","mobile","useBreakpoint","breakpoints","useOutsideEvent","openButtonIsHovered","useHover","mobileIconSize","IconSize","handleClick","cb","renderChildren","isComponent","LinkList","React","PopOver","child","event","handleOnClick","e","openButton","Icon","VerticalDots","getColor","closeButton","Close","AnalyticsId","PopMenu$1"],"mappings":"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"}
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": "6.6.0",
10
+ "version": "6.6.3",
11
11
  "author": "Helsenorge",
12
12
  "license": "MIT",
13
13
  "peerDependencies": {