hds-web 1.12.2 → 1.12.4
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 +4 -4
- package/dist/index.js +4 -4
- package/package.json +1 -1
- package/src/HDS/components/Cards/Feedback/feedback.js +4 -4
- package/src/HDS/components/Cards/Misc/iconCard.js +1 -1
- package/src/HDS/components/Cards/Misc/iconCardButton.js +115 -0
- package/src/HDS/components/Cards/Misc/index.js +2 -1
- package/src/HDS/components/Carousels/customCarousel.js +3 -3
- package/src/HDS/components/Footers/v3Footer.js +7 -7
- package/src/HDS/components/Hero/index.js +1 -1
- package/src/HDS/modules/Cards/dataSourceCard.js +1 -0
- package/src/styles/tailwind.css +4 -0
- package/tailwind.config.js +1 -0
package/package.json
CHANGED
|
@@ -11,7 +11,7 @@ export default function FeedbackCard(props) {
|
|
|
11
11
|
logoBg = HDSColor(props.logoBg);
|
|
12
12
|
}
|
|
13
13
|
return (
|
|
14
|
-
<
|
|
14
|
+
<a href={props.caseStudyUrl} className='group bg-neutral-0 rounded-3xl shadow p-6 tb-l:p-10 grid mb-6 db-s:mb-0 last:mb-0 flex-1 max-w-[920px] mx-auto flex-col transition-all duration-300 ease-in-out hover:shadow-lg hover:translate-y-0.5'>
|
|
15
15
|
<div className=" self-start">
|
|
16
16
|
<ProfileAvatar
|
|
17
17
|
name={props.speakerName}
|
|
@@ -37,7 +37,7 @@ export default function FeedbackCard(props) {
|
|
|
37
37
|
</div>
|
|
38
38
|
<div className={"pt-4 mb-s:pt-0 " + ((props.dividerClass) ? "mb-s:pl-6" : "mb-s: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
|
|
42
42
|
label='Read case study'
|
|
43
43
|
type='secondaryLink'
|
|
@@ -52,10 +52,10 @@ export default function FeedbackCard(props) {
|
|
|
52
52
|
btnTextHoverClass= 'hover:text-blue-500'
|
|
53
53
|
animatedHoverStroke= 'group-hover:stroke-blue-500'
|
|
54
54
|
/>
|
|
55
|
-
</
|
|
55
|
+
</div>
|
|
56
56
|
</div>
|
|
57
57
|
</div>
|
|
58
58
|
</div>
|
|
59
|
-
</
|
|
59
|
+
</a>
|
|
60
60
|
)
|
|
61
61
|
}
|
|
@@ -136,7 +136,7 @@ export default function IconCard(props) {
|
|
|
136
136
|
|
|
137
137
|
(
|
|
138
138
|
<a href={((props.readMoreBtn && !props.button) ? props.readMoreBtn['cta_link'] : props.button[0]['cta_link'])}
|
|
139
|
-
className={`bg-neutral-0 group grid h-full transition-all ease-in-out rounded-3xl ${cardVariant[props.cardType]['cardStyle']} ` + ((props.cardBorder) ? props.cardBorder : 'shadow') + ((props.readMoreBtn || props.button) ? ' hover:shadow-lg hover:translate-y-0.5' : '')}
|
|
139
|
+
className={`bg-neutral-0 group grid h-full duration-300 transition-all ease-in-out rounded-3xl ${cardVariant[props.cardType]['cardStyle']} ` + ((props.cardBorder) ? props.cardBorder : 'shadow') + ((props.readMoreBtn || props.button) ? ' hover:shadow-lg hover:translate-y-0.5 ' : '')}
|
|
140
140
|
>
|
|
141
141
|
<div className=" self-start">
|
|
142
142
|
<div
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
3
|
+
import { Icon } from "../../common-components/Icon";
|
|
4
|
+
import { HDSColor } from '../../../foundation/ColorPalette'
|
|
5
|
+
import { Typography } from '../../../foundation/Typography'
|
|
6
|
+
import { HDSButton } from "../../Buttons";
|
|
7
|
+
import ReactMarkdown from "react-markdown";
|
|
8
|
+
|
|
9
|
+
const cardVariant = {
|
|
10
|
+
"withButton": {
|
|
11
|
+
'cardStyle': 'p-10 ',
|
|
12
|
+
'iconWidthStyle': 'h-20 w-20',
|
|
13
|
+
'iconStyle': 'h-10 w-10',
|
|
14
|
+
'titleTextStyle': 'h4',
|
|
15
|
+
'titleClasses': 'mb-1 text-hds-m-h4 tb:text-hds-t-h4 db:text-hds-d-h4',
|
|
16
|
+
'descTextStyle': 'body1c',
|
|
17
|
+
'descClasses': 'text-hds-m-body1c tb:text-hds-t-body1c db:text-hds-d-body1c'
|
|
18
|
+
},
|
|
19
|
+
"withoutButton": {
|
|
20
|
+
'cardStyle': 'p-6',
|
|
21
|
+
'iconWidthStyle': 'h-12 w-12',
|
|
22
|
+
'iconStyle': 'h-6 w-6',
|
|
23
|
+
'titleTextStyle': 'h5',
|
|
24
|
+
'titleClasses': 'mb-1 text-blue-600 text-hds-m-h5 tb:text-hds-t-h5 db:text-hds-d-h5',
|
|
25
|
+
'descTextStyle': 'body1',
|
|
26
|
+
'descClasses': 'text-neutral-1000 text-hds-m-body1 tb:text-hds-t-body1 db:text-hds-d-body1'
|
|
27
|
+
},
|
|
28
|
+
"sm": {
|
|
29
|
+
'cardStyle': 'p-6',
|
|
30
|
+
'iconWidthStyle': 'h-12 w-12',
|
|
31
|
+
'iconStyle': 'h-6 w-6',
|
|
32
|
+
'titleTextStyle': 'body3c',
|
|
33
|
+
'titleClasses': 'mb-1 text-neutral-800 text-hds-m-body3c-bold tb:text-hds-t-body3c-bold db:text-hds-d-body3c-bold',
|
|
34
|
+
'descTextStyle': 'body3',
|
|
35
|
+
'descClasses': 'text-neutral-800 text-hds-m-body3 tb:text-hds-t-body3 db:text-hds-d-body3'
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
export default function IconCardButton(props) {
|
|
40
|
+
const iconBG = props.iconBg ? HDSColor(props.iconBg) : '';
|
|
41
|
+
const textClass = props.textColorClass ? HDSColor(props.textColorClass) : 'text-neutral-1000';
|
|
42
|
+
return (
|
|
43
|
+
<>
|
|
44
|
+
<div>
|
|
45
|
+
{
|
|
46
|
+
props.imgUrl ? (
|
|
47
|
+
<div className={`${iconBG} ${cardVariant[props.cardType]['iconWidthStyle']} w-12 h-12 inline-flex p-1 items-center justify-center rounded-full mb-6`}>
|
|
48
|
+
<img src={props.imgUrl} alt={props.title} />
|
|
49
|
+
</div>
|
|
50
|
+
) : (
|
|
51
|
+
<div
|
|
52
|
+
className={`${iconBG} ${cardVariant[props.cardType]['iconWidthStyle']} w-12 h-12 flex items-center justify-center rounded-full mb-6`}
|
|
53
|
+
>
|
|
54
|
+
<Icon
|
|
55
|
+
height={`stroke-[1.5px] ${cardVariant[props.cardType]['iconStyle']}`}
|
|
56
|
+
variant={props.iconVariant}
|
|
57
|
+
strokeColor={props.iconStroke}
|
|
58
|
+
strokeClass={HDSColor(props.iconStrokeClass)} />
|
|
59
|
+
</div>
|
|
60
|
+
)
|
|
61
|
+
}
|
|
62
|
+
{props.cardType &&
|
|
63
|
+
(
|
|
64
|
+
<>
|
|
65
|
+
<Typography
|
|
66
|
+
textStyle={cardVariant[props.cardType]['titleTextStyle']}
|
|
67
|
+
className={`${cardVariant[props.cardType]['titleClasses']} ${textClass}`}
|
|
68
|
+
>
|
|
69
|
+
{props.title}
|
|
70
|
+
</Typography>
|
|
71
|
+
|
|
72
|
+
<Typography
|
|
73
|
+
textStyle={cardVariant[props.cardType]['descTextStyle']}
|
|
74
|
+
className={`${cardVariant[props.cardType]['descClasses']} ${textClass} [&>p]:${textClass} [&>p]:pb-2 last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 last:[&>ul>li]:pb-0 [&>p>a]:text-blue-600`}
|
|
75
|
+
>
|
|
76
|
+
<ReactMarkdown>
|
|
77
|
+
{props.description}
|
|
78
|
+
</ReactMarkdown>
|
|
79
|
+
</Typography>
|
|
80
|
+
</>
|
|
81
|
+
)
|
|
82
|
+
}
|
|
83
|
+
</div>
|
|
84
|
+
{
|
|
85
|
+
props.button && (
|
|
86
|
+
<div className="inline-flex pt-6">
|
|
87
|
+
<HDSButton
|
|
88
|
+
label={props.button.cta_text}
|
|
89
|
+
type={props.button.cta_type || 'secondary'}
|
|
90
|
+
leftIconVariant='none'
|
|
91
|
+
rightIconVariant='none'
|
|
92
|
+
state='default'
|
|
93
|
+
size='sm'
|
|
94
|
+
rightAnimatedArrow={true}
|
|
95
|
+
rightAnimatedArrowColor={props.button.rightAnimatedArrowColor || '#3970FD'}
|
|
96
|
+
btnBgColorClass={props.button.btnBg}
|
|
97
|
+
btnTextHoverClass={props.button.btnTextColorClass}
|
|
98
|
+
animatedHoverStroke={props.button.animatedHoverStroke}
|
|
99
|
+
btnTextColorClass={props.button.btnTextColorClass}
|
|
100
|
+
/>
|
|
101
|
+
</div>
|
|
102
|
+
)
|
|
103
|
+
}
|
|
104
|
+
</>
|
|
105
|
+
)
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
IconCardButton.defaultProps = {
|
|
109
|
+
cardType: 'withoutButton',
|
|
110
|
+
iconStrokeClass: 'stroke-neutral-1000',
|
|
111
|
+
iconVariant: 'cube01'
|
|
112
|
+
}
|
|
113
|
+
IconCardButton.propTypes = {
|
|
114
|
+
cardType: PropTypes.oneOf(['withoutButton', 'withButton', 'sm']),
|
|
115
|
+
}
|
|
@@ -2,4 +2,5 @@ export {default as TalkCard} from './talkCard';
|
|
|
2
2
|
export {default as TalkCard2} from './talkcard2';
|
|
3
3
|
export {default as IconCard} from './iconCard';
|
|
4
4
|
export {default as ImageCard} from './imageCard';
|
|
5
|
-
export {default as ImageBadgeCard} from './imageBadgeCard';
|
|
5
|
+
export {default as ImageBadgeCard} from './imageBadgeCard';
|
|
6
|
+
export {default as IconCardButton} from './iconCardButton';
|
|
@@ -77,7 +77,7 @@ export default function CustomCarousel(props) {
|
|
|
77
77
|
|
|
78
78
|
const maxVisibleCards = 6;
|
|
79
79
|
|
|
80
|
-
const arrowStyle = ' text-2xl z-10 bg-black h-10 ml-6 w-10 rounded-full bg-neutral-0
|
|
80
|
+
const arrowStyle = ' text-2xl z-10 bg-black h-10 w-10 ml-6 w-10 rounded-full bg-neutral-0 hover:bg-neutral-0 flex items-center justify-center shadow';
|
|
81
81
|
|
|
82
82
|
const disableButton = (current, dir) => {
|
|
83
83
|
if (dir === 'isLeft') {
|
|
@@ -106,7 +106,7 @@ export default function CustomCarousel(props) {
|
|
|
106
106
|
>
|
|
107
107
|
<span role="img" aria-label={`Arrow left `}>
|
|
108
108
|
{(
|
|
109
|
-
<Icon height={'h-6 w-6'} variant={'chevronleft'} strokeColor='#
|
|
109
|
+
<Icon height={'h-6 w-6'} variant={'chevronleft'} strokeColor='#6C737F' />
|
|
110
110
|
)}
|
|
111
111
|
</span>
|
|
112
112
|
</button>
|
|
@@ -124,7 +124,7 @@ export default function CustomCarousel(props) {
|
|
|
124
124
|
>
|
|
125
125
|
<span role="img" aria-label={`Arrow right `}>
|
|
126
126
|
{(
|
|
127
|
-
<Icon height={'h-6 w-6'} variant={'chevronright'} strokeColor='#
|
|
127
|
+
<Icon height={'h-6 w-6 stroke-[1.5]'} variant={'chevronright'} strokeColor='#6C737F' />
|
|
128
128
|
)}
|
|
129
129
|
</span>
|
|
130
130
|
</button>
|
|
@@ -80,7 +80,7 @@ export default function V3Footer(props) {
|
|
|
80
80
|
</div>
|
|
81
81
|
<div className='flex justify-between px-4 tb:px-0 tb:justify-start tb-l:justify-between flex-1 flex-wrap gap-y-10 tb:gap-y-16'>
|
|
82
82
|
{
|
|
83
|
-
props.footerLinks.map((footerLink, index) =>(
|
|
83
|
+
props.footerLinks.map((footerLink, index) => (
|
|
84
84
|
<div key={index} className='min-w-[130px] db-s:min-w-fit'>
|
|
85
85
|
<Typography textStyle='body3c-semi-bold' className='text-neutral-600'>{footerLink.title}</Typography>
|
|
86
86
|
{
|
|
@@ -98,7 +98,7 @@ export default function V3Footer(props) {
|
|
|
98
98
|
<div className='flex flex-col tb-m:flex-row items-center justify-between tb:pt-24'>
|
|
99
99
|
<div className='flex items-center justify-center pt-10 tb-m:pt-0 pb-4 tb-m:pb-0 tb-m:justify-start'>
|
|
100
100
|
{
|
|
101
|
-
socialShare.map((icon, index)=>(
|
|
101
|
+
socialShare.map((icon, index) => (
|
|
102
102
|
<a href={icon.linkUrl} className='mx-2 tb-l:mx-4 first:ml-0 last:mr-0 [&>svg>path]:fill-neutral-400 [&>svg>path]:hover:fill-neutral-600'>
|
|
103
103
|
{icon.icon}
|
|
104
104
|
</a>
|
|
@@ -109,10 +109,10 @@ export default function V3Footer(props) {
|
|
|
109
109
|
<>
|
|
110
110
|
<a href='https://status.hasura.io/' className=''>
|
|
111
111
|
<div className=' bg-neutral-0 rounded-full shadow hover:shadow-lg transition-all duration-300 px-4 py-2 inline-flex justify-center items-center'>
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
112
|
+
<div className='w-4 h-4 bg-green-400 rounded-full mr-2'></div>
|
|
113
|
+
<Typography textStyle='body3' className='text-neutral-1000'>{isItems?.status.description}</Typography>
|
|
114
|
+
</div>
|
|
115
|
+
</a>
|
|
116
116
|
</>
|
|
117
117
|
)}
|
|
118
118
|
<div>
|
|
@@ -305,4 +305,4 @@ V3Footer.defaultProps = {
|
|
|
305
305
|
]
|
|
306
306
|
},
|
|
307
307
|
],
|
|
308
|
-
}
|
|
308
|
+
}
|
package/src/styles/tailwind.css
CHANGED
package/tailwind.config.js
CHANGED