hds-web 1.0.2 → 1.0.3

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 (16) hide show
  1. package/dist/index.css +2 -2
  2. package/dist/index.es.css +2 -2
  3. package/dist/index.es.js +4 -4
  4. package/dist/index.js +4 -4
  5. package/package.json +1 -1
  6. package/src/HDS/components/Avatars/profileAvatar.js +2 -2
  7. package/src/HDS/components/BadgesCaption/badges.js +10 -10
  8. package/src/HDS/components/Cards/Misc/talkCard.js +22 -18
  9. package/src/HDS/components/Hero/h1.js +0 -1
  10. package/src/HDS/components/Hero/h2.js +3 -3
  11. package/src/HDS/components/Tables/tableB.js +75 -15
  12. package/src/HDS/components/Tabs/tab.js +2 -2
  13. package/src/HDS/components/common-components/Icon/IconMap.js +1 -6
  14. package/src/HDS/foundation/ColorPalette/color.js +1 -1
  15. package/src/styles/tailwind.css +174 -32
  16. package/tailwind.config.js +3 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hds-web",
3
- "version": "1.0.2",
3
+ "version": "1.0.3",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",
package/src/HDS/components/Avatars/profileAvatar.js CHANGED
@@ -33,7 +33,7 @@ export default function ProfileAvatar({ name, designation, size, imageUrl, avata
33
33
  const defaultAvatarIcon = "user03";
34
34
  const hasImageUrl = imageUrl && imageUrl.length > 0;
35
35
  return (
36
- <a href="#" className="group block flex-shrink-0">
36
+ <div className="group block flex-shrink-0">
37
37
  <div className="flex items-center">
38
38
  <div>
39
39
  {hasImageUrl ? (
@@ -61,7 +61,7 @@ export default function ProfileAvatar({ name, designation, size, imageUrl, avata
61
61
  </p>
62
62
  </div>
63
63
  </div>
64
- </a>
64
+ </div>
65
65
  )
66
66
  }
67
67
 
package/src/HDS/components/BadgesCaption/badges.js CHANGED
@@ -2,6 +2,7 @@ import React from 'react';
2
2
  import { useState } from 'react';
3
3
  import PropTypes from 'prop-types';
4
4
  import { Icon } from '../common-components/Icon';
5
+ import {Typography} from '../../foundation/Typography'
5
6
  const sizeClasses = {
6
7
  sm: 'py-0.5 px-2 hds-d-body3c',
7
8
  default: 'py-1 px-3',
@@ -13,17 +14,16 @@ const iconClasses = {
13
14
  };
14
15
 
15
16
  const colorVariants = {
16
- blue: 'bg-blue-600 text-blue-800 hover:bg-blue-300 dark:bg-blue-500 dark:text-blue-100 dark:hover:bg-blue-600',
17
- grey: 'bg-neutral-600 text-neutral-800 hover:bg-neutral-300 dark:bg-neutral-500 dark:text-neutral-100 dark:hover:bg-neutral-600',
18
- purple: 'bg-purple-600 text-purple-800 hover:bg-purple-300 dark:bg-purple-500 dark:text-purple-100 dark:hover:bg-purple-600',
19
- pink: 'bg-pink-600 text-pink-800 hover:bg-pink-300 dark:bg-pink-500 dark:text-pink-100 dark:hover:bg-pink-600',
20
- amber: 'bg-amber-600 text-amber-800 hover:bg-amber-300 dark:bg-amber-500 dark:text-amber-100 dark:hover:bg-amber-600',
21
- cyan: 'bg-cyan-600 text-cyan-800 hover:bg-cyan-300 dark:bg-cyan-500 dark:text-cyan-100 dark:hover:bg-cyan-600',
22
- green: 'bg-green-600 text-green-800 hover:bg-green-300 dark:bg-green-500 dark:text-green-100 dark:hover:bg-green-600',
17
+ blue: 'bg-blue-200 text-blue-800 group-hover:bg-blue-300 border border-blue-400 ',
18
+ grey: 'bg-neutral-200 text-neutral-800 group-hover:bg-neutral-300 border border-neutral-400 ',
19
+ purple: 'bg-purple-200 text-purple-800 group-hover:bg-purple-300 border border-purple-400 ',
20
+ pink: 'bg-pink-200 text-pink-800 group-hover:bg-pink-300 border border-pink-400 ',
21
+ amber: 'bg-amber-200 text-amber-800 group-hover:bg-amber-300 border border-amber-400 ',
22
+ cyan: 'bg-cyan-200 text-cyan-800 group-hover:bg-cyan-300 border border-cyan-400 ',
23
+ cyan200: 'bg-cyan-200 text-cyan-600 border border-cyan-400 border border-cyan-400 ',
24
+ green: 'bg-green-200 text-green-800 group-hover:bg-green-300 border border-green-400 ',
23
25
  }
24
26
 
25
-
26
-
27
27
  export default function Badge({
28
28
  leftIconVariant,
29
29
  leftIconColor,
@@ -55,7 +55,7 @@ export default function Badge({
55
55
  <Icon height={'h-4 w-4'} variant={leftIconVariant} strokeColor={leftIconColor} />
56
56
  </div>
57
57
  )}
58
- {children}
58
+ <Typography textStyle='h6'>{children}</Typography>
59
59
 
60
60
  {rightIconVariant && rightIconVariant !== 'none' && (
61
61
  <div className='ml-1'>
package/src/HDS/components/Cards/Misc/talkCard.js CHANGED
@@ -10,8 +10,8 @@ export default function TalkCard(props) {
10
10
 
11
11
  <div className=" ">
12
12
 
13
- <div className="grid rounded-3xl shadow bg-neutral-0 grid-cols-2 border border-neutral-200 min-w-[882px] ">
14
- <div className="px-8 py-6 border-r border-r-neutral-150" >
13
+ <div className="grid rounded-3xl shadow bg-neutral-0 grid-cols-1 tb:grid-cols-2 border border-neutral-200 w-full max-w-[882px] ">
14
+ <div className="px-8 py-6 border-b border-b-neutral-150 tb:border-0 tb:border-r tb:border-r-neutral-150" >
15
15
 
16
16
 
17
17
  <Badges
@@ -22,25 +22,29 @@ export default function TalkCard(props) {
22
22
  children={props.badges.label}
23
23
  />
24
24
 
25
- <Typography className='my-2 text-neutral-800' textStyle='h5'>{props.title}</Typography>
26
- <Typography className='my-2 text-neutral-600' textStyle='body1'>{props.para}</Typography>
25
+ <Typography className='my-2 text-blue-800' textStyle='h5'>{props.title}</Typography>
26
+ <Typography className='my-2 text-neutral-700' textStyle='body1'>{props.para}</Typography>
27
27
  </div>
28
28
 
29
- <div className="flex flex-col pt-[2.875rem] justify-between">
30
- <div className="pl-6 flex gap-6 mb-9 flex-col ">
31
- {props.speakerSet.map((value, i) => (
32
- <div key={i} className="">
29
+ <div className="flex flex-col pt-0 tb:pt-[2.875rem] justify-between">
30
+ {
31
+ props.speakerSet && (
32
+ <div className="pl-6 flex gap-6 mt-9 tb:mt-0 mb-9 flex-col ">
33
+ {props.speakerSet.map((value, i) => (
34
+ <div key={i} className="">
33
35
 
34
- <ProfileAvatar
35
- name={value.name}
36
- size='md'
37
- designation={value.designation}
38
- imageUrl={value.imageUrl}
39
- />
40
- </div>
36
+ <ProfileAvatar
37
+ name={value.name}
38
+ size='md'
39
+ designation={value.designation}
40
+ imageUrl={value.imageUrl}
41
+ />
42
+ </div>
41
43
 
42
- ))}
43
- </div>
44
+ ))}
45
+ </div>
46
+ )
47
+ }
44
48
  <div className=" w-full border-t border-t-neutral-150 p-6 flex flex-row justify-between items-center">
45
49
  <Typography textStyle='h6' className='text-blue-800'>{props.eventTime}</Typography>
46
50
  <HDSButton
@@ -50,7 +54,7 @@ export default function TalkCard(props) {
50
54
  state='default'
51
55
  size='sm'
52
56
  type="iconOnly"
53
-
57
+ label=''
54
58
  />
55
59
  </div>
56
60
  </div>
package/src/HDS/components/Hero/h1.js CHANGED
@@ -31,7 +31,6 @@ export default function Hero({ heroData, logo, scrollArrow, fontSize }) {
31
31
  {
32
32
  heroData.tag_line && (
33
33
  <div
34
-
35
34
  >
36
35
  <Typography textStyle="h6" as="h6" className={"pb-6 uppercase text-center db:text-left font-normal tb-l:text-left " + ((heroData.tag_line_color) ? heroData.tag_line_color : "") + ((heroData.video_url) ? " tb:text-center" : " tb:text-left")}
37
36
  >
package/src/HDS/components/Hero/h2.js CHANGED
@@ -137,8 +137,8 @@ export default function HeroSecondary({ heroData, logo, scrollArrow, fontSize })
137
137
 
138
138
  const imageCard = (heroData) => (
139
139
  heroData.imageUrl && (
140
- <div className="px-20 py-20">
141
- <img src={heroData.imageUrl} alt={heroData.imageAlt} />
140
+ <div className="">
141
+ <img src={heroData.imageUrl} alt={heroData.imageAlt} className='w-[560px] h-[580px] rounded-b-3xl' />
142
142
  </div>
143
143
  )
144
144
  )
@@ -150,7 +150,7 @@ export default function HeroSecondary({ heroData, logo, scrollArrow, fontSize })
150
150
  <div className={"max-w-7xl mx-auto rounded-3xl overflow-hidden " + ((heroData.bg_color) ? heroData.bg_color : "")} >
151
151
  <div className="w-full">
152
152
  <div className={"db:flex db:w-full tb-l:flex block" + ((heroData.video_url) ? " tb:block" : " tb:flex")}>
153
- <div className={"db:px-20 db:py-20 db:pr-0 tb-l:self-center tb-l:min-w-[400px] mx-auto db:ml-0 db:max-w-[625px] db:min-w-[625px] p-5 pt-10 z-[1] tb:p-16 tb-l:py-12" + ((heroData.video_url) ? " tb:max-w-[530px]" : " tb:ml-0 tb:max-w-[290px] tb:min-w-[310px] tb:pr-0")}
153
+ <div className={("w-full")}
154
154
  >
155
155
  {
156
156
  heroData.tag_line && (
package/src/HDS/components/Tables/tableB.js CHANGED
@@ -1,11 +1,12 @@
1
1
  import React from 'react';
2
2
  import { v4 as uuidv4 } from 'uuid';
3
3
  import { Typography } from '../../foundation/Typography'
4
+ import { Icon } from '../common-components/Icon'
4
5
 
5
6
  const test = (TABLE_HEADER) => (
6
7
  console.log(TABLE_HEADER[0]['title']),
7
8
  Object.keys(TABLE_HEADER[0]).map((key, value) => (
8
-
9
+
9
10
  <th
10
11
  key={key}
11
12
  scope="col"
@@ -48,32 +49,91 @@ export default function TableB(props) {
48
49
  </div>
49
50
 
50
51
  <div>
51
- <div className="-mx-4 mt-8 sm:-mx-0">
52
- <table className="min-w-full divide-y divide-gray-300 border">
52
+ <div className="-mx-4 mt-8 sm:-mx-0 bg-neutral-0 rounded-3xl ">
53
+ <table className="min-w-full shadow rounded-3xl ">
53
54
  <thead>
54
- <tr>
55
- {Object.keys(TABLE_HEADER[0]).map((key, value) => (
55
+ <tr className='divide-x divide-neutral-200 text-center rounded-t-3xl'>
56
+ {Object.keys(TABLE_HEADER).map((key, value) => (
56
57
  <th
57
58
  key={key}
58
59
  scope="col"
59
- className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 sm:table-cell"
60
+ className="px-8 py-6 sm:table-cell"
60
61
  >
61
- {}
62
+ <div className=''>
63
+ <div className='flex flex-col justify-center items-center text-center'>
64
+ <div className={'flex items-center gap-2'}>
65
+ {TABLE_HEADER[key]['icon'] &&
66
+ (
67
+ <Icon
68
+ height='h-6 w-6'
69
+ variant={TABLE_HEADER[key]['icon']}
70
+ strokeClass={TABLE_HEADER[key]['iconStrokeClass']} />
71
+ )
72
+ }
73
+ {
74
+ TABLE_HEADER[key]['title'] && key==0 && (
75
+ <Typography
76
+ textStyle='h5'
77
+ className={TABLE_HEADER[key]['title_text_color']}>
78
+ {TABLE_HEADER[key]['title']}
79
+ </Typography>)
80
+ }
81
+ {
82
+ TABLE_HEADER[key]['title'] && key!=0 && (
83
+ <Typography
84
+ textStyle='h5'
85
+ className={TABLE_HEADER[key]['title_text_color']}>
86
+ {TABLE_HEADER[key]['title']}
87
+ </Typography>)
88
+ }
89
+
90
+
91
+ </div>
92
+ <div className=' max-w-[10rem]'>
93
+ {TABLE_HEADER[key]['descr'] && (
94
+ <Typography
95
+ textStyle='body1'
96
+ className={TABLE_HEADER[key]['descr_text_color']}>
97
+ {TABLE_HEADER[key]['descr']}
98
+ </Typography>)}
99
+ </div>
100
+ </div>
101
+ </div>
62
102
  </th>
63
103
  ))}
64
104
  </tr>
65
105
  </thead>
66
- <tbody className="divide-y divide-gray-200 bg-white">
106
+ <tbody className="divide-y divide-neutral-200 rounded-b-3xl">
67
107
  {TABLE_VALUE.map((value) => (
68
- <tr key={uuidv4()}>
108
+ <tr className='divide-x divide-neutral-200' key={uuidv4()}>
69
109
  {Object.keys(value).map((key) => (
70
- <td
71
- key={uuidv4()}
72
- className=" py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-3"
73
- >
74
- {``}{value[key]}
110
+ <React.Fragment key={uuidv4()}>
111
+ {key === 'rowTitle' && (<td
112
+ key={uuidv4()}
113
+ className="px-8 py-7 w-[22.5rem] whitespace-pre-line "
114
+ >
115
+ <Typography className='max-w-[22rem] text-neutral-700' textStyle='body1c'>{value[key]}</Typography>
116
+
117
+ </td>)}
118
+
119
+ {key !== 'rowTitle' && (
120
+ <td
121
+ key={uuidv4()}
122
+ className="px-8 py-7 text-center"
123
+ >
124
+ {value[key]['text'] && (
125
+ <Typography className='text-neutral-700' textStyle='body1c'>{value[key]['text']}</Typography>
126
+
127
+ )}
128
+ {!value[key]['text'] && (
129
+ <div className='flex justify-center'>
130
+ <Icon height='h-5 w-5' variant={value[key]['iconVariant']} strokeClass={value[key]['iconStrokeClass']} />
131
+ </div>
132
+ )}
133
+
75
134
 
76
- </td>
135
+ </td>)}
136
+ </React.Fragment>
77
137
  ))}
78
138
  </tr>
79
139
  ))}
package/src/HDS/components/Tabs/tab.js CHANGED
@@ -8,7 +8,7 @@ export default function Tab(props){
8
8
  const tabs = Array.isArray(props.tabs) ? props.tabs : [];
9
9
  return (
10
10
  <div>
11
- <div className="tab:hidden">
11
+ <div className="md:hidden">
12
12
  <label htmlFor="tabs" className="sr-only">
13
13
  Select a tab
14
14
  </label >
@@ -24,7 +24,7 @@ export default function Tab(props){
24
24
  ))}
25
25
  </select>
26
26
  </div>
27
- <div className="hidden tab:block">
27
+ <div className="hidden md:block">
28
28
  <nav className="inline-flex gap-2 bg-neutral-0 p-2 rounded-full" aria-label="Tabs">
29
29
  {tabs.length && tabs.map((tab) => (
30
30
  <a
package/src/HDS/components/common-components/Icon/IconMap.js CHANGED
@@ -2353,7 +2353,7 @@ const iconReferenceMap = {
2353
2353
  HasuraBlueLogo: HasuraBlueLogoIcon,
2354
2354
  };
2355
2355
  export default function Icon ({ variant, height, strokeColor, strokeClass, className }){
2356
- const CurrentActiveIcon = iconReferenceMap[variant];
2356
+ const CurrentActiveIcon = iconReferenceMap[variant] ;
2357
2357
  const IconStrokeCLass = HDSColor(strokeClass);
2358
2358
  return (
2359
2359
  <div style={{ stroke: `${strokeColor}` }}>
@@ -2367,8 +2367,3 @@ Icon.propTypes = {
2367
2367
  fillColor: PropTypes.string,
2368
2368
  strokeColor: PropTypes.string,
2369
2369
  };
2370
-
2371
- Icon.defaultProps = {
2372
- strokeClass: 'stroke-neutral-0',
2373
- height: 'h-6 w-6'
2374
- };
package/src/HDS/foundation/ColorPalette/color.js CHANGED
@@ -577,7 +577,7 @@ const HDSColors = {
577
577
  "stroke-red-800": "stroke-red-800"
578
578
  };
579
579
 
580
- export default function HDSColor(color = 'bg-blue-600') {
580
+ export default function HDSColor(color = '') {
581
581
  if (!HDSColors[color]) {
582
582
  HDSColors[color] = color;
583
583
  console.log(color);