hds-web 1.4.6 → 1.4.8
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/profileAvatar.js +1 -1
- package/src/HDS/components/BadgesCaption/badges.js +1 -1
- package/src/HDS/components/Cards/Misc/talkcard2.js +21 -20
- package/src/HDS/components/Cards/TalkDetailCard/talkDetailCard.js +16 -14
- package/src/HDS/components/Carousels/carouselCard.js +77 -42
- package/src/HDS/components/Tables/tableB.js +2 -2
- package/src/styles/tailwind.css +33 -11
package/package.json
CHANGED
|
@@ -58,7 +58,7 @@ export default function Badge({
|
|
|
58
58
|
<Icon height={'h-4 w-4 stroke-[1.5px]'} variant={leftIconVariant} strokeColor={leftIconColor} strokeClass={HDSColor(leftIconColorClass)} />
|
|
59
59
|
</div>
|
|
60
60
|
)}
|
|
61
|
-
<Typography textStyle='body3c
|
|
61
|
+
<Typography textStyle='body3c'>{children}</Typography>
|
|
62
62
|
|
|
63
63
|
{rightIconVariant && rightIconVariant !== 'none' && (
|
|
64
64
|
<div className='ml-1'>
|
|
@@ -49,7 +49,7 @@ export default function TalkCard2(props) {
|
|
|
49
49
|
</Typography>
|
|
50
50
|
}
|
|
51
51
|
</div>
|
|
52
|
-
<div className="pb-6
|
|
52
|
+
<div className="flex pb-6 tb-l:pb-0">
|
|
53
53
|
{props.readUrl &&
|
|
54
54
|
props.para && (
|
|
55
55
|
<a href={props.readUrl}>
|
|
@@ -72,10 +72,10 @@ export default function TalkCard2(props) {
|
|
|
72
72
|
</div>
|
|
73
73
|
</div>
|
|
74
74
|
|
|
75
|
-
<div className={`${CardClass} divide-y divide-neutral-
|
|
75
|
+
<div className={`${CardClass} tb-l:divide-y-2 divide-neutral-200 flex tb-l:w-full flex-col pt-0`} >
|
|
76
76
|
{
|
|
77
77
|
props.speakerSet && (
|
|
78
|
-
<div className="px-6
|
|
78
|
+
<div className="px-6 py-6 border-t border-neutral-200 flex flex-col gap-6 tb:mt-0 tb-l:border-0 tb-l:h-full tb-l:justify-center ">
|
|
79
79
|
{props.speakerSet.map((value, i) => (
|
|
80
80
|
<div key={i} className="block">
|
|
81
81
|
|
|
@@ -84,7 +84,7 @@ export default function TalkCard2(props) {
|
|
|
84
84
|
size='md'
|
|
85
85
|
designation={value.designation}
|
|
86
86
|
imageUrl={value.imageUrl}
|
|
87
|
-
avatarBgColor={
|
|
87
|
+
avatarBgColor={props.avatarBgColor}
|
|
88
88
|
/>
|
|
89
89
|
</div>
|
|
90
90
|
|
|
@@ -92,22 +92,23 @@ export default function TalkCard2(props) {
|
|
|
92
92
|
</div>
|
|
93
93
|
)
|
|
94
94
|
}
|
|
95
|
-
{props.eventTime &&
|
|
96
|
-
<
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
<
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
95
|
+
{props.eventTime &&
|
|
96
|
+
<div className="border-t border-neutral-200 tb-l:border-0 w-full pl-6 p-6 flex flex-row justify-between items-center">
|
|
97
|
+
<Typography textStyle='h6' className='text-blue-800 uppercase'>{props.eventTime}</Typography>
|
|
98
|
+
{props.addCalendarUrl &&
|
|
99
|
+
<a href={props.addCalendarUrl}>
|
|
100
|
+
<HDSButton
|
|
101
|
+
leftIconVariant='calendarplus02'
|
|
102
|
+
leftIconColor="#1E56E3"
|
|
103
|
+
rightIconVariant='none'
|
|
104
|
+
state='default'
|
|
105
|
+
size='sm'
|
|
106
|
+
type="iconOnly"
|
|
107
|
+
label=''
|
|
108
|
+
/>
|
|
109
|
+
</a>
|
|
110
|
+
}
|
|
111
|
+
</div>}
|
|
111
112
|
</div>
|
|
112
113
|
</div>
|
|
113
114
|
</div>
|
|
@@ -51,20 +51,22 @@ export default function TalkDetailCard(props) {
|
|
|
51
51
|
props.speaker_card && (
|
|
52
52
|
<div>
|
|
53
53
|
<Typography textStyle='h6' as='h6' className='uppercase text-neutral-500 pb-6 pt-8 tb:pt-14'>speakers</Typography>
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
<
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
54
|
+
<div className="flex flex-row flex-wrap tb:gap-3 gap-2">
|
|
55
|
+
{
|
|
56
|
+
props.speaker_card.map((speaker, i) => (
|
|
57
|
+
<div key={i} className='pb-4 last:pb-0'>
|
|
58
|
+
<ProfileAvatar
|
|
59
|
+
name={speaker.name}
|
|
60
|
+
size='md'
|
|
61
|
+
designation={speaker.designation}
|
|
62
|
+
imageUrl={speaker.imageUrl}
|
|
63
|
+
avatarVariant="circle"
|
|
64
|
+
avatarBgColor={props.avatarBgColor}
|
|
65
|
+
/>
|
|
66
|
+
</div>
|
|
67
|
+
))
|
|
68
|
+
}
|
|
69
|
+
</div>
|
|
68
70
|
</div>
|
|
69
71
|
)
|
|
70
72
|
}
|
|
@@ -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) => (
|
|
@@ -94,7 +94,7 @@ export default function TableB(props) {
|
|
|
94
94
|
</Typography>
|
|
95
95
|
)}
|
|
96
96
|
</div>
|
|
97
|
-
<div className=' mt-11 rounded-full shadow tb-l:hidden'>
|
|
97
|
+
<div className=' mt-11 p-2 bg-neutral-0 rounded-full shadow tb-l:hidden'>
|
|
98
98
|
<Tab onTabClick={handleTabClick} tabs={tabs} />
|
|
99
99
|
</div>
|
|
100
100
|
</div>
|
|
@@ -170,7 +170,7 @@ export default function TableB(props) {
|
|
|
170
170
|
<div className="mt-12 bg-neutral-0 rounded-3xl ">
|
|
171
171
|
<table className="min-w-full shadow tableclss rounded-3xl ">
|
|
172
172
|
<thead>
|
|
173
|
-
<tr className='divide-x divide-neutral-200 text-center rounded-t-3xl'>
|
|
173
|
+
<tr className='divide-x border-b border-neutral-200 divide-neutral-200 text-center rounded-t-3xl'>
|
|
174
174
|
{Object.keys(TABLE_HEADER).map((key, index) => (
|
|
175
175
|
<th
|
|
176
176
|
key={index}
|
package/src/styles/tailwind.css
CHANGED
|
@@ -2015,6 +2015,12 @@ select {
|
|
|
2015
2015
|
border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
|
|
2016
2016
|
}
|
|
2017
2017
|
|
|
2018
|
+
.divide-y-2 > :not([hidden]) ~ :not([hidden]) {
|
|
2019
|
+
--tw-divide-y-reverse: 0;
|
|
2020
|
+
border-top-width: calc(2px * calc(1 - var(--tw-divide-y-reverse)));
|
|
2021
|
+
border-bottom-width: calc(2px * var(--tw-divide-y-reverse));
|
|
2022
|
+
}
|
|
2023
|
+
|
|
2018
2024
|
.divide-blue-600\/10 > :not([hidden]) ~ :not([hidden]) {
|
|
2019
2025
|
border-color: rgb(30 86 227 / 0.1);
|
|
2020
2026
|
}
|
|
@@ -8037,17 +8043,6 @@ select {
|
|
|
8037
8043
|
}
|
|
8038
8044
|
}
|
|
8039
8045
|
|
|
8040
|
-
@media (max-width: 419px) {
|
|
8041
|
-
.max-\[419px\]\:rounded-full {
|
|
8042
|
-
border-radius: 9999px;
|
|
8043
|
-
}
|
|
8044
|
-
|
|
8045
|
-
.max-\[419px\]\:bg-blue-300 {
|
|
8046
|
-
--tw-bg-opacity: 1;
|
|
8047
|
-
background-color: rgb(198 214 255 / var(--tw-bg-opacity));
|
|
8048
|
-
}
|
|
8049
|
-
}
|
|
8050
|
-
|
|
8051
8046
|
@media (max-width: 399px) {
|
|
8052
8047
|
.max-\[399px\]\:rounded-full {
|
|
8053
8048
|
border-radius: 9999px;
|
|
@@ -8758,6 +8753,10 @@ select {
|
|
|
8758
8753
|
display: none;
|
|
8759
8754
|
}
|
|
8760
8755
|
|
|
8756
|
+
.tb-l\:h-full {
|
|
8757
|
+
height: 100%;
|
|
8758
|
+
}
|
|
8759
|
+
|
|
8761
8760
|
.tb-l\:w-1\/2 {
|
|
8762
8761
|
width: 50%;
|
|
8763
8762
|
}
|
|
@@ -8828,6 +8827,12 @@ select {
|
|
|
8828
8827
|
margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
|
|
8829
8828
|
}
|
|
8830
8829
|
|
|
8830
|
+
.tb-l\:divide-y-2 > :not([hidden]) ~ :not([hidden]) {
|
|
8831
|
+
--tw-divide-y-reverse: 0;
|
|
8832
|
+
border-top-width: calc(2px * calc(1 - var(--tw-divide-y-reverse)));
|
|
8833
|
+
border-bottom-width: calc(2px * var(--tw-divide-y-reverse));
|
|
8834
|
+
}
|
|
8835
|
+
|
|
8831
8836
|
.tb-l\:self-center {
|
|
8832
8837
|
align-self: center;
|
|
8833
8838
|
}
|
|
@@ -8868,6 +8873,11 @@ select {
|
|
|
8868
8873
|
padding-bottom: 3rem;
|
|
8869
8874
|
}
|
|
8870
8875
|
|
|
8876
|
+
.tb-l\:px-6 {
|
|
8877
|
+
padding-left: 1.5rem;
|
|
8878
|
+
padding-right: 1.5rem;
|
|
8879
|
+
}
|
|
8880
|
+
|
|
8871
8881
|
.tb-l\:pb-12 {
|
|
8872
8882
|
padding-bottom: 3rem;
|
|
8873
8883
|
}
|
|
@@ -8884,6 +8894,18 @@ select {
|
|
|
8884
8894
|
padding-top: 3rem;
|
|
8885
8895
|
}
|
|
8886
8896
|
|
|
8897
|
+
.tb-l\:pb-8 {
|
|
8898
|
+
padding-bottom: 2rem;
|
|
8899
|
+
}
|
|
8900
|
+
|
|
8901
|
+
.tb-l\:pt-8 {
|
|
8902
|
+
padding-top: 2rem;
|
|
8903
|
+
}
|
|
8904
|
+
|
|
8905
|
+
.tb-l\:pb-0 {
|
|
8906
|
+
padding-bottom: 0px;
|
|
8907
|
+
}
|
|
8908
|
+
|
|
8887
8909
|
.tb-l\:text-left {
|
|
8888
8910
|
text-align: left;
|
|
8889
8911
|
}
|