trepur_components 1.0.46 → 1.0.47
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.
|
@@ -1,23 +1,32 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import classNames from 'classnames';
|
|
3
|
+
import style from './style.module.css';
|
|
3
4
|
import Container from '../Container/Container';
|
|
4
5
|
import ComponentWrapper from '../ComponentWrapper/ComponentWrapper';
|
|
5
6
|
import Icon from '../Icon/Icon';
|
|
6
|
-
const Showcase = ({ id, className, title, subTitle, description, bgColour,
|
|
7
|
+
const Showcase = ({ id, className, title, subTitle, description, bgColour, size = 'large', theme = 'theme-rupertbennett', withArrow = false, avatar }) => {
|
|
7
8
|
const classList = classNames(className);
|
|
8
|
-
const containerSize =
|
|
9
|
-
|
|
9
|
+
const containerSize = classNames({
|
|
10
|
+
[style.smallContainer]: size === 'small',
|
|
11
|
+
[style.mediumContainer]: size === 'medium',
|
|
12
|
+
[style.largeContainer]: size === 'large'
|
|
13
|
+
}, style.container);
|
|
14
|
+
const imagePadding = classNames({
|
|
15
|
+
[style.smallPadding]: size === 'small',
|
|
16
|
+
[style.mediumPadding]: size === 'medium',
|
|
17
|
+
[style.largePadding]: size === 'large'
|
|
18
|
+
}, style.avatarWrapper);
|
|
10
19
|
return (React.createElement(ComponentWrapper, { id: id, className: classList, bgColour: bgColour, theme: theme },
|
|
11
|
-
React.createElement(Container, { className:
|
|
12
|
-
React.createElement("div", { className:
|
|
13
|
-
React.createElement("h2", { className:
|
|
14
|
-
React.createElement("h2", { className:
|
|
15
|
-
React.createElement("p", { className:
|
|
16
|
-
React.createElement("div", { className:
|
|
17
|
-
React.createElement("img", { className:
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
20
|
+
React.createElement(Container, { className: containerSize, theme: theme },
|
|
21
|
+
React.createElement("div", { className: style.textWrapper },
|
|
22
|
+
React.createElement("h2", { className: style.title }, title),
|
|
23
|
+
React.createElement("h2", { className: style.subTitle }, subTitle),
|
|
24
|
+
React.createElement("p", { className: style.description }, description)),
|
|
25
|
+
React.createElement("div", { className: imagePadding },
|
|
26
|
+
React.createElement("img", { className: style.avatar, src: avatar }))),
|
|
27
|
+
withArrow &&
|
|
28
|
+
React.createElement("div", { className: style.iconWrapper },
|
|
29
|
+
React.createElement(Icon, { theme: theme, className: style.icon, size: 2, rounded: true, type: 'chevron-down' }))));
|
|
21
30
|
};
|
|
22
31
|
export default Showcase;
|
|
23
32
|
//# sourceMappingURL=Showcase.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Showcase.js","sourceRoot":"","sources":["../../../../../src/lib/components/Showcase/Showcase.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Showcase.js","sourceRoot":"","sources":["../../../../../src/lib/components/Showcase/Showcase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,UAAU,MAAM,YAAY,CAAA;AACnC,OAAO,KAAK,MAAM,oBAAoB,CAAA;AAEtC,OAAO,SAAS,MAAM,iCAAiC,CAAA;AACvD,OAAO,gBAAgB,MAAM,+CAA+C,CAAA;AAC5E,OAAO,IAAI,MAAM,uBAAuB,CAAA;AAgBxC,MAAM,QAAQ,GAAoB,CAAC,EACjC,EAAE,EACF,SAAS,EACT,KAAK,EACL,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,IAAI,GAAG,OAAO,EACd,KAAK,GAAG,qBAAqB,EAC7B,SAAS,GAAG,KAAK,EACjB,MAAM,EACA,EAAe,EAAE;IACvB,MAAM,SAAS,GAAG,UAAU,CAAC,SAAS,CAAC,CAAA;IAEvC,MAAM,aAAa,GAAG,UAAU,CAAC;QAC/B,CAAC,KAAK,CAAC,cAAc,CAAC,EAAE,IAAI,KAAK,OAAO;QACxC,CAAC,KAAK,CAAC,eAAe,CAAC,EAAE,IAAI,KAAK,QAAQ;QAC1C,CAAC,KAAK,CAAC,cAAc,CAAC,EAAE,IAAI,KAAK,OAAO;KACzC,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;IAEnB,MAAM,YAAY,GAAG,UAAU,CAAC;QAC9B,CAAC,KAAK,CAAC,YAAY,CAAC,EAAE,IAAI,KAAK,OAAO;QACtC,CAAC,KAAK,CAAC,aAAa,CAAC,EAAE,IAAI,KAAK,QAAQ;QACxC,CAAC,KAAK,CAAC,YAAY,CAAC,EAAE,IAAI,KAAK,OAAO;KACvC,EAAE,KAAK,CAAC,aAAa,CAAC,CAAA;IAEvB,OAAO,CACL,oBAAC,gBAAgB,IACf,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK;QAEZ,oBAAC,SAAS,IAAC,SAAS,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK;YAC/C,6BAAK,SAAS,EAAE,KAAK,CAAC,WAAW;gBAC/B,4BAAI,SAAS,EAAE,KAAK,CAAC,KAAK,IAAG,KAAK,CAAM;gBACxC,4BAAI,SAAS,EAAE,KAAK,CAAC,QAAQ,IAAG,QAAQ,CAAM;gBAC9C,2BAAG,SAAS,EAAE,KAAK,CAAC,WAAW,IAAG,WAAW,CAAK,CAC9C;YACN,6BAAK,SAAS,EAAE,YAAY;gBAC1B,6BAAK,SAAS,EAAE,KAAK,CAAC,MAAM,EAAE,GAAG,EAAE,MAAM,GAAI,CACzC,CACI;QACX,SAAS;YACR,6BAAK,SAAS,EAAE,KAAK,CAAC,WAAW;gBAC/B,oBAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,QAAC,IAAI,EAAC,cAAc,GAAG,CAC9E,CACS,CACpB,CAAA;AACH,CAAC,CAAA;AAED,eAAe,QAAQ,CAAA"}
|
|
@@ -1,138 +1,202 @@
|
|
|
1
|
-
.
|
|
1
|
+
.container {
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
flex-wrap: wrap;
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
text-align: justify
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
@media (min-width: 768px) {
|
|
9
|
+
|
|
10
|
+
.container {
|
|
9
11
|
|
|
10
|
-
|
|
12
|
+
display: flex
|
|
13
|
+
}
|
|
11
14
|
}
|
|
12
15
|
|
|
13
|
-
.
|
|
16
|
+
.avatarWrapper {
|
|
14
17
|
|
|
15
|
-
|
|
18
|
+
width: 50%;
|
|
16
19
|
|
|
17
|
-
|
|
20
|
+
padding-left: 3rem;
|
|
21
|
+
|
|
22
|
+
padding-right: 3rem
|
|
18
23
|
}
|
|
19
24
|
|
|
20
|
-
.
|
|
25
|
+
.textWrapper {
|
|
26
|
+
|
|
27
|
+
margin: auto;
|
|
21
28
|
|
|
22
|
-
|
|
29
|
+
width: 100%
|
|
23
30
|
}
|
|
24
31
|
|
|
25
|
-
|
|
32
|
+
@media (min-width: 768px) {
|
|
33
|
+
|
|
34
|
+
.textWrapper {
|
|
26
35
|
|
|
27
|
-
|
|
36
|
+
width: 66.666667%
|
|
37
|
+
}
|
|
28
38
|
}
|
|
29
39
|
|
|
30
|
-
|
|
40
|
+
@media (min-width: 1024px) {
|
|
31
41
|
|
|
32
|
-
|
|
42
|
+
.textWrapper {
|
|
43
|
+
|
|
44
|
+
width: 50%;
|
|
45
|
+
|
|
46
|
+
padding-left: 9rem
|
|
47
|
+
}
|
|
33
48
|
}
|
|
34
49
|
|
|
35
|
-
.
|
|
50
|
+
.textWrapper {
|
|
36
51
|
|
|
37
|
-
|
|
52
|
+
order: 1
|
|
53
|
+
}
|
|
38
54
|
|
|
39
|
-
|
|
55
|
+
@media (min-width: 768px) {
|
|
56
|
+
|
|
57
|
+
.textWrapper {
|
|
58
|
+
|
|
59
|
+
order: 0
|
|
60
|
+
}
|
|
40
61
|
}
|
|
41
62
|
|
|
42
|
-
.
|
|
63
|
+
.smallContainer {
|
|
43
64
|
|
|
44
|
-
|
|
65
|
+
height: 14rem
|
|
45
66
|
}
|
|
46
67
|
|
|
47
|
-
.
|
|
68
|
+
.mediumContainer {
|
|
48
69
|
|
|
49
|
-
|
|
70
|
+
height: 24rem
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.largeContainer {
|
|
50
74
|
|
|
51
|
-
|
|
75
|
+
height: calc(100vh - 176px)
|
|
52
76
|
}
|
|
53
77
|
|
|
54
|
-
.
|
|
78
|
+
.smallPadding {
|
|
79
|
+
|
|
80
|
+
padding-top: 0px;
|
|
55
81
|
|
|
56
|
-
|
|
82
|
+
padding-bottom: 0px
|
|
57
83
|
}
|
|
58
84
|
|
|
59
|
-
.
|
|
85
|
+
.mediumPadding {
|
|
60
86
|
|
|
61
|
-
|
|
87
|
+
padding-top: 2rem;
|
|
88
|
+
|
|
89
|
+
padding-bottom: 2rem
|
|
62
90
|
}
|
|
63
91
|
|
|
64
|
-
.
|
|
92
|
+
.largePadding {
|
|
93
|
+
|
|
94
|
+
margin-top: 0px;
|
|
65
95
|
|
|
66
|
-
|
|
96
|
+
margin-bottom: 0px;
|
|
67
97
|
|
|
68
|
-
|
|
98
|
+
padding-top: 0px;
|
|
69
99
|
|
|
70
|
-
|
|
100
|
+
padding-bottom: 0px
|
|
71
101
|
}
|
|
72
102
|
|
|
73
|
-
|
|
103
|
+
@media (min-width: 768px) {
|
|
74
104
|
|
|
75
|
-
|
|
105
|
+
.largePadding {
|
|
76
106
|
|
|
77
|
-
|
|
107
|
+
padding-top: 8rem;
|
|
78
108
|
|
|
79
|
-
|
|
109
|
+
padding-bottom: 8rem
|
|
110
|
+
}
|
|
111
|
+
}
|
|
80
112
|
|
|
81
|
-
|
|
113
|
+
.title {
|
|
114
|
+
|
|
115
|
+
font-size: 48px;
|
|
116
|
+
|
|
117
|
+
font-weight: 700;
|
|
118
|
+
|
|
119
|
+
line-height: 1.25;
|
|
120
|
+
|
|
121
|
+
color: var(--color-primary)
|
|
82
122
|
}
|
|
83
123
|
|
|
84
|
-
.
|
|
124
|
+
.subTitle {
|
|
85
125
|
|
|
86
|
-
|
|
126
|
+
font-size: 48px;
|
|
87
127
|
|
|
88
|
-
|
|
128
|
+
font-weight: 700;
|
|
129
|
+
|
|
130
|
+
line-height: 1.25;
|
|
131
|
+
|
|
132
|
+
color: var(--color-black)
|
|
89
133
|
}
|
|
90
134
|
|
|
91
|
-
.
|
|
135
|
+
.description {
|
|
136
|
+
|
|
137
|
+
padding-top: 1rem;
|
|
138
|
+
|
|
139
|
+
font-size: 22px;
|
|
140
|
+
|
|
141
|
+
color: var(--color-black)
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.avatarWrapper {
|
|
92
145
|
|
|
93
146
|
display: flex;
|
|
94
147
|
|
|
95
|
-
|
|
148
|
+
height: 100%;
|
|
96
149
|
|
|
97
|
-
|
|
150
|
+
width: 100%
|
|
98
151
|
}
|
|
99
152
|
|
|
100
153
|
@media (min-width: 768px) {
|
|
101
154
|
|
|
102
|
-
.
|
|
155
|
+
.avatarWrapper {
|
|
103
156
|
|
|
104
|
-
|
|
157
|
+
width: 33.333333%
|
|
105
158
|
}
|
|
106
159
|
}
|
|
107
160
|
|
|
108
|
-
|
|
161
|
+
@media (min-width: 1024px) {
|
|
109
162
|
|
|
110
|
-
|
|
163
|
+
.avatarWrapper {
|
|
111
164
|
|
|
112
|
-
|
|
165
|
+
width: 50%
|
|
166
|
+
}
|
|
113
167
|
}
|
|
114
168
|
|
|
115
|
-
|
|
169
|
+
.avatarWrapper {
|
|
116
170
|
|
|
117
|
-
|
|
171
|
+
order: 2
|
|
172
|
+
}
|
|
118
173
|
|
|
119
|
-
|
|
174
|
+
@media (min-width: 768px) {
|
|
175
|
+
|
|
176
|
+
.avatarWrapper {
|
|
120
177
|
|
|
121
|
-
|
|
178
|
+
order: 0
|
|
122
179
|
}
|
|
180
|
+
}
|
|
123
181
|
|
|
124
|
-
|
|
182
|
+
.avatar {
|
|
125
183
|
|
|
126
|
-
|
|
184
|
+
margin: auto;
|
|
127
185
|
|
|
128
|
-
|
|
129
|
-
|
|
186
|
+
height: 24rem;
|
|
187
|
+
|
|
188
|
+
overflow: hidden
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.iconWrapper {
|
|
192
|
+
|
|
193
|
+
width: 100%
|
|
130
194
|
}
|
|
131
195
|
|
|
132
|
-
.
|
|
196
|
+
.icon {
|
|
133
197
|
|
|
134
|
-
|
|
198
|
+
margin-left: auto;
|
|
135
199
|
|
|
136
|
-
|
|
200
|
+
margin-right: auto
|
|
137
201
|
}
|
|
138
202
|
/*# sourceMappingURL=style.module.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/lib/components/Showcase/style.module.css"],"names":[],"mappings":"AACI;;IAAA,
|
|
1
|
+
{"version":3,"sources":["../../../../../src/lib/components/Showcase/style.module.css"],"names":[],"mappings":"AACI;;IAAA,eAAqC;;IAArC;AAAqC;;AAArC;;IAAA;;QAAA;IAAqC;AAAA;;AAIrC;;IAAA,UAAkB;;IAAlB,kBAAkB;;IAAlB;AAAkB;;AAIlB;;IAAA,YAA+C;;IAA/C;AAA+C;;AAA/C;;IAAA;;QAAA;IAA+C;AAAA;;AAA/C;;IAAA;;QAAA,UAA+C;;QAA/C;IAA+C;AAAA;;AAC/C;;IAAA;AAA4B;;AAA5B;;IAAA;;QAAA;IAA4B;AAAA;;AAI5B;;IAAA;AAAW;;AAIX;;IAAA;AAAW;;AAIX;;IAAA;AAA4B;;AAI5B;;IAAA,gBAAW;;IAAX;AAAW;;AAIX;;IAAA,iBAAW;;IAAX;AAAW;;AAIX;;IAAA,eAAyB;;IAAzB,kBAAyB;;IAAzB,gBAAyB;;IAAzB;AAAyB;;AAAzB;;IAAA;;QAAA,iBAAyB;;QAAzB;IAAyB;AAAA;;AAIzB;;IAAA,eAAoD;;IAApD,gBAAoD;;IAApD,iBAAoD;;IAApD;AAAoD;;AAIpD;;IAAA,eAAkD;;IAAlD,gBAAkD;;IAAlD,iBAAkD;;IAAlD;AAAkD;;AAIlD;;IAAA,iBAA8B;;IAA9B,eAA8B;;IAA9B;AAA8B;;AAI9B;;IAAA,aAA2C;;IAA3C,YAA2C;;IAA3C;AAA2C;;AAA3C;;IAAA;;QAAA;IAA2C;AAAA;;AAA3C;;IAAA;;QAAA;IAA2C;AAAA;;AAC3C;;IAAA;AAA4B;;AAA5B;;IAAA;;QAAA;IAA4B;AAAA;;AAI5B;;IAAA,YAAkC;;IAAlC,aAAkC;;IAAlC;AAAkC;;AAIlC;;IAAA;AAAa;;AAIb;;IAAA,iBAAc;;IAAd;AAAc","file":"style.module.css","sourcesContent":[".container {\n @apply flex-wrap md:flex text-justify;\n}\n\n.avatarWrapper {\n @apply w-1/2 px-12;\n}\n\n.textWrapper {\n @apply w-full md:w-2/3 lg:w-1/2 m-auto lg:pl-36;\n @apply order-1 md:order-none;\n}\n\n.smallContainer {\n @apply h-56;\n}\n\n.mediumContainer {\n @apply h-96;\n}\n\n.largeContainer {\n @apply h-[calc(100vh-176px)];\n}\n\n.smallPadding {\n @apply py-0;\n}\n\n.mediumPadding {\n @apply py-8;\n}\n\n.largePadding {\n @apply py-0 my-0 md:py-32;\n}\n\n.title {\n @apply font-bold text-xxl text-primary leading-tight;\n}\n\n.subTitle {\n @apply font-bold text-xxl text-black leading-tight;\n}\n\n.description {\n @apply text-md text-black pt-4;\n}\n\n.avatarWrapper {\n @apply w-full md:w-1/3 lg:w-1/2 h-full flex;\n @apply order-2 md:order-none;\n}\n\n.avatar {\n @apply m-auto overflow-hidden h-96;\n}\n\n.iconWrapper {\n @apply w-full;\n}\n\n.icon {\n @apply mx-auto;\n}"]}
|