hds-web 1.22.0 → 1.22.1

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 (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/Cards/StoryCard/storysm.js +6 -6
  7. package/src/HDS/components/Cards/StoryCard/storyxl.js +6 -6
  8. package/src/styles/tailwind.css +126 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hds-web",
3
- "version": "1.22.0",
3
+ "version": "1.22.1",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",
package/src/HDS/components/Cards/StoryCard/storysm.js CHANGED
@@ -13,16 +13,16 @@ export default function StoryCard(props) {
13
13
  href={props.linkUrl}
14
14
  className={`rounded-2xl hover:shadow-xl p-8 h-full flex flex-col justify-between group/sc border border-neutral-200 hover:border-opacity-0 min-h-[260px] group`}
15
15
  >
16
-
17
16
  <>
18
17
  <div className='flex items-center justify-between pb-5'>
19
18
  {props.brandImageUrl && props.brandImageAlt && (
20
19
  <div className="max-h-[64px]">
21
- <img src={props.brandImageUrl} alt={props.brandImageAlt} className='max-h-[64px]' />
20
+ <img src={props.brandImageUrl}
21
+ alt={props.brandImageAlt}
22
+ className="max-h-[44px] brightness-0 transition ease-in-out duration-300 group-hover:brightness-100"
23
+ />
22
24
  </div>
23
- )
24
-
25
- }
25
+ )}
26
26
  {props.iconVariant &&
27
27
  (
28
28
  <div className="hidden tb:flex flex-row relative ">
@@ -87,7 +87,7 @@ StoryCard.defaultProps = {
87
87
  descTextColor: 'text-neutral-700',
88
88
  iconTag: 'Customer Stories',
89
89
  titleTextColor: '',
90
- brandImageUrl: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687778913/image_16_a725262c4e.png',
90
+ brandImageUrl: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1690909443/hasura-design-system/swiggy_m2hjxy.png',
91
91
  brandImageAlt: 'pipe',
92
92
  linkUrl: '#',
93
93
  iconVariant: 'videorecorder',
package/src/HDS/components/Cards/StoryCard/storyxl.js CHANGED
@@ -6,7 +6,7 @@ import { Icon } from "../../common-components";
6
6
  export default function StoryCardXL(props) {
7
7
  return (
8
8
  <>
9
- <div className="flex flex-col-reverse px-6 py-10 tb-l:px-0 tb-l:py-0 tb-l:flex-row tb-l:gap-10 db:gap-32 max-w-7xl">
9
+ <div className="flex flex-col-reverse px-6 py-10 tb-l:px-0 tb-l:py-0 tb-l:flex-row tb-l:gap-10 db:gap-32 tb-l:max-w-7xl">
10
10
 
11
11
  <div className="flex flex-col tb-l:pl-20 tb-l:pt-20 tb-l:pb-14">
12
12
  {
@@ -33,10 +33,10 @@ export default function StoryCardXL(props) {
33
33
  {props.heroList.map((value, index) => (
34
34
  <div key={index} className='flex gap-5'>
35
35
  <Icon
36
- height='tb:h-8 tb:w-8 h-6 w-6' variant={value.heroIconVariant} strokeClass='stroke-neutral-800' />
36
+ height='tb:h-8 tb:w-8 h-6 w-6' variant={value.iconVariant} strokeClass='stroke-neutral-800' />
37
37
  <Typography
38
38
  textStyle='sub2' className='text-neutral-700' >
39
- {value.heroListTitle}
39
+ {value.title}
40
40
  </Typography>
41
41
  </div>
42
42
  ))
@@ -63,11 +63,11 @@ export default function StoryCardXL(props) {
63
63
  props.heroImageAlt) ?
64
64
  (
65
65
  <>
66
- <div className="flex mt-4 tb:mt-0 justify-center tb:justify-start tb-l:justify-end tb-l:pt-20 tb:max-w-[600px]">
66
+ <div className="flex justify-center tb:justify-start tb-l:justify-end tb-l:pt-20 tb:max-w-[600px]">
67
67
  <img
68
68
  src={props.heroImageURL}
69
69
  alt={props.heroImageAlt}
70
- className="rounded-xl tb-l:rounded-none tb-l:rounded-br-3xl tb-l:rounded-tl-3xl w-full h-auto object-cover db-s:max-w-[717px] tb-l:max-w-[600px] max-w-[280px]"
70
+ className="rounded-xl tb-l:rounded-none tb-l:rounded-br-3xl tb-l:rounded-tl-3xl w-full h-auto object-cover db-s:max-w-[650px] tb-l:max-w-[600px] tb:max-w-[420px] "
71
71
  />
72
72
  </div>
73
73
  </>
@@ -97,7 +97,7 @@ export default function StoryCardXL(props) {
97
97
  </div>
98
98
  )
99
99
  }
100
- <Typography textStyle='h3' className='text-neutral-1000'>{props.title}</Typography>
100
+ <div className='text-neutral-1000 text-hds-m-h4 tb:text-hds-t-h3 db:text-hds-d-h3'>{props.title}</div>
101
101
  </div>
102
102
  {
103
103
  props.tagline && (
package/src/styles/tailwind.css CHANGED
@@ -1740,6 +1740,14 @@ select{
1740
1740
  max-height: 100vh;
1741
1741
  }
1742
1742
 
1743
+ .max-h-\[34px\]{
1744
+ max-height: 34px;
1745
+ }
1746
+
1747
+ .max-h-\[44px\]{
1748
+ max-height: 44px;
1749
+ }
1750
+
1743
1751
  .min-h-\[12px\]{
1744
1752
  min-height: 12px;
1745
1753
  }
@@ -2248,6 +2256,18 @@ select{
2248
2256
  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));
2249
2257
  }
2250
2258
 
2259
+ .translate-x-2{
2260
+ --tw-translate-x: 0.5rem;
2261
+ -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));
2262
+ 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));
2263
+ }
2264
+
2265
+ .translate-x-px{
2266
+ --tw-translate-x: 1px;
2267
+ -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));
2268
+ 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));
2269
+ }
2270
+
2251
2271
  .-rotate-45{
2252
2272
  --tw-rotate: -45deg;
2253
2273
  -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));
