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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hds-web",
3
- "version": "1.4.5",
3
+ "version": "1.4.7",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",
@@ -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-[420px]:bg-blue-400 rounded-r-xl max-[420px]:rounded-full w-[60px] mb-m:min-w-[144px] mb-m:w-[9rem] tb:min-w-[18rem] tb:rounded-3xl border-neutral-0`}
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
  ) : (
@@ -84,6 +84,7 @@ export default function TalkCard2(props) {
84
84
  size='md'
85
85
  designation={value.designation}
86
86
  imageUrl={value.imageUrl}
87
+ avatarBgColor={props.avatarBgColor}
87
88
  />
88
89
  </div>
89
90
 
@@ -60,6 +60,7 @@ export default function TalkDetailCard(props) {
60
60
  designation={speaker.designation}
61
61
  imageUrl={speaker.imageUrl}
62
62
  avatarVariant="circle"
63
+ avatarBgColor={props.avatarBgColor}
63
64
  />
64
65
  </div>
65
66
  ))
@@ -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
- scrollByAmount = 2;
42
+ scrollByAmount = 2;
41
43
  }
42
44
  if (window.innerWidth > 1140) {
43
- scrollByAmount = 3;
45
+ scrollByAmount = 3;
44
46
  }
45
-
47
+
46
48
  if (currentCard < totalCards - scrollByAmount) {
47
- setCurrentCard(currentCard + scrollByAmount);
48
- carouselRef.current.scrollTo({
49
- left: carouselRef.current.scrollLeft + carouselRef.current.children[0].offsetWidth * scrollByAmount,
50
- behavior: "smooth",
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
- left: 0,
57
- behavior: "smooth",
58
+ left: 0,
59
+ behavior: "smooth",
58
60
  });
59
- }
60
- };
61
-
62
- const previousCard = () => {
61
+ }
62
+ };
63
+
64
+ const previousCard = () => {
63
65
  let scrollByAmount = 1;
64
66
  if (window.innerWidth > 800) {
65
- scrollByAmount = 2;
67
+ scrollByAmount = 2;
66
68
  }
67
69
  if (window.innerWidth > 1140) {
68
- scrollByAmount = 3;
70
+ scrollByAmount = 3;
69
71
  }
70
-
72
+
71
73
  if (currentCard > 0) {
72
- setCurrentCard(currentCard - scrollByAmount);
73
- carouselRef.current.scrollTo({
74
- left: carouselRef.current.scrollLeft - carouselRef.current.children[0].offsetWidth * scrollByAmount,
75
- behavior: "smooth",
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
- const lastCardIndex = totalCards - 1;
79
- const scrollLeft = carouselRef.current.scrollWidth - carouselRef.current.children[0].offsetWidth * scrollByAmount;
80
- setCurrentCard(lastCardIndex);
81
- carouselRef.current.scrollTo({
82
- left: scrollLeft,
83
- behavior: "smooth",
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
- {props.cards.map((item, i) => (
116
- <div className="my-5" key={i} ref={refs[i]}>
117
- <div className="rounded-3xl overflow-hidden">
118
- {React.createElement(props.component, item)}
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
- ref={carouselRef}
185
+ ref={carouselRef}
151
186
  >
152
187
 
153
188
  {props.cards.map((item, i) => (
@@ -735,9 +735,9 @@ select {
735
735
  }
736
736
  }
737
737
 
738
- @media (min-width: 420px) {
738
+ @media (min-width: 400px) {
739
739
  .container {
740
- max-width: 420px;
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: 450px) {
8100
- .max-\[450px\]\:rounded-full {
8040
+ @media (max-width: 399px) {
8041
+ .max-\[399px\]\:rounded-full {
8101
8042
  border-radius: 9999px;
8102
8043
  }
8103
- }
8104
8044
 
8105
- @media (max-width: 420px) {
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(128 163 255 / var(--tw-bg-opacity));
8047
+ background-color: rgb(198 214 255 / var(--tw-bg-opacity));
8113
8048
  }
8114
8049
  }
8115
8050
 
8116
- @media (min-width: 420px) {
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
  }
@@ -169,7 +169,7 @@ module.exports = {
169
169
  extend: {
170
170
  screens: {
171
171
  'mb-s': '360px',
172
- 'mb-m':'420px',
172
+ 'mb-m':'400px',
173
173
  'tb': '600px',
174
174
  'tb-m': '800px',
175
175
  'tb-l': '905px',