hds-web 1.1.4 → 1.1.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.
- package/dist/index.css +2 -2
- package/dist/index.es.css +2 -2
- package/dist/index.es.js +6 -6
- package/dist/index.js +6 -6
- package/package.json +1 -1
- package/src/HDS/components/BadgesCaption/badges.js +7 -7
- package/src/HDS/components/Buttons/button.js +1 -1
- package/src/HDS/components/Cards/BrandCard/brandCard.js +41 -0
- package/src/HDS/components/Cards/BrandCard/index.js +1 -0
- package/src/HDS/components/Cards/Dropdown/index.js +0 -0
- package/src/HDS/components/Cards/Misc/iconCard.js +81 -9
- package/src/HDS/components/Cards/Misc/talkCard.js +11 -6
- package/src/HDS/components/Cards/index.js +6 -1
- package/src/HDS/components/Headers/v3Header.js +180 -194
- package/src/HDS/components/Tables/tableA.js +6 -13
- package/src/HDS/components/Tables/tableB.js +92 -74
- package/src/styles/tailwind.css +49 -9
package/package.json
CHANGED
|
@@ -14,14 +14,14 @@ const iconClasses = {
|
|
|
14
14
|
};
|
|
15
15
|
|
|
16
16
|
const colorVariants = {
|
|
17
|
-
blue: 'bg-blue-200 text-blue-800 group-hover:bg-blue-300
|
|
18
|
-
grey: 'bg-neutral-200 text-neutral-800 group-hover:bg-neutral-300
|
|
19
|
-
purple: 'bg-purple-200 text-purple-800 group-hover:bg-purple-300
|
|
20
|
-
pink: 'bg-pink-200 text-pink-800 group-hover:bg-pink-300
|
|
21
|
-
amber: 'bg-amber-200 text-amber-800 group-hover:bg-amber-300
|
|
22
|
-
cyan: 'bg-cyan-200 text-cyan-800 group-hover:bg-cyan-300
|
|
17
|
+
blue: 'bg-blue-200 text-blue-800 group-hover:bg-blue-300 ',
|
|
18
|
+
grey: 'bg-neutral-200 text-neutral-800 group-hover:bg-neutral-300 ',
|
|
19
|
+
purple: 'bg-purple-200 text-purple-800 group-hover:bg-purple-300 ',
|
|
20
|
+
pink: 'bg-pink-200 text-pink-800 group-hover:bg-pink-300 ',
|
|
21
|
+
amber: 'bg-amber-200 text-amber-800 group-hover:bg-amber-300 ',
|
|
22
|
+
cyan: 'bg-cyan-200 text-cyan-800 group-hover:bg-cyan-300 ',
|
|
23
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
|
|
24
|
+
green: 'bg-green-200 text-green-800 group-hover:bg-green-300 ',
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
export default function Badge({
|
|
@@ -28,7 +28,7 @@ const Buttonclasses = {
|
|
|
28
28
|
},
|
|
29
29
|
'tonal': {
|
|
30
30
|
'default': {
|
|
31
|
-
'base': 'db:w-fit tb:w-fit w-full justify-center bg-blue-
|
|
31
|
+
'base': 'db:w-fit tb:w-fit w-full justify-center bg-blue-200 text-blue-600',
|
|
32
32
|
'hover': 'hover:bg-blue-700 hover:text-neutral-0 hover:shadow-md hover:shadow hover:transition-all hover:ease-out hover:duration-300',
|
|
33
33
|
'focus': 'focus:bg-blue-100 focus:text-blue-600 focus:shadow-[0px_0px_0px_4px_#DFE8FF] focus:outline-none',
|
|
34
34
|
},
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Icon } from "../../common-components/Icon";
|
|
3
|
+
import { HDSColor } from '../../../foundation/ColorPalette';
|
|
4
|
+
import { Typography } from '../../../foundation/Typography';
|
|
5
|
+
import PropTypes from 'prop-types';
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
export default function BrandCard(props) {
|
|
9
|
+
return (
|
|
10
|
+
<>
|
|
11
|
+
<div>
|
|
12
|
+
<div className="pt-10 db:pt-20">
|
|
13
|
+
<Typography textStyle="h6" as="h6" className="pb-6 db:pb-10 text-center text-neutral-400 uppercase">40+ of the fortune100 companies use hasura</Typography>
|
|
14
|
+
<div className=" grid grid-cols-2 tb:grid-cols-4 db:grid-cols-4 db:gap-x-8 db:gap-y-2"
|
|
15
|
+
>
|
|
16
|
+
{
|
|
17
|
+
props.imgArray.map((brand, index) => (
|
|
18
|
+
<div key={index}>
|
|
19
|
+
<img src={brand.imgSrc} alt={brand.imgAlt} />
|
|
20
|
+
</div>
|
|
21
|
+
))
|
|
22
|
+
}
|
|
23
|
+
</div>
|
|
24
|
+
</div>
|
|
25
|
+
</div>
|
|
26
|
+
</>
|
|
27
|
+
)
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
BrandCard.defaultProps = {
|
|
31
|
+
imgArray: [
|
|
32
|
+
{ imgSrc: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1682487186/hasura-con-2023/costco_eb2lmu.png', imgAlt: '' },
|
|
33
|
+
{ imgSrc: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1682487186/hasura-con-2023/verizon_sj4rgc.png', imgAlt: '' },
|
|
34
|
+
{ imgSrc: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1682487186/hasura-con-2023/costco_eb2lmu.png', imgAlt: '' },
|
|
35
|
+
{ imgSrc: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1682487186/hasura-con-2023/costco_eb2lmu.png', imgAlt: '' },
|
|
36
|
+
{ imgSrc: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1682487186/hasura-con-2023/costco_eb2lmu.png', imgAlt: '' },
|
|
37
|
+
{ imgSrc: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1682487186/hasura-con-2023/costco_eb2lmu.png', imgAlt: '' },
|
|
38
|
+
{ imgSrc: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1682487186/hasura-con-2023/costco_eb2lmu.png', imgAlt: '' },
|
|
39
|
+
{ imgSrc: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1682487186/hasura-con-2023/costco_eb2lmu.png', imgAlt: '' },
|
|
40
|
+
]
|
|
41
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {default as BrandCard} from './brandCard';
|
|
File without changes
|
|
@@ -1,22 +1,94 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { Icon } from "../../common-components/Icon";
|
|
3
|
-
import {HDSColor} from '../../../foundation/ColorPalette'
|
|
3
|
+
import { HDSColor } from '../../../foundation/ColorPalette'
|
|
4
4
|
import { Typography } from '../../../foundation/Typography'
|
|
5
|
+
import { HDSButton } from "../../Buttons";
|
|
5
6
|
|
|
7
|
+
const cardVariant = {
|
|
8
|
+
"withButton": {
|
|
9
|
+
'cardStyle': 'p-10 ',
|
|
10
|
+
'iconWidthStyle': 'h-20 w-20',
|
|
11
|
+
'iconStyle': 'h-10 w-10',
|
|
12
|
+
},
|
|
13
|
+
"withoutButton": {
|
|
14
|
+
'cardStyle': 'p-6',
|
|
15
|
+
'iconWidthStyle': 'h-12 w-12',
|
|
16
|
+
'iconStyle': 'h-6 w-6',
|
|
17
|
+
}
|
|
18
|
+
}
|
|
6
19
|
|
|
7
|
-
export default function
|
|
20
|
+
export default function IconCard(props) {
|
|
8
21
|
const iconBG = HDSColor(props.iconBg);
|
|
9
22
|
return (
|
|
10
|
-
<div
|
|
11
|
-
|
|
12
|
-
|
|
23
|
+
<div
|
|
24
|
+
className={`bg-neutral-0 rounded-3xl shadow ${cardVariant[props.cardType]['cardStyle']}`}
|
|
25
|
+
>
|
|
26
|
+
<div
|
|
27
|
+
className={`${iconBG} ${cardVariant[props.cardType]['iconWidthStyle']} w-12 h-12 flex items-center justify-center rounded-full mb-6`}
|
|
28
|
+
>
|
|
29
|
+
<Icon
|
|
30
|
+
height={`stroke-[1.5px] ${cardVariant[props.cardType]['iconStyle']}`}
|
|
31
|
+
variant={props.iconVariant}
|
|
32
|
+
strokeColor={props.iconStroke}
|
|
33
|
+
strokeClass={HDSColor(props.iconStrokeClass)} />
|
|
13
34
|
</div>
|
|
14
|
-
<div
|
|
15
|
-
|
|
16
|
-
|
|
35
|
+
<div
|
|
36
|
+
className="flex-1">
|
|
37
|
+
{props.cardType === 'withoutButton' ? (
|
|
38
|
+
<>
|
|
39
|
+
<Typography
|
|
40
|
+
textStyle="h5"
|
|
41
|
+
as="h5"
|
|
42
|
+
className="mb-1 text-blue-600">
|
|
43
|
+
{props.title}
|
|
44
|
+
</Typography>
|
|
45
|
+
<Typography
|
|
46
|
+
textStyle="body1"
|
|
47
|
+
className="text-neutral-1000">
|
|
48
|
+
{props.description}
|
|
49
|
+
</Typography>
|
|
50
|
+
</>
|
|
51
|
+
)
|
|
52
|
+
:
|
|
53
|
+
(
|
|
54
|
+
<>
|
|
55
|
+
<Typography
|
|
56
|
+
textStyle="h4"
|
|
57
|
+
as="h4"
|
|
58
|
+
className="mb-1 text-blue-800">
|
|
59
|
+
{props.title}
|
|
60
|
+
</Typography>
|
|
61
|
+
<Typography
|
|
62
|
+
textStyle="body1c"
|
|
63
|
+
className="text-neutral-1000">
|
|
64
|
+
{props.description}
|
|
65
|
+
</Typography>
|
|
66
|
+
</>
|
|
67
|
+
)
|
|
68
|
+
}
|
|
69
|
+
{props.cardType === 'withButton' && (
|
|
70
|
+
<div className="flex mt-7">
|
|
71
|
+
<HDSButton
|
|
72
|
+
label='Start free'
|
|
73
|
+
type='secondary'
|
|
74
|
+
leftIconVariant='none'
|
|
75
|
+
rightIconVariant='none'
|
|
76
|
+
state='default'
|
|
77
|
+
size='sm'
|
|
78
|
+
rightAnimatedArrow={true}
|
|
79
|
+
rightAnimatedArrowColor='#3970FD'
|
|
80
|
+
className=' mt-7'
|
|
81
|
+
/>
|
|
82
|
+
</div>
|
|
83
|
+
)}
|
|
84
|
+
|
|
17
85
|
</div>
|
|
18
|
-
</div>
|
|
19
86
|
|
|
87
|
+
</div>
|
|
20
88
|
)
|
|
89
|
+
}
|
|
21
90
|
|
|
91
|
+
IconCard.defaultProps = {
|
|
92
|
+
cardType: 'withoutButton',
|
|
93
|
+
iconStrokeClass: 'stroke-neutral-1000'
|
|
22
94
|
}
|
|
@@ -6,14 +6,16 @@ import { Time } from "../../../helpers/Time";
|
|
|
6
6
|
import { HDSButton } from '../../Buttons'
|
|
7
7
|
|
|
8
8
|
export default function TalkCard(props) {
|
|
9
|
+
let CardClass = ''
|
|
10
|
+
if (props.speakerSet === undefined && props.eventTime === undefined){
|
|
11
|
+
CardClass = 'flex';
|
|
12
|
+
}
|
|
13
|
+
else CardClass = 'grid shadow';
|
|
9
14
|
return (
|
|
10
15
|
|
|
11
16
|
<div className=" ">
|
|
12
|
-
|
|
13
|
-
|
|
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
|
-
|
|
16
|
-
|
|
17
|
+
<div className={`${CardClass} rounded-3xl bg-neutral-0 grid-cols-1 tb:grid-cols-2 border border-neutral-200 w-full max-w-[882px]`}>
|
|
18
|
+
<div className="px-8 py-6 border-b rounded-3xl border-b-neutral-150 tb:border-0 tb:border-r tb:border-r-neutral-150" >
|
|
17
19
|
<Badges
|
|
18
20
|
size={props.badges.size}
|
|
19
21
|
color={props.badges.color}
|
|
@@ -26,6 +28,9 @@ export default function TalkCard(props) {
|
|
|
26
28
|
<Typography className='my-2 text-neutral-700' textStyle='body1'>{props.para}</Typography>
|
|
27
29
|
</div>
|
|
28
30
|
|
|
31
|
+
{props.speakerSet &&
|
|
32
|
+
props.eventTime &&
|
|
33
|
+
|
|
29
34
|
<div className="flex flex-col pt-0 tb:pt-[2.875rem] justify-between">
|
|
30
35
|
{
|
|
31
36
|
props.speakerSet && (
|
|
@@ -57,7 +62,7 @@ export default function TalkCard(props) {
|
|
|
57
62
|
label=''
|
|
58
63
|
/>
|
|
59
64
|
</div>
|
|
60
|
-
</div>
|
|
65
|
+
</div>}
|
|
61
66
|
</div>
|
|
62
67
|
</div>
|
|
63
68
|
|