trepur_components 1.0.16 → 1.0.18
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/Button/style.module.css +4 -2
- package/dist/src/lib/components/Button/style.module.css.map +1 -1
- package/dist/src/lib/components/Card/Card.d.ts +6 -19
- package/dist/src/lib/components/Card/Card.js +29 -59
- package/dist/src/lib/components/Card/Card.js.map +1 -1
- package/dist/src/lib/components/Card/style.module.css +60 -137
- 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/style.module.css +1 -1
- package/dist/src/lib/components/ImageInfo/ImageInfo.js +1 -1
- package/dist/src/lib/components/Input/style.module.css +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/components/Proficiencies/style.module.css +1 -1
- package/dist/src/lib/components/Profile/style.module.css +1 -1
- package/dist/src/lib/components/Testimonial/style.module.css +1 -1
- package/dist/tailwind.config.js +1 -1
- package/package.json +1 -1
|
@@ -4,6 +4,8 @@
|
|
|
4
4
|
|
|
5
5
|
border-width: 2px;
|
|
6
6
|
|
|
7
|
+
font-size: 20px;
|
|
8
|
+
|
|
7
9
|
transition-duration: 500ms
|
|
8
10
|
}
|
|
9
11
|
|
|
@@ -45,9 +47,9 @@
|
|
|
45
47
|
|
|
46
48
|
.padding {
|
|
47
49
|
|
|
48
|
-
padding-top: 0.
|
|
50
|
+
padding-top: 0.75rem;
|
|
49
51
|
|
|
50
|
-
padding-bottom: 0.
|
|
52
|
+
padding-bottom: 0.75rem
|
|
51
53
|
}
|
|
52
54
|
|
|
53
55
|
.primary {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/lib/components/Button/style.module.css"],"names":[],"mappings":"AACI;;IAAA,+
|
|
1
|
+
{"version":3,"sources":["../../../../../src/lib/components/Button/style.module.css"],"names":[],"mappings":"AACI;;IAAA,+LAA8C;;IAA9C,iBAA8C;;IAA9C,eAA8C;;IAA9C;AAA8C;;AAI9C;;IAAA,kBAAsC;;IAAtC,SAAsC;;IAAtC,QAAsC;;IAAtC;AAAsC;;AAItC;;IAAA,qBAAgB;;IAAhB,sBAAgB;;IAAhB,oBAAgB;;IAAhB;AAAgB;;AAIhB;;IAAA,qBAAW;;IAAX;AAAW;;AAIX;;IAAA,kBAAW;;IAAX;AAAW;;AAIX;;IAAA,oBAAW;;IAAX;AAAW;;AAIX;;IAAA,sBAAyC;;IAAzC,yDAAyC;;IAAzC,kBAAyC;;IAAzC,sDAAyC;;IAAzC,oBAAyC;;IAAzC;AAAyC;;AAIzC;;IAAA,sBAA2C;;IAA3C,sDAA2C;;IAA3C,kBAA2C;;IAA3C,yDAA2C;;IAA3C,oBAA2C;;IAA3C;AAA2C;;AAI3C;;IAAA,sBAA2C;;IAA3C,sDAA2C;;IAA3C,kBAA2C;;IAA3C,yDAA2C;;IAA3C,oBAA2C;;IAA3C;AAA2C;;AAI3C;;IAAA,sBAA2C;;IAA3C,sDAA2C;;IAA3C,kBAA2C;;IAA3C,sDAA2C;;IAA3C,oBAA2C;;IAA3C;AAA2C;;AAI3C;;IAAA;AAAiB;;AAIjB;;IAAA;AAAiB;;AAIjB;;IAAA;AAAmB","file":"style.module.css","sourcesContent":[".classList {\n @apply border-2 duration-500 transform text-sm;\n}\n\n.loading {\n @apply absolute left-2/4 top-1/4 -ml-2;\n}\n\n.social {\n @apply px-1 py-1;\n}\n\n.icon {\n @apply px-3;\n}\n\n.default {\n @apply px-8;\n}\n\n.padding {\n @apply py-3;\n}\n\n.primary {\n @apply bg-primary text-white border-white;\n}\n\n.primaryNotDisabled:hover {\n @apply bg-white text-primary border-primary;\n}\n\n.secondary {\n @apply bg-white text-primary border-primary;\n}\n\n.secondaryNotDisabled:hover {\n @apply bg-primary text-white border-primary;\n}\n\n.disabled {\n @apply opacity-50;\n}\n\n.rounded {\n @apply rounded-lg;\n}\n\n.notRounded {\n @apply rounded-none;\n}"]}
|
|
@@ -1,31 +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
|
-
titleLeft?: boolean;
|
|
15
|
-
titleRight?: boolean;
|
|
16
|
-
titleBold?: boolean;
|
|
17
|
-
imageClass?: string;
|
|
18
|
-
subTitleClass?: string;
|
|
19
|
-
extraTextClass?: string;
|
|
20
|
-
descriptionClass?: string;
|
|
21
|
-
altText?: string;
|
|
22
|
-
rounded?: boolean;
|
|
23
|
-
bordered?: boolean;
|
|
24
|
-
videoProps?: videoProps;
|
|
25
|
-
onHover?: boolean;
|
|
26
|
-
iconButtonProps?: buttonProps;
|
|
27
|
-
cardButtonProps?: buttonProps;
|
|
28
|
-
button2Props?: buttonProps;
|
|
13
|
+
href?: string;
|
|
14
|
+
target?: string;
|
|
15
|
+
buttonProps?: buttonProps;
|
|
29
16
|
}
|
|
30
17
|
declare const Card: React.FC<Props>;
|
|
31
18
|
export default Card;
|
|
@@ -1,66 +1,36 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from 'react';
|
|
2
2
|
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,
|
|
7
|
-
const
|
|
8
|
-
const
|
|
9
|
-
const
|
|
10
|
-
const
|
|
11
|
-
const
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
}, style.imageWrapper);
|
|
35
|
-
const toggleHover = (isHovering) => {
|
|
36
|
-
onHover && setShowHoverButtons(!!isHovering);
|
|
37
|
-
};
|
|
38
|
-
return (React.createElement("div", { id: id, className: classList, onMouseEnter: () => toggleHover(true), onMouseLeave: () => toggleHover(false) },
|
|
39
|
-
React.createElement("div", { className: classNames(style.cardContent, 'card-content') },
|
|
40
|
-
(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
|
|
41
|
-
? (React.createElement("div", { className: imageWrapperClassList },
|
|
42
|
-
React.createElement(Video, Object.assign({}, videoProps))))
|
|
43
|
-
: (image !== undefined &&
|
|
44
|
-
React.createElement("div", { className: imageWrapperClassList },
|
|
45
|
-
React.createElement("img", { className: imageClassList, src: image, alt: altText }))),
|
|
46
|
-
!showHoverButtons
|
|
47
|
-
? (React.createElement(React.Fragment, null,
|
|
48
|
-
React.createElement("div", { className: imageBelowTitle ? style.orderOne : style.orderThree }, title !== undefined &&
|
|
49
|
-
React.createElement("div", { className: titleWrapperClass },
|
|
50
|
-
React.createElement("h3", { className: cardTitleClasses }, title))),
|
|
51
|
-
React.createElement("div", { className: contentWrapperClass },
|
|
52
|
-
subTitle !== undefined &&
|
|
53
|
-
React.createElement("h4", { className: cardSubTitleClassList }, subTitle),
|
|
54
|
-
description !== undefined &&
|
|
55
|
-
React.createElement("p", { className: cardDescriptionClassList }, description),
|
|
56
|
-
extraText !== undefined &&
|
|
57
|
-
React.createElement("p", { className: cardExtraTextClassList }, extraText))))
|
|
58
|
-
: (React.createElement("div", { className: style.buttonWrapper },
|
|
59
|
-
React.createElement(Button, Object.assign({}, iconButtonProps), iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children),
|
|
60
|
-
React.createElement(Button, Object.assign({}, button2Props), button2Props === null || button2Props === void 0 ? void 0 : button2Props.children)))),
|
|
61
|
-
cardButtonProps !== undefined &&
|
|
62
|
-
React.createElement("div", { className: style.buttonClassList },
|
|
63
|
-
React.createElement(Button, Object.assign({}, cardButtonProps), cardButtonProps.children))));
|
|
6
|
+
const Card = ({ id, className, imageProps, videoProps, title, subTitle, description, href, target, buttonProps }) => {
|
|
7
|
+
const cardTitleClasses = classNames(style.title);
|
|
8
|
+
const cardSubTitleClassList = classNames(style.subtitle);
|
|
9
|
+
const cardDescriptionClassList = classNames(style.description);
|
|
10
|
+
const classList = classNames(className, style.classList);
|
|
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),
|
|
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
|
|
20
|
+
? (React.createElement(Video, Object.assign({}, videoProps)))
|
|
21
|
+
: (imageProps !== undefined &&
|
|
22
|
+
React.createElement("img", Object.assign({ className: imageClassList }, imageProps)))),
|
|
23
|
+
React.createElement("div", { className: style.contentWrapper },
|
|
24
|
+
React.createElement("div", { className: style.movingContent },
|
|
25
|
+
title !== undefined &&
|
|
26
|
+
React.createElement("h3", { className: cardTitleClasses }, title),
|
|
27
|
+
subTitle !== undefined &&
|
|
28
|
+
React.createElement("h4", { className: cardSubTitleClassList }, subTitle)),
|
|
29
|
+
React.createElement("div", { className: style.staticContent },
|
|
30
|
+
description !== undefined &&
|
|
31
|
+
React.createElement("p", { className: cardDescriptionClassList }, description),
|
|
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)))));
|
|
64
34
|
};
|
|
65
35
|
export default Card;
|
|
66
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,KAAK,
|
|
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,168 +1,91 @@
|
|
|
1
1
|
.classList {
|
|
2
|
-
|
|
3
2
|
display: flex;
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
border-radius: 0.5rem;
|
|
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
|
|
6
9
|
}
|
|
7
10
|
|
|
8
|
-
.
|
|
9
|
-
|
|
10
|
-
border-width: 1px;
|
|
11
|
-
|
|
12
|
-
border-color: rgb(44 55 59 / var(--tw-border-opacity));
|
|
13
|
-
|
|
14
|
-
--tw-border-opacity: 1
|
|
11
|
+
a .classList:hover {
|
|
12
|
+
cursor: pointer
|
|
15
13
|
}
|
|
16
14
|
|
|
17
|
-
.
|
|
18
|
-
|
|
19
|
-
|
|
15
|
+
.classList:hover .movingContent {
|
|
16
|
+
margin-top: -2rem;
|
|
17
|
+
transition-property: all;
|
|
18
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
19
|
+
transition-duration: 300ms
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
-
.
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
.textRight {
|
|
28
|
-
|
|
29
|
-
text-align: right
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
.textCenter {
|
|
33
|
-
|
|
34
|
-
text-align: center
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
.cardRounded {
|
|
38
|
-
|
|
39
|
-
border-radius: 0.5rem
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.imageRounded {
|
|
43
|
-
|
|
44
|
-
border-top-left-radius: 0.5rem;
|
|
45
|
-
|
|
46
|
-
border-top-right-radius: 0.5rem
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
.imageWrapper {
|
|
50
|
-
|
|
51
|
-
height: 16rem;
|
|
52
|
-
|
|
53
|
-
overflow: hidden;
|
|
54
|
-
|
|
55
|
-
object-fit: cover
|
|
22
|
+
.classList:hover .staticContent {
|
|
23
|
+
margin-top: 2rem;
|
|
24
|
+
transition-property: all;
|
|
25
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
26
|
+
transition-duration: 300ms
|
|
56
27
|
}
|
|
57
28
|
|
|
58
29
|
.imageClassList {
|
|
59
|
-
|
|
60
30
|
height: 100%;
|
|
61
|
-
|
|
62
31
|
width: 100%;
|
|
63
|
-
|
|
64
|
-
|
|
32
|
+
height: 16rem;
|
|
33
|
+
overflow: hidden;
|
|
34
|
+
object-fit: cover;
|
|
35
|
+
border-top-left-radius: 0.5rem;
|
|
36
|
+
border-top-right-radius: 0.5rem
|
|
65
37
|
}
|
|
66
38
|
|
|
67
|
-
.
|
|
68
|
-
|
|
69
|
-
|
|
39
|
+
.contentWrapper {
|
|
40
|
+
height: 100%
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.movingContent {
|
|
44
|
+
--tw-bg-opacity: 1;
|
|
45
|
+
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
|
46
|
+
margin-top: 0px;
|
|
47
|
+
padding-left: 1.5rem;
|
|
48
|
+
padding-right: 1.5rem;
|
|
49
|
+
padding-top: 1.5rem;
|
|
50
|
+
border-bottom-right-radius: 0.5rem;
|
|
51
|
+
border-bottom-left-radius: 0.5rem;
|
|
52
|
+
transition-property: all;
|
|
53
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
54
|
+
transition-duration: 300ms
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.staticContent {
|
|
58
|
+
margin-top: 0px;
|
|
59
|
+
padding-left: 1.5rem;
|
|
60
|
+
padding-right: 1.5rem;
|
|
61
|
+
padding-top: 1.5rem;
|
|
62
|
+
transition-property: all;
|
|
63
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
64
|
+
transition-duration: 300ms;
|
|
65
|
+
display: flex;
|
|
66
|
+
flex-direction: column;
|
|
67
|
+
justify-content: space-between;
|
|
68
|
+
height: calc(100% - 78px)
|
|
70
69
|
}
|
|
71
70
|
|
|
72
71
|
.title {
|
|
73
|
-
|
|
74
|
-
font-size: 24px;
|
|
75
|
-
|
|
72
|
+
font-size: 20px;
|
|
76
73
|
font-weight: 500
|
|
77
74
|
}
|
|
78
75
|
|
|
79
|
-
.
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
padding-left: 0.75rem;
|
|
84
|
-
|
|
85
|
-
padding-right: 0.75rem
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
.cardContent {
|
|
89
|
-
|
|
90
|
-
display: flex;
|
|
91
|
-
|
|
92
|
-
flex: 1 1 0%;
|
|
93
|
-
|
|
94
|
-
flex-direction: column
|
|
76
|
+
.subtitle {
|
|
77
|
+
font-size: 16px;
|
|
78
|
+
font-weight: 400
|
|
95
79
|
}
|
|
96
80
|
|
|
97
81
|
.description {
|
|
98
|
-
|
|
82
|
+
padding-bottom: 1.5rem;
|
|
99
83
|
font-size: 16px;
|
|
100
|
-
|
|
101
|
-
font-weight: 200
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
.subtitle {
|
|
105
|
-
|
|
106
|
-
font-size: 24px;
|
|
107
|
-
|
|
108
84
|
font-weight: 300
|
|
109
85
|
}
|
|
110
86
|
|
|
111
|
-
.extraText {
|
|
112
|
-
|
|
113
|
-
height: 100%;
|
|
114
|
-
|
|
115
|
-
width: 100%;
|
|
116
|
-
|
|
117
|
-
object-fit: cover;
|
|
118
|
-
|
|
119
|
-
font-size: 16px;
|
|
120
|
-
|
|
121
|
-
font-weight: 200
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
.noCta {
|
|
125
|
-
|
|
126
|
-
padding-bottom: 1rem
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
.buttonWrapper {
|
|
130
|
-
|
|
131
|
-
order: 9999;
|
|
132
|
-
|
|
133
|
-
display: flex;
|
|
134
|
-
|
|
135
|
-
height: 6rem;
|
|
136
|
-
|
|
137
|
-
padding: 0.5rem
|
|
138
|
-
}
|
|
139
|
-
|
|
140
87
|
.buttonClassList {
|
|
141
|
-
|
|
142
|
-
width: 100
|
|
143
|
-
|
|
144
|
-
padding: 0.75rem
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
.orderOne {
|
|
148
|
-
|
|
149
|
-
order: 1
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
.orderTwo {
|
|
153
|
-
|
|
154
|
-
order: 2
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
.orderThree {
|
|
158
|
-
|
|
159
|
-
order: 3
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
.orderFirst {
|
|
163
|
-
|
|
164
|
-
order: -9999
|
|
88
|
+
margin-bottom: 1.5rem;
|
|
89
|
+
width: 100%
|
|
165
90
|
}
|
|
166
|
-
|
|
167
|
-
|
|
168
91
|
/*# sourceMappingURL=style.module.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/lib/components/Card/style.module.css"],"names":[],"mappings":"AACI
|
|
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}"]}
|
|
@@ -14,7 +14,7 @@ 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);
|
|
19
19
|
const imageWrapperClasses = classNames({
|
|
20
20
|
[style.smallImageWrapper]: isSm
|
|
@@ -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}"]}
|
package/dist/tailwind.config.js
CHANGED