@helsenorge/designsystem-react 8.2.1 → 8.4.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 +27 -0
- package/components/Icon/Icon.d.ts +5 -1
- package/components/Icon/Icon.js +33 -31
- package/components/Icon/Icon.js.map +1 -1
- package/components/Icons/Change.js +28 -37
- package/components/Icons/Change.js.map +1 -1
- package/components/Icons/NoAccess.js +10 -9
- package/components/Icons/NoAccess.js.map +1 -1
- package/components/Panel/styles.module.scss +7 -0
- package/components/RadioButton/RadioButton.d.ts +2 -2
- package/components/RadioButton/RadioButton.js +20 -20
- package/components/RadioButton/RadioButton.js.map +1 -1
- package/components/StatusDot/StatusDot.d.ts +2 -0
- package/components/StatusDot/StatusDot.js +22 -19
- package/components/StatusDot/StatusDot.js.map +1 -1
- package/components/StatusDot/styles.module.scss +29 -18
- package/components/StatusDot/styles.module.scss.d.ts +1 -2
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,30 @@
|
|
|
1
|
+
## [8.3.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv8.2.1&targetVersion=GTv8.3.0) (2024-09-09)
|
|
2
|
+
|
|
3
|
+
### Features
|
|
4
|
+
|
|
5
|
+
- statusdot oppdaterer utseende ([18927ec](https://github.com/helsenorge/designsystem/commit/18927ec1e9a6ca18eb0f528798d17f2e4edaa4e0)),
|
|
6
|
+
closes [#328986](https://github.com/helsenorge/designsystem/issues/328986)
|
|
7
|
+
- **datepicker:** ny prop onDatePickerClosed
|
|
8
|
+
([11c1f3b](https://github.com/helsenorge/designsystem/commit/11c1f3b5dd8e186793d9e057385450385a1814ec)), closes
|
|
9
|
+
[#329586](https://github.com/helsenorge/designsystem/issues/329586)
|
|
10
|
+
|
|
11
|
+
### Bug Fixes
|
|
12
|
+
|
|
13
|
+
- **datepicker:** datevalue fungerer for mobil
|
|
14
|
+
([7202ba8](https://github.com/helsenorge/designsystem/commit/7202ba8dca1f6101ed7987fd947b9e58824946db)), closes
|
|
15
|
+
[#331620](https://github.com/helsenorge/designsystem/issues/331620)
|
|
16
|
+
- **datepicker:** onblur skjer riktig uten focuseddatepickerpopup
|
|
17
|
+
([e1662ed](https://github.com/helsenorge/designsystem/commit/e1662edbb486340352e9012c1ba8aeae43dca27e)), closes
|
|
18
|
+
[#329586](https://github.com/helsenorge/designsystem/issues/329586)
|
|
19
|
+
- **datepicker:** popup valg trigger onblur
|
|
20
|
+
([6d886cb](https://github.com/helsenorge/designsystem/commit/6d886cbc3bcfe9b97c0247389ca0238f29dd9f0a)), closes
|
|
21
|
+
[#329586](https://github.com/helsenorge/designsystem/issues/329586)
|
|
22
|
+
- **designsystem:** badge i panel vises til høyre på mobil
|
|
23
|
+
([2b6d63e](https://github.com/helsenorge/designsystem/commit/2b6d63e1a36d63ad41159fb637f896636ae58672)), closes
|
|
24
|
+
[#329338](https://github.com/helsenorge/designsystem/issues/329338)
|
|
25
|
+
|
|
26
|
+
## [8.2.1](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv8.2.0&targetVersion=GTv8.2.1) (2024-08-28)
|
|
27
|
+
|
|
1
28
|
## [8.2.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv8.1.1&targetVersion=GTv8.2.0) (2024-08-28)
|
|
2
29
|
|
|
3
30
|
### Features
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { IconSize } from '../../constants';
|
|
2
|
+
import { FormMode, IconSize } from '../../constants';
|
|
3
|
+
import { StatusDotModes } from '../StatusDot';
|
|
3
4
|
export type SvgIcon = React.FC<SvgPathProps>;
|
|
4
5
|
export interface BaseIconProps {
|
|
5
6
|
ariaLabel?: string;
|
|
@@ -8,6 +9,8 @@ export interface BaseIconProps {
|
|
|
8
9
|
hoverColor?: string;
|
|
9
10
|
className?: string;
|
|
10
11
|
isHovered?: boolean;
|
|
12
|
+
/** Defines the color of the icon */
|
|
13
|
+
mode?: keyof typeof FormMode | StatusDotModes;
|
|
11
14
|
/** Sets the data-testid attribute. */
|
|
12
15
|
testId?: string;
|
|
13
16
|
}
|
|
@@ -17,6 +20,7 @@ export interface IconProps extends BaseIconProps {
|
|
|
17
20
|
export interface SvgPathProps {
|
|
18
21
|
size: IconSize;
|
|
19
22
|
isHovered: boolean;
|
|
23
|
+
mode?: keyof typeof FormMode | StatusDotModes;
|
|
20
24
|
}
|
|
21
25
|
interface IconConfig {
|
|
22
26
|
size: IconSize;
|
package/components/Icon/Icon.js
CHANGED
|
@@ -1,58 +1,60 @@
|
|
|
1
1
|
import l from "react";
|
|
2
|
-
import
|
|
3
|
-
import { IconSize as c, AnalyticsId as
|
|
4
|
-
import { useUuid as
|
|
5
|
-
const
|
|
2
|
+
import p from "classnames";
|
|
3
|
+
import { IconSize as c, AnalyticsId as b } from "../../constants.js";
|
|
4
|
+
import { useUuid as y } from "../../hooks/useUuid.js";
|
|
5
|
+
const X = ({
|
|
6
6
|
size: i,
|
|
7
7
|
isHovered: a,
|
|
8
8
|
normal: n,
|
|
9
|
-
normalHover:
|
|
9
|
+
normalHover: t,
|
|
10
10
|
xSmall: r,
|
|
11
|
-
xSmallHover:
|
|
11
|
+
xSmallHover: e,
|
|
12
12
|
xxSmall: o,
|
|
13
13
|
xxSmallHover: s
|
|
14
|
-
}) => i <= c.XXSmall && o && s ? a ? s : o : i <= c.XSmall && r &&
|
|
14
|
+
}) => i <= c.XXSmall && o && s ? a ? s : o : i <= c.XSmall && r && e ? a ? e : r : a ? t : n, v = l.forwardRef((i, a) => {
|
|
15
15
|
const {
|
|
16
16
|
svgIcon: n,
|
|
17
|
-
ariaLabel:
|
|
17
|
+
ariaLabel: t,
|
|
18
18
|
className: r = "",
|
|
19
|
-
size:
|
|
19
|
+
size: e = c.Small,
|
|
20
20
|
color: o = "black",
|
|
21
21
|
hoverColor: s = o || "black",
|
|
22
22
|
isHovered: d = !1,
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
23
|
+
mode: u,
|
|
24
|
+
testId: h,
|
|
25
|
+
...I
|
|
26
|
+
} = i, g = l.createElement(n, {
|
|
27
|
+
size: e,
|
|
28
|
+
isHovered: d,
|
|
29
|
+
mode: u
|
|
30
|
+
}), m = y(), f = d ? s : o;
|
|
29
31
|
return /* @__PURE__ */ l.createElement(
|
|
30
32
|
"svg",
|
|
31
33
|
{
|
|
32
|
-
"data-testid":
|
|
33
|
-
"data-analyticsid":
|
|
34
|
+
"data-testid": h,
|
|
35
|
+
"data-analyticsid": b.Icon,
|
|
34
36
|
ref: a,
|
|
35
|
-
className:
|
|
36
|
-
role:
|
|
37
|
-
"aria-labelledby":
|
|
37
|
+
className: p("hnds-style-icon", r),
|
|
38
|
+
role: t ? "img" : "presentation",
|
|
39
|
+
"aria-labelledby": t ? m : void 0,
|
|
38
40
|
focusable: !1,
|
|
39
|
-
"aria-hidden":
|
|
41
|
+
"aria-hidden": t ? void 0 : !0,
|
|
40
42
|
viewBox: "0 0 48 48",
|
|
41
|
-
style: { minWidth:
|
|
42
|
-
width:
|
|
43
|
-
height:
|
|
43
|
+
style: { minWidth: e, minHeight: e },
|
|
44
|
+
width: e,
|
|
45
|
+
height: e,
|
|
44
46
|
fill: f,
|
|
45
47
|
color: f,
|
|
46
|
-
...
|
|
48
|
+
...I
|
|
47
49
|
},
|
|
48
|
-
|
|
49
|
-
|
|
50
|
+
t && /* @__PURE__ */ l.createElement("title", { id: m }, t),
|
|
51
|
+
g
|
|
50
52
|
);
|
|
51
53
|
});
|
|
52
|
-
|
|
54
|
+
v.displayName = "Icon";
|
|
53
55
|
export {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
56
|
+
v as Icon,
|
|
57
|
+
v as default,
|
|
58
|
+
X as getIcon
|
|
57
59
|
};
|
|
58
60
|
//# sourceMappingURL=Icon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.js","sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\n\nexport type SvgIcon = React.FC<SvgPathProps>;\n\nexport interface BaseIconProps {\n /* aria-label for the <svg> element. Used as <title> tag. */\n ariaLabel?: string;\n /* Changes the size of the icon. */\n size?: number;\n /* Changes the color of the icon. */\n color?: string;\n /* Changes the hover color of the icon. */\n hoverColor?: string;\n /* Adds custom classes to the element. */\n className?: string;\n /* Swaps the displayed icon to the hover version and changes its color. */\n isHovered?: boolean;\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\nexport interface IconProps extends BaseIconProps {\n /* Sets which icon should be displayed. */\n svgIcon: SvgIcon;\n}\n\nexport interface SvgPathProps {\n size: IconSize;\n isHovered: boolean;\n}\n\ninterface IconConfig {\n size: IconSize;\n isHovered: boolean;\n normal: React.ReactElement;\n normalHover: React.ReactElement;\n xSmall?: React.ReactElement;\n xSmallHover?: React.ReactElement;\n xxSmall?: React.ReactElement;\n xxSmallHover?: React.ReactElement;\n}\n\nexport const getIcon = ({\n size,\n isHovered,\n normal,\n normalHover,\n xSmall,\n xSmallHover,\n xxSmall,\n xxSmallHover,\n}: IconConfig): React.ReactElement => {\n if (size <= IconSize.XXSmall && xxSmall && xxSmallHover) {\n return isHovered ? xxSmallHover : xxSmall;\n }\n if (size <= IconSize.XSmall && xSmall && xSmallHover) {\n return isHovered ? xSmallHover : xSmall;\n }\n\n return isHovered ? normalHover : normal;\n};\n\nexport const Icon = React.forwardRef((props: IconProps, ref: React.ForwardedRef<SVGSVGElement>) => {\n const {\n svgIcon,\n ariaLabel,\n className = '',\n size = IconSize.Small,\n color = 'black',\n hoverColor = color || 'black',\n isHovered = false,\n testId,\n ...other\n } = props;\n\n const svgRaw = React.createElement(svgIcon, {\n size,\n isHovered,\n });\n\n const titleId = useUuid();\n const svgColor = isHovered ? hoverColor : color;\n\n return (\n <svg\n data-testid={testId}\n data-analyticsid={AnalyticsId.Icon}\n ref={ref}\n className={classNames(`hnds-style-icon`, className)}\n role={ariaLabel ? 'img' : 'presentation'}\n aria-labelledby={ariaLabel ? titleId : undefined}\n focusable={false}\n aria-hidden={ariaLabel ? undefined : true}\n viewBox=\"0 0 48 48\"\n style={{ minWidth: size, minHeight: size }}\n width={size}\n height={size}\n fill={svgColor}\n color={svgColor}\n {...other}\n >\n {ariaLabel && <title id={titleId}>{ariaLabel}</title>}\n {svgRaw}\n </svg>\n );\n});\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"names":["getIcon","size","isHovered","normal","normalHover","xSmall","xSmallHover","xxSmall","xxSmallHover","IconSize","Icon","React","props","ref","svgIcon","ariaLabel","className","color","hoverColor","testId","other","svgRaw","titleId","useUuid","svgColor","AnalyticsId","classNames"],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"Icon.js","sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormMode, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { StatusDotModes } from '../StatusDot';\n\nexport type SvgIcon = React.FC<SvgPathProps>;\n\nexport interface BaseIconProps {\n /* aria-label for the <svg> element. Used as <title> tag. */\n ariaLabel?: string;\n /* Changes the size of the icon. */\n size?: number;\n /* Changes the color of the icon. */\n color?: string;\n /* Changes the hover color of the icon. */\n hoverColor?: string;\n /* Adds custom classes to the element. */\n className?: string;\n /* Swaps the displayed icon to the hover version and changes its color. */\n isHovered?: boolean;\n /** Defines the color of the icon */\n mode?: keyof typeof FormMode | StatusDotModes;\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\nexport interface IconProps extends BaseIconProps {\n /* Sets which icon should be displayed. */\n svgIcon: SvgIcon;\n}\n\nexport interface SvgPathProps {\n size: IconSize;\n isHovered: boolean;\n mode?: keyof typeof FormMode | StatusDotModes;\n}\n\ninterface IconConfig {\n size: IconSize;\n isHovered: boolean;\n normal: React.ReactElement;\n normalHover: React.ReactElement;\n xSmall?: React.ReactElement;\n xSmallHover?: React.ReactElement;\n xxSmall?: React.ReactElement;\n xxSmallHover?: React.ReactElement;\n}\n\nexport const getIcon = ({\n size,\n isHovered,\n normal,\n normalHover,\n xSmall,\n xSmallHover,\n xxSmall,\n xxSmallHover,\n}: IconConfig): React.ReactElement => {\n if (size <= IconSize.XXSmall && xxSmall && xxSmallHover) {\n return isHovered ? xxSmallHover : xxSmall;\n }\n if (size <= IconSize.XSmall && xSmall && xSmallHover) {\n return isHovered ? xSmallHover : xSmall;\n }\n\n return isHovered ? normalHover : normal;\n};\n\nexport const Icon = React.forwardRef((props: IconProps, ref: React.ForwardedRef<SVGSVGElement>) => {\n const {\n svgIcon,\n ariaLabel,\n className = '',\n size = IconSize.Small,\n color = 'black',\n hoverColor = color || 'black',\n isHovered = false,\n mode,\n testId,\n ...other\n } = props;\n\n const svgRaw = React.createElement(svgIcon, {\n size,\n isHovered,\n mode,\n });\n\n const titleId = useUuid();\n const svgColor = isHovered ? hoverColor : color;\n\n return (\n <svg\n data-testid={testId}\n data-analyticsid={AnalyticsId.Icon}\n ref={ref}\n className={classNames(`hnds-style-icon`, className)}\n role={ariaLabel ? 'img' : 'presentation'}\n aria-labelledby={ariaLabel ? titleId : undefined}\n focusable={false}\n aria-hidden={ariaLabel ? undefined : true}\n viewBox=\"0 0 48 48\"\n style={{ minWidth: size, minHeight: size }}\n width={size}\n height={size}\n fill={svgColor}\n color={svgColor}\n {...other}\n >\n {ariaLabel && <title id={titleId}>{ariaLabel}</title>}\n {svgRaw}\n </svg>\n );\n});\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"names":["getIcon","size","isHovered","normal","normalHover","xSmall","xSmallHover","xxSmall","xxSmallHover","IconSize","Icon","React","props","ref","svgIcon","ariaLabel","className","color","hoverColor","mode","testId","other","svgRaw","titleId","useUuid","svgColor","AnalyticsId","classNames"],"mappings":";;;;AAmDO,MAAMA,IAAU,CAAC;AAAA,EACtB,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC;AACF,MACMP,KAAQQ,EAAS,WAAWF,KAAWC,IAClCN,IAAYM,IAAeD,IAEhCN,KAAQQ,EAAS,UAAUJ,KAAUC,IAChCJ,IAAYI,IAAcD,IAG5BH,IAAYE,IAAcD,GAGtBO,IAAOC,EAAM,WAAW,CAACC,GAAkBC,MAA2C;AAC3F,QAAA;AAAA,IACJ,SAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,MAAAf,IAAOQ,EAAS;AAAA,IAChB,OAAAQ,IAAQ;AAAA,IACR,YAAAC,IAAaD,KAAS;AAAA,IACtB,WAAAf,IAAY;AAAA,IACZ,MAAAiB;AAAA,IACA,QAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAAT,GAEEU,IAASX,EAAM,cAAcG,GAAS;AAAA,IAC1C,MAAAb;AAAA,IACA,WAAAC;AAAA,IACA,MAAAiB;AAAA,EAAA,CACD,GAEKI,IAAUC,KACVC,IAAWvB,IAAYgB,IAAaD;AAGxC,SAAAN,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAaS;AAAA,MACb,oBAAkBM,EAAY;AAAA,MAC9B,KAAAb;AAAA,MACA,WAAWc,EAAW,mBAAmBX,CAAS;AAAA,MAClD,MAAMD,IAAY,QAAQ;AAAA,MAC1B,mBAAiBA,IAAYQ,IAAU;AAAA,MACvC,WAAW;AAAA,MACX,eAAaR,IAAY,SAAY;AAAA,MACrC,SAAQ;AAAA,MACR,OAAO,EAAE,UAAUd,GAAM,WAAWA,EAAK;AAAA,MACzC,OAAOA;AAAA,MACP,QAAQA;AAAA,MACR,MAAMwB;AAAA,MACN,OAAOA;AAAA,MACN,GAAGJ;AAAA,IAAA;AAAA,IAEHN,KAAaJ,gBAAAA,EAAA,cAAC,SAAM,EAAA,IAAIY,KAAUR,CAAU;AAAA,IAC5CO;AAAA,EAAA;AAGP,CAAC;AAEDZ,EAAK,cAAc;"}
|
|
@@ -1,40 +1,31 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { getIcon as
|
|
3
|
-
const
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
), e = /* @__PURE__ */ l.createElement(
|
|
29
|
-
"path",
|
|
30
|
-
{
|
|
31
|
-
fillRule: "evenodd",
|
|
32
|
-
d: "M6.336 1.176 6.101 0C2.604.699.066 3.799.066 7.369c0 1.974.793 3.852 2.152 5.245L0 12.718l.057 1.199 4.348-.205V9.529h-1.2v2.382a6.332 6.332 0 0 1-1.939-4.542c0-3 2.132-5.604 5.07-6.193Zm6.409.809a7.52 7.52 0 0 1 2.152 5.244 7.477 7.477 0 0 1-5.827 7.325c-.55.127-1.118.19-1.689.19v-1.199c.48 0 .958-.055 1.419-.161l.135.585-.134-.585a6.28 6.28 0 0 0 4.896-6.155c0-1.723-.715-3.36-1.939-4.542v2.386h-1.2V.887l4.351-.206.057 1.199-2.221.105Z"
|
|
33
|
-
}
|
|
34
|
-
);
|
|
35
|
-
return v({ size: c, isHovered: a, normal: t, normalHover: o, xSmall: n, xSmallHover: m, xxSmall: e, xxSmallHover: e });
|
|
36
|
-
};
|
|
1
|
+
import e from "react";
|
|
2
|
+
import { getIcon as t } from "../Icon/Icon.js";
|
|
3
|
+
const d = ({ size: l, isHovered: a }) => t({ size: l, isHovered: a, normal: /* @__PURE__ */ e.createElement(
|
|
4
|
+
"path",
|
|
5
|
+
{
|
|
6
|
+
fillRule: "evenodd",
|
|
7
|
+
d: "M21.678 11.623l-.274-1.373c-6.59 1.317-11.372 7.158-11.372 13.888 0 4.099 1.806 7.986 4.868 10.663l-4.59.217.066 1.398 7.168-.338v-6.883h-1.401v4.815c-2.953-2.415-4.71-6.038-4.71-9.872 0-6.065 4.308-11.328 10.245-12.515m16.29 12.24c0 6.645-4.516 12.32-10.981 13.805l-.157-.683.156.683a14.317 14.317 0 01-3.181.358v-1.4c.967 0 1.933-.108 2.868-.323 5.826-1.337 9.895-6.451 9.895-12.44 0-3.833-1.758-7.456-4.711-9.872v4.815h-1.4v-6.883l7.167-.338.067 1.398-4.591.217c3.063 2.676 4.868 6.565 4.868 10.664"
|
|
8
|
+
}
|
|
9
|
+
), normalHover: /* @__PURE__ */ e.createElement(
|
|
10
|
+
"path",
|
|
11
|
+
{
|
|
12
|
+
fillRule: "evenodd",
|
|
13
|
+
d: "M18.1 31.38l1.491 4.578c-3.556-1.382-6.35-4.28-7.538-7.927-1.88-5.766.586-12.106 5.863-15.074l-.687-1.22c-5.856 3.294-8.593 10.33-6.507 16.728 1.271 3.9 4.192 7.035 7.933 8.63l-4.298 1.63.496 1.307 6.71-2.542-2.133-6.544-1.33.434zm12.934 4.695a14.23 14.23 0 01-2.914 1.327l-.433-1.332a12.793 12.793 0 002.626-1.195l.36.6-.36-.6c5.124-3.077 7.408-9.2 5.553-14.893-1.188-3.648-3.982-6.547-7.538-7.927l1.492 4.578-1.33.434-2.135-6.544 6.71-2.543.496 1.308-4.297 1.63c3.741 1.594 6.662 4.73 7.933 8.63 2.06 6.316-.476 13.112-6.163 16.527z"
|
|
14
|
+
}
|
|
15
|
+
), xSmall: /* @__PURE__ */ e.createElement(
|
|
16
|
+
"path",
|
|
17
|
+
{
|
|
18
|
+
fillRule: "evenodd",
|
|
19
|
+
d: "M21.714 11.803l-.346-1.734c-6.676 1.335-11.52 7.25-11.52 14.068 0 4 1.689 7.805 4.582 10.502l-4.13.194.085 1.767 7.343-.347v-7.057h-1.77v4.426c-2.73-2.375-4.341-5.835-4.341-9.485 0-5.978 4.246-11.164 10.097-12.334m16.438 12.06c0 6.73-4.574 12.48-11.124 13.984-1.05.241-2.133.363-3.223.363V36.44c.957 0 1.908-.107 2.827-.318 5.74-1.318 9.751-6.359 9.751-12.26 0-3.65-1.612-7.108-4.341-9.484v4.427h-1.77v-7.06l7.344-.344.082 1.765-4.128.195a14.39 14.39 0 014.582 10.502"
|
|
20
|
+
}
|
|
21
|
+
), xSmallHover: /* @__PURE__ */ e.createElement(
|
|
22
|
+
"path",
|
|
23
|
+
{
|
|
24
|
+
fillRule: "evenodd",
|
|
25
|
+
d: "M17.924 31.436l1.372 4.212c-3.334-1.414-5.937-4.204-7.068-7.674-1.853-5.682.578-11.93 5.778-14.856l-.867-1.542c-5.931 3.338-8.705 10.465-6.592 16.945a14.383 14.383 0 007.612 8.566l-3.867 1.465.627 1.652 6.874-2.603-2.188-6.713-1.681.548zm13.205 4.798l-.455-.76.455.76a14.483 14.483 0 01-2.95 1.343l-.55-1.68a12.754 12.754 0 002.59-1.18c5.05-3.033 7.3-9.068 5.472-14.678-1.131-3.47-3.735-6.26-7.068-7.674l1.372 4.21-1.682.549-2.186-6.712L33 7.808l.626 1.653-3.866 1.467a14.38 14.38 0 017.612 8.563c2.085 6.398-.483 13.283-6.244 16.743z"
|
|
26
|
+
}
|
|
27
|
+
), xxSmall: /* @__PURE__ */ e.createElement("g", { transform: "scale(1.8)" }, /* @__PURE__ */ e.createElement("path", { d: "M10.8103 6.16415C7.83839 6.72364 5.59018 9.33395 5.59018 12.4681C5.59018 14.3714 6.41867 16.0813 7.73649 17.2567L7.99464 14.1659L9.19048 14.2657L8.78913 19.0712L3.86244 19.2041L3.83008 18.0045L6.69624 17.9272C5.27446 16.5442 4.39018 14.6095 4.39018 12.4681C4.39018 8.74623 7.0597 5.64915 10.5883 4.98486L10.8103 6.16415Z" }), /* @__PURE__ */ e.createElement("path", { d: "M17.2706 6.96714L20.1665 6.88902L20.1342 5.68945L15.1607 5.82362L15.1608 10.576L16.3608 10.576L16.3607 7.75853C17.6279 8.93098 18.42 10.607 18.42 12.4681C18.42 16.0109 15.5479 18.883 12.0051 18.883C11.9746 18.883 11.9441 18.8827 11.9137 18.8823L11.8969 20.0822C11.9329 20.0827 11.969 20.083 12.0051 20.083C16.2107 20.083 19.62 16.6737 19.62 12.4681C19.62 10.3051 18.7177 8.35275 17.2706 6.96714Z" })), xxSmallHover: /* @__PURE__ */ e.createElement("g", { transform: "scale(1.8)" }, /* @__PURE__ */ e.createElement("path", { d: "M15.6516 5.79217L18.4286 4.96721L18.0869 3.81689L13.3176 5.23373L14.5476 9.82415L15.7068 9.51355L14.9775 6.79204C16.5049 7.59657 17.7037 9.01047 18.1854 10.8081C19.1024 14.2302 17.0715 17.7478 13.6494 18.6647C13.6199 18.6726 13.5905 18.6803 13.561 18.6878L13.8553 19.8511C13.8902 19.8423 13.9251 19.8332 13.96 19.8238C18.0223 18.7353 20.433 14.5598 19.3445 10.4975C18.7847 8.4083 17.4079 6.75605 15.6516 5.79217Z" }), /* @__PURE__ */ e.createElement("path", { d: "M9.20346 6.68852C6.47765 7.99813 4.98164 11.1014 5.79282 14.1287C6.28543 15.9672 7.52823 17.4043 9.10537 18.1987L8.55472 15.1462L9.73566 14.9332L10.5917 19.6787L5.86731 21.0822L5.52559 19.9319L8.27395 19.1155C6.54275 18.1476 5.18792 16.5076 4.63371 14.4393C3.67042 10.8443 5.44739 7.1618 8.68379 5.60688L9.20346 6.68852Z" })) });
|
|
37
28
|
export {
|
|
38
|
-
|
|
29
|
+
d as default
|
|
39
30
|
};
|
|
40
31
|
//# sourceMappingURL=Change.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Change.js","sources":["../../../src/components/Icons/Change.tsx"],"sourcesContent":["import React from 'react';\n\nimport { getIcon, SvgPathProps } from '../Icon';\n\nconst Change: React.FC<SvgPathProps> = ({ size, isHovered }: SvgPathProps): React.ReactElement => {\n const normal = (\n <path\n fillRule={'evenodd'}\n d=\"M21.678 11.623l-.274-1.373c-6.59 1.317-11.372 7.158-11.372 13.888 0 4.099 1.806 7.986 4.868 10.663l-4.59.217.066 1.398 7.168-.338v-6.883h-1.401v4.815c-2.953-2.415-4.71-6.038-4.71-9.872 0-6.065 4.308-11.328 10.245-12.515m16.29 12.24c0 6.645-4.516 12.32-10.981 13.805l-.157-.683.156.683a14.317 14.317 0 01-3.181.358v-1.4c.967 0 1.933-.108 2.868-.323 5.826-1.337 9.895-6.451 9.895-12.44 0-3.833-1.758-7.456-4.711-9.872v4.815h-1.4v-6.883l7.167-.338.067 1.398-4.591.217c3.063 2.676 4.868 6.565 4.868 10.664\"\n />\n );\n\n const normalHover = (\n <path\n fillRule={'evenodd'}\n d=\"M18.1 31.38l1.491 4.578c-3.556-1.382-6.35-4.28-7.538-7.927-1.88-5.766.586-12.106 5.863-15.074l-.687-1.22c-5.856 3.294-8.593 10.33-6.507 16.728 1.271 3.9 4.192 7.035 7.933 8.63l-4.298 1.63.496 1.307 6.71-2.542-2.133-6.544-1.33.434zm12.934 4.695a14.23 14.23 0 01-2.914 1.327l-.433-1.332a12.793 12.793 0 002.626-1.195l.36.6-.36-.6c5.124-3.077 7.408-9.2 5.553-14.893-1.188-3.648-3.982-6.547-7.538-7.927l1.492 4.578-1.33.434-2.135-6.544 6.71-2.543.496 1.308-4.297 1.63c3.741 1.594 6.662 4.73 7.933 8.63 2.06 6.316-.476 13.112-6.163 16.527z\"\n />\n );\n\n const xSmall = (\n <path\n fillRule={'evenodd'}\n d=\"M21.714 11.803l-.346-1.734c-6.676 1.335-11.52 7.25-11.52 14.068 0 4 1.689 7.805 4.582 10.502l-4.13.194.085 1.767 7.343-.347v-7.057h-1.77v4.426c-2.73-2.375-4.341-5.835-4.341-9.485 0-5.978 4.246-11.164 10.097-12.334m16.438 12.06c0 6.73-4.574 12.48-11.124 13.984-1.05.241-2.133.363-3.223.363V36.44c.957 0 1.908-.107 2.827-.318 5.74-1.318 9.751-6.359 9.751-12.26 0-3.65-1.612-7.108-4.341-9.484v4.427h-1.77v-7.06l7.344-.344.082 1.765-4.128.195a14.39 14.39 0 014.582 10.502\"\n />\n );\n\n const xSmallHover = (\n <path\n fillRule={'evenodd'}\n d=\"M17.924 31.436l1.372 4.212c-3.334-1.414-5.937-4.204-7.068-7.674-1.853-5.682.578-11.93 5.778-14.856l-.867-1.542c-5.931 3.338-8.705 10.465-6.592 16.945a14.383 14.383 0 007.612 8.566l-3.867 1.465.627 1.652 6.874-2.603-2.188-6.713-1.681.548zm13.205 4.798l-.455-.76.455.76a14.483 14.483 0 01-2.95 1.343l-.55-1.68a12.754 12.754 0 002.59-1.18c5.05-3.033 7.3-9.068 5.472-14.678-1.131-3.47-3.735-6.26-7.068-7.674l1.372 4.21-1.682.549-2.186-6.712L33 7.808l.626 1.653-3.866 1.467a14.38 14.38 0 017.612 8.563c2.085 6.398-.483 13.283-6.244 16.743z\"\n />\n );\n\n const xxSmall = (\n <
|
|
1
|
+
{"version":3,"file":"Change.js","sources":["../../../src/components/Icons/Change.tsx"],"sourcesContent":["import React from 'react';\n\nimport { getIcon, SvgPathProps } from '../Icon';\n\nconst Change: React.FC<SvgPathProps> = ({ size, isHovered }: SvgPathProps): React.ReactElement => {\n const normal = (\n <path\n fillRule={'evenodd'}\n d=\"M21.678 11.623l-.274-1.373c-6.59 1.317-11.372 7.158-11.372 13.888 0 4.099 1.806 7.986 4.868 10.663l-4.59.217.066 1.398 7.168-.338v-6.883h-1.401v4.815c-2.953-2.415-4.71-6.038-4.71-9.872 0-6.065 4.308-11.328 10.245-12.515m16.29 12.24c0 6.645-4.516 12.32-10.981 13.805l-.157-.683.156.683a14.317 14.317 0 01-3.181.358v-1.4c.967 0 1.933-.108 2.868-.323 5.826-1.337 9.895-6.451 9.895-12.44 0-3.833-1.758-7.456-4.711-9.872v4.815h-1.4v-6.883l7.167-.338.067 1.398-4.591.217c3.063 2.676 4.868 6.565 4.868 10.664\"\n />\n );\n\n const normalHover = (\n <path\n fillRule={'evenodd'}\n d=\"M18.1 31.38l1.491 4.578c-3.556-1.382-6.35-4.28-7.538-7.927-1.88-5.766.586-12.106 5.863-15.074l-.687-1.22c-5.856 3.294-8.593 10.33-6.507 16.728 1.271 3.9 4.192 7.035 7.933 8.63l-4.298 1.63.496 1.307 6.71-2.542-2.133-6.544-1.33.434zm12.934 4.695a14.23 14.23 0 01-2.914 1.327l-.433-1.332a12.793 12.793 0 002.626-1.195l.36.6-.36-.6c5.124-3.077 7.408-9.2 5.553-14.893-1.188-3.648-3.982-6.547-7.538-7.927l1.492 4.578-1.33.434-2.135-6.544 6.71-2.543.496 1.308-4.297 1.63c3.741 1.594 6.662 4.73 7.933 8.63 2.06 6.316-.476 13.112-6.163 16.527z\"\n />\n );\n\n const xSmall = (\n <path\n fillRule={'evenodd'}\n d=\"M21.714 11.803l-.346-1.734c-6.676 1.335-11.52 7.25-11.52 14.068 0 4 1.689 7.805 4.582 10.502l-4.13.194.085 1.767 7.343-.347v-7.057h-1.77v4.426c-2.73-2.375-4.341-5.835-4.341-9.485 0-5.978 4.246-11.164 10.097-12.334m16.438 12.06c0 6.73-4.574 12.48-11.124 13.984-1.05.241-2.133.363-3.223.363V36.44c.957 0 1.908-.107 2.827-.318 5.74-1.318 9.751-6.359 9.751-12.26 0-3.65-1.612-7.108-4.341-9.484v4.427h-1.77v-7.06l7.344-.344.082 1.765-4.128.195a14.39 14.39 0 014.582 10.502\"\n />\n );\n\n const xSmallHover = (\n <path\n fillRule={'evenodd'}\n d=\"M17.924 31.436l1.372 4.212c-3.334-1.414-5.937-4.204-7.068-7.674-1.853-5.682.578-11.93 5.778-14.856l-.867-1.542c-5.931 3.338-8.705 10.465-6.592 16.945a14.383 14.383 0 007.612 8.566l-3.867 1.465.627 1.652 6.874-2.603-2.188-6.713-1.681.548zm13.205 4.798l-.455-.76.455.76a14.483 14.483 0 01-2.95 1.343l-.55-1.68a12.754 12.754 0 002.59-1.18c5.05-3.033 7.3-9.068 5.472-14.678-1.131-3.47-3.735-6.26-7.068-7.674l1.372 4.21-1.682.549-2.186-6.712L33 7.808l.626 1.653-3.866 1.467a14.38 14.38 0 017.612 8.563c2.085 6.398-.483 13.283-6.244 16.743z\"\n />\n );\n\n const xxSmall = (\n <g transform=\"scale(1.8)\">\n <path d=\"M10.8103 6.16415C7.83839 6.72364 5.59018 9.33395 5.59018 12.4681C5.59018 14.3714 6.41867 16.0813 7.73649 17.2567L7.99464 14.1659L9.19048 14.2657L8.78913 19.0712L3.86244 19.2041L3.83008 18.0045L6.69624 17.9272C5.27446 16.5442 4.39018 14.6095 4.39018 12.4681C4.39018 8.74623 7.0597 5.64915 10.5883 4.98486L10.8103 6.16415Z\" />\n <path d=\"M17.2706 6.96714L20.1665 6.88902L20.1342 5.68945L15.1607 5.82362L15.1608 10.576L16.3608 10.576L16.3607 7.75853C17.6279 8.93098 18.42 10.607 18.42 12.4681C18.42 16.0109 15.5479 18.883 12.0051 18.883C11.9746 18.883 11.9441 18.8827 11.9137 18.8823L11.8969 20.0822C11.9329 20.0827 11.969 20.083 12.0051 20.083C16.2107 20.083 19.62 16.6737 19.62 12.4681C19.62 10.3051 18.7177 8.35275 17.2706 6.96714Z\" />\n </g>\n );\n\n const xxSmallHover = (\n <g transform=\"scale(1.8)\">\n <path d=\"M15.6516 5.79217L18.4286 4.96721L18.0869 3.81689L13.3176 5.23373L14.5476 9.82415L15.7068 9.51355L14.9775 6.79204C16.5049 7.59657 17.7037 9.01047 18.1854 10.8081C19.1024 14.2302 17.0715 17.7478 13.6494 18.6647C13.6199 18.6726 13.5905 18.6803 13.561 18.6878L13.8553 19.8511C13.8902 19.8423 13.9251 19.8332 13.96 19.8238C18.0223 18.7353 20.433 14.5598 19.3445 10.4975C18.7847 8.4083 17.4079 6.75605 15.6516 5.79217Z\" />\n <path d=\"M9.20346 6.68852C6.47765 7.99813 4.98164 11.1014 5.79282 14.1287C6.28543 15.9672 7.52823 17.4043 9.10537 18.1987L8.55472 15.1462L9.73566 14.9332L10.5917 19.6787L5.86731 21.0822L5.52559 19.9319L8.27395 19.1155C6.54275 18.1476 5.18792 16.5076 4.63371 14.4393C3.67042 10.8443 5.44739 7.1618 8.68379 5.60688L9.20346 6.68852Z\" />\n </g>\n );\n\n return getIcon({ size, isHovered, normal, normalHover, xSmall, xSmallHover, xxSmall, xxSmallHover });\n};\n\nexport default Change;\n"],"names":["Change","size","isHovered","getIcon","React"],"mappings":";;AAIA,MAAMA,IAAiC,CAAC,EAAE,MAAAC,GAAM,WAAAC,QA2CvCC,EAAQ,EAAE,MAAAF,GAAM,WAAAC,GAAW,QAzChCE,gBAAAA,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,UAAU;AAAA,IACV,GAAE;AAAA,EAAA;AAAA,GAuCoC,aAlCxCA,gBAAAA,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,UAAU;AAAA,IACV,GAAE;AAAA,EAAA;AAAA,GAgCiD,QA3BrDA,gBAAAA,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,UAAU;AAAA,IACV,GAAE;AAAA,EAAA;AAAA,GAyByD,aApB7DA,gBAAAA,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,UAAU;AAAA,IACV,GAAE;AAAA,EAAA;AAAA,GAkBsE,SAb1EA,gBAAAA,EAAA,cAAC,KAAE,EAAA,WAAU,gBACVA,gBAAAA,EAAA,cAAA,QAAA,EAAK,GAAE,oUAAmU,GAC3UA,gBAAAA,EAAA,cAAC,QAAK,EAAA,GAAE,8YAA8Y,CAAA,CACxZ,GAUmF,cANnFA,gBAAAA,EAAA,cAAC,KAAE,EAAA,WAAU,gBACVA,gBAAAA,EAAA,cAAA,QAAA,EAAK,GAAE,gaAA+Z,GACvaA,gBAAAA,EAAA,cAAC,QAAK,EAAA,GAAE,mUAAmU,CAAA,CAC7U,EAGiG,CAAA;"}
|
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
import e from "react";
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
import { FormMode as d } from "../../constants.js";
|
|
3
|
+
import { getIcon as v } from "../Icon/Icon.js";
|
|
4
|
+
const M = ({ size: t, isHovered: o, mode: r }) => {
|
|
5
|
+
const n = /* @__PURE__ */ e.createElement(
|
|
5
6
|
"path",
|
|
6
7
|
{
|
|
7
8
|
fillRule: "evenodd",
|
|
8
9
|
d: "M11.7 25.3h24.6v-2.6H11.7v2.6ZM24 8.231C15.305 8.231 8.232 15.305 8.232 24S15.305 39.769 24 39.769 39.769 32.695 39.769 24 32.695 8.231 24 8.231Z"
|
|
9
10
|
}
|
|
10
|
-
),
|
|
11
|
+
), a = /* @__PURE__ */ e.createElement(
|
|
11
12
|
"path",
|
|
12
13
|
{
|
|
13
14
|
fillRule: "evenodd",
|
|
@@ -19,22 +20,22 @@ const h = ({ size: t, isHovered: o }) => {
|
|
|
19
20
|
fillRule: "evenodd",
|
|
20
21
|
d: "M12.253 25.642h23.495v-3.284H12.253v3.284ZM24 7.958C15.154 7.958 7.957 15.154 7.957 24c0 8.846 7.197 16.043 16.043 16.043S40.044 32.846 40.044 24 32.846 7.958 24 7.958Z"
|
|
21
22
|
}
|
|
22
|
-
),
|
|
23
|
+
), m = /* @__PURE__ */ e.createElement(
|
|
23
24
|
"path",
|
|
24
25
|
{
|
|
25
26
|
fillRule: "evenodd",
|
|
26
27
|
d: "M10.358 25.642h27.284v-3.284H10.358v3.284ZM24 7.958C15.154 7.958 7.957 15.154 7.957 24c0 8.846 7.197 16.043 16.043 16.043S40.044 32.846 40.044 24 32.846 7.958 24 7.958Z"
|
|
27
28
|
}
|
|
28
|
-
), l = /* @__PURE__ */ e.createElement(
|
|
29
|
+
), l = /* @__PURE__ */ e.createElement(e.Fragment, null, r === d.ondark && /* @__PURE__ */ e.createElement("circle", { cx: "24", cy: "24", r: "17", fill: "white" }), /* @__PURE__ */ e.createElement(
|
|
29
30
|
"path",
|
|
30
31
|
{
|
|
31
32
|
fillRule: "evenodd",
|
|
32
33
|
d: "M13.4 26.1h21.2v-4.2H13.4v4.2ZM24 9C15.728 9 9 15.728 9 24s6.728 15 15 15c8.27 0 15-6.728 15-15S32.27 9 24 9Z"
|
|
33
34
|
}
|
|
34
|
-
);
|
|
35
|
-
return
|
|
35
|
+
));
|
|
36
|
+
return v({ size: t, isHovered: o, normal: n, normalHover: a, xSmall: c, xSmallHover: m, xxSmall: l, xxSmallHover: l });
|
|
36
37
|
};
|
|
37
38
|
export {
|
|
38
|
-
|
|
39
|
+
M as default
|
|
39
40
|
};
|
|
40
41
|
//# sourceMappingURL=NoAccess.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NoAccess.js","sources":["../../../src/components/Icons/NoAccess.tsx"],"sourcesContent":["import React from 'react';\n\nimport { getIcon, SvgPathProps } from '../Icon';\n\nconst NoAccess: React.FC<SvgPathProps> = ({ size, isHovered }: SvgPathProps): React.ReactElement => {\n const normal = (\n <path\n fillRule={'evenodd'}\n d=\"M11.7 25.3h24.6v-2.6H11.7v2.6ZM24 8.231C15.305 8.231 8.232 15.305 8.232 24S15.305 39.769 24 39.769 39.769 32.695 39.769 24 32.695 8.231 24 8.231Z\"\n />\n );\n\n const normalHover = (\n <path\n fillRule={'evenodd'}\n d=\"M9.95 25.3h28.1v-2.6H9.95v2.6ZM24 8.231C15.305 8.231 8.231 15.305 8.231 24S15.305 39.769 24 39.769 39.769 32.695 39.769 24 32.695 8.231 24 8.231Z\"\n />\n );\n\n const xSmall = (\n <path\n fillRule={'evenodd'}\n d=\"M12.253 25.642h23.495v-3.284H12.253v3.284ZM24 7.958C15.154 7.958 7.957 15.154 7.957 24c0 8.846 7.197 16.043 16.043 16.043S40.044 32.846 40.044 24 32.846 7.958 24 7.958Z\"\n />\n );\n\n const xSmallHover = (\n <path\n fillRule={'evenodd'}\n d=\"M10.358 25.642h27.284v-3.284H10.358v3.284ZM24 7.958C15.154 7.958 7.957 15.154 7.957 24c0 8.846 7.197 16.043 16.043 16.043S40.044 32.846 40.044 24 32.846 7.958 24 7.958Z\"\n />\n );\n\n const xxSmall = (\n <path\n
|
|
1
|
+
{"version":3,"file":"NoAccess.js","sources":["../../../src/components/Icons/NoAccess.tsx"],"sourcesContent":["import React from 'react';\n\nimport { FormMode } from '../../constants';\nimport { getIcon, SvgPathProps } from '../Icon';\n\nconst NoAccess: React.FC<SvgPathProps> = ({ size, isHovered, mode }: SvgPathProps): React.ReactElement => {\n const normal = (\n <path\n fillRule={'evenodd'}\n d=\"M11.7 25.3h24.6v-2.6H11.7v2.6ZM24 8.231C15.305 8.231 8.232 15.305 8.232 24S15.305 39.769 24 39.769 39.769 32.695 39.769 24 32.695 8.231 24 8.231Z\"\n />\n );\n\n const normalHover = (\n <path\n fillRule={'evenodd'}\n d=\"M9.95 25.3h28.1v-2.6H9.95v2.6ZM24 8.231C15.305 8.231 8.231 15.305 8.231 24S15.305 39.769 24 39.769 39.769 32.695 39.769 24 32.695 8.231 24 8.231Z\"\n />\n );\n\n const xSmall = (\n <path\n fillRule={'evenodd'}\n d=\"M12.253 25.642h23.495v-3.284H12.253v3.284ZM24 7.958C15.154 7.958 7.957 15.154 7.957 24c0 8.846 7.197 16.043 16.043 16.043S40.044 32.846 40.044 24 32.846 7.958 24 7.958Z\"\n />\n );\n\n const xSmallHover = (\n <path\n fillRule={'evenodd'}\n d=\"M10.358 25.642h27.284v-3.284H10.358v3.284ZM24 7.958C15.154 7.958 7.957 15.154 7.957 24c0 8.846 7.197 16.043 16.043 16.043S40.044 32.846 40.044 24 32.846 7.958 24 7.958Z\"\n />\n );\n\n const xxSmall = (\n <>\n {mode === FormMode.ondark && <circle cx=\"24\" cy=\"24\" r=\"17\" fill=\"white\" />}\n <path\n fillRule={'evenodd'}\n d=\"M13.4 26.1h21.2v-4.2H13.4v4.2ZM24 9C15.728 9 9 15.728 9 24s6.728 15 15 15c8.27 0 15-6.728 15-15S32.27 9 24 9Z\"\n />\n </>\n );\n\n return getIcon({ size, isHovered, normal, normalHover, xSmall, xSmallHover, xxSmall, xxSmallHover: xxSmall });\n};\n\nexport default NoAccess;\n"],"names":["NoAccess","size","isHovered","mode","normal","React","normalHover","xSmall","xSmallHover","xxSmall","FormMode","getIcon"],"mappings":";;;AAKA,MAAMA,IAAmC,CAAC,EAAE,MAAAC,GAAM,WAAAC,GAAW,MAAAC,QAA6C;AACxG,QAAMC,IACJC,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,GAAE;AAAA,IAAA;AAAA,EAAA,GAIAC,IACJD,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,GAAE;AAAA,IAAA;AAAA,EAAA,GAIAE,IACJF,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,GAAE;AAAA,IAAA;AAAA,EAAA,GAIAG,IACJH,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,GAAE;AAAA,IAAA;AAAA,EAAA,GAIAI,IACJJ,gBAAAA,EAAA,cAAAA,EAAA,UAAA,MACGF,MAASO,EAAS,UAAWL,gBAAAA,EAAA,cAAA,UAAA,EAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,MAAK,SAAQ,GACzEA,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,GAAE;AAAA,IAAA;AAAA,EAAA,CAEN;AAGK,SAAAM,EAAQ,EAAE,MAAAV,GAAM,WAAAC,GAAW,QAAAE,GAAQ,aAAAE,GAAa,QAAAC,GAAQ,aAAAC,GAAa,SAAAC,GAAS,cAAcA,EAAS,CAAA;AAC9G;"}
|
|
@@ -194,6 +194,7 @@ $layout-md-col-gap: getSpacer(m);
|
|
|
194
194
|
&__badge {
|
|
195
195
|
display: inline-block;
|
|
196
196
|
vertical-align: text-bottom;
|
|
197
|
+
flex-shrink: 0;
|
|
197
198
|
}
|
|
198
199
|
|
|
199
200
|
&__btn-container {
|
|
@@ -348,6 +349,12 @@ $layout-md-col-gap: getSpacer(m);
|
|
|
348
349
|
padding-right: getSpacer(2xs);
|
|
349
350
|
}
|
|
350
351
|
}
|
|
352
|
+
|
|
353
|
+
@media (max-width: map.get($grid-max-breakpoints, xs)) {
|
|
354
|
+
display: flex;
|
|
355
|
+
justify-content: space-between;
|
|
356
|
+
align-items: center;
|
|
357
|
+
}
|
|
351
358
|
}
|
|
352
359
|
|
|
353
360
|
.panel-details {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { FormMode, FormSize } from '../../constants';
|
|
3
|
-
export interface RadioButtonProps extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'aria-describedby' | 'name' | 'value' | 'disabled' | 'defaultChecked' | 'required' | 'onChange'> {
|
|
3
|
+
export interface RadioButtonProps extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'defaultChecked' | 'required' | 'onChange'> {
|
|
4
4
|
/** Adds custom classes to the element. */
|
|
5
5
|
className?: string;
|
|
6
6
|
/** The <Label/> next to the radioButton - sublabels kan ikke kombineres med large variant */
|
|
@@ -11,7 +11,7 @@ export interface RadioButtonProps extends Pick<React.InputHTMLAttributes<HTMLInp
|
|
|
11
11
|
inputId?: string;
|
|
12
12
|
/** Changes the visuals of the radioButton */
|
|
13
13
|
mode?: keyof typeof FormMode;
|
|
14
|
-
/** Changes the visuals of the radioButton */
|
|
14
|
+
/** Changes the visuals of the radioButton. Large version only works when used inside a FormGroup wrapper. */
|
|
15
15
|
size?: keyof typeof FormSize;
|
|
16
16
|
/** Activates Error style for the radioButton - This is can be true while errorText is empty, when in a FormGroup */
|
|
17
17
|
error?: boolean;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
1
|
+
import u, { useState as P } from "react";
|
|
2
|
+
import c from "classnames";
|
|
3
3
|
import { FormMode as i, FormSize as U, AnalyticsId as W } from "../../constants.js";
|
|
4
4
|
import { usePseudoClasses as q } from "../../hooks/usePseudoClasses.js";
|
|
5
5
|
import { useUuid as G } from "../../hooks/useUuid.js";
|
|
@@ -9,18 +9,18 @@ import { uuid as Q } from "../../utils/uuid.js";
|
|
|
9
9
|
import { ErrorWrapper as V } from "../ErrorWrapper/ErrorWrapper.js";
|
|
10
10
|
import { getLabelText as X, renderLabelAsParent as Y } from "../Label/Label.js";
|
|
11
11
|
import e from "../RadioButton/styles.module.scss";
|
|
12
|
-
const be = (l, o, a,
|
|
13
|
-
const n = o === "oninvalid", t = l ===
|
|
14
|
-
return
|
|
12
|
+
const be = (l, o, a, m) => {
|
|
13
|
+
const n = o === "oninvalid", t = l === m;
|
|
14
|
+
return c({
|
|
15
15
|
[e["radio-button-label__large--on-grey"]]: a && o === "ongrey" && !t,
|
|
16
16
|
[e["radio-button-label__large--on-blueberry"]]: o === "onblueberry" && !t && a,
|
|
17
17
|
[e["radio-button-label__large--selected"]]: a && t && !n,
|
|
18
18
|
[e["radio-button-label__large--selected-invalid"]]: a && t && n
|
|
19
19
|
});
|
|
20
|
-
}, Z =
|
|
20
|
+
}, Z = u.forwardRef((l, o) => {
|
|
21
21
|
const {
|
|
22
22
|
className: a,
|
|
23
|
-
defaultChecked:
|
|
23
|
+
defaultChecked: m,
|
|
24
24
|
onChange: n,
|
|
25
25
|
disabled: t,
|
|
26
26
|
label: f,
|
|
@@ -36,14 +36,14 @@ const be = (l, o, a, s) => {
|
|
|
36
36
|
required: L,
|
|
37
37
|
labelClassNames: N,
|
|
38
38
|
...I
|
|
39
|
-
} = l, g = k || d === i.oninvalid, y = d === i.ondark, h = d === i.onblueberry, T = d === i.oninvalid, r = w === U.large, [E, A] = P(
|
|
39
|
+
} = l, g = k || d === i.oninvalid, y = d === i.ondark, h = d === i.onblueberry, T = d === i.oninvalid, r = w === U.large, [E, A] = P(), { refObject: F, isFocused: s } = q(J(o) ? o : null), S = K([o, F]), C = G(B), j = c(e["radio-button-wrapper"], {
|
|
40
40
|
[e["radio-button-wrapper--with-error"]]: _,
|
|
41
41
|
[e["radio-button-wrapper__large"]]: r,
|
|
42
|
-
[e["radio-button-wrapper__large--focused"]]: r &&
|
|
43
|
-
[e["radio-button-wrapper__large--selected"]]: r && E &&
|
|
44
|
-
[e["radio-button-wrapper__large--invalid"]]: r && T &&
|
|
45
|
-
[e["radio-button-wrapper__large--on-blueberry"]]: r && h &&
|
|
46
|
-
}), z =
|
|
42
|
+
[e["radio-button-wrapper__large--focused"]]: r && s,
|
|
43
|
+
[e["radio-button-wrapper__large--selected"]]: r && E && s,
|
|
44
|
+
[e["radio-button-wrapper__large--invalid"]]: r && T && s,
|
|
45
|
+
[e["radio-button-wrapper__large--on-blueberry"]]: r && h && s
|
|
46
|
+
}), z = c(
|
|
47
47
|
e["radio-button-label"],
|
|
48
48
|
{
|
|
49
49
|
[e["radio-button-label--disabled"]]: t,
|
|
@@ -53,7 +53,7 @@ const be = (l, o, a, s) => {
|
|
|
53
53
|
[e["radio-button-label__large--disabled"]]: r && t
|
|
54
54
|
},
|
|
55
55
|
N
|
|
56
|
-
), D =
|
|
56
|
+
), D = c(
|
|
57
57
|
e["radio-button"],
|
|
58
58
|
{
|
|
59
59
|
[e["radio-button--on-dark"]]: y,
|
|
@@ -65,9 +65,9 @@ const be = (l, o, a, s) => {
|
|
|
65
65
|
[e["radio-button__large--invalid"]]: r && g
|
|
66
66
|
},
|
|
67
67
|
a
|
|
68
|
-
), M = (
|
|
69
|
-
A(
|
|
70
|
-
}, O = () => /* @__PURE__ */
|
|
68
|
+
), M = (b) => {
|
|
69
|
+
A(b.target.checked), n && n(b);
|
|
70
|
+
}, O = () => /* @__PURE__ */ u.createElement(
|
|
71
71
|
"input",
|
|
72
72
|
{
|
|
73
73
|
id: p,
|
|
@@ -77,14 +77,14 @@ const be = (l, o, a, s) => {
|
|
|
77
77
|
disabled: t,
|
|
78
78
|
value: R,
|
|
79
79
|
ref: S,
|
|
80
|
-
defaultChecked:
|
|
80
|
+
defaultChecked: m,
|
|
81
81
|
"aria-describedby": H(l, C),
|
|
82
82
|
required: L,
|
|
83
83
|
...I,
|
|
84
|
-
onChange: (
|
|
84
|
+
onChange: (b) => M(b)
|
|
85
85
|
}
|
|
86
86
|
);
|
|
87
|
-
return /* @__PURE__ */
|
|
87
|
+
return /* @__PURE__ */ u.createElement(V, { errorText: _, errorTextId: C }, /* @__PURE__ */ u.createElement("div", { "data-testid": x, "data-analyticsid": W.RadioButton, className: j }, Y(
|
|
88
88
|
f,
|
|
89
89
|
O(),
|
|
90
90
|
p,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButton.js","sources":["../../../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormMode, FormSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport interface RadioButtonProps\n extends Pick<\n React.InputHTMLAttributes<HTMLInputElement>,\n 'aria-describedby' | 'name' | 'value' | 'disabled' | 'defaultChecked' | 'required' | 'onChange'\n > {\n /** Adds custom classes to the element. */\n className?: string;\n /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med large variant */\n label: React.ReactNode;\n /** Adds custom classes to the label element. */\n labelClassNames?: string;\n /** input id of the radioButton */\n inputId?: string;\n /** Changes the visuals of the radioButton */\n mode?: keyof typeof FormMode;\n /** Changes the visuals of the radioButton */\n size?: keyof typeof FormSize;\n /** Activates Error style for the radioButton - This is can be true while errorText is empty, when in a FormGroup */\n error?: boolean;\n /** Error text to show above the component */\n errorText?: string;\n /** Error text id */\n errorTextId?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\nexport const getRadioLabelClasses = (radioId: string, mode: FormMode, large: boolean, checkedRadioId?: string): string | undefined => {\n const onCherry = mode === 'oninvalid';\n const checked = radioId === checkedRadioId;\n\n return classNames({\n [radioButtonStyles['radio-button-label__large--on-grey']]: large && mode === 'ongrey' && !checked,\n [radioButtonStyles['radio-button-label__large--on-blueberry']]: mode === 'onblueberry' && !checked && large,\n [radioButtonStyles['radio-button-label__large--selected']]: large && checked && !onCherry,\n [radioButtonStyles['radio-button-label__large--selected-invalid']]: large && checked && onCherry,\n });\n};\n\nexport const RadioButton = React.forwardRef((props: RadioButtonProps, ref: React.Ref<HTMLInputElement>) => {\n const {\n className,\n defaultChecked = false,\n onChange,\n disabled,\n label,\n inputId = uuid(),\n mode = FormMode.onwhite,\n name = inputId,\n size,\n errorText,\n error = !!errorText,\n errorTextId,\n value = getLabelText(label),\n testId,\n required,\n labelClassNames,\n ...rest\n } = props;\n const invalid = error || mode === FormMode.oninvalid;\n const onDark = mode === FormMode.ondark;\n const onBlueberry = mode === FormMode.onblueberry;\n const onCherry = mode === FormMode.oninvalid;\n const isLarge = size === FormSize.large;\n const [checked, changeChecked] = useState<boolean>(defaultChecked);\n const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n const mergedRefs = mergeRefs([ref, refObject]);\n const errorTextUuid = useUuid(errorTextId);\n\n const radioButtonWrapperClasses = classNames(radioButtonStyles['radio-button-wrapper'], {\n [radioButtonStyles['radio-button-wrapper--with-error']]: errorText,\n [radioButtonStyles['radio-button-wrapper__large']]: isLarge,\n [radioButtonStyles['radio-button-wrapper__large--focused']]: isLarge && isFocused,\n [radioButtonStyles['radio-button-wrapper__large--selected']]: isLarge && checked && isFocused,\n [radioButtonStyles['radio-button-wrapper__large--invalid']]: isLarge && onCherry && isFocused,\n [radioButtonStyles['radio-button-wrapper__large--on-blueberry']]: isLarge && onBlueberry && isFocused,\n });\n const radioButtonLabelClasses = classNames(\n radioButtonStyles['radio-button-label'],\n {\n [radioButtonStyles['radio-button-label--disabled']]: disabled,\n [radioButtonStyles['radio-button-label--on-dark']]: onDark,\n [radioButtonStyles['radio-button-label--invalid']]: invalid,\n [radioButtonStyles['radio-button-label__large']]: isLarge,\n [radioButtonStyles['radio-button-label__large--disabled']]: isLarge && disabled,\n },\n labelClassNames\n );\n const radioButtonClasses = classNames(\n radioButtonStyles['radio-button'],\n {\n [radioButtonStyles['radio-button--on-dark']]: onDark,\n [radioButtonStyles['radio-button--disabled']]: disabled,\n [radioButtonStyles['radio-button--on-blueberry']]: onBlueberry,\n [radioButtonStyles['radio-button--invalid']]: invalid,\n [radioButtonStyles['radio-button__large']]: isLarge,\n [radioButtonStyles['radio-button__large--disabled']]: isLarge && disabled,\n [radioButtonStyles['radio-button__large--invalid']]: isLarge && invalid,\n },\n className\n );\n\n const change = (e: React.ChangeEvent<HTMLInputElement>): void => {\n changeChecked(e.target.checked);\n onChange && onChange(e);\n };\n\n const getLabelContent = (): React.ReactNode => (\n <input\n id={inputId}\n name={name}\n className={radioButtonClasses}\n type=\"radio\"\n disabled={disabled}\n value={value}\n ref={mergedRefs}\n defaultChecked={defaultChecked}\n aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n required={required}\n {...rest}\n onChange={(e): void => change(e)}\n />\n );\n\n return (\n <ErrorWrapper errorText={errorText} errorTextId={errorTextUuid}>\n <div data-testid={testId} data-analyticsid={AnalyticsId.RadioButton} className={radioButtonWrapperClasses}>\n {renderLabelAsParent(\n label,\n getLabelContent(),\n inputId,\n mode as FormMode,\n radioButtonLabelClasses,\n undefined,\n radioButtonStyles['radiobutton-sublabel-wrapper'],\n isLarge\n )}\n </div>\n </ErrorWrapper>\n );\n});\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"names":["getRadioLabelClasses","radioId","mode","large","checkedRadioId","onCherry","checked","classNames","radioButtonStyles","RadioButton","React","props","ref","className","defaultChecked","onChange","disabled","label","inputId","uuid","FormMode","name","size","errorText","error","errorTextId","value","getLabelText","testId","required","labelClassNames","rest","invalid","onDark","onBlueberry","isLarge","FormSize","changeChecked","useState","refObject","isFocused","usePseudoClasses","isMutableRefObject","mergedRefs","mergeRefs","errorTextUuid","useUuid","radioButtonWrapperClasses","radioButtonLabelClasses","radioButtonClasses","change","e","getLabelContent","getAriaDescribedBy","ErrorWrapper","AnalyticsId","renderLabelAsParent"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"RadioButton.js","sources":["../../../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormMode, FormSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport interface RadioButtonProps\n extends Pick<\n React.InputHTMLAttributes<HTMLInputElement>,\n 'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'defaultChecked' | 'required' | 'onChange'\n > {\n /** Adds custom classes to the element. */\n className?: string;\n /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med large variant */\n label: React.ReactNode;\n /** Adds custom classes to the label element. */\n labelClassNames?: string;\n /** input id of the radioButton */\n inputId?: string;\n /** Changes the visuals of the radioButton */\n mode?: keyof typeof FormMode;\n /** Changes the visuals of the radioButton. Large version only works when used inside a FormGroup wrapper. */\n size?: keyof typeof FormSize;\n /** Activates Error style for the radioButton - This is can be true while errorText is empty, when in a FormGroup */\n error?: boolean;\n /** Error text to show above the component */\n errorText?: string;\n /** Error text id */\n errorTextId?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\nexport const getRadioLabelClasses = (radioId: string, mode: FormMode, large: boolean, checkedRadioId?: string): string | undefined => {\n const onCherry = mode === 'oninvalid';\n const checked = radioId === checkedRadioId;\n\n return classNames({\n [radioButtonStyles['radio-button-label__large--on-grey']]: large && mode === 'ongrey' && !checked,\n [radioButtonStyles['radio-button-label__large--on-blueberry']]: mode === 'onblueberry' && !checked && large,\n [radioButtonStyles['radio-button-label__large--selected']]: large && checked && !onCherry,\n [radioButtonStyles['radio-button-label__large--selected-invalid']]: large && checked && onCherry,\n });\n};\n\nexport const RadioButton = React.forwardRef((props: RadioButtonProps, ref: React.Ref<HTMLInputElement>) => {\n const {\n className,\n defaultChecked,\n onChange,\n disabled,\n label,\n inputId = uuid(),\n mode = FormMode.onwhite,\n name = inputId,\n size,\n errorText,\n error = !!errorText,\n errorTextId,\n value = getLabelText(label),\n testId,\n required,\n labelClassNames,\n ...rest\n } = props;\n const invalid = error || mode === FormMode.oninvalid;\n const onDark = mode === FormMode.ondark;\n const onBlueberry = mode === FormMode.onblueberry;\n const onCherry = mode === FormMode.oninvalid;\n const isLarge = size === FormSize.large;\n const [checked, changeChecked] = useState<boolean>();\n const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n const mergedRefs = mergeRefs([ref, refObject]);\n const errorTextUuid = useUuid(errorTextId);\n\n const radioButtonWrapperClasses = classNames(radioButtonStyles['radio-button-wrapper'], {\n [radioButtonStyles['radio-button-wrapper--with-error']]: errorText,\n [radioButtonStyles['radio-button-wrapper__large']]: isLarge,\n [radioButtonStyles['radio-button-wrapper__large--focused']]: isLarge && isFocused,\n [radioButtonStyles['radio-button-wrapper__large--selected']]: isLarge && checked && isFocused,\n [radioButtonStyles['radio-button-wrapper__large--invalid']]: isLarge && onCherry && isFocused,\n [radioButtonStyles['radio-button-wrapper__large--on-blueberry']]: isLarge && onBlueberry && isFocused,\n });\n const radioButtonLabelClasses = classNames(\n radioButtonStyles['radio-button-label'],\n {\n [radioButtonStyles['radio-button-label--disabled']]: disabled,\n [radioButtonStyles['radio-button-label--on-dark']]: onDark,\n [radioButtonStyles['radio-button-label--invalid']]: invalid,\n [radioButtonStyles['radio-button-label__large']]: isLarge,\n [radioButtonStyles['radio-button-label__large--disabled']]: isLarge && disabled,\n },\n labelClassNames\n );\n const radioButtonClasses = classNames(\n radioButtonStyles['radio-button'],\n {\n [radioButtonStyles['radio-button--on-dark']]: onDark,\n [radioButtonStyles['radio-button--disabled']]: disabled,\n [radioButtonStyles['radio-button--on-blueberry']]: onBlueberry,\n [radioButtonStyles['radio-button--invalid']]: invalid,\n [radioButtonStyles['radio-button__large']]: isLarge,\n [radioButtonStyles['radio-button__large--disabled']]: isLarge && disabled,\n [radioButtonStyles['radio-button__large--invalid']]: isLarge && invalid,\n },\n className\n );\n\n const change = (e: React.ChangeEvent<HTMLInputElement>): void => {\n changeChecked(e.target.checked);\n onChange && onChange(e);\n };\n\n const getLabelContent = (): React.ReactNode => (\n <input\n id={inputId}\n name={name}\n className={radioButtonClasses}\n type=\"radio\"\n disabled={disabled}\n value={value}\n ref={mergedRefs}\n defaultChecked={defaultChecked}\n aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n required={required}\n {...rest}\n onChange={(e): void => change(e)}\n />\n );\n\n return (\n <ErrorWrapper errorText={errorText} errorTextId={errorTextUuid}>\n <div data-testid={testId} data-analyticsid={AnalyticsId.RadioButton} className={radioButtonWrapperClasses}>\n {renderLabelAsParent(\n label,\n getLabelContent(),\n inputId,\n mode as FormMode,\n radioButtonLabelClasses,\n undefined,\n radioButtonStyles['radiobutton-sublabel-wrapper'],\n isLarge\n )}\n </div>\n </ErrorWrapper>\n );\n});\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"names":["getRadioLabelClasses","radioId","mode","large","checkedRadioId","onCherry","checked","classNames","radioButtonStyles","RadioButton","React","props","ref","className","defaultChecked","onChange","disabled","label","inputId","uuid","FormMode","name","size","errorText","error","errorTextId","value","getLabelText","testId","required","labelClassNames","rest","invalid","onDark","onBlueberry","isLarge","FormSize","changeChecked","useState","refObject","isFocused","usePseudoClasses","isMutableRefObject","mergedRefs","mergeRefs","errorTextUuid","useUuid","radioButtonWrapperClasses","radioButtonLabelClasses","radioButtonClasses","change","e","getLabelContent","getAriaDescribedBy","ErrorWrapper","AnalyticsId","renderLabelAsParent"],"mappings":"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"}
|
|
@@ -16,6 +16,8 @@ export declare enum StatusDotVariant {
|
|
|
16
16
|
attachment = "attachment"
|
|
17
17
|
}
|
|
18
18
|
export interface StatusDotIconProps {
|
|
19
|
+
/** Defines the color of the icon */
|
|
20
|
+
mode?: keyof typeof StatusDotModes;
|
|
19
21
|
/** The variant defines style formatting and what icon to use */
|
|
20
22
|
variant?: keyof typeof StatusDotVariant;
|
|
21
23
|
}
|
|
@@ -1,26 +1,29 @@
|
|
|
1
1
|
import t from "react";
|
|
2
|
-
import
|
|
2
|
+
import l from "classnames";
|
|
3
3
|
import "../../theme/grid.js";
|
|
4
4
|
import "../../hooks/useBreakpoint.js";
|
|
5
|
-
import { AnalyticsId as
|
|
6
|
-
import { getColor as
|
|
7
|
-
import { Icon as
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import N from "../Icons/
|
|
12
|
-
import
|
|
13
|
-
var
|
|
14
|
-
const
|
|
15
|
-
const
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
)
|
|
19
|
-
|
|
5
|
+
import { FormMode as d, AnalyticsId as k, IconSize as E } from "../../constants.js";
|
|
6
|
+
import { getColor as m } from "../../theme/currys/color.js";
|
|
7
|
+
import { Icon as a } from "../Icon/Icon.js";
|
|
8
|
+
import w from "../Icons/Attachment.js";
|
|
9
|
+
import v from "../Icons/Change.js";
|
|
10
|
+
import C from "../Icons/Group.js";
|
|
11
|
+
import N from "../Icons/NoAccess.js";
|
|
12
|
+
import n from "../StatusDot/styles.module.scss";
|
|
13
|
+
var c = ((e) => (e[e.onwhite = d.onwhite] = "onwhite", e[e.ondark = d.ondark] = "ondark", e))(c || {}), y = /* @__PURE__ */ ((e) => (e.info = "info", e.warning = "warning", e.alert = "alert", e.cancelled = "cancelled", e.active = "active", e.transparent = "transparent", e.recurring = "recurring", e.group = "group", e.noaccess = "noaccess", e.attachment = "attachment", e))(y || {});
|
|
14
|
+
const b = ({ mode: e, variant: o }) => {
|
|
15
|
+
const r = { color: e === c.ondark ? m("white") : m("black"), size: E.XXSmall, mode: e };
|
|
16
|
+
return o === "recurring" ? /* @__PURE__ */ t.createElement(a, { ...r, svgIcon: v }) : o === "group" ? /* @__PURE__ */ t.createElement(a, { ...r, svgIcon: C }) : o === "noaccess" ? /* @__PURE__ */ t.createElement(a, { ...r, svgIcon: N, color: m("cherry", 600) }) : o === "attachment" ? /* @__PURE__ */ t.createElement(a, { ...r, svgIcon: w }) : null;
|
|
17
|
+
}, H = (e) => {
|
|
18
|
+
const { id: o, mode: s = c.onwhite, variant: r = "info", text: i, className: p, testId: f } = e, u = r === "recurring" || r === "group" || r === "noaccess" || r === "attachment", g = r === "cancelled", h = l(n.statusdot, g && n["statusdot--cancelled"], p), I = l(n.statusdot__dot, {
|
|
19
|
+
...u ? {} : { [n[`statusdot__dot--${r}`]]: !0 },
|
|
20
|
+
[n["statusdot__dot--on-dark"]]: s === c.ondark
|
|
21
|
+
}), _ = l(s === c.ondark && n["statusdot__label--on-dark"]);
|
|
22
|
+
return /* @__PURE__ */ t.createElement("span", { id: o, className: h, "data-testid": f, "data-analyticsid": k.StatusDot }, /* @__PURE__ */ t.createElement("span", { className: I }, /* @__PURE__ */ t.createElement(b, { mode: s, variant: r })), /* @__PURE__ */ t.createElement("span", { className: _ }, i));
|
|
20
23
|
};
|
|
21
24
|
export {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
+
c as StatusDotModes,
|
|
26
|
+
y as StatusDotVariant,
|
|
27
|
+
H as default
|
|
25
28
|
};
|
|
26
29
|
//# sourceMappingURL=StatusDot.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StatusDot.js","sources":["../../../src/components/StatusDot/StatusDot.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { IconSize } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport { getColor } from '../../theme/currys';\nimport { Icon } from '../Icon';\nimport Attachment from '../Icons/Attachment';\nimport
|
|
1
|
+
{"version":3,"file":"StatusDot.js","sources":["../../../src/components/StatusDot/StatusDot.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { IconSize } from '../..';\nimport { AnalyticsId, FormMode } from '../../constants';\nimport { getColor } from '../../theme/currys';\nimport { Icon } from '../Icon';\nimport Attachment from '../Icons/Attachment';\nimport Change from '../Icons/Change';\nimport Group from '../Icons/Group';\nimport NoAccess from '../Icons/NoAccess';\n\nimport styles from './styles.module.scss';\n\nexport enum StatusDotModes {\n onwhite = FormMode.onwhite,\n ondark = FormMode.ondark,\n}\n\nexport enum StatusDotVariant {\n info = 'info',\n warning = 'warning',\n alert = 'alert',\n cancelled = 'cancelled',\n active = 'active',\n transparent = 'transparent',\n recurring = 'recurring',\n group = 'group',\n noaccess = 'noaccess',\n attachment = 'attachment',\n}\n\nexport interface StatusDotIconProps {\n /** Defines the color of the icon */\n mode?: keyof typeof StatusDotModes;\n /** The variant defines style formatting and what icon to use */\n variant?: keyof typeof StatusDotVariant;\n}\n\nconst StatusDotIcon: React.FC<StatusDotIconProps> = ({ mode, variant }) => {\n const color = mode === StatusDotModes.ondark ? getColor('white') : getColor('black');\n const iconProps = { color, size: IconSize.XXSmall, mode };\n\n if (variant === StatusDotVariant.recurring) {\n return <Icon {...iconProps} svgIcon={Change} />;\n } else if (variant === StatusDotVariant.group) {\n return <Icon {...iconProps} svgIcon={Group} />;\n } else if (variant === StatusDotVariant.noaccess) {\n return <Icon {...iconProps} svgIcon={NoAccess} color={getColor('cherry', 600)} />;\n } else if (variant === StatusDotVariant.attachment) {\n return <Icon {...iconProps} svgIcon={Attachment} />;\n }\n\n return null;\n};\n\nexport interface StatusDotProps {\n /** id that is placed on the wrapper */\n id?: string;\n /** Defines the color mode, onwhite, ondark etc. */\n mode?: keyof typeof StatusDotModes;\n /** Visual variants for the statusdot */\n variant?: keyof typeof StatusDotVariant;\n /** Text placed to the right of the statusdot */\n text: string;\n /** Adds custom classes to the element. */\n className?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\nconst StatusDot: React.FC<StatusDotProps> = props => {\n const { id, mode = StatusDotModes.onwhite, variant = StatusDotVariant.info, text, className, testId } = props;\n\n const hasIcon =\n variant === StatusDotVariant.recurring ||\n variant === StatusDotVariant.group ||\n variant === StatusDotVariant.noaccess ||\n variant === StatusDotVariant.attachment;\n\n const isCancelled = variant === StatusDotVariant.cancelled;\n\n const statusDotClasses = classNames(styles['statusdot'], isCancelled && styles['statusdot--cancelled'], className);\n const dotClasses = classNames(styles['statusdot__dot'], {\n ...(hasIcon ? {} : { [styles[`statusdot__dot--${variant}`]]: true }),\n [styles['statusdot__dot--on-dark']]: mode === StatusDotModes.ondark,\n });\n const labelClasses = classNames(mode === StatusDotModes.ondark && styles['statusdot__label--on-dark']);\n\n return (\n <span id={id} className={statusDotClasses} data-testid={testId} data-analyticsid={AnalyticsId.StatusDot}>\n <span className={dotClasses}>\n <StatusDotIcon mode={mode} variant={variant} />\n </span>\n <span className={labelClasses}>{text}</span>\n </span>\n );\n};\n\nexport default StatusDot;\n"],"names":["StatusDotModes","FormMode","StatusDotVariant","StatusDotIcon","mode","variant","iconProps","getColor","IconSize","React","Icon","Change","Group","NoAccess","Attachment","StatusDot","props","id","text","className","testId","hasIcon","isCancelled","statusDotClasses","classNames","styles","dotClasses","labelClasses","AnalyticsId"],"mappings":";;;;;;;;;;;;AAeY,IAAAA,KAAL,CAAKA,OACVA,EAAAA,EAAA,UAAUC,EAAS,OAAnB,IAAA,WACAD,EAAAA,EAAA,SAASC,EAAS,MAAlB,IAAA,UAFUD,IAAAA,KAAA,CAAA,CAAA,GAKAE,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,UAAU,WACVA,EAAA,QAAQ,SACRA,EAAA,YAAY,aACZA,EAAA,SAAS,UACTA,EAAA,cAAc,eACdA,EAAA,YAAY,aACZA,EAAA,QAAQ,SACRA,EAAA,WAAW,YACXA,EAAA,aAAa,cAVHA,IAAAA,KAAA,CAAA,CAAA;AAoBZ,MAAMC,IAA8C,CAAC,EAAE,MAAAC,GAAM,SAAAC,QAAc;AAEzE,QAAMC,IAAY,EAAE,OADNF,MAASJ,EAAe,SAASO,EAAS,OAAO,IAAIA,EAAS,OAAO,GACxD,MAAMC,EAAS,SAAS,MAAAJ;AAEnD,SAAIC,MAAY,cACNI,gBAAAA,EAAA,cAAAC,GAAA,EAAM,GAAGJ,GAAW,SAASK,EAAQ,CAAA,IACpCN,MAAY,UACbI,gBAAAA,EAAA,cAAAC,GAAA,EAAM,GAAGJ,GAAW,SAASM,EAAO,CAAA,IACnCP,MAAY,aACdI,gBAAAA,EAAA,cAACC,GAAM,EAAA,GAAGJ,GAAW,SAASO,GAAU,OAAON,EAAS,UAAU,GAAG,EAAG,CAAA,IACtEF,MAAY,eACbI,gBAAAA,EAAA,cAAAC,GAAA,EAAM,GAAGJ,GAAW,SAASQ,EAAY,CAAA,IAG5C;AACT,GAiBMC,IAAsC,CAASC,MAAA;AAC7C,QAAA,EAAE,IAAAC,GAAI,MAAAb,IAAOJ,EAAe,SAAS,SAAAK,IAAU,QAAuB,MAAAa,GAAM,WAAAC,GAAW,QAAAC,EAAA,IAAWJ,GAElGK,IACJhB,MAAY,eACZA,MAAY,WACZA,MAAY,cACZA,MAAY,cAERiB,IAAcjB,MAAY,aAE1BkB,IAAmBC,EAAWC,EAAO,WAAcH,KAAeG,EAAO,sBAAsB,GAAGN,CAAS,GAC3GO,IAAaF,EAAWC,EAAO,gBAAmB;AAAA,IACtD,GAAIJ,IAAU,KAAK,EAAE,CAACI,EAAO,mBAAmBpB,CAAO,EAAE,CAAC,GAAG,GAAK;AAAA,IAClE,CAACoB,EAAO,yBAAyB,CAAC,GAAGrB,MAASJ,EAAe;AAAA,EAAA,CAC9D,GACK2B,IAAeH,EAAWpB,MAASJ,EAAe,UAAUyB,EAAO,2BAA2B,CAAC;AAGnG,SAAAhB,gBAAAA,EAAA,cAAC,QAAK,EAAA,IAAAQ,GAAQ,WAAWM,GAAkB,eAAaH,GAAQ,oBAAkBQ,EAAY,UAAA,GAC3FnB,gBAAAA,EAAA,cAAA,QAAA,EAAK,WAAWiB,EACf,GAAAjB,gBAAAA,EAAA,cAACN,GAAc,EAAA,MAAAC,GAAY,SAAAC,GAAkB,CAC/C,GACAI,gBAAAA,EAAA,cAAC,QAAK,EAAA,WAAWkB,EAAe,GAAAT,CAAK,CACvC;AAEJ;"}
|
|
@@ -12,12 +12,12 @@ $status-dot-size: 0.937rem;
|
|
|
12
12
|
display: inline-flex;
|
|
13
13
|
align-items: flex-start;
|
|
14
14
|
font-size: $font-size-xs;
|
|
15
|
-
line-height:
|
|
15
|
+
line-height: 1.4rem;
|
|
16
16
|
font-weight: 400;
|
|
17
17
|
|
|
18
18
|
@media (min-width: map.get($grid-breakpoints, sm)) {
|
|
19
19
|
font-size: $font-size-sm;
|
|
20
|
-
line-height:
|
|
20
|
+
line-height: 1.6rem;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
&--cancelled {
|
|
@@ -25,25 +25,28 @@ $status-dot-size: 0.937rem;
|
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
&__dot {
|
|
28
|
-
|
|
28
|
+
display: flex;
|
|
29
|
+
align-items: center;
|
|
30
|
+
justify-content: center;
|
|
31
|
+
position: relative;
|
|
32
|
+
top: getSpacer(4xs);
|
|
29
33
|
margin-right: getSpacer(2xs);
|
|
30
34
|
border-radius: 10rem;
|
|
31
|
-
|
|
35
|
+
width: $status-dot-size;
|
|
36
|
+
height: $status-dot-size;
|
|
37
|
+
min-width: $status-dot-size;
|
|
38
|
+
min-height: $status-dot-size;
|
|
32
39
|
|
|
33
40
|
@media (min-width: map.get($grid-breakpoints, sm)) {
|
|
34
|
-
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
&:not(#{&}--icon) {
|
|
38
|
-
width: $status-dot-size;
|
|
39
|
-
height: $status-dot-size;
|
|
40
|
-
min-width: $status-dot-size;
|
|
41
|
-
min-height: $status-dot-size;
|
|
41
|
+
top: getSpacer(3xs);
|
|
42
42
|
}
|
|
43
43
|
|
|
44
44
|
&--info {
|
|
45
45
|
background: $kiwi900;
|
|
46
46
|
}
|
|
47
|
+
&--info#{&}--on-dark {
|
|
48
|
+
background: $kiwi400;
|
|
49
|
+
}
|
|
47
50
|
|
|
48
51
|
&--warning {
|
|
49
52
|
background: $banana400;
|
|
@@ -53,26 +56,34 @@ $status-dot-size: 0.937rem;
|
|
|
53
56
|
&--cancelled {
|
|
54
57
|
background: $cherry500;
|
|
55
58
|
}
|
|
59
|
+
&--alert#{&}--on-dark {
|
|
60
|
+
background: $cherry300;
|
|
61
|
+
}
|
|
62
|
+
&--cancelled#{&}--on-dark {
|
|
63
|
+
outline: 2px solid $white;
|
|
64
|
+
}
|
|
56
65
|
|
|
57
66
|
&--active {
|
|
58
67
|
background: $blueberry500;
|
|
59
68
|
}
|
|
69
|
+
&--active#{&}--on-dark {
|
|
70
|
+
background: $blueberry300;
|
|
71
|
+
}
|
|
60
72
|
|
|
61
73
|
&--transparent {
|
|
62
74
|
border: 2px solid $neutral600;
|
|
63
75
|
}
|
|
76
|
+
&--transparent#{&}--on-dark {
|
|
77
|
+
border: none;
|
|
78
|
+
background: $white;
|
|
79
|
+
}
|
|
64
80
|
|
|
65
|
-
|
|
81
|
+
svg {
|
|
66
82
|
position: absolute;
|
|
67
|
-
margin: getSpacer(4xs) * -1 0 0 getSpacer(3xs) * -1;
|
|
68
83
|
}
|
|
69
84
|
}
|
|
70
85
|
|
|
71
86
|
&__label {
|
|
72
|
-
&--icon {
|
|
73
|
-
margin-left: getSpacer(m);
|
|
74
|
-
}
|
|
75
|
-
|
|
76
87
|
&--on-dark {
|
|
77
88
|
color: $white;
|
|
78
89
|
}
|
|
@@ -4,11 +4,10 @@ export type Styles = {
|
|
|
4
4
|
'statusdot__dot--active': string;
|
|
5
5
|
'statusdot__dot--alert': string;
|
|
6
6
|
'statusdot__dot--cancelled': string;
|
|
7
|
-
'statusdot__dot--icon': string;
|
|
8
7
|
'statusdot__dot--info': string;
|
|
8
|
+
'statusdot__dot--on-dark': string;
|
|
9
9
|
'statusdot__dot--transparent': string;
|
|
10
10
|
'statusdot__dot--warning': string;
|
|
11
|
-
'statusdot__label--icon': string;
|
|
12
11
|
'statusdot__label--on-dark': string;
|
|
13
12
|
'statusdot--cancelled': string;
|
|
14
13
|
};
|