@helsenorge/designsystem-react 7.13.0 → 7.13.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +29 -0
- package/components/Expander/Expander.js +29 -31
- package/components/Expander/Expander.js.map +1 -1
- package/components/Expander/styles.module.scss +10 -14
- package/components/Expander/styles.module.scss.d.ts +0 -2
- package/components/Tabs/TabList/TabList.js +25 -26
- package/components/Tabs/TabList/TabList.js.map +1 -1
- package/components/Tabs/TabList/styles.module.scss +1 -2
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,32 @@
|
|
|
1
|
+
## [7.13.1](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv7.13.0&targetVersion=GTv7.13.1) (2024-07-23)
|
|
2
|
+
|
|
3
|
+
### Bug Fixes
|
|
4
|
+
|
|
5
|
+
- **tabs:** endre z indeks ([30f5684](https://github.com/helsenorge/designsystem/commit/30f5684adaeea90a218cdd280980e45b25a4676c)), closes
|
|
6
|
+
[#328176](https://github.com/helsenorge/designsystem/issues/328176)
|
|
7
|
+
|
|
8
|
+
## [7.13.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv7.12.0&targetVersion=GTv7.13.0) (2024-07-22)
|
|
9
|
+
|
|
10
|
+
### Features
|
|
11
|
+
|
|
12
|
+
- legg til storybook-eksempler for typography.module
|
|
13
|
+
([2fe8228](https://github.com/helsenorge/designsystem/commit/2fe8228dc486c99ed409c2d508dc09b094b2292a)), closes
|
|
14
|
+
[#326403](https://github.com/helsenorge/designsystem/issues/326403)
|
|
15
|
+
- **duolist:** collapsed mode mulig fra gitt breakpoint
|
|
16
|
+
([f50448c](https://github.com/helsenorge/designsystem/commit/f50448cab636c41679af97d5edb8909db810b6c0)), closes
|
|
17
|
+
[#328401](https://github.com/helsenorge/designsystem/issues/328401)
|
|
18
|
+
- **tabs:** mer mobilvennlig ([b52c281](https://github.com/helsenorge/designsystem/commit/b52c281e029f2ccda72dda15fe559907287ad7f9)), closes
|
|
19
|
+
[#322461](https://github.com/helsenorge/designsystem/issues/322461) [#328176](https://github.com/helsenorge/designsystem/issues/328176)
|
|
20
|
+
|
|
21
|
+
### Bug Fixes
|
|
22
|
+
|
|
23
|
+
- error må være true for at inputfelter med errorTextId skal få aria-describedby
|
|
24
|
+
([2d64531](https://github.com/helsenorge/designsystem/commit/2d64531a61eb4e6b37f00cc75e4a27ecf6c371b7)), closes
|
|
25
|
+
[#327379](https://github.com/helsenorge/designsystem/issues/327379)
|
|
26
|
+
- **dictionarytrigger:** juster ned avstanden mellom linjen og ord
|
|
27
|
+
([ef2e6af](https://github.com/helsenorge/designsystem/commit/ef2e6af7d1645544b2a3479d0d2b1b739c6886c9)), closes
|
|
28
|
+
[#328583](https://github.com/helsenorge/designsystem/issues/328583)
|
|
29
|
+
|
|
1
30
|
## [7.12.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv7.11.0&targetVersion=GTv7.12.0) (2024-06-21)
|
|
2
31
|
|
|
3
32
|
### Features
|
|
@@ -1,63 +1,61 @@
|
|
|
1
1
|
import r, { useRef as N } from "react";
|
|
2
2
|
import d from "classnames";
|
|
3
|
-
import { ZIndex as O, AnalyticsId as C, IconSize as
|
|
3
|
+
import { ZIndex as O, AnalyticsId as C, IconSize as c } from "../../constants.js";
|
|
4
4
|
import { useExpand as U } from "../../hooks/useExpand.js";
|
|
5
5
|
import { useHover as Z } from "../../hooks/useHover.js";
|
|
6
6
|
import { useSticky as j } from "../../hooks/useSticky.js";
|
|
7
7
|
import q from "../Button/Button.js";
|
|
8
|
-
import { Icon as
|
|
9
|
-
import
|
|
10
|
-
import
|
|
8
|
+
import { Icon as m } from "../Icon/Icon.js";
|
|
9
|
+
import h from "../Icons/ChevronDown.js";
|
|
10
|
+
import z from "../Icons/ChevronUp.js";
|
|
11
11
|
import { LazyIcon as F } from "../LazyIcon/LazyIcon.js";
|
|
12
12
|
import e from "../Expander/styles.module.scss";
|
|
13
|
-
var G = /* @__PURE__ */ ((
|
|
14
|
-
const oe = (
|
|
13
|
+
var G = /* @__PURE__ */ ((o) => (o.small = "small", o.large = "large", o))(G || {});
|
|
14
|
+
const oe = (o) => {
|
|
15
15
|
const {
|
|
16
16
|
title: x,
|
|
17
|
-
children:
|
|
17
|
+
children: b,
|
|
18
18
|
size: n = "small",
|
|
19
|
-
color:
|
|
19
|
+
color: _,
|
|
20
20
|
contentClassNames: k,
|
|
21
|
-
svgIcon:
|
|
21
|
+
svgIcon: a,
|
|
22
22
|
expanded: $ = !1,
|
|
23
23
|
noNestedLine: S = !1,
|
|
24
24
|
sticky: w = !1,
|
|
25
|
-
testId:
|
|
25
|
+
testId: g,
|
|
26
26
|
onExpand: R,
|
|
27
27
|
renderChildrenWhenClosed: W = !1,
|
|
28
28
|
zIndex: X = O.ExpanderTrigger
|
|
29
|
-
} =
|
|
29
|
+
} = o, [t, f] = U($, R), u = N(null), l = N(null), { isHovered: i } = Z(l), { isOutsideWindow: H, isLeavingWindow: v, offsetHeight: E, contentWidth: y } = j(u, l), s = w && t && H, I = (p) => /* @__PURE__ */ r.createElement("span", { className: d(e.expander__icon, e[`expander__icon--${p}`]) }, /* @__PURE__ */ r.createElement(m, { svgIcon: t ? z : h, size: c.XSmall, isHovered: i })), L = d(
|
|
30
30
|
e.expander__trigger,
|
|
31
31
|
n === "large" && e[`expander__trigger--${n}`],
|
|
32
|
-
n === "large" && e[`expander__trigger--${
|
|
33
|
-
n === "large" &&
|
|
32
|
+
n === "large" && e[`expander__trigger--${_ || "neutral"}`],
|
|
33
|
+
n === "large" && a && e["expander__trigger--icon"],
|
|
34
34
|
t && e["expander__trigger--expanded"],
|
|
35
|
-
|
|
36
|
-
a && c && e["expander__trigger--absolute"]
|
|
35
|
+
s && !v && e["expander__trigger--sticky"]
|
|
37
36
|
), T = () => /* @__PURE__ */ r.createElement(
|
|
38
37
|
"button",
|
|
39
38
|
{
|
|
40
39
|
type: "button",
|
|
41
40
|
className: L,
|
|
42
41
|
style: {
|
|
43
|
-
zIndex: i ||
|
|
44
|
-
width:
|
|
42
|
+
zIndex: i || s ? X : void 0,
|
|
43
|
+
width: s && y ? `${y}px` : void 0
|
|
45
44
|
},
|
|
46
45
|
"aria-expanded": t,
|
|
47
46
|
ref: l,
|
|
48
|
-
onClick: () =>
|
|
49
|
-
"data-testid":
|
|
47
|
+
onClick: () => f(!t),
|
|
48
|
+
"data-testid": g,
|
|
50
49
|
"data-analyticsid": C.Expander
|
|
51
50
|
},
|
|
52
51
|
n === "small" && I("left"),
|
|
53
|
-
|
|
52
|
+
a && /* @__PURE__ */ r.createElement("span", { className: d(e.expander__icon, e["expander__icon--left"]) }, typeof a == "string" ? /* @__PURE__ */ r.createElement(F, { iconName: a, size: c.XSmall, isHovered: i }) : /* @__PURE__ */ r.createElement(m, { svgIcon: a, size: c.XSmall, isHovered: i })),
|
|
54
53
|
x,
|
|
55
54
|
n === "large" && I("right")
|
|
56
55
|
), B = d(
|
|
57
56
|
e.expander__button,
|
|
58
57
|
t && e["expander__button--expanded"],
|
|
59
|
-
|
|
60
|
-
a && c && e["expander__button--absolute"]
|
|
58
|
+
s && !v && e["expander__button--sticky"]
|
|
61
59
|
), A = () => /* @__PURE__ */ r.createElement(
|
|
62
60
|
q,
|
|
63
61
|
{
|
|
@@ -65,32 +63,32 @@ const oe = (s) => {
|
|
|
65
63
|
className: B,
|
|
66
64
|
"aria-expanded": t,
|
|
67
65
|
ref: l,
|
|
68
|
-
onClick: () =>
|
|
69
|
-
testId:
|
|
66
|
+
onClick: () => f(!t),
|
|
67
|
+
testId: g,
|
|
70
68
|
"data-analyticsid": C.Expander
|
|
71
69
|
},
|
|
72
|
-
/* @__PURE__ */ r.createElement(
|
|
70
|
+
/* @__PURE__ */ r.createElement(m, { svgIcon: t ? z : h, size: c.XSmall }),
|
|
73
71
|
x
|
|
74
72
|
), D = () => {
|
|
75
73
|
if (!W && !t)
|
|
76
74
|
return null;
|
|
77
|
-
const
|
|
75
|
+
const p = d(
|
|
78
76
|
e.expander__content,
|
|
79
77
|
e[`expander__content--${n}`],
|
|
80
|
-
n === "large" && e[`expander__content--${
|
|
81
|
-
n === "large" &&
|
|
78
|
+
n === "large" && e[`expander__content--${_ || "neutral"}`],
|
|
79
|
+
n === "large" && a && e["expander__content--icon"],
|
|
82
80
|
t && e["expander__content--expanded"],
|
|
83
81
|
n === "small" && !S && e["expander__content--nested-line"],
|
|
84
82
|
k
|
|
85
83
|
);
|
|
86
|
-
return /* @__PURE__ */ r.createElement("div", { className:
|
|
84
|
+
return /* @__PURE__ */ r.createElement("div", { className: p }, b);
|
|
87
85
|
};
|
|
88
86
|
return /* @__PURE__ */ r.createElement(
|
|
89
87
|
"div",
|
|
90
88
|
{
|
|
91
89
|
className: e.expander,
|
|
92
|
-
ref:
|
|
93
|
-
style: { paddingTop:
|
|
90
|
+
ref: u,
|
|
91
|
+
style: { paddingTop: s && E ? `${E}px` : void 0 }
|
|
94
92
|
},
|
|
95
93
|
n === "large" ? T() : A(),
|
|
96
94
|
D()
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Expander.js","sources":["../../../src/components/Expander/Expander.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useHover } from '../../hooks/useHover';\nimport { useSticky } from '../../hooks/useSticky';\nimport { PaletteNames } from '../../theme/palette';\nimport Button from '../Button';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport { IconName } from '../Icons/IconNames';\nimport LazyIcon from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport enum ExpanderSize {\n small = 'small',\n large = 'large',\n}\n\nexport type ExpanderColors = Extract<PaletteNames, 'banana' | 'blueberry' | 'cherry' | 'kiwi' | 'neutral' | 'plum' | 'white'>;\n\nexport interface ExpanderProps {\n /** Sets the trigger title */\n title: string;\n /** Sets the expanded content */\n children?: React.ReactNode;\n /** Sets classnames on the content area */\n contentClassNames?: string;\n /** Sets the size of the expander. Default: ExpanderSize.small */\n size?: ExpanderSize;\n /** Sets the background of the expander. Requires size=ExpanderSize.large. */\n color?: ExpanderColors;\n /** Adds an icon to the expander trigger. Requires size=ExpanderSize.large. */\n svgIcon?: SvgIcon | IconName;\n /** Opens or closes the expander */\n expanded?: boolean;\n /** Removes border to the left of the content. Requires size=ExpanderSize.small. */\n noNestedLine?: boolean;\n /** Stick expander trigger to top of screen while scrolling down */\n sticky?: boolean;\n /** Called when expander is open/closed. */\n onExpand?: (isExpanded: boolean) => void;\n /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n renderChildrenWhenClosed?: boolean;\n /** Sets the data-testid attribute on the expander button. */\n testId?: string;\n /** Overrides the default z-index of the expander header */\n zIndex?: number;\n}\n\nconst Expander: React.FC<ExpanderProps> = props => {\n const {\n title,\n children,\n size = ExpanderSize.small,\n color,\n contentClassNames,\n svgIcon: icon,\n expanded = false,\n noNestedLine = false,\n sticky = false,\n testId,\n onExpand,\n renderChildrenWhenClosed = false,\n zIndex = ZIndex.ExpanderTrigger,\n } = props;\n const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n const expanderRef = useRef<HTMLDivElement>(null);\n const triggerRef = useRef<HTMLButtonElement>(null);\n const { isHovered } = useHover(triggerRef);\n const { isOutsideWindow, isLeavingWindow, offsetHeight, contentWidth } = useSticky(expanderRef, triggerRef);\n\n const isSticky = sticky && isExpanded && isOutsideWindow;\n\n const renderChevron = (align: 'left' | 'right'): React.ReactNode => (\n <span className={classNames(styles['expander__icon'], styles[`expander__icon--${align}`])}>\n <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} isHovered={isHovered} />\n </span>\n );\n\n const triggerClassName = classNames(\n styles['expander__trigger'],\n size === ExpanderSize.large && styles[`expander__trigger--${size}`],\n size === ExpanderSize.large && styles[`expander__trigger--${color || 'neutral'}`],\n size === ExpanderSize.large && icon && styles['expander__trigger--icon'],\n isExpanded && styles['expander__trigger--expanded'],\n isSticky && !isLeavingWindow && styles['expander__trigger--sticky'],\n isSticky && isLeavingWindow && styles['expander__trigger--absolute']\n );\n\n const renderTrigger = (): React.ReactNode => (\n <button\n type=\"button\"\n className={triggerClassName}\n style={{\n zIndex: isHovered || isSticky ? zIndex : undefined,\n width: isSticky && contentWidth ? `${contentWidth}px` : undefined,\n }}\n aria-expanded={isExpanded}\n ref={triggerRef}\n onClick={(): void => setIsExpanded(!isExpanded)}\n data-testid={testId}\n data-analyticsid={AnalyticsId.Expander}\n >\n {size === ExpanderSize.small && renderChevron('left')}\n {icon && (\n <span className={classNames(styles['expander__icon'], styles['expander__icon--left'])}>\n {typeof icon === 'string' ? (\n <LazyIcon iconName={icon} size={IconSize.XSmall} isHovered={isHovered} />\n ) : (\n <Icon svgIcon={icon} size={IconSize.XSmall} isHovered={isHovered} />\n )}\n </span>\n )}\n {title}\n {size === ExpanderSize.large && renderChevron('right')}\n </button>\n );\n\n const buttonClassName = classNames(\n styles['expander__button'],\n isExpanded && styles['expander__button--expanded'],\n isSticky && !isLeavingWindow && styles['expander__button--sticky'],\n isSticky && isLeavingWindow && styles['expander__button--absolute']\n );\n\n const renderButton = (): React.ReactNode => (\n <Button\n variant=\"borderless\"\n className={buttonClassName}\n aria-expanded={isExpanded}\n ref={triggerRef}\n onClick={(): void => setIsExpanded(!isExpanded)}\n testId={testId}\n data-analyticsid={AnalyticsId.Expander}\n >\n <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} />\n {title}\n </Button>\n );\n\n const renderContent = (): React.ReactNode => {\n if (!renderChildrenWhenClosed && !isExpanded) {\n return null;\n }\n\n const contentClassName = classNames(\n styles['expander__content'],\n styles[`expander__content--${size}`],\n size === ExpanderSize.large && styles[`expander__content--${color || 'neutral'}`],\n size === ExpanderSize.large && icon && styles['expander__content--icon'],\n isExpanded && styles['expander__content--expanded'],\n size === ExpanderSize.small && !noNestedLine && styles['expander__content--nested-line'],\n contentClassNames\n );\n\n return <div className={contentClassName}>{children}</div>;\n };\n\n return (\n <div\n className={styles['expander']}\n ref={expanderRef}\n style={{ paddingTop: isSticky && offsetHeight ? `${offsetHeight}px` : undefined }}\n >\n {size === ExpanderSize.large ? renderTrigger() : renderButton()}\n {renderContent()}\n </div>\n );\n};\n\nexport default Expander;\n"],"names":["ExpanderSize","Expander","props","title","children","size","color","contentClassNames","icon","expanded","noNestedLine","sticky","testId","onExpand","renderChildrenWhenClosed","zIndex","ZIndex","isExpanded","setIsExpanded","useExpand","expanderRef","useRef","triggerRef","isHovered","useHover","isOutsideWindow","isLeavingWindow","offsetHeight","contentWidth","useSticky","isSticky","renderChevron","align","React","classNames","styles","Icon","ChevronUp","ChevronDown","IconSize","triggerClassName","renderTrigger","AnalyticsId","LazyIcon","buttonClassName","renderButton","Button","renderContent","contentClassName"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Expander.js","sources":["../../../src/components/Expander/Expander.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useHover } from '../../hooks/useHover';\nimport { useSticky } from '../../hooks/useSticky';\nimport { PaletteNames } from '../../theme/palette';\nimport Button from '../Button';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport { IconName } from '../Icons/IconNames';\nimport LazyIcon from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport enum ExpanderSize {\n small = 'small',\n large = 'large',\n}\n\nexport type ExpanderColors = Extract<PaletteNames, 'banana' | 'blueberry' | 'cherry' | 'kiwi' | 'neutral' | 'plum' | 'white'>;\n\nexport interface ExpanderProps {\n /** Sets the trigger title */\n title: string;\n /** Sets the expanded content */\n children?: React.ReactNode;\n /** Sets classnames on the content area */\n contentClassNames?: string;\n /** Sets the size of the expander. Default: ExpanderSize.small */\n size?: ExpanderSize;\n /** Sets the background of the expander. Requires size=ExpanderSize.large. */\n color?: ExpanderColors;\n /** Adds an icon to the expander trigger. Requires size=ExpanderSize.large. */\n svgIcon?: SvgIcon | IconName;\n /** Opens or closes the expander */\n expanded?: boolean;\n /** Removes border to the left of the content. Requires size=ExpanderSize.small. */\n noNestedLine?: boolean;\n /** Stick expander trigger to top of screen while scrolling down */\n sticky?: boolean;\n /** Called when expander is open/closed. */\n onExpand?: (isExpanded: boolean) => void;\n /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n renderChildrenWhenClosed?: boolean;\n /** Sets the data-testid attribute on the expander button. */\n testId?: string;\n /** Overrides the default z-index of the expander header */\n zIndex?: number;\n}\n\nconst Expander: React.FC<ExpanderProps> = props => {\n const {\n title,\n children,\n size = ExpanderSize.small,\n color,\n contentClassNames,\n svgIcon: icon,\n expanded = false,\n noNestedLine = false,\n sticky = false,\n testId,\n onExpand,\n renderChildrenWhenClosed = false,\n zIndex = ZIndex.ExpanderTrigger,\n } = props;\n const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n const expanderRef = useRef<HTMLDivElement>(null);\n const triggerRef = useRef<HTMLButtonElement>(null);\n const { isHovered } = useHover(triggerRef);\n const { isOutsideWindow, isLeavingWindow, offsetHeight, contentWidth } = useSticky(expanderRef, triggerRef);\n\n const isSticky = sticky && isExpanded && isOutsideWindow;\n\n const renderChevron = (align: 'left' | 'right'): React.ReactNode => (\n <span className={classNames(styles['expander__icon'], styles[`expander__icon--${align}`])}>\n <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} isHovered={isHovered} />\n </span>\n );\n\n const triggerClassName = classNames(\n styles['expander__trigger'],\n size === ExpanderSize.large && styles[`expander__trigger--${size}`],\n size === ExpanderSize.large && styles[`expander__trigger--${color || 'neutral'}`],\n size === ExpanderSize.large && icon && styles['expander__trigger--icon'],\n isExpanded && styles['expander__trigger--expanded'],\n isSticky && !isLeavingWindow && styles['expander__trigger--sticky']\n );\n\n const renderTrigger = (): React.ReactNode => (\n <button\n type=\"button\"\n className={triggerClassName}\n style={{\n zIndex: isHovered || isSticky ? zIndex : undefined,\n width: isSticky && contentWidth ? `${contentWidth}px` : undefined,\n }}\n aria-expanded={isExpanded}\n ref={triggerRef}\n onClick={(): void => setIsExpanded(!isExpanded)}\n data-testid={testId}\n data-analyticsid={AnalyticsId.Expander}\n >\n {size === ExpanderSize.small && renderChevron('left')}\n {icon && (\n <span className={classNames(styles['expander__icon'], styles['expander__icon--left'])}>\n {typeof icon === 'string' ? (\n <LazyIcon iconName={icon} size={IconSize.XSmall} isHovered={isHovered} />\n ) : (\n <Icon svgIcon={icon} size={IconSize.XSmall} isHovered={isHovered} />\n )}\n </span>\n )}\n {title}\n {size === ExpanderSize.large && renderChevron('right')}\n </button>\n );\n\n const buttonClassName = classNames(\n styles['expander__button'],\n isExpanded && styles['expander__button--expanded'],\n isSticky && !isLeavingWindow && styles['expander__button--sticky']\n );\n\n const renderButton = (): React.ReactNode => (\n <Button\n variant=\"borderless\"\n className={buttonClassName}\n aria-expanded={isExpanded}\n ref={triggerRef}\n onClick={(): void => setIsExpanded(!isExpanded)}\n testId={testId}\n data-analyticsid={AnalyticsId.Expander}\n >\n <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} />\n {title}\n </Button>\n );\n\n const renderContent = (): React.ReactNode => {\n if (!renderChildrenWhenClosed && !isExpanded) {\n return null;\n }\n\n const contentClassName = classNames(\n styles['expander__content'],\n styles[`expander__content--${size}`],\n size === ExpanderSize.large && styles[`expander__content--${color || 'neutral'}`],\n size === ExpanderSize.large && icon && styles['expander__content--icon'],\n isExpanded && styles['expander__content--expanded'],\n size === ExpanderSize.small && !noNestedLine && styles['expander__content--nested-line'],\n contentClassNames\n );\n\n return <div className={contentClassName}>{children}</div>;\n };\n\n return (\n <div\n className={styles['expander']}\n ref={expanderRef}\n style={{ paddingTop: isSticky && offsetHeight ? `${offsetHeight}px` : undefined }}\n >\n {size === ExpanderSize.large ? renderTrigger() : renderButton()}\n {renderContent()}\n </div>\n );\n};\n\nexport default Expander;\n"],"names":["ExpanderSize","Expander","props","title","children","size","color","contentClassNames","icon","expanded","noNestedLine","sticky","testId","onExpand","renderChildrenWhenClosed","zIndex","ZIndex","isExpanded","setIsExpanded","useExpand","expanderRef","useRef","triggerRef","isHovered","useHover","isOutsideWindow","isLeavingWindow","offsetHeight","contentWidth","useSticky","isSticky","renderChevron","align","React","classNames","styles","Icon","ChevronUp","ChevronDown","IconSize","triggerClassName","renderTrigger","AnalyticsId","LazyIcon","buttonClassName","renderButton","Button","renderContent","contentClassName"],"mappings":"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"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/* stylelint-disable no-descending-specificity */
|
|
1
2
|
@use 'sass:map';
|
|
2
3
|
@import '../../scss/spacers';
|
|
3
4
|
@import '../../scss/breakpoints';
|
|
@@ -6,7 +7,7 @@
|
|
|
6
7
|
@import '../../scss/supernova/styles/colors';
|
|
7
8
|
|
|
8
9
|
.expander {
|
|
9
|
-
position:
|
|
10
|
+
position: initial;
|
|
10
11
|
width: 100%;
|
|
11
12
|
|
|
12
13
|
&:focus-within {
|
|
@@ -35,19 +36,6 @@
|
|
|
35
36
|
}
|
|
36
37
|
}
|
|
37
38
|
|
|
38
|
-
&__button,
|
|
39
|
-
&__trigger {
|
|
40
|
-
&--sticky {
|
|
41
|
-
position: fixed;
|
|
42
|
-
top: 0;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
&--absolute {
|
|
46
|
-
position: absolute;
|
|
47
|
-
bottom: 0;
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
|
|
51
39
|
&__button {
|
|
52
40
|
position: relative;
|
|
53
41
|
padding-right: getSpacer(s);
|
|
@@ -149,6 +137,14 @@
|
|
|
149
137
|
}
|
|
150
138
|
}
|
|
151
139
|
|
|
140
|
+
&__button,
|
|
141
|
+
&__trigger {
|
|
142
|
+
&--sticky {
|
|
143
|
+
position: fixed;
|
|
144
|
+
top: 0;
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
|
|
152
148
|
&__content {
|
|
153
149
|
$content: &;
|
|
154
150
|
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
export type Styles = {
|
|
2
2
|
expander: string;
|
|
3
3
|
expander__button: string;
|
|
4
|
-
'expander__button--absolute': string;
|
|
5
4
|
'expander__button--expanded': string;
|
|
6
5
|
'expander__button--sticky': string;
|
|
7
6
|
expander__content: string;
|
|
@@ -21,7 +20,6 @@ export type Styles = {
|
|
|
21
20
|
'expander__icon--left': string;
|
|
22
21
|
'expander__icon--right': string;
|
|
23
22
|
expander__trigger: string;
|
|
24
|
-
'expander__trigger--absolute': string;
|
|
25
23
|
'expander__trigger--banana': string;
|
|
26
24
|
'expander__trigger--blueberry': string;
|
|
27
25
|
'expander__trigger--cherry': string;
|
|
@@ -1,56 +1,55 @@
|
|
|
1
1
|
import t, { useRef as k } from "react";
|
|
2
2
|
import C from "classnames";
|
|
3
|
-
import { useIsVisible as
|
|
4
|
-
import { useRovingFocus as
|
|
3
|
+
import { useIsVisible as v } from "../../../hooks/useIsVisible.js";
|
|
4
|
+
import { useRovingFocus as L } from "../../../hooks/useRovingFocus.js";
|
|
5
5
|
import { palette as a } from "../../../theme/palette.js";
|
|
6
|
-
import { isComponent as
|
|
7
|
-
import {
|
|
8
|
-
import { Icon as B } from "../../Icon/Icon.js";
|
|
6
|
+
import { isComponent as V } from "../../../utils/component.js";
|
|
7
|
+
import { Icon as w } from "../../Icon/Icon.js";
|
|
9
8
|
import { IconSize as y } from "../../../constants.js";
|
|
10
|
-
import { LazyIcon as
|
|
11
|
-
import
|
|
9
|
+
import { LazyIcon as X } from "../../LazyIcon/LazyIcon.js";
|
|
10
|
+
import B from "../Tab.js";
|
|
12
11
|
import o from "../../Tabs/TabList/styles.module.scss";
|
|
13
|
-
const
|
|
14
|
-
const { selectedTab:
|
|
15
|
-
|
|
16
|
-
const
|
|
17
|
-
return /* @__PURE__ */ t.createElement("ul", { className:
|
|
18
|
-
if (
|
|
19
|
-
const s = e ===
|
|
20
|
-
p && p(e), m(e),
|
|
21
|
-
}, S = C(o["tab-list__tab"], o[`tab-list__tab--${
|
|
12
|
+
const P = (d) => {
|
|
13
|
+
const { selectedTab: h, onTabListClick: m, children: b, color: I = "white", type: T = "normal" } = d, i = k(null), r = k(t.Children.map(b, () => t.createRef()));
|
|
14
|
+
L(m, r, i, !0);
|
|
15
|
+
const E = C(o["tab-list"], o[`tab-list--${T}`]), R = v(i);
|
|
16
|
+
return /* @__PURE__ */ t.createElement("ul", { className: E, ref: i, role: "tablist", "aria-orientation": "horizontal" }, t.Children.map(b, (f, e) => {
|
|
17
|
+
if (V(f, B)) {
|
|
18
|
+
const s = e === h, { title: n, onTabClick: p, icon: l, testId: z } = f.props, N = () => {
|
|
19
|
+
p && p(e), m(e), u(e);
|
|
20
|
+
}, S = C(o["tab-list__tab"], o[`tab-list__tab--${I}`], {
|
|
22
21
|
[o["tab-list__tab--selected"]]: s,
|
|
23
22
|
[o["tab-list__tab--first"]]: e == 0
|
|
24
|
-
}),
|
|
25
|
-
var
|
|
26
|
-
const c = r.current && r.current[
|
|
27
|
-
(
|
|
23
|
+
}), $ = r.current && r.current[e], u = (g) => {
|
|
24
|
+
var _;
|
|
25
|
+
const c = r.current && r.current[g];
|
|
26
|
+
(_ = c == null ? void 0 : c.current) == null || _.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
|
|
28
27
|
};
|
|
29
|
-
return s &&
|
|
28
|
+
return s && R && u(e), /* @__PURE__ */ t.createElement("li", { role: "presentation", key: `${n}` }, /* @__PURE__ */ t.createElement(
|
|
30
29
|
"button",
|
|
31
30
|
{
|
|
32
31
|
role: "tab",
|
|
33
32
|
"aria-selected": s,
|
|
34
33
|
onClick: N,
|
|
35
34
|
className: S,
|
|
36
|
-
key: `${n}
|
|
35
|
+
key: `${n}`,
|
|
37
36
|
"data-testid": z,
|
|
38
|
-
ref:
|
|
37
|
+
ref: $
|
|
39
38
|
},
|
|
40
39
|
/* @__PURE__ */ t.createElement("span", { className: o["tab-list__tab__title-and-icon"] }, l && (typeof l == "string" ? /* @__PURE__ */ t.createElement(
|
|
41
|
-
|
|
40
|
+
X,
|
|
42
41
|
{
|
|
43
42
|
iconName: l,
|
|
44
43
|
size: y.XSmall,
|
|
45
44
|
color: s ? a.black : a.blueberry500
|
|
46
45
|
}
|
|
47
|
-
) : /* @__PURE__ */ t.createElement(
|
|
46
|
+
) : /* @__PURE__ */ t.createElement(w, { svgIcon: l, size: y.XSmall, color: s ? a.black : a.blueberry500 })), n)
|
|
48
47
|
));
|
|
49
48
|
}
|
|
50
49
|
return null;
|
|
51
50
|
}));
|
|
52
51
|
};
|
|
53
52
|
export {
|
|
54
|
-
|
|
53
|
+
P as default
|
|
55
54
|
};
|
|
56
55
|
//# sourceMappingURL=TabList.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabList.js","sources":["../../../../src/components/Tabs/TabList/TabList.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useIsVisible } from '../../../hooks/useIsVisible';\nimport { useRovingFocus } from '../../../hooks/useRovingFocus';\nimport { palette } from '../../../theme/palette';\nimport { isComponent } from '../../../utils/component';\nimport
|
|
1
|
+
{"version":3,"file":"TabList.js","sources":["../../../../src/components/Tabs/TabList/TabList.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useIsVisible } from '../../../hooks/useIsVisible';\nimport { useRovingFocus } from '../../../hooks/useRovingFocus';\nimport { palette } from '../../../theme/palette';\nimport { isComponent } from '../../../utils/component';\nimport Icon, { IconSize } from '../../Icon';\nimport { IconName } from '../../Icons/IconNames';\nimport LazyIcon from '../../LazyIcon';\nimport Tab from '../Tab';\nimport { TabsColors, TabsType } from '../Tabs';\n\nimport styles from './styles.module.scss';\ninterface TabListProps {\n children: React.ReactNode;\n onTabListClick: (index: number) => void;\n selectedTab: number;\n color?: TabsColors;\n type?: TabsType;\n}\n\nconst TabList: React.FC<TabListProps> = props => {\n const { selectedTab, onTabListClick, children, color = 'white', type = 'normal' } = props;\n\n const listRef = useRef<HTMLUListElement>(null);\n\n const tabRefs = useRef(React.Children.map(children, () => React.createRef<HTMLButtonElement>()));\n useRovingFocus(onTabListClick, tabRefs, listRef, true);\n\n const tablistClasses = classNames(styles['tab-list'], styles[`tab-list--${type}`]);\n\n const isVisible = useIsVisible(listRef);\n\n return (\n <ul className={tablistClasses} ref={listRef} role=\"tablist\" aria-orientation=\"horizontal\">\n {React.Children.map(children, (child, index) => {\n if (isComponent(child, Tab)) {\n const isSelected = index === selectedTab;\n const { title, onTabClick, icon, testId } = child.props;\n const handleClick = (): void => {\n onTabClick && onTabClick(index);\n onTabListClick(index);\n scrollToTab(index);\n };\n const tabButtonClasses = classNames(styles['tab-list__tab'], styles[`tab-list__tab--${color}`], {\n [styles['tab-list__tab--selected']]: isSelected,\n [styles['tab-list__tab--first']]: index == 0,\n });\n\n const currentRef = tabRefs.current && tabRefs.current[index];\n\n const scrollToTab = (index: number): void => {\n const currentRef = tabRefs.current && tabRefs.current[index];\n currentRef?.current?.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });\n };\n\n if (isSelected && isVisible) scrollToTab(index);\n\n return (\n <li role=\"presentation\" key={`${title}`}>\n <button\n role=\"tab\"\n aria-selected={isSelected}\n onClick={handleClick}\n className={tabButtonClasses}\n key={`${title}`}\n data-testid={testId}\n ref={currentRef as React.RefObject<HTMLButtonElement>}\n >\n <span className={styles['tab-list__tab__title-and-icon']}>\n {icon &&\n (typeof icon === 'string' ? (\n <LazyIcon\n iconName={icon as IconName}\n size={IconSize.XSmall}\n color={isSelected ? palette[`black`] : palette['blueberry500']}\n />\n ) : (\n <Icon svgIcon={icon} size={IconSize.XSmall} color={isSelected ? palette[`black`] : palette['blueberry500']} />\n ))}\n {title}\n </span>\n </button>\n </li>\n );\n }\n return null;\n })}\n </ul>\n );\n};\n\nexport default TabList;\n"],"names":["TabList","props","selectedTab","onTabListClick","children","color","type","listRef","useRef","tabRefs","React","useRovingFocus","tablistClasses","classNames","styles","isVisible","useIsVisible","child","index","isComponent","Tab","isSelected","title","onTabClick","icon","testId","handleClick","scrollToTab","tabButtonClasses","currentRef","LazyIcon","IconSize","palette","Icon"],"mappings":";;;;;;;;;;;AAuBA,MAAMA,IAAkC,CAASC,MAAA;AACzC,QAAA,EAAE,aAAAC,GAAa,gBAAAC,GAAgB,UAAAC,GAAU,OAAAC,IAAQ,SAAS,MAAAC,IAAO,SAAa,IAAAL,GAE9EM,IAAUC,EAAyB,IAAI,GAEvCC,IAAUD,EAAOE,EAAM,SAAS,IAAIN,GAAU,MAAMM,EAAM,UAA8B,CAAA,CAAC;AAChF,EAAAC,EAAAR,GAAgBM,GAASF,GAAS,EAAI;AAE/C,QAAAK,IAAiBC,EAAWC,EAAO,UAAU,GAAGA,EAAO,aAAaR,CAAI,EAAE,CAAC,GAE3ES,IAAYC,EAAaT,CAAO;AAEtC,yCACG,MAAG,EAAA,WAAWK,GAAgB,KAAKL,GAAS,MAAK,WAAU,oBAAiB,aAAA,GAC1EG,EAAM,SAAS,IAAIN,GAAU,CAACa,GAAOC,MAAU;AAC1C,QAAAC,EAAYF,GAAOG,CAAG,GAAG;AAC3B,YAAMC,IAAaH,MAAUhB,GACvB,EAAE,OAAAoB,GAAO,YAAAC,GAAY,MAAAC,GAAM,QAAAC,MAAWR,EAAM,OAC5CS,IAAc,MAAY;AAC9B,QAAAH,KAAcA,EAAWL,CAAK,GAC9Bf,EAAee,CAAK,GACpBS,EAAYT,CAAK;AAAA,MAAA,GAEbU,IAAmBf,EAAWC,EAAO,eAAe,GAAGA,EAAO,kBAAkBT,CAAK,EAAE,GAAG;AAAA,QAC9F,CAACS,EAAO,yBAAyB,CAAC,GAAGO;AAAA,QACrC,CAACP,EAAO,sBAAsB,CAAC,GAAGI,KAAS;AAAA,MAAA,CAC5C,GAEKW,IAAapB,EAAQ,WAAWA,EAAQ,QAAQS,CAAK,GAErDS,IAAc,CAACT,MAAwB;;AAC3C,cAAMW,IAAapB,EAAQ,WAAWA,EAAQ,QAAQS,CAAK;AAC3DW,SAAAA,IAAAA,KAAAA,gBAAAA,EAAY,YAAZA,QAAAA,EAAqB,eAAe,EAAE,UAAU,UAAU,QAAQ,UAAU,OAAO,UAAA;AAAA,MAAW;AAG5F,aAAAR,KAAcN,KAAWY,EAAYT,CAAK,mCAG3C,MAAG,EAAA,MAAK,gBAAe,KAAK,GAAGI,CAAK,GACnC,GAAAZ,gBAAAA,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,iBAAeW;AAAA,UACf,SAASK;AAAA,UACT,WAAWE;AAAA,UACX,KAAK,GAAGN,CAAK;AAAA,UACb,eAAaG;AAAA,UACb,KAAKI;AAAA,QAAA;AAAA,QAELnB,gBAAAA,EAAA,cAAC,UAAK,WAAWI,EAAO,+BAA+B,EACpD,GAAAU,MACE,OAAOA,KAAS,WACfd,gBAAAA,EAAA;AAAA,UAACoB;AAAA,UAAA;AAAA,YACC,UAAUN;AAAA,YACV,MAAMO,EAAS;AAAA,YACf,OAAOV,IAAaW,EAAQ,QAAWA,EAAQ;AAAA,UAAc;AAAA,QAAA,IAG9DtB,gBAAAA,EAAA,cAAAuB,GAAA,EAAK,SAAST,GAAM,MAAMO,EAAS,QAAQ,OAAOV,IAAaW,EAAQ,QAAWA,EAAQ,aAAc,CAAG,IAE/GV,CACH;AAAA,MAAA,CAEJ;AAAA,IAEJ;AACO,WAAA;AAAA,EACR,CAAA,CACH;AAEJ;"}
|
|
@@ -13,7 +13,6 @@
|
|
|
13
13
|
white-space: nowrap;
|
|
14
14
|
overflow: hidden;
|
|
15
15
|
height: 3rem;
|
|
16
|
-
z-index: 0;
|
|
17
16
|
margin: 0;
|
|
18
17
|
margin-bottom: -1px;
|
|
19
18
|
background-color: var(--color-base-background-white);
|
|
@@ -42,7 +41,7 @@
|
|
|
42
41
|
|
|
43
42
|
&--selected {
|
|
44
43
|
overflow: visible;
|
|
45
|
-
z-index:
|
|
44
|
+
z-index: 1;
|
|
46
45
|
border-color: var(--color-action-border-onlight-focus);
|
|
47
46
|
color: var(--color-base-text-onlight);
|
|
48
47
|
background-color: var(--color-base-background-white);
|