hds-web 1.33.9 → 1.34.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 +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/src/HDS/components/Cards/StoryCard/index.js +2 -2
- package/src/HDS/components/Cards/StoryCard/storysm.js +96 -94
- package/src/HDS/components/Hero/herolinkcard.js +5 -1
- package/src/styles/tailwind.css +10 -7
package/package.json
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { default as StoryCardSM } from
|
|
2
|
-
export { default as StoryCardXL } from
|
|
1
|
+
export { default as StoryCardSM } from "./storysm";
|
|
2
|
+
export { default as StoryCardXL } from "./storyxl";
|
|
@@ -1,105 +1,107 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
3
2
|
import { Icon } from "../../common-components/Icon";
|
|
4
|
-
import { HDSColor } from
|
|
5
|
-
import { Typography } from
|
|
6
|
-
import {
|
|
7
|
-
import { HDSButton } from '../../Buttons'
|
|
3
|
+
import { HDSColor } from "../../../foundation/ColorPalette";
|
|
4
|
+
import { Typography } from "../../../foundation/Typography";
|
|
5
|
+
import { HDSButton } from "../../Buttons";
|
|
8
6
|
|
|
9
7
|
export default function StoryCard(props) {
|
|
10
|
-
|
|
8
|
+
return (
|
|
9
|
+
<>
|
|
10
|
+
<a
|
|
11
|
+
href={props.linkUrl}
|
|
12
|
+
target={props.isExternalLink ? "_blank" : ""}
|
|
13
|
+
rel={props.isExternalLink ? "noopener noreferrer" : ""}
|
|
14
|
+
className={`rounded-2xl hover:shadow-xl p-8 h-full flex flex-col justify-between group/sc border border-neutral-200 hover:border-opacity-0 min-h-[260px] group`}
|
|
15
|
+
>
|
|
11
16
|
<>
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
className=" opacity-0 group-hover/sc:opacity-100 transition-opacity duration-[350ms] ">
|
|
41
|
-
<Typography textStyle='body3-medium' className='hidden text-neutral-400 group-hover/sc:block'>{props.iconTag}</Typography>
|
|
42
|
-
</div>
|
|
43
|
-
</div>
|
|
44
|
-
)
|
|
45
|
-
}
|
|
46
|
-
</div>
|
|
47
|
-
)
|
|
48
|
-
}
|
|
17
|
+
<div className="flex items-center justify-between pb-5">
|
|
18
|
+
{props.brandImageUrl && props.brandImageAlt && (
|
|
19
|
+
<div className="max-h-[64px]">
|
|
20
|
+
<img
|
|
21
|
+
src={props.brandImageUrl}
|
|
22
|
+
alt={props.brandImageAlt}
|
|
23
|
+
// className="max-h-[44px] brightness-0 transition ease-in-out duration-300 group-hover:brightness-100"
|
|
24
|
+
loading="lazy"
|
|
25
|
+
className="max-h-[44px] transition ease-in-out duration-300"
|
|
26
|
+
/>
|
|
27
|
+
</div>
|
|
28
|
+
)}
|
|
29
|
+
{props.iconVariant && (
|
|
30
|
+
<div className="hidden tb:flex flex-row relative ">
|
|
31
|
+
{props.iconTag && (
|
|
32
|
+
<div className="gap-2 items-center transition-all duration-[350ms] group-hover/sc:opacity-100 inline-flex flex-row translate-x-0 group-hover/sc:-translate-x-5">
|
|
33
|
+
<Icon
|
|
34
|
+
height={"w-6 h-6 stroke-[1.5px]"}
|
|
35
|
+
variant={props.iconArrowVariant ?? ""}
|
|
36
|
+
strokeClass="stroke-neutral-400"
|
|
37
|
+
/>
|
|
38
|
+
<div className=" opacity-0 group-hover/sc:opacity-100 transition-opacity duration-[350ms] ">
|
|
39
|
+
<Typography
|
|
40
|
+
textStyle="body3-medium"
|
|
41
|
+
className="hidden text-neutral-400 group-hover/sc:block"
|
|
42
|
+
>
|
|
43
|
+
{props.iconTag}
|
|
44
|
+
</Typography>
|
|
49
45
|
</div>
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
</
|
|
46
|
+
</div>
|
|
47
|
+
)}
|
|
48
|
+
</div>
|
|
49
|
+
)}
|
|
50
|
+
</div>
|
|
51
|
+
{props.description && (
|
|
52
|
+
<div>
|
|
53
|
+
<div className="translate-y-10 group-hover/sc:translate-y-0 duration-300 transition-all">
|
|
54
|
+
<Typography
|
|
55
|
+
textStyle="body1c"
|
|
56
|
+
className={`${HDSColor(props.descTextColor)} mt-2`}
|
|
57
|
+
>
|
|
58
|
+
{props.description}
|
|
59
|
+
</Typography>
|
|
60
|
+
</div>
|
|
61
|
+
<div className="translate-y-8 transition-all group-hover/sc:translate-y-0 opacity-0 group-hover/sc:opacity-100 duration-300 group-hover/sc:flex">
|
|
62
|
+
<div className="flex">
|
|
63
|
+
<HDSButton
|
|
64
|
+
label={props.readMoreBtn.cta_text ?? "Read More"}
|
|
65
|
+
type="secondaryLink"
|
|
66
|
+
leftIconVariant="none"
|
|
67
|
+
rightIconVariant="none"
|
|
68
|
+
state="default"
|
|
69
|
+
size="sm"
|
|
70
|
+
rightAnimatedArrow={true}
|
|
71
|
+
rightAnimatedArrowColor="#3970FD"
|
|
72
|
+
animatedHoverStroke="#3970FD"
|
|
73
|
+
btnTextColorClass="text-blue-500"
|
|
74
|
+
btnTextHoverClass=""
|
|
75
|
+
className=" mt-[14px]"
|
|
76
|
+
/>
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
</div>
|
|
80
|
+
)}
|
|
84
81
|
</>
|
|
85
|
-
|
|
82
|
+
</a>
|
|
83
|
+
</>
|
|
84
|
+
);
|
|
86
85
|
}
|
|
87
86
|
|
|
88
87
|
StoryCard.defaultProps = {
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
88
|
+
descTextColor: "text-neutral-700",
|
|
89
|
+
isExternalLink: "false",
|
|
90
|
+
iconTag: "Customer Stories",
|
|
91
|
+
titleTextColor: "",
|
|
92
|
+
brandImageUrl:
|
|
93
|
+
"https://res.cloudinary.com/dh8fp23nd/image/upload/v1690909443/hasura-design-system/swiggy_m2hjxy.png",
|
|
94
|
+
brandImageAlt: "pipe",
|
|
95
|
+
linkUrl:
|
|
96
|
+
"?path=/story/hasura-design-system--hasura-design-system&globals=backgrounds.value:!hex(3b5998)",
|
|
97
|
+
iconVariant: "videorecorder",
|
|
98
|
+
iconStrokeColor: "blue-500",
|
|
99
|
+
iconArrowVariant: "home03",
|
|
100
|
+
iconArrowStrokeColor: "blue-400",
|
|
101
|
+
title: "Webinar",
|
|
102
|
+
description:
|
|
103
|
+
"Model Level Authorization System for GraphQL with Hasura Model Level Authorization System for ",
|
|
104
|
+
readMoreBtn: {
|
|
105
|
+
cta_text: "Read More",
|
|
106
|
+
},
|
|
105
107
|
};
|
|
@@ -117,6 +117,10 @@ export default function HeroLinkCard(props) {
|
|
|
117
117
|
);
|
|
118
118
|
};
|
|
119
119
|
|
|
120
|
+
const videoPlayerClass = props?.isLargeVideoPlayer
|
|
121
|
+
? "grid items-center relative db:max-w-[600px] tb:w-3/5 transition-opacity duration-700 ease-linear "
|
|
122
|
+
: "grid items-center relative db:max-w-[500px] tb:w-1/2 transition-opacity duration-700 ease-linear ";
|
|
123
|
+
|
|
120
124
|
return (
|
|
121
125
|
<div>
|
|
122
126
|
<div className="flex flex-col-reverse tb-l:flex tb-l:flex-row tb-l:justify-between gap-4">
|
|
@@ -127,7 +131,7 @@ export default function HeroLinkCard(props) {
|
|
|
127
131
|
>
|
|
128
132
|
{props && tabCard(props)}
|
|
129
133
|
</div>
|
|
130
|
-
<div className=
|
|
134
|
+
<div className={videoPlayerClass}>
|
|
131
135
|
<Typography
|
|
132
136
|
textStyle="h2"
|
|
133
137
|
as="h2"
|
package/src/styles/tailwind.css
CHANGED
|
@@ -10590,9 +10590,9 @@ select{
|
|
|
10590
10590
|
--tw-border-opacity: 0;
|
|
10591
10591
|
}
|
|
10592
10592
|
|
|
10593
|
-
.group\/badge:hover .group-hover\/badge\:bg-
|
|
10593
|
+
.group\/badge:hover .group-hover\/badge\:bg-purple-500{
|
|
10594
10594
|
--tw-bg-opacity: 1;
|
|
10595
|
-
background-color: rgb(
|
|
10595
|
+
background-color: rgb(140 73 250 / var(--tw-bg-opacity));
|
|
10596
10596
|
}
|
|
10597
10597
|
|
|
10598
10598
|
.group\/card:hover .group-hover\/card\:bg-blue-200{
|
|
@@ -10645,11 +10645,6 @@ select{
|
|
|
10645
10645
|
background-color: rgb(219 198 255 / var(--tw-bg-opacity));
|
|
10646
10646
|
}
|
|
10647
10647
|
|
|
10648
|
-
.group\/badge:hover .group-hover\/badge\:bg-purple-500{
|
|
10649
|
-
--tw-bg-opacity: 1;
|
|
10650
|
-
background-color: rgb(140 73 250 / var(--tw-bg-opacity));
|
|
10651
|
-
}
|
|
10652
|
-
|
|
10653
10648
|
.group:hover .group-hover\:bg-gradient-to-t{
|
|
10654
10649
|
background-image: linear-gradient(to top, var(--tw-gradient-stops));
|
|
10655
10650
|
}
|
|
@@ -11077,6 +11072,10 @@ select{
|
|
|
11077
11072
|
width: 50%;
|
|
11078
11073
|
}
|
|
11079
11074
|
|
|
11075
|
+
.tb\:w-3\/5{
|
|
11076
|
+
width: 60%;
|
|
11077
|
+
}
|
|
11078
|
+
|
|
11080
11079
|
.tb\:w-5{
|
|
11081
11080
|
width: 1.25rem;
|
|
11082
11081
|
}
|
|
@@ -12531,6 +12530,10 @@ select{
|
|
|
12531
12530
|
max-width: 540px;
|
|
12532
12531
|
}
|
|
12533
12532
|
|
|
12533
|
+
.db\:max-w-\[600px\]{
|
|
12534
|
+
max-width: 600px;
|
|
12535
|
+
}
|
|
12536
|
+
|
|
12534
12537
|
.db\:max-w-\[625px\]{
|
|
12535
12538
|
max-width: 625px;
|
|
12536
12539
|
}
|