hds-web 1.4.5 → 1.4.7
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/index.css +2 -2
- package/dist/index.es.css +2 -2
- package/dist/index.es.js +6 -6
- package/dist/index.js +3 -3
- package/package.json +1 -1
- package/src/HDS/components/Avatars/hasConAv.js +1 -1
- package/src/HDS/components/Avatars/profileAvatar.js +4 -2
- package/src/HDS/components/Cards/Misc/talkcard2.js +1 -0
- package/src/HDS/components/Cards/TalkDetailCard/talkDetailCard.js +1 -0
- package/src/HDS/components/Carousels/carouselCard.js +77 -42
- package/src/styles/tailwind.css +25 -120
- package/tailwind.config.js +1 -1
package/package.json
CHANGED
@@ -13,7 +13,7 @@ export default function HasConAvatar({ name, designation, size, imageUrl }) {
|
|
13
13
|
</div>
|
14
14
|
<div className='relative pt-6 mb-m:pt-0 pl-6 mb-m:pl-0 mb-m:self-center'>
|
15
15
|
<img
|
16
|
-
className={`inline-block max-[
|
16
|
+
className={`inline-block max-[399px]:bg-blue-300 rounded-r-xl max-[399px]:rounded-full w-[60px] mb-m:min-w-[144px] mb-m:w-[9rem] tb:min-w-[18rem] tb:rounded-3xl border-neutral-0`}
|
17
17
|
src={imageUrl}
|
18
18
|
/>
|
19
19
|
{/* <div className="absolute tb-l:rounded-b-3xl inset-0 group-hover:bg-gradient-to-t group-hover:from-amber-200 group-hover:to-transparent group-hover:opacity-30" ></div> */}
|
@@ -2,6 +2,7 @@ import React from 'react';
|
|
2
2
|
import PropTypes from 'prop-types';
|
3
3
|
import { Icon } from '../common-components/Icon';
|
4
4
|
import { Typography } from '../../foundation/Typography';
|
5
|
+
import { HDSColor } from '../../foundation/ColorPalette';
|
5
6
|
const imgSizes = {
|
6
7
|
'xs': 'h-8 w-8',
|
7
8
|
'sm': 'h-10 w-10',
|
@@ -13,18 +14,19 @@ const AvatarVariant = {
|
|
13
14
|
'square': 'rounded-lg',
|
14
15
|
}
|
15
16
|
|
16
|
-
export default function ProfileAvatar({ name, designation, size, imageUrl, avatarVariant }) {
|
17
|
+
export default function ProfileAvatar({avatarBgColor, name, designation, size, imageUrl, avatarVariant }) {
|
17
18
|
const imgSizeClass = imgSizes[size] || imgSizes.md;
|
18
19
|
const avatarVariantClass = AvatarVariant[avatarVariant] || AvatarVariant.circular;
|
19
20
|
const defaultAvatarIcon = "user03";
|
20
21
|
const hasImageUrl = imageUrl && imageUrl.length > 0;
|
22
|
+
|
21
23
|
return (
|
22
24
|
<div className="group block flex-shrink-0">
|
23
25
|
<div className="flex items-center">
|
24
26
|
<div>
|
25
27
|
{hasImageUrl ? (
|
26
28
|
<img
|
27
|
-
className={`${imgSizeClass} ${avatarVariantClass} rounded inline-block`}
|
29
|
+
className={`${imgSizeClass} ${avatarVariantClass} ${HDSColor(avatarBgColor)} rounded inline-block`}
|
28
30
|
src={imageUrl}
|
29
31
|
/>
|
30
32
|
) : (
|
@@ -1,11 +1,13 @@
|
|
1
1
|
import React from "react";
|
2
|
-
import { useRef } from "react";
|
2
|
+
import { useRef,useState } from "react";
|
3
3
|
import { Icon } from "../common-components/Icon";
|
4
|
+
import { HDSButton } from "../Buttons";
|
4
5
|
export default function CarouselCard(props) {
|
5
6
|
const carouselRef = useRef(null); // Create a ref using useRef
|
6
7
|
const [currentCard, setCurrentCard] = React.useState(0);
|
7
8
|
const [touchStart, setTouchStart] = React.useState(0);
|
8
9
|
const [touchEnd, setTouchEnd] = React.useState(0);
|
10
|
+
const [showAllCards, setShowAllCards] = useState(false);
|
9
11
|
|
10
12
|
const handleTouchStart = e => {
|
11
13
|
setTouchStart(e.targetTouches[0].clientX);
|
@@ -30,63 +32,63 @@ export default function CarouselCard(props) {
|
|
30
32
|
return acc;
|
31
33
|
}, {});
|
32
34
|
|
33
|
-
|
35
|
+
|
34
36
|
|
35
37
|
const totalCards = props.cards.length;
|
36
38
|
|
37
39
|
const nextCard = () => {
|
38
40
|
let scrollByAmount = 1;
|
39
41
|
if (window.innerWidth > 800) {
|
40
|
-
|
42
|
+
scrollByAmount = 2;
|
41
43
|
}
|
42
44
|
if (window.innerWidth > 1140) {
|
43
|
-
|
45
|
+
scrollByAmount = 3;
|
44
46
|
}
|
45
|
-
|
47
|
+
|
46
48
|
if (currentCard < totalCards - scrollByAmount) {
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
49
|
+
setCurrentCard(currentCard + scrollByAmount);
|
50
|
+
carouselRef.current.scrollTo({
|
51
|
+
left: carouselRef.current.scrollLeft + carouselRef.current.children[0].offsetWidth * scrollByAmount,
|
52
|
+
behavior: "smooth",
|
53
|
+
});
|
52
54
|
}
|
53
55
|
else {
|
54
56
|
setCurrentCard(0);
|
55
57
|
carouselRef.current.scrollTo({
|
56
|
-
|
57
|
-
|
58
|
+
left: 0,
|
59
|
+
behavior: "smooth",
|
58
60
|
});
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
61
|
+
}
|
62
|
+
};
|
63
|
+
|
64
|
+
const previousCard = () => {
|
63
65
|
let scrollByAmount = 1;
|
64
66
|
if (window.innerWidth > 800) {
|
65
|
-
|
67
|
+
scrollByAmount = 2;
|
66
68
|
}
|
67
69
|
if (window.innerWidth > 1140) {
|
68
|
-
|
70
|
+
scrollByAmount = 3;
|
69
71
|
}
|
70
|
-
|
72
|
+
|
71
73
|
if (currentCard > 0) {
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
74
|
+
setCurrentCard(currentCard - scrollByAmount);
|
75
|
+
carouselRef.current.scrollTo({
|
76
|
+
left: carouselRef.current.scrollLeft - carouselRef.current.children[0].offsetWidth * scrollByAmount,
|
77
|
+
behavior: "smooth",
|
78
|
+
});
|
77
79
|
} else {
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
80
|
+
const lastCardIndex = totalCards - 1;
|
81
|
+
const scrollLeft = carouselRef.current.scrollWidth - carouselRef.current.children[0].offsetWidth * scrollByAmount;
|
82
|
+
setCurrentCard(lastCardIndex);
|
83
|
+
carouselRef.current.scrollTo({
|
84
|
+
left: scrollLeft,
|
85
|
+
behavior: "smooth",
|
86
|
+
});
|
85
87
|
}
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
88
|
+
};
|
89
|
+
|
90
|
+
const maxVisibleCards = 6;
|
91
|
+
|
90
92
|
const arrowStyle = ' text-2xl z-10 bg-black h-10 ml-6 w-10 rounded-full bg-purple-200 hover:bg-neutral-0 flex items-center justify-center';
|
91
93
|
|
92
94
|
const sliderControl = isLeft => (
|
@@ -112,16 +114,49 @@ export default function CarouselCard(props) {
|
|
112
114
|
return (
|
113
115
|
<div className="">
|
114
116
|
<div className="block tb:hidden">
|
115
|
-
{
|
116
|
-
|
117
|
-
<div className="
|
118
|
-
|
117
|
+
{showAllCards
|
118
|
+
? props.cards.map((item, i) => (
|
119
|
+
<div className="my-5" key={i} ref={refs[i]}>
|
120
|
+
<div className="rounded-3xl overflow-hidden">
|
121
|
+
{React.createElement(props.component, item)}
|
122
|
+
</div>
|
119
123
|
</div>
|
120
|
-
|
124
|
+
))
|
125
|
+
: props.cards.slice(0, maxVisibleCards).map((item, i) => (
|
126
|
+
<div className="my-5" key={i} ref={refs[i]}>
|
127
|
+
<div className="rounded-3xl overflow-hidden">
|
128
|
+
{React.createElement(props.component, item)}
|
129
|
+
</div>
|
130
|
+
</div>
|
131
|
+
))}
|
132
|
+
{props.cards.length > maxVisibleCards && (
|
133
|
+
<div className="flex">
|
134
|
+
<HDSButton
|
135
|
+
label={showAllCards ? "View less" : "View more"}
|
136
|
+
type='secondary'
|
137
|
+
leftIconVariant='none'
|
138
|
+
rightIconVariant='none'
|
139
|
+
state='default'
|
140
|
+
size='sm'
|
141
|
+
rightAnimatedArrow={true}
|
142
|
+
rightAnimatedArrowColor='#1E56E3'
|
143
|
+
animatedHoverStroke='group-hover:stroke-neutral-0'
|
144
|
+
className='flex'
|
145
|
+
btnTextColorClass='text-blue-600'
|
146
|
+
btnBgColorClass=''
|
147
|
+
onClick={() => setShowAllCards(!showAllCards)}
|
148
|
+
/>
|
149
|
+
{/* <button
|
150
|
+
className="text-blue-500 mt-1 cursor-pointer"
|
151
|
+
onClick={() => setShowAllCards(!showAllCards)}
|
152
|
+
>
|
153
|
+
{showAllCards ? "View less" : "View more"}
|
154
|
+
</button> */}
|
121
155
|
</div>
|
122
|
-
)
|
156
|
+
)}
|
123
157
|
</div>
|
124
158
|
|
159
|
+
|
125
160
|
<div className="hidden tb:flex tb:flex-col">
|
126
161
|
<div className="flex pb-12 items-center justify-end ">
|
127
162
|
{/* {slider()} */}
|
@@ -147,7 +182,7 @@ export default function CarouselCard(props) {
|
|
147
182
|
>
|
148
183
|
<div className="">
|
149
184
|
<div className={`snap-x w-full inline-flex select-none overflow-x-hidden scrollbar-hide`}
|
150
|
-
|
185
|
+
ref={carouselRef}
|
151
186
|
>
|
152
187
|
|
153
188
|
{props.cards.map((item, i) => (
|
package/src/styles/tailwind.css
CHANGED
@@ -735,9 +735,9 @@ select {
|
|
735
735
|
}
|
736
736
|
}
|
737
737
|
|
738
|
-
@media (min-width:
|
738
|
+
@media (min-width: 400px) {
|
739
739
|
.container {
|
740
|
-
max-width:
|
740
|
+
max-width: 400px;
|
741
741
|
}
|
742
742
|
}
|
743
743
|
|
@@ -1416,10 +1416,6 @@ select {
|
|
1416
1416
|
max-height: 100%;
|
1417
1417
|
}
|
1418
1418
|
|
1419
|
-
.min-h-\[120px\] {
|
1420
|
-
min-height: 120px;
|
1421
|
-
}
|
1422
|
-
|
1423
1419
|
.w-1\/2 {
|
1424
1420
|
width: 50%;
|
1425
1421
|
}
|
@@ -1524,10 +1520,6 @@ select {
|
|
1524
1520
|
width: 90%;
|
1525
1521
|
}
|
1526
1522
|
|
1527
|
-
.w-\[9rem\] {
|
1528
|
-
width: 9rem;
|
1529
|
-
}
|
1530
|
-
|
1531
1523
|
.w-auto {
|
1532
1524
|
width: auto;
|
1533
1525
|
}
|
@@ -1546,18 +1538,10 @@ select {
|
|
1546
1538
|
width: 100vw;
|
1547
1539
|
}
|
1548
1540
|
|
1549
|
-
.w-16 {
|
1550
|
-
width: 4rem;
|
1551
|
-
}
|
1552
|
-
|
1553
1541
|
.min-w-\[11\.5rem\] {
|
1554
1542
|
min-width: 11.5rem;
|
1555
1543
|
}
|
1556
1544
|
|
1557
|
-
.min-w-\[144px\] {
|
1558
|
-
min-width: 144px;
|
1559
|
-
}
|
1560
|
-
|
1561
1545
|
.min-w-\[18rem\] {
|
1562
1546
|
min-width: 18rem;
|
1563
1547
|
}
|
@@ -2031,18 +2015,6 @@ select {
|
|
2031
2015
|
border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
|
2032
2016
|
}
|
2033
2017
|
|
2034
|
-
.divide-x-2 > :not([hidden]) ~ :not([hidden]) {
|
2035
|
-
--tw-divide-x-reverse: 0;
|
2036
|
-
border-right-width: calc(2px * var(--tw-divide-x-reverse));
|
2037
|
-
border-left-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)));
|
2038
|
-
}
|
2039
|
-
|
2040
|
-
.divide-y-2 > :not([hidden]) ~ :not([hidden]) {
|
2041
|
-
--tw-divide-y-reverse: 0;
|
2042
|
-
border-top-width: calc(2px * calc(1 - var(--tw-divide-y-reverse)));
|
2043
|
-
border-bottom-width: calc(2px * var(--tw-divide-y-reverse));
|
2044
|
-
}
|
2045
|
-
|
2046
2018
|
.divide-blue-600\/10 > :not([hidden]) ~ :not([hidden]) {
|
2047
2019
|
border-color: rgb(30 86 227 / 0.1);
|
2048
2020
|
}
|
@@ -2070,10 +2042,6 @@ select {
|
|
2070
2042
|
align-self: flex-end;
|
2071
2043
|
}
|
2072
2044
|
|
2073
|
-
.self-center {
|
2074
|
-
align-self: center;
|
2075
|
-
}
|
2076
|
-
|
2077
2045
|
.overflow-auto {
|
2078
2046
|
overflow: auto;
|
2079
2047
|
}
|
@@ -2178,6 +2146,11 @@ select {
|
|
2178
2146
|
border-bottom-right-radius: 0.375rem;
|
2179
2147
|
}
|
2180
2148
|
|
2149
|
+
.rounded-r-xl {
|
2150
|
+
border-top-right-radius: 0.75rem;
|
2151
|
+
border-bottom-right-radius: 0.75rem;
|
2152
|
+
}
|
2153
|
+
|
2181
2154
|
.rounded-t-3xl {
|
2182
2155
|
border-top-left-radius: 1.5rem;
|
2183
2156
|
border-top-right-radius: 1.5rem;
|
@@ -2188,16 +2161,6 @@ select {
|
|
2188
2161
|
border-top-right-radius: 0.375rem;
|
2189
2162
|
}
|
2190
2163
|
|
2191
|
-
.rounded-l-xl {
|
2192
|
-
border-top-left-radius: 0.75rem;
|
2193
|
-
border-bottom-left-radius: 0.75rem;
|
2194
|
-
}
|
2195
|
-
|
2196
|
-
.rounded-r-xl {
|
2197
|
-
border-top-right-radius: 0.75rem;
|
2198
|
-
border-bottom-right-radius: 0.75rem;
|
2199
|
-
}
|
2200
|
-
|
2201
2164
|
.rounded-tl-2xl {
|
2202
2165
|
border-top-left-radius: 1rem;
|
2203
2166
|
}
|
@@ -2369,11 +2332,6 @@ select {
|
|
2369
2332
|
border-top-color: rgb(236 237 240 / var(--tw-border-opacity));
|
2370
2333
|
}
|
2371
2334
|
|
2372
|
-
.border-b-neutral-200 {
|
2373
|
-
--tw-border-opacity: 1;
|
2374
|
-
border-bottom-color: rgb(229 231 235 / var(--tw-border-opacity));
|
2375
|
-
}
|
2376
|
-
|
2377
2335
|
.bg-amber-100 {
|
2378
2336
|
--tw-bg-opacity: 1;
|
2379
2337
|
background-color: rgb(255 243 212 / var(--tw-bg-opacity));
|
@@ -5370,11 +5328,6 @@ select {
|
|
5370
5328
|
padding-bottom: 1.625rem;
|
5371
5329
|
}
|
5372
5330
|
|
5373
|
-
.py-\[30px\] {
|
5374
|
-
padding-top: 30px;
|
5375
|
-
padding-bottom: 30px;
|
5376
|
-
}
|
5377
|
-
|
5378
5331
|
.pb-10 {
|
5379
5332
|
padding-bottom: 2.5rem;
|
5380
5333
|
}
|
@@ -5443,10 +5396,6 @@ select {
|
|
5443
5396
|
padding-left: 1.75rem;
|
5444
5397
|
}
|
5445
5398
|
|
5446
|
-
.pl-8 {
|
5447
|
-
padding-left: 2rem;
|
5448
|
-
}
|
5449
|
-
|
5450
5399
|
.pr-10 {
|
5451
5400
|
padding-right: 2.5rem;
|
5452
5401
|
}
|
@@ -5499,6 +5448,10 @@ select {
|
|
5499
5448
|
padding-top: 4rem;
|
5500
5449
|
}
|
5501
5450
|
|
5451
|
+
.pt-3 {
|
5452
|
+
padding-top: 0.75rem;
|
5453
|
+
}
|
5454
|
+
|
5502
5455
|
.pt-4 {
|
5503
5456
|
padding-top: 1rem;
|
5504
5457
|
}
|
@@ -5511,10 +5464,6 @@ select {
|
|
5511
5464
|
padding-top: 2rem;
|
5512
5465
|
}
|
5513
5466
|
|
5514
|
-
.pt-3 {
|
5515
|
-
padding-top: 0.75rem;
|
5516
|
-
}
|
5517
|
-
|
5518
5467
|
.text-left {
|
5519
5468
|
text-align: left;
|
5520
5469
|
}
|
@@ -6496,10 +6445,6 @@ select {
|
|
6496
6445
|
transition-delay: 300ms;
|
6497
6446
|
}
|
6498
6447
|
|
6499
|
-
.delay-500 {
|
6500
|
-
transition-delay: 500ms;
|
6501
|
-
}
|
6502
|
-
|
6503
6448
|
.duration-100 {
|
6504
6449
|
transition-duration: 100ms;
|
6505
6450
|
}
|
@@ -6520,10 +6465,6 @@ select {
|
|
6520
6465
|
transition-duration: 500ms;
|
6521
6466
|
}
|
6522
6467
|
|
6523
|
-
.duration-700 {
|
6524
|
-
transition-duration: 700ms;
|
6525
|
-
}
|
6526
|
-
|
6527
6468
|
.ease-in {
|
6528
6469
|
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
|
6529
6470
|
}
|
@@ -8096,24 +8037,18 @@ select {
|
|
8096
8037
|
}
|
8097
8038
|
}
|
8098
8039
|
|
8099
|
-
@media (max-width:
|
8100
|
-
.max-\[
|
8040
|
+
@media (max-width: 399px) {
|
8041
|
+
.max-\[399px\]\:rounded-full {
|
8101
8042
|
border-radius: 9999px;
|
8102
8043
|
}
|
8103
|
-
}
|
8104
8044
|
|
8105
|
-
|
8106
|
-
.max-\[420px\]\:rounded-full {
|
8107
|
-
border-radius: 9999px;
|
8108
|
-
}
|
8109
|
-
|
8110
|
-
.max-\[420px\]\:bg-blue-400 {
|
8045
|
+
.max-\[399px\]\:bg-blue-300 {
|
8111
8046
|
--tw-bg-opacity: 1;
|
8112
|
-
background-color: rgb(
|
8047
|
+
background-color: rgb(198 214 255 / var(--tw-bg-opacity));
|
8113
8048
|
}
|
8114
8049
|
}
|
8115
8050
|
|
8116
|
-
@media (min-width:
|
8051
|
+
@media (min-width: 400px) {
|
8117
8052
|
.mb-m\:flex {
|
8118
8053
|
display: flex;
|
8119
8054
|
}
|
@@ -8146,30 +8081,6 @@ select {
|
|
8146
8081
|
align-self: center;
|
8147
8082
|
}
|
8148
8083
|
|
8149
|
-
.mb-m\:rounded {
|
8150
|
-
border-radius: 0.25rem;
|
8151
|
-
}
|
8152
|
-
|
8153
|
-
.mb-m\:rounded-l-2xl {
|
8154
|
-
border-top-left-radius: 1rem;
|
8155
|
-
border-bottom-left-radius: 1rem;
|
8156
|
-
}
|
8157
|
-
|
8158
|
-
.mb-m\:rounded-r-2xl {
|
8159
|
-
border-top-right-radius: 1rem;
|
8160
|
-
border-bottom-right-radius: 1rem;
|
8161
|
-
}
|
8162
|
-
|
8163
|
-
.mb-m\:rounded-r-xl {
|
8164
|
-
border-top-right-radius: 0.75rem;
|
8165
|
-
border-bottom-right-radius: 0.75rem;
|
8166
|
-
}
|
8167
|
-
|
8168
|
-
.mb-m\:rounded-l-xl {
|
8169
|
-
border-top-left-radius: 0.75rem;
|
8170
|
-
border-bottom-left-radius: 0.75rem;
|
8171
|
-
}
|
8172
|
-
|
8173
8084
|
.mb-m\:px-5 {
|
8174
8085
|
padding-left: 1.25rem;
|
8175
8086
|
padding-right: 1.25rem;
|
@@ -8189,12 +8100,6 @@ select {
|
|
8189
8100
|
}
|
8190
8101
|
}
|
8191
8102
|
|
8192
|
-
@media (min-width: 450px) {
|
8193
|
-
.min-\[450px\]\:rounded-full {
|
8194
|
-
border-radius: 9999px;
|
8195
|
-
}
|
8196
|
-
}
|
8197
|
-
|
8198
8103
|
@media (min-width: 600px) {
|
8199
8104
|
.tb\:mb-16 {
|
8200
8105
|
margin-bottom: 4rem;
|
@@ -8942,20 +8847,24 @@ select {
|
|
8942
8847
|
padding: 2.5rem;
|
8943
8848
|
}
|
8944
8849
|
|
8945
|
-
.tb-l\:py-12 {
|
8946
|
-
padding-top: 3rem;
|
8947
|
-
padding-bottom: 3rem;
|
8948
|
-
}
|
8949
|
-
|
8950
8850
|
.tb-l\:px-8 {
|
8951
8851
|
padding-left: 2rem;
|
8952
8852
|
padding-right: 2rem;
|
8953
8853
|
}
|
8954
8854
|
|
8855
|
+
.tb-l\:py-12 {
|
8856
|
+
padding-top: 3rem;
|
8857
|
+
padding-bottom: 3rem;
|
8858
|
+
}
|
8859
|
+
|
8955
8860
|
.tb-l\:pb-12 {
|
8956
8861
|
padding-bottom: 3rem;
|
8957
8862
|
}
|
8958
8863
|
|
8864
|
+
.tb-l\:pb-6 {
|
8865
|
+
padding-bottom: 1.5rem;
|
8866
|
+
}
|
8867
|
+
|
8959
8868
|
.tb-l\:pl-8 {
|
8960
8869
|
padding-left: 2rem;
|
8961
8870
|
}
|
@@ -8964,10 +8873,6 @@ select {
|
|
8964
8873
|
padding-top: 3rem;
|
8965
8874
|
}
|
8966
8875
|
|
8967
|
-
.tb-l\:pb-6 {
|
8968
|
-
padding-bottom: 1.5rem;
|
8969
|
-
}
|
8970
|
-
|
8971
8876
|
.tb-l\:text-left {
|
8972
8877
|
text-align: left;
|
8973
8878
|
}
|