hds-web 1.19.0 → 1.19.1
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 +1 -1
- package/dist/index.es.css +1 -1
- package/dist/index.es.js +2 -2
- package/dist/index.js +2 -2
- package/package.json +1 -1
- package/src/HDS/assets/icons/zap.svg +1 -1
- package/src/HDS/components/Cards/Feedback/feedback.js +2 -2
- package/src/HDS/components/Cards/Menu/flyoutB.js +64 -29
- package/src/HDS/components/Headers/v3Header.js +5 -25
- package/src/HDS/foundation/Typography/Typography.js +1 -1
- package/src/HDS/modules/navCard/navCard.js +2 -2
- package/src/styles/tailwind.css +21 -21
- package/tailwind.config.js +7 -6
package/package.json
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M12.9999 2L4.09332 12.6879C3.74451 13.1064 3.57011 13.3157 3.56744 13.4925C3.56512 13.6461 3.63359 13.7923 3.75312 13.8889C3.89061 14 4.16304 14 4.7079 14H11.9999L10.9999 22L19.9064 11.3121C20.2552 10.8936 20.4296 10.6843 20.4323 10.5075C20.4346 10.3539 20.3661 10.2077 20.2466 10.1111C20.1091 10 19.8367 10 19.2918 10H11.9999L12.9999 2Z"
|
|
2
|
+
<path d="M12.9999 2L4.09332 12.6879C3.74451 13.1064 3.57011 13.3157 3.56744 13.4925C3.56512 13.6461 3.63359 13.7923 3.75312 13.8889C3.89061 14 4.16304 14 4.7079 14H11.9999L10.9999 22L19.9064 11.3121C20.2552 10.8936 20.4296 10.6843 20.4323 10.5075C20.4346 10.3539 20.3661 10.2077 20.2466 10.1111C20.1091 10 19.8367 10 19.2918 10H11.9999L12.9999 2Z" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
3
|
</svg>
|
|
@@ -31,11 +31,11 @@ export default function FeedbackCard(props) {
|
|
|
31
31
|
<div className={`${HDSColor(props.dividerClass)} mb-2`}></div>
|
|
32
32
|
)
|
|
33
33
|
}
|
|
34
|
-
<div className={"
|
|
34
|
+
<div className={"tb:flex pt-1 tb:pt-0 items-start" + ((props.dividerClass) ? " pt-6" : "mt-0")}>
|
|
35
35
|
<div className={"border border-neutral-150 p-2 flex items-center justify-center rounded-2xl " + logoBg + ((props.dividerClass) ? " w-[72px] h-[56px] min-w-[72px]" : " w-[112px] h-[90px] min-w-[112px] ")}>
|
|
36
36
|
<img className="max-h-[20px]" src={props.brandImgUrl} alt={props.brandImgAlt}/>
|
|
37
37
|
</div>
|
|
38
|
-
<div className={"pt-4
|
|
38
|
+
<div className={"pt-4 tb:pt-0 " + ((props.dividerClass) ? "tb:pl-6" : "tb:pl-8")}>
|
|
39
39
|
<Typography textStyle={((props.dividerClass) ? "body2" : "body1")} className='text-neutral-600 pb-1'>{props.blurb}</Typography>
|
|
40
40
|
<div className="flex">
|
|
41
41
|
<HDSButton
|
|
@@ -18,7 +18,8 @@ export default function FlyoutB(props) {
|
|
|
18
18
|
{ cta_leftVariantIcon: 'home03', cta_leftVariantIconColor: '#6C737F', cta_text: 'Button 1' },
|
|
19
19
|
|
|
20
20
|
|
|
21
|
-
]
|
|
21
|
+
],
|
|
22
|
+
tertiaryBtn
|
|
22
23
|
} = props;
|
|
23
24
|
|
|
24
25
|
return (
|
|
@@ -51,41 +52,75 @@ export default function FlyoutB(props) {
|
|
|
51
52
|
<Typography className='mt-2 text-neutral-600 relative z-[2]' textStyle='body3'>{mainDescription}</Typography>
|
|
52
53
|
</div>
|
|
53
54
|
</a>
|
|
55
|
+
<div className="flex flex-col gap-2">
|
|
56
|
+
{secondaryBtn.map((btn, index) => (
|
|
57
|
+
<a key={index} href={btn.cta_link} className="group/btn justify-around cursor-pointer px-2 ">
|
|
54
58
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
59
|
+
<div className=" flex items-center p-4 hover:bg-neutral-150 rounded-xl ">
|
|
60
|
+
<div className="flex w-full justify-between items-center z-[2]">
|
|
61
|
+
<div
|
|
62
|
+
className="flex rounded-lg gap-2 items-center ">
|
|
63
|
+
{btn.cta_leftVariantIcon && (
|
|
64
|
+
<Icon
|
|
65
|
+
height={'h-5 w-5 group-hover/btn:stroke-blue-500 stroke-2 '}
|
|
66
|
+
variant={btn.cta_leftVariantIcon}
|
|
67
|
+
strokeClass='stroke-neutral-500'
|
|
68
|
+
/>
|
|
69
|
+
)}
|
|
70
|
+
|
|
71
|
+
<Typography
|
|
72
|
+
textStyle='body3c-medium'
|
|
73
|
+
className='text-neutral-900 group-hover/btn:text-blue-600 hover:transition-all hover:duration-300 hover:ease-in-out whitespace-nowrap overflow-clip'>
|
|
74
|
+
{btn.cta_text}
|
|
75
|
+
</Typography>
|
|
76
|
+
</div>
|
|
77
|
+
<div className="flex group-hover/btn:translate-x-1 transform transition-all duration-200 ease-in-out ">
|
|
63
78
|
<Icon
|
|
64
|
-
height={'h-
|
|
65
|
-
variant={
|
|
66
|
-
strokeClass='stroke-
|
|
79
|
+
height={'h-4 w-4 stroke-2 invisible group-hover/btn:visible transition-all ease-in-out '}
|
|
80
|
+
variant={'chevronright'}
|
|
81
|
+
strokeClass={'stroke-blue-500'}
|
|
67
82
|
/>
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
</a>))}
|
|
89
|
+
|
|
90
|
+
{tertiaryBtn && tertiaryBtn.map((t, index) => (
|
|
91
|
+
<a key={index} href={t.cta_link} className="group/btn justify-around cursor-pointer px-2 pb-2 ">
|
|
92
|
+
|
|
93
|
+
<div className=" flex items-center p-4 hover:bg-neutral-150 rounded-xl ">
|
|
94
|
+
<div className="flex w-full justify-between items-center z-[2]">
|
|
95
|
+
<div
|
|
96
|
+
className="flex rounded-lg gap-2 items-center ">
|
|
97
|
+
{t.cta_leftVariantIcon && (
|
|
98
|
+
<Icon
|
|
99
|
+
height={'h-5 w-5 group-hover/btn:stroke-blue-500 stroke-2 '}
|
|
100
|
+
variant={t.cta_leftVariantIcon}
|
|
101
|
+
strokeClass='stroke-neutral-500'
|
|
102
|
+
/>
|
|
103
|
+
)}
|
|
104
|
+
|
|
105
|
+
<Typography
|
|
106
|
+
textStyle='body3c-medium'
|
|
107
|
+
className='text-neutral-900 group-hover/btn:text-blue-600 hover:transition-all hover:duration-300 hover:ease-in-out whitespace-nowrap overflow-clip'>
|
|
108
|
+
{t.cta_text}
|
|
109
|
+
</Typography>
|
|
110
|
+
</div>
|
|
111
|
+
<div className="flex group-hover/btn:translate-x-1 transform transition-all duration-200 ease-in-out ">
|
|
112
|
+
<Icon
|
|
113
|
+
height={'h-4 w-4 stroke-2 invisible group-hover/btn:visible transition-all ease-in-out '}
|
|
114
|
+
variant={'chevronright'}
|
|
115
|
+
strokeClass={'stroke-blue-500'}
|
|
116
|
+
/>
|
|
117
|
+
</div>
|
|
82
118
|
</div>
|
|
83
119
|
</div>
|
|
84
|
-
</div>
|
|
85
120
|
|
|
86
|
-
|
|
87
|
-
</a>))}
|
|
88
121
|
|
|
122
|
+
</a>))}
|
|
123
|
+
</div>
|
|
89
124
|
</div>
|
|
90
125
|
|
|
91
126
|
);
|
|
@@ -8,33 +8,10 @@ import { motion } from "framer-motion"
|
|
|
8
8
|
import { AnimatePresence } from 'framer-motion';
|
|
9
9
|
// import { AlgoliaSearch } from '../../helpers/AlgoliaSearch';
|
|
10
10
|
|
|
11
|
-
const solutions = [
|
|
12
|
-
{
|
|
13
|
-
name: 'Analytics',
|
|
14
|
-
description: 'Get a better understanding of where your traffic is coming from.',
|
|
15
|
-
href: '#',
|
|
16
|
-
icon: 'home03',
|
|
17
|
-
},
|
|
18
|
-
{
|
|
19
|
-
name: 'Engagement',
|
|
20
|
-
description: 'Speak directly to your customers in a more meaningful way.',
|
|
21
|
-
href: '#',
|
|
22
|
-
icon: 'home03',
|
|
23
|
-
},
|
|
24
|
-
{
|
|
25
|
-
name: 'Security',
|
|
26
|
-
description: 'Your customers’ data will be safe and secure.',
|
|
27
|
-
href: '#',
|
|
28
|
-
icon: 'home03'
|
|
29
|
-
},
|
|
30
|
-
]
|
|
31
|
-
|
|
32
11
|
function classNames(...classes) {
|
|
33
12
|
return classes.filter(Boolean).join(' ')
|
|
34
13
|
}
|
|
35
14
|
|
|
36
|
-
|
|
37
|
-
|
|
38
15
|
export default function V3Header(props) {
|
|
39
16
|
const listSize = props.HEADER_LIST.length;
|
|
40
17
|
const [mobileNavOpen, setmobileNavOpen] = useState(false);
|
|
@@ -277,7 +254,7 @@ export default function V3Header(props) {
|
|
|
277
254
|
|
|
278
255
|
return (
|
|
279
256
|
<div className="relative mx-auto">
|
|
280
|
-
<div className={`flex items-center ${HDSColor(props.headerBg)} justify-between py-4 db:py-
|
|
257
|
+
<div className={`flex items-center ${HDSColor(props.headerBg)} justify-between py-4 db:py-3 tb-l:justify-start`}>
|
|
281
258
|
<div className='flex flex-row justify-between items-center w-full tb-l:w-fit'>
|
|
282
259
|
<div>
|
|
283
260
|
|
|
@@ -505,8 +482,11 @@ V3Header.defaultProps = {
|
|
|
505
482
|
primaryBtnLabel: 'Hasura Platform',
|
|
506
483
|
primaryBtnCTA:'/products',
|
|
507
484
|
strokeClass: 'stroke-neutral-800',
|
|
485
|
+
tertiaryBtn: [
|
|
486
|
+
{ cta_leftVariantIcon: 'checksquarebroken', cta_leftVariantIconColor: '#6C737F', cta_text: 'Compare Plans', cta_link:'/pricing' }
|
|
487
|
+
],
|
|
508
488
|
secondaryBtn: [
|
|
509
|
-
{ cta_leftVariantIcon: '
|
|
489
|
+
{ cta_leftVariantIcon: 'zap', cta_leftVariantIconColor: '#6C737F', cta_text: 'Deployment Options', cta_link: '/products/deployment' }
|
|
510
490
|
],
|
|
511
491
|
},
|
|
512
492
|
secondaryCardArr:
|
|
@@ -43,7 +43,7 @@ export default function Typography(props) {
|
|
|
43
43
|
'body3c-medium': 'text-hds-m-body3c-medium tb:text-hds-t-body3c-medium db:text-hds-d-body3c-medium',
|
|
44
44
|
'body3c-semi-bold': 'text-hds-m-body3c-semi-bold tb:text-hds-t-body3c-semi-bold db:text-hds-d-body3c-semi-bold',
|
|
45
45
|
'body3c-bold': 'text-hds-m-body3c-bold tb:text-hds-t-body3c-bold db:text-hds-d-body3c-bold',
|
|
46
|
-
|
|
46
|
+
'quote': 'font-petrona italic text-hds-m-quote tb:text-hds-t-quote db:text-hds-d-quote',
|
|
47
47
|
'code1': 'text-hds-m-code1 tb:text-hds-t-code1 db:text-hds-d-code1',
|
|
48
48
|
'code2': 'text-hds-m-code2 tb:text-hds-t-code2 db:text-hds-d-code2',
|
|
49
49
|
}
|
|
@@ -15,9 +15,9 @@ export default function NavCard(props) {
|
|
|
15
15
|
return (
|
|
16
16
|
<>
|
|
17
17
|
<div className=''>
|
|
18
|
-
{tabContent.title && <Typography textStyle='
|
|
18
|
+
{tabContent.title && <Typography textStyle='h4' className={HDSColor(tabContent.title_color)}>{tabContent.title}</Typography>}
|
|
19
19
|
|
|
20
|
-
{tabContent.subTitle && <Typography textStyle='
|
|
20
|
+
{tabContent.subTitle && <Typography textStyle='body1' className={ 'mt-2 ' + HDSColor(tabContent.sub_title_color)}>{tabContent.subTitle}</Typography>}
|
|
21
21
|
{tabContent.readMore_cta && <div className="flex">
|
|
22
22
|
<a href={tabContent.readMore_cta_link ?? ''} >
|
|
23
23
|
<HDSButton
|
package/src/styles/tailwind.css
CHANGED
|
@@ -6464,6 +6464,10 @@ select{
|
|
|
6464
6464
|
padding-top: 0px;
|
|
6465
6465
|
}
|
|
6466
6466
|
|
|
6467
|
+
.pt-1{
|
|
6468
|
+
padding-top: 0.25rem;
|
|
6469
|
+
}
|
|
6470
|
+
|
|
6467
6471
|
.pt-10{
|
|
6468
6472
|
padding-top: 2.5rem;
|
|
6469
6473
|
}
|
|
@@ -6789,8 +6793,8 @@ select{
|
|
|
6789
6793
|
|
|
6790
6794
|
.text-hds-m-quote{
|
|
6791
6795
|
font-size: 1.125rem;
|
|
6792
|
-
line-height: 1.
|
|
6793
|
-
letter-spacing: -0.
|
|
6796
|
+
line-height: 1.5;
|
|
6797
|
+
letter-spacing: -0.016em;
|
|
6794
6798
|
font-weight: 400;
|
|
6795
6799
|
}
|
|
6796
6800
|
|
|
@@ -10220,18 +10224,6 @@ select{
|
|
|
10220
10224
|
.mb-s\:rounded-tr-none{
|
|
10221
10225
|
border-top-right-radius: 0px;
|
|
10222
10226
|
}
|
|
10223
|
-
|
|
10224
|
-
.mb-s\:pl-6{
|
|
10225
|
-
padding-left: 1.5rem;
|
|
10226
|
-
}
|
|
10227
|
-
|
|
10228
|
-
.mb-s\:pl-8{
|
|
10229
|
-
padding-left: 2rem;
|
|
10230
|
-
}
|
|
10231
|
-
|
|
10232
|
-
.mb-s\:pt-0{
|
|
10233
|
-
padding-top: 0px;
|
|
10234
|
-
}
|
|
10235
10227
|
}
|
|
10236
10228
|
|
|
10237
10229
|
@media (min-width: 400px){
|
|
@@ -10696,6 +10688,14 @@ select{
|
|
|
10696
10688
|
padding-left: 3.5rem;
|
|
10697
10689
|
}
|
|
10698
10690
|
|
|
10691
|
+
.tb\:pl-6{
|
|
10692
|
+
padding-left: 1.5rem;
|
|
10693
|
+
}
|
|
10694
|
+
|
|
10695
|
+
.tb\:pl-8{
|
|
10696
|
+
padding-left: 2rem;
|
|
10697
|
+
}
|
|
10698
|
+
|
|
10699
10699
|
.tb\:pr-0{
|
|
10700
10700
|
padding-right: 0px;
|
|
10701
10701
|
}
|
|
@@ -10973,8 +10973,8 @@ select{
|
|
|
10973
10973
|
|
|
10974
10974
|
.tb\:text-hds-t-quote{
|
|
10975
10975
|
font-size: 1.125rem;
|
|
10976
|
-
line-height: 1.
|
|
10977
|
-
letter-spacing: -0.
|
|
10976
|
+
line-height: 1.5;
|
|
10977
|
+
letter-spacing: -0.016em;
|
|
10978
10978
|
font-weight: 400;
|
|
10979
10979
|
}
|
|
10980
10980
|
|
|
@@ -11748,9 +11748,9 @@ select{
|
|
|
11748
11748
|
padding-bottom: 5rem;
|
|
11749
11749
|
}
|
|
11750
11750
|
|
|
11751
|
-
.db\:py-
|
|
11752
|
-
padding-top:
|
|
11753
|
-
padding-bottom:
|
|
11751
|
+
.db\:py-3{
|
|
11752
|
+
padding-top: 0.75rem;
|
|
11753
|
+
padding-bottom: 0.75rem;
|
|
11754
11754
|
}
|
|
11755
11755
|
|
|
11756
11756
|
.db\:pb-0{
|
|
@@ -12034,8 +12034,8 @@ select{
|
|
|
12034
12034
|
|
|
12035
12035
|
.db\:text-hds-d-quote{
|
|
12036
12036
|
font-size: 1.5rem;
|
|
12037
|
-
line-height:
|
|
12038
|
-
letter-spacing: -0.
|
|
12037
|
+
line-height: 1.5;
|
|
12038
|
+
letter-spacing: -0.016em;
|
|
12039
12039
|
font-weight: 400;
|
|
12040
12040
|
}
|
|
12041
12041
|
|
package/tailwind.config.js
CHANGED
|
@@ -155,6 +155,7 @@ module.exports = {
|
|
|
155
155
|
},
|
|
156
156
|
letterSpacing: {
|
|
157
157
|
tightest: '-.02em',
|
|
158
|
+
tighter2: '-0.016em',
|
|
158
159
|
tighter: '-.015em',
|
|
159
160
|
tight: '-.01em',
|
|
160
161
|
normal: '0',
|
|
@@ -794,20 +795,20 @@ module.exports = {
|
|
|
794
795
|
|
|
795
796
|
// quote-style
|
|
796
797
|
'hds-m-quote': ['1.125rem', {
|
|
797
|
-
lineHeight: '1.
|
|
798
|
-
letterSpacing: '-0.
|
|
798
|
+
lineHeight: '1.5',
|
|
799
|
+
letterSpacing: '-0.016em',
|
|
799
800
|
fontWeight: '400',
|
|
800
801
|
fontStyle: 'italic',
|
|
801
802
|
}],
|
|
802
803
|
'hds-t-quote': ['1.125rem', {
|
|
803
|
-
lineHeight: '1.
|
|
804
|
-
letterSpacing: '-0.
|
|
804
|
+
lineHeight: '1.5',
|
|
805
|
+
letterSpacing: '-0.016em',
|
|
805
806
|
fontWeight: '400',
|
|
806
807
|
fontStyle: 'italic',
|
|
807
808
|
}],
|
|
808
809
|
'hds-d-quote': ['1.5rem', {
|
|
809
|
-
lineHeight: '
|
|
810
|
-
letterSpacing: '-0.
|
|
810
|
+
lineHeight: '1.5',
|
|
811
|
+
letterSpacing: '-0.016em',
|
|
811
812
|
fontWeight: '400',
|
|
812
813
|
fontStyle: 'italic',
|
|
813
814
|
}],
|