@helsenorge/designsystem-react 11.0.0-beta.2 → 11.0.0-beta.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.
- package/CHANGELOG.md +71 -10
- package/{TooltipWord.js → HelpTooltipWord.js} +6 -6
- package/HelpTooltipWord.js.map +1 -0
- package/LazyIcon.js.map +1 -1
- package/LazyIllustration.js.map +1 -1
- package/{Panel.js → PanelOld.js} +30 -30
- package/PanelOld.js.map +1 -0
- package/components/FormGroup/formGroup.module.scss +10 -0
- package/components/FormGroup/formGroup.module.scss.d.ts +10 -0
- package/components/HelpTooltip/HelpTooltip.d.ts +19 -0
- package/components/{Tooltip/TooltipWord/TooltipWord.d.ts → HelpTooltip/HelpTooltipWord/HelpTooltipWord.d.ts} +3 -3
- package/components/HelpTooltip/HelpTooltipWord/index.d.ts +3 -0
- package/components/HelpTooltip/HelpTooltipWord/index.js +5 -0
- package/components/HelpTooltip/index.d.ts +3 -0
- package/components/{Tooltip → HelpTooltip}/index.js +18 -18
- package/components/HelpTooltip/index.js.map +1 -0
- package/components/Mittens/styles.module.scss +3 -0
- package/components/Mittens/styles.module.scss.d.ts +9 -0
- package/components/PanelList/PanelList.d.ts +2 -2
- package/components/PanelList/index.js +5 -5
- package/components/PanelList/index.js.map +1 -1
- package/components/{Panel/Panel.d.ts → PanelOld/PanelOld.d.ts} +10 -10
- package/components/PanelOld/index.d.ts +3 -0
- package/components/PanelOld/index.js +9 -0
- package/components/PopMenu/index.js.map +1 -1
- package/components/PopMenu/styles.module.scss +8 -2
- package/constants.d.ts +2 -2
- package/constants.js +2 -2
- package/constants.js.map +1 -1
- package/docs/HelpTooltipExample/HelpTooltipExample.d.ts +4 -0
- package/docs/HelpTooltipExample/index.d.ts +3 -0
- package/package.json +1 -2
- package/scss/_grid.scss +4 -4
- package/scss/bootstrap/LICENSE +22 -0
- package/scss/bootstrap/scss/_functions.scss +210 -0
- package/scss/bootstrap/scss/_grid.scss +73 -0
- package/scss/bootstrap/scss/_variables.scss +990 -0
- package/scss/bootstrap/scss/bootstrap-grid.scss +30 -0
- package/scss/bootstrap/scss/mixins/_breakpoints.scss +131 -0
- package/scss/bootstrap/scss/mixins/_deprecate.scss +11 -0
- package/scss/bootstrap/scss/mixins/_grid-framework.scss +89 -0
- package/scss/bootstrap/scss/mixins/_grid.scss +76 -0
- package/scss/bootstrap/scss/utilities/_display.scss +30 -0
- package/scss/bootstrap/scss/utilities/_flex.scss +120 -0
- package/scss/bootstrap/scss/utilities/_spacing.scss +80 -0
- package/scss/bootstrap/scss/vendor/_rfs.scss +233 -0
- package/scss/helsenorge.scss +1 -1
- package/Panel.js.map +0 -1
- package/TooltipWord.js.map +0 -1
- package/components/Panel/index.d.ts +0 -3
- package/components/Panel/index.js +0 -9
- package/components/Tooltip/Tooltip.d.ts +0 -19
- package/components/Tooltip/TooltipWord/index.d.ts +0 -3
- package/components/Tooltip/TooltipWord/index.js +0 -5
- package/components/Tooltip/index.d.ts +0 -3
- package/components/Tooltip/index.js.map +0 -1
- package/docs/TooltipExample/TooltipExample.d.ts +0 -4
- package/docs/TooltipExample/index.d.ts +0 -3
- /package/components/{Panel/Panel.test.d.ts → HelpTooltip/HelpTooltip.test.d.ts} +0 -0
- /package/components/{Tooltip/TooltipWord → HelpTooltip/HelpTooltipWord}/index.js.map +0 -0
- /package/components/{Tooltip/TooltipWord → HelpTooltip/HelpTooltipWord}/styles.module.scss +0 -0
- /package/components/{Tooltip/TooltipWord → HelpTooltip/HelpTooltipWord}/styles.module.scss.d.ts +0 -0
- /package/components/{Tooltip/Tooltip.test.d.ts → PanelOld/PanelOld.test.d.ts} +0 -0
- /package/components/{Panel → PanelOld}/index.js.map +0 -0
- /package/components/{Panel → PanelOld}/styles.module.scss +0 -0
- /package/components/{Panel → PanelOld}/styles.module.scss.d.ts +0 -0
- /package/{style.css → designsystem-react.css} +0 -0
|
@@ -0,0 +1,233 @@
|
|
|
1
|
+
@use 'sass:map';
|
|
2
|
+
@use 'sass:math';
|
|
3
|
+
@use 'sass:meta';
|
|
4
|
+
// stylelint-disable property-blacklist, scss/dollar-variable-default, scss/comment-no-empty, scss/no-global-function-names, scss/at-mixin-pattern
|
|
5
|
+
|
|
6
|
+
// SCSS RFS mixin
|
|
7
|
+
//
|
|
8
|
+
// Automated responsive font sizes
|
|
9
|
+
//
|
|
10
|
+
// Licensed under MIT (https://github.com/twbs/rfs/blob/v8.x/LICENSE)
|
|
11
|
+
|
|
12
|
+
// Configuration
|
|
13
|
+
|
|
14
|
+
// Base font size
|
|
15
|
+
$rfs-base-font-size: 1.25rem !default;
|
|
16
|
+
$rfs-font-size-unit: rem !default;
|
|
17
|
+
|
|
18
|
+
@if $rfs-font-size-unit != rem and $rfs-font-size-unit != px {
|
|
19
|
+
@error "`#{$rfs-font-size-unit}` is not a valid unit for $rfs-font-size-unit. Use `px` or `rem`.";
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
// Breakpoint at where font-size starts decreasing if screen width is smaller
|
|
23
|
+
$rfs-breakpoint: 1200px !default;
|
|
24
|
+
$rfs-breakpoint-unit: px !default;
|
|
25
|
+
|
|
26
|
+
@if $rfs-breakpoint-unit != px and $rfs-breakpoint-unit != em and $rfs-breakpoint-unit != rem {
|
|
27
|
+
@error "`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`.";
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
// Resize font size based on screen height and width
|
|
31
|
+
$rfs-two-dimensional: false !default;
|
|
32
|
+
|
|
33
|
+
// Factor of decrease
|
|
34
|
+
$rfs-factor: 10 !default;
|
|
35
|
+
|
|
36
|
+
@if meta.type-of($rfs-factor) != 'number' or $rfs-factor <= 1 {
|
|
37
|
+
@error "`#{$rfs-factor}` is not a valid $rfs-factor, it must be greater than 1.";
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
// Generate enable or disable classes. Possibilities: false, "enable" or "disable"
|
|
41
|
+
$rfs-class: false !default;
|
|
42
|
+
|
|
43
|
+
// 1 rem = $rfs-rem-value px
|
|
44
|
+
$rfs-rem-value: 16 !default;
|
|
45
|
+
|
|
46
|
+
// Safari iframe resize bug: https://github.com/twbs/rfs/issues/14
|
|
47
|
+
$rfs-safari-iframe-resize-bug-fix: false !default;
|
|
48
|
+
|
|
49
|
+
// Disable RFS by setting $enable-responsive-font-sizes to false
|
|
50
|
+
$enable-responsive-font-sizes: true !default;
|
|
51
|
+
|
|
52
|
+
// Cache $rfs-base-font-size unit
|
|
53
|
+
$rfs-base-font-size-unit: math.unit($rfs-base-font-size);
|
|
54
|
+
|
|
55
|
+
@function divide($dividend, $divisor, $precision: 10) {
|
|
56
|
+
$sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
|
|
57
|
+
$dividend: math.abs($dividend);
|
|
58
|
+
$divisor: math.abs($divisor);
|
|
59
|
+
|
|
60
|
+
@if $dividend == 0 {
|
|
61
|
+
@return 0;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
@if $divisor == 0 {
|
|
65
|
+
@error "Cannot divide by 0";
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
$remainder: $dividend;
|
|
69
|
+
$result: 0;
|
|
70
|
+
$factor: 10;
|
|
71
|
+
|
|
72
|
+
@while $remainder > 0 and $precision >= 0 {
|
|
73
|
+
$quotient: 0;
|
|
74
|
+
|
|
75
|
+
@while $remainder >= $divisor {
|
|
76
|
+
$remainder: $remainder - $divisor;
|
|
77
|
+
$quotient: $quotient + 1;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
$result: $result * 10 + $quotient;
|
|
81
|
+
$factor: $factor * 0.1;
|
|
82
|
+
$remainder: $remainder * 10;
|
|
83
|
+
$precision: $precision - 1;
|
|
84
|
+
|
|
85
|
+
@if $precision < 0 and $remainder >= $divisor * 5 {
|
|
86
|
+
$result: $result + 1;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
$result: $result * $factor * $sign;
|
|
91
|
+
$dividend-unit: math.unit($dividend);
|
|
92
|
+
$divisor-unit: math.unit($divisor);
|
|
93
|
+
$unit-map: (
|
|
94
|
+
'px': 1px,
|
|
95
|
+
'rem': 1rem,
|
|
96
|
+
'em': 1em,
|
|
97
|
+
'%': 1%,
|
|
98
|
+
);
|
|
99
|
+
|
|
100
|
+
@if $dividend-unit != $divisor-unit and map.has-key($unit-map, $dividend-unit) {
|
|
101
|
+
$result: $result * map.get($unit-map, $dividend-unit);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
@return $result;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
// Remove px-unit from $rfs-base-font-size for calculations
|
|
108
|
+
@if $rfs-base-font-size-unit == 'px' {
|
|
109
|
+
$rfs-base-font-size: divide($rfs-base-font-size, $rfs-base-font-size * 0 + 1);
|
|
110
|
+
} @else if $rfs-base-font-size-unit == 'rem' {
|
|
111
|
+
$rfs-base-font-size: divide($rfs-base-font-size, divide($rfs-base-font-size * 0 + 1, $rfs-rem-value));
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
// Cache $rfs-breakpoint unit to prevent multiple calls
|
|
115
|
+
$rfs-breakpoint-unit-cache: math.unit($rfs-breakpoint);
|
|
116
|
+
|
|
117
|
+
// Remove unit from $rfs-breakpoint for calculations
|
|
118
|
+
@if $rfs-breakpoint-unit-cache == 'px' {
|
|
119
|
+
$rfs-breakpoint: divide($rfs-breakpoint, $rfs-breakpoint * 0 + 1);
|
|
120
|
+
} @else if $rfs-breakpoint-unit-cache == 'rem' or $rfs-breakpoint-unit-cache == 'em' {
|
|
121
|
+
$rfs-breakpoint: divide($rfs-breakpoint, divide($rfs-breakpoint * 0 + 1, $rfs-rem-value));
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
// Internal mixin that adds disable classes to the selector if needed.
|
|
125
|
+
@mixin _rfs-disable-class {
|
|
126
|
+
@if $rfs-class == 'disable' {
|
|
127
|
+
// Adding an extra class increases specificity, which prevents the media query to override the font size
|
|
128
|
+
&,
|
|
129
|
+
.disable-responsive-font-size &,
|
|
130
|
+
&.disable-responsive-font-size {
|
|
131
|
+
@content;
|
|
132
|
+
}
|
|
133
|
+
} @else {
|
|
134
|
+
@content;
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
// Internal mixin that adds enable classes to the selector if needed.
|
|
139
|
+
@mixin _rfs-enable-class {
|
|
140
|
+
@if $rfs-class == 'enable' {
|
|
141
|
+
.enable-responsive-font-size &,
|
|
142
|
+
&.enable-responsive-font-size {
|
|
143
|
+
@content;
|
|
144
|
+
}
|
|
145
|
+
} @else {
|
|
146
|
+
@content;
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
// Internal mixin used to determine which media query needs to be used
|
|
151
|
+
@mixin _rfs-media-query($mq-value) {
|
|
152
|
+
@if $rfs-two-dimensional {
|
|
153
|
+
@media (max-width: #{$mq-value}), (max-height: #{$mq-value}) {
|
|
154
|
+
@content;
|
|
155
|
+
}
|
|
156
|
+
} @else {
|
|
157
|
+
@media (max-width: #{$mq-value}) {
|
|
158
|
+
@content;
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
// Responsive font size mixin
|
|
164
|
+
@mixin rfs($fs, $important: false) {
|
|
165
|
+
// Cache $fs unit
|
|
166
|
+
$fs-unit: if(type-of($fs) == 'number', math.unit($fs), false);
|
|
167
|
+
|
|
168
|
+
// Add !important suffix if needed
|
|
169
|
+
$rfs-suffix: if($important, ' !important', '');
|
|
170
|
+
|
|
171
|
+
// If $fs isn't a number (like inherit) or $fs has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
|
|
172
|
+
@if not $fs-unit or $fs-unit != '' and $fs-unit != 'px' and $fs-unit != 'rem' or $fs == 0 {
|
|
173
|
+
font-size: #{$fs}#{$rfs-suffix};
|
|
174
|
+
} @else {
|
|
175
|
+
// Remove unit from $fs for calculations
|
|
176
|
+
@if $fs-unit == 'px' {
|
|
177
|
+
$fs: divide($fs, $fs * 0 + 1);
|
|
178
|
+
} @else if $fs-unit == 'rem' {
|
|
179
|
+
$fs: divide($fs, divide($fs * 0 + 1, $rfs-rem-value));
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
// Set default font size
|
|
183
|
+
$rfs-static: if($rfs-font-size-unit == rem, #{divide($fs, $rfs-rem-value)}rem, #{$fs}px);
|
|
184
|
+
|
|
185
|
+
// Only add the media query if the font size is bigger than the minimum font size
|
|
186
|
+
@if $fs <= $rfs-base-font-size or not $enable-responsive-font-sizes {
|
|
187
|
+
font-size: #{$rfs-static}#{$rfs-suffix};
|
|
188
|
+
} @else {
|
|
189
|
+
// Calculate the minimum font size for $fs
|
|
190
|
+
$fs-min: $rfs-base-font-size + divide($fs - $rfs-base-font-size, $rfs-factor);
|
|
191
|
+
|
|
192
|
+
// Calculate difference between $fs and the minimum font size
|
|
193
|
+
$fs-diff: $fs - $fs-min;
|
|
194
|
+
|
|
195
|
+
// Base font-size formatting
|
|
196
|
+
$min-width: if($rfs-font-size-unit == rem, #{divide($fs-min, $rfs-rem-value)}rem, #{$fs-min}px);
|
|
197
|
+
|
|
198
|
+
// Use `vmin` if two-dimensional is enabled
|
|
199
|
+
$variable-unit: if($rfs-two-dimensional, vmin, vw);
|
|
200
|
+
|
|
201
|
+
// Calculate the variable width between 0 and $rfs-breakpoint
|
|
202
|
+
$variable-width: #{divide($fs-diff * 100, $rfs-breakpoint)}#{$variable-unit};
|
|
203
|
+
|
|
204
|
+
// Set the calculated font-size
|
|
205
|
+
$rfs-fluid: calc(#{$min-width} + #{$variable-width}) #{$rfs-suffix};
|
|
206
|
+
|
|
207
|
+
// Breakpoint formatting
|
|
208
|
+
$mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{divide($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit});
|
|
209
|
+
|
|
210
|
+
@include _rfs-disable-class {
|
|
211
|
+
font-size: #{$rfs-static}#{$rfs-suffix};
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
@include _rfs-media-query($mq-value) {
|
|
215
|
+
@include _rfs-enable-class {
|
|
216
|
+
font-size: $rfs-fluid;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
// Include safari iframe resize fix if needed
|
|
220
|
+
min-width: if($rfs-safari-iframe-resize-bug-fix, (0 * 1vw), null);
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
// The font-size & responsive-font-size mixins use RFS to rescale the font size
|
|
227
|
+
@mixin font-size($fs, $important: false) {
|
|
228
|
+
@include rfs($fs, $important);
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
@mixin responsive-font-size($fs, $important: false) {
|
|
232
|
+
@include rfs($fs, $important);
|
|
233
|
+
}
|
package/scss/helsenorge.scss
CHANGED
package/Panel.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Panel.js","sources":["../src/components/Panel/Panel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnchorTarget, AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useUuid } from '../../hooks/useUuid';\nimport { palette } from '../../theme/palette';\nimport { AriaLabelAttributes, getAriaLabelAttributes } from '../../utils/accessibility';\nimport Badge from '../Badge';\nimport Button, { ButtonProps, ButtonTags } from '../Button';\nimport Icon, { IconSize, SvgPathProps } from '../Icon';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport ArrowRight from '../Icons/ArrowRight';\nimport Calendar from '../Icons/Calendar';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport Pencil from '../Icons/Pencil';\nimport Watch from '../Icons/Watch';\nimport Title, { TitleTags } from '../Title';\n\nimport panelStyles from './styles.module.scss';\n\nexport enum PanelStatus {\n normal = 'normal',\n new = 'new',\n error = 'error',\n draft = 'draft',\n}\n\nexport enum PanelVariant {\n fill = 'fill',\n white = 'white',\n stroke = 'stroke',\n line = 'line',\n}\n\nexport enum PanelLayout {\n layout1 = 'layout1',\n layout2 = 'layout2',\n layout3a = 'layout3a',\n layout3b = 'layout3b',\n layout3c = 'layout3c',\n}\n\nexport interface PanelProps {\n /** Adds custom classes to the element. */\n className?: string;\n /** Panel section A content */\n contentA?: React.ReactNode | string;\n /** Panel section B content */\n contentB?: React.ReactNode | string;\n /** Content for a container that renders above A and B regardless of layout */\n contentHeader?: React.ReactNode;\n /** Container acts as a button, clicking anywhere triggers a panel button click */\n containerAsButton?: boolean;\n /** Panel children */\n children?: React.ReactNode;\n /** Displays date with icon */\n date?: string;\n /** Expands or collapses the panel */\n expanded?: boolean;\n /** Whether the panel can be focused */\n focusable?: boolean;\n /** Icon displayed in title */\n icon?: React.ReactNode;\n /** Panel button text */\n buttonText?: string;\n /** Panel button close text */\n buttonTextClose?: string;\n /** HTML markup for panel button. Default: a */\n buttonHtmlMarkup?: ButtonTags;\n /** Callback when the panel button is clicked */\n buttonOnClick?: ButtonProps['onClick'];\n /** Panel button is aria-labelledby the text in the button itself + the element set in buttonAriaLabelledById. Default: auto-generated id for title (if title is set). */\n buttonAriaLabelledById?: string;\n /** Panel button aria label */\n buttonAriaLabel?: string;\n /** Layout of the panel */\n layout?: keyof typeof PanelLayout;\n /** Removes top border when variant is \"line\" */\n noTopBorder?: boolean;\n /** Called when the panel is opened/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 /** Displays a status on the left side: default normal */\n status?: keyof typeof PanelStatus;\n /** Displayed on top of the panel with a status icon */\n statusMessage?: string;\n /** Sets the data-testid attribute for testing purposes */\n testId?: string;\n /** Displays time with icon */\n time?: string;\n /** Title of the panel */\n title?: string;\n /** Changes the underlying element of the title. Default: h2 */\n titleHtmlMarkup?: TitleTags;\n /** Changes the visual representation of the panel */\n variant?: keyof typeof PanelVariant;\n /** URL to details, renders as a button with anchor tag */\n url?: string;\n /** target used in the button: default is _self */\n target?: AnchorTarget;\n}\n\nexport interface LayoutProps\n extends Pick<PanelProps, 'contentA' | 'contentB' | 'contentHeader' | 'icon' | 'layout' | 'status' | 'statusMessage'> {\n ctaContainer?: React.ReactNode;\n titleElement: React.ReactNode;\n}\n\nconst StatusText: React.FC<{ status?: keyof typeof PanelStatus; statusMessage?: string }> = ({ status, statusMessage }) => {\n const statusIcon = (): { color: string; svgIcon: React.FC<SvgPathProps> } => {\n if (status === PanelStatus.error) {\n return { color: palette.cherry500, svgIcon: AlertSignFill };\n }\n\n return { color: palette.black, svgIcon: Pencil };\n };\n\n const statusMessageClass = classNames(panelStyles['status-message'], {\n [panelStyles['status-message--new']]: status === PanelStatus.new,\n });\n\n if ((status === PanelStatus.error || status === PanelStatus.draft) && statusMessage) {\n return (\n <div className={statusMessageClass} data-testid=\"display-status\">\n {<Icon {...statusIcon()} size={IconSize.XSmall} />} <span>{statusMessage}</span>\n </div>\n );\n }\n\n return null;\n};\n\nconst PreContainer: React.FC<{ children?: React.ReactNode }> = ({ children }) => {\n if (typeof children === 'undefined') return null;\n return <div className={panelStyles['header-container']}>{children}</div>;\n};\n\nconst DateTime: React.FC<{ date?: string; time?: string }> = ({ date, time }) => {\n if (date || time) {\n return (\n <div className={panelStyles['datetime-container']} data-testid=\"datetime\">\n {date && (\n <div className={panelStyles['datetime-container__icon']}>\n <Icon svgIcon={Calendar} size={IconSize.XSmall} />\n <span>{date}</span>\n </div>\n )}\n {time && (\n <div className={panelStyles['datetime-container__icon']}>\n <Icon svgIcon={Watch} size={IconSize.XSmall} />\n <span>{time}</span>\n </div>\n )}\n </div>\n );\n }\n\n return null;\n};\n\nconst PanelLayout1: React.FC<LayoutProps> = ({\n contentA,\n contentB,\n contentHeader,\n ctaContainer,\n icon,\n status,\n statusMessage,\n titleElement,\n}) => {\n const panelLayoutClasses = classNames(panelStyles['panel__layout-1'], {\n [panelStyles['panel__layout-1--with-icon']]: icon,\n });\n const iconClasses = classNames(panelStyles.panel__icon, panelStyles['panel__icon--layout-1'], {\n [panelStyles['panel__icon--no-content']]: !contentA && !contentB,\n });\n\n return (\n <div className={panelLayoutClasses}>\n <StatusText status={status} statusMessage={statusMessage} />\n <PreContainer>{contentHeader}</PreContainer>\n {icon && <div className={iconClasses}>{icon}</div>}\n <div className={panelStyles['panel__layout-1__content-a']}>\n {titleElement}\n {contentA}\n </div>\n {contentB && <div>{contentB}</div>}\n {ctaContainer}\n </div>\n );\n};\n\nconst PanelLayout2: React.FC<LayoutProps> = ({\n contentA,\n contentB,\n contentHeader,\n ctaContainer,\n icon,\n status,\n statusMessage,\n titleElement,\n}) => {\n const panelLayoutClasses = classNames(panelStyles['panel__layout-2'], {\n [panelStyles['panel__layout-2--with-icon']]: icon,\n });\n const iconClasses = classNames(panelStyles.panel__icon, panelStyles['panel__icon--layout-2'], {\n [panelStyles['panel__icon--no-content']]: !contentA && !contentB,\n });\n const lastColumnClass = panelStyles['panel__layout-2__last-column'];\n\n return (\n <div className={panelLayoutClasses}>\n <StatusText status={status} statusMessage={statusMessage} />\n <PreContainer>{contentHeader}</PreContainer>\n {icon && <div className={iconClasses}>{icon}</div>}\n <div className={panelStyles['panel__layout-2__content-a']}>\n {titleElement}\n {contentA}\n </div>\n {contentB && <div className={lastColumnClass}>{contentB}</div>}\n {ctaContainer && <div className={lastColumnClass}>{ctaContainer}</div>}\n </div>\n );\n};\n\nconst PanelLayout3: React.FC<LayoutProps> = ({\n contentA,\n contentB,\n contentHeader,\n ctaContainer,\n icon,\n layout,\n status,\n statusMessage,\n titleElement,\n}) => {\n const layoutClasses = classNames(panelStyles['panel__layout-3'], {\n [panelStyles['panel__layout-3--with-icon']]: icon,\n [panelStyles['panel__layout-3--a']]: layout === PanelLayout.layout3a,\n [panelStyles['panel__layout-3--b']]: layout === PanelLayout.layout3b,\n [panelStyles['panel__layout-3--c']]: layout === PanelLayout.layout3c,\n });\n const iconClasses = classNames(panelStyles.panel__icon, panelStyles['panel__icon--layout-3'], {\n [panelStyles['panel__icon--no-content']]: !contentA && !contentB,\n });\n\n return (\n <div className={layoutClasses}>\n <StatusText status={status} statusMessage={statusMessage} />\n <PreContainer>{contentHeader}</PreContainer>\n {icon && <div className={iconClasses}>{icon}</div>}\n <div>\n {titleElement}\n {contentA}\n </div>\n <div className={panelStyles['panel__layout-3__last-column']}>\n {contentB && <div className={panelStyles['panel__layout-3__last-column__content-b']}>{contentB}</div>}\n {ctaContainer}\n </div>\n </div>\n );\n};\n\nconst Panel = React.forwardRef(function PanelForwardedRef(props: PanelProps, ref: React.ForwardedRef<HTMLHeadingElement>) {\n const {\n buttonAriaLabel,\n buttonAriaLabelledById,\n buttonText = 'Se detaljer',\n buttonTextClose = 'Skjul detaljer',\n buttonHtmlMarkup = 'a',\n buttonOnClick,\n children,\n className,\n containerAsButton = false,\n contentA,\n contentB,\n contentHeader,\n date,\n expanded = false,\n focusable = false,\n icon,\n layout = PanelLayout.layout2,\n noTopBorder,\n onExpand,\n renderChildrenWhenClosed = false,\n status = PanelStatus.normal,\n statusMessage,\n target = '_self',\n testId,\n time,\n title,\n titleHtmlMarkup = 'h2',\n url,\n variant = PanelVariant.fill,\n } = props;\n\n const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n const titleId = useUuid();\n const buttonTextId = useUuid();\n const hasBadge = statusMessage && status === PanelStatus.new;\n const noContentB = typeof contentB === 'undefined';\n const layout1 = layout === 'layout1' || noContentB;\n const layout2 = !noContentB && layout === 'layout2';\n const layout3 = !noContentB && (layout === 'layout3a' || layout === 'layout3b' || layout === 'layout3c');\n const panelWrapperClasses = classNames(panelStyles['panel-wrapper'], className);\n\n const panelClasses = classNames(panelStyles.panel, {\n [panelStyles['panel--fill']]: variant === PanelVariant.fill,\n [panelStyles['panel--stroke']]: variant === PanelVariant.stroke,\n [panelStyles['panel--white']]: variant === PanelVariant.white,\n [panelStyles['panel--line']]: variant === PanelVariant.line,\n [panelStyles['panel--no-top-border']]: variant === PanelVariant.line && noTopBorder,\n [panelStyles['panel--selected']]: isExpanded,\n [panelStyles['panel--new']]: status === PanelStatus.new,\n [panelStyles['panel--draft']]: status === PanelStatus.draft,\n [panelStyles['panel--error']]: status === PanelStatus.error,\n [panelStyles['panel--status']]: status && status !== PanelStatus.normal,\n [panelStyles['panel--with-icon']]: icon,\n [panelStyles['panel--button']]: containerAsButton,\n [panelStyles['panel--clickable']]: children || url || onExpand || buttonOnClick || containerAsButton,\n });\n\n const renderCTAContainer = () => {\n const hasButton = children || url || buttonOnClick;\n const btnContainerClasses = classNames(panelStyles['panel__btn-container'], {\n [panelStyles['panel__btn-container--no-content-b']]: noContentB,\n [panelStyles['panel__btn-container--no-button']]: !hasButton,\n });\n\n return (\n (hasButton || date || time) && (\n <div className={btnContainerClasses}>\n {<DateTime date={date} time={time} />}\n {hasButton && <div className={panelStyles['panel__details-btn']}>{renderDetailsButton()}</div>}\n </div>\n )\n );\n };\n\n const renderDetailsButton = (): React.ReactNode => {\n const ariaLabelAttributes = getAriaLabelAttributes({\n label: buttonAriaLabel,\n id: (buttonAriaLabelledById && `${buttonTextId} ${buttonAriaLabelledById}`) || (title && titleId && `${buttonTextId} ${titleId}`),\n prefer: 'label',\n });\n\n const commonProps: Partial<ButtonProps> & AriaLabelAttributes = {\n onClick: buttonOnClick ? buttonOnClick : (): void => setIsExpanded(!isExpanded),\n className: containerAsButton ? panelStyles['panel__expand'] : undefined,\n variant: 'borderless',\n ellipsis: true,\n ...ariaLabelAttributes,\n };\n\n if (children) {\n return (\n <Button testId=\"expand\" aria-expanded={isExpanded} {...commonProps}>\n <span id={buttonTextId}>{isExpanded ? buttonTextClose : buttonText}</span>\n <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} />\n </Button>\n );\n }\n\n return (\n <Button testId=\"url\" htmlMarkup={buttonHtmlMarkup} href={url} target={target} {...commonProps}>\n <span id={buttonTextId}>{buttonText}</span>\n <Icon svgIcon={ArrowRight} />\n </Button>\n );\n };\n\n const renderContent = (): React.ReactNode | null => {\n if (!children || (!renderChildrenWhenClosed && !isExpanded)) {\n return null;\n }\n\n const panelDetailsClasses = classNames(panelStyles['panel-details'], {\n [panelStyles['panel-details--open']]: isExpanded,\n [panelStyles['panel-details--line']]: variant === PanelVariant.line,\n [panelStyles['panel-details--white']]: variant === PanelVariant.white,\n });\n\n return (\n <div className={panelDetailsClasses} data-testid=\"panel-details\">\n <div>{children}</div>\n </div>\n );\n };\n\n const renderTitle = () => {\n const titleContainerClasses = classNames(panelStyles['title-container'], {\n [panelStyles['title-container--no-content-a']]: !contentA,\n });\n const titleClasses = classNames(panelStyles['title-container__title'], {\n [panelStyles['title-container__title--badge']]: hasBadge,\n });\n\n return (\n title && (\n <div className={titleContainerClasses}>\n <Title appearance=\"title3\" htmlMarkup={titleHtmlMarkup} id={titleId} className={titleClasses}>\n {title}\n </Title>\n {hasBadge && (\n <div className={panelStyles.panel__badge}>\n <Badge color=\"blueberry\" testId=\"badge-status\">\n {statusMessage}\n </Badge>\n </div>\n )}\n </div>\n )\n );\n };\n\n const layoutProps: LayoutProps = {\n contentA: contentA,\n contentB: contentB,\n contentHeader: contentHeader,\n ctaContainer: renderCTAContainer(),\n icon: icon,\n status: status,\n statusMessage: statusMessage,\n titleElement: renderTitle(),\n };\n\n return (\n <div\n // eslint-disable-next-line no-constant-condition\n tabIndex={focusable ? -1 : undefined}\n ref={ref}\n data-testid={testId}\n className={panelWrapperClasses}\n data-analyticsid={AnalyticsId.Panel}\n >\n <div className={panelClasses}>\n {layout1 && <PanelLayout1 {...layoutProps} />}\n {layout2 && <PanelLayout2 {...layoutProps} />}\n {layout3 && <PanelLayout3 {...layoutProps} layout={layout} />}\n </div>\n {renderContent()}\n </div>\n );\n});\n\nexport default Panel;\n"],"names":["PanelStatus","PanelVariant","PanelLayout","React"],"mappings":";;;;;;;;;;;;;;;;;;;;AAuBY,IAAA,gCAAAA,iBAAL;AACLA,eAAA,QAAS,IAAA;AACTA,eAAA,KAAM,IAAA;AACNA,eAAA,OAAQ,IAAA;AACRA,eAAA,OAAQ,IAAA;AAJEA,SAAAA;AAAA,GAAA,eAAA,CAAA,CAAA;AAOA,IAAA,iCAAAC,kBAAL;AACLA,gBAAA,MAAO,IAAA;AACPA,gBAAA,OAAQ,IAAA;AACRA,gBAAA,QAAS,IAAA;AACTA,gBAAA,MAAO,IAAA;AAJGA,SAAAA;AAAA,GAAA,gBAAA,CAAA,CAAA;AAOA,IAAA,gCAAAC,iBAAL;AACLA,eAAA,SAAU,IAAA;AACVA,eAAA,SAAU,IAAA;AACVA,eAAA,UAAW,IAAA;AACXA,eAAA,UAAW,IAAA;AACXA,eAAA,UAAW,IAAA;AALDA,SAAAA;AAAA,GAAA,eAAA,CAAA,CAAA;AA2EZ,MAAM,aAAsF,CAAC,EAAE,QAAQ,oBAAoB;AACzH,QAAM,aAAa,MAA0D;AAC3E,QAAI,WAAW,SAAmB;AAChC,aAAO,EAAE,OAAO,QAAQ,WAAW,SAAS,cAAc;AAAA,IAAA;AAG5D,WAAO,EAAE,OAAO,QAAQ,OAAO,SAAS,OAAO;AAAA,EACjD;AAEA,QAAM,qBAAqB,WAAW,YAAY,gBAAgB,GAAG;AAAA,IACnE,CAAC,YAAY,qBAAqB,CAAC,GAAG,WAAW;AAAA;AAAA,EAAA,CAClD;AAED,OAAK,WAAW,WAAqB,WAAW,YAAsB,eAAe;AACnF,WACG,qBAAA,OAAA,EAAI,WAAW,oBAAoB,eAAY,kBAC7C,UAAA;AAAA,MAAA,oBAAC,QAAM,GAAG,WAAc,GAAA,MAAM,SAAS,QAAQ;AAAA,MAAG;AAAA,MAAC,oBAAC,UAAM,UAAc,cAAA,CAAA;AAAA,IAAA,GAC3E;AAAA,EAAA;AAIG,SAAA;AACT;AAEA,MAAM,eAAyD,CAAC,EAAE,eAAe;AAC3E,MAAA,OAAO,aAAa,YAAoB,QAAA;AAC5C,6BAAQ,OAAI,EAAA,WAAW,YAAY,kBAAkB,GAAI,UAAS;AACpE;AAEA,MAAM,WAAuD,CAAC,EAAE,MAAM,WAAW;AAC/E,MAAI,QAAQ,MAAM;AAChB,gCACG,OAAI,EAAA,WAAW,YAAY,oBAAoB,GAAG,eAAY,YAC5D,UAAA;AAAA,MAAA,QACE,qBAAA,OAAA,EAAI,WAAW,YAAY,0BAA0B,GACpD,UAAA;AAAA,QAAA,oBAAC,MAAK,EAAA,SAAS,UAAU,MAAM,SAAS,QAAQ;AAAA,QAChD,oBAAC,UAAM,UAAK,KAAA,CAAA;AAAA,MAAA,GACd;AAAA,MAED,QACE,qBAAA,OAAA,EAAI,WAAW,YAAY,0BAA0B,GACpD,UAAA;AAAA,QAAA,oBAAC,MAAK,EAAA,SAAS,OAAO,MAAM,SAAS,QAAQ;AAAA,QAC7C,oBAAC,UAAM,UAAK,KAAA,CAAA;AAAA,MAAA,EACd,CAAA;AAAA,IAAA,GAEJ;AAAA,EAAA;AAIG,SAAA;AACT;AAEA,MAAM,eAAsC,CAAC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,qBAAqB,WAAW,YAAY,iBAAiB,GAAG;AAAA,IACpE,CAAC,YAAY,4BAA4B,CAAC,GAAG;AAAA,EAAA,CAC9C;AACD,QAAM,cAAc,WAAW,YAAY,aAAa,YAAY,uBAAuB,GAAG;AAAA,IAC5F,CAAC,YAAY,yBAAyB,CAAC,GAAG,CAAC,YAAY,CAAC;AAAA,EAAA,CACzD;AAGC,SAAA,qBAAC,OAAI,EAAA,WAAW,oBACd,UAAA;AAAA,IAAC,oBAAA,YAAA,EAAW,QAAgB,cAA8B,CAAA;AAAA,IAC1D,oBAAC,gBAAc,UAAc,cAAA,CAAA;AAAA,IAC5B,QAAQ,oBAAC,OAAI,EAAA,WAAW,aAAc,UAAK,MAAA;AAAA,IAC3C,qBAAA,OAAA,EAAI,WAAW,YAAY,4BAA4B,GACrD,UAAA;AAAA,MAAA;AAAA,MACA;AAAA,IAAA,GACH;AAAA,IACC,YAAa,oBAAA,OAAA,EAAK,UAAS,SAAA,CAAA;AAAA,IAC3B;AAAA,EAAA,GACH;AAEJ;AAEA,MAAM,eAAsC,CAAC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,qBAAqB,WAAW,YAAY,iBAAiB,GAAG;AAAA,IACpE,CAAC,YAAY,4BAA4B,CAAC,GAAG;AAAA,EAAA,CAC9C;AACD,QAAM,cAAc,WAAW,YAAY,aAAa,YAAY,uBAAuB,GAAG;AAAA,IAC5F,CAAC,YAAY,yBAAyB,CAAC,GAAG,CAAC,YAAY,CAAC;AAAA,EAAA,CACzD;AACK,QAAA,kBAAkB,YAAY,8BAA8B;AAGhE,SAAA,qBAAC,OAAI,EAAA,WAAW,oBACd,UAAA;AAAA,IAAC,oBAAA,YAAA,EAAW,QAAgB,cAA8B,CAAA;AAAA,IAC1D,oBAAC,gBAAc,UAAc,cAAA,CAAA;AAAA,IAC5B,QAAQ,oBAAC,OAAI,EAAA,WAAW,aAAc,UAAK,MAAA;AAAA,IAC3C,qBAAA,OAAA,EAAI,WAAW,YAAY,4BAA4B,GACrD,UAAA;AAAA,MAAA;AAAA,MACA;AAAA,IAAA,GACH;AAAA,IACC,YAAY,oBAAC,OAAI,EAAA,WAAW,iBAAkB,UAAS,UAAA;AAAA,IACvD,gBAAgB,oBAAC,OAAI,EAAA,WAAW,iBAAkB,UAAa,aAAA,CAAA;AAAA,EAAA,GAClE;AAEJ;AAEA,MAAM,eAAsC,CAAC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,gBAAgB,WAAW,YAAY,iBAAiB,GAAG;AAAA,IAC/D,CAAC,YAAY,4BAA4B,CAAC,GAAG;AAAA,IAC7C,CAAC,YAAY,oBAAoB,CAAC,GAAG,WAAW;AAAA,IAChD,CAAC,YAAY,oBAAoB,CAAC,GAAG,WAAW;AAAA,IAChD,CAAC,YAAY,oBAAoB,CAAC,GAAG,WAAW;AAAA;AAAA,EAAA,CACjD;AACD,QAAM,cAAc,WAAW,YAAY,aAAa,YAAY,uBAAuB,GAAG;AAAA,IAC5F,CAAC,YAAY,yBAAyB,CAAC,GAAG,CAAC,YAAY,CAAC;AAAA,EAAA,CACzD;AAGC,SAAA,qBAAC,OAAI,EAAA,WAAW,eACd,UAAA;AAAA,IAAC,oBAAA,YAAA,EAAW,QAAgB,cAA8B,CAAA;AAAA,IAC1D,oBAAC,gBAAc,UAAc,cAAA,CAAA;AAAA,IAC5B,QAAQ,oBAAC,OAAI,EAAA,WAAW,aAAc,UAAK,MAAA;AAAA,yBAC3C,OACE,EAAA,UAAA;AAAA,MAAA;AAAA,MACA;AAAA,IAAA,GACH;AAAA,IACC,qBAAA,OAAA,EAAI,WAAW,YAAY,8BAA8B,GACvD,UAAA;AAAA,MAAA,gCAAa,OAAI,EAAA,WAAW,YAAY,yCAAyC,GAAI,UAAS,UAAA;AAAA,MAC9F;AAAA,IAAA,EACH,CAAA;AAAA,EAAA,GACF;AAEJ;AAEA,MAAM,QAAQC,eAAM,WAAW,SAAS,kBAAkB,OAAmB,KAA6C;AAClH,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,kBAAkB;AAAA,IAClB,mBAAmB;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,YAAY;AAAA,IACZ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,2BAA2B;AAAA,IAC3B,SAAS;AAAA,IACT;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA,UAAU;AAAA;AAAA,EAAA,IACR;AAEJ,QAAM,CAAC,YAAY,aAAa,IAAI,UAAU,UAAU,QAAQ;AAChE,QAAM,UAAU,QAAQ;AACxB,QAAM,eAAe,QAAQ;AACvB,QAAA,WAAW,iBAAiB,WAAW;AACvC,QAAA,aAAa,OAAO,aAAa;AACjC,QAAA,UAAU,WAAW,aAAa;AAClC,QAAA,UAAU,CAAC,cAAc,WAAW;AAC1C,QAAM,UAAU,CAAC,eAAe,WAAW,cAAc,WAAW,cAAc,WAAW;AAC7F,QAAM,sBAAsB,WAAW,YAAY,eAAe,GAAG,SAAS;AAExE,QAAA,eAAe,WAAW,YAAY,OAAO;AAAA,IACjD,CAAC,YAAY,aAAa,CAAC,GAAG,YAAY;AAAA,IAC1C,CAAC,YAAY,eAAe,CAAC,GAAG,YAAY;AAAA,IAC5C,CAAC,YAAY,cAAc,CAAC,GAAG,YAAY;AAAA,IAC3C,CAAC,YAAY,aAAa,CAAC,GAAG,YAAY;AAAA,IAC1C,CAAC,YAAY,sBAAsB,CAAC,GAAG,YAAY,UAAqB;AAAA,IACxE,CAAC,YAAY,iBAAiB,CAAC,GAAG;AAAA,IAClC,CAAC,YAAY,YAAY,CAAC,GAAG,WAAW;AAAA,IACxC,CAAC,YAAY,cAAc,CAAC,GAAG,WAAW;AAAA,IAC1C,CAAC,YAAY,cAAc,CAAC,GAAG,WAAW;AAAA,IAC1C,CAAC,YAAY,eAAe,CAAC,GAAG,UAAU,WAAW;AAAA,IACrD,CAAC,YAAY,kBAAkB,CAAC,GAAG;AAAA,IACnC,CAAC,YAAY,eAAe,CAAC,GAAG;AAAA,IAChC,CAAC,YAAY,kBAAkB,CAAC,GAAG,YAAY,OAAO,YAAY,iBAAiB;AAAA,EAAA,CACpF;AAED,QAAM,qBAAqB,MAAM;AACzB,UAAA,YAAY,YAAY,OAAO;AACrC,UAAM,sBAAsB,WAAW,YAAY,sBAAsB,GAAG;AAAA,MAC1E,CAAC,YAAY,oCAAoC,CAAC,GAAG;AAAA,MACrD,CAAC,YAAY,iCAAiC,CAAC,GAAG,CAAC;AAAA,IAAA,CACpD;AAED,YACG,aAAa,QAAQ,SACnB,qBAAA,OAAA,EAAI,WAAW,qBACb,UAAA;AAAA,MAAC,oBAAA,UAAA,EAAS,MAAY,KAAY,CAAA;AAAA,MAClC,iCAAc,OAAI,EAAA,WAAW,YAAY,oBAAoB,GAAI,gCAAsB,CAAA;AAAA,IAAA,GAC1F;AAAA,EAGN;AAEA,QAAM,sBAAsB,MAAuB;AACjD,UAAM,sBAAsB,uBAAuB;AAAA,MACjD,OAAO;AAAA,MACP,IAAK,0BAA0B,GAAG,YAAY,IAAI,sBAAsB,MAAQ,SAAS,WAAW,GAAG,YAAY,IAAI,OAAO;AAAA,MAC9H,QAAQ;AAAA,IAAA,CACT;AAED,UAAM,cAA0D;AAAA,MAC9D,SAAS,gBAAgB,gBAAgB,MAAY,cAAc,CAAC,UAAU;AAAA,MAC9E,WAAW,oBAAoB,YAAY,eAAe,IAAI;AAAA,MAC9D,SAAS;AAAA,MACT,UAAU;AAAA,MACV,GAAG;AAAA,IACL;AAEA,QAAI,UAAU;AACZ,kCACG,QAAO,EAAA,QAAO,UAAS,iBAAe,YAAa,GAAG,aACrD,UAAA;AAAA,QAAA,oBAAC,QAAK,EAAA,IAAI,cAAe,UAAA,aAAa,kBAAkB,YAAW;AAAA,QAClE,oBAAA,MAAA,EAAK,SAAS,aAAa,YAAY,YAAa,CAAA;AAAA,MAAA,GACvD;AAAA,IAAA;AAKF,WAAA,qBAAC,QAAO,EAAA,QAAO,OAAM,YAAY,kBAAkB,MAAM,KAAK,QAAiB,GAAG,aAChF,UAAA;AAAA,MAAC,oBAAA,QAAA,EAAK,IAAI,cAAe,UAAW,YAAA;AAAA,MACpC,oBAAC,MAAK,EAAA,SAAS,WAAY,CAAA;AAAA,IAAA,GAC7B;AAAA,EAEJ;AAEA,QAAM,gBAAgB,MAA8B;AAClD,QAAI,CAAC,YAAa,CAAC,4BAA4B,CAAC,YAAa;AACpD,aAAA;AAAA,IAAA;AAGT,UAAM,sBAAsB,WAAW,YAAY,eAAe,GAAG;AAAA,MACnE,CAAC,YAAY,qBAAqB,CAAC,GAAG;AAAA,MACtC,CAAC,YAAY,qBAAqB,CAAC,GAAG,YAAY;AAAA,MAClD,CAAC,YAAY,sBAAsB,CAAC,GAAG,YAAY;AAAA;AAAA,IAAA,CACpD;AAGC,WAAA,oBAAC,SAAI,WAAW,qBAAqB,eAAY,iBAC/C,UAAA,oBAAC,OAAK,EAAA,SAAA,CAAS,EACjB,CAAA;AAAA,EAEJ;AAEA,QAAM,cAAc,MAAM;AACxB,UAAM,wBAAwB,WAAW,YAAY,iBAAiB,GAAG;AAAA,MACvE,CAAC,YAAY,+BAA+B,CAAC,GAAG,CAAC;AAAA,IAAA,CAClD;AACD,UAAM,eAAe,WAAW,YAAY,wBAAwB,GAAG;AAAA,MACrE,CAAC,YAAY,+BAA+B,CAAC,GAAG;AAAA,IAAA,CACjD;AAED,WACE,SACE,qBAAC,OAAI,EAAA,WAAW,uBACd,UAAA;AAAA,MAAC,oBAAA,OAAA,EAAM,YAAW,UAAS,YAAY,iBAAiB,IAAI,SAAS,WAAW,cAC7E,UACH,MAAA,CAAA;AAAA,MACC,YACC,oBAAC,OAAI,EAAA,WAAW,YAAY,cAC1B,UAAC,oBAAA,OAAA,EAAM,OAAM,aAAY,QAAO,gBAC7B,yBACH,EACF,CAAA;AAAA,IAAA,GAEJ;AAAA,EAGN;AAEA,QAAM,cAA2B;AAAA,IAC/B;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc,mBAAmB;AAAA,IACjC;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc,YAAY;AAAA,EAC5B;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,UAAU,YAAY,KAAK;AAAA,MAC3B;AAAA,MACA,eAAa;AAAA,MACb,WAAW;AAAA,MACX,oBAAkB,YAAY;AAAA,MAE9B,UAAA;AAAA,QAAC,qBAAA,OAAA,EAAI,WAAW,cACb,UAAA;AAAA,UAAW,WAAA,oBAAC,cAAc,EAAA,GAAG,YAAa,CAAA;AAAA,UAC1C,WAAW,oBAAC,cAAc,EAAA,GAAG,YAAa,CAAA;AAAA,UAC1C,WAAW,oBAAC,cAAc,EAAA,GAAG,aAAa,OAAgB,CAAA;AAAA,QAAA,GAC7D;AAAA,QACC,cAAc;AAAA,MAAA;AAAA,IAAA;AAAA,EACjB;AAEJ,CAAC;"}
|
package/TooltipWord.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TooltipWord.js","sources":["../src/components/Tooltip/TooltipWord/TooltipWord.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AnalyticsId } from '../../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface TooltipWordProps {\n /** Ordet som skal ha en tilhørende tooltip */\n children: string;\n /** Callback når ordet klikkes på */\n onClick: () => void;\n /** Callback når ordet får fokus eller hovres over */\n onFocus: () => void;\n /** Callback når ordet mister fokus eller hover forsvinner */\n onBlur: () => void;\n /** Callback når det skrives på tastaturet */\n onKeyDown: (e: React.KeyboardEvent<HTMLSpanElement>) => void;\n /** ID til element som beskriver ordet */\n ariaDescribedById: string;\n /** Valgfri test-id */\n testId?: string;\n}\n\nconst TooltipWord = React.forwardRef<HTMLButtonElement, TooltipWordProps>(\n ({ children, onClick, onFocus, onBlur, onKeyDown, testId, ariaDescribedById }, ref) => (\n <button\n className={styles.word}\n ref={ref}\n onClick={onClick}\n onMouseEnter={onFocus}\n onMouseLeave={onBlur}\n onFocus={onFocus}\n onBlur={onBlur}\n onKeyDown={onKeyDown}\n aria-describedby={ariaDescribedById}\n data-testid={testId}\n data-analyticsid={AnalyticsId.Tooltip}\n >\n {children}\n </button>\n )\n);\n\nTooltipWord.displayName = 'TooltipWord';\n\nexport default TooltipWord;\n"],"names":["React"],"mappings":";;;;AAuBA,MAAM,cAAcA,eAAM;AAAA,EACxB,CAAC,EAAE,UAAU,SAAS,SAAS,QAAQ,WAAW,QAAQ,qBAAqB,QAC7E;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,OAAO;AAAA,MAClB;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA,oBAAkB;AAAA,MAClB,eAAa;AAAA,MACb,oBAAkB,YAAY;AAAA,MAE7B;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,YAAY,cAAc;"}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { default as React } from 'react';
|
|
2
|
-
export interface TooltipProps {
|
|
3
|
-
/** Ordet som skal ha en tilhørende tooltip */
|
|
4
|
-
children: string;
|
|
5
|
-
/** Teksten som skal vises i tooltip */
|
|
6
|
-
description: React.ReactNode;
|
|
7
|
-
/** Valgfri test-id */
|
|
8
|
-
testId?: string;
|
|
9
|
-
}
|
|
10
|
-
export declare const Tooltip: React.FC<TooltipProps>;
|
|
11
|
-
export type TooltipContext = {
|
|
12
|
-
currentTooltip?: string;
|
|
13
|
-
setCurrentTooltip?: (id?: string) => void;
|
|
14
|
-
};
|
|
15
|
-
interface TooltipOpenProviderProps {
|
|
16
|
-
children?: React.ReactNode;
|
|
17
|
-
}
|
|
18
|
-
export declare const TooltipOpenProvider: React.FC<TooltipOpenProviderProps>;
|
|
19
|
-
export default Tooltip;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { useContext, useState, useEffect, useRef } from 'react';\n\nimport TooltipWord from './TooltipWord';\nimport { useDelayedState } from '../../hooks/useDelayedState';\nimport { useUuid } from '../../hooks/useUuid';\nimport HelpBubble from '../HelpBubble';\n\nconst HOVER_DELAY_MS = 200;\n\nexport interface TooltipProps {\n /** Ordet som skal ha en tilhørende tooltip */\n children: string;\n /** Teksten som skal vises i tooltip */\n description: React.ReactNode;\n /** Valgfri test-id */\n testId?: string;\n}\n\nexport const Tooltip: React.FC<TooltipProps> = ({ children, description, testId }) => {\n const helpBubbleId = useUuid();\n const wordRef = useRef<HTMLButtonElement>(null);\n const { currentTooltip, setCurrentTooltip } = useContext(TooltipOpenContext);\n const [{ showTooltip, keepOpen }, setShowTooltipDelayed, setShowTooltip] = useDelayedState(\n { showTooltip: false, keepOpen: false },\n HOVER_DELAY_MS\n );\n\n useEffect(() => {\n if (!setCurrentTooltip) {\n return;\n }\n if (showTooltip) {\n setCurrentTooltip(helpBubbleId);\n } else {\n setCurrentTooltip(undefined);\n }\n }, [showTooltip]);\n\n useEffect(() => {\n if (currentTooltip !== helpBubbleId && typeof currentTooltip !== 'undefined') {\n setShowTooltip(prevState => ({ showTooltip: false, keepOpen: prevState.keepOpen }));\n }\n }, [currentTooltip]);\n\n const handleDocumentClick = (): void => {\n if (!showTooltip) {\n setShowTooltip({ showTooltip: false, keepOpen: false });\n }\n };\n\n useEffect(() => {\n document.addEventListener('mouseup', handleDocumentClick);\n return (): void => {\n document.removeEventListener('mouseup', handleDocumentClick);\n };\n }, []);\n\n const handleTooltipClick = (): void => {\n setShowTooltip(prevState => ({ showTooltip: !prevState.showTooltip, keepOpen: !prevState.keepOpen }));\n };\n\n const handleFocus = (): void => {\n if (!currentTooltip) {\n setShowTooltipDelayed(prevState => ({ showTooltip: true, keepOpen: prevState.keepOpen }));\n }\n };\n\n const handleBlur = (): void => {\n setShowTooltip(prevState => ({ showTooltip: false, keepOpen: prevState.keepOpen }));\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLSpanElement>): void => {\n if (e.key === 'Enter') {\n setShowTooltip(prevState => ({ showTooltip: !prevState.showTooltip, keepOpen: !prevState.keepOpen }));\n }\n if (e.key === 'Escape') {\n setShowTooltip({ showTooltip: false, keepOpen: false });\n }\n };\n\n return (\n <>\n <TooltipWord\n ref={wordRef}\n onClick={handleTooltipClick}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n ariaDescribedById={helpBubbleId}\n testId={testId}\n >\n {children}\n </TooltipWord>\n <HelpBubble helpBubbleId={helpBubbleId} controllerRef={wordRef} role=\"tooltip\" showBubble={showTooltip || keepOpen}>\n {description}\n </HelpBubble>\n </>\n );\n};\n\nexport type TooltipContext = {\n currentTooltip?: string;\n setCurrentTooltip?: (id?: string) => void;\n};\n\nconst TooltipOpenContext = React.createContext<TooltipContext>({\n currentTooltip: undefined,\n});\n\ninterface TooltipOpenProviderProps {\n children?: React.ReactNode;\n}\n\nexport const TooltipOpenProvider: React.FC<TooltipOpenProviderProps> = ({ children }) => {\n const [currentTooltip, setCurrentTooltip] = useState<string>();\n\n return <TooltipOpenContext.Provider value={{ currentTooltip, setCurrentTooltip }}>{children}</TooltipOpenContext.Provider>;\n};\n\nexport default Tooltip;\n"],"names":["React"],"mappings":";;;;;;AAOA,MAAM,iBAAiB;AAWhB,MAAM,UAAkC,CAAC,EAAE,UAAU,aAAa,aAAa;AACpF,QAAM,eAAe,QAAQ;AACvB,QAAA,UAAU,OAA0B,IAAI;AAC9C,QAAM,EAAE,gBAAgB,sBAAsB,WAAW,kBAAkB;AAC3E,QAAM,CAAC,EAAE,aAAa,SAAY,GAAA,uBAAuB,cAAc,IAAI;AAAA,IACzE,EAAE,aAAa,OAAO,UAAU,MAAM;AAAA,IACtC;AAAA,EACF;AAEA,YAAU,MAAM;AACd,QAAI,CAAC,mBAAmB;AACtB;AAAA,IAAA;AAEF,QAAI,aAAa;AACf,wBAAkB,YAAY;AAAA,IAAA,OACzB;AACL,wBAAkB,MAAS;AAAA,IAAA;AAAA,EAC7B,GACC,CAAC,WAAW,CAAC;AAEhB,YAAU,MAAM;AACd,QAAI,mBAAmB,gBAAgB,OAAO,mBAAmB,aAAa;AAC5E,qBAAe,gBAAc,EAAE,aAAa,OAAO,UAAU,UAAU,WAAW;AAAA,IAAA;AAAA,EACpF,GACC,CAAC,cAAc,CAAC;AAEnB,QAAM,sBAAsB,MAAY;AACtC,QAAI,CAAC,aAAa;AAChB,qBAAe,EAAE,aAAa,OAAO,UAAU,OAAO;AAAA,IAAA;AAAA,EAE1D;AAEA,YAAU,MAAM;AACL,aAAA,iBAAiB,WAAW,mBAAmB;AACxD,WAAO,MAAY;AACR,eAAA,oBAAoB,WAAW,mBAAmB;AAAA,IAC7D;AAAA,EACF,GAAG,EAAE;AAEL,QAAM,qBAAqB,MAAY;AACtB,mBAAA,CAAA,eAAc,EAAE,aAAa,CAAC,UAAU,aAAa,UAAU,CAAC,UAAU,SAAW,EAAA;AAAA,EACtG;AAEA,QAAM,cAAc,MAAY;AAC9B,QAAI,CAAC,gBAAgB;AACnB,4BAAsB,gBAAc,EAAE,aAAa,MAAM,UAAU,UAAU,WAAW;AAAA,IAAA;AAAA,EAE5F;AAEA,QAAM,aAAa,MAAY;AAC7B,mBAAe,gBAAc,EAAE,aAAa,OAAO,UAAU,UAAU,WAAW;AAAA,EACpF;AAEM,QAAA,gBAAgB,CAAC,MAAkD;AACnE,QAAA,EAAE,QAAQ,SAAS;AACN,qBAAA,CAAA,eAAc,EAAE,aAAa,CAAC,UAAU,aAAa,UAAU,CAAC,UAAU,SAAW,EAAA;AAAA,IAAA;AAElG,QAAA,EAAE,QAAQ,UAAU;AACtB,qBAAe,EAAE,aAAa,OAAO,UAAU,OAAO;AAAA,IAAA;AAAA,EAE1D;AAEA,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,SAAS;AAAA,QACT,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,mBAAmB;AAAA,QACnB;AAAA,QAEC;AAAA,MAAA;AAAA,IACH;AAAA,IACA,oBAAC,YAAW,EAAA,cAA4B,eAAe,SAAS,MAAK,WAAU,YAAY,eAAe,UACvG,UACH,YAAA,CAAA;AAAA,EAAA,GACF;AAEJ;AAOA,MAAM,qBAAqBA,eAAM,cAA8B;AAAA,EAC7D,gBAAgB;AAClB,CAAC;AAMM,MAAM,sBAA0D,CAAC,EAAE,eAAe;AACvF,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAiB;AAEtD,SAAA,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO,EAAE,gBAAgB,qBAAsB,UAAS;AAC9F;"}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
/package/components/{Tooltip/TooltipWord → HelpTooltip/HelpTooltipWord}/styles.module.scss.d.ts
RENAMED
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|