trepur_components 1.0.21 → 1.0.22
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/dist/src/lib/components/InformationIcon/InformationIcon.d.ts +5 -6
- package/dist/src/lib/components/InformationIcon/InformationIcon.js +7 -13
- package/dist/src/lib/components/InformationIcon/InformationIcon.js.map +1 -1
- package/dist/src/lib/components/InformationIcon/style.module.css +54 -32
- package/dist/src/lib/components/InformationIcon/style.module.css.map +1 -1
- package/dist/src/lib/components/InformationIconBlock/InformationIconBlock.d.ts +1 -2
- package/dist/src/lib/components/InformationIconBlock/InformationIconBlock.js +9 -10
- package/dist/src/lib/components/InformationIconBlock/InformationIconBlock.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,15 +1,14 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { Props as iconProps } from '../Icon/Icon';
|
|
3
|
+
import { Colours } from '../../utils/controls';
|
|
3
4
|
export interface Props {
|
|
4
5
|
id: string;
|
|
5
6
|
className?: string;
|
|
6
|
-
text
|
|
7
|
+
text: string;
|
|
7
8
|
number: number;
|
|
8
|
-
bordered?: boolean;
|
|
9
|
-
rounded?: boolean;
|
|
10
9
|
withAnimation?: boolean;
|
|
11
|
-
iconProps
|
|
12
|
-
|
|
10
|
+
iconProps: iconProps;
|
|
11
|
+
backgroundColour?: Colours;
|
|
13
12
|
}
|
|
14
|
-
declare const InformationIcon: ({ id, className, text, number,
|
|
13
|
+
declare const InformationIcon: ({ id, className, text, number, withAnimation, iconProps, backgroundColour }: Props) => JSX.Element;
|
|
15
14
|
export default InformationIcon;
|
|
@@ -2,9 +2,9 @@ import React, { useEffect, useRef } from 'react';
|
|
|
2
2
|
import Icon from '../Icon/Icon';
|
|
3
3
|
import classNames from 'classnames';
|
|
4
4
|
import style from './style.module.css';
|
|
5
|
-
const InformationIcon = ({ id, className, text, number,
|
|
6
|
-
const colours = theme === 'dark' ? [style.dark] : [style.light];
|
|
5
|
+
const InformationIcon = ({ id, className, text, number, withAnimation = false, iconProps, backgroundColour = 'white' }) => {
|
|
7
6
|
const loaded = useRef(false);
|
|
7
|
+
const classList = classNames(className, style.classList, style[backgroundColour]);
|
|
8
8
|
useEffect(() => {
|
|
9
9
|
const element = document.getElementById(`${id}_number`);
|
|
10
10
|
const observer = new IntersectionObserver((entries, observer) => {
|
|
@@ -17,10 +17,6 @@ const InformationIcon = ({ id, className, text, number, bordered = false, rounde
|
|
|
17
17
|
}, { threshold: 1 });
|
|
18
18
|
(element != null) && withAnimation && observer.observe(element);
|
|
19
19
|
}, []);
|
|
20
|
-
const classList = classNames({
|
|
21
|
-
border: bordered,
|
|
22
|
-
[style.rounded]: rounded
|
|
23
|
-
}, className, colours, style.classList);
|
|
24
20
|
const counterAnimation = (obj, start, end, duration) => {
|
|
25
21
|
let startTimestamp;
|
|
26
22
|
const step = (timestamp) => {
|
|
@@ -33,13 +29,11 @@ const InformationIcon = ({ id, className, text, number, bordered = false, rounde
|
|
|
33
29
|
};
|
|
34
30
|
window.requestAnimationFrame(step);
|
|
35
31
|
};
|
|
36
|
-
return (React.createElement("div", { id: id, className:
|
|
37
|
-
React.createElement("div", { className:
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
number !== undefined &&
|
|
41
|
-
React.createElement("p", null, number),
|
|
42
|
-
React.createElement("p", { className: style.text }, text))));
|
|
32
|
+
return (React.createElement("div", { id: id, className: classList },
|
|
33
|
+
React.createElement("div", { className: style.iconClassList }, (iconProps !== undefined) && React.createElement(Icon, Object.assign({}, iconProps))),
|
|
34
|
+
React.createElement("div", { className: style.textClassList },
|
|
35
|
+
number !== undefined && React.createElement("p", { className: style.number }, number),
|
|
36
|
+
number !== undefined && React.createElement("p", { className: style.text }, text))));
|
|
43
37
|
};
|
|
44
38
|
export default InformationIcon;
|
|
45
39
|
//# sourceMappingURL=InformationIcon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InformationIcon.js","sourceRoot":"","sources":["../../../../../src/lib/components/InformationIcon/InformationIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAChD,OAAO,IAA4B,MAAM,uBAAuB,CAAA;AAChE,OAAO,UAAU,MAAM,YAAY,CAAA;AACnC,OAAO,KAAK,MAAM,oBAAoB,CAAA;
|
|
1
|
+
{"version":3,"file":"InformationIcon.js","sourceRoot":"","sources":["../../../../../src/lib/components/InformationIcon/InformationIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAChD,OAAO,IAA4B,MAAM,uBAAuB,CAAA;AAChE,OAAO,UAAU,MAAM,YAAY,CAAA;AACnC,OAAO,KAAK,MAAM,oBAAoB,CAAA;AAatC,MAAM,eAAe,GAAG,CAAC,EACvB,EAAE,EACF,SAAS,EACT,IAAI,EACJ,MAAM,EACN,aAAa,GAAG,KAAK,EACrB,SAAS,EACT,gBAAgB,GAAG,OAAO,EACpB,EAAe,EAAE;IACvB,MAAM,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IAC5B,MAAM,SAAS,GAAG,UAAU,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAA;IAEjF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,QAAQ,CAAC,cAAc,CAAC,GAAG,EAAE,SAAS,CAAC,CAAA;QACvD,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CAAC,CAAC,OAAO,EAAE,QAAQ,EAAE,EAAE;YAC9D,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;gBACtB,IAAI,KAAK,CAAC,iBAAiB,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;oBACrD,MAAM,CAAC,OAAO,GAAG,IAAI,CAAA;oBACrB,gBAAgB,CACd,QAAQ,CAAC,cAAc,CAAC,GAAG,EAAE,SAAS,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,CAAA;iBAC5D;YACH,CAAC,CAAC,CAAA;QACJ,CAAC,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC,CAAC;QACrB,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,aAAa,IAAI,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAA;IACjE,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,gBAAgB,GAAG,CAAC,GAAQ,EAAE,KAAa,EAAE,GAAW,EAAE,QAAgB,EAAQ,EAAE;QACxF,IAAI,cAAsB,CAAA;QAC1B,MAAM,IAAI,GAAG,CAAC,SAAiB,EAAQ,EAAE;YACvC,cAAc,GAAG,SAAS,CAAA;YAC1B,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,SAAS,GAAG,cAAc,CAAC,GAAG,QAAQ,EAAE,CAAC,CAAC,CAAA;YACrE,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG,KAAK,CAAC,CAAA;YAC5D,IAAI,QAAQ,GAAG,CAAC,EAAE;gBAChB,MAAM,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAA;aACnC;QACH,CAAC,CAAA;QACD,MAAM,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAA;IACpC,CAAC,CAAA;IAED,OAAO,CACL,6BAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS;QAC/B,6BAAK,SAAS,EAAE,KAAK,CAAC,aAAa,IAC/B,CAAC,SAAS,KAAK,SAAS,CAAC,IAAI,oBAAC,IAAI,oBAAK,SAAS,EAAG,CACjD;QACN,6BAAK,SAAS,EAAE,KAAK,CAAC,aAAa;YAC/B,MAAM,KAAK,SAAS,IAAI,2BAAG,SAAS,EAAE,KAAK,CAAC,MAAM,IAAG,MAAM,CAAK;YAChE,MAAM,KAAK,SAAS,IAAI,2BAAG,SAAS,EAAE,KAAK,CAAC,IAAI,IAAG,IAAI,CAAK,CAC1D,CACF,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,eAAe,CAAA"}
|
|
@@ -1,54 +1,57 @@
|
|
|
1
|
-
.
|
|
2
|
-
|
|
3
|
-
display: flex;
|
|
4
|
-
|
|
5
|
-
height: 24rem;
|
|
6
|
-
|
|
7
|
-
align-items: center;
|
|
1
|
+
.classList {
|
|
8
2
|
|
|
9
|
-
|
|
3
|
+
display: flex
|
|
10
4
|
}
|
|
11
5
|
|
|
12
|
-
.
|
|
6
|
+
.iconClassList {
|
|
13
7
|
|
|
14
8
|
display: flex;
|
|
15
9
|
|
|
16
10
|
height: 100%;
|
|
17
11
|
|
|
18
|
-
|
|
12
|
+
align-items: center;
|
|
13
|
+
|
|
14
|
+
margin-top: auto;
|
|
19
15
|
|
|
20
|
-
|
|
16
|
+
margin-bottom: auto;
|
|
21
17
|
|
|
22
|
-
|
|
18
|
+
padding-top: 2rem;
|
|
23
19
|
|
|
24
|
-
|
|
20
|
+
padding-bottom: 2rem;
|
|
25
21
|
|
|
26
|
-
|
|
22
|
+
padding-left: 1rem
|
|
27
23
|
}
|
|
28
24
|
|
|
29
|
-
@media (min-width:
|
|
25
|
+
@media (min-width: 768px) {
|
|
30
26
|
|
|
31
|
-
.
|
|
27
|
+
.iconClassList {
|
|
32
28
|
|
|
33
|
-
|
|
29
|
+
padding-left: 2rem
|
|
34
30
|
}
|
|
35
31
|
}
|
|
36
32
|
|
|
37
|
-
.
|
|
33
|
+
.textClassList {
|
|
38
34
|
|
|
39
|
-
|
|
35
|
+
padding-left: 1rem;
|
|
40
36
|
|
|
41
|
-
|
|
37
|
+
padding-right: 1rem;
|
|
42
38
|
|
|
43
|
-
|
|
39
|
+
padding-top: 2rem;
|
|
40
|
+
|
|
41
|
+
padding-bottom: 2rem
|
|
44
42
|
}
|
|
45
43
|
|
|
46
|
-
|
|
44
|
+
@media (min-width: 768px) {
|
|
45
|
+
|
|
46
|
+
.textClassList {
|
|
47
47
|
|
|
48
|
-
|
|
48
|
+
padding-left: 2rem;
|
|
49
|
+
|
|
50
|
+
padding-right: 2rem
|
|
51
|
+
}
|
|
49
52
|
}
|
|
50
53
|
|
|
51
|
-
.
|
|
54
|
+
.primary {
|
|
52
55
|
|
|
53
56
|
--tw-bg-opacity: 1;
|
|
54
57
|
|
|
@@ -59,14 +62,18 @@
|
|
|
59
62
|
color: rgb(255 255 255 / var(--tw-text-opacity))
|
|
60
63
|
}
|
|
61
64
|
|
|
62
|
-
.
|
|
65
|
+
.secondary {
|
|
66
|
+
|
|
67
|
+
--tw-bg-opacity: 1;
|
|
68
|
+
|
|
69
|
+
background-color: rgb(255 168 0 / var(--tw-bg-opacity));
|
|
63
70
|
|
|
64
|
-
--tw-
|
|
71
|
+
--tw-text-opacity: 1;
|
|
65
72
|
|
|
66
|
-
color: rgb(255 255 255 / var(--tw-
|
|
73
|
+
color: rgb(255 255 255 / var(--tw-text-opacity))
|
|
67
74
|
}
|
|
68
75
|
|
|
69
|
-
.
|
|
76
|
+
.white {
|
|
70
77
|
|
|
71
78
|
--tw-bg-opacity: 1;
|
|
72
79
|
|
|
@@ -74,13 +81,28 @@
|
|
|
74
81
|
|
|
75
82
|
--tw-text-opacity: 1;
|
|
76
83
|
|
|
77
|
-
color: rgb(0
|
|
84
|
+
color: rgb(0 0 0 / var(--tw-text-opacity))
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.grey {
|
|
88
|
+
|
|
89
|
+
--tw-bg-opacity: 1;
|
|
90
|
+
|
|
91
|
+
background-color: rgb(245 245 245 / var(--tw-bg-opacity));
|
|
92
|
+
|
|
93
|
+
--tw-text-opacity: 1;
|
|
94
|
+
|
|
95
|
+
color: rgb(0 0 0 / var(--tw-text-opacity))
|
|
78
96
|
}
|
|
79
97
|
|
|
80
|
-
.
|
|
98
|
+
.black {
|
|
99
|
+
|
|
100
|
+
--tw-bg-opacity: 1;
|
|
101
|
+
|
|
102
|
+
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
|
|
81
103
|
|
|
82
|
-
--tw-
|
|
104
|
+
--tw-text-opacity: 1;
|
|
83
105
|
|
|
84
|
-
color: rgb(
|
|
106
|
+
color: rgb(255 255 255 / var(--tw-text-opacity))
|
|
85
107
|
}
|
|
86
108
|
/*# sourceMappingURL=style.module.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/lib/components/InformationIcon/style.module.css"],"names":[],"mappings":"AACI;;IAAA
|
|
1
|
+
{"version":3,"sources":["../../../../../src/lib/components/InformationIcon/style.module.css"],"names":[],"mappings":"AACI;;IAAA;AAAW;;AAIX;;IAAA,aAA+B;;IAA/B,YAA+B;;IAA/B,mBAA+B;;IAC/B,gBAAgC;;IAAhC,mBAAgC;;IAAhC,iBAAgC;;IAAhC,oBAAgC;;IAAhC;AAD+B;;AAC/B;;IAAA;;QAAA;IAAgC;AAAA;;AAIhC;;IAAA,kBAAwB;;IAAxB,mBAAwB;;IAAxB,iBAAwB;;IAAxB;AAAwB;;AAAxB;;IAAA;;QAAA,kBAAwB;;QAAxB;IAAwB;AAAA;;AAIxB;;IAAA,kBAA4B;;IAA5B,sDAA4B;;IAA5B,oBAA4B;;IAA5B;AAA4B;;AAI5B;;IAAA,kBAA8B;;IAA9B,uDAA8B;;IAA9B,oBAA8B;;IAA9B;AAA8B;;AAI9B;;IAAA,kBAA0B;;IAA1B,yDAA0B;;IAA1B,oBAA0B;;IAA1B;AAA0B;;AAI1B;;IAAA,kBAAkC;;IAAlC,yDAAkC;;IAAlC,oBAAkC;;IAAlC;AAAkC;;AAIlC;;IAAA,kBAA0B;;IAA1B,mDAA0B;;IAA1B,oBAA0B;;IAA1B;AAA0B","file":"style.module.css","sourcesContent":[".classList {\n @apply flex;\n}\n\n.iconClassList {\n @apply flex h-full items-center;\n @apply my-auto pl-4 md:pl-8 py-8;\n}\n\n.textClassList {\n @apply px-4 md:px-8 py-8;\n}\n\n.primary {\n @apply bg-primary text-white;\n}\n\n.secondary {\n @apply bg-secondary text-white;\n}\n\n.white {\n @apply bg-white text-black;\n}\n\n.grey {\n @apply bg-lightest-grey text-black;\n}\n\n.black {\n @apply bg-black text-white;\n}"]}
|
|
@@ -8,7 +8,6 @@ export interface Props {
|
|
|
8
8
|
description?: string;
|
|
9
9
|
bgColour?: Colours;
|
|
10
10
|
icons?: iconProps[];
|
|
11
|
-
theme?: 'light' | 'dark';
|
|
12
11
|
}
|
|
13
|
-
declare const InformationIconBlock: ({ id, className, title, description, bgColour, icons,
|
|
12
|
+
declare const InformationIconBlock: ({ id, className, title, description, bgColour, icons, }: Props) => JSX.Element;
|
|
14
13
|
export default InformationIconBlock;
|
|
@@ -1,21 +1,20 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import classNames from 'classnames';
|
|
3
2
|
import style from './style.module.css';
|
|
4
3
|
import Container from '../Container/Container';
|
|
5
4
|
import ComponentWrapper from '../ComponentWrapper/ComponentWrapper';
|
|
6
5
|
import { InformationIcon } from '../../../../src/lib';
|
|
7
|
-
const InformationIconBlock = ({ id, className, title, description, bgColour, icons,
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
React.createElement(Container, { withPadding: true },
|
|
6
|
+
const InformationIconBlock = ({ id, className, title, description, bgColour, icons, }) => {
|
|
7
|
+
return (React.createElement(ComponentWrapper, { id: id, className: className, title: title, description: description, bgColour: bgColour },
|
|
8
|
+
React.createElement(Container, { withPadding: false },
|
|
11
9
|
React.createElement("div", { className: style.iconWrapper }, icons === null || icons === void 0 ? void 0 : icons.map((icon, i) => {
|
|
12
10
|
return (React.createElement(InformationIcon, { key: i, iconProps: {
|
|
13
|
-
|
|
14
|
-
size: 1,
|
|
11
|
+
size: 2,
|
|
15
12
|
type: icon.type,
|
|
16
|
-
colour: '
|
|
17
|
-
bgColour: '
|
|
18
|
-
|
|
13
|
+
colour: 'primary',
|
|
14
|
+
bgColour: 'white',
|
|
15
|
+
hoverColour: 'primary',
|
|
16
|
+
hoverBgColour: 'white'
|
|
17
|
+
}, id: icon.name.replace(/\s+/g, ''), text: icon.name, number: icon.value, withAnimation: true }));
|
|
19
18
|
})))));
|
|
20
19
|
};
|
|
21
20
|
export default InformationIconBlock;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InformationIconBlock.js","sourceRoot":"","sources":["../../../../../src/lib/components/InformationIconBlock/InformationIconBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"InformationIconBlock.js","sourceRoot":"","sources":["../../../../../src/lib/components/InformationIconBlock/InformationIconBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,MAAM,oBAAoB,CAAA;AACtC,OAAO,SAAS,MAAM,iCAAiC,CAAA;AACvD,OAAO,gBAAgB,MAAM,+CAA+C,CAAA;AAE5E,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAYzC,MAAM,oBAAoB,GAAG,CAAC,EAC5B,EAAE,EACF,SAAS,EACT,KAAK,EACL,WAAW,EACX,QAAQ,EACR,KAAK,GACC,EAAe,EAAE;IACvB,OAAO,CACL,oBAAC,gBAAgB,IACf,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ;QAElB,oBAAC,SAAS,IAAC,WAAW,EAAE,KAAK;YAC3B,6BAAK,SAAS,EAAE,KAAK,CAAC,WAAW,IAC9B,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,GAAG,CAAC,CAAC,IAAS,EAAE,CAAS,EAAE,EAAE;gBACnC,OAAO,CACL,oBAAC,eAAe,IACd,GAAG,EAAE,CAAC,EACN,SAAS,EAAE;wBACT,IAAI,EAAE,CAAC;wBACP,IAAI,EAAE,IAAI,CAAC,IAAI;wBACf,MAAM,EAAE,SAAS;wBACjB,QAAQ,EAAE,OAAO;wBACjB,WAAW,EAAE,SAAS;wBACtB,aAAa,EAAE,OAAO;qBACvB,EACD,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,EACjC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,KAAK,EAClB,aAAa,SACb,CACH,CAAA;YACH,CAAC,CAAC,CACE,CACI,CACK,CACpB,CAAA;AACH,CAAC,CAAA;AAED,eAAe,oBAAoB,CAAA"}
|