@@ -5807,6 +5827,10 @@ select{
5807
5827
  fill: #6C737F;
5808
5828
  }
5809
5829
 
5830
+ .fill-neutral-800{
5831
+ fill: #1F2A37;
5832
+ }
5833
+
5810
5834
  .stroke-amber-100{
5811
5835
  stroke: #FFF3D4;
5812
5836
  }
@@ -7474,6 +7498,10 @@ select{
7474
7498
  opacity: 0.6;
7475
7499
  }
7476
7500
 
7501
+ .mix-blend-multiply{
7502
+ mix-blend-mode: multiply;
7503
+ }
7504
+
7477
7505
  .shadow{
7478
7506
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
7479
7507
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -7606,6 +7634,42 @@ select{
7606
7634
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
7607
7635
  }
7608
7636
 
7637
+ .brightness-0{
7638
+ --tw-brightness: brightness(0);
7639
+ -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
7640
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
7641
+ }
7642
+
7643
+ .grayscale{
7644
+ --tw-grayscale: grayscale(100%);
7645
+ -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
7646
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
7647
+ }
7648
+
7649
+ .grayscale-\[50\%\]{
7650
+ --tw-grayscale: grayscale(50%);
7651
+ -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
7652
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
7653
+ }
7654
+
7655
+ .grayscale-\[30\%\]{
7656
+ --tw-grayscale: grayscale(30%);
7657
+ -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
7658
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
7659
+ }
7660
+
7661
+ .grayscale-\[70\%\]{
7662
+ --tw-grayscale: grayscale(70%);
7663
+ -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
7664
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
7665
+ }
7666
+
7667
+ .grayscale-\[\#1F2A37\]{
7668
+ --tw-grayscale: grayscale(#1F2A37);
7669
+ -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
7670
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
7671
+ }
7672
+
7609
7673
  .filter{
7610
7674
  -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
7611
7675
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -7617,6 +7681,24 @@ select{
7617
7681
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
7618
7682
  }
7619
7683
 
7684
+ .backdrop-brightness-50{
7685
+ --tw-backdrop-brightness: brightness(.5);
7686
+ -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
7687
+ backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
7688
+ }
7689
+
7690
+ .backdrop-grayscale{
7691
+ --tw-backdrop-grayscale: grayscale(100%);
7692
+ -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
7693
+ backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
7694
+ }
7695
+
7696
+ .backdrop-sepia-0{
7697
+ --tw-backdrop-sepia: sepia(0);
7698
+ -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
7699
+ backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
7700
+ }
7701
+
7620
7702
  .transition{
7621
7703
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
7622
7704
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
@@ -7669,6 +7751,10 @@ select{
7669
7751
  transition-duration: 350ms;
7670
7752
  }
7671
7753
 
7754
+ .duration-1000{
7755
+ transition-duration: 1000ms;
7756
+ }
7757
+
7672
7758
  .ease-in{
7673
7759
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
7674
7760
  }
@@ -9815,6 +9901,11 @@ select{
9815
9901
  background-color: rgb(133 77 24 / var(--tw-bg-opacity));
9816
9902
  }
9817
9903
 
9904
+ .hover\:bg-\[\#1F2A37\]:hover{
9905
+ --tw-bg-opacity: 1;
9906
+ background-color: rgb(31 42 55 / var(--tw-bg-opacity));
9907
+ }
9908
+
9818
9909
  .hover\:pl-\[9px\]:hover{
9819
9910
  padding-left: 9px;
9820
9911
  }
@@ -9874,6 +9965,17 @@ select{
9874
9965
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
9875
9966
  }
9876
9967
 
9968
+ .hover\:grayscale-0:hover{
9969
+ --tw-grayscale: grayscale(0);
9970
+ -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
9971
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
9972
+ }
9973
+
9974
+ .hover\:filter-none:hover{
9975
+ -webkit-filter: none;
9976
+ filter: none;
9977
+ }
9978
+
9877
9979
  .hover\:transition:hover{
9878
9980
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
9879
9981
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
@@ -10402,6 +10504,18 @@ select{
10402
10504
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
10403
10505
  }
10404
10506
 
10507
+ .group:hover .group-hover\:brightness-100{
10508
+ --tw-brightness: brightness(1);
10509
+ -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
10510
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
10511
+ }
10512
+
10513
+ .group:hover .group-hover\:grayscale-0{
10514
+ --tw-grayscale: grayscale(0);
10515
+ -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
10516
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
10517
+ }
10518
+
10405
10519
  .group:hover .group-hover\:transition-all{
10406
10520
  transition-property: all;
10407
10521
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -10786,6 +10900,10 @@ select{
10786
10900
  max-width: 763px;
10787
10901
  }
10788
10902
 
10903
+ .tb\:max-w-\[420px\]{
10904
+ max-width: 420px;
10905
+ }
10906
+
10789
10907
  .tb\:-translate-y-1\/2{
10790
10908
  --tw-translate-y: -50%;
10791
10909
  -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));
@@ -11658,6 +11776,10 @@ select{
11658
11776
  max-width: 658px;
11659
11777
  }
11660
11778
 
11779
+ .tb-l\:max-w-7xl{
11780
+ max-width: 80rem;
11781
+ }
11782
+
11661
11783
  .tb-l\:grid-cols-2{
11662
11784
  grid-template-columns: repeat(2, minmax(0, 1fr));
11663
11785
  }
@@ -11922,6 +12044,10 @@ select{
11922
12044
  max-width: 717px;
11923
12045
  }
11924
12046
 
12047
+ .db-s\:max-w-\[650px\]{
12048
+ max-width: 650px;
12049
+ }
12050
+
11925
12051
  .db-s\:flex-row{
11926
12052
  flex-direction: row;
11927
12053
  }