hds-web 1.13.6 → 1.13.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.
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 +24 -23
  7. package/src/index.css +3 -6
  8. package/src/styles/tailwind.css +10 -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.7",
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,7 +205,7 @@ 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 ${isSticky ? ' bg-neutral-100' : ''
208
209
  }`}
209
210
  >
210
211
  <Typography
@@ -212,25 +213,25 @@ export default function PricingTableB(props) {
212
213
  className='text-neutral-900 py-3.5 text-left whitespace-nowrap'
213
214
  >
214
215
  {keyIndex2}
215
-
216
+
216
217
 
217
218
  </Typography>
218
219
  {section[keyIndex][0][keyIndex2]['btn'] && section[keyIndex][0][keyIndex2]['btn_cta'] && <div className={`flex -mt-5`}>
219
220
  <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
- />
221
+ <HDSButton
222
+ label={section[keyIndex][0][keyIndex2]['btn']}
223
+ type='secondaryLink'
224
+ leftIconVariant='none'
225
+ rightIconVariant='none'
226
+ state='default'
227
+ size='sm'
228
+ rightAnimatedArrow={true}
229
+ rightAnimatedArrowColor='#3970FD'
230
+ animatedHoverStroke='#3970FD'
231
+ btnTextColorClass='text-blue-500'
232
+ btnTextHoverClass=''
233
+ className=' '
234
+ />
234
235
  </a>
235
236
  </div>}
236
237
 
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
  }
@@ -6349,6 +6349,10 @@ select{
6349
6349
  padding-top: 2rem;
6350
6350
  }
6351
6351
 
6352
+ .pt-\[72px\]{
6353
+ padding-top: 72px;
6354
+ }
6355
+
6352
6356
  .pt-\[81px\]{
6353
6357
  padding-top: 81px;
6354
6358
  }
@@ -7435,16 +7439,10 @@ select{
7435
7439
 
7436
7440
  /*test*/
7437
7441
 
7438
- .myElement {
7442
+ .sticky {
7439
7443
  position: -webkit-sticky;
7440
7444
  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;
7445
+ top: 72px;
7448
7446
  }
7449
7447
 
7450
7448
  .carouselShadow{