@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.
Files changed (67) hide show
  1. package/CHANGELOG.md +71 -10
  2. package/{TooltipWord.js → HelpTooltipWord.js} +6 -6
  3. package/HelpTooltipWord.js.map +1 -0
  4. package/LazyIcon.js.map +1 -1
  5. package/LazyIllustration.js.map +1 -1
  6. package/{Panel.js → PanelOld.js} +30 -30
  7. package/PanelOld.js.map +1 -0
  8. package/components/FormGroup/formGroup.module.scss +10 -0
  9. package/components/FormGroup/formGroup.module.scss.d.ts +10 -0
  10. package/components/HelpTooltip/HelpTooltip.d.ts +19 -0
  11. package/components/{Tooltip/TooltipWord/TooltipWord.d.ts → HelpTooltip/HelpTooltipWord/HelpTooltipWord.d.ts} +3 -3
  12. package/components/HelpTooltip/HelpTooltipWord/index.d.ts +3 -0
  13. package/components/HelpTooltip/HelpTooltipWord/index.js +5 -0
  14. package/components/HelpTooltip/index.d.ts +3 -0
  15. package/components/{Tooltip → HelpTooltip}/index.js +18 -18
  16. package/components/HelpTooltip/index.js.map +1 -0
  17. package/components/Mittens/styles.module.scss +3 -0
  18. package/components/Mittens/styles.module.scss.d.ts +9 -0
  19. package/components/PanelList/PanelList.d.ts +2 -2
  20. package/components/PanelList/index.js +5 -5
  21. package/components/PanelList/index.js.map +1 -1
  22. package/components/{Panel/Panel.d.ts → PanelOld/PanelOld.d.ts} +10 -10
  23. package/components/PanelOld/index.d.ts +3 -0
  24. package/components/PanelOld/index.js +9 -0
  25. package/components/PopMenu/index.js.map +1 -1
  26. package/components/PopMenu/styles.module.scss +8 -2
  27. package/constants.d.ts +2 -2
  28. package/constants.js +2 -2
  29. package/constants.js.map +1 -1
  30. package/docs/HelpTooltipExample/HelpTooltipExample.d.ts +4 -0
  31. package/docs/HelpTooltipExample/index.d.ts +3 -0
  32. package/package.json +1 -2
  33. package/scss/_grid.scss +4 -4
  34. package/scss/bootstrap/LICENSE +22 -0
  35. package/scss/bootstrap/scss/_functions.scss +210 -0
  36. package/scss/bootstrap/scss/_grid.scss +73 -0
  37. package/scss/bootstrap/scss/_variables.scss +990 -0
  38. package/scss/bootstrap/scss/bootstrap-grid.scss +30 -0
  39. package/scss/bootstrap/scss/mixins/_breakpoints.scss +131 -0
  40. package/scss/bootstrap/scss/mixins/_deprecate.scss +11 -0
  41. package/scss/bootstrap/scss/mixins/_grid-framework.scss +89 -0
  42. package/scss/bootstrap/scss/mixins/_grid.scss +76 -0
  43. package/scss/bootstrap/scss/utilities/_display.scss +30 -0
  44. package/scss/bootstrap/scss/utilities/_flex.scss +120 -0
  45. package/scss/bootstrap/scss/utilities/_spacing.scss +80 -0
  46. package/scss/bootstrap/scss/vendor/_rfs.scss +233 -0
  47. package/scss/helsenorge.scss +1 -1
  48. package/Panel.js.map +0 -1
  49. package/TooltipWord.js.map +0 -1
  50. package/components/Panel/index.d.ts +0 -3
  51. package/components/Panel/index.js +0 -9
  52. package/components/Tooltip/Tooltip.d.ts +0 -19
  53. package/components/Tooltip/TooltipWord/index.d.ts +0 -3
  54. package/components/Tooltip/TooltipWord/index.js +0 -5
  55. package/components/Tooltip/index.d.ts +0 -3
  56. package/components/Tooltip/index.js.map +0 -1
  57. package/docs/TooltipExample/TooltipExample.d.ts +0 -4
  58. package/docs/TooltipExample/index.d.ts +0 -3
  59. /package/components/{Panel/Panel.test.d.ts → HelpTooltip/HelpTooltip.test.d.ts} +0 -0
  60. /package/components/{Tooltip/TooltipWord → HelpTooltip/HelpTooltipWord}/index.js.map +0 -0
  61. /package/components/{Tooltip/TooltipWord → HelpTooltip/HelpTooltipWord}/styles.module.scss +0 -0
  62. /package/components/{Tooltip/TooltipWord → HelpTooltip/HelpTooltipWord}/styles.module.scss.d.ts +0 -0
  63. /package/components/{Tooltip/Tooltip.test.d.ts → PanelOld/PanelOld.test.d.ts} +0 -0
  64. /package/components/{Panel → PanelOld}/index.js.map +0 -0
  65. /package/components/{Panel → PanelOld}/styles.module.scss +0 -0
  66. /package/components/{Panel → PanelOld}/styles.module.scss.d.ts +0 -0
  67. /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
+ }
@@ -5,4 +5,4 @@
5
5
  @use 'fonts' as *;
6
6
  @use 'body' as *;
7
7
  @use 'print' as *;
8
- @import 'bootstrap/scss/bootstrap-grid';
8
+ @import './bootstrap/scss/bootstrap-grid';
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":"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"}
@@ -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,3 +0,0 @@
1
- import { default as Panel } from './Panel';
2
- export * from './Panel';
3
- export default Panel;
@@ -1,9 +0,0 @@
1
- import { P as Panel } from "../../Panel.js";
2
- import { c, a, b } from "../../Panel.js";
3
- export {
4
- c as PanelLayout,
5
- a as PanelStatus,
6
- b as PanelVariant,
7
- Panel as default
8
- };
9
- //# sourceMappingURL=index.js.map
@@ -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,3 +0,0 @@
1
- import { default as TooltipWord } from './TooltipWord';
2
- export * from './TooltipWord';
3
- export default TooltipWord;
@@ -1,5 +0,0 @@
1
- import { T as TooltipWord } from "../../../TooltipWord.js";
2
- export {
3
- TooltipWord as default
4
- };
5
- //# sourceMappingURL=index.js.map
@@ -1,3 +0,0 @@
1
- import { default as Tooltip } from './Tooltip';
2
- export * from './Tooltip';
3
- 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;"}
@@ -1,4 +0,0 @@
1
- import { default as React } from 'react';
2
- import { TooltipProps } from '../../components/Tooltip';
3
- declare const TooltipExample: React.FC<TooltipProps>;
4
- export default TooltipExample;
@@ -1,3 +0,0 @@
1
- import { default as TooltipExample } from './TooltipExample';
2
- export * from './TooltipExample';
3
- export default TooltipExample;
File without changes
File without changes