hds-web 1.3.7 → 1.3.8
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/Buttons/button.js +2 -2
- package/src/HDS/components/Cards/Link/link.js +1 -1
- package/src/HDS/components/Cards/Misc/talkcard2.js +46 -47
- package/src/HDS/components/Cards/TalkDetailCard/talkDetailCard.js +19 -13
- package/src/HDS/components/Hero/h3.js +6 -6
- package/src/HDS/components/Tables/index.js +2 -1
- package/src/HDS/components/Tables/tableD.js +427 -0
- package/src/styles/tailwind.css +97 -0
package/package.json
CHANGED
|
@@ -163,8 +163,8 @@ export default function Button(props) {
|
|
|
163
163
|
)}
|
|
164
164
|
|
|
165
165
|
{leftIconVariant && leftIconVariant !== 'none' && type=='iconOnly' && (
|
|
166
|
-
<div className={
|
|
167
|
-
<Icon variant={leftIconVariant} height='group-active:stroke-neutral-0 stroke-[1.5px] group-hover:transition-all group-hover:ease-in-out group-hover:duration-100 group-hover:stroke-neutral-0 group-focus:stroke-neutral-0
|
|
166
|
+
<div className={``}>
|
|
167
|
+
<Icon variant={leftIconVariant} height={`${ANIMATED_ARR_CLASSES['icon1'][`${size}`]} group-active:stroke-neutral-0 stroke-[1.5px] group-hover:transition-all group-hover:ease-in-out group-hover:duration-100 group-hover:stroke-neutral-0 group-focus:stroke-neutral-0`} strokeColor={leftIconColor} />
|
|
168
168
|
</div>
|
|
169
169
|
)}
|
|
170
170
|
{label}
|
|
@@ -13,7 +13,7 @@ export default function LinkCard(props) {
|
|
|
13
13
|
<>
|
|
14
14
|
<a
|
|
15
15
|
href={props.linkUrl}
|
|
16
|
-
className={`${cardHoverClasses} ${cardBgColorClass}
|
|
16
|
+
className={`${cardHoverClasses} ${cardBgColorClass} rounded-2xl border border-neutral-150 p-6 block`}
|
|
17
17
|
>
|
|
18
18
|
{props.brandImageUrl ?
|
|
19
19
|
(
|
|
@@ -5,13 +5,15 @@ import { ProfileAvatar } from '../../Avatars'
|
|
|
5
5
|
import { Time } from "../../../helpers/Time";
|
|
6
6
|
import { HDSButton } from '../../Buttons'
|
|
7
7
|
import ReactMarkdown from "react-markdown";
|
|
8
|
+
import { HDSColor } from "../../../foundation/ColorPalette";
|
|
8
9
|
|
|
9
10
|
export default function TalkCard2(props) {
|
|
10
11
|
let CardClass = ''
|
|
11
|
-
if (props.speakerSet
|
|
12
|
-
CardClass = 'tb-l:justify-
|
|
12
|
+
if (props.speakerSet) {
|
|
13
|
+
CardClass = 'tb-l:justify-between';
|
|
13
14
|
}
|
|
14
|
-
else CardClass = 'tb-l:justify-
|
|
15
|
+
else CardClass = 'tb-l:justify-center';
|
|
16
|
+
|
|
15
17
|
|
|
16
18
|
return (
|
|
17
19
|
|
|
@@ -27,7 +29,7 @@ export default function TalkCard2(props) {
|
|
|
27
29
|
color={value.color}
|
|
28
30
|
leftIconVariant={value.leftIconVariant}
|
|
29
31
|
leftIconColor={value.leftIconColor}
|
|
30
|
-
leftIconColorClass={value.leftIconColorClass}
|
|
32
|
+
leftIconColorClass={HDSColor(value.leftIconColorClass)}
|
|
31
33
|
children={value.label}
|
|
32
34
|
|
|
33
35
|
/>
|
|
@@ -38,41 +40,36 @@ export default function TalkCard2(props) {
|
|
|
38
40
|
</div>
|
|
39
41
|
<div className="tb-l:w-[520px] h-full flex flex-col tb:justify-between">
|
|
40
42
|
<div>
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
{props.para}
|
|
50
|
-
</Typography>
|
|
51
|
-
}
|
|
43
|
+
<Typography className='my-2 text-blue-800' textStyle='h5'>{props.title}</Typography>
|
|
44
|
+
{props.para &&
|
|
45
|
+
<Typography
|
|
46
|
+
className='line-clamp-3 text-neutral-700'
|
|
47
|
+
textStyle='body1c'>
|
|
48
|
+
{props.para}
|
|
49
|
+
</Typography>
|
|
50
|
+
}
|
|
52
51
|
</div>
|
|
53
52
|
<div className="pb-6 flex">
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
53
|
+
{props.readUrl &&
|
|
54
|
+
props.para && (
|
|
55
|
+
<a href={props.readUrl}>
|
|
56
|
+
<HDSButton
|
|
57
|
+
label='Read more'
|
|
58
|
+
type='secondaryLink'
|
|
59
|
+
leftIconVariant='none'
|
|
60
|
+
rightIconVariant='none'
|
|
61
|
+
state='default'
|
|
62
|
+
size='md'
|
|
63
|
+
rightAnimatedArrow={true}
|
|
64
|
+
rightAnimatedArrowColor='#3970FD'
|
|
65
|
+
className='mt-4'
|
|
66
|
+
btnTextColorClass='text-blue-500'
|
|
67
|
+
animatedHoverStroke='stroke-blue-500'
|
|
68
|
+
/>
|
|
69
|
+
</a>
|
|
70
|
+
)}
|
|
71
71
|
</div>
|
|
72
|
-
|
|
73
|
-
|
|
74
72
|
</div>
|
|
75
|
-
|
|
76
73
|
</div>
|
|
77
74
|
|
|
78
75
|
<div className={`${CardClass} divide-y divide-neutral-150 flex tb-l:w-full flex-col pt-0`} >
|
|
@@ -94,19 +91,21 @@ export default function TalkCard2(props) {
|
|
|
94
91
|
</div>
|
|
95
92
|
)
|
|
96
93
|
}
|
|
97
|
-
|
|
94
|
+
{props.eventTime && <div className=" w-full pl-8 p-6 flex flex-row justify-between items-center">
|
|
98
95
|
<Typography textStyle='h6' className='text-blue-800 uppercase'>{props.eventTime}</Typography>
|
|
99
|
-
|
|
100
|
-
<
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
96
|
+
{props.addCalendarUrl &&
|
|
97
|
+
<a href={props.addCalendarUrl}>
|
|
98
|
+
<HDSButton
|
|
99
|
+
leftIconVariant='calendarplus02'
|
|
100
|
+
leftIconColor="#1E56E3"
|
|
101
|
+
rightIconVariant='none'
|
|
102
|
+
state='default'
|
|
103
|
+
size='sm'
|
|
104
|
+
type="iconOnly"
|
|
105
|
+
label=''
|
|
106
|
+
/>
|
|
107
|
+
</a>
|
|
108
|
+
}
|
|
110
109
|
</div>}
|
|
111
110
|
</div>
|
|
112
111
|
</div>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
|
-
import {HDSColor} from '../../../foundation/ColorPalette';
|
|
3
|
+
import { HDSColor } from '../../../foundation/ColorPalette';
|
|
4
4
|
import { Badges } from '../../BadgesCaption';
|
|
5
5
|
import { ProfileAvatar } from '../../Avatars'
|
|
6
6
|
import { Typography } from "../../../foundation/Typography";
|
|
@@ -12,16 +12,22 @@ export default function TalkDetailCard(props) {
|
|
|
12
12
|
return (
|
|
13
13
|
<div className="grid grid-cols-1 tb:grid-cols-2 gap-16 db:gap-28 tb:gap-16">
|
|
14
14
|
<div>
|
|
15
|
-
{
|
|
16
|
-
props.
|
|
17
|
-
<
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
15
|
+
{props.badges &&
|
|
16
|
+
props.badges.map((value, index) => (
|
|
17
|
+
<div key={index} className='flex whitespace-nowrap'>
|
|
18
|
+
<Badges
|
|
19
|
+
size={value.size}
|
|
20
|
+
color={value.color}
|
|
21
|
+
leftIconVariant={value.leftIconVariant}
|
|
22
|
+
leftIconColor={value.leftIconColor}
|
|
23
|
+
leftIconColorClass={HDSColor(value.leftIconColorClass)}
|
|
24
|
+
children={value.label}
|
|
25
|
+
|
|
26
|
+
/>
|
|
27
|
+
</div>
|
|
28
|
+
))
|
|
24
29
|
}
|
|
30
|
+
|
|
25
31
|
{
|
|
26
32
|
props.tag_line && (<Typography textStyle='h6' className='text-blue-600 uppercase pt-4 pb-2'>{props.tag_line}</Typography>)
|
|
27
33
|
}
|
|
@@ -30,7 +36,7 @@ export default function TalkDetailCard(props) {
|
|
|
30
36
|
}
|
|
31
37
|
{
|
|
32
38
|
props.social_share && (
|
|
33
|
-
<div className='flex items-center
|
|
39
|
+
<div className='flex items-center '>
|
|
34
40
|
{
|
|
35
41
|
props.social_share.map((socialShare, i) => (
|
|
36
42
|
<a href={socialShare.share_url} className='mx-2 first:ml-0 last:mr-0'>
|
|
@@ -44,7 +50,7 @@ export default function TalkDetailCard(props) {
|
|
|
44
50
|
{
|
|
45
51
|
props.speaker_card && (
|
|
46
52
|
<div>
|
|
47
|
-
<Typography textStyle='h6' as='h6' className='uppercase text-neutral-500 pb-6'>speakers</Typography>
|
|
53
|
+
<Typography textStyle='h6' as='h6' className='uppercase text-neutral-500 pb-6 pt-8 tb:pt-14'>speakers</Typography>
|
|
48
54
|
{
|
|
49
55
|
props.speaker_card.map((speaker, i) => (
|
|
50
56
|
<div className='pb-4 last:pb-0'>
|
|
@@ -52,7 +58,7 @@ export default function TalkDetailCard(props) {
|
|
|
52
58
|
name={speaker.name}
|
|
53
59
|
size='md'
|
|
54
60
|
designation={speaker.designation}
|
|
55
|
-
imageUrl={speaker.
|
|
61
|
+
imageUrl={speaker.imageUrl}
|
|
56
62
|
avatarVariant="circle"
|
|
57
63
|
/>
|
|
58
64
|
</div>
|
|
@@ -50,9 +50,9 @@ export default function HeroCapability(props) {
|
|
|
50
50
|
const LinkCardsFn = (heroData) => {
|
|
51
51
|
return (
|
|
52
52
|
heroData.linkCards && (
|
|
53
|
-
<div className="flex mt-16 gap-6
|
|
53
|
+
<div className="flex px-8 tb:px-0 tb:justify-center overflow-scroll flex-row mt-16 gap-6 tb:flex-row ">
|
|
54
54
|
{heroData.linkCards.map((card, index) => (
|
|
55
|
-
<div key={index} className="w-full">
|
|
55
|
+
<div key={index} className="w-full pb-2 min-w-[11.5rem] max-w-[22.313rem]">
|
|
56
56
|
<LinkCard
|
|
57
57
|
titleTextColor= {card.titleTextColor}
|
|
58
58
|
descTextColor={card.descTextColor}
|
|
@@ -115,17 +115,17 @@ export default function HeroCapability(props) {
|
|
|
115
115
|
<div className={`${bgClass} max-w-7xl rounded-3xl`} >
|
|
116
116
|
{props.heroData.navTabs &&
|
|
117
117
|
|
|
118
|
-
<div className='
|
|
118
|
+
<div className='py-5 db:p-20 tb:p-10 flex flex-col shadow rounded-2xl'>
|
|
119
119
|
|
|
120
|
-
<div className='flex overflow-
|
|
121
|
-
<div className={`${bgTabClass}
|
|
120
|
+
<div className='flex px-8 tb:px-0 overflow-scroll scrollbar-hide tb-l:justify-center justify-start'>
|
|
121
|
+
<div className={`${bgTabClass} rounded-[32px]`}>
|
|
122
122
|
<Tab
|
|
123
123
|
onTabClick={handleTabClick}
|
|
124
124
|
tabs={props.heroData.navTabs}
|
|
125
125
|
/>
|
|
126
126
|
</div>
|
|
127
127
|
</div>
|
|
128
|
-
<div className='flex flex-col-reverse pt-6 tb:flex tb:flex-row tb:items-center tb:pt-10 tb:justify-between'>
|
|
128
|
+
<div className='flex flex-col-reverse pt-6 px-8 tb:px-0 tb:flex tb:flex-row tb:items-center tb:pt-10 tb:justify-between'>
|
|
129
129
|
<div className=' mt-3 db:max-w-[488px] tb:w-1/2'>
|
|
130
130
|
{props.heroData.tabContent &&
|
|
131
131
|
props.heroData.tabContent[activeTab] &&
|