@helsenorge/designsystem-react 6.1.2 → 6.1.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
CHANGED
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
## [6.1.2](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv6.1.1&targetVersion=GTv6.1.2) (2024-02-12)
|
|
2
|
+
|
|
3
|
+
### Bug Fixes
|
|
4
|
+
|
|
5
|
+
- datepicker date-fns gjøres external
|
|
6
|
+
([36d749c](https://github.com/helsenorge/designsystem/commit/36d749cfd83f16ac45d8fd8eb0bf5b31d7b02b7d)), closes
|
|
7
|
+
[#318830](https://github.com/helsenorge/designsystem/issues/318830)
|
|
8
|
+
- input, textarea, dropdown og select har dashed border når disabled
|
|
9
|
+
([5f5c4ca](https://github.com/helsenorge/designsystem/commit/5f5c4ca5a12d41f0413da4319e24fb8c0e6c7437)), closes
|
|
10
|
+
[#308128](https://github.com/helsenorge/designsystem/issues/308128)
|
|
11
|
+
|
|
1
12
|
## [6.1.1](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv6.1.0&targetVersion=GTv6.1.1) (2024-02-06)
|
|
2
13
|
|
|
3
14
|
### Bug Fixes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PromoPanel.d.ts","sourceRoot":"","sources":["../../../src/components/PromoPanel/PromoPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAKlE,OAAc,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAI5C,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC,YAAY,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC,CAAC;AAEzF,UAAU,eAAe;IACvB,wGAAwG;IACxG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2BAA2B;IAC3B,YAAY,CAAC,EAAE,QAAQ,GAAG,qBAAqB,CAAC;IAChD,mDAAmD;IACnD,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,mDAAmD;IACnD,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,uCAAuC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wHAAwH;IACxH,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,gFAAgF;IAChF,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,8EAA8E;IAC9E,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,gFAAgF;IAChF,aAAa,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IACnC,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA8BD,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,
|
|
1
|
+
{"version":3,"file":"PromoPanel.d.ts","sourceRoot":"","sources":["../../../src/components/PromoPanel/PromoPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAKlE,OAAc,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAI5C,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC,YAAY,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC,CAAC;AAEzF,UAAU,eAAe;IACvB,wGAAwG;IACxG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2BAA2B;IAC3B,YAAY,CAAC,EAAE,QAAQ,GAAG,qBAAqB,CAAC;IAChD,mDAAmD;IACnD,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,mDAAmD;IACnD,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,uCAAuC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wHAAwH;IACxH,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,gFAAgF;IAChF,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,8EAA8E;IAC9E,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,gFAAgF;IAChF,aAAa,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IACnC,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA8BD,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA8DzC,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
import t from "react";
|
|
2
2
|
import h from "classnames";
|
|
3
|
-
import { AnalyticsId as C, IconSize as
|
|
4
|
-
import { useBreakpoint as
|
|
5
|
-
import { useHover as
|
|
3
|
+
import { AnalyticsId as C, IconSize as i } from "../../constants.js";
|
|
4
|
+
import { useBreakpoint as E, Breakpoint as a } from "../../hooks/useBreakpoint.js";
|
|
5
|
+
import { useHover as P } from "../../hooks/useHover.js";
|
|
6
6
|
import { getColor as m } from "../../theme/currys/color.js";
|
|
7
|
-
import { Icon as
|
|
8
|
-
import
|
|
7
|
+
import { Icon as b } from "../Icon/Icon.js";
|
|
8
|
+
import g from "../Icons/ArrowRight.js";
|
|
9
9
|
import _ from "../Icons/ArrowUpRight.js";
|
|
10
10
|
import v from "../LazyIllustration/LazyIllustration.js";
|
|
11
11
|
import y from "../Title/Title.js";
|
|
12
12
|
import n from "./styles.module.scss";
|
|
13
13
|
const I = (e) => e.linkComponent ? t.cloneElement(e.linkComponent, { children: e.children }) : e.linkHtmlMarkup === "button" ? /* @__PURE__ */ t.createElement("button", { type: "button", onClick: e.linkOnClick }, e.children) : /* @__PURE__ */ t.createElement("a", { href: e.href, target: e.target, onClick: e.linkOnClick }, e.children), N = (e) => {
|
|
14
|
-
const { isHovered: c, hoverRef: u } =
|
|
14
|
+
const { isHovered: c, hoverRef: u } = P(), { color: l = "neutral", titleHtmlMarkup: k = "h2", linkHtmlMarkup: f = "a" } = e, r = E(), s = h(
|
|
15
15
|
n.promopanel,
|
|
16
|
-
n[`promopanel--${
|
|
16
|
+
n[`promopanel--${l}`],
|
|
17
17
|
!e.illustration && n["promopanel--no-illustration"]
|
|
18
|
-
),
|
|
18
|
+
), o = /* @__PURE__ */ t.createElement(
|
|
19
19
|
I,
|
|
20
20
|
{
|
|
21
21
|
href: e.href,
|
|
@@ -25,20 +25,20 @@ const I = (e) => e.linkComponent ? t.cloneElement(e.linkComponent, { children: e
|
|
|
25
25
|
linkOnClick: e.linkOnClick
|
|
26
26
|
},
|
|
27
27
|
e.title || e.children
|
|
28
|
-
), d = (() =>
|
|
28
|
+
), d = (() => r >= a.md ? 156 : 120)();
|
|
29
29
|
return /* @__PURE__ */ t.createElement("div", { className: s, "data-testid": e.testId, "data-analyticsid": C.PromoPanel, ref: u }, e.illustration && /* @__PURE__ */ t.createElement(
|
|
30
30
|
v,
|
|
31
31
|
{
|
|
32
32
|
illustrationName: e.illustration,
|
|
33
33
|
size: d,
|
|
34
|
-
color:
|
|
34
|
+
color: l,
|
|
35
35
|
className: n.promopanel__illustration
|
|
36
36
|
}
|
|
37
|
-
), /* @__PURE__ */ t.createElement("div", { className: n.promopanel__content }, e.title && /* @__PURE__ */ t.createElement(y, { htmlMarkup: k, appearance: "title3" },
|
|
38
|
-
|
|
37
|
+
), /* @__PURE__ */ t.createElement("div", { className: n.promopanel__content }, e.title && /* @__PURE__ */ t.createElement(y, { htmlMarkup: k, appearance: "title3" }, o), e.title ? e.children : o), /* @__PURE__ */ t.createElement("div", { className: n.promopanel__icon }, /* @__PURE__ */ t.createElement(
|
|
38
|
+
b,
|
|
39
39
|
{
|
|
40
|
-
svgIcon: e.target === "_blank" ? _ :
|
|
41
|
-
size:
|
|
40
|
+
svgIcon: e.target === "_blank" ? _ : g,
|
|
41
|
+
size: r >= a.md ? i.Small : i.XSmall,
|
|
42
42
|
isHovered: c,
|
|
43
43
|
color: m("blueberry", 500),
|
|
44
44
|
hoverColor: m("blueberry", 600)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PromoPanel.js","sources":["../../../src/components/PromoPanel/PromoPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { getColor } from '../../theme/currys/color';\nimport { PaletteNames } from '../../theme/palette';\nimport { AnchorLinkTags, AnchorLinkTargets } from '../AnchorLink';\nimport Icon from '../Icon';\nimport ArrowRight from '../Icons/ArrowRight';\nimport ArrowUpRight from '../Icons/ArrowUpRight';\nimport LazyIllustration from '../LazyIllustration';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type PromoPanelColors = Extract<PaletteNames, 'neutral' | 'blueberry' | 'cherry'>;\n\ninterface PromoPanelProps {\n /** Used as the link text if set. title or children must be set for the link to have accessible text. */\n title?: string;\n /** Used as the link text if title is not set. */\n children?: string;\n /** Illustration element */\n illustration?: 'Doctor' | 'HealthcarePersonnel';\n /** Changes the underlying element of the title. */\n titleHtmlMarkup?: TitleTags;\n /** Changes the background color. Default: white */\n color?: PromoPanelColors;\n /** Not used if linkComponent is set */\n href?: string;\n /** Anchor link target. If linkComponent is set, this prop is only used to display the right icon for external links. */\n target?: AnchorLinkTargets;\n /** HTML markup for anchor link. Not used if linkComponent is set. Default: a */\n linkHtmlMarkup?: AnchorLinkTags;\n /** Function that is called when clicked. Not used if linkComponent is set. */\n linkOnClick?: () => void;\n /** Custom link component. Must be \"a\" a or \"button\" element with no styling. */\n linkComponent?: React.ReactElement;\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\ninterface PromoPanelLinkProps {\n children?: string;\n href?: string;\n target?: AnchorLinkTargets;\n linkComponent?: React.ReactElement;\n linkHtmlMarkup?: AnchorLinkTags;\n linkOnClick?: () => void;\n}\n\nconst PromoPanelLink: React.FC<PromoPanelLinkProps> = props => {\n if (props.linkComponent) {\n return React.cloneElement(props.linkComponent, { children: props.children });\n }\n\n if (props.linkHtmlMarkup === 'button') {\n return (\n <button type={'button'} onClick={props.linkOnClick}>\n {props.children}\n </button>\n );\n }\n return (\n <a href={props.href} target={props.target} onClick={props.linkOnClick}>\n {props.children}\n </a>\n );\n};\n\nconst PromoPanel: React.FC<PromoPanelProps> = props => {\n const { isHovered, hoverRef } = useHover<HTMLDivElement>();\n\n const { color = 'neutral', titleHtmlMarkup = 'h2', linkHtmlMarkup = 'a' } = props;\n\n const breakpoint = useBreakpoint();\n\n const promoPanelClasses = classNames(\n styles.promopanel,\n styles[`promopanel--${color}`],\n !props.illustration && styles['promopanel--no-illustration']\n );\n\n const promoPanelLink = (\n <PromoPanelLink\n href={props.href}\n target={props.target}\n linkComponent={props.linkComponent}\n linkHtmlMarkup={linkHtmlMarkup}\n linkOnClick={props.linkOnClick}\n >\n {props.title || props.children}\n </PromoPanelLink>\n );\n\n const illustrationSize = ((): number => {\n if (breakpoint >= Breakpoint.
|
|
1
|
+
{"version":3,"file":"PromoPanel.js","sources":["../../../src/components/PromoPanel/PromoPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { getColor } from '../../theme/currys/color';\nimport { PaletteNames } from '../../theme/palette';\nimport { AnchorLinkTags, AnchorLinkTargets } from '../AnchorLink';\nimport Icon from '../Icon';\nimport ArrowRight from '../Icons/ArrowRight';\nimport ArrowUpRight from '../Icons/ArrowUpRight';\nimport LazyIllustration from '../LazyIllustration';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type PromoPanelColors = Extract<PaletteNames, 'neutral' | 'blueberry' | 'cherry'>;\n\ninterface PromoPanelProps {\n /** Used as the link text if set. title or children must be set for the link to have accessible text. */\n title?: string;\n /** Used as the link text if title is not set. */\n children?: string;\n /** Illustration element */\n illustration?: 'Doctor' | 'HealthcarePersonnel';\n /** Changes the underlying element of the title. */\n titleHtmlMarkup?: TitleTags;\n /** Changes the background color. Default: white */\n color?: PromoPanelColors;\n /** Not used if linkComponent is set */\n href?: string;\n /** Anchor link target. If linkComponent is set, this prop is only used to display the right icon for external links. */\n target?: AnchorLinkTargets;\n /** HTML markup for anchor link. Not used if linkComponent is set. Default: a */\n linkHtmlMarkup?: AnchorLinkTags;\n /** Function that is called when clicked. Not used if linkComponent is set. */\n linkOnClick?: () => void;\n /** Custom link component. Must be \"a\" a or \"button\" element with no styling. */\n linkComponent?: React.ReactElement;\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\ninterface PromoPanelLinkProps {\n children?: string;\n href?: string;\n target?: AnchorLinkTargets;\n linkComponent?: React.ReactElement;\n linkHtmlMarkup?: AnchorLinkTags;\n linkOnClick?: () => void;\n}\n\nconst PromoPanelLink: React.FC<PromoPanelLinkProps> = props => {\n if (props.linkComponent) {\n return React.cloneElement(props.linkComponent, { children: props.children });\n }\n\n if (props.linkHtmlMarkup === 'button') {\n return (\n <button type={'button'} onClick={props.linkOnClick}>\n {props.children}\n </button>\n );\n }\n return (\n <a href={props.href} target={props.target} onClick={props.linkOnClick}>\n {props.children}\n </a>\n );\n};\n\nconst PromoPanel: React.FC<PromoPanelProps> = props => {\n const { isHovered, hoverRef } = useHover<HTMLDivElement>();\n\n const { color = 'neutral', titleHtmlMarkup = 'h2', linkHtmlMarkup = 'a' } = props;\n\n const breakpoint = useBreakpoint();\n\n const promoPanelClasses = classNames(\n styles.promopanel,\n styles[`promopanel--${color}`],\n !props.illustration && styles['promopanel--no-illustration']\n );\n\n const promoPanelLink = (\n <PromoPanelLink\n href={props.href}\n target={props.target}\n linkComponent={props.linkComponent}\n linkHtmlMarkup={linkHtmlMarkup}\n linkOnClick={props.linkOnClick}\n >\n {props.title || props.children}\n </PromoPanelLink>\n );\n\n const illustrationSize = ((): number => {\n if (breakpoint >= Breakpoint.md) {\n return 156;\n }\n\n return 120;\n })();\n\n return (\n <div className={promoPanelClasses} data-testid={props.testId} data-analyticsid={AnalyticsId.PromoPanel} ref={hoverRef}>\n {props.illustration && (\n <LazyIllustration\n illustrationName={props.illustration}\n size={illustrationSize}\n color={color}\n className={styles.promopanel__illustration}\n />\n )}\n <div className={styles.promopanel__content}>\n {props.title && (\n <Title htmlMarkup={titleHtmlMarkup} appearance={'title3'}>\n {promoPanelLink}\n </Title>\n )}\n {!props.title ? promoPanelLink : props.children}\n </div>\n <div className={styles.promopanel__icon}>\n <Icon\n svgIcon={props.target === '_blank' ? ArrowUpRight : ArrowRight}\n size={breakpoint >= Breakpoint.md ? IconSize.Small : IconSize.XSmall}\n isHovered={isHovered}\n color={getColor('blueberry', 500)}\n hoverColor={getColor('blueberry', 600)}\n />\n </div>\n </div>\n );\n};\n\nexport default PromoPanel;\n"],"names":["PromoPanelLink","props","React","PromoPanel","isHovered","hoverRef","useHover","color","titleHtmlMarkup","linkHtmlMarkup","breakpoint","useBreakpoint","promoPanelClasses","classNames","styles","promoPanelLink","illustrationSize","Breakpoint","AnalyticsId","LazyIllustration","Title","Icon","ArrowUpRight","ArrowRight","IconSize","getColor","PromoPanel$1"],"mappings":";;;;;;;;;;;;AAsDA,MAAMA,IAAgD,CAASC,MACzDA,EAAM,gBACDC,EAAM,aAAaD,EAAM,eAAe,EAAE,UAAUA,EAAM,UAAU,IAGzEA,EAAM,mBAAmB,WAEzBC,gBAAAA,EAAA,cAAC,YAAO,MAAM,UAAU,SAASD,EAAM,YAAA,GACpCA,EAAM,QACT,IAIDC,gBAAAA,EAAA,cAAA,KAAA,EAAE,MAAMD,EAAM,MAAM,QAAQA,EAAM,QAAQ,SAASA,EAAM,YACvD,GAAAA,EAAM,QACT,GAIEE,IAAwC,CAASF,MAAA;AACrD,QAAM,EAAE,WAAAG,GAAW,UAAAC,EAAS,IAAIC,EAAyB,GAEnD,EAAE,OAAAC,IAAQ,WAAW,iBAAAC,IAAkB,MAAM,gBAAAC,IAAiB,IAAQ,IAAAR,GAEtES,IAAaC,KAEbC,IAAoBC;AAAA,IACxBC,EAAO;AAAA,IACPA,EAAO,eAAeP,CAAK,EAAE;AAAA,IAC7B,CAACN,EAAM,gBAAgBa,EAAO,6BAA6B;AAAA,EAAA,GAGvDC,IACJb,gBAAAA,EAAA;AAAA,IAACF;AAAA,IAAA;AAAA,MACC,MAAMC,EAAM;AAAA,MACZ,QAAQA,EAAM;AAAA,MACd,eAAeA,EAAM;AAAA,MACrB,gBAAAQ;AAAA,MACA,aAAaR,EAAM;AAAA,IAAA;AAAA,IAElBA,EAAM,SAASA,EAAM;AAAA,EAAA,GAIpBe,KAAoB,MACpBN,KAAcO,EAAW,KACpB,MAGF;AAGT,SACGf,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWU,GAAmB,eAAaX,EAAM,QAAQ,oBAAkBiB,EAAY,YAAY,KAAKb,EAAA,GAC1GJ,EAAM,gBACLC,gBAAAA,EAAA;AAAA,IAACiB;AAAA,IAAA;AAAA,MACC,kBAAkBlB,EAAM;AAAA,MACxB,MAAMe;AAAA,MACN,OAAAT;AAAA,MACA,WAAWO,EAAO;AAAA,IAAA;AAAA,EAAA,GAGrBZ,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWY,EAAO,oBACpB,GAAAb,EAAM,SACLC,gBAAAA,EAAA,cAACkB,GAAM,EAAA,YAAYZ,GAAiB,YAAY,SAC7C,GAAAO,CACH,GAEAd,EAAM,QAAyBA,EAAM,WAAvBc,CAClB,GACCb,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWY,EAAO,iBACrB,GAAAZ,gBAAAA,EAAA;AAAA,IAACmB;AAAA,IAAA;AAAA,MACC,SAASpB,EAAM,WAAW,WAAWqB,IAAeC;AAAA,MACpD,MAAMb,KAAcO,EAAW,KAAKO,EAAS,QAAQA,EAAS;AAAA,MAC9D,WAAApB;AAAA,MACA,OAAOqB,EAAS,aAAa,GAAG;AAAA,MAChC,YAAYA,EAAS,aAAa,GAAG;AAAA,IAAA;AAAA,EAEzC,CAAA,CACF;AAEJ,GAEAC,IAAevB;"}
|
|
@@ -67,11 +67,6 @@ $colors: 'neutral', 'blueberry', 'cherry';
|
|
|
67
67
|
padding-bottom: getSpacer(l);
|
|
68
68
|
}
|
|
69
69
|
|
|
70
|
-
@media (min-width: map.get($grid-breakpoints, lg)) {
|
|
71
|
-
padding-top: getSpacer(xl);
|
|
72
|
-
padding-bottom: getSpacer(xl);
|
|
73
|
-
}
|
|
74
|
-
|
|
75
70
|
a,
|
|
76
71
|
button {
|
|
77
72
|
all: unset;
|
|
@@ -96,9 +91,5 @@ $colors: 'neutral', 'blueberry', 'cherry';
|
|
|
96
91
|
@media (min-width: map.get($grid-breakpoints, sm)) {
|
|
97
92
|
display: block;
|
|
98
93
|
}
|
|
99
|
-
|
|
100
|
-
@media (min-width: map.get($grid-breakpoints, lg)) {
|
|
101
|
-
padding-left: getSpacer(l);
|
|
102
|
-
}
|
|
103
94
|
}
|
|
104
95
|
}
|