trepur_components 1.0.17 → 1.0.19
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/Card/Card.d.ts +6 -13
- package/dist/src/lib/components/Card/Card.js +16 -11
- package/dist/src/lib/components/Card/Card.js.map +1 -1
- package/dist/src/lib/components/Card/style.module.css +30 -19
- package/dist/src/lib/components/Card/style.module.css.map +1 -1
- package/dist/src/lib/components/CardWithTopImage/CardWithTopImage.js +3 -1
- package/dist/src/lib/components/CardWithTopImage/CardWithTopImage.js.map +1 -1
- package/dist/src/lib/components/CardWithTopImage/style.module.css +5 -18
- package/dist/src/lib/components/CardWithTopImage/style.module.css.map +1 -1
- package/dist/src/lib/components/ComponentWrapper/ComponentWrapper.js +1 -1
- package/dist/src/lib/components/ComponentWrapper/ComponentWrapper.js.map +1 -1
- package/dist/src/lib/components/ComponentWrapper/style.module.css +11 -0
- package/dist/src/lib/components/ComponentWrapper/style.module.css.map +1 -1
- package/dist/src/lib/components/Jumbotron/Jumbotron.d.ts +2 -1
- package/dist/src/lib/components/Jumbotron/Jumbotron.js +4 -3
- package/dist/src/lib/components/Jumbotron/Jumbotron.js.map +1 -1
- package/dist/src/lib/components/Jumbotron/style.module.css +12 -1
- package/dist/src/lib/components/Jumbotron/style.module.css.map +1 -1
- package/dist/src/lib/utils/controls.d.ts +1 -1
- package/package.json +3 -3
|
@@ -1,25 +1,18 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Props as buttonProps } from '../Button/Button';
|
|
3
3
|
import { Props as videoProps } from '../Video/Video';
|
|
4
|
+
import { Props as imageProps } from '../Image/Image';
|
|
4
5
|
export interface Props {
|
|
5
6
|
id?: string;
|
|
6
7
|
className?: string;
|
|
7
8
|
title?: string;
|
|
8
|
-
|
|
9
|
+
imageProps?: imageProps;
|
|
10
|
+
videoProps?: videoProps;
|
|
9
11
|
subTitle?: string;
|
|
10
12
|
description?: string;
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
subTitleClass?: string;
|
|
15
|
-
extraTextClass?: string;
|
|
16
|
-
descriptionClass?: string;
|
|
17
|
-
altText?: string;
|
|
18
|
-
videoProps?: videoProps;
|
|
19
|
-
onHover?: boolean;
|
|
20
|
-
iconButtonProps?: buttonProps;
|
|
21
|
-
cardButtonProps?: buttonProps;
|
|
22
|
-
button2Props?: buttonProps;
|
|
13
|
+
href?: string;
|
|
14
|
+
target?: string;
|
|
15
|
+
buttonProps?: buttonProps;
|
|
23
16
|
}
|
|
24
17
|
declare const Card: React.FC<Props>;
|
|
25
18
|
export default Card;
|
|
@@ -3,18 +3,24 @@ import classNames from 'classnames';
|
|
|
3
3
|
import Button from '../Button/Button';
|
|
4
4
|
import Video from '../Video/Video';
|
|
5
5
|
import style from './style.module.css';
|
|
6
|
-
const Card = ({ id, className,
|
|
6
|
+
const Card = ({ id, className, imageProps, videoProps, title, subTitle, description, href, target, buttonProps }) => {
|
|
7
7
|
const cardTitleClasses = classNames(style.title);
|
|
8
|
-
const cardSubTitleClassList = classNames(
|
|
9
|
-
const cardDescriptionClassList = classNames(
|
|
8
|
+
const cardSubTitleClassList = classNames(style.subtitle);
|
|
9
|
+
const cardDescriptionClassList = classNames(style.description);
|
|
10
10
|
const classList = classNames(className, style.classList);
|
|
11
|
-
const imageClassList = classNames(
|
|
12
|
-
|
|
11
|
+
const imageClassList = classNames(style.imageClassList);
|
|
12
|
+
let Tag = 'div';
|
|
13
|
+
let attributes = {};
|
|
14
|
+
if (Boolean(href) || Boolean(target)) {
|
|
15
|
+
Tag = 'a';
|
|
16
|
+
attributes = { href, title, target };
|
|
17
|
+
}
|
|
18
|
+
return (React.createElement(Tag, Object.assign({ id: id, className: classList }, attributes),
|
|
13
19
|
React.createElement("div", null, (videoProps === null || videoProps === void 0 ? void 0 : videoProps.mp4File) !== undefined || (videoProps === null || videoProps === void 0 ? void 0 : videoProps.webmFile) !== undefined || (videoProps === null || videoProps === void 0 ? void 0 : videoProps.ogvFile) !== undefined
|
|
14
20
|
? (React.createElement(Video, Object.assign({}, videoProps)))
|
|
15
|
-
: (
|
|
16
|
-
React.createElement("img", { className: imageClassList
|
|
17
|
-
React.createElement("div",
|
|
21
|
+
: (imageProps !== undefined &&
|
|
22
|
+
React.createElement("img", Object.assign({ className: imageClassList }, imageProps)))),
|
|
23
|
+
React.createElement("div", { className: style.contentWrapper },
|
|
18
24
|
React.createElement("div", { className: style.movingContent },
|
|
19
25
|
title !== undefined &&
|
|
20
26
|
React.createElement("h3", { className: cardTitleClasses }, title),
|
|
@@ -23,9 +29,8 @@ const Card = ({ id, className, title, image, subTitle, description, imageClass,
|
|
|
23
29
|
React.createElement("div", { className: style.staticContent },
|
|
24
30
|
description !== undefined &&
|
|
25
31
|
React.createElement("p", { className: cardDescriptionClassList }, description),
|
|
26
|
-
|
|
27
|
-
React.createElement(
|
|
28
|
-
React.createElement(Button, Object.assign({}, cardButtonProps), cardButtonProps === null || cardButtonProps === void 0 ? void 0 : cardButtonProps.children))))));
|
|
32
|
+
buttonProps !== undefined && buttonProps !== null && Tag === 'div' &&
|
|
33
|
+
React.createElement(Button, Object.assign({ className: style.buttonClassList }, buttonProps), buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.children)))));
|
|
29
34
|
};
|
|
30
35
|
export default Card;
|
|
31
36
|
//# sourceMappingURL=Card.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../../src/lib/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../../src/lib/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,UAAU,MAAM,YAAY,CAAA;AACnC,OAAO,MAAgC,MAAM,2BAA2B,CAAA;AACxE,OAAO,KAA8B,MAAM,yBAAyB,CAAA;AAEpE,OAAO,KAAK,MAAM,oBAAoB,CAAA;AAiBtC,MAAM,IAAI,GAAoB,CAAC,EAC7B,EAAE,EACF,SAAS,EACT,UAAU,EACV,UAAU,EACV,KAAK,EACL,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,MAAM,EACN,WAAW,EACL,EAAe,EAAE;IACvB,MAAM,gBAAgB,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;IAChD,MAAM,qBAAqB,GAAG,UAAU,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAA;IACxD,MAAM,wBAAwB,GAAG,UAAU,CAAC,KAAK,CAAC,WAAW,CAAC,CAAA;IAC9D,MAAM,SAAS,GAAG,UAAU,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;IACxD,MAAM,cAAc,GAAG,UAAU,CAAC,KAAK,CAAC,cAAc,CAAC,CAAA;IAEvD,IAAI,GAAG,GAAmD,KAAK,CAAA;IAC/D,IAAI,UAAU,GAAqB,EAAE,CAAA;IAErC,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,MAAM,CAAC,EAAE;QACpC,GAAG,GAAG,GAAG,CAAA;QACT,UAAU,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,CAAA;KACrC;IAED,OAAO,CACL,oBAAC,GAAG,kBACF,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,SAAS,IAChB,UAAU;QAEd,iCACG,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,OAAO,MAAK,SAAS,IAAI,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,QAAQ,MAAK,SAAS,IAAI,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,OAAO,MAAK,SAAS;YAC3G,CAAC,CAAC,CACA,oBAAC,KAAK,oBAAK,UAAU,EAAI,CACxB;YACH,CAAC,CAAC,CAAC,UAAU,KAAK,SAAS;gBACzB,2CAAK,SAAS,EAAE,cAAc,IAAM,UAAU,EAAI,CACjD,CACD;QACN,6BAAK,SAAS,EAAE,KAAK,CAAC,cAAc;YAClC,6BAAK,SAAS,EAAE,KAAK,CAAC,aAAa;gBAChC,KAAK,KAAK,SAAS;oBAClB,4BAAI,SAAS,EAAE,gBAAgB,IAC5B,KAAK,CACH;gBACN,QAAQ,KAAK,SAAS;oBACrB,4BAAI,SAAS,EAAE,qBAAqB,IACjC,QAAQ,CACN,CACH;YACN,6BAAK,SAAS,EAAE,KAAK,CAAC,aAAa;gBAChC,WAAW,KAAK,SAAS;oBACxB,2BAAG,SAAS,EAAE,wBAAwB,IACnC,WAAW,CACV;gBACL,WAAW,KAAK,SAAS,IAAI,WAAW,KAAK,IAAI,IAAI,GAAG,KAAK,KAAK;oBACjE,oBAAC,MAAM,kBAAC,SAAS,EAAE,KAAK,CAAC,eAAe,IAAM,WAAW,GACtD,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,QAAQ,CACf,CACP,CACF,CACF,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,IAAI,CAAA"}
|
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
.classList {
|
|
2
2
|
display: flex;
|
|
3
3
|
flex-direction: column;
|
|
4
|
-
border-width: 1px;
|
|
5
|
-
border-color: rgb(44 55 59 / var(--tw-border-opacity));
|
|
6
|
-
--tw-border-opacity: 1;
|
|
7
4
|
border-radius: 0.5rem;
|
|
8
|
-
|
|
5
|
+
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
6
|
+
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
|
|
7
|
+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
8
|
+
max-width: 380px
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
a .classList:hover {
|
|
12
|
+
cursor: pointer
|
|
9
13
|
}
|
|
10
14
|
|
|
11
15
|
.classList:hover .movingContent {
|
|
@@ -32,13 +36,17 @@
|
|
|
32
36
|
border-top-right-radius: 0.5rem
|
|
33
37
|
}
|
|
34
38
|
|
|
39
|
+
.contentWrapper {
|
|
40
|
+
height: 100%
|
|
41
|
+
}
|
|
42
|
+
|
|
35
43
|
.movingContent {
|
|
36
44
|
--tw-bg-opacity: 1;
|
|
37
45
|
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
|
38
46
|
margin-top: 0px;
|
|
39
|
-
padding-left:
|
|
40
|
-
padding-right:
|
|
41
|
-
padding-top:
|
|
47
|
+
padding-left: 1.5rem;
|
|
48
|
+
padding-right: 1.5rem;
|
|
49
|
+
padding-top: 1.5rem;
|
|
42
50
|
border-bottom-right-radius: 0.5rem;
|
|
43
51
|
border-bottom-left-radius: 0.5rem;
|
|
44
52
|
transition-property: all;
|
|
@@ -48,33 +56,36 @@
|
|
|
48
56
|
|
|
49
57
|
.staticContent {
|
|
50
58
|
margin-top: 0px;
|
|
51
|
-
padding-left:
|
|
52
|
-
padding-right:
|
|
53
|
-
padding-top:
|
|
59
|
+
padding-left: 1.5rem;
|
|
60
|
+
padding-right: 1.5rem;
|
|
61
|
+
padding-top: 1.5rem;
|
|
54
62
|
transition-property: all;
|
|
55
63
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
56
|
-
transition-duration: 300ms
|
|
64
|
+
transition-duration: 300ms;
|
|
65
|
+
display: flex;
|
|
66
|
+
flex-direction: column;
|
|
67
|
+
justify-content: space-between;
|
|
68
|
+
height: calc(100% - 78px)
|
|
57
69
|
}
|
|
58
70
|
|
|
59
71
|
.title {
|
|
60
|
-
font-size:
|
|
72
|
+
font-size: 20px;
|
|
61
73
|
font-weight: 500
|
|
62
74
|
}
|
|
63
75
|
|
|
64
76
|
.subtitle {
|
|
65
|
-
font-size:
|
|
66
|
-
font-weight:
|
|
77
|
+
font-size: 16px;
|
|
78
|
+
font-weight: 400
|
|
67
79
|
}
|
|
68
80
|
|
|
69
81
|
.description {
|
|
70
|
-
padding-bottom:
|
|
82
|
+
padding-bottom: 1.5rem;
|
|
71
83
|
font-size: 16px;
|
|
72
|
-
font-weight:
|
|
84
|
+
font-weight: 300
|
|
73
85
|
}
|
|
74
86
|
|
|
75
87
|
.buttonClassList {
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
text-align: center
|
|
88
|
+
margin-bottom: 1.5rem;
|
|
89
|
+
width: 100%
|
|
79
90
|
}
|
|
80
91
|
/*# sourceMappingURL=style.module.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/lib/components/Card/style.module.css"],"names":[],"mappings":"AACI;IAAA,aAAoB;IAApB,sBAAoB;IACpB,
|
|
1
|
+
{"version":3,"sources":["../../../../../src/lib/components/Card/style.module.css"],"names":[],"mappings":"AACI;IAAA,aAAoB;IAApB,sBAAoB;IACpB,qBAAiB;IACjB,gFAAgB;IAAhB,oGAAgB;IAAhB,uGAAgB;IAChB;AAHoB;;AAOpB;IAAA;AAAqB;;AAIrB;IAAA,iBAAY;IACZ,wBAAkC;IAAlC,wDAAkC;IAAlC;AADY;;AAKZ;IAAA,gBAAW;IACX,wBAAkC;IAAlC,wDAAkC;IAAlC;AADW;;AAKX;IAAA,YAAiC;IAAjC,WAAiC;IACjC,aAAwC;IAAxC,gBAAwC;IAAxC,iBAAwC;IACxC,8BAAmB;IAAnB;AAFiC;;AAMjC;IAAA;AAAa;;AAIb;IAAA,kBAAe;IAAf,yDAAe;IACf,eAAqB;IAArB,oBAAqB;IAArB,qBAAqB;IAArB,mBAAqB;IACrB,kCAAmB;IAAnB,iCAAmB;IACnB,wBAAkC;IAAlC,wDAAkC;IAAlC;AAHe;;AAOf;IAAA,eAAqB;IAArB,oBAAqB;IAArB,qBAAqB;IAArB,mBAAqB;IACrB,wBAAkC;IAAlC,wDAAkC;IAAlC,0BAAkC;IAClC,aAAoC;IAApC,sBAAoC;IAApC,8BAAoC;IACpC;AAHqB;;AAOrB;IAAA,eAA0B;IAA1B;AAA0B;;AAI1B;IAAA,eAA2B;IAA3B;AAA2B;;AAI3B;IAAA,sBAA8B;IAA9B,eAA8B;IAA9B;AAA8B;;AAI9B;IAAA,qBAAkB;IAAlB;AAAkB","file":"style.module.css","sourcesContent":[".classList {\n @apply flex flex-col;\n @apply rounded-lg;\n @apply shadow-xl;\n max-width: 380px;\n}\n\na .classList:hover {\n @apply cursor-pointer;\n}\n\n.classList:hover .movingContent {\n @apply -mt-8;\n @apply transition-all duration-300;\n}\n\n.classList:hover .staticContent {\n @apply mt-8;\n @apply transition-all duration-300;\n}\n\n.imageClassList {\n @apply w-full object-cover h-full;\n @apply h-64 overflow-hidden object-cover;\n @apply rounded-t-lg;\n}\n\n.contentWrapper {\n @apply h-full;\n}\n\n.movingContent {\n @apply bg-white;\n @apply px-6 pt-6 mt-0;\n @apply rounded-b-lg;\n @apply transition-all duration-300;\n}\n\n.staticContent {\n @apply px-6 pt-6 mt-0;\n @apply transition-all duration-300;\n @apply flex flex-col justify-between;\n height: calc(100% - 78px)\n}\n\n.title {\n @apply font-medium text-sm;\n}\n\n.subtitle {\n @apply font-regular text-xs;\n}\n\n.description {\n @apply font-light text-xs pb-6;\n}\n\n.buttonClassList {\n @apply w-full mb-6;\n}"]}
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import Image from '../Image/Image';
|
|
3
3
|
import style from './style.module.css';
|
|
4
|
+
import classNames from 'classnames';
|
|
4
5
|
const CardWithTopImage = ({ id, className, children, imageProps }) => {
|
|
5
6
|
const src = (imageProps === null || imageProps === void 0 ? void 0 : imageProps.src) !== undefined ? imageProps.src : '';
|
|
7
|
+
const cardClassList = classNames(className, style.cardClasses);
|
|
6
8
|
return (React.createElement("div", { style: {
|
|
7
9
|
filter: 'drop-shadow(0 4px 8px rgb(154, 154, 154))'
|
|
8
|
-
}, id: id, className:
|
|
10
|
+
}, id: id, className: cardClassList },
|
|
9
11
|
React.createElement("div", { className: style.wrapperClassList },
|
|
10
12
|
React.createElement(Image, Object.assign({ src: src }, imageProps))),
|
|
11
13
|
React.createElement("div", { className: style.contentClassList }, children)));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CardWithTopImage.js","sourceRoot":"","sources":["../../../../../src/lib/components/CardWithTopImage/CardWithTopImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAA8B,MAAM,yBAAyB,CAAA;AACpE,OAAO,KAAK,MAAM,oBAAoB,CAAA;
|
|
1
|
+
{"version":3,"file":"CardWithTopImage.js","sourceRoot":"","sources":["../../../../../src/lib/components/CardWithTopImage/CardWithTopImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAA8B,MAAM,yBAAyB,CAAA;AACpE,OAAO,KAAK,MAAM,oBAAoB,CAAA;AACtC,OAAO,UAAU,MAAM,YAAY,CAAA;AASnC,MAAM,gBAAgB,GAAG,CAAC,EACxB,EAAE,EACF,SAAS,EACT,QAAQ,EACR,UAAU,EACJ,EAAe,EAAE;IACvB,MAAM,GAAG,GAAG,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,GAAG,MAAK,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAA;IAC/D,MAAM,aAAa,GAAG,UAAU,CAAC,SAAS,EAAE,KAAK,CAAC,WAAW,CAAC,CAAA;IAC9D,OAAO,CACL,6BACE,KAAK,EAAE;YACL,MAAM,EAAE,2CAA2C;SACpD,EACD,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,aAAa;QAExB,6BAAK,SAAS,EAAE,KAAK,CAAC,gBAAgB;YACpC,oBAAC,KAAK,kBAAC,GAAG,EAAE,GAAG,IAAM,UAAU,EAAI,CAC/B;QACN,6BAAK,SAAS,EAAE,KAAK,CAAC,gBAAgB,IACnC,QAAQ,CACL,CACF,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,gBAAgB,CAAA"}
|
|
@@ -1,40 +1,27 @@
|
|
|
1
|
-
.
|
|
1
|
+
.cardClasses{
|
|
2
|
+
max-width: 500px
|
|
3
|
+
}
|
|
2
4
|
|
|
5
|
+
.wrapperClassList{
|
|
3
6
|
margin-left: auto;
|
|
4
|
-
|
|
5
7
|
margin-right: auto;
|
|
6
|
-
|
|
7
8
|
max-width: max-content;
|
|
8
|
-
|
|
9
9
|
border-radius: 9999px;
|
|
10
|
-
|
|
11
10
|
--tw-bg-opacity: 1;
|
|
12
|
-
|
|
13
11
|
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
|
14
|
-
|
|
15
12
|
padding: 1rem
|
|
16
13
|
}
|
|
17
14
|
|
|
18
|
-
.contentClassList
|
|
19
|
-
|
|
15
|
+
.contentClassList{
|
|
20
16
|
margin-top: -3rem;
|
|
21
|
-
|
|
22
17
|
height: auto;
|
|
23
|
-
|
|
24
18
|
--tw-bg-opacity: 1;
|
|
25
|
-
|
|
26
19
|
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
|
27
|
-
|
|
28
20
|
padding-left: 1rem;
|
|
29
|
-
|
|
30
21
|
padding-right: 1rem;
|
|
31
|
-
|
|
32
22
|
padding-top: 3rem;
|
|
33
|
-
|
|
34
23
|
padding-bottom: 4rem;
|
|
35
|
-
|
|
36
24
|
--tw-text-opacity: 1;
|
|
37
|
-
|
|
38
25
|
color: rgb(0 0 0 / var(--tw-text-opacity))
|
|
39
26
|
}
|
|
40
27
|
/*# sourceMappingURL=style.module.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/lib/components/CardWithTopImage/style.module.css"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../../src/lib/components/CardWithTopImage/style.module.css"],"names":[],"mappings":"AAAA;IACI;AACJ;;AAGI;IAAA,iBAAkD;IAAlD,kBAAkD;IAAlD,sBAAkD;IAAlD,qBAAkD;IAAlD,kBAAkD;IAAlD,yDAAkD;IAAlD;AAAkD;;AAIlD;IAAA,iBAAyD;IAAzD,YAAyD;IAAzD,kBAAyD;IAAzD,yDAAyD;IAAzD,kBAAyD;IAAzD,mBAAyD;IAAzD,iBAAyD;IAAzD,oBAAyD;IAAzD,oBAAyD;IAAzD;AAAyD","file":"style.module.css","sourcesContent":[".cardClasses{\n max-width: 500px\n}\n\n.wrapperClassList {\n @apply rounded-full mx-auto max-w-max bg-white p-4;\n}\n\n.contentClassList {\n @apply pt-12 px-4 h-auto pb-16 -mt-12 bg-white text-black;\n}"]}
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import classNames from 'classnames';
|
|
3
3
|
import style from './style.module.css';
|
|
4
4
|
import Container from '../Container/Container';
|
|
5
|
-
const ComponentWrapper = ({ id, className, title, description, bgColour = '
|
|
5
|
+
const ComponentWrapper = ({ id, className, title, description, bgColour = 'grey', children, styles, withContainerPadding = true }) => {
|
|
6
6
|
const classList = classNames(className, style.classList, style[bgColour]);
|
|
7
7
|
const containerClasses = classNames({
|
|
8
8
|
[style.containerPadding]: withContainerPadding
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComponentWrapper.js","sourceRoot":"","sources":["../../../../../src/lib/components/ComponentWrapper/ComponentWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,UAAU,MAAM,YAAY,CAAA;AACnC,OAAO,KAAK,MAAM,oBAAoB,CAAA;AACtC,OAAO,SAAS,MAAM,iCAAiC,CAAA;AAcvD,MAAM,gBAAgB,GAAG,CAAC,EACxB,EAAE,EACF,SAAS,EACT,KAAK,EACL,WAAW,EACX,QAAQ,GAAG,
|
|
1
|
+
{"version":3,"file":"ComponentWrapper.js","sourceRoot":"","sources":["../../../../../src/lib/components/ComponentWrapper/ComponentWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,UAAU,MAAM,YAAY,CAAA;AACnC,OAAO,KAAK,MAAM,oBAAoB,CAAA;AACtC,OAAO,SAAS,MAAM,iCAAiC,CAAA;AAcvD,MAAM,gBAAgB,GAAG,CAAC,EACxB,EAAE,EACF,SAAS,EACT,KAAK,EACL,WAAW,EACX,QAAQ,GAAG,MAAM,EACjB,QAAQ,EACR,MAAM,EACN,oBAAoB,GAAG,IAAI,EACrB,EAAe,EAAE;IACvB,MAAM,SAAS,GAAG,UAAU,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;IACzE,MAAM,gBAAgB,GAAG,UAAU,CAAC;QAClC,CAAC,KAAK,CAAC,gBAAgB,CAAC,EAAE,oBAAoB;KAC/C,CAAC,CAAA;IAEF,OAAO,CACL,6BACE,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,MAAM;QAEb,oBAAC,SAAS,IAAC,WAAW,QAAC,SAAS,EAAE,gBAAgB;YAChD,6BAAK,SAAS,EAAE,KAAK,CAAC,OAAO;gBAC1B,KAAK,KAAK,SAAS,IAAI,2BAAG,SAAS,EAAE,KAAK,CAAC,KAAK,IAAG,KAAK,CAAK;gBAC7D,WAAW,KAAK,SAAS,IAAI,2BAAG,SAAS,EAAE,KAAK,CAAC,WAAW,IAAG,WAAW,CAAK,CAC5E;YACL,QAAQ,CACC,CACR,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,gBAAgB,CAAA"}
|
|
@@ -70,6 +70,17 @@
|
|
|
70
70
|
color: rgb(0 0 0 / var(--tw-text-opacity))
|
|
71
71
|
}
|
|
72
72
|
|
|
73
|
+
.grey {
|
|
74
|
+
|
|
75
|
+
--tw-bg-opacity: 1;
|
|
76
|
+
|
|
77
|
+
background-color: rgb(245 245 245 / var(--tw-bg-opacity));
|
|
78
|
+
|
|
79
|
+
--tw-text-opacity: 1;
|
|
80
|
+
|
|
81
|
+
color: rgb(0 0 0 / var(--tw-text-opacity))
|
|
82
|
+
}
|
|
83
|
+
|
|
73
84
|
.black {
|
|
74
85
|
|
|
75
86
|
--tw-bg-opacity: 1;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/lib/components/ComponentWrapper/style.module.css"],"names":[],"mappings":"AACI;;IAAA,iBAAqB;;IAArB,kBAAqB;;IAArB;AAAqB;;AAIvB;;IAAA,iBAAW;;IAAX;AAAW;;AAIX;;IAAA;AAAW;;AAIX;;IAAA,sBAA+B;;IAA/B,eAA+B;;IAA/B;AAA+B;;AAI/B;;IAAA,oBAA+B;;IAA/B,eAA+B;;IAA/B;AAA+B;;AAI/B;;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,kBAA0B;;IAA1B,mDAA0B;;IAA1B,oBAA0B;;IAA1B;AAA0B","file":"style.module.css","sourcesContent":[".classList {\n @apply mx-auto w-full;\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-medium text-md;\n}\n\n.description {\n @apply pb-8 font-medium text-sm;\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.black {\n @apply bg-black text-white;\n}"]}
|
|
1
|
+
{"version":3,"sources":["../../../../../src/lib/components/ComponentWrapper/style.module.css"],"names":[],"mappings":"AACI;;IAAA,iBAAqB;;IAArB,kBAAqB;;IAArB;AAAqB;;AAIvB;;IAAA,iBAAW;;IAAX;AAAW;;AAIX;;IAAA;AAAW;;AAIX;;IAAA,sBAA+B;;IAA/B,eAA+B;;IAA/B;AAA+B;;AAI/B;;IAAA,oBAA+B;;IAA/B,eAA+B;;IAA/B;AAA+B;;AAI/B;;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 mx-auto w-full;\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-medium text-md;\n}\n\n.description {\n @apply pb-8 font-medium text-sm;\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}"]}
|
|
@@ -4,6 +4,7 @@ export interface Props {
|
|
|
4
4
|
className?: string;
|
|
5
5
|
image?: string;
|
|
6
6
|
altText?: string;
|
|
7
|
+
title?: string;
|
|
7
8
|
}
|
|
8
|
-
declare const Jumbotron: ({ id, className, image, altText }: Props) => JSX.Element;
|
|
9
|
+
declare const Jumbotron: ({ id, className, image, altText, title }: Props) => JSX.Element;
|
|
9
10
|
export default Jumbotron;
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import classNames from 'classnames';
|
|
3
3
|
import style from './style.module.css';
|
|
4
|
-
const Jumbotron = ({ id, className, image, altText }) => {
|
|
5
|
-
const classList = classNames(className);
|
|
4
|
+
const Jumbotron = ({ id, className, image, altText, title }) => {
|
|
5
|
+
const classList = classNames(style.classes, className);
|
|
6
|
+
const imageClassList = classNames(style.imageClasses);
|
|
6
7
|
return (React.createElement("div", { id: id, className: classList },
|
|
7
|
-
React.createElement("img", { className:
|
|
8
|
+
React.createElement("img", { className: imageClassList, src: image, alt: altText, title: title })));
|
|
8
9
|
};
|
|
9
10
|
export default Jumbotron;
|
|
10
11
|
//# sourceMappingURL=Jumbotron.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Jumbotron.js","sourceRoot":"","sources":["../../../../../src/lib/components/Jumbotron/Jumbotron.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,UAAU,MAAM,YAAY,CAAA;AACnC,OAAO,KAAK,MAAM,oBAAoB,CAAA;
|
|
1
|
+
{"version":3,"file":"Jumbotron.js","sourceRoot":"","sources":["../../../../../src/lib/components/Jumbotron/Jumbotron.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,UAAU,MAAM,YAAY,CAAA;AACnC,OAAO,KAAK,MAAM,oBAAoB,CAAA;AAStC,MAAM,SAAS,GAAG,CAAC,EACjB,EAAE,EACF,SAAS,EACT,KAAK,EACL,OAAO,EACP,KAAK,EACC,EAAe,EAAE;IACvB,MAAM,SAAS,GAAG,UAAU,CAAC,KAAK,CAAC,OAAO,EAAE,SAAS,CAAC,CAAA;IACtD,MAAM,cAAc,GAAG,UAAU,CAAC,KAAK,CAAC,YAAY,CAAC,CAAA;IACrD,OAAO,CACL,6BAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS;QAC/B,6BAAK,SAAS,EAAE,cAAc,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAI,CACtE,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,SAAS,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/lib/components/Jumbotron/style.module.css"],"names":[],"mappings":"AACI;IAAA,WAA0B
|
|
1
|
+
{"version":3,"sources":["../../../../../src/lib/components/Jumbotron/style.module.css"],"names":[],"mappings":"AACI;;IAAA,aAA2B;;IAA3B,gBAA2B;;IAC3B;AAD2B;;AAK3B;;IAAA,WAA0B;;IAA1B;AAA0B","file":"style.module.css","sourcesContent":[".classes {\n @apply h-96 overflow-hidden;\n @apply w-full;\n}\n\n.imageClasses {\n @apply w-full object-cover;\n}"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare type Colours = 'primary' | 'secondary' | 'white' | 'black' | 'gold' | 'facebook' | 'email' | 'instagram' | 'github' | 'interactive-facebook' | 'interactive-email' | 'interactive-instagram' | 'interactive-github';
|
|
1
|
+
export declare type Colours = 'primary' | 'secondary' | 'white' | 'black' | 'grey' | 'gold' | 'facebook' | 'email' | 'instagram' | 'github' | 'interactive-facebook' | 'interactive-email' | 'interactive-instagram' | 'interactive-github';
|
|
2
2
|
export declare const idAndClassName: {
|
|
3
3
|
id: {
|
|
4
4
|
description: string;
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "trepur_components",
|
|
3
3
|
"description": "component lib",
|
|
4
4
|
"author": "trepur_ttenneb",
|
|
5
|
-
"version": "1.0.
|
|
5
|
+
"version": "1.0.19",
|
|
6
6
|
"private": false,
|
|
7
7
|
"keywords": [
|
|
8
8
|
"react",
|
|
@@ -35,11 +35,11 @@
|
|
|
35
35
|
"scripts": {
|
|
36
36
|
"compile:ts": "tsc && tsc-alias -p tsconfig.json",
|
|
37
37
|
"compile:css": "postcss src/**/**/**/*.css --base . --dir dist -m --verbose",
|
|
38
|
-
"
|
|
38
|
+
"compile": "rm -rf dist && npm run compile:ts && npm run compile:css",
|
|
39
39
|
"storybook": "start-storybook -p 6006",
|
|
40
|
-
"build-storybook": "build-storybook -s public",
|
|
41
40
|
"lint": "ts-standard",
|
|
42
41
|
"lint:fix": "ts-standard --fix",
|
|
42
|
+
"build-storybook": "build-storybook -s public",
|
|
43
43
|
"prepare": "husky install"
|
|
44
44
|
},
|
|
45
45
|
"browserslist": {
|