hds-web 1.6.0 → 1.6.2

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.
Files changed (10) 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 +4 -4
  7. package/src/HDS/components/Hero/h3.js +144 -135
  8. package/src/HDS/foundation/ColorPalette/color.js +193 -1
  9. package/src/HDS/modules/TextCard/textCard.js +59 -25
  10. package/src/styles/tailwind.css +909 -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,7 +32,7 @@ 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}
@@ -41,19 +43,21 @@ export default function TextCard(props) {
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]` }
@@ -69,7 +73,7 @@ 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}
@@ -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
  }