hds-web 1.12.6 → 1.12.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.
Files changed (9) hide show
  1. package/dist/index.css +1 -1
  2. package/dist/index.es.css +1 -1
  3. package/dist/index.es.js +2 -2
  4. package/dist/index.js +2 -2
  5. package/package.json +1 -1
  6. package/src/HDS/components/Buttons/button.js +9 -0
  7. package/src/HDS/components/Cards/Misc/iconCardButton.js +4 -3
  8. package/src/HDS/modules/navCard/navCard.js +20 -18
  9. package/src/styles/tailwind.css +138 -22
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hds-web",
3
- "version": "1.12.6",
3
+ "version": "1.12.8",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",
package/src/HDS/components/Buttons/button.js CHANGED
@@ -27,6 +27,15 @@ const Buttonclasses = {
27
27
  },
28
28
  'disabled': 'bg-neutral-200 text-neutral-400',
29
29
  },
30
+ 'primaryTransparent': {
31
+ 'default': {
32
+ 'base': 'db:w-fit tb:w-fit w-full justify-center justify-center text-neutral-0',
33
+ 'hover': 'hover:bg-blue-700 hover:text-neutral-0 hover:shadow-md hover:shadow hover:transition-all hover:ease-out hover:duration-300',
34
+ 'focus': 'focus:bg-blue-600 focus:shadow-[0_0px_0px_4px_#DFE8FF] focus:text-neutral-0 focus:outline-none active:bg-blue-600 active:text-neutral-0 active:outline-none',
35
+
36
+ },
37
+ 'disabled': 'bg-neutral-200 text-neutral-400',
38
+ },
30
39
  'tonal': {
31
40
  'default': {
32
41
  'base': 'db:w-fit tb:w-fit w-full justify-center bg-blue-200 text-blue-600',
package/src/HDS/components/Cards/Misc/iconCardButton.js CHANGED
@@ -38,7 +38,8 @@ const cardVariant = {
38
38
 
39
39
  export default function IconCardButton(props) {
40
40
  const iconBG = props.iconBg ? HDSColor(props.iconBg) : '';
41
- const textClass = props.textColorClass ? HDSColor(props.textColorClass) : 'text-neutral-1000';
41
+ const titleClass = props.titleColorClass ? HDSColor(props.titleColorClass) : 'text-neutral-1000';
42
+ const descClass = props.descColorClass ? HDSColor(props.descColorClass) : 'text-neutral-800';
42
43
  return (
43
44
  <>
44
45
  <div>
@@ -64,14 +65,14 @@ export default function IconCardButton(props) {
64
65
  <>
65
66
  <Typography
66
67
  textStyle={cardVariant[props.cardType]['titleTextStyle']}
67
- className={`${cardVariant[props.cardType]['titleClasses']} ${textClass}`}
68
+ className={`${cardVariant[props.cardType]['titleClasses']} ${titleClass}`}
68
69
  >
69
70
  {props.title}
70
71
  </Typography>
71
72
 
72
73
  <Typography
73
74
  textStyle={cardVariant[props.cardType]['descTextStyle']}
74
- className={`${cardVariant[props.cardType]['descClasses']} ${textClass} [&>p]:${textClass} [&>p]:pb-2 last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 last:[&>ul>li]:pb-0 [&>p>a]:text-blue-600`}
75
+ className={`${cardVariant[props.cardType]['descClasses']} ${descClass} [&>p]:${descClass} [&>p]:pb-2 last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 last:[&>ul>li]:pb-0 [&>p>a]:text-blue-600`}
75
76
  >
76
77
  <ReactMarkdown>
77
78
  {props.description}
package/src/HDS/modules/navCard/navCard.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useState, useEffect } from 'react';
1
+ import React, { useState, useEffect } from 'react';
2
2
  import { MediaBox } from '../../helpers/Media';
3
3
  import { Typography } from '../../foundation/Typography';
4
4
  import { HDSButton } from '../../components/Buttons';
@@ -29,7 +29,7 @@ const tabCard = (tabContent) => (
29
29
  btnTextColorClass='text-blue-600'
30
30
  />
31
31
  </div>
32
- }
32
+ }
33
33
  <div className='mt-8'>
34
34
  <MediaBox
35
35
  img_url={tabContent.img_url}
@@ -59,24 +59,26 @@ export default function NavCard(props) {
59
59
  }
60
60
 
61
61
  return (
62
- <div>
63
- {props.navTabs &&
62
+ <div>
63
+ {props.navTabs &&
64
64
 
65
- <div className='max-w-[44.44rem] rounded-2xl'>
65
+ <div className='max-w-[44.44rem] rounded-2xl'>
66
66
 
67
- <div className='flex pb-8'>
68
- <Tab
69
- onTabClick={handleTabClick}
70
- tabs={props.navTabs}
71
- />
72
- </div>
73
- <div className=''>
74
- {props.tabContent &&
75
- props.tabContent[activeTab] &&
76
- tabCard(props.tabContent[activeTab])}
77
- </div>
67
+ <div className='flex pb-8'>
68
+ <Tab
69
+ onTabClick={handleTabClick}
70
+ tabs={props.navTabs}
71
+ pillColor={props.pillColor}
72
+ bgColorTab={props.heroData.bgColorTab}
73
+ />
74
+ </div>
75
+ <div className=''>
76
+ {props.tabContent &&
77
+ props.tabContent[activeTab] &&
78
+ tabCard(props.tabContent[activeTab])}
79
+ </div>
78
80
 
79
- </div>}
80
- </div>
81
+ </div>}
82
+ </div>
81
83
  )
82
84
  }
package/src/styles/tailwind.css CHANGED
@@ -861,8 +861,16 @@ select{
861
861
  bottom: -0.375rem;
862
862
  }
863
863
 
864
- .-left-20{
865
- left: -5rem;
864
+ .-left-\[137px\]{
865
+ left: -137px;
866
+ }
867
+
868
+ .-left-\[216px\]{
869
+ left: -216px;
870
+ }
871
+
872
+ .-left-\[218px\]{
873
+ left: -218px;
866
874
  }
867
875
 
868
876
  .-left-\[60\%\]{
@@ -977,10 +985,6 @@ select{
977
985
  top: 1.25rem;
978
986
  }
979
987
 
980
- .top-8{
981
- top: 2rem;
982
- }
983
-
984
988
  .top-\[112px\]{
985
989
  top: 112px;
986
990
  }
@@ -997,6 +1001,14 @@ select{
997
1001
  top: 72px;
998
1002
  }
999
1003
 
1004
+ .-left-20{
1005
+ left: -5rem;
1006
+ }
1007
+
1008
+ .top-8{
1009
+ top: 2rem;
1010
+ }
1011
+
1000
1012
  .isolate{
1001
1013
  isolation: isolate;
1002
1014
  }
@@ -1176,6 +1188,10 @@ select{
1176
1188
  margin-bottom: 1.5rem;
1177
1189
  }
1178
1190
 
1191
+ .-mb-2{
1192
+ margin-bottom: -0.5rem;
1193
+ }
1194
+
1179
1195
  .-mb-\[112\%\]{
1180
1196
  margin-bottom: -112%;
1181
1197
  }
@@ -1388,6 +1404,10 @@ select{
1388
1404
  margin-top: 70px;
1389
1405
  }
1390
1406
 
1407
+ .mr-0{
1408
+ margin-right: 0px;
1409
+ }
1410
+
1391
1411
  .line-clamp-3{
1392
1412
  overflow: hidden;
1393
1413
  display: -webkit-box;
@@ -1579,6 +1599,22 @@ select{
1579
1599
  height: 100vh;
1580
1600
  }
1581
1601
 
1602
+ .h-\[200px\]{
1603
+ height: 200px;
1604
+ }
1605
+
1606
+ .h-\[697px\]{
1607
+ height: 697px;
1608
+ }
1609
+
1610
+ .h-\[calc\(100\%-600px\)\]{
1611
+ height: calc(100% - 600px);
1612
+ }
1613
+
1614
+ .h-\[calc\(100\%-80px\)\]{
1615
+ height: calc(100% - 80px);
1616
+ }
1617
+
1582
1618
  .max-h-\[181px\]{
1583
1619
  max-height: 181px;
1584
1620
  }
@@ -1591,10 +1627,18 @@ select{
1591
1627
  max-height: 26.25;
1592
1628
  }
1593
1629
 
1630
+ .max-h-\[72px\]{
1631
+ max-height: 72px;
1632
+ }
1633
+
1594
1634
  .max-h-full{
1595
1635
  max-height: 100%;
1596
1636
  }
1597
1637
 
1638
+ .max-h-screen{
1639
+ max-height: 100vh;
1640
+ }
1641
+
1598
1642
  .min-h-\[12px\]{
1599
1643
  min-height: 12px;
1600
1644
  }
@@ -1817,6 +1861,10 @@ select{
1817
1861
  min-width: 348px;
1818
1862
  }
1819
1863
 
1864
+ .min-w-\[396px\]{
1865
+ min-width: 396px;
1866
+ }
1867
+
1820
1868
  .min-w-\[48px\]{
1821
1869
  min-width: 48px;
1822
1870
  }
@@ -1855,6 +1903,10 @@ select{
1855
1903
  max-width: 125px;
1856
1904
  }
1857
1905
 
1906
+ .max-w-\[128px\]{
1907
+ max-width: 128px;
1908
+ }
1909
+
1858
1910
  .max-w-\[148px\]{
1859
1911
  max-width: 148px;
1860
1912
  }
@@ -2032,6 +2084,42 @@ select{
2032
2084
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2033
2085
  }
2034
2086
 
2087
+ .-translate-x-\[1240px\]{
2088
+ --tw-translate-x: -1240px;
2089
+ -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2090
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2091
+ }
2092
+
2093
+ .translate-x-\[-1240\]{
2094
+ --tw-translate-x: -1240;
2095
+ -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2096
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2097
+ }
2098
+
2099
+ .translate-x-\[-1240px\]{
2100
+ --tw-translate-x: -1240px;
2101
+ -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2102
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2103
+ }
2104
+
2105
+ .-translate-x-0{
2106
+ --tw-translate-x: -0px;
2107
+ -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2108
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2109
+ }
2110
+
2111
+ .translate-x-\[1024px\]{
2112
+ --tw-translate-x: 1024px;
2113
+ -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2114
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2115
+ }
2116
+
2117
+ .-translate-x-\[1024px\]{
2118
+ --tw-translate-x: -1024px;
2119
+ -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2120
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2121
+ }
2122
+
2035
2123
  .-rotate-45{
2036
2124
  --tw-rotate: -45deg;
2037
2125
  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -7191,6 +7279,12 @@ select{
7191
7279
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
7192
7280
  }
7193
7281
 
7282
+ .shadow-home-drop{
7283
+ --tw-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.16);
7284
+ --tw-shadow-colored: 0px 10px 30px 0px var(--tw-shadow-color);
7285
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
7286
+ }
7287
+
7194
7288
  .shadow-inner{
7195
7289
  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
7196
7290
  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
@@ -9738,6 +9832,10 @@ select{
9738
9832
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
9739
9833
  }
9740
9834
 
9835
+ .group\/icon:hover .group-hover\/icon\:stroke-blue-800{
9836
+ stroke: #00288E;
9837
+ }
9838
+
9741
9839
  .group:hover .group-hover\:stroke-blue-500{
9742
9840
  stroke: #3970FD;
9743
9841
  }
@@ -9758,10 +9856,6 @@ select{
9758
9856
  stroke: #111927;
9759
9857
  }
9760
9858
 
9761
- .group\/icon:hover .group-hover\/icon\:stroke-blue-800{
9762
- stroke: #00288E;
9763
- }
9764
-
9765
9859
  .group:hover .group-hover\:text-neutral-1000{
9766
9860
  --tw-text-opacity: 1;
9767
9861
  color: rgb(0 6 21 / var(--tw-text-opacity));
@@ -9771,13 +9865,13 @@ select{
9771
9865
  opacity: 0.3;
9772
9866
  }
9773
9867
 
9774
- .group:hover .group-hover\:transition-all{
9868
+ .group\/icon:hover .group-hover\/icon\:transition-all{
9775
9869
  transition-property: all;
9776
9870
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
9777
9871
  transition-duration: 150ms;
9778
9872
  }
9779
9873
 
9780
- .group\/icon:hover .group-hover\/icon\:transition-all{
9874
+ .group:hover .group-hover\:transition-all{
9781
9875
  transition-property: all;
9782
9876
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
9783
9877
  transition-duration: 150ms;
@@ -9787,6 +9881,10 @@ select{
9787
9881
  transition-delay: 100ms;
9788
9882
  }
9789
9883
 
9884
+ .group\/icon:hover .group-hover\/icon\:duration-1000{
9885
+ transition-duration: 1000ms;
9886
+ }
9887
+
9790
9888
  .group:hover .group-hover\:duration-100{
9791
9889
  transition-duration: 100ms;
9792
9890
  }
@@ -9795,15 +9893,11 @@ select{
9795
9893
  transition-duration: 300ms;
9796
9894
  }
9797
9895
 
9798
- .group\/icon:hover .group-hover\/icon\:duration-1000{
9799
- transition-duration: 1000ms;
9800
- }
9801
-
9802
- .group:hover .group-hover\:ease-in-out{
9896
+ .group\/icon:hover .group-hover\/icon\:ease-in-out{
9803
9897
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
9804
9898
  }
9805
9899
 
9806
- .group\/icon:hover .group-hover\/icon\:ease-in-out{
9900
+ .group:hover .group-hover\:ease-in-out{
9807
9901
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
9808
9902
  }
9809
9903
 
@@ -9985,6 +10079,16 @@ select{
9985
10079
  display: grid;
9986
10080
  }
9987
10081
 
10082
+ @media (min-width: 600px){
10083
+ .tb\:tb\:grid{
10084
+ display: grid;
10085
+ }
10086
+ }
10087
+
10088
+ .tb\:inline-grid{
10089
+ display: inline-grid;
10090
+ }
10091
+
9988
10092
  .tb\:hidden{
9989
10093
  display: none;
9990
10094
  }
@@ -10095,6 +10199,12 @@ select{
10095
10199
  grid-template-columns: repeat(4, minmax(0, 1fr));
10096
10200
  }
10097
10201
 
10202
+ @media (min-width: 600px){
10203
+ .tb\:tb\:grid-cols-1{
10204
+ grid-template-columns: repeat(1, minmax(0, 1fr));
10205
+ }
10206
+ }
10207
+
10098
10208
  .tb\:flex-row{
10099
10209
  flex-direction: row;
10100
10210
  }
@@ -10156,15 +10266,15 @@ select{
10156
10266
  column-gap: 4rem;
10157
10267
  }
10158
10268
 
10269
+ .tb\:gap-y-16{
10270
+ row-gap: 4rem;
10271
+ }
10272
+
10159
10273
  .tb\:gap-x-4{
10160
10274
  -webkit-column-gap: 1rem;
10161
10275
  column-gap: 1rem;
10162
10276
  }
10163
10277
 
10164
- .tb\:gap-y-16{
10165
- row-gap: 4rem;
10166
- }
10167
-
10168
10278
  .tb\:rounded-3xl{
10169
10279
  border-radius: 1.5rem;
10170
10280
  }
@@ -10742,6 +10852,12 @@ select{
10742
10852
  width: 100%;
10743
10853
  }
10744
10854
 
10855
+ .tb-l\:w-fit{
10856
+ width: -webkit-fit-content;
10857
+ width: -moz-fit-content;
10858
+ width: fit-content;
10859
+ }
10860
+
10745
10861
  .tb-l\:min-w-\[400px\]{
10746
10862
  min-width: 400px;
10747
10863
  }