hds-web 1.6.3 → 1.6.5

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 (9) hide show
  1. package/dist/index.css +2 -2
  2. package/dist/index.es.css +2 -2
  3. package/dist/index.es.js +2 -2
  4. package/dist/index.js +2 -2
  5. package/package.json +1 -1
  6. package/src/HDS/components/Buttons/button.js +11 -1
  7. package/src/HDS/components/Tables/tableD.js +45 -39
  8. package/src/HDS/components/Tabs/tab.js +13 -4
  9. package/src/styles/tailwind.css +5 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hds-web",
3
- "version": "1.6.3",
3
+ "version": "1.6.5",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",
package/src/HDS/components/Buttons/button.js CHANGED
@@ -38,12 +38,22 @@ const Buttonclasses = {
38
38
  'default': {
39
39
  'base': 'db:w-fit tb:w-fit w-full justify-center border-2 border-blue-500 text-blue-500',
40
40
 
41
- 'hover': 'hover:text-neutral-0 hover:bg-blue-700 hover:border-2 hover:border-blue-700 hover:shadow-md hover:shadow hover:transition-all hover:ease-out hover:delay-100 hover:duration-300',
41
+ 'hover': 'hover:text-neutral-0 hover:bg-blue-700 hover:border-2 hover:border-blue-700 hover:shadow-md hover:shadow hover:transition-all hover:ease-out hover:duration-300',
42
42
 
43
43
  'focus': 'focus:bg-blue-200 focus:text-blue-500 focus:border-2 border-blue-500 focus:shadow-[0px_0px_0px_4px_#DFE8FF] focus:outline-none focus:text-blue-500',
44
44
  },
45
45
  'disabled': 'bg-neutral-200 text-neutral-400',
46
46
  },
47
+ 'secondaryWhite': {
48
+ 'default': {
49
+ 'base': 'db:w-fit tb:w-fit w-full justify-center border-2 border-neutral-0 text-neutral-0 ',
50
+
51
+ 'hover': 'hover:text-neutral-0 hover:border-2 hover:border-neutral-0 hover:shadow-md hover:shadow hover:transition-all hover:ease-out hover:duration-300',
52
+
53
+ 'focus': 'focus:text-neutrak-0 focus:border-2 border-neutral-0 focus:outline-none focus:text-neutral-0',
54
+ },
55
+ 'disabled': 'bg-neutral-200 text-neutral-400',
56
+ },
47
57
 
48
58
  'ghost': {
49
59
  'default': {
package/src/HDS/components/Tables/tableD.js CHANGED
@@ -15,15 +15,17 @@ export default function PricingTableB(props) {
15
15
  TABLE_HEADER,
16
16
  } = props;
17
17
  const tableValuesm = (section, keyIndex) => {
18
+
18
19
  let columnSize = '';
19
20
  let scrapData;
20
21
  if (section[keyIndex][0]) {
21
22
  scrapData = section[keyIndex][0];
22
23
  }
23
- const rowTitleKey = Object.keys(scrapData).find(key => key === 'Data APIs');
24
+
25
+ const firstKeys = section[keyIndex].map(item => Object.keys(item)[0]);
26
+ const rowTitleKey = firstKeys[0];
24
27
  if (section[keyIndex].length) {
25
28
  columnSize = section[keyIndex].length;
26
- console.log(columnSize)
27
29
  }
28
30
  return (
29
31
  <>
@@ -40,7 +42,7 @@ export default function PricingTableB(props) {
40
42
  className="pl-[30px] border-80 "
41
43
  >
42
44
  <div className=' '>
43
- <Typography className='py-4 text-neutral-700' textStyle='body1c'>{value[keyIndex]}{index}</Typography>
45
+ <Typography className='py-4 text-neutral-700' textStyle='body1c'>{value[keyIndex]}</Typography>
44
46
  </div>
45
47
  </td>)}
46
48
  {keyIndex !== null
@@ -230,17 +232,19 @@ export default function PricingTableB(props) {
230
232
 
231
233
  {TABLE_HEADER[key]['button_title'] &&
232
234
  (
233
- <HDSButton
234
- label={TABLE_HEADER[key]['button_title']}
235
- type='secondary'
236
- leftIconVariant='none'
237
- rightIconVariant='none'
238
- state='default'
239
- size='sm'
240
- rightAnimatedArrow={true}
241
- rightAnimatedArrowColor='#6C737F'
242
- className='mt-4'
243
- />
235
+ <a href={TABLE_HEADER[key]['button_link']}>
236
+ <HDSButton
237
+ label={TABLE_HEADER[key]['button_title']}
238
+ type='secondary'
239
+ leftIconVariant='none'
240
+ rightIconVariant='none'
241
+ state='default'
242
+ size='sm'
243
+ rightAnimatedArrow={true}
244
+ rightAnimatedArrowColor='#3970FD'
245
+ className='mt-4'
246
+ />
247
+ </a>
244
248
 
245
249
  )
246
250
 
@@ -283,31 +287,33 @@ export default function PricingTableB(props) {
283
287
  }
284
288
  {TABLE_HEADER && (
285
289
  <>
286
- <tbody>
287
- <tr>
288
- <td></td>
289
- {TABLE_HEADER.map((value, index) => (
290
- <React.Fragment key={index}>
291
- {index != 0 && value['button_title'] &&
292
- <td key={index} className='px-8'>
293
- <HDSButton
294
- label={value['button_title']}
295
- type='secondary'
296
- leftIconVariant='none'
297
- rightIconVariant='none'
298
- state='default'
299
- size='sm'
300
- rightAnimatedArrow={true}
301
- rightAnimatedArrowColor='#6C737F'
302
- className='mt-4 mb-16'
303
- />
304
-
305
- </td>}
306
- </React.Fragment>
307
- ))
308
- }
309
-
310
- </tr>
290
+ <tbody>
291
+ <tr>
292
+ <td></td>
293
+ {TABLE_HEADER.map((value, index) => (
294
+ <React.Fragment key={index}>
295
+ {index != 0 && value['button_title'] &&
296
+ <td key={index} className='px-8'>
297
+ <a href={value['button_link']}>
298
+ <HDSButton
299
+ label={value['button_title']}
300
+ type='secondary'
301
+ leftIconVariant='none'
302
+ rightIconVariant='none'
303
+ state='default'
304
+ size='sm'
305
+ rightAnimatedArrow={true}
306
+ rightAnimatedArrowColor='#3970FD'
307
+ className='mt-4 mb-16'
308
+ />
309
+ </a>
310
+
311
+ </td>}
312
+ </React.Fragment>
313
+ ))
314
+ }
315
+
316
+ </tr>
311
317
  </tbody>
312
318
  </>
313
319
  )}
package/src/HDS/components/Tabs/tab.js CHANGED
@@ -7,8 +7,7 @@ export default function Tab(props) {
7
7
  const {
8
8
  tabs,
9
9
  onTabClick,
10
- pillColor
11
-
10
+ pillColor,
12
11
  } = props;
13
12
  const [activeTab, setActiveTab] = useState(tabs.find(tab => tab.current) || tabs[0]);
14
13
  const pillRef = useRef(null);
@@ -16,6 +15,7 @@ export default function Tab(props) {
16
15
  if(pillColor){
17
16
  pillColorClass = HDSColor(pillColor);
18
17
  }
18
+
19
19
 
20
20
  const handleTabClick = (event, clickedTab) => {
21
21
  event.preventDefault();
@@ -36,10 +36,19 @@ export default function Tab(props) {
36
36
  pill.style.width = `${pillWidth}px`;
37
37
  }
38
38
  };
39
+ let tabTextClass = '';
39
40
 
40
41
  function tabClass(name) {
42
+
43
+ // console.log(currentTab['tabTextColorClass']);
44
+
45
+ if(activeTab['tabTextColorClass']){
46
+ tabTextClass = HDSColor(activeTab['tabTextColorClass']);
47
+ }
48
+ else tabTextClass = 'text-neutral-500'
49
+
41
50
  let classActive = ' text-neutral-0 transition-all rounded-full ' + pillColorClass;
42
- let clasnInActive = ' text-neutral-500 flex-nowrap rounded-full';
51
+ let clasnInActive = ' flex-nowrap rounded-full ' + tabTextClass;
43
52
  if (activeTab.name === name) {
44
53
  return classActive;
45
54
  }
@@ -79,5 +88,5 @@ export default function Tab(props) {
79
88
  }
80
89
 
81
90
  Tab.defaultProps = {
82
- pillColor: 'bg-blue-500'
91
+ pillColor: 'bg-blue-500',
83
92
  }
package/src/styles/tailwind.css CHANGED
@@ -8107,6 +8107,11 @@ select {
8107
8107
  border-color: rgb(210 214 219 / var(--tw-border-opacity));
8108
8108
  }
8109
8109
 
8110
+ .hover\:border-neutral-0:hover {
8111
+ --tw-border-opacity: 1;
8112
+ border-color: rgb(255 255 255 / var(--tw-border-opacity));
8113
+ }
8114
+
8110
8115
  .hover\:bg-blue-100:hover {
8111
8116
  --tw-bg-opacity: 1;
8112
8117
  background-color: rgb(240 244 255 / var(--tw-bg-opacity));