@helsenorge/designsystem-react 2.9.3 → 2.10.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/Avatar.js +2 -0
- package/Avatar.js.map +1 -0
- package/Badge.js +1 -1
- package/Badge.js.map +1 -1
- package/CHANGELOG.md +7 -0
- package/FormGroup.js +1 -1
- package/FormGroup.js.map +1 -1
- package/ListHeader.js +2 -0
- package/ListHeader.js.map +1 -0
- package/ListHeaderText.js +2 -0
- package/ListHeaderText.js.map +1 -0
- package/StatusDot.js +2 -0
- package/StatusDot.js.map +1 -0
- package/components/Avatar/Avatar.d.ts +3 -2
- package/components/Avatar/Avatar.d.ts.map +1 -1
- package/components/Avatar/index.js +1 -1
- package/components/Avatar/index.js.map +1 -1
- package/components/Badge/Badge.d.ts +3 -2
- package/components/Badge/Badge.d.ts.map +1 -1
- package/components/Badge/styles.module.scss +1 -4
- package/components/Badge/styles.module.scss.d.ts +0 -1
- package/components/ExpanderList/ExpanderList.d.ts +10 -4
- package/components/ExpanderList/ExpanderList.d.ts.map +1 -1
- package/components/ExpanderList/componentdata.json +1 -1
- package/components/ExpanderList/index.js +1 -1
- package/components/ExpanderList/index.js.map +1 -1
- package/components/ExpanderList/styles.module.scss +27 -66
- package/components/ExpanderList/styles.module.scss.d.ts +3 -6
- package/components/FormExample/index.js +2 -2
- package/components/FormExample/index.js.map +1 -1
- package/components/FormGroup/FormGroup.d.ts.map +1 -1
- package/components/FormGroup/index.js +1 -1
- package/components/Icons/Coins.js +1 -1
- package/components/Icons/Coins.js.map +1 -1
- package/components/Icons/PersonCancel.js +1 -1
- package/components/Icons/PersonCancel.js.map +1 -1
- package/components/Icons/TravelRoute.js +1 -1
- package/components/Icons/TravelRoute.js.map +1 -1
- package/components/LinkList/LinkList.d.ts +13 -8
- package/components/LinkList/LinkList.d.ts.map +1 -1
- package/components/LinkList/componentdata.json +1 -1
- package/components/LinkList/index.js +1 -1
- package/components/LinkList/index.js.map +1 -1
- package/components/LinkList/styles.module.scss +33 -60
- package/components/LinkList/styles.module.scss.d.ts +3 -5
- package/components/ListHeader/ListHeader.d.ts +38 -0
- package/components/ListHeader/ListHeader.d.ts.map +1 -0
- package/components/ListHeader/ListHeaderText/ListHeaderText.d.ts +24 -0
- package/components/ListHeader/ListHeaderText/ListHeaderText.d.ts.map +1 -0
- package/components/ListHeader/ListHeaderText/componentdata.json +1 -0
- package/components/ListHeader/ListHeaderText/index.d.ts +4 -0
- package/components/ListHeader/ListHeaderText/index.d.ts.map +1 -0
- package/components/ListHeader/ListHeaderText/index.js +2 -0
- package/components/ListHeader/ListHeaderText/index.js.map +1 -0
- package/components/ListHeader/componentdata.json +1 -0
- package/components/ListHeader/index.d.ts +5 -0
- package/components/ListHeader/index.d.ts.map +1 -0
- package/components/ListHeader/index.js +2 -0
- package/components/ListHeader/index.js.map +1 -0
- package/components/ListHeader/styles.module.scss +149 -0
- package/components/ListHeader/styles.module.scss.d.ts +41 -0
- package/components/NotificationPanel/styles.module.scss +2 -1
- package/components/StatusDot/StatusDot.d.ts.map +1 -1
- package/components/StatusDot/index.js +1 -1
- package/components/StatusDot/index.js.map +1 -1
- package/components/StatusDot/styles.module.scss +1 -0
- package/components/Validation/index.js +1 -1
- package/package.json +1 -1
- package/utils/component.d.ts +3 -0
- package/utils/component.d.ts.map +1 -0
- package/utils/component.js +2 -0
- package/utils/component.js.map +1 -0
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { AvatarProps, AvatarType } from '../Avatar';
|
|
3
|
+
import { BadgeProps, BadgeType } from '../Badge';
|
|
4
|
+
import { ListHeaderTextProps, ListHeaderTextType } from './ListHeaderText/ListHeaderText';
|
|
5
|
+
import { SvgIcon } from '../Icons';
|
|
6
|
+
export declare type ListHeaderSize = 'small' | 'medium' | 'large';
|
|
7
|
+
export interface ListHeaderType extends React.ForwardRefExoticComponent<ListHeaderProps & React.RefAttributes<HTMLLIElement>> {
|
|
8
|
+
Avatar?: AvatarType;
|
|
9
|
+
Badge?: BadgeType;
|
|
10
|
+
ListHeaderText?: ListHeaderTextType;
|
|
11
|
+
}
|
|
12
|
+
export declare const renderListHeader: (element: React.ReactNode, chevronIcon: SvgIcon, isHovered: boolean, size: ListHeaderSize, icon?: React.ReactElement) => false | "" | 0 | JSX.Element | null | undefined;
|
|
13
|
+
export interface ListHeaderProps {
|
|
14
|
+
/** Adds custom classes to the ListHeader element. */
|
|
15
|
+
className?: string;
|
|
16
|
+
/** Chevron to render inside of the ListHeader */
|
|
17
|
+
chevronIcon?: SvgIcon;
|
|
18
|
+
/** Children to be rendered inside of ListHeader */
|
|
19
|
+
children: React.ReactNode;
|
|
20
|
+
/** icon to be rendered inside of ListHeader */
|
|
21
|
+
icon?: React.ReactElement;
|
|
22
|
+
/** whether or not the parent is hovered */
|
|
23
|
+
isHovered?: boolean;
|
|
24
|
+
/** Changes size of the ListHeader. */
|
|
25
|
+
size?: ListHeaderSize;
|
|
26
|
+
/** Sets the data-testid attribute. */
|
|
27
|
+
testId?: string;
|
|
28
|
+
}
|
|
29
|
+
export declare const mapChildren: (children: React.ReactNode, isJsxChild?: boolean) => {
|
|
30
|
+
avatarChild?: AvatarProps | undefined;
|
|
31
|
+
listHeaderTextChildren: Array<ListHeaderTextProps>;
|
|
32
|
+
badgeChild?: BadgeProps | undefined;
|
|
33
|
+
stringChildren: Array<string>;
|
|
34
|
+
remainingChildren: Array<any>;
|
|
35
|
+
};
|
|
36
|
+
export declare const ListHeader: ListHeaderType;
|
|
37
|
+
export default ListHeader;
|
|
38
|
+
//# sourceMappingURL=ListHeader.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ListHeader.d.ts","sourceRoot":"","sources":["../../../src/components/ListHeader/ListHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAe,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAC5D,OAAc,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACxD,OAAuB,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAI1G,OAAa,EAAY,OAAO,EAAE,MAAM,UAAU,CAAC;AAGnD,oBAAY,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE1D,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,yBAAyB,CAAC,eAAe,GAAG,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3H,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,cAAc,CAAC,EAAE,kBAAkB,CAAC;CACrC;AAED,eAAO,MAAM,gBAAgB,YAClB,MAAM,SAAS,eACX,OAAO,aACT,OAAO,QACZ,cAAc,SACb,MAAM,YAAY,oDAc1B,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mDAAmD;IACnD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,+CAA+C;IAC/C,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,2CAA2C;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sCAAsC;IACtC,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,WAAW,aACZ,MAAM,SAAS;;4BAID,MAAM,mBAAmB,CAAC;;oBAElC,MAAM,MAAM,CAAC;uBACV,MAAM,GAAG,CAAC;CA8B9B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,cAqEvB,CAAC;AAEH,eAAe,UAAU,CAAC"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { StatusDotVariant } from '../../StatusDot';
|
|
3
|
+
export declare type ListHeaderTextType = React.ForwardRefExoticComponent<ListHeaderTextProps & React.RefAttributes<HTMLLIElement>>;
|
|
4
|
+
export interface ListHeaderTextProps {
|
|
5
|
+
/** The first text in the ListHeaderText Component */
|
|
6
|
+
firstText: string;
|
|
7
|
+
/** Will style the first text as bold */
|
|
8
|
+
firstTextEmphasised?: boolean;
|
|
9
|
+
/** The second text in the ListHeaderText Component */
|
|
10
|
+
secondText?: string;
|
|
11
|
+
/** Will style the second text as bold */
|
|
12
|
+
secondTextEmphasised?: boolean;
|
|
13
|
+
/** Whether or not this ListHeaderText is a sub text */
|
|
14
|
+
subText?: boolean;
|
|
15
|
+
/** Decides the variant for the StatusDot */
|
|
16
|
+
statusDotVariant?: StatusDotVariant;
|
|
17
|
+
/** Adds custom classes to the ListHeaderText component. */
|
|
18
|
+
className?: string;
|
|
19
|
+
/** Sets the data-testid attribute. */
|
|
20
|
+
testId?: string;
|
|
21
|
+
}
|
|
22
|
+
export declare const ListHeaderText: ListHeaderTextType;
|
|
23
|
+
export default ListHeaderText;
|
|
24
|
+
//# sourceMappingURL=ListHeaderText.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ListHeaderText.d.ts","sourceRoot":"","sources":["../../../../src/components/ListHeader/ListHeaderText/ListHeaderText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAkB,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAI9D,oBAAY,kBAAkB,GAAG,KAAK,CAAC,yBAAyB,CAAC,mBAAmB,GAAG,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC;AAE3H,MAAM,WAAW,mBAAmB;IAClC,qDAAqD;IACrD,SAAS,EAAE,MAAM,CAAC;IAClB,wCAAwC;IACxC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,sDAAsD;IACtD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yCAAyC;IACzC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,uDAAuD;IACvD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,cAAc,EAAE,kBAmC3B,CAAC;AAEH,eAAe,cAAc,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"props":{"firstText":{"defaultValue":null,"description":"The first text in the ListHeaderText Component","name":"firstText","parent":{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"}],"required":true,"type":{"name":"string"}},"firstTextEmphasised":{"defaultValue":null,"description":"Will style the first text as bold","name":"firstTextEmphasised","parent":{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"}],"required":false,"type":{"name":"boolean"}},"secondText":{"defaultValue":null,"description":"The second text in the ListHeaderText Component","name":"secondText","parent":{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"}],"required":false,"type":{"name":"string"}},"secondTextEmphasised":{"defaultValue":null,"description":"Will style the second text as bold","name":"secondTextEmphasised","parent":{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"}],"required":false,"type":{"name":"boolean"}},"subText":{"defaultValue":null,"description":"Whether or not this ListHeaderText is a sub text","name":"subText","parent":{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"}],"required":false,"type":{"name":"boolean"}},"statusDotVariant":{"defaultValue":null,"description":"Decides the variant for the StatusDot","name":"statusDotVariant","parent":{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"}],"required":false,"type":{"name":"enum","raw":"StatusDotVariant","value":[{"value":"\"info\"","description":"","fullComment":"","tags":{}},{"value":"\"warning\"","description":"","fullComment":"","tags":{}},{"value":"\"alert\"","description":"","fullComment":"","tags":{}},{"value":"\"cancelled\"","description":"","fullComment":"","tags":{}},{"value":"\"active\"","description":"","fullComment":"","tags":{}},{"value":"\"transparent\"","description":"","fullComment":"","tags":{}},{"value":"\"recurring\"","description":"","fullComment":"","tags":{}},{"value":"\"group\"","description":"","fullComment":"","tags":{}},{"value":"\"noaccess\"","description":"","fullComment":"","tags":{}}]}},"className":{"defaultValue":null,"description":"Adds custom classes to the ListHeaderText component.","name":"className","parent":{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"}],"required":false,"type":{"name":"string"}}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ListHeader/ListHeaderText/index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,cAAc,kBAAkB,CAAC;AACjC,eAAe,cAAc,CAAC"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import"../../../ListHeaderText.js";import{L as n,L as q}from"../../../ListHeaderText.js";import"react";import"classnames";import"../../../StatusDot.js";import"../../StatusDot/styles.module.scss";import"../../../constants.js";import"../../Icons/Icon.js";import"../../../hooks/useUuid.js";import"../../../uuid.js";import"../../../utils/environment.js";import"../../Icons/Undo.js";import"../../../theme/currys/color.js";import"../../../theme/index.js";import"../../../theme/palette.js";import"../../../theme/spacers.js";import"../../../theme/grid.js";import"../../Icons/Group.js";import"../../Icons/NoAccess.js";import"../../../hooks/useBreakpoint.js";import"../styles.module.scss";export{n as ListHeaderText,q as default};
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"props":{"className":{"defaultValue":null,"description":"Adds custom classes to the ListHeader element.","name":"className","parent":{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"}],"required":false,"type":{"name":"string"}},"chevronIcon":{"defaultValue":null,"description":"Chevron to render inside of the ListHeader","name":"chevronIcon","parent":{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"}],"required":false,"type":{"name":"SvgIcon"}},"children":{"defaultValue":null,"description":"Children to be rendered inside of ListHeader","name":"children","parent":{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"}],"required":true,"type":{"name":"ReactNode"}},"icon":{"defaultValue":null,"description":"icon to be rendered inside of ListHeader","name":"icon","parent":{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"}],"required":false,"type":{"name":"ReactElement<any, string | JSXElementConstructor<any>>"}},"isHovered":{"defaultValue":null,"description":"whether or not the parent is hovered","name":"isHovered","parent":{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"}],"required":false,"type":{"name":"boolean"}},"size":{"defaultValue":null,"description":"Changes size of the ListHeader.","name":"size","parent":{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"}],"required":false,"type":{"name":"enum","raw":"ListHeaderSize","value":[{"value":"\"small\""},{"value":"\"medium\""},{"value":"\"large\""}]}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"}],"required":false,"type":{"name":"string"}}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ListHeader/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,cAAc,cAAc,CAAC;AAC7B,eAAe,UAAU,CAAC"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import"../../ListHeader.js";import{L as z,L as A,m as B,r as D}from"../../ListHeader.js";import{L as F}from"../../ListHeaderText.js";import"react";import"classnames";import"../../Avatar.js";import"../Icons/Icon.js";import"../../constants.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/Check.js";import"../Avatar/styles.module.scss";import"../../theme/palette.js";import"../../Badge.js";import"../Badge/styles.module.scss";import"./styles.module.scss";import"../../hooks/useBreakpoint.js";import"../../theme/grid.js";import"../../utils/component.js";import"../../StatusDot.js";import"../StatusDot/styles.module.scss";import"../Icons/Undo.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/spacers.js";import"../Icons/Group.js";import"../Icons/NoAccess.js";export{z as ListHeader,F as ListHeaderText,A as default,B as mapChildren,D as renderListHeader};
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
@import '../../scss/_spacers.scss';
|
|
2
|
+
@import '../../scss/_breakpoints.scss';
|
|
3
|
+
@import '../../scss/_font-settings.scss';
|
|
4
|
+
@import '../../scss/_palette.scss';
|
|
5
|
+
|
|
6
|
+
.list-header {
|
|
7
|
+
display: flex;
|
|
8
|
+
width: 100%;
|
|
9
|
+
padding-right: getSpacer(2xs);
|
|
10
|
+
padding-left: getSpacer(2xs);
|
|
11
|
+
text-align: left;
|
|
12
|
+
align-items: center;
|
|
13
|
+
|
|
14
|
+
&--for-element-content {
|
|
15
|
+
align-content: flex-start;
|
|
16
|
+
padding-top: getSpacer(s);
|
|
17
|
+
padding-bottom: getSpacer(s);
|
|
18
|
+
}
|
|
19
|
+
&--top-align-content {
|
|
20
|
+
align-items: flex-start;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
&__content {
|
|
24
|
+
border-bottom: 1px solid transparent;
|
|
25
|
+
display: flex;
|
|
26
|
+
align-items: center;
|
|
27
|
+
width: 100%;
|
|
28
|
+
|
|
29
|
+
&--string {
|
|
30
|
+
margin: getSpacer(xs) 0;
|
|
31
|
+
@media (min-width: map-get($grid-breakpoints, md)) {
|
|
32
|
+
margin: getSpacer(s) 0;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
&--element {
|
|
36
|
+
display: flex;
|
|
37
|
+
align-items: flex-start;
|
|
38
|
+
flex-direction: column;
|
|
39
|
+
}
|
|
40
|
+
&--spacing {
|
|
41
|
+
margin-left: getSpacer(s);
|
|
42
|
+
}
|
|
43
|
+
:focus > & {
|
|
44
|
+
border-color: $black;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
&__icon,
|
|
49
|
+
&__avatar {
|
|
50
|
+
display: flex;
|
|
51
|
+
align-items: center;
|
|
52
|
+
|
|
53
|
+
&--for-element-content {
|
|
54
|
+
&--medium {
|
|
55
|
+
height: $lineheight-size-sm;
|
|
56
|
+
}
|
|
57
|
+
&--large {
|
|
58
|
+
height: $lineheight-size-md;
|
|
59
|
+
}
|
|
60
|
+
@media (min-width: map-get($grid-breakpoints, md)) {
|
|
61
|
+
&--medium {
|
|
62
|
+
height: $lineheight-size-md;
|
|
63
|
+
}
|
|
64
|
+
&--large {
|
|
65
|
+
height: $lineheight-size-lg;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
&__icon {
|
|
72
|
+
&--for-string-content {
|
|
73
|
+
margin: getSpacer(3xs) getSpacer(2xs) getSpacer(3xs) 0;
|
|
74
|
+
@media (min-width: map-get($grid-breakpoints, md)) {
|
|
75
|
+
margin: getSpacer(2xs) getSpacer(2xs) getSpacer(2xs) 0;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
&--for-element-content {
|
|
79
|
+
margin: 0 getSpacer(2xs) 0 0;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
&__avatar {
|
|
84
|
+
&--for-string-content {
|
|
85
|
+
margin: getSpacer(3xs) getSpacer(s) getSpacer(3xs) 0;
|
|
86
|
+
@media (min-width: map-get($grid-breakpoints, md)) {
|
|
87
|
+
margin: getSpacer(2xs) getSpacer(s) getSpacer(2xs) 0;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
&--for-element-content {
|
|
91
|
+
margin: 0 getSpacer(s) 0 0;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
&__chevron,
|
|
96
|
+
&__badge {
|
|
97
|
+
display: flex;
|
|
98
|
+
align-items: center;
|
|
99
|
+
padding-left: getSpacer(2xs);
|
|
100
|
+
&--for-string-content {
|
|
101
|
+
margin: getSpacer(3xs) 0 getSpacer(3xs) auto;
|
|
102
|
+
@media (min-width: map-get($grid-breakpoints, md)) {
|
|
103
|
+
margin: getSpacer(2xs) 0 getSpacer(2xs) auto;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
&--right {
|
|
107
|
+
margin-left: auto;
|
|
108
|
+
margin-right: getSpacer(2xs);
|
|
109
|
+
}
|
|
110
|
+
//Height needs to be same as line-height
|
|
111
|
+
&--small {
|
|
112
|
+
height: $lineheight-size-xs;
|
|
113
|
+
}
|
|
114
|
+
&--medium {
|
|
115
|
+
height: $lineheight-size-sm;
|
|
116
|
+
}
|
|
117
|
+
&--large {
|
|
118
|
+
height: $lineheight-size-md;
|
|
119
|
+
}
|
|
120
|
+
@media (min-width: map-get($grid-breakpoints, md)) {
|
|
121
|
+
&--small {
|
|
122
|
+
height: $lineheight-size-sm;
|
|
123
|
+
}
|
|
124
|
+
&--medium {
|
|
125
|
+
height: $lineheight-size-md;
|
|
126
|
+
}
|
|
127
|
+
&--large {
|
|
128
|
+
height: $lineheight-size-lg;
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.statusDot {
|
|
135
|
+
padding: 1rem;
|
|
136
|
+
}
|
|
137
|
+
.text-wrapper {
|
|
138
|
+
display: flex;
|
|
139
|
+
align-items: flex-start;
|
|
140
|
+
font-size: 20px;
|
|
141
|
+
font-weight: 400;
|
|
142
|
+
|
|
143
|
+
&--sub-level {
|
|
144
|
+
font-size: 18px;
|
|
145
|
+
}
|
|
146
|
+
&__text--emphasised {
|
|
147
|
+
font-weight: 600;
|
|
148
|
+
}
|
|
149
|
+
}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
export type Styles = {
|
|
2
|
+
'list-header': string;
|
|
3
|
+
'list-header__avatar': string;
|
|
4
|
+
'list-header__avatar--for-element-content': string;
|
|
5
|
+
'list-header__avatar--for-element-content--large': string;
|
|
6
|
+
'list-header__avatar--for-element-content--medium': string;
|
|
7
|
+
'list-header__avatar--for-string-content': string;
|
|
8
|
+
'list-header__badge': string;
|
|
9
|
+
'list-header__badge--for-string-content': string;
|
|
10
|
+
'list-header__badge--large': string;
|
|
11
|
+
'list-header__badge--medium': string;
|
|
12
|
+
'list-header__badge--right': string;
|
|
13
|
+
'list-header__badge--small': string;
|
|
14
|
+
'list-header__chevron': string;
|
|
15
|
+
'list-header__chevron--for-string-content': string;
|
|
16
|
+
'list-header__chevron--large': string;
|
|
17
|
+
'list-header__chevron--medium': string;
|
|
18
|
+
'list-header__chevron--right': string;
|
|
19
|
+
'list-header__chevron--small': string;
|
|
20
|
+
'list-header__content': string;
|
|
21
|
+
'list-header__content--element': string;
|
|
22
|
+
'list-header__content--spacing': string;
|
|
23
|
+
'list-header__content--string': string;
|
|
24
|
+
'list-header__icon': string;
|
|
25
|
+
'list-header__icon--for-element-content': string;
|
|
26
|
+
'list-header__icon--for-element-content--large': string;
|
|
27
|
+
'list-header__icon--for-element-content--medium': string;
|
|
28
|
+
'list-header__icon--for-string-content': string;
|
|
29
|
+
'list-header--for-element-content': string;
|
|
30
|
+
'list-header--top-align-content': string;
|
|
31
|
+
statusDot: string;
|
|
32
|
+
'text-wrapper': string;
|
|
33
|
+
'text-wrapper__text--emphasised': string;
|
|
34
|
+
'text-wrapper--sub-level': string;
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
export type ClassNames = keyof Styles;
|
|
38
|
+
|
|
39
|
+
declare const styles: Styles;
|
|
40
|
+
|
|
41
|
+
export default styles;
|
|
@@ -10,13 +10,14 @@
|
|
|
10
10
|
width: inherit;
|
|
11
11
|
|
|
12
12
|
&--has-children {
|
|
13
|
-
padding: getSpacer(2xs) getSpacer(s) getSpacer(
|
|
13
|
+
padding: getSpacer(2xs) getSpacer(s) getSpacer(2xs) getSpacer(2xs);
|
|
14
14
|
#{$panel}__icon {
|
|
15
15
|
margin-top: getSpacer(2xs);
|
|
16
16
|
margin-right: getSpacer(2xs);
|
|
17
17
|
}
|
|
18
18
|
#{$panel}__content {
|
|
19
19
|
margin-top: getSpacer(s);
|
|
20
|
+
margin-bottom: getSpacer(s);
|
|
20
21
|
}
|
|
21
22
|
@media (min-width: map-get($grid-breakpoints, md)) {
|
|
22
23
|
padding-left: getSpacer(s);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StatusDot.d.ts","sourceRoot":"","sources":["../../../src/components/StatusDot/StatusDot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,oBAAY,gBAAgB;IAC1B,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,SAAS,cAAc;IACvB,MAAM,WAAW;IACjB,WAAW,gBAAgB;IAC3B,SAAS,cAAc;IACvB,KAAK,UAAU;IACf,QAAQ,aAAa;CACtB;AAED,MAAM,WAAW,cAAc;IAC7B,wCAAwC;IACxC,OAAO,CAAC,EAAE,MAAM,OAAO,gBAAgB,CAAC;IACxC,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"StatusDot.d.ts","sourceRoot":"","sources":["../../../src/components/StatusDot/StatusDot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,oBAAY,gBAAgB;IAC1B,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,SAAS,cAAc;IACvB,MAAM,WAAW;IACjB,WAAW,gBAAgB;IAC3B,SAAS,cAAc;IACvB,KAAK,UAAU;IACf,QAAQ,aAAa;CACtB;AAED,MAAM,WAAW,cAAc;IAC7B,wCAAwC;IACxC,OAAO,CAAC,EAAE,MAAM,OAAO,gBAAgB,CAAC;IACxC,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,MAAM,oFA2BV,CAAC;AAEH,eAAe,MAAM,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import"../../StatusDot.js";import{a as h,S as j}from"../../StatusDot.js";import"react";import"classnames";import"./styles.module.scss";import"../../constants.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/Undo.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../Icons/Group.js";import"../Icons/NoAccess.js";import"../../hooks/useBreakpoint.js";export{h as StatusDotVariant,j as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import"../../Validation.js";import{V as
|
|
1
|
+
import"../../Validation.js";import{V as K,V as L}from"../../Validation.js";import"react";import"classnames";import"../../FormGroup.js";import"../FormGroup/styles.module.scss";import"../../Checkbox.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/Check.js";import"../Icons/Icon.js";import"../../constants.js";import"../../hooks/useUuid.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../Checkbox/styles.module.scss";import"../../RadioButton.js";import"../RadioButton/styles.module.scss";import"../../Input.js";import"../../hooks/useBreakpoint.js";import"../../ErrorWrapper.js";import"../ErrorWrapper/styles.module.scss";import"../Input/styles.module.scss";import"../../Title.js";import"../Title/styles.module.scss";import"../../FormLayout.js";import"../FormLayout/styles.module.scss";import"../../Select.js";import"../Select/styles.module.scss";import"../Icons/ChevronDown.js";import"../../utils/component.js";import"./styles.module.scss";export{K as Validation,L as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/package.json
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/utils/component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,WAAW,eACb,EAAE,GAAG,IAAI,GAAG,SAAS,0HAEwF,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"component.js","sources":["../../src/utils/component.ts"],"sourcesContent":["import React from 'react';\n\nexport const isComponent = <T>(\n element: {} | null | undefined,\n type: React.ForwardRefExoticComponent<T>\n): element is React.ReactElement<T> => React.isValidElement<T>(element) && (element as React.ReactElement).type === type;\n"],"names":["isComponent","element","type","React"],"mappings":"qBAEa,MAAAA,EAAc,CACzBC,EACAC,IACqCC,EAAM,eAAkBF,CAAO,GAAMA,EAA+B,OAASC"}
|