trepur_components 1.0.59 → 1.0.61
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/AlertBar/AlertBar.d.ts +5 -5
- package/dist/src/lib/components/AlertBar/AlertBar.js +29 -33
- package/dist/src/lib/components/AlertBar/AlertBar.js.map +1 -1
- package/dist/src/lib/components/AlertBar/style.module.css +11 -2
- package/dist/src/lib/components/AlertBar/style.module.css.map +1 -1
- package/dist/src/lib/components/ComponentWrapper/style.module.css +3 -23
- package/dist/src/lib/components/ComponentWrapper/style.module.css.map +1 -1
- package/dist/src/lib/components/Form/Form.d.ts +4 -4
- package/dist/src/lib/components/Form/Form.js +9 -9
- package/dist/src/lib/components/Form/Form.js.map +1 -1
- package/dist/src/lib/components/Icon/Icon.d.ts +3 -3
- package/dist/src/lib/components/Icon/Icon.js +27 -15
- package/dist/src/lib/components/Icon/Icon.js.map +1 -1
- package/dist/src/lib/components/ImageInfo/ImageInfo.d.ts +2 -2
- package/dist/src/lib/components/ImageInfo/ImageInfo.js +11 -11
- package/dist/src/lib/components/ImageInfo/ImageInfo.js.map +1 -1
- package/dist/src/lib/components/InformationIcon/InformationIcon.d.ts +3 -3
- package/dist/src/lib/components/InformationIcon/InformationIcon.js +18 -15
- package/dist/src/lib/components/InformationIcon/InformationIcon.js.map +1 -1
- package/dist/src/lib/components/InformationIcon/style.module.css +46 -87
- package/dist/src/lib/components/InformationIcon/style.module.css.map +1 -1
- package/dist/src/lib/components/InformationIconBlock/InformationIconBlock.d.ts +3 -3
- package/dist/src/lib/components/InformationIconBlock/InformationIconBlock.js +17 -18
- package/dist/src/lib/components/InformationIconBlock/InformationIconBlock.js.map +1 -1
- package/dist/src/lib/components/InformationIconBlock/style.module.css +1 -9
- package/dist/src/lib/components/InformationIconBlock/style.module.css.map +1 -1
- package/dist/src/lib/components/Input/Input.d.ts +2 -3
- package/dist/src/lib/components/Input/Input.js +11 -16
- package/dist/src/lib/components/Input/Input.js.map +1 -1
- package/dist/src/lib/components/Input/style.module.css +0 -4
- package/dist/src/lib/components/Input/style.module.css.map +1 -1
- package/dist/src/lib/components/Nav/Nav.js +4 -1
- package/dist/src/lib/components/Nav/Nav.js.map +1 -1
- package/dist/src/lib/components/Nav/style.module.css +1 -1
- package/dist/src/lib/components/Nav/style.module.css.map +1 -1
- package/dist/src/lib/components/NavItem/NavItem.d.ts +4 -4
- package/dist/src/lib/components/NavItem/NavItem.js +6 -6
- package/dist/src/lib/components/NavItem/NavItem.js.map +1 -1
- package/dist/src/lib/components/NavItem/style.module.css +11 -0
- package/dist/src/lib/components/NavItem/style.module.css.map +1 -1
- package/dist/src/lib/components/SocialBlock/SocialBlock.d.ts +3 -8
- package/dist/src/lib/components/SocialBlock/SocialBlock.js +14 -53
- package/dist/src/lib/components/SocialBlock/SocialBlock.js.map +1 -1
- package/dist/src/lib/components/SocialBlock/style.module.css +36 -41
- package/dist/src/lib/components/SocialBlock/style.module.css.map +1 -1
- package/dist/src/lib/components/SocialButton/SocialButton.d.ts +3 -3
- package/dist/src/lib/components/SocialButton/SocialButton.js +12 -13
- package/dist/src/lib/components/SocialButton/SocialButton.js.map +1 -1
- package/dist/src/lib/components/SocialButton/style.module.css +5 -10
- package/dist/src/lib/components/SocialButton/style.module.css.map +1 -1
- package/dist/src/lib/components/TextAndTitle/TextAndTitle.d.ts +3 -3
- package/dist/src/lib/components/TextAndTitle/TextAndTitle.js +32 -52
- package/dist/src/lib/components/TextAndTitle/TextAndTitle.js.map +1 -1
- package/dist/src/lib/components/TextArea/TextArea.d.ts +15 -12
- package/dist/src/lib/components/TextArea/TextArea.js +21 -16
- package/dist/src/lib/components/TextArea/TextArea.js.map +1 -1
- package/dist/src/lib/components/TextArea/style.module.css +89 -20
- package/dist/src/lib/components/TextArea/style.module.css.map +1 -1
- package/package.json +1 -1
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { Props as iconProps } from
|
|
3
|
-
import { ThemeTypes } from
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Props as iconProps } from "../Icon/Icon";
|
|
3
|
+
import { ThemeTypes } from "../../utils/controls";
|
|
4
4
|
export interface Props {
|
|
5
5
|
id?: string;
|
|
6
6
|
className?: string;
|
|
7
|
-
type?:
|
|
7
|
+
type?: "success" | "warning" | "error" | "info";
|
|
8
8
|
text?: string;
|
|
9
9
|
leftIconProps?: iconProps;
|
|
10
10
|
rightIconProps?: iconProps;
|
|
@@ -13,5 +13,5 @@ export interface Props {
|
|
|
13
13
|
onDismissClick?: React.MouseEventHandler;
|
|
14
14
|
theme?: ThemeTypes;
|
|
15
15
|
}
|
|
16
|
-
declare const AlertBar: ({ id, className, type, text, leftIconProps, rightIconProps, textCenter, isDismissable, onDismissClick, theme }: Props) => JSX.Element;
|
|
16
|
+
declare const AlertBar: ({ id, className, type, text, leftIconProps, rightIconProps, textCenter, isDismissable, onDismissClick, theme, }: Props) => JSX.Element;
|
|
17
17
|
export default AlertBar;
|
|
@@ -1,58 +1,54 @@
|
|
|
1
|
-
import React, { useState } from
|
|
2
|
-
import Icon from
|
|
3
|
-
import classNames from
|
|
4
|
-
import style from
|
|
5
|
-
const AlertBar = ({ id, className, type =
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
import Icon from "../Icon/Icon";
|
|
3
|
+
import classNames from "classnames";
|
|
4
|
+
import style from "./style.module.css";
|
|
5
|
+
const AlertBar = ({ id, className, type = "warning", text, leftIconProps, rightIconProps, textCenter = false, isDismissable = false, onDismissClick, theme = "theme-rupertbennett", }) => {
|
|
6
6
|
const [alertBarStatus, setAlertBarStatus] = useState({
|
|
7
|
-
state:
|
|
8
|
-
display: true
|
|
7
|
+
state: "open",
|
|
8
|
+
display: true,
|
|
9
9
|
});
|
|
10
|
+
const iconLeft = leftIconProps != null && React.createElement(Icon, Object.assign({}, leftIconProps));
|
|
11
|
+
const iconRight = rightIconProps != null && React.createElement(Icon, Object.assign({}, rightIconProps));
|
|
10
12
|
const bgColor = classNames({
|
|
11
|
-
[style.success]: type ===
|
|
12
|
-
[style.warning]: type ===
|
|
13
|
-
[style.error]: type ===
|
|
14
|
-
[style.info]: type ===
|
|
13
|
+
[style.success]: type === "success",
|
|
14
|
+
[style.warning]: type === "warning",
|
|
15
|
+
[style.error]: type === "error",
|
|
16
|
+
[style.info]: type === "info",
|
|
15
17
|
});
|
|
16
18
|
const alertBarState = classNames({
|
|
17
|
-
[style.visible]: alertBarStatus.state ===
|
|
18
|
-
[style.invisible]: alertBarStatus.state ===
|
|
19
|
-
hidden: !alertBarStatus.display
|
|
19
|
+
[style.visible]: alertBarStatus.state === "open",
|
|
20
|
+
[style.invisible]: alertBarStatus.state === "closed",
|
|
21
|
+
hidden: !alertBarStatus.display,
|
|
20
22
|
});
|
|
21
|
-
const classList = classNames(className, bgColor, alertBarState, [style.alertBar], theme,
|
|
23
|
+
const classList = classNames(className, bgColor, alertBarState, [style.alertBar], theme, "w-parent transition-opactiy");
|
|
22
24
|
const textClassList = classNames({
|
|
23
25
|
[style.textCenter]: textCenter,
|
|
24
|
-
[style.
|
|
26
|
+
[style.textLeftWithIcon]: !textCenter && leftIconProps !== null,
|
|
27
|
+
[style.textLeft]: !textCenter && leftIconProps === null,
|
|
25
28
|
}, [style.textClassList]);
|
|
26
29
|
const rightIconClasses = classNames({
|
|
27
|
-
[style.dismissable]: isDismissable
|
|
30
|
+
[style.dismissable]: isDismissable,
|
|
28
31
|
}, [style.rightIconClassList]);
|
|
29
32
|
const closeAlertBar = (e) => {
|
|
30
33
|
setAlertBarStatus({
|
|
31
|
-
state:
|
|
32
|
-
display: alertBarStatus.display
|
|
34
|
+
state: "closed",
|
|
35
|
+
display: alertBarStatus.display,
|
|
33
36
|
});
|
|
34
37
|
setTimeout(() => setAlertBarStatus({
|
|
35
|
-
state:
|
|
36
|
-
display: false
|
|
38
|
+
state: "closed",
|
|
39
|
+
display: false,
|
|
37
40
|
}), 700);
|
|
38
41
|
if (onDismissClick != null) {
|
|
39
42
|
onDismissClick(e);
|
|
40
43
|
}
|
|
41
44
|
};
|
|
42
|
-
const dismissIcon =
|
|
43
|
-
const iconLeft = (leftIconProps != null) &&
|
|
44
|
-
React.createElement(Icon, Object.assign({}, leftIconProps));
|
|
45
|
-
const iconRight = (rightIconProps != null) &&
|
|
46
|
-
React.createElement(Icon, Object.assign({}, rightIconProps));
|
|
45
|
+
const dismissIcon = React.createElement(Icon, { type: "multiply", colour: "white" });
|
|
47
46
|
return (React.createElement("div", { id: id, className: classList },
|
|
48
|
-
|
|
49
|
-
React.createElement("span", { className: style.leftIconClassList }, iconLeft),
|
|
47
|
+
leftIconProps != null && (React.createElement("span", { className: style.leftIconClassList }, iconLeft)),
|
|
50
48
|
React.createElement("h3", { className: textClassList }, text),
|
|
51
|
-
isDismissable &&
|
|
52
|
-
React.createElement("
|
|
53
|
-
|
|
54
|
-
(iconRight != null) && !isDismissable &&
|
|
55
|
-
React.createElement("span", { className: rightIconClasses }, iconRight)));
|
|
49
|
+
isDismissable && (React.createElement("a", { className: rightIconClasses, onClick: (e) => closeAlertBar(e) },
|
|
50
|
+
React.createElement("span", null, dismissIcon))),
|
|
51
|
+
iconRight != null && !isDismissable && (React.createElement("span", { className: rightIconClasses }, iconRight))));
|
|
56
52
|
};
|
|
57
53
|
export default AlertBar;
|
|
58
54
|
//# sourceMappingURL=AlertBar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AlertBar.js","sourceRoot":"","sources":["../../../../../src/lib/components/AlertBar/AlertBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"AlertBar.js","sourceRoot":"","sources":["../../../../../src/lib/components/AlertBar/AlertBar.tsx"],"names":[],"mappings":"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"}
|
|
@@ -28,7 +28,9 @@
|
|
|
28
28
|
|
|
29
29
|
.rightIconClassList {
|
|
30
30
|
|
|
31
|
-
|
|
31
|
+
position: absolute;
|
|
32
|
+
|
|
33
|
+
right: 0px;
|
|
32
34
|
|
|
33
35
|
padding-right: 2rem;
|
|
34
36
|
|
|
@@ -37,6 +39,8 @@
|
|
|
37
39
|
|
|
38
40
|
.leftIconClassList {
|
|
39
41
|
|
|
42
|
+
position: absolute;
|
|
43
|
+
|
|
40
44
|
padding-top: 0.75rem;
|
|
41
45
|
|
|
42
46
|
padding-left: 2rem
|
|
@@ -47,11 +51,16 @@
|
|
|
47
51
|
text-align: center
|
|
48
52
|
}
|
|
49
53
|
|
|
50
|
-
.
|
|
54
|
+
.textLeft {
|
|
51
55
|
|
|
52
56
|
padding-left: 1rem
|
|
53
57
|
}
|
|
54
58
|
|
|
59
|
+
.textLeftWithIcon {
|
|
60
|
+
|
|
61
|
+
padding-left: 5rem
|
|
62
|
+
}
|
|
63
|
+
|
|
55
64
|
.textClassList {
|
|
56
65
|
|
|
57
66
|
width: 100%;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/lib/components/AlertBar/style.module.css"],"names":[],"mappings":"AACI;;IAAA,aAAwC;;IAAxC,mBAAwC;;IAAxC,sBAAwC;;IAAxC,yBAAwC;;IAAxC;AAAwC;;AAIxC;;IAAA;AAAkB;;AAIlB;;IAAA;AAAgB;;AAIhB;;IAAA;AAAqB;;AAIrB;;IAAA,
|
|
1
|
+
{"version":3,"sources":["../../../../../src/lib/components/AlertBar/style.module.css"],"names":[],"mappings":"AACI;;IAAA,aAAwC;;IAAxC,mBAAwC;;IAAxC,sBAAwC;;IAAxC,yBAAwC;;IAAxC;AAAwC;;AAIxC;;IAAA;AAAkB;;AAIlB;;IAAA;AAAgB;;AAIhB;;IAAA;AAAqB;;AAIrB;;IAAA,kBAAiC;;IAAjC,UAAiC;;IAAjC,mBAAiC;;IAAjC;AAAiC;;AAIjC;;IAAA,kBAAyB;;IAAzB,oBAAyB;;IAAzB;AAAyB;;AAIzB;;IAAA;AAAkB;;AAIlB;;IAAA;AAAW;;AAIX;;IAAA;AAAY;;AAIZ;;IAAA,WAAkB;;IAAlB,oBAAkB;;IAAlB;AAAkB;;AAIlB;;IAAA;AAAiB;;AAIjB;;IAAA;AAAiB;;AAIjB;;IAAA;AAAoB;;AAIpB;;IAAA;AAAe","file":"style.module.css","sourcesContent":[".alertBar {\n @apply text-white flex py-2 duration-700;\n}\n\n.visible {\n @apply opacity-100;\n}\n\n.invisible {\n @apply opacity-0;\n}\n\n.dismissable:hover {\n @apply cursor-pointer;\n}\n\n.rightIconClassList {\n @apply absolute right-0 pr-8 pt-3;\n}\n\n.leftIconClassList {\n @apply absolute pt-3 pl-8;\n}\n\n.textCenter {\n @apply text-center;\n}\n\n.textLeft {\n @apply pl-4;\n}\n\n.textLeftWithIcon {\n @apply pl-20;\n}\n\n.textClassList {\n @apply w-full py-3;\n}\n\n.success {\n @apply bg-success;\n}\n\n.warning {\n @apply bg-warning;\n}\n\n.info {\n @apply bg-info-light;\n}\n\n.error {\n @apply bg-error;\n}"]}
|
|
@@ -1,74 +1,54 @@
|
|
|
1
1
|
.classList {
|
|
2
|
-
|
|
3
2
|
margin-left: auto;
|
|
4
|
-
|
|
5
3
|
margin-right: auto;
|
|
6
|
-
|
|
7
|
-
|
|
4
|
+
width: 100%;
|
|
5
|
+
scroll-margin-top: 80px
|
|
8
6
|
}
|
|
9
7
|
|
|
10
8
|
.containerPadding {
|
|
11
|
-
|
|
12
9
|
padding-top: 2rem;
|
|
13
|
-
|
|
14
10
|
padding-bottom: 2rem
|
|
15
11
|
}
|
|
16
12
|
|
|
17
13
|
.heading {
|
|
18
|
-
|
|
19
14
|
padding-top: 0px
|
|
20
15
|
}
|
|
21
16
|
|
|
22
17
|
.title {
|
|
23
|
-
|
|
24
18
|
padding-bottom: 0.5rem;
|
|
25
|
-
|
|
26
19
|
font-size: 28px;
|
|
27
|
-
|
|
28
20
|
font-weight: 400
|
|
29
21
|
}
|
|
30
22
|
|
|
31
23
|
.description {
|
|
32
|
-
|
|
33
24
|
padding-bottom: 2rem;
|
|
34
|
-
|
|
35
25
|
font-size: 22px;
|
|
36
|
-
|
|
37
26
|
font-weight: 300
|
|
38
27
|
}
|
|
39
28
|
|
|
40
29
|
.primary {
|
|
41
|
-
|
|
42
30
|
background-color: var(--color-primary);
|
|
43
|
-
|
|
44
31
|
color: var(--color-white)
|
|
45
32
|
}
|
|
46
33
|
|
|
47
34
|
.secondary {
|
|
48
|
-
|
|
49
35
|
background-color: var(--color-secondary);
|
|
50
|
-
|
|
51
36
|
color: var(--color-white)
|
|
52
37
|
}
|
|
53
38
|
|
|
54
39
|
.white {
|
|
55
|
-
|
|
56
40
|
background-color: var(--color-white);
|
|
57
|
-
|
|
58
41
|
color: var(--color-black)
|
|
59
42
|
}
|
|
60
43
|
|
|
61
44
|
.grey {
|
|
62
|
-
|
|
63
45
|
background-color: var(--color-lightest-grey);
|
|
64
|
-
|
|
65
46
|
color: var(--color-black)
|
|
66
47
|
}
|
|
67
48
|
|
|
68
49
|
.black {
|
|
69
|
-
|
|
70
50
|
background-color: var(--color-black);
|
|
71
|
-
|
|
72
51
|
color: var(--color-white)
|
|
73
52
|
}
|
|
53
|
+
|
|
74
54
|
/*# sourceMappingURL=style.module.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/lib/components/ComponentWrapper/style.module.css"],"names":[],"mappings":"AACI
|
|
1
|
+
{"version":3,"sources":["../../../../../src/lib/components/ComponentWrapper/style.module.css"],"names":[],"mappings":"AACI;IAAA,iBAAqB;IAArB,kBAAqB;IAArB,WAAqB;IACrB;AADqB;;AAKvB;IAAA,iBAAW;IAAX;AAAW;;AAIX;IAAA;AAAW;;AAIX;IAAA,sBAAgC;IAAhC,eAAgC;IAAhC;AAAgC;;AAIhC;IAAA,oBAA8B;IAA9B,eAA8B;IAA9B;AAA8B;;AAI9B;IAAA,sCAA4B;IAA5B;AAA4B;;AAI5B;IAAA,wCAA8B;IAA9B;AAA8B;;AAI9B;IAAA,oCAA0B;IAA1B;AAA0B;;AAI1B;IAAA,4CAAkC;IAAlC;AAAkC;;AAIlC;IAAA,oCAA0B;IAA1B;AAA0B","file":"style.module.css","sourcesContent":[".classList {\n @apply mx-auto w-full;\n scroll-margin-top: 80px;\n}\n\n.containerPadding {\n @apply py-8;\n}\n\n.heading {\n @apply pt-0;\n}\n\n.title {\n @apply pb-2 font-regular text-lg;\n}\n\n.description {\n @apply pb-8 font-light text-md;\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}\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { Props as buttonProps } from
|
|
3
|
-
import { Props as inputProps } from
|
|
4
|
-
import { ThemeTypes } from
|
|
2
|
+
import { Props as buttonProps } from "../Button/Button";
|
|
3
|
+
import { Props as inputProps } from "../Input/Input";
|
|
4
|
+
import { ThemeTypes } from "../../utils/controls";
|
|
5
5
|
export interface Props {
|
|
6
6
|
id?: string;
|
|
7
7
|
className?: string;
|
|
@@ -12,5 +12,5 @@ export interface Props {
|
|
|
12
12
|
}>;
|
|
13
13
|
theme?: ThemeTypes;
|
|
14
14
|
}
|
|
15
|
-
declare const Form: ({ id, className, onSubmit, ref, components, theme }: Props) => JSX.Element;
|
|
15
|
+
declare const Form: ({ id, className, onSubmit, ref, components, theme, }: Props) => JSX.Element;
|
|
16
16
|
export default Form;
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import Button from
|
|
3
|
-
import Input from
|
|
4
|
-
import classNames from
|
|
5
|
-
import Container from
|
|
6
|
-
const Form = ({ id, className, onSubmit, ref, components, theme =
|
|
1
|
+
import React from "react";
|
|
2
|
+
import Button from "../Button/Button";
|
|
3
|
+
import Input from "../Input/Input";
|
|
4
|
+
import classNames from "classnames";
|
|
5
|
+
import Container from "../Container/Container";
|
|
6
|
+
const Form = ({ id, className, onSubmit, ref, components, theme = "theme-rupertbennett", }) => {
|
|
7
7
|
return (React.createElement(Container, { withPadding: true },
|
|
8
8
|
React.createElement("form", { id: id, ref: ref, className: classNames(className, theme), onSubmit: onSubmit }, components === null || components === void 0 ? void 0 : components.map((component, i) => {
|
|
9
|
-
if ((component === null || component === void 0 ? void 0 : component.htmlType) ===
|
|
10
|
-
return (React.createElement(Input, { key: `input_${i + 0}`, className: classNames(component === null || component === void 0 ? void 0 : component.className, theme), label: component === null || component === void 0 ? void 0 : component.label, placeholder: component === null || component === void 0 ? void 0 : component.placeholder, type: component === null || component === void 0 ? void 0 : component.type, name: component === null || component === void 0 ? void 0 : component.name
|
|
9
|
+
if ((component === null || component === void 0 ? void 0 : component.htmlType) === "Input") {
|
|
10
|
+
return (React.createElement(Input, { key: `input_${i + 0}`, className: classNames(component === null || component === void 0 ? void 0 : component.className, theme), label: component === null || component === void 0 ? void 0 : component.label, placeholder: component === null || component === void 0 ? void 0 : component.placeholder, type: component === null || component === void 0 ? void 0 : component.type, name: component === null || component === void 0 ? void 0 : component.name }));
|
|
11
11
|
}
|
|
12
|
-
else if (component.htmlType ===
|
|
12
|
+
else if (component.htmlType === "Button") {
|
|
13
13
|
return (React.createElement(Button, { key: `button_${i + 0}`, type: component === null || component === void 0 ? void 0 : component.type, onClick: component === null || component === void 0 ? void 0 : component.onClick, className: classNames(component === null || component === void 0 ? void 0 : component.className, theme) }, component === null || component === void 0 ? void 0 : component.children));
|
|
14
14
|
}
|
|
15
15
|
else
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../../../src/lib/components/Form/Form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../../../src/lib/components/Form/Form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAgC,MAAM,2BAA2B,CAAC;AACzE,OAAO,KAA8B,MAAM,yBAAyB,CAAC;AAErE,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,SAAS,MAAM,iCAAiC,CAAC;AAWxD,MAAM,IAAI,GAAG,CAAC,EACZ,EAAE,EACF,SAAS,EACT,QAAQ,EACR,GAAG,EACH,UAAU,EACV,KAAK,GAAG,qBAAqB,GACvB,EAAe,EAAE;IACvB,OAAO,CACL,oBAAC,SAAS,IAAC,WAAW;QACpB,8BACE,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,KAAK,CAAC,EACvC,QAAQ,EAAE,QAAQ,IAEjB,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,GAAG,CAAC,CAAC,SAAS,EAAE,CAAC,EAAE,EAAE;YAChC,IAAI,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,MAAK,OAAO,EAAE;gBACnC,OAAO,CACL,oBAAC,KAAK,IACJ,GAAG,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,EACrB,SAAS,EAAE,UAAU,CAAC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,SAAS,EAAE,KAAK,CAAC,EAClD,KAAK,EAAE,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,KAAK,EACvB,WAAW,EAAE,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,WAAW,EACnC,IAAI,EAAE,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,IAAI,EACrB,IAAI,EAAE,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,IAAI,GACrB,CACH,CAAC;aACH;iBAAM,IAAI,SAAS,CAAC,QAAQ,KAAK,QAAQ,EAAE;gBAC1C,OAAO,CACL,oBAAC,MAAM,IACL,GAAG,EAAE,UAAU,CAAC,GAAG,CAAC,EAAE,EACtB,IAAI,EAAE,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,IAAI,EACrB,OAAO,EAAE,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,EAC3B,SAAS,EAAE,UAAU,CAAC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,SAAS,EAAE,KAAK,CAAC,IAEjD,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,CACb,CACV,CAAC;aACH;;gBAAM,OAAO,yCAAK,CAAC;QACtB,CAAC,CAAC,CACG,CACG,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { Colours, ThemeTypes } from
|
|
2
|
+
import { Colours, ThemeTypes } from "../../utils/controls";
|
|
3
3
|
export interface Props {
|
|
4
4
|
id?: string;
|
|
5
5
|
className?: string;
|
|
6
6
|
type: string;
|
|
7
7
|
size?: number;
|
|
8
|
-
animation?:
|
|
8
|
+
animation?: "pulse" | "none";
|
|
9
9
|
reverseSpin?: boolean;
|
|
10
10
|
hollow?: boolean;
|
|
11
11
|
colour?: Colours;
|
|
@@ -17,5 +17,5 @@ export interface Props {
|
|
|
17
17
|
theme?: ThemeTypes;
|
|
18
18
|
onClick?: () => void;
|
|
19
19
|
}
|
|
20
|
-
declare const Icon: ({ id, className, type, size, animation, reverseSpin, hollow, colour, bgColour, hoverColour, hoverBgColour, rounded, brand, theme, onClick }: Props) => JSX.Element;
|
|
20
|
+
declare const Icon: ({ id, className, type, size, animation, reverseSpin, hollow, colour, bgColour, hoverColour, hoverBgColour, rounded, brand, theme, onClick, }: Props) => JSX.Element;
|
|
21
21
|
export default Icon;
|
|
@@ -1,15 +1,27 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import classNames from
|
|
3
|
-
import style from
|
|
4
|
-
const Icon = ({ id, className, type, size = 1, animation =
|
|
1
|
+
import React from "react";
|
|
2
|
+
import classNames from "classnames";
|
|
3
|
+
import style from "./style.module.css";
|
|
4
|
+
const Icon = ({ id, className, type, size = 1, animation = "none", reverseSpin = false, hollow = false, colour = "primary", bgColour = "transparent", hoverColour = colour, hoverBgColour = bgColour, rounded = false, brand = false, theme = "theme-rupertbennett", onClick, }) => {
|
|
5
5
|
const colourString = colour;
|
|
6
6
|
const hoverColourString = hoverColour;
|
|
7
7
|
const bgColourString = bgColour;
|
|
8
8
|
const hoverBgColourString = hoverBgColour;
|
|
9
|
-
const fontColourKey = typeof colourString ===
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
const
|
|
9
|
+
const fontColourKey = typeof colourString === "string"
|
|
10
|
+
? `text${colourString.charAt(0).toUpperCase()}${colourString.slice(1)}`
|
|
11
|
+
: "textPrimary";
|
|
12
|
+
const backgroundColourKey = typeof bgColourString === "string"
|
|
13
|
+
? `bg${bgColourString.charAt(0).toUpperCase()}${bgColourString.slice(1)}`
|
|
14
|
+
: "bgTransparent";
|
|
15
|
+
const hoverFontColourKey = typeof hoverColourString === "string"
|
|
16
|
+
? `hoverText${hoverColourString
|
|
17
|
+
.charAt(0)
|
|
18
|
+
.toUpperCase()}${hoverColourString.slice(1)}`
|
|
19
|
+
: "hoverTextPrimary";
|
|
20
|
+
const hoverBackgroundColourKey = typeof hoverBgColourString === "string"
|
|
21
|
+
? `hoverBg${hoverBgColourString
|
|
22
|
+
.charAt(0)
|
|
23
|
+
.toUpperCase()}${hoverBgColourString.slice(1)}`
|
|
24
|
+
: "hoverBgTransparent";
|
|
13
25
|
const wrapperClassList = classNames({
|
|
14
26
|
[style.sizeOne]: size === 1,
|
|
15
27
|
[style.sizeTwo]: size === 2,
|
|
@@ -21,18 +33,18 @@ const Icon = ({ id, className, type, size = 1, animation = 'none', reverseSpin =
|
|
|
21
33
|
[style.sizeEight]: size === 8,
|
|
22
34
|
[style.sizeNine]: size === 9,
|
|
23
35
|
[style.sizeTen]: size === 10,
|
|
24
|
-
[style.rounded]: rounded
|
|
25
|
-
}, className, style.wrapperClassList, style[backgroundColourKey], style[fontColourKey], style[hoverBackgroundColourKey], style[hoverFontColourKey],
|
|
36
|
+
[style.rounded]: rounded,
|
|
37
|
+
}, className, style.wrapperClassList, style[backgroundColourKey], style[fontColourKey], style[hoverBackgroundColourKey], style[hoverFontColourKey], "transition-backgroundColor duration-500 transform", theme);
|
|
26
38
|
const classList = classNames({
|
|
27
|
-
|
|
39
|
+
"fa-brands": brand,
|
|
28
40
|
[`fa-${size}x`]: size,
|
|
29
41
|
[`fa-${animation}`]: animation,
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
[style.rounded]: rounded
|
|
42
|
+
"fa-spin-reverse": reverseSpin,
|
|
43
|
+
"fa-regular": hollow,
|
|
44
|
+
[style.rounded]: rounded,
|
|
33
45
|
}, `${style.classList} fa fa-${type}`);
|
|
34
46
|
return (React.createElement("div", { id: id, className: wrapperClassList, onClick: onClick },
|
|
35
|
-
React.createElement("span", { className: classList, role:
|
|
47
|
+
React.createElement("span", { className: classList, role: "img", "aria-hidden": "true", "aria-label": type })));
|
|
36
48
|
};
|
|
37
49
|
export default Icon;
|
|
38
50
|
//# sourceMappingURL=Icon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../../../src/lib/components/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../../../src/lib/components/Icon/Icon.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import classNames from
|
|
3
|
-
import style from
|
|
4
|
-
import MatchMedia from
|
|
5
|
-
import screens from
|
|
6
|
-
import Container from
|
|
7
|
-
const ImageInfo = ({ id, className, bgColour, textColour =
|
|
1
|
+
import React from "react";
|
|
2
|
+
import classNames from "classnames";
|
|
3
|
+
import style from "./style.module.css";
|
|
4
|
+
import MatchMedia from "../../utils/matchMedia";
|
|
5
|
+
import screens from "../../utils/screens";
|
|
6
|
+
import Container from "../Container/Container";
|
|
7
|
+
const ImageInfo = ({ id, className, bgColour, textColour = "white", contentTitle, text, image, swapDesktop = false, swapMobile = false, theme = "theme-rupertbennett", }) => {
|
|
8
8
|
const classList = className;
|
|
9
9
|
const mediumScreen = screens.md;
|
|
10
10
|
const lgScreenSize = `(min-width: ${mediumScreen})`;
|
|
@@ -14,16 +14,16 @@ const ImageInfo = ({ id, className, bgColour, textColour = 'white', contentTitle
|
|
|
14
14
|
const wrapperClassList = classNames({
|
|
15
15
|
[style.wrapper]: !swapDesktop,
|
|
16
16
|
[style.reverseWrapper]: swapDesktop,
|
|
17
|
-
[style.reverseMobileWrapper]: !isLg && swapMobile
|
|
17
|
+
[style.reverseMobileWrapper]: !isLg && swapMobile,
|
|
18
18
|
}, style.wrapperClasses, theme);
|
|
19
19
|
const imageWrapperClasses = classNames({
|
|
20
|
-
[style.smallImageWrapper]: isSm
|
|
20
|
+
[style.smallImageWrapper]: isSm,
|
|
21
21
|
}, style.imageWrapper);
|
|
22
22
|
const imageClasses = classNames({
|
|
23
|
-
[style.smallImageHeight]: isSm
|
|
23
|
+
[style.smallImageHeight]: isSm,
|
|
24
24
|
}, style.image);
|
|
25
25
|
return (React.createElement("div", { id: id, style: { backgroundColor: bgColour, color: textColour }, className: classList },
|
|
26
|
-
React.createElement(Container, { withPadding:
|
|
26
|
+
React.createElement(Container, { withPadding: isLg },
|
|
27
27
|
React.createElement("div", { className: wrapperClassList },
|
|
28
28
|
React.createElement("div", { className: imageWrapperClasses },
|
|
29
29
|
React.createElement("img", { src: image, className: imageClasses, alt: contentTitle, title: contentTitle })),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageInfo.js","sourceRoot":"","sources":["../../../../../src/lib/components/ImageInfo/ImageInfo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"ImageInfo.js","sourceRoot":"","sources":["../../../../../src/lib/components/ImageInfo/ImageInfo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,MAAM,oBAAoB,CAAC;AAEvC,OAAO,UAAU,MAAM,mBAAmB,CAAC;AAC3C,OAAO,OAAO,MAAM,gBAAgB,CAAC;AACrC,OAAO,SAAS,MAAM,iCAAiC,CAAC;AAexD,MAAM,SAAS,GAAoB,CAAC,EAClC,EAAE,EACF,SAAS,EACT,QAAQ,EACR,UAAU,GAAG,OAAO,EACpB,YAAY,EACZ,IAAI,EACJ,KAAK,EACL,WAAW,GAAG,KAAK,EACnB,UAAU,GAAG,KAAK,EAClB,KAAK,GAAG,qBAAqB,GACvB,EAAe,EAAE;IACvB,MAAM,SAAS,GAAG,SAAS,CAAC;IAC5B,MAAM,YAAY,GAAW,OAAO,CAAC,EAAE,CAAC;IACxC,MAAM,YAAY,GAAW,eAAe,YAAY,GAAG,CAAC;IAC5D,MAAM,YAAY,GAAW,eAAe,YAAY,GAAG,CAAC;IAC5D,MAAM,IAAI,GAAY,UAAU,CAAC,YAAY,CAAC,CAAC;IAC/C,MAAM,IAAI,GAAY,UAAU,CAAC,YAAY,CAAC,CAAC;IAE/C,MAAM,gBAAgB,GAAG,UAAU,CACjC;QACE,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,WAAW;QAC7B,CAAC,KAAK,CAAC,cAAc,CAAC,EAAE,WAAW;QACnC,CAAC,KAAK,CAAC,oBAAoB,CAAC,EAAE,CAAC,IAAI,IAAI,UAAU;KAClD,EACD,KAAK,CAAC,cAAc,EACpB,KAAK,CACN,CAAC;IAEF,MAAM,mBAAmB,GAAG,UAAU,CACpC;QACE,CAAC,KAAK,CAAC,iBAAiB,CAAC,EAAE,IAAI;KAChC,EACD,KAAK,CAAC,YAAY,CACnB,CAAC;IAEF,MAAM,YAAY,GAAG,UAAU,CAC7B;QACE,CAAC,KAAK,CAAC,gBAAgB,CAAC,EAAE,IAAI;KAC/B,EACD,KAAK,CAAC,KAAK,CACZ,CAAC;IAEF,OAAO,CACL,6BACE,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,EAAE,EACvD,SAAS,EAAE,SAAS;QAEpB,oBAAC,SAAS,IAAC,WAAW,EAAE,IAAI;YAC1B,6BAAK,SAAS,EAAE,gBAAgB;gBAC9B,6BAAK,SAAS,EAAE,mBAAmB;oBACjC,6BACE,GAAG,EAAE,KAAK,EACV,SAAS,EAAE,YAAY,EACvB,GAAG,EAAE,YAAY,EACjB,KAAK,EAAE,YAAY,GACnB,CACE;gBACN,6BAAK,SAAS,EAAE,KAAK,CAAC,cAAc;oBAClC,6BAAK,SAAS,EAAE,KAAK,CAAC,OAAO;wBAC3B;4BACE,2BAAG,SAAS,EAAE,KAAK,CAAC,KAAK,IAAG,YAAY,CAAK;4BAC7C,2BAAG,SAAS,EAAE,KAAK,CAAC,IAAI,IAAG,IAAI,CAAK,CAChC,CACF,CACF,CACF,CACI,CACR,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { Props as iconProps } from
|
|
3
|
-
import { Colours, ThemeTypes } from
|
|
2
|
+
import { Props as iconProps } from "../Icon/Icon";
|
|
3
|
+
import { Colours, ThemeTypes } from "../../utils/controls";
|
|
4
4
|
export interface Props {
|
|
5
5
|
id: string;
|
|
6
6
|
className?: string;
|
|
@@ -13,5 +13,5 @@ export interface Props {
|
|
|
13
13
|
theme?: ThemeTypes;
|
|
14
14
|
large?: boolean;
|
|
15
15
|
}
|
|
16
|
-
declare const InformationIcon: ({ id, className, title, subtitle, withAnimation, withHoverEffect, iconProps, backgroundColour, theme, large }: Props) => JSX.Element;
|
|
16
|
+
declare const InformationIcon: ({ id, className, title, subtitle, withAnimation, withHoverEffect, iconProps, backgroundColour, theme, large, }: Props) => JSX.Element;
|
|
17
17
|
export default InformationIcon;
|
|
@@ -1,34 +1,38 @@
|
|
|
1
|
-
import React, { useEffect, useRef } from
|
|
2
|
-
import Icon from
|
|
3
|
-
import classNames from
|
|
4
|
-
import style from
|
|
5
|
-
|
|
1
|
+
import React, { useEffect, useRef } from "react";
|
|
2
|
+
import Icon from "../Icon/Icon";
|
|
3
|
+
import classNames from "classnames";
|
|
4
|
+
import style from "./style.module.css";
|
|
5
|
+
import MatchMedia from "../../utils/matchMedia";
|
|
6
|
+
import screens from "../../utils/screens";
|
|
7
|
+
const InformationIcon = ({ id, className, title, subtitle, withAnimation = false, withHoverEffect = true, iconProps, backgroundColour = "white", theme = "theme-rupertbennett", large = true, }) => {
|
|
6
8
|
const loaded = useRef(false);
|
|
9
|
+
const smScreenSize = `(max-width: ${screens.md})`;
|
|
10
|
+
const isSm = MatchMedia(smScreenSize);
|
|
7
11
|
const classList = classNames({
|
|
8
12
|
[style.hoverable]: withHoverEffect,
|
|
9
13
|
[style.large]: large,
|
|
10
14
|
[style.small]: !large,
|
|
11
|
-
|
|
15
|
+
"pt-4": !large,
|
|
12
16
|
}, className, style.classList, style[backgroundColour], theme);
|
|
13
17
|
const titleClassList = classNames({
|
|
14
18
|
[style.centerText]: subtitle === undefined,
|
|
15
|
-
[style.title]: subtitle !== undefined
|
|
19
|
+
[style.title]: subtitle !== undefined,
|
|
16
20
|
});
|
|
17
21
|
const subtitleClassList = classNames({
|
|
18
|
-
[style.centerText]: title === undefined
|
|
22
|
+
[style.centerText]: title === undefined,
|
|
19
23
|
}, style.subtitle);
|
|
20
24
|
useEffect(() => {
|
|
21
|
-
if (typeof subtitle ===
|
|
25
|
+
if (typeof subtitle === "number") {
|
|
22
26
|
const element = document.getElementById(`${id}_number`);
|
|
23
27
|
const observer = new IntersectionObserver((entries, observer) => {
|
|
24
|
-
entries.forEach(entry => {
|
|
28
|
+
entries.forEach((entry) => {
|
|
25
29
|
if (entry.intersectionRatio >= 0.1 && !loaded.current) {
|
|
26
30
|
loaded.current = true;
|
|
27
31
|
counterAnimation(document.getElementById(`${id}_number`), 0, subtitle, 3000);
|
|
28
32
|
}
|
|
29
33
|
});
|
|
30
34
|
}, { threshold: 1 });
|
|
31
|
-
|
|
35
|
+
element != null && withAnimation && observer.observe(element);
|
|
32
36
|
}
|
|
33
37
|
}, []);
|
|
34
38
|
const counterAnimation = (obj, start, end, duration) => {
|
|
@@ -44,11 +48,10 @@ const InformationIcon = ({ id, className, title, subtitle, withAnimation = false
|
|
|
44
48
|
window.requestAnimationFrame(step);
|
|
45
49
|
};
|
|
46
50
|
return (React.createElement("div", { id: id, className: classList },
|
|
47
|
-
React.createElement("div", { className: style.icon },
|
|
48
|
-
React.createElement(Icon, Object.assign({}, iconProps, { theme: theme, bgColour: backgroundColour }))),
|
|
51
|
+
React.createElement("div", { className: style.icon }, iconProps !== undefined && (React.createElement(Icon, Object.assign({}, iconProps, { className: "mx-auto", size: isSm ? 3 : 2, theme: theme, bgColour: backgroundColour })))),
|
|
49
52
|
React.createElement("div", { className: style.text },
|
|
50
|
-
title !== undefined && title !==
|
|
51
|
-
subtitle !== undefined && subtitle !==
|
|
53
|
+
title !== undefined && title !== "" && (React.createElement("p", { className: titleClassList }, title)),
|
|
54
|
+
subtitle !== undefined && subtitle !== "" && (React.createElement("p", { className: subtitleClassList }, subtitle)))));
|
|
52
55
|
};
|
|
53
56
|
export default InformationIcon;
|
|
54
57
|
//# 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,
|
|
1
|
+
{"version":3,"file":"InformationIcon.js","sourceRoot":"","sources":["../../../../../src/lib/components/InformationIcon/InformationIcon.tsx"],"names":[],"mappings":"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"}
|