hds-web 1.0.9 → 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 +25 -15
  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.9",
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
@@ -2,17 +2,16 @@ import React from 'react';
2
2
  import { Typography } from '../../foundation/Typography'
3
3
  import { Icon } from '../common-components/Icon'
4
4
  import { HDSColor } from '../../foundation/ColorPalette';
5
+ import ReactMarkdown from "react-markdown";
5
6
 
6
7
  export default function TableB(props) {
7
8
  const {
8
9
  title,
9
- title_text_color,
10
+ title_color,
10
11
  description,
11
- desc_text_color,
12
+ desc_color,
12
13
  TABLE_VALUE,
13
14
  TABLE_HEADER,
14
- children
15
-
16
15
  } = props;
17
16
  return (
18
17
  <div className=" max-w-7xl px-4 sm:px-6 lg:px-8 ">
@@ -21,7 +20,7 @@ export default function TableB(props) {
21
20
  {title && (
22
21
  <Typography
23
22
  textStyle='h2'
24
- className={HDSColor(title_text_color)}
23
+ className={HDSColor(title_color)}
25
24
  >
26
25
  {title}
27
26
  </Typography>
@@ -30,13 +29,13 @@ export default function TableB(props) {
30
29
  {description && (
31
30
  <Typography
32
31
  textStyle='body1c'
33
- className={HDSColor(desc_text_color)}
32
+ className={HDSColor(desc_color)}
34
33
  >
35
34
  {description}
36
35
  </Typography>
37
36
  )
38
37
  }
39
-
38
+
40
39
  </div>
41
40
  </div>
42
41
  <div className='hidden tb-l:block' >
@@ -56,7 +55,7 @@ export default function TableB(props) {
56
55
  {TABLE_HEADER[key]['icon'] &&
57
56
  (
58
57
  <Icon
59
- height='h-6 w-6'
58
+ height='h-6 w-6 stroke-[1.5px]'
60
59
  variant={TABLE_HEADER[key]['icon']}
61
60
  strokeClass={HDSColor(TABLE_HEADER[key]['iconStrokeClass'])} />
62
61
  )
@@ -74,11 +73,9 @@ export default function TableB(props) {
74
73
  <Typography
75
74
  textStyle='h5'
76
75
  className={HDSColor(TABLE_HEADER[key]['title_text_color'])}>
77
- {TABLE_HEADER[key]['title']}
76
+ <ReactMarkdown>{TABLE_HEADER[key]['title']}</ReactMarkdown>
78
77
  </Typography>)
79
78
  }
80
-
81
-
82
79
  </div>
83
80
  <div className=' max-w-[10rem]'>
84
81
  {TABLE_HEADER[key]['descr'] && (
@@ -99,29 +96,42 @@ export default function TableB(props) {
99
96
  <tr className='divide-x divide-neutral-200' key={index}>
100
97
  {Object.keys(value).map((key) => (
101
98
  <React.Fragment key={key}>
102
- {key === 'rowTitle' && (<td
99
+ {key === 'rowTitle' && value[key]['text'] !== null && (<td
103
100
  key={key}
104
101
  className="px-8 py-7 w-[22.5rem] whitespace-pre-line "
105
102
  >
106
- <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>
107
104
 
108
105
  </td>)}
109
106
 
110
- {key !== 'rowTitle' && (
107
+ {key !== 'rowTitle' && value[key]['text'] !== null && (
111
108
  <td
112
109
  key={key}
113
110
  className="px-8 py-7 text-center"
114
111
  >
112
+ {value && key && value[key] && value[key]['text'] === null && (
113
+ <div>{value[key]['text']}</div>
114
+
115
+ )}
115
116
  {value[key]['text'] && (
116
117
  <Typography className='text-neutral-700' textStyle='body1c'>{value[key]['text']}</Typography>
117
118
 
118
119
  )}
119
120
  {!value[key]['text'] && (
120
121
  <div className='flex justify-center'>
121
- <Icon height='h-5 w-5' variant={value[key]['iconVariant']} strokeClass={HDSColor(value[key]['iconStrokeClass'])} />
122
+ <Icon height='h-5 w-5 stroke-[1.5px]' variant={value[key]['iconVariant']} strokeClass={HDSColor(value[key]['iconStrokeClass'])} />
122
123
  </div>
123
124
  )}
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
+ )}
133
+
134
+
125
135
  </React.Fragment>
126
136
  ))}
127
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
  }