@helsenorge/designsystem-react 9.2.0 → 9.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,16 @@
|
|
|
1
|
+
## [9.2.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv9.1.0&targetVersion=GTv9.2.0) (2024-11-20)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* **tabs:** mulighet for å scrolle i tablist ([74adc25](https://github.com/helsenorge/designsystem/commit/74adc25bea3967ec15a5be955f10ad6a94854eb1)), closes [#337089](https://github.com/helsenorge/designsystem/issues/337089)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **helppanel:** styling på helppanel i fluid size ([d3df2eb](https://github.com/helsenorge/designsystem/commit/d3df2ebecb1dff71f3b334702ab579ba36da52e9)), closes [#332570](https://github.com/helsenorge/designsystem/issues/332570)
|
|
12
|
+
* **textarea:** controlled value warning ([371c8bd](https://github.com/helsenorge/designsystem/commit/371c8bd9ec2c453ed25fc265bef4afb566546151)), closes [#337333](https://github.com/helsenorge/designsystem/issues/337333)
|
|
13
|
+
|
|
1
14
|
## [9.1.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv9.0.0&targetVersion=GTv9.1.0) (2024-11-14)
|
|
2
15
|
|
|
3
16
|
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { TitleTags } from './../Title/Title';
|
|
3
|
+
export type TileVariants = 'normal' | 'compact';
|
|
3
4
|
interface TileProps extends Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick' | 'rel'> {
|
|
4
5
|
children?: React.ReactNode;
|
|
5
6
|
/** Adds custom classes to the element. */
|
|
@@ -14,6 +15,8 @@ interface TileProps extends Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>,
|
|
|
14
15
|
description?: string;
|
|
15
16
|
/** Sets a fixed max and min width for the tile. */
|
|
16
17
|
fixed?: boolean;
|
|
18
|
+
/** Sets the visual variant of the component */
|
|
19
|
+
variant?: TileVariants;
|
|
17
20
|
/** Sets the data-testid attribute. */
|
|
18
21
|
testId?: string;
|
|
19
22
|
}
|
package/components/Tile/index.js
CHANGED
|
@@ -1,73 +1,74 @@
|
|
|
1
|
-
import { jsx as p, jsxs as
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import { AnalyticsId as
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
1
|
+
import { jsx as p, jsxs as N } from "react/jsx-runtime";
|
|
2
|
+
import l from "react";
|
|
3
|
+
import d from "classnames";
|
|
4
|
+
import { AnalyticsId as S, IconSize as u } from "../../constants.js";
|
|
5
|
+
import { useBreakpoint as j, Breakpoint as z } from "../../hooks/useBreakpoint.js";
|
|
6
|
+
import { useHover as B } from "../../hooks/useHover.js";
|
|
7
|
+
import { mergeRefs as E } from "../../utils/refs.js";
|
|
7
8
|
import e from "./styles.module.scss";
|
|
8
|
-
const
|
|
9
|
-
const { children:
|
|
9
|
+
const T = l.forwardRef((r, s) => {
|
|
10
|
+
const { children: t, className: a, htmlMarkup: o = "span", highlighted: c } = r, n = d(
|
|
10
11
|
e.tile__title,
|
|
11
12
|
{
|
|
12
|
-
[e["tile__title--highlighted"]]:
|
|
13
|
-
[e["tile__title--compact"]]: t
|
|
13
|
+
[e["tile__title--highlighted"]]: c
|
|
14
14
|
},
|
|
15
|
-
|
|
15
|
+
a
|
|
16
16
|
);
|
|
17
|
-
return /* @__PURE__ */ p(
|
|
17
|
+
return /* @__PURE__ */ p(o, { className: n, ref: s, children: t });
|
|
18
18
|
});
|
|
19
|
-
|
|
20
|
-
const
|
|
19
|
+
T.displayName = "Title";
|
|
20
|
+
const _ = l.forwardRef((r, s) => {
|
|
21
21
|
const {
|
|
22
|
-
children:
|
|
23
|
-
icon:
|
|
24
|
-
title:
|
|
25
|
-
className:
|
|
26
|
-
description:
|
|
27
|
-
fixed:
|
|
28
|
-
highlighted:
|
|
29
|
-
testId:
|
|
30
|
-
target:
|
|
31
|
-
rel:
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
22
|
+
children: t,
|
|
23
|
+
icon: a,
|
|
24
|
+
title: o,
|
|
25
|
+
className: c = "",
|
|
26
|
+
description: n,
|
|
27
|
+
fixed: f = !1,
|
|
28
|
+
highlighted: m = !1,
|
|
29
|
+
testId: k,
|
|
30
|
+
target: h,
|
|
31
|
+
rel: v,
|
|
32
|
+
variant: C = "normal",
|
|
33
|
+
href: b,
|
|
34
|
+
onClick: w
|
|
35
|
+
} = r, { hoverRef: x, isHovered: y } = B(), g = j() < z.md, i = C === "compact", R = d(
|
|
35
36
|
e.tile,
|
|
36
37
|
{
|
|
37
|
-
[e["tile--fixed"]]:
|
|
38
|
-
[e["tile--compact"]]:
|
|
39
|
-
[e["tile--highlighted"]]:
|
|
38
|
+
[e["tile--fixed"]]: f,
|
|
39
|
+
[e["tile--compact"]]: i,
|
|
40
|
+
[e["tile--highlighted"]]: m
|
|
40
41
|
},
|
|
41
|
-
|
|
42
|
-
),
|
|
43
|
-
[e["title-wrapper--compact"]]:
|
|
42
|
+
c
|
|
43
|
+
), I = d(e["title-wrapper"], {
|
|
44
|
+
[e["title-wrapper--compact"]]: i
|
|
44
45
|
});
|
|
45
|
-
return /* @__PURE__ */
|
|
46
|
+
return /* @__PURE__ */ N(
|
|
46
47
|
"a",
|
|
47
48
|
{
|
|
48
|
-
ref:
|
|
49
|
-
href:
|
|
50
|
-
target:
|
|
51
|
-
rel:
|
|
52
|
-
className:
|
|
53
|
-
"data-testid":
|
|
54
|
-
"data-analyticsid":
|
|
55
|
-
onClick:
|
|
49
|
+
ref: E([s, x]),
|
|
50
|
+
href: b,
|
|
51
|
+
target: h,
|
|
52
|
+
rel: h === "_blank" ? "noopener noreferrer" : v,
|
|
53
|
+
className: R,
|
|
54
|
+
"data-testid": k,
|
|
55
|
+
"data-analyticsid": S.Tile,
|
|
56
|
+
onClick: w,
|
|
56
57
|
children: [
|
|
57
|
-
/* @__PURE__ */
|
|
58
|
-
|
|
59
|
-
|
|
58
|
+
/* @__PURE__ */ N("div", { className: I, children: [
|
|
59
|
+
l.cloneElement(a, { size: g ? u.Small : u.Medium, isHovered: y, color: m ? "white" : "black" }),
|
|
60
|
+
l.cloneElement(o, { highlighted: m, compact: i })
|
|
60
61
|
] }),
|
|
61
|
-
|
|
62
|
-
|
|
62
|
+
!i && !g && /* @__PURE__ */ p("p", { className: e.tile__description, children: n }),
|
|
63
|
+
t && /* @__PURE__ */ p("div", { className: e.tile__children, children: t })
|
|
63
64
|
]
|
|
64
65
|
}
|
|
65
66
|
);
|
|
66
67
|
});
|
|
67
|
-
|
|
68
|
-
|
|
68
|
+
_.displayName = "Tile";
|
|
69
|
+
_.Title = T;
|
|
69
70
|
export {
|
|
70
|
-
|
|
71
|
-
|
|
71
|
+
_ as Tile,
|
|
72
|
+
_ as default
|
|
72
73
|
};
|
|
73
74
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/Tile/Tile.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { TitleTags } from './../Title/Title';\nimport {
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/Tile/Tile.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { TitleTags } from './../Title/Title';\nimport { useBreakpoint, Breakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { mergeRefs } from '../../utils/refs';\nimport { IconSize } from '../Icon';\n\nimport tileStyles from './styles.module.scss';\n\nexport type TileVariants = 'normal' | 'compact';\n\ninterface TileProps extends Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick' | 'rel'> {\n children?: React.ReactNode;\n /** Adds custom classes to the element. */\n className?: string;\n /**\tSets the icon to be displayed inside the tile. */\n icon: React.ReactElement;\n /**\tSets the title to be displayed inside the tile. */\n title: React.ReactElement;\n /** Toggles the highlighted style of the tile. */\n highlighted?: boolean;\n /** Sets the description to be displayed inside the tile. */\n description?: string;\n /** Sets a fixed max and min width for the tile. */\n fixed?: boolean;\n /** Sets the visual variant of the component */\n variant?: TileVariants;\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\ninterface TileTitleProps {\n children: React.ReactNode;\n className?: string;\n htmlMarkup?: TitleTags;\n highlighted?: boolean;\n compact?: boolean;\n}\n\nexport interface TileCompound extends React.ForwardRefExoticComponent<TileProps & React.RefAttributes<HTMLAnchorElement>> {\n Title: React.ForwardRefExoticComponent<TileTitleProps & React.RefAttributes<HTMLHeadingElement>>;\n}\n\nconst Title = React.forwardRef<HTMLHeadingElement, TileTitleProps>((props, ref) => {\n const { children, className, htmlMarkup = 'span', highlighted } = props;\n const titleClasses = classNames(\n tileStyles['tile__title'],\n {\n [tileStyles['tile__title--highlighted']]: highlighted,\n },\n className\n );\n const CustomTag = htmlMarkup;\n\n return (\n <CustomTag className={titleClasses} ref={ref}>\n {children}\n </CustomTag>\n );\n});\n\nTitle.displayName = 'Title';\n\nexport const Tile = React.forwardRef<HTMLAnchorElement, TileProps>((props, ref) => {\n const {\n children,\n icon,\n title,\n className = '',\n description,\n fixed = false,\n highlighted = false,\n testId,\n target,\n rel,\n variant = 'normal',\n href,\n onClick,\n } = props;\n const { hoverRef, isHovered } = useHover<HTMLAnchorElement>();\n const breakpoint = useBreakpoint();\n const mobile = breakpoint < Breakpoint.md;\n const compact = variant === 'compact';\n const tileClasses = classNames(\n tileStyles.tile,\n {\n [tileStyles['tile--fixed']]: fixed,\n [tileStyles['tile--compact']]: compact,\n [tileStyles['tile--highlighted']]: highlighted,\n },\n className\n );\n const tileTitleWrapperClasses = classNames(tileStyles['title-wrapper'], {\n [tileStyles['title-wrapper--compact']]: compact,\n });\n\n return (\n <a\n ref={mergeRefs([ref, hoverRef])}\n href={href}\n target={target}\n rel={target === '_blank' ? 'noopener noreferrer' : rel}\n className={tileClasses}\n data-testid={testId}\n data-analyticsid={AnalyticsId.Tile}\n onClick={onClick}\n >\n <div className={tileTitleWrapperClasses}>\n {React.cloneElement(icon, { size: mobile ? IconSize.Small : IconSize.Medium, isHovered, color: highlighted ? 'white' : 'black' })}\n {React.cloneElement(title, { highlighted: highlighted, compact: compact })}\n </div>\n {!compact && !mobile && <p className={tileStyles.tile__description}>{description}</p>}\n {children && <div className={tileStyles.tile__children}>{children}</div>}\n </a>\n );\n}) as TileCompound;\n\nTile.displayName = 'Tile';\nTile.Title = Title;\n\nexport default Tile;\n"],"names":["Title","React","props","ref","children","className","htmlMarkup","highlighted","titleClasses","classNames","tileStyles","jsx","Tile","icon","title","description","fixed","testId","target","rel","variant","href","onClick","hoverRef","isHovered","useHover","mobile","useBreakpoint","Breakpoint","compact","tileClasses","tileTitleWrapperClasses","jsxs","mergeRefs","AnalyticsId","IconSize"],"mappings":";;;;;;;;AA+CA,MAAMA,IAAQC,EAAM,WAA+C,CAACC,GAAOC,MAAQ;AACjF,QAAM,EAAE,UAAAC,GAAU,WAAAC,GAAW,YAAAC,IAAa,QAAQ,aAAAC,EAAgB,IAAAL,GAC5DM,IAAeC;AAAA,IACnBC,EAAW;AAAA,IACX;AAAA,MACE,CAACA,EAAW,0BAA0B,CAAC,GAAGH;AAAA,IAC5C;AAAA,IACAF;AAAA,EAAA;AAIF,SACG,gBAAAM,EAHeL,GAGf,EAAU,WAAWE,GAAc,KAAAL,GACjC,UAAAC,EACH,CAAA;AAEJ,CAAC;AAEDJ,EAAM,cAAc;AAEb,MAAMY,IAAOX,EAAM,WAAyC,CAACC,GAAOC,MAAQ;AAC3E,QAAA;AAAA,IACJ,UAAAC;AAAA,IACA,MAAAS;AAAA,IACA,OAAAC;AAAA,IACA,WAAAT,IAAY;AAAA,IACZ,aAAAU;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,aAAAT,IAAc;AAAA,IACd,QAAAU;AAAA,IACA,QAAAC;AAAA,IACA,KAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,MAAAC;AAAA,IACA,SAAAC;AAAA,EACE,IAAApB,GACE,EAAE,UAAAqB,GAAU,WAAAC,EAAU,IAAIC,EAA4B,GAEtDC,IADaC,MACSC,EAAW,IACjCC,IAAUT,MAAY,WACtBU,IAAcrB;AAAA,IAClBC,EAAW;AAAA,IACX;AAAA,MACE,CAACA,EAAW,aAAa,CAAC,GAAGM;AAAA,MAC7B,CAACN,EAAW,eAAe,CAAC,GAAGmB;AAAA,MAC/B,CAACnB,EAAW,mBAAmB,CAAC,GAAGH;AAAA,IACrC;AAAA,IACAF;AAAA,EAAA,GAEI0B,IAA0BtB,EAAWC,EAAW,eAAe,GAAG;AAAA,IACtE,CAACA,EAAW,wBAAwB,CAAC,GAAGmB;AAAA,EAAA,CACzC;AAGC,SAAA,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKC,EAAU,CAAC9B,GAAKoB,CAAQ,CAAC;AAAA,MAC9B,MAAAF;AAAA,MACA,QAAAH;AAAA,MACA,KAAKA,MAAW,WAAW,wBAAwBC;AAAA,MACnD,WAAWW;AAAA,MACX,eAAab;AAAA,MACb,oBAAkBiB,EAAY;AAAA,MAC9B,SAAAZ;AAAA,MAEA,UAAA;AAAA,QAAC,gBAAAU,EAAA,OAAA,EAAI,WAAWD,GACb,UAAA;AAAA,UAAA9B,EAAM,aAAaY,GAAM,EAAE,MAAMa,IAASS,EAAS,QAAQA,EAAS,QAAQ,WAAAX,GAAW,OAAOjB,IAAc,UAAU,SAAS;AAAA,UAC/HN,EAAM,aAAaa,GAAO,EAAE,aAAAP,GAA0B,SAAAsB,GAAkB;AAAA,QAAA,GAC3E;AAAA,QACC,CAACA,KAAW,CAACH,uBAAW,KAAE,EAAA,WAAWhB,EAAW,mBAAoB,UAAYK,EAAA,CAAA;AAAA,QAChFX,KAAa,gBAAAO,EAAA,OAAA,EAAI,WAAWD,EAAW,gBAAiB,UAAAN,GAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGxE,CAAC;AAEDQ,EAAK,cAAc;AACnBA,EAAK,QAAQZ;"}
|
|
@@ -1,22 +1,26 @@
|
|
|
1
1
|
@use 'sass:map';
|
|
2
|
+
@import '../../scss/font-settings';
|
|
2
3
|
@import '../../scss/palette';
|
|
3
4
|
@import '../../scss/spacers';
|
|
4
5
|
@import '../../scss/breakpoints';
|
|
6
|
+
@import '../../scss/screen-reader';
|
|
7
|
+
@import '../../scss/supernova/styles/colors';
|
|
5
8
|
|
|
6
9
|
@mixin tile-title {
|
|
7
10
|
overflow-wrap: break-word;
|
|
8
11
|
word-wrap: break-word;
|
|
9
12
|
word-break: break-word;
|
|
10
|
-
font-size:
|
|
13
|
+
font-size: $font-size-sm;
|
|
11
14
|
text-align: left;
|
|
12
|
-
line-height: 1.
|
|
13
|
-
font-weight:
|
|
14
|
-
margin: 0;
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
font-size:
|
|
19
|
-
|
|
15
|
+
line-height: 1.74rem;
|
|
16
|
+
font-weight: 400;
|
|
17
|
+
margin: getSpacer(3xs) 0 0 getSpacer(2xs);
|
|
18
|
+
|
|
19
|
+
@media (min-width: map.get($grid-breakpoints, md)) {
|
|
20
|
+
font-weight: 600;
|
|
21
|
+
font-size: $font-size-md;
|
|
22
|
+
line-height: 1.625rem;
|
|
23
|
+
margin-top: getSpacer(s);
|
|
20
24
|
}
|
|
21
25
|
}
|
|
22
26
|
|
|
@@ -26,15 +30,21 @@
|
|
|
26
30
|
|
|
27
31
|
display: flex;
|
|
28
32
|
width: inherit;
|
|
29
|
-
padding:
|
|
33
|
+
padding: getSpacer(2xs) getSpacer(2xs) getSpacer(xs);
|
|
30
34
|
flex-direction: column;
|
|
31
|
-
justify-content:
|
|
32
|
-
background-color:
|
|
35
|
+
justify-content: center;
|
|
36
|
+
background-color: var(--core-color-white);
|
|
33
37
|
color: $black;
|
|
34
38
|
text-decoration: none;
|
|
35
39
|
cursor: pointer;
|
|
40
|
+
border: 1px solid var(--color-base-border-blueberry);
|
|
36
41
|
outline: none;
|
|
37
42
|
|
|
43
|
+
@media (min-width: map.get($grid-breakpoints, md)) {
|
|
44
|
+
padding: getSpacer(l) getSpacer(m) getSpacer(l) getSpacer(s);
|
|
45
|
+
justify-content: flex-start;
|
|
46
|
+
}
|
|
47
|
+
|
|
38
48
|
@media print {
|
|
39
49
|
border: 1px solid $black;
|
|
40
50
|
}
|
|
@@ -45,7 +55,11 @@
|
|
|
45
55
|
}
|
|
46
56
|
|
|
47
57
|
&--compact {
|
|
48
|
-
padding:
|
|
58
|
+
padding: getSpacer(2xs) getSpacer(2xs) getSpacer(xs);
|
|
59
|
+
|
|
60
|
+
@media (min-width: map.get($grid-breakpoints, md)) {
|
|
61
|
+
padding: getSpacer(s) getSpacer(m) getSpacer(s) getSpacer(s);
|
|
62
|
+
}
|
|
49
63
|
}
|
|
50
64
|
|
|
51
65
|
svg {
|
|
@@ -53,39 +67,36 @@
|
|
|
53
67
|
}
|
|
54
68
|
|
|
55
69
|
&:hover,
|
|
56
|
-
&:active
|
|
57
|
-
|
|
58
|
-
background-color: $neutral100;
|
|
70
|
+
&:active {
|
|
71
|
+
background-color: var(--color-action-background-ondark-selected);
|
|
59
72
|
}
|
|
60
73
|
|
|
61
|
-
&:focus {
|
|
62
|
-
box-shadow: 0 0 0
|
|
74
|
+
&:focus-visible {
|
|
75
|
+
box-shadow: 0 0 0 3px var(--color-action-border-onlight-focus);
|
|
76
|
+
border-color: var(--color-action-border-onlight-focus);
|
|
63
77
|
}
|
|
64
78
|
|
|
65
79
|
&--highlighted {
|
|
66
80
|
background-color: $blueberry500;
|
|
81
|
+
border-color: $blueberry500;
|
|
67
82
|
color: $white;
|
|
68
83
|
|
|
69
84
|
&:hover,
|
|
70
|
-
&:active
|
|
71
|
-
&:focus {
|
|
85
|
+
&:active {
|
|
72
86
|
background-color: $blueberry700;
|
|
87
|
+
border-color: $blueberry700;
|
|
73
88
|
}
|
|
74
89
|
|
|
75
|
-
&:focus {
|
|
76
|
-
|
|
90
|
+
&:focus-visible {
|
|
91
|
+
border-color: var(--color-action-border-onlight-focus);
|
|
77
92
|
}
|
|
78
93
|
}
|
|
79
94
|
|
|
80
95
|
&__title {
|
|
81
96
|
@include tile-title;
|
|
82
|
-
|
|
83
|
-
&--compact {
|
|
84
|
-
margin: 0 0 0 1.5rem;
|
|
85
|
-
}
|
|
86
97
|
}
|
|
87
98
|
|
|
88
|
-
#{$tile}:focus & {
|
|
99
|
+
#{$tile}:focus-visible & {
|
|
89
100
|
&__title {
|
|
90
101
|
&--highlighted {
|
|
91
102
|
text-decoration: underline;
|
|
@@ -106,12 +117,11 @@
|
|
|
106
117
|
|
|
107
118
|
.title-wrapper {
|
|
108
119
|
display: flex;
|
|
109
|
-
flex-direction:
|
|
120
|
+
flex-direction: column;
|
|
110
121
|
align-items: center;
|
|
111
122
|
padding-bottom: 0.5rem;
|
|
112
123
|
|
|
113
|
-
@media (min-width: map.get($grid-breakpoints,
|
|
114
|
-
flex-direction: column;
|
|
124
|
+
@media (min-width: map.get($grid-breakpoints, md)) {
|
|
115
125
|
align-items: start;
|
|
116
126
|
|
|
117
127
|
@media print {
|