hds-web 1.5.9 → 1.6.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (11) hide show
  1. package/dist/index.css +2 -2
  2. package/dist/index.es.css +2 -2
  3. package/dist/index.es.js +6 -6
  4. package/dist/index.js +6 -6
  5. package/package.json +1 -1
  6. package/src/HDS/components/Cards/Link/link.js +15 -7
  7. package/src/HDS/components/Cards/Misc/iconCard.js +8 -8
  8. package/src/HDS/components/Hero/h3.js +145 -136
  9. package/src/HDS/foundation/ColorPalette/color.js +97 -1
  10. package/src/HDS/modules/TextCard/textCard.js +62 -28
  11. package/src/styles/tailwind.css +540 -0
package/src/HDS/modules/TextCard/textCard.js CHANGED
@@ -1,4 +1,4 @@
1
- import React from "react";
1
+ import React, { Fragment, useState } from "react";
2
2
  import { Typography } from "../../foundation/Typography";
3
3
  import { HDSColor } from "../../foundation/ColorPalette";
4
4
  import { HDSButton } from '../../components/Buttons';
@@ -6,12 +6,14 @@ import { Icon } from '../../components/common-components/Icon';
6
6
 
7
7
  export default function TextCard(props) {
8
8
  const titleColor = HDSColor(props.title_color);
9
+ const currentImgActive = (props.feature_cards_links && props.feature_cards_links[0]?.title )? props.feature_cards_links[0].title : null;
10
+ const [imgActive, setImgActive] = useState(currentImgActive);
9
11
  return (
10
12
  <>
11
13
  {
12
14
  props.feature_cards_links && (<Typography textStyle="h3" as="h3" className={`${titleColor} pb-8 tb-l:w-1/2`}>{props.title}</Typography>)
13
15
  }
14
- <div className={'grid grid-cols-1 tb:grid-cols-2 gap-10' + ((props.feature_cards_links) ? ' tb:gap-0 tb-l:gap-0' : ' tb:gap-16 tb-l:gap-36')}>
16
+ <div className={'grid grid-cols-1 tb-l:grid-cols-2 gap-10' + ((props.feature_cards_links) ? ' tb:gap-0 tb-l:gap-0' : ' tb:gap-16 tb-l:gap-36')}>
15
17
  <div>
16
18
  {
17
19
  !props.feature_cards_links && (<Typography textStyle="h3" as="h3" className={`${titleColor} pb-6`}>{props.title}</Typography>)
@@ -30,35 +32,37 @@ export default function TextCard(props) {
30
32
  const iconColor = HDSColor(descList.icon_color);
31
33
  return (
32
34
  <div className='flex items-start pb-4 last:pb-0' key={j}>
33
- <div className={`${iconBgColor} w-6 h-6 rounded-full mr-2 flex items-center justify-center`}>
35
+ <div className={`${iconBgColor} w-6 h-6 min-w-[24px] min-h-[24px] rounded-full mr-2 flex items-center justify-center`}>
34
36
  <Icon
35
37
  height={`h-3 w-3 stroke-[1.5px]` }
36
38
  variant={descList.icon_name}
37
- strokeColor={iconColor}
39
+ strokeClass={iconColor}
38
40
  />
39
41
  </div>
40
42
  <Typography textStyle='body1' className='text-neutral-1000'>{descList.description}</Typography>
41
43
  </div>
42
44
  )
43
45
  })
46
+
44
47
  }
45
48
  </div>
46
49
  )
47
50
  }
