hds-web 1.13.6 → 1.13.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.
Files changed (8) hide show
  1. package/dist/index.css +2 -2
  2. package/dist/index.es.css +2 -2
  3. package/dist/index.es.js +1 -1
  4. package/dist/index.js +1 -1
  5. package/package.json +1 -1
  6. package/src/HDS/components/Tables/tableD.js +30 -25
  7. package/src/index.css +3 -6
  8. package/src/styles/tailwind.css +18 -12
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hds-web",
3
- "version": "1.13.6",
3
+ "version": "1.13.8",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",
package/src/HDS/components/Tables/tableD.js CHANGED
@@ -14,14 +14,15 @@ export default function PricingTableB(props) {
14
14
  TABLE_VALUE,
15
15
  TABLE_HEADER,
16
16
  } = props;
17
-
17
+
18
18
  const [isSticky, setIsSticky] = useState(false);
19
+ const stickyRef = useRef();
19
20
  useEffect(() => {
20
21
  const handleScroll = () => {
21
22
  const tableHeader = stickyRef.current;
22
23
  const tableHeaderRect = tableHeader.getBoundingClientRect();
23
- const isSticky = tableHeaderRect.top <= 10; // Adjust this value if needed
24
-
24
+ const isSticky = tableHeaderRect.top <= 400; // Adjust this value if needed
25
+ console.log(isSticky, 'sadasd')
25
26
  setIsSticky(true);
26
27
  };
27
28
 
@@ -32,8 +33,8 @@ export default function PricingTableB(props) {
32
33
  }, []);
33
34
 
34
35
  console.log(TABLE_VALUE)
35
-
36
- const stickyRef = useRef(null);
36
+
37
+
37
38
  const tableValuesm = (section, keyIndex) => {
38
39
 
39
40
  let columnSize = '';
@@ -187,13 +188,13 @@ export default function PricingTableB(props) {
187
188
  {TABLE_HEADER && TABLE_HEADER[0] && TABLE_HEADER[0]['title'] && (
188
189
  <Typography
189
190
  textStyle='h3'
190
- className={`pb-10 pl-8 ${HDSColor(title_color)}`}
191
+ className={`pb-10 pl-8 pt-[72px] ${HDSColor(title_color)}`}
191
192
  >
192
193
  {TABLE_HEADER[0]['title']}
193
194
  </Typography>
194
195
  )}
195
196
  <table className="rounded-3xl w-full table-fixed ">
196
-
197
+
197
198
  {TABLE_VALUE.map((section, index) => (
198
199
  <tbody key={index} className="border-90 bg-neutral-0">
199
200
  {Object.keys(section).map((keyIndex) => (
@@ -204,35 +205,39 @@ export default function PricingTableB(props) {
204
205
  {keyIndex2 !== null && (
205
206
  <th
206
207
  ref={stickyRef}
207
- className={`first:rounded-l-full last:rounded-r-full px-8 ${isSticky ? ' sticky top-0 z-10 bg-neutral-100' : ''
208
+ className={`first:rounded-l-full last:rounded-r-full px-8 z-[100] sticky ${(index === 0) ? 'bg-neutral-0' : 'bg-neutral-100'
208
209
  }`}
209
210
  >
211
+ <div className={`flex flex-col py-3.5 gap-[11px]`}>
212
+
213
+
210
214
  <Typography
211
215
  textStyle='h5'
212
- className='text-neutral-900 py-3.5 text-left whitespace-nowrap'
216
+ className='text-neutral-900 text-left whitespace-nowrap'
213
217
  >
214
218
  {keyIndex2}
215
-
219
+
216
220
 
217
221
  </Typography>
218
- {section[keyIndex][0][keyIndex2]['btn'] && section[keyIndex][0][keyIndex2]['btn_cta'] && <div className={`flex -mt-5`}>
222
+ {section[keyIndex][0][keyIndex2]['btn'] && section[keyIndex][0][keyIndex2]['btn_cta'] && <div className={`flex -mt-4`}>
219
223
  <a href={section[keyIndex][0][keyIndex2]['btn_cta']}>
220
- <HDSButton
221
- label={section[keyIndex][0][keyIndex2]['btn']}
222
- type='secondaryLink'
223
- leftIconVariant='none'
224
- rightIconVariant='none'
225
- state='default'
226
- size='sm'
227
- rightAnimatedArrow={true}
228
- rightAnimatedArrowColor='#3970FD'
229
- animatedHoverStroke='#3970FD'
230
- btnTextColorClass='text-blue-500'
231
- btnTextHoverClass=''
232
- className=' '
233
- />
224
+ <HDSButton
225
+ label={section[keyIndex][0][keyIndex2]['btn']}
226
+ type='secondaryLink'
227
+ leftIconVariant='none'
228
+ rightIconVariant='none'
229
+ state='default'
230
+ size='sm'
231
+ rightAnimatedArrow={true}
232
+ rightAnimatedArrowColor='#3970FD'
233
+ animatedHoverStroke='#3970FD'
234
+ btnTextColorClass='text-blue-500'
235
+ btnTextHoverClass=''
236
+ className=' '
237
+ />
234
238
  </a>
235
239
  </div>}
240
+ </div>
236
241
 
237
242
  </th>
238
243
  )}
package/src/index.css CHANGED
@@ -41,14 +41,11 @@
41
41
 
42
42
  /*test*/
43
43
 
44
- .myElement {
44
+ .sticky {
45
+ position: -webkit-sticky;
45
46
  position: sticky;
46
- top: 0px;
47
- }
47
+ top: 72px;
48
48
 
49
- /* styles for when the header is in sticky mode */
50
- .myElement.is-pinned {
51
- color: red;
52
49
  }
53
50
 
54
51
  .carouselShadow{
package/src/styles/tailwind.css CHANGED
@@ -1030,6 +1030,10 @@ select{
1030
1030
  z-index: 50;
1031
1031
  }
1032
1032
 
1033
+ .z-\[100\]{
1034
+ z-index: 100;
1035
+ }
1036
+
1033
1037
  .z-\[1\]{
1034
1038
  z-index: 1;
1035
1039
  }
@@ -1217,10 +1221,6 @@ select{
1217
1221
  margin-left: -1px;
1218
1222
  }
1219
1223
 
1220
- .-mt-2{
1221
- margin-top: -0.5rem;
1222
- }
1223
-
1224
1224
  .-mt-4{
1225
1225
  margin-top: -1rem;
1226
1226
  }
@@ -2283,6 +2283,14 @@ select{
2283
2283
  gap: 25rem;
2284
2284
  }
2285
2285
 
2286
+ .gap-\[10px\]{
2287
+ gap: 10px;
2288
+ }
2289
+
2290
+ .gap-\[11px\]{
2291
+ gap: 11px;
2292
+ }
2293
+
2286
2294
  .gap-x-1{
2287
2295
  -webkit-column-gap: 0.25rem;
2288
2296
  column-gap: 0.25rem;
@@ -6349,6 +6357,10 @@ select{
6349
6357
  padding-top: 2rem;
6350
6358
  }
6351
6359
 
6360
+ .pt-\[72px\]{
6361
+ padding-top: 72px;
6362
+ }
6363
+
6352
6364
  .pt-\[81px\]{
6353
6365
  padding-top: 81px;
6354
6366
  }
@@ -7435,16 +7447,10 @@ select{
7435
7447
 
7436
7448
  /*test*/
7437
7449
 
7438
- .myElement {
7450
+ .sticky {
7439
7451
  position: -webkit-sticky;
7440
7452
  position: sticky;
7441
- top: 0px;
7442
- }
7443
-
7444
- /* styles for when the header is in sticky mode */
7445
-
7446
- .myElement.is-pinned {
7447
- color: red;
7453
+ top: 72px;
7448
7454
  }
7449
7455
 
7450
7456
  .carouselShadow{