hds-web 1.8.5 → 1.8.7

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 (19) 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 +5 -5
  5. package/package.json +1 -1
  6. package/src/HDS/components/Avatars/profileAvatar.js +16 -3
  7. package/src/HDS/components/Cards/CommunityCard/communityCard.js +13 -5
  8. package/src/HDS/components/Cards/Feedback/feedback.js +42 -7
  9. package/src/HDS/components/Cards/VideoCard/homeVC.js +28 -0
  10. package/src/HDS/components/Cards/VideoCard/index.js +1 -0
  11. package/src/HDS/components/Cards/index.js +1 -0
  12. package/src/HDS/components/Carousels/homeCarousel2.js +316 -0
  13. package/src/HDS/components/Carousels/homepageCarousel.js +9 -36
  14. package/src/HDS/components/Carousels/index.js +2 -1
  15. package/src/HDS/helpers/Sliders/index.js +1 -0
  16. package/src/HDS/helpers/Sliders/scrollSlider.js +134 -0
  17. package/src/HDS/helpers/index.js +2 -1
  18. package/src/index.css +2 -0
  19. package/src/styles/tailwind.css +118 -8
package/src/HDS/helpers/Sliders/scrollSlider.js ADDED
@@ -0,0 +1,134 @@
1
+ import React, { useState } from 'react';
2
+ import { VideoCard } from "../../components/Cards/VideoCard";
3
+ import { HomepageCarousel2, CarouselCard } from '../../components/Carousels';
4
+
5
+
6
+ const SideCard = () => (
7
+ <div className='bg-green-500 w-[300px] flex flex-col items-center justify-between rounded-3xl max-h-[338px]'>
8
+ <div className='w-[300px] flex justify-center'>
9
+ <img src='https://res.cloudinary.com/dh8fp23nd/image/upload/v1686737531/hasura-design-system/icons/optum_zn0bhw.png' alt='imgb' className='p-5 ' />
10
+ </div>
11
+ <div className='w-[300px] flex justify-center'>
12
+ <img src='https://res.cloudinary.com/dh8fp23nd/image/upload/v1685596743/website%20v3/capabilities-pre-footer_qxqlon.png' alt='imga' className='p-2 w-[194px]' />
13
+ </div>
14
+ </div>
15
+ )
16
+
17
+ const carouselItems = [
18
+ {
19
+ name: "John Smith",
20
+ designation: "CEO",
21
+ imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
22
+ size: 'w-full'
23
+ },
24
+ {
25
+ name: "Jane Doe",
26
+ designation: "CTO",
27
+ imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
28
+ size: 'w-full'
29
+ },
30
+ {
31
+ name: "Bob Johnson",
32
+ designation: "COO",
33
+ imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
34
+ size: 'w-full'
35
+ },
36
+ {
37
+ name: "Gourav",
38
+ designation: "SDE",
39
+ imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
40
+ size: 'w-full'
41
+ },
42
+ {
43
+ name: "Gourav",
44
+ designation: "SDE",
45
+ imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
46
+ size: 'w-full'
47
+ },
48
+ {
49
+ name: "Gourav",
50
+ designation: "SDE",
51
+ imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
52
+ size: 'w-full'
53
+ },
54
+ {
55
+ name: "Bob Johnson",
56
+ designation: "COO",
57
+ imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
58
+ size: 'w-full'
59
+ },
60
+ {
61
+ name: "Gourav",
62
+ designation: "SDE",
63
+ imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
64
+ size: 'w-full'
65
+ },
66
+ {
67
+ name: "Gourav",
68
+ designation: "SDE",
69
+ imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
70
+ size: 'w-full'
71
+ },
72
+ {
73
+ name: "Gourav",
74
+ designation: "SDE",
75
+ imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
76
+ size: 'w-full'
77
+ }
78
+ ];
79
+
80
+ export default function ScrollSlider() {
81
+ const [isScrollActive, setScrollActive] = useState(false);
82
+
83
+ const handleMouseEnter = () => {
84
+ setScrollActive(true); // Mouse entered, scroll is active
85
+ };
86
+
87
+ const handleMouseLeave = () => {
88
+ setScrollActive(false); // Mouse left, scroll is inactive
89
+ };
90
+ return (
91
+ // <div>
92
+
93
+ // <div className='absolute z-[1]'>
94
+ // <div
95
+ // className={`flex flex-row gap-4 w-screen h-screen items-center justify-center`}
96
+ // onMouseEnter={handleMouseEnter}
97
+ // onMouseLeave={handleMouseLeave}
98
+ // >
99
+ // <div className={`${isScrollActive ? 'translate-y-0' : ''} -translate-y-36 transition-all duration-[1500ms]`}>
100
+ // <SideCard />
101
+ // </div>
102
+ // <div className='w-[643px] '>
103
+ // <HomepageCarousel
104
+ // cards={carouselItems}
105
+ // component={VideoCard}
106
+ // length={carouselItems.length}
107
+
108
+ // />
109
+ // </div>
110
+ // <div className={`${isScrollActive ? '-translate-y-0' : ''} translate-y-36 transition-all duration-[1500ms]`}>
111
+ // <SideCard />
112
+ // </div>
113
+ // </div>
114
+ // </div>
115
+ // <div className='absolute z-[1] left-[227px] top-[83px] '>
116
+ // <div className='h-screen items-center flex'>
117
+ // <div className='w-[1279px]'>
118
+
119
+ // <HomepageCarousel
120
+ // cards={carouselItems}
121
+ // component={SideCard}
122
+ // length={carouselItems.length}
123
+
124
+ // />
125
+ // </div>
126
+ // </div>
127
+ // </div>
128
+ // </div>
129
+
130
+ <div>
131
+ <HomepageCarousel2 />
132
+ </div>
133
+ );
134
+ }
package/src/HDS/helpers/index.js CHANGED
@@ -1,2 +1,3 @@
1
1
  export * from './Translations';