48
51
  {
49
52
  props.feature_cards_links && (
50
- <div className='border border-neutral-150 rounded-2xl tb:rounded-e-none'>
53
+ <div className='tb:border border-neutral-150 rounded-2xl tb-l:rounded-e-none'>
51
54
  {
52
55
  props.feature_cards_links.map((list, i) => {
53
56
  const currentStrokeColor = HDSColor(list.icon_color)
57
+ const imgBgColor = HDSColor(list.tab_img_bg_class)
54
58
  return (
55
- <div className='border-b border-b-neutral-150 last:border-b-0'>
56
- <div className='m-2 p-6 rounded-lg hover:bg-neutral-100' key={i}>
59
+ <div className='border-b border-b-neutral-150 last:border-b-0 cursor-pointer' onClick={()=>setImgActive(list.title)}>
60
+ <div className={'m-2 p-0 tb:p-6 rounded-lg hover:bg-neutral-50' + ((imgActive === list.title) ? " bg-neutral-100" : "")} key={i}>
57
61
  <div className='flex items-center pb-4'>
58
62
  <Icon
59
63
  height={`w-6 h-6 mr-2 stroke-[1.5px]` }
60
64
  variant={list.icon_name}
61
- strokeColor={currentStrokeColor}
65
+ strokeClass={currentStrokeColor}
62
66
  />
63
67
  <Typography textStyle='h5' as='h5' className='text-neutral-1000'>{list.title}</Typography>
64
68
  </div>
@@ -69,11 +73,11 @@ export default function TextCard(props) {
69
73
  const iconColor = HDSColor(descList.icon_color);
70
74
  return (
71
75
  <div className='flex items-start pb-4 last:pb-0' key={j}>
72
- <div className={`${iconBgColor} w-5 h-5 rounded-full mr-2 flex items-center justify-center`}>
76
+ <div className={`${iconBgColor} w-5 h-5 min-w-[20px] min-h-[20px] rounded-full mr-2 flex items-center justify-center`}>
73
77
  <Icon
74
78
  height={`h-3 w-3 stroke-[1.5px]` }
75
79
  variant={descList.icon_name}
76
- strokeColor={iconColor}
80
+ strokeClass={iconColor}
77
81
  />
78
82
  </div>
79
83
  <Typography textStyle='body3' className='text-neutral-1000'>{descList.description}</Typography>
@@ -82,19 +86,31 @@ export default function TextCard(props) {
82
86
  })
83
87
  }
84
88
  {
85
- props.button && (
86
- <HDSButton
87
- label={props.button.cta_text}
88
- type='primaryLink'
89
- leftIconVariant='none'
90
- rightIconVariant='none'
91
- state='default'
92
- size='md'
93
- rightAnimatedArrow={true}
94
- rightAnimatedArrowColor='#3970FD'
95
- />
89
+ list.cta_text && list.cta_link && (
90
+ <a href={list.cta_link} className="flex">
91
+ <HDSButton
92
+ label={list.cta_text}
93
+ type='secondaryLink'
94
+ leftIconVariant='none'
95
+ rightIconVariant='none'
96
+ state='default'
97
+ size='md'
98
+ rightAnimatedArrow={true}
99
+ rightAnimatedArrowColor='#3970FD'
100
+ btnTextColorClass="text-blue-500"
101
+ animatedHoverStroke='group-hover:stroke-blue-600'
102
+ />
103
+ </a>
104
+ )
105
+ }
106
+ {
107
+ list.tab_img_url && (
108
+ <div className={`${imgBgColor} tb-l:hidden p-12 rounded-2xl mt-8`}>
109
+ <img src={list.tab_img_url} alt={list.title} />
110
+ </div>
96
111
  )
97
112
  }
113
+
98
114
  </div>
99
115
  </div>
100
116
  )
@@ -118,14 +134,32 @@ export default function TextCard(props) {
118
134
  )
119
135
  }
120
136
  </div>
121
- <div>
122
- {
123
- props.img_url && (
124
- <img src={props.img_url} alt={props.title} />
125
- )
126
- }
137
+ {
138
+ props.feature_cards_links ? (
139
+ <>
140
+ {
141
+ props.feature_cards_links.map((img, i) => {
142
+ const imgBgColor = HDSColor(img.tab_img_bg_class)
143
+ return (
144
+ <Fragment key={i}>
145
+ {
146
+ imgActive === img.title && img.tab_img_url && (<div className={`${imgBgColor} hidden h-full p-12 tb-l:flex items-center rounded-2xl tb-l:rounded-s-none`}><img src={img.tab_img_url} alt={img.title} /></div>)
147
+ }
148
+ </Fragment>
149
+ )
150
+ })
151
+ }
152
+ </>
153
+ ) : (
154
+ <div>
155
+ {props.img_url && (
156
+ <img src={props.img_url} alt={props.title} />
157
+ )}
158
+ </div>
159
+ )
160
+ }
127
161
  </div>
128
- </div>
162
+
129
163
  </>
130
164
  )
131
165
  }