hds-web 1.5.3 → 1.5.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (8) hide show
  1. package/dist/index.css +2 -2
  2. package/dist/index.es.css +2 -2
  3. package/dist/index.es.js +1 -1
  4. package/dist/index.js +1 -1
  5. package/package.json +1 -1
  6. package/src/HDS/components/Hero/h3.js +38 -28
  7. package/src/HDS/components/Tabs/tab.js +35 -14
  8. package/src/styles/tailwind.css +26 -41
package/src/HDS/components/Hero/h3.js CHANGED
@@ -7,27 +7,28 @@ import { Tab } from '../../components/Tabs';
7
7
  import PropTypes from 'prop-types';
8
8
  import { LinkCard } from '../Cards/Link';
9
9
 
10
- const tabCard = (tabContent) => (
10
+
11
+ const tabCard = (Content) => (
11
12
  <>
12
13
  <div className='tb:px-3'>
13
- {tabContent.title &&
14
+ {Content.title &&
14
15
  <Typography
15
16
  textStyle='h2'
16
- className={HDSColor(tabContent.title_color)}>
17
- {tabContent.title}
17
+ className={HDSColor(Content.titleTextColor)}>
18
+ {Content.title}
18
19
  </Typography>}
19
20
 
20
- {tabContent.sub_title &&
21
+ {Content.subTitle &&
21
22
  <Typography
22
23
  textStyle='sub2'
23
- className={`mt-2 ${HDSColor(tabContent.sub_title_color)}`}>
24
- {tabContent.sub_title}
24
+ className={`mt-2 ${HDSColor(Content.subTitleTextColor)}`}>
25
+ {Content.subTitle}
25
26
  </Typography>}
26
27
  </div>
27
- {tabContent.btnLabel &&
28
+ {Content.btnLabel &&
28
29
  <div className='flex pl-3 pt-6'>
29
30
  <HDSButton
30
- label={tabContent.btnLabel}
31
+ label={Content.btnLabel}
31
32
  type='secondary'
32
33
  leftIconVariant='none'
33
34
  rightIconVariant='none'
@@ -46,15 +47,16 @@ const tabCard = (tabContent) => (
46
47
  )
47
48
 
48
49
  export default function HeroCapability(props) {
50
+ console.log(props.heroData);
49
51
 
50
52
  const LinkCardsFn = (heroData) => {
51
53
  return (
52
54
  heroData.linkCards && (
53
- <div className="flex px-8 tb:px-0 tb:justify-center overflow-scroll flex-row mt-16 gap-6 tb:flex-row ">
55
+ <div className="flex px-8 tb:px-0 tb:justify-center overflow-auto scrollbar-hide flex-row mt-16 gap-6 tb:flex-row ">
54
56
  {heroData.linkCards.map((card, index) => (
55
57
  <div key={index} className="w-full pb-2 min-w-[11.5rem] max-w-[22.313rem]">
56
58
  <LinkCard
57
- titleTextColor= {card.titleTextColor}
59
+ titleTextColor= {card.titleTextColor}
58
60
  descTextColor={card.descTextColor}
59
61
  linkUrl={card.linkUrl}
60
62
  cardBgColor={card.cardBgColor}
@@ -90,38 +92,45 @@ export default function HeroCapability(props) {
90
92
  else return;
91
93
  // Perform any other actions based on the clicked tab
92
94
  }
93
- let bgClass = '';
95
+ let heroBgColorClass = '';
94
96
  let bgTabClass = '';
95
- let video_url = '';
96
- let video_poster = '';
97
+ let videoUrl = '';
98
+ let videoPoster = '';
97
99
  let img_url = '';
98
- if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['bg_color']){
99
- bgClass = HDSColor(props.heroData.tabContent[activeTab]['bg_color'])
100
+ let pillColorClass= '';
101
+ if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['heroBgColor']){
102
+ heroBgColorClass = HDSColor(props.heroData.tabContent[activeTab]['heroBgColor'])
100
103
  }
101
- if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['bg_color_tab']){
102
- bgTabClass = HDSColor(props.heroData.tabContent[activeTab]['bg_color_tab'])
104
+ if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['bgColorTab']){
105
+ bgTabClass = HDSColor(props.heroData.tabContent[activeTab]['bgColorTab'])
103
106
  }
104
- if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['video_url']){
105
- video_url = props.heroData.tabContent[activeTab]['video_url']
107
+ if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['videoUrl']){
108
+ videoUrl = props.heroData.tabContent[activeTab]['videoUrl']
106
109
  }
107
- if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['video_poster']){
108
- video_poster = props.heroData.tabContent[activeTab]['video_poster']
110
+ if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['videoPoster']){
111
+ videoPoster = props.heroData.tabContent[activeTab]['videoPoster']
109
112
  }
110
113
  if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['img_url']){
111
114
  img_url = props.heroData.tabContent[activeTab]['img_url']
112
115
  }
116
+ if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['pillColor']){
117
+ pillColorClass = props.heroData.tabContent[activeTab]['pillColor']
118
+ }
113
119
 
114
120
  return (
115
- <div className={`${bgClass} max-w-7xl rounded-3xl`} >
121
+ <div className={`${(heroBgColorClass)} max-w-7xl rounded-3xl`} >
122
+ {/* <div className={`${(heroBgColorClass)} max-w-7xl rounded-3xl bg-gradient-to-br from-green-500 to-green-900`} > */}
116
123
  {props.heroData.navTabs &&
117
124
 
118
125
  <div className='py-5 db:p-20 tb:p-10 flex flex-col shadow rounded-2xl'>
119
126
 
120
127
  <div className='flex px-8 tb:px-0 overflow-scroll scrollbar-hide tb-l:justify-center justify-start'>
121
- <div className={`${bgTabClass} rounded-[32px]`}>
128
+ <div className={`${bgTabClass} p-1 rounded-[32px]`}>
122
129
  <Tab
123
130
  onTabClick={handleTabClick}
124
131
  tabs={props.heroData.navTabs}
132
+ bgColorTab={props.heroData.bgColorTab}
133
+ pillColor={pillColorClass}
125
134
  />
126
135
  </div>
127
136
  </div>
@@ -133,15 +142,16 @@ export default function HeroCapability(props) {
133
142
  </div>
134
143
  <div className=' db:max-w-[540px] tb:w-1/2 '>
135
144
  <MediaBox
136
- video_url = {video_url}
137
- video_poster = {video_poster}
138
- img_url = {img_url}
145
+ video_url = {videoUrl}
146
+ video_poster = {videoPoster}
147
+
139
148
  />
140
149
  </div>
141
150
  </div>
142
151
 
143
152
  <div>
144
- {LinkCardsFn(props.heroData)}
153
+ {props.heroData.tabContent[activeTab] &&
154
+ LinkCardsFn(props.heroData.tabContent[activeTab])}
145
155
  </div>
146
156
  </div>
147
157
 
package/src/HDS/components/Tabs/tab.js CHANGED
@@ -1,11 +1,22 @@
1
1
  import React, { useState, useRef } from 'react';
2
+ import { HDSColor } from '../../foundation/ColorPalette';
2
3
  import { Typography } from '../../foundation/Typography'
4
+ import PropTypes from 'prop-types';
3
5
 
4
6
  export default function Tab(props) {
5
- const { tabs, onTabClick } = props;
7
+ const {
8
+ tabs,
9
+ onTabClick,
10
+ pillColor
11
+
12
+ } = props;
6
13
  const [activeTab, setActiveTab] = useState(tabs.find(tab => tab.current) || tabs[0]);
7
14
  const pillRef = useRef(null);
8
-
15
+ let pillColorClass = '';
16
+ if(pillColor){
17
+ pillColorClass = HDSColor(pillColor);
18
+ }
19
+
9
20
  const handleTabClick = (event, clickedTab) => {
10
21
  event.preventDefault();
11
22
  setActiveTab(clickedTab);
@@ -19,35 +30,41 @@ export default function Tab(props) {
19
30
  const pillWidth = event.currentTarget.offsetWidth;
20
31
  const clickedTabOffset = event.currentTarget.offsetLeft;
21
32
  const pillOffset = pill.parentElement.offsetLeft;
22
- const translateX = clickedTabOffset ;
33
+ const translateX = clickedTabOffset;
23
34
 
24
35
  pill.style.transform = `translateX(${translateX}px)`;
25
36
  pill.style.width = `${pillWidth}px`;
26
37
  }
27
38
  };
28
39
 
40
+ function tabClass(name) {
41
+ let classActive = ' text-neutral-0 transition-all rounded-full ' + pillColorClass;
42
+ let clasnInActive = ' text-neutral-500 flex-nowrap rounded-full';
43
+
44
+ console.log(classActive, clasnInActive, 'heeelo');
45
+
46
+ if (activeTab.name === name) {
47
+ return classActive;
48
+ }
49
+ else {
50
+ return clasnInActive;
51
+ }
52
+ }
29
53
  return (
30
54
  <div className=''>
31
55
  <div className="block">
32
56
  <nav className="relative inline-flex gap-2 rounded-full" aria-label="Tabs">
33
57
  {tabs.map(tab => (
34
- <a
58
+ <div
35
59
  key={tab.name}
36
- href="#"
37
- className={`px-3 py-1 font-medium text-sm rounded-full ${
38
- activeTab === tab
39
- ? ' first:bg-blue-500 text-neutral-0 transition-all'
40
- : 'text-neutral-500 transition-all flex-nowrap '
41
- }`}
42
- aria-current={activeTab === tab ? 'page' : undefined}
43
60
  onClick={(event) => handleTabClick(event, tab)}
44
61
  >
45
- <Typography className='z-[2] relative whitespace-nowrap' textStyle='body3c-medium'>{tab.name}</Typography>
46
- </a>
62
+ <Typography className={`${tabClass(tab.name)} cursor-pointer px-3 py-1 z-[2] relative whitespace-nowrap`} textStyle='body3c-medium'>{tab.name}</Typography>
63
+ </div>
47
64
  ))}
48
65
  <span
49
66
  ref={pillRef}
50
- className="absolute left-0 z-[1] bg-blue-500 rounded-full transition-all ease-in-out duration-300"
67
+ className={`absolute left-0 z-[1] ${pillColorClass} rounded-full transition-all ease-in duration-150`}
51
68
  style={{
52
69
  left: `${activeTab.index * 100}%`,
53
70
  width: `${activeTab.width}px`, // Use the width of the clicked tab
@@ -59,3 +76,7 @@ export default function Tab(props) {
59
76
  </div>
60
77
  );
61
78
  }
79
+
80
+ Tab.defaultProps = {
81
+ pillColor: 'bg-blue-500'
82
+ }
package/src/styles/tailwind.css CHANGED
@@ -1868,10 +1868,6 @@ select {
1868
1868
  gap: 3rem;
1869
1869
  }
1870
1870
 
1871
- .gap-16 {
1872
- gap: 4rem;
1873
- }
1874
-
1875
1871
  .gap-2 {
1876
1872
  gap: 0.5rem;
1877
1873
  }
@@ -2003,6 +1999,12 @@ select {
2003
1999
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
2004
2000
  }
2005
2001
 
2002
+ .space-x-2 > :not([hidden]) ~ :not([hidden]) {
2003
+ --tw-space-x-reverse: 0;
2004
+ margin-right: calc(0.5rem * var(--tw-space-x-reverse));
2005
+ margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
2006
+ }
2007
+
2006
2008
  .divide-x > :not([hidden]) ~ :not([hidden]) {
2007
2009
  --tw-divide-x-reverse: 0;
2008
2010
  border-right-width: calc(1px * var(--tw-divide-x-reverse));
@@ -2816,6 +2818,10 @@ select {
2816
2818
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
2817
2819
  }
2818
2820
 
2821
+ .bg-gradient-to-br {
2822
+ background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
2823
+ }
2824
+
2819
2825
  .from-amber-100 {
2820
2826
  --tw-gradient-from: #FFF3D4 var(--tw-gradient-from-position);
2821
2827
  --tw-gradient-from-position: ;
@@ -5460,14 +5466,6 @@ select {
5460
5466
  padding-top: 1.5rem;
5461
5467
  }
5462
5468
 
5463
- .pt-8 {
5464
- padding-top: 2rem;
5465
- }
5466
-
5467
- .pb-3 {
5468
- padding-bottom: 0.75rem;
5469
- }
5470
-
5471
5469
  .text-left {
5472
5470
  text-align: left;
5473
5471
  }
@@ -6469,6 +6467,10 @@ select {
6469
6467
  transition-duration: 500ms;
6470
6468
  }
6471
6469
 
6470
+ .duration-1000 {
6471
+ transition-duration: 1000ms;
6472
+ }
6473
+
6472
6474
  .ease-in {
6473
6475
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
6474
6476
  }
@@ -7425,11 +7427,6 @@ select {
7425
7427
  border-bottom-left-radius: 9999px;
7426
7428
  }
7427
7429
 
7428
- .first\:bg-blue-500:first-child {
7429
- --tw-bg-opacity: 1;
7430
- background-color: rgb(57 112 253 / var(--tw-bg-opacity));
7431
- }
7432
-
7433
7430
  .last\:mr-0:last-child {
7434
7431
  margin-right: 0px;
7435
7432
  }
@@ -8289,10 +8286,6 @@ select {
8289
8286
  border-right-width: 1px;
8290
8287
  }
8291
8288
 
8292
- .tb\:border-t {
8293
- border-top-width: 1px;
8294
- }
8295
-
8296
8289
  .tb\:border-r-neutral-150 {
8297
8290
  --tw-border-opacity: 1;
8298
8291
  border-right-color: rgb(236 237 240 / var(--tw-border-opacity));
@@ -8330,6 +8323,10 @@ select {
8330
8323
  padding-right: 2rem;
8331
8324
  }
8332
8325
 
8326
+ .tb\:pb-0 {
8327
+ padding-bottom: 0px;
8328
+ }
8329
+
8333
8330
  .tb\:pb-8 {
8334
8331
  padding-bottom: 2rem;
8335
8332
  }
@@ -8338,6 +8335,10 @@ select {
8338
8335
  padding-right: 0px;
8339
8336
  }
8340
8337
 
8338
+ .tb\:pt-0 {
8339
+ padding-top: 0px;
8340
+ }
8341
+
8341
8342
  .tb\:pt-10 {
8342
8343
  padding-top: 2.5rem;
8343
8344
  }
@@ -8354,22 +8355,6 @@ select {
8354
8355
  padding-top: 2.875rem;
8355
8356
  }
8356
8357
 
8357
- .tb\:pt-6 {
8358
- padding-top: 1.5rem;
8359
- }
8360
-
8361
- .tb\:pb-6 {
8362
- padding-bottom: 1.5rem;
8363
- }
8364
-
8365
- .tb\:pb-0 {
8366
- padding-bottom: 0px;
8367
- }
8368
-
8369
- .tb\:pt-0 {
8370
- padding-top: 0px;
8371
- }
8372
-
8373
8358
  .tb\:text-left {
8374
8359
  text-align: left;
8375
8360
  }
@@ -9085,6 +9070,10 @@ select {
9085
9070
  padding-bottom: 5rem;
9086
9071
  }
9087
9072
 
9073
+ .db\:pb-0 {
9074
+ padding-bottom: 0px;
9075
+ }
9076
+
9088
9077
  .db\:pb-10 {
9089
9078
  padding-bottom: 2.5rem;
9090
9079
  }
@@ -9113,10 +9102,6 @@ select {
9113
9102
  padding-top: 8rem;
9114
9103
  }
9115
9104
 
9116
- .db\:pb-0 {
9117
- padding-bottom: 0px;
9118
- }
9119
-
9120
9105
  .db\:text-left {
9121
9106
  text-align: left;
9122
9107
  }