2
- export * from './Media';
2
+ export * from './Media';
3
+ export * from './Sliders'
package/src/index.css CHANGED
@@ -4,6 +4,8 @@
4
4
  @tailwind utilities;
5
5
  /* Typography classes */
6
6
 
7
+
8
+
7
9
  .carouselShadow{
8
10
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
9
11
  }
package/src/styles/tailwind.css CHANGED
@@ -961,6 +961,46 @@ select{
961
961
  top: 442.72px;
962
962
  }
963
963
 
964
+ .top-14{
965
+ top: 3.5rem;
966
+ }
967
+
968
+ .left-\[227px\]{
969
+ left: 227px;
970
+ }
971
+
972
+ .top-\[83px\]{
973
+ top: 83px;
974
+ }
975
+
976
+ .top-10{
977
+ top: 2.5rem;
978
+ }
979
+
980
+ .top-\[33rem\]{
981
+ top: 33rem;
982
+ }
983
+
984
+ .left-20{
985
+ left: 5rem;
986
+ }
987
+
988
+ .top-16{
989
+ top: 4rem;
990
+ }
991
+
992
+ .top-20{
993
+ top: 5rem;
994
+ }
995
+
996
+ .top-24{
997
+ top: 6rem;
998
+ }
999
+
1000
+ .left-40{
1001
+ left: 10rem;
1002
+ }
1003
+
964
1004
  .isolate{
965
1005
  isolation: isolate;
966
1006
  }
@@ -993,6 +1033,10 @@ select{
993
1033
  z-index: 60;
994
1034
  }
995
1035
 
1036
+ .z-0{
1037
+ z-index: 0;
1038
+ }
1039
+
996
1040
  .col-span-1{
997
1041
  grid-column: span 1 / span 1;
998
1042
  }
@@ -1514,6 +1558,10 @@ select{
1514
1558
  max-height: 26.25;
1515
1559
  }
1516
1560
 
1561
+ .max-h-\[338px\]{
1562
+ max-height: 338px;
1563
+ }
1564
+
1517
1565
  .max-h-full{
1518
1566
  max-height: 100%;
1519
1567
  }
@@ -1594,10 +1642,6 @@ select{
1594
1642
  width: 1.5rem;
1595
1643
  }
1596
1644
 
1597
- .w-72{
1598
- width: 18rem;
1599
- }
1600
-
1601
1645
  .w-8{
1602
1646
  width: 2rem;
1603
1647
  }
@@ -1614,6 +1658,10 @@ select{
1614
1658
  width: 151.7px;
1615
1659
  }
1616
1660
 
1661
+ .w-\[194px\]{
1662
+ width: 194px;
1663
+ }
1664
+
1617
1665
  .w-\[22\.5rem\]{
1618
1666
  width: 22.5rem;
1619
1667
  }
@@ -1630,6 +1678,10 @@ select{
1630
1678
  width: 290px;
1631
1679
  }
1632
1680
 
1681
+ .w-\[300px\]{
1682
+ width: 300px;
1683
+ }
1684
+
1633
1685
  .w-\[598\.55px\]{
1634
1686
  width: 598.55px;
1635
1687
  }
@@ -1646,6 +1698,10 @@ select{
1646
1698
  width: 643.51px;
1647
1699
  }
1648
1700
 
1701
+ .w-\[643px\]{
1702
+ width: 643px;
1703
+ }
1704
+
1649
1705
  .w-\[70\%\]{
1650
1706
  width: 70%;
1651
1707
  }
@@ -1676,6 +1732,18 @@ select{
1676
1732
  width: 100vw;
1677
1733
  }
1678
1734
 
1735
+ .w-\[1279px\]{
1736
+ width: 1279px;
1737
+ }
1738
+
1739
+ .w-\[200pxpx\]{
1740
+ width: 200pxpx;
1741
+ }
1742
+
1743
+ .w-\[1249px\]{
1744
+ width: 1249px;
1745
+ }
1746
+
1679
1747
  .min-w-\[11\.5rem\]{
1680
1748
  min-width: 11.5rem;
1681
1749
  }
@@ -1692,10 +1760,6 @@ select{
1692
1760
  min-width: 20px;
1693
1761
  }
1694
1762
 
1695
- .min-w-\[22rem\]{
1696
- min-width: 22rem;
1697
- }
1698
-
1699
1763
  .min-w-\[24px\]{
1700
1764
  min-width: 24px;
1701
1765
  }
@@ -1867,6 +1931,12 @@ select{
1867
1931
  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));
1868
1932
  }
1869
1933
 
1934
+ .-translate-y-36{
1935
+ --tw-translate-y: -9rem;
1936
+ -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));
1937
+ 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));
1938
+ }
1939
+
1870
1940
  .-translate-y-\[0px\]{
1871
1941
  --tw-translate-y: -0px;
1872
1942
  -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));
@@ -1903,6 +1973,12 @@ select{
1903
1973
  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));
1904
1974
  }
1905
1975
 
1976
+ .translate-y-36{
1977
+ --tw-translate-y: 9rem;
1978
+ -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));
1979
+ 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));
1980
+ }
1981
+
1906
1982
  .translate-y-\[-20px\]{
1907
1983
  --tw-translate-y: -20px;
1908
1984
  -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));
@@ -1915,6 +1991,12 @@ select{
1915
1991
  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));
1916
1992
  }
1917
1993
 
1994
+ .-translate-y-0{
1995
+ --tw-translate-y: -0px;
1996
+ -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));
1997
+ 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));
1998
+ }
1999
+
1918
2000
  .-rotate-45{
1919
2001
  --tw-rotate: -45deg;
1920
2002
  -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));
@@ -2028,6 +2110,10 @@ select{
2028
2110
  flex-direction: row;
2029
2111
  }
2030
2112
 
2113
+ .flex-row-reverse{
2114
+ flex-direction: row-reverse;
2115
+ }
2116
+
2031
2117
  .flex-col{
2032
2118
  flex-direction: column;
2033
2119
  }
@@ -2136,6 +2222,14 @@ select{
2136
2222
  gap: 25rem;
2137
2223
  }
2138
2224
 
2225
+ .gap-9{
2226
+ gap: 2.25rem;
2227
+ }
2228
+
2229
+ .gap-\[9\.25rem\]{
2230
+ gap: 9.25rem;
2231
+ }
2232
+
2139
2233
  .gap-x-1{
2140
2234
  -webkit-column-gap: 0.25rem;
2141
2235
  column-gap: 0.25rem;
@@ -5835,6 +5929,10 @@ select{
5835
5929
  padding: 0.625rem;
5836
5930
  }
5837
5931
 
5932
+ .p-20{
5933
+ padding: 5rem;
5934
+ }
5935
+
5838
5936
  .p-3{
5839
5937
  padding: 0.75rem;
5840
5938
  }
@@ -7176,6 +7274,10 @@ select{
7176
7274
  transition-duration: 100ms;
7177
7275
  }
7178
7276
 
7277
+ .duration-1000{
7278
+ transition-duration: 1000ms;
7279
+ }
7280
+
7179
7281
  .duration-150{
7180
7282
  transition-duration: 150ms;
7181
7283
  }
@@ -7192,6 +7294,10 @@ select{
7192
7294
  transition-duration: 500ms;
7193
7295
  }
7194
7296
 
7297
+ .duration-\[1500ms\]{
7298
+ transition-duration: 1500ms;
7299
+ }
7300
+
7195
7301
  .ease-in{
7196
7302
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
7197
7303
  }
@@ -9720,6 +9826,10 @@ select{
9720
9826
  flex-direction: column;
9721
9827
  }
9722
9828
 
9829
+ .tb\:flex-col-reverse{
9830
+ flex-direction: column-reverse;
9831
+ }
9832
+
9723
9833
  .tb\:items-center{
9724
9834
  align-items: center;
9725
9835
  }