hds-web 1.0.8 → 1.1.0

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 (7) hide show
  1. package/dist/index.css +1 -1
  2. package/dist/index.es.css +1 -1
  3. package/dist/index.es.js +19 -4
  4. package/dist/index.js +19 -4
  5. package/package.json +2 -1
  6. package/src/HDS/components/Tables/tableB.js +33 -19
  7. package/src/styles/tailwind.css +4 -8
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hds-web",
3
- "version": "1.0.8",
3
+ "version": "1.1.0",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",
@@ -15,6 +15,7 @@
15
15
  "prop-types": "^15.8.1",
16
16
  "react": "^17.0.1",
17
17
  "react-dom": "^17.0.1",
18
+ "react-markdown": "^8.0.7",
18
19
  "react-scripts": "5.0.1",
19
20
  "uuid": "^9.0.0",
20
21
  "web-vitals": "^2.1.4",
package/src/HDS/components/Tables/tableB.js CHANGED
@@ -1,15 +1,17 @@
1
1
  import React from 'react';
2
2
  import { Typography } from '../../foundation/Typography'
3
3
  import { Icon } from '../common-components/Icon'
4
+ import { HDSColor } from '../../foundation/ColorPalette';
5
+ import ReactMarkdown from "react-markdown";
4
6
 
5
7
  export default function TableB(props) {
6
8
  const {
7
9
  title,
10
+ title_color,
8
11
  description,
12
+ desc_color,
9
13
  TABLE_VALUE,
10
14
  TABLE_HEADER,
11
- children
12
-
13
15
  } = props;
14
16
  return (
15
17
  <div className=" max-w-7xl px-4 sm:px-6 lg:px-8 ">
@@ -17,22 +19,25 @@ export default function TableB(props) {
17
19
  <div className="sm:flex-auto flex flex-col items-center">
18
20
  {title && (
19
21
  <Typography
20
- textStyle='h2'>
22
+ textStyle='h2'
23
+ className={HDSColor(title_color)}
24
+ >
21
25
  {title}
22
26
  </Typography>
23
27
  )
24
28
  }
25
29
  {description && (
26
30
  <Typography
27
- textStyle='body1c'>
31
+ textStyle='body1c'
32
+ className={HDSColor(desc_color)}
33
+ >
28
34
  {description}
29
35
  </Typography>
30
36
  )
31
37
  }
32
-
38
+
33
39
  </div>
34
40
  </div>
35
-
36
41
  <div className='hidden tb-l:block' >
37
42
  <div className="-mx-4 mt-8 sm:-mx-0 bg-neutral-0 rounded-3xl ">
38
43
  <table className="min-w-full shadow rounded-3xl ">
@@ -50,16 +55,16 @@ export default function TableB(props) {
50
55
  {TABLE_HEADER[key]['icon'] &&
51
56
  (
52
57
  <Icon
53
- height='h-6 w-6'
58
+ height='h-6 w-6 stroke-[1.5px]'
54
59
  variant={TABLE_HEADER[key]['icon']}
55
- strokeClass={TABLE_HEADER[key]['iconStrokeClass']} />
60
+ strokeClass={HDSColor(TABLE_HEADER[key]['iconStrokeClass'])} />
56
61
  )
57
62
  }
58
63
  {
59
64
  TABLE_HEADER[key]['title'] && key == 0 && (
60
65
  <Typography
61
66
  textStyle='h5'
62
- className={TABLE_HEADER[key]['title_text_color']}>
67
+ className={HDSColor(TABLE_HEADER[key]['title_text_color'])}>
63
68
  {TABLE_HEADER[key]['title']}
64
69
  </Typography>)
65
70
  }
@@ -67,18 +72,16 @@ export default function TableB(props) {
67
72
  TABLE_HEADER[key]['title'] && key != 0 && (
68
73
  <Typography
69
74
  textStyle='h5'
70
- className={TABLE_HEADER[key]['title_text_color']}>
71
- {TABLE_HEADER[key]['title']}
75
+ className={HDSColor(TABLE_HEADER[key]['title_text_color'])}>
76
+ <ReactMarkdown>{TABLE_HEADER[key]['title']}</ReactMarkdown>
72
77
  </Typography>)
73
78
  }
74
-
75
-
76
79
  </div>
77
80
  <div className=' max-w-[10rem]'>
78
81
  {TABLE_HEADER[key]['descr'] && (
79
82
  <Typography
80
83
  textStyle='body1'
81
- className={TABLE_HEADER[key]['descr_text_color']}>
84
+ className={HDSColor(TABLE_HEADER[key]['descr_text_color'])}>
82
85
  {TABLE_HEADER[key]['descr']}
83
86
  </Typography>)}
84
87
  </div>
@@ -93,31 +96,42 @@ export default function TableB(props) {
93
96
  <tr className='divide-x divide-neutral-200' key={index}>
94
97
  {Object.keys(value).map((key) => (
95
98
  <React.Fragment key={key}>
96
- {key === 'rowTitle' && (<td
99
+ {key === 'rowTitle' && value[key]['text'] !== null && (<td
97
100
  key={key}
98
101
  className="px-8 py-7 w-[22.5rem] whitespace-pre-line "
99
102
  >
100
- <Typography className='max-w-[22rem] text-neutral-700' textStyle='body1c'>{value[key]}</Typography>
103
+ <Typography className='max-w-[22rem] text-neutral-700' textStyle='body1c'><ReactMarkdown>{value[key]}</ReactMarkdown></Typography>
101
104
 
102
105
  </td>)}
103
106
 
104
- {key !== 'rowTitle' && (
107
+ {key !== 'rowTitle' && value[key]['text'] !== null && (
105
108
  <td
106
109
  key={key}
107
110
  className="px-8 py-7 text-center"
108
111
  >
112
+ {value && key && value[key] && value[key]['text'] === null && (
113
+ <div>{value[key]['text']}</div>
114
+
115
+ )}
109
116
  {value[key]['text'] && (
110
117
  <Typography className='text-neutral-700' textStyle='body1c'>{value[key]['text']}</Typography>
111
118
 
112
119
  )}
113
120
  {!value[key]['text'] && (
114
121
  <div className='flex justify-center'>
115
- <Icon height='h-5 w-5' variant={value[key]['iconVariant']} strokeClass={value[key]['iconStrokeClass']} />
122
+ <Icon height='h-5 w-5 stroke-[1.5px]' variant={value[key]['iconVariant']} strokeClass={HDSColor(value[key]['iconStrokeClass'])} />
116
123
  </div>
117
124
  )}
125
+ </td>)}
126
+ {value[key]['text'] === null && (
127
+ <td
128
+ key={key}
129
+ className="px-8 py-7 text-center"
130
+ >
131
+ </td>
132
+ )}
118
133
 
119
134
 
120
- </td>)}
121
135
  </React.Fragment>
122
136
  ))}
123
137
  </tr>
package/src/styles/tailwind.css CHANGED
@@ -6357,14 +6357,14 @@ select {
6357
6357
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
6358
6358
  }
6359
6359
 
6360
- .ease-out {
6361
- transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
6362
- }
6363
-
6364
6360
  .ease-in-out {
6365
6361
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
6366
6362
  }
6367
6363
 
6364
+ .ease-out {
6365
+ transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
6366
+ }
6367
+
6368
6368
  /* Typography classes */
6369
6369
 
6370
6370
  @-webkit-keyframes pill-move-left {
@@ -8483,10 +8483,6 @@ select {
8483
8483
  flex: 1 1 0%;
8484
8484
  }
8485
8485
 
8486
- .md\:flex-col {
8487
- flex-direction: column;
8488
- }
8489
-
8490
8486
  .md\:items-center {
8491
8487
  align-items: center;
8492
8488
  }