hds-web 0.1.4 → 0.1.6
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.
- package/dist/index.css +1 -1
- package/dist/index.es.css +1 -1
- package/dist/index.es.js +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/src/HDS/assets/hasura 2.svg +4 -0
- package/src/HDS/assets/hasura.svg +4 -0
- package/src/HDS/assets/icons/chevron-right.svg +1 -1
- package/src/HDS/assets/icons/hasura.svg +10 -3
- package/src/HDS/assets/icons/minus-01.svg +1 -1
- package/src/HDS/components/Avatars/hasConAv.js +3 -3
- package/src/HDS/components/Buttons/button.js +25 -9
- package/src/HDS/components/Carousels/carousel.js +1 -1
- package/src/HDS/components/Carousels/carouselCard.js +46 -11
- package/src/HDS/components/common-components/Card/copyCard.js +2 -2
- package/src/HDS/foundation/Typography/Typography.js +35 -35
- package/src/HDS/helpers/Time/index.js +1 -0
- package/src/HDS/helpers/Time/time.js +97 -0
- package/src/styles/tailwind.css +426 -398
- package/tailwind.config.js +22 -6
package/package.json
CHANGED
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M6.90242 4.54755L7.31044 5.17685C8.69886 4.27665 10.3575 3.75351 12.1427 3.75351C13.9278 3.75351 15.5864 4.27665 16.9749 5.17685L16.9753 5.17712C17.7616 5.68623 18.8113 5.5224 19.3973 4.78435L19.4205 4.75511L19.4407 4.72371L20.4859 3.09894C20.7832 3.70359 21.0075 4.58795 21.1085 5.56141C21.2297 6.72912 21.1571 7.86576 20.9257 8.57919L20.9256 8.57948C20.6977 9.28328 20.6295 10.0391 20.7649 10.7837L20.7656 10.7873C20.8793 11.3956 20.98 12.0679 20.98 12.5018C20.98 17.3253 17.0299 21.2502 12.1404 21.2502C7.25292 21.2502 3.30071 17.3274 3.30071 12.5018C3.30071 12.0679 3.40144 11.3956 3.51518 10.7873L3.51536 10.7863C3.65353 10.0418 3.58819 9.28511 3.35967 8.57948L3.35949 8.57893C3.12825 7.86674 3.05558 6.73078 3.17677 5.56302C3.2778 4.58962 3.50216 3.70474 3.79965 3.09928L4.84456 4.72371L4.86593 4.75693L4.89067 4.78773C5.47582 5.516 6.52292 5.68922 7.31143 5.17621L6.90242 4.54755ZM6.90242 4.54755C6.43885 4.84916 5.82074 4.74787 5.47533 4.31797L3.37457 2.33707C2.38099 3.80178 2.09419 7.11061 2.64616 8.81055C2.83931 9.40701 2.89158 10.0372 2.77796 10.6494C2.66434 11.2572 2.55071 11.9909 2.55071 12.5018C2.55071 17.7484 6.84561 22.0002 12.1404 22.0002C17.4374 22.0002 21.73 17.7462 21.73 12.5018C21.73 11.9909 21.6164 11.2572 21.5028 10.6494C21.3914 10.0372 21.446 9.40701 21.6391 8.81055C22.1911 7.10851 21.9043 3.79969 20.9108 2.33684C20.8129 2.19276 20.641 2.12476 20.4674 2.13837C20.2979 2.15166 20.1444 2.24341 20.0525 2.38638L18.81 4.31797C18.4668 4.75012 17.8487 4.84916 17.3829 4.54755C15.8763 3.57071 14.0765 3.00351 12.1427 3.00351C10.2088 3.00351 8.40904 3.57071 6.90242 4.54755Z" stroke-width="1.5"/>
|
|
3
|
+
<path d="M12.4 12.5L10 15M10.8 10L14 15" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M6.90242 4.54755L7.31044 5.17685C8.69886 4.27665 10.3575 3.75351 12.1427 3.75351C13.9278 3.75351 15.5864 4.27665 16.9749 5.17685L16.9753 5.17712C17.7616 5.68623 18.8113 5.5224 19.3973 4.78435L19.4205 4.75511L19.4407 4.72371L20.4859 3.09894C20.7832 3.70359 21.0075 4.58795 21.1085 5.56141C21.2297 6.72912 21.1571 7.86576 20.9257 8.57919L20.9256 8.57948C20.6977 9.28328 20.6295 10.0391 20.7649 10.7837L20.7656 10.7873C20.8793 11.3956 20.98 12.0679 20.98 12.5018C20.98 17.3253 17.0299 21.2502 12.1404 21.2502C7.25292 21.2502 3.30071 17.3274 3.30071 12.5018C3.30071 12.0679 3.40144 11.3956 3.51518 10.7873L3.51536 10.7863C3.65353 10.0418 3.58819 9.28511 3.35967 8.57948L3.35949 8.57893C3.12825 7.86674 3.05558 6.73078 3.17677 5.56302C3.2778 4.58962 3.50216 3.70474 3.79965 3.09928L4.84456 4.72371L4.86593 4.75693L4.89067 4.78773C5.47582 5.516 6.52292 5.68922 7.31143 5.17621L6.90242 4.54755ZM6.90242 4.54755C6.43885 4.84916 5.82074 4.74787 5.47533 4.31797L3.37457 2.33707C2.38099 3.80178 2.09419 7.11061 2.64616 8.81055C2.83931 9.40701 2.89158 10.0372 2.77796 10.6494C2.66434 11.2572 2.55071 11.9909 2.55071 12.5018C2.55071 17.7484 6.84561 22.0002 12.1404 22.0002C17.4374 22.0002 21.73 17.7462 21.73 12.5018C21.73 11.9909 21.6164 11.2572 21.5028 10.6494C21.3914 10.0372 21.446 9.40701 21.6391 8.81055C22.1911 7.10851 21.9043 3.79969 20.9108 2.33684C20.8129 2.19276 20.641 2.12476 20.4674 2.13837C20.2979 2.15166 20.1444 2.24341 20.0525 2.38638L18.81 4.31797C18.4668 4.75012 17.8487 4.84916 17.3829 4.54755C15.8763 3.57071 14.0765 3.00351 12.1427 3.00351C10.2088 3.00351 8.40904 3.57071 6.90242 4.54755Z" stroke="black" stroke-width="1.5"/>
|
|
3
|
+
<path d="M12.4 12.5L10 15M10.8 10L14 15" stroke="#000615" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
+
</svg>
|
|
@@ -1,4 +1,11 @@
|
|
|
1
|
-
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<
|
|
3
|
-
<path d="M12.4 12.
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g clip-path="url(#clip0_2560_5349)">
|
|
3
|
+
<path d="M12.0331 3.54417C10.1934 3.54417 8.4776 4.0875 7.03826 5.01211C6.59026 5.29807 6.0088 5.20275 5.67518 4.79287L4.4932 2.95318C4.40741 2.81973 4.2549 2.73395 4.09286 2.71488C3.93081 2.70535 3.75924 2.76254 3.67345 2.90552C2.72977 4.2972 2.45334 7.45231 2.97761 9.07276C3.15872 9.64469 3.21591 10.2452 3.11106 10.8267C3.0062 11.4081 2.89182 12.104 2.89182 12.5901C2.89182 17.5944 6.98107 21.6455 12.0331 21.6455H12.2428C17.2948 21.6455 21.384 17.5944 21.384 12.5901C21.384 12.104 21.2792 11.4081 21.1648 10.8267C21.0599 10.2452 21.1076 9.64469 21.2982 9.07276C21.8225 7.45231 21.5556 4.2972 20.6024 2.90552C20.5071 2.77207 20.345 2.70535 20.183 2.71488C20.0209 2.72441 19.8779 2.81973 19.7826 2.95318L18.6006 4.79287C18.2766 5.20275 17.6856 5.29807 17.2376 5.01211C15.7982 4.07797 14.0824 3.54417 12.2428 3.54417H12.0235H12.0331Z" stroke="#1F2A37" stroke-width="1.5"/>
|
|
4
|
+
<path d="M14.0443 15.0302L10.9941 10.2642L12.5192 12.6472L10.2315 15.0302" stroke="#1F2A37" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
5
|
+
</g>
|
|
6
|
+
<defs>
|
|
7
|
+
<clipPath id="clip0_2560_5349">
|
|
8
|
+
<rect width="20.2842" height="20.37" fill="white" transform="translate(1.99579 2)"/>
|
|
9
|
+
</clipPath>
|
|
10
|
+
</defs>
|
|
4
11
|
</svg>
|
|
@@ -6,15 +6,15 @@ import { Icon } from '../common-components/Icon';
|
|
|
6
6
|
export default function HasConAvatar({ name, designation, size, imageUrl }) {
|
|
7
7
|
const hasImageUrl = imageUrl && imageUrl.length > 0;
|
|
8
8
|
return (
|
|
9
|
-
<div className={`${size}
|
|
9
|
+
<div className={`${size} group flex-shrink-0 rounded-2xl flex items-center justify-between bg-neutral-0 tb:inline-flex tb:flex-col shadow hover:shadow-xl tb:min-w-[18rem]`}>
|
|
10
10
|
|
|
11
|
-
<div className="mx-5
|
|
11
|
+
<div className="mx-5 tb:flex-col tb:flex tb:items-center tb:p-8 tb:ml-0 bg-neutral-0">
|
|
12
12
|
<Typography textStyle='body1c-bold' className='text-blue-400'>{name}</Typography>
|
|
13
13
|
<Typography textStyle='body3c-medium' className='text-blue-800'>{designation}</Typography>
|
|
14
14
|
</div>
|
|
15
15
|
<div className='relative '>
|
|
16
16
|
<img
|
|
17
|
-
className={`inline-block w-[9rem]
|
|
17
|
+
className={`inline-block w-[9rem] tb:min-w-[18rem] tb:rounded-2xl border-neutral-0 rounded-r-2xl `}
|
|
18
18
|
src={imageUrl}
|
|
19
19
|
/>
|
|
20
20
|
<div className="absolute rounded-b-2xl inset-0 group-hover:bg-gradient-to-t group-hover:from-amber-200 group-hover:to-transparent group-hover:opacity-30" ></div>
|
|
@@ -2,10 +2,25 @@ import React from 'react';
|
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
import { Icon } from '../common-components/Icon';
|
|
4
4
|
|
|
5
|
+
const ANIMATED_ARR_CLASSES = {
|
|
6
|
+
'icon1':{
|
|
7
|
+
'sm':'h-5 ',
|
|
8
|
+
'md': 'h-5',
|
|
9
|
+
'lg': 'h-6'
|
|
10
|
+
},
|
|
11
|
+
'icon2':{
|
|
12
|
+
'sm':'h-5 -mt-5',
|
|
13
|
+
'md': 'h-5 -mt-5',
|
|
14
|
+
'lg': 'h-6 -mt-6'
|
|
15
|
+
},
|
|
16
|
+
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
|
|
5
20
|
const Buttonclasses = {
|
|
6
21
|
'primary': {
|
|
7
22
|
'default': {
|
|
8
|
-
'base': '
|
|
23
|
+
'base': 'db:w-fit tb:w-fit w-full justify-center justify-center bg-blue-500 text-neutral-0',
|
|
9
24
|
'hover': 'hover:bg-blue-700 hover:text-neutral-0',
|
|
10
25
|
'focus': 'focus:bg-blue-600 focus:shadow-[0_0px_0px_4px_#80A3FF] focus:text-neutral-0 focus:outline-none',
|
|
11
26
|
},
|
|
@@ -13,7 +28,7 @@ const Buttonclasses = {
|
|
|
13
28
|
},
|
|
14
29
|
'tonal': {
|
|
15
30
|
'default': {
|
|
16
|
-
'base': '
|
|
31
|
+
'base': 'db:w-fit tb:w-fit w-full justify-center bg-blue-100 text-blue-600',
|
|
17
32
|
'hover': 'hover:bg-blue-200 hover:text-blue-600',
|
|
18
33
|
'focus': 'focus:bg-blue-100 focus:text-blue-600 focus:shadow-[0px_0px_0px_4px_#DFE8FF] focus:outline-none',
|
|
19
34
|
},
|
|
@@ -21,7 +36,7 @@ const Buttonclasses = {
|
|
|
21
36
|
},
|
|
22
37
|
'secondary': {
|
|
23
38
|
'default': {
|
|
24
|
-
'base': '
|
|
39
|
+
'base': 'db:w-fit tb:w-fit w-full justify-center border-2 border-blue-500 bg-neutral-0 text-blue-500',
|
|
25
40
|
|
|
26
41
|
'hover': 'hover:text-neutral-800 hover:bg-blue-200 hover:border-2 hover:border-blue-500 hover:shadow hover:text-blue-500',
|
|
27
42
|
|
|
@@ -31,7 +46,7 @@ const Buttonclasses = {
|
|
|
31
46
|
},
|
|
32
47
|
'ghost': {
|
|
33
48
|
'default': {
|
|
34
|
-
'base': '
|
|
49
|
+
'base': 'db:w-fit tb:w-fit w-full justify-center text-blue-600',
|
|
35
50
|
'hover': 'hover:bg-blue-100 hover:text-blue-600',
|
|
36
51
|
'focus': 'focus:text-blue-700 focus:outline-none',
|
|
37
52
|
},
|
|
@@ -39,7 +54,7 @@ const Buttonclasses = {
|
|
|
39
54
|
},
|
|
40
55
|
'primaryLink': {
|
|
41
56
|
'default': {
|
|
42
|
-
'base': '
|
|
57
|
+
'base': 'db:w-fit tb:w-fit w-full justify-center text-blue-600',
|
|
43
58
|
'hover': 'hover:text-blue-700',
|
|
44
59
|
'focus': 'focus:text-blue-700 focus:outline-none',
|
|
45
60
|
},
|
|
@@ -47,7 +62,7 @@ const Buttonclasses = {
|
|
|
47
62
|
},
|
|
48
63
|
'secondaryLink': {
|
|
49
64
|
'default': {
|
|
50
|
-
'base': '
|
|
65
|
+
'base': 'db:w-fit tb:w-fit w-full justify-center text-neutral-800',
|
|
51
66
|
'hover': 'hover:text-neutral-900 hover:underline',
|
|
52
67
|
'focus': 'focus:text-neutral-900 focus:underline focus:outline-none',
|
|
53
68
|
},
|
|
@@ -95,6 +110,7 @@ export default function Button(props) {
|
|
|
95
110
|
|
|
96
111
|
const buttonClasses = [
|
|
97
112
|
'inline-flex items-center',
|
|
113
|
+
'hover:shadow',
|
|
98
114
|
'rounded-full',
|
|
99
115
|
`button-${size}`,
|
|
100
116
|
'group',
|
|
@@ -118,10 +134,10 @@ export default function Button(props) {
|
|
|
118
134
|
{label}
|
|
119
135
|
|
|
120
136
|
{rightAnimatedArrow && rightAnimatedArrow !== 'none' && (
|
|
121
|
-
<div className='
|
|
122
|
-
<Icon className='
|
|
137
|
+
<div className=' hover:transition-all '>
|
|
138
|
+
<Icon className='z-10 stroke-[1.5px] group-hover:translate-x-[0.15rem] group-hover:transition-all' height={`${ANIMATED_ARR_CLASSES['icon1'][`${size}`]}`} variant={'chevronright'} strokeColor={rightAnimatedArrowColor} />
|
|
123
139
|
|
|
124
|
-
<Icon className='invisible -
|
|
140
|
+
<Icon className='invisible stroke-[1.5px] group-hover:transition-all group-hover:delay-100 group-hover:visible' height={`${ANIMATED_ARR_CLASSES['icon2'][`${size}`]}`} variant='minus01' strokeColor={rightAnimatedArrowColor} />
|
|
125
141
|
|
|
126
142
|
</div>
|
|
127
143
|
)}
|
|
@@ -80,7 +80,7 @@ export default function Carouseltest(props) {
|
|
|
80
80
|
<button
|
|
81
81
|
type="button"
|
|
82
82
|
onClick={isLeft ? previousImage : nextImage}
|
|
83
|
-
className={`${arrowStyle} ${isLeft ? 'left-2
|
|
83
|
+
className={`${arrowStyle} ${isLeft ? 'left-2 db:-left-5' : 'right-2 db:-right-5'}`}
|
|
84
84
|
style={{ top: '40%' }}
|
|
85
85
|
>
|
|
86
86
|
<span role="img" aria-label={`Arrow ${isLeft ? 'left' : 'right'}`}>
|
|
@@ -5,6 +5,22 @@ export default function Carouseltest(props) {
|
|
|
5
5
|
const [currentCard, setCurrentCard] = React.useState(0);
|
|
6
6
|
const [touchStart, setTouchStart] = React.useState(0);
|
|
7
7
|
const [touchEnd, setTouchEnd] = React.useState(0);
|
|
8
|
+
const [visibleCardsContainerWidth, setvisibleCardsContainerWidth] = React.useState(0);
|
|
9
|
+
const [cardWidth, setcardWidth] = React.useState(0);
|
|
10
|
+
const [totalContainerWidth, setTotalContainerWidth] = React.useState(0);
|
|
11
|
+
React.useEffect(() => {
|
|
12
|
+
const visibleCardsContainerWidth = refs[0]?.current?.parentNode?.offsetWidth;
|
|
13
|
+
setvisibleCardsContainerWidth(visibleCardsContainerWidth);
|
|
14
|
+
const cardWidth = refs[0]?.current?.getBoundingClientRect().width;
|
|
15
|
+
setcardWidth(cardWidth);
|
|
16
|
+
|
|
17
|
+
const totalCardsWidth = Object.values(refs).reduce((acc, ref) => {
|
|
18
|
+
const rect = ref.current.getBoundingClientRect();
|
|
19
|
+
return acc + rect.width + parseFloat(getComputedStyle(ref.current).marginLeft) + parseFloat(getComputedStyle(ref.current).marginRight);
|
|
20
|
+
}, 0);
|
|
21
|
+
setTotalContainerWidth(totalCardsWidth);
|
|
22
|
+
}, []);
|
|
23
|
+
|
|
8
24
|
|
|
9
25
|
const handleTouchStart = e => {
|
|
10
26
|
setTouchStart(e.targetTouches[0].clientX);
|
|
@@ -57,15 +73,34 @@ export default function Carouseltest(props) {
|
|
|
57
73
|
}
|
|
58
74
|
};
|
|
59
75
|
const slider = () => {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
76
|
+
|
|
77
|
+
let x = visibleCardsContainerWidth;
|
|
78
|
+
let noOfcardsinaview = visibleCardsContainerWidth/cardWidth;
|
|
79
|
+
let y = 1;
|
|
80
|
+
console.log('noOfcardsinaview*currentCard',noOfcardsinaview*(currentCard+1));
|
|
81
|
+
// if((noOfcardsinaview*(currentCard+1))<=totalCards){
|
|
82
|
+
// let y = (totalContainerWidth/(noOfcardsinaview*visibleCardsContainerWidth))*(noOfcardsinaview*(currentCard+1));
|
|
83
|
+
|
|
84
|
+
// }
|
|
85
|
+
console.log(totalContainerWidth, visibleCardsContainerWidth, currentCard )
|
|
86
|
+
let slider1 = (384/(totalCards*cardWidth)) * (328)* (currentCard);
|
|
87
|
+
if(slider1>384){
|
|
88
|
+
slider1 = 384;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
console.log('x',x, 'slider1', slider1 );
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
let sliderWidth = slider1+ 'px';
|
|
97
|
+
return (
|
|
98
|
+
<div className=' '>
|
|
99
|
+
<div className='bg-pink-500 w-96 rounded-md content-center h-1'>
|
|
100
|
+
<div className={`bg-blue-600 transition-all ease-in duration-300 rounded-md h-1 `} style={{ width: `${sliderWidth}` }} />
|
|
101
|
+
</div>
|
|
65
102
|
</div>
|
|
66
|
-
|
|
67
|
-
</div>
|
|
68
|
-
)
|
|
103
|
+
)
|
|
69
104
|
};
|
|
70
105
|
|
|
71
106
|
const arrowStyle = ' text-2xl z-10 bg-black h-10 w-10 rounded-full bg-neutral-0 flex items-center justify-center';
|
|
@@ -92,7 +127,7 @@ export default function Carouseltest(props) {
|
|
|
92
127
|
);
|
|
93
128
|
return (
|
|
94
129
|
<div className="">
|
|
95
|
-
<div className="block
|
|
130
|
+
<div className="block tb:hidden">
|
|
96
131
|
{props.cards.map((item, i) => (
|
|
97
132
|
<div className="my-5" key={i} ref={refs[i]}>
|
|
98
133
|
<div className="rounded-3xl ">
|
|
@@ -103,7 +138,7 @@ export default function Carouseltest(props) {
|
|
|
103
138
|
))}
|
|
104
139
|
</div>
|
|
105
140
|
|
|
106
|
-
<div className="invisible flex flex-col-reverse
|
|
141
|
+
<div className="invisible flex flex-col-reverse tb:visible">
|
|
107
142
|
<div className="flex items-center justify-around mt-20 ">
|
|
108
143
|
{slider()}
|
|
109
144
|
<div className="flex">
|
|
@@ -127,7 +162,7 @@ export default function Carouseltest(props) {
|
|
|
127
162
|
}}
|
|
128
163
|
>
|
|
129
164
|
<div className="">
|
|
130
|
-
<div className={`snap-x
|
|
165
|
+
<div className={`snap-x w-full inline-flex select-none overflow-x-hidden scrollbar-hide`}>
|
|
131
166
|
|
|
132
167
|
{props.cards.map((item, i) => (
|
|
133
168
|
<div className="snap-center mx-5 shrink-0" key={i} ref={refs[i]}>
|
|
@@ -17,9 +17,9 @@ const Card = ({ text }) => {
|
|
|
17
17
|
|
|
18
18
|
return (
|
|
19
19
|
<div className="relative bg-white rounded-md shadow-md p-4 border bg-storybook-default-heading">
|
|
20
|
-
<p className="code-md font-medium
|
|
20
|
+
<p className="code-md whitespace-pre-wrap font-medium text-neutral-100">{text}</p>
|
|
21
21
|
<button
|
|
22
|
-
className=" code-md absolute bottom-0 right-0 border px-4 py-4 bg-neutral-100 text-storybook-default-heading rounded hover:bg-blue-
|
|
22
|
+
className=" code-md absolute bottom-0 right-0 border px-4 py-4 bg-neutral-100 text-storybook-default-heading rounded hover:bg-blue-100 focus:bg-blue-100 focus:outline-none"
|
|
23
23
|
onClick={handleCopy}
|
|
24
24
|
>
|
|
25
25
|
{isCopied ? "Copied!" : "Copy"}
|
|
@@ -10,41 +10,41 @@ export default function Typography(props) {
|
|
|
10
10
|
|
|
11
11
|
const ComponentType = Component;
|
|
12
12
|
const TYPOGRAPHY_CLASSES = {
|
|
13
|
-
'h1': 'text-hds-m-h1
|
|
14
|
-
'h2': 'text-hds-m-h2
|
|
15
|
-
'h3': 'text-hds-m-h3
|
|
16
|
-
'h4': 'text-hds-m-h4
|
|
17
|
-
'h5': 'text-hds-m-h5
|
|
18
|
-
'h6': 'text-hds-m-h6
|
|
19
|
-
'sub1': 'text-hds-m-sub1
|
|
20
|
-
'sub2': 'text-hds-m-sub2
|
|
21
|
-
'body1': 'text-hds-m-body1
|
|
22
|
-
'body1-medium': 'text-hds-m-body1-medium
|
|
23
|
-
'body1-semi-bold': 'text-hds-m-body1-semi-bold
|
|
24
|
-
'body1-bold': 'text-hds-m-body1-bold
|
|
25
|
-
'body1c': 'text-hds-m-body1c
|
|
26
|
-
'body1c-medium': 'text-hds-m-body1c-medium
|
|
27
|
-
'body1c-semi-bold': 'text-hds-m-body1c-semi-bold
|
|
28
|
-
'body1c-bold': 'text-hds-m-body1c-bold
|
|
29
|
-
'body2': 'text-hds-m-body2
|
|
30
|
-
'body2-medium': 'text-hds-m-body2-medium
|
|
31
|
-
'body2-semi-bold': 'text-hds-m-body2-semi-bold
|
|
32
|
-
'body2-bold': 'text-hds-m-body2-bold
|
|
33
|
-
'body2c': 'text-hds-m-body2c
|
|
34
|
-
'body2c-medium': 'text-hds-m-body2c-medium
|
|
35
|
-
'body2c-semi-bold': 'text-hds-m-body2c-semi-bold
|
|
36
|
-
'body2c-bold': 'text-hds-m-body2c-bold
|
|
37
|
-
'body3': 'text-hds-m-body3
|
|
38
|
-
'body3-medium': 'text-hds-m-body3-medium
|
|
39
|
-
'body3-semi-bold': 'text-hds-m-body3-semi-bold
|
|
40
|
-
'body3-bold': 'text-hds-m-body3-bold
|
|
41
|
-
'body3c': 'text-hds-m-body3c
|
|
42
|
-
'body3c-medium': 'text-hds-m-body3c-medium
|
|
43
|
-
'body3c-semi-bold': 'text-hds-m-body3c-semi-bold
|
|
44
|
-
'body3c-bold': 'text-hds-m-body3c-bold
|
|
45
|
-
'quote': 'text-hds-m-quote
|
|
46
|
-
'code1': 'text-hds-m-code1
|
|
47
|
-
'code2': 'text-hds-m-code2
|
|
13
|
+
'h1': 'text-hds-m-h1 tb:text-hds-t-h1 db:text-hds-d-h1',
|
|
14
|
+
'h2': 'text-hds-m-h2 tb:text-hds-t-h2 db:text-hds-d-h2',
|
|
15
|
+
'h3': 'text-hds-m-h3 tb:text-hds-t-h3 db:text-hds-d-h3',
|
|
16
|
+
'h4': 'text-hds-m-h4 tb:text-hds-t-h4 db:text-hds-d-h4',
|
|
17
|
+
'h5': 'text-hds-m-h5 tb:text-hds-t-h5 db:text-hds-d-h5',
|
|
18
|
+
'h6': 'text-hds-m-h6 tb:text-hds-t-h6 db:text-hds-d-h6',
|
|
19
|
+
'sub1': 'text-hds-m-sub1 tb:text-hds-t-sub1 db:text-hds-d-sub1',
|
|
20
|
+
'sub2': 'text-hds-m-sub2 tb:text-hds-t-sub2 db:text-hds-d-sub2',
|
|
21
|
+
'body1': 'text-hds-m-body1 tb:text-hds-t-body1 db:text-hds-d-body1',
|
|
22
|
+
'body1-medium': 'text-hds-m-body1-medium tb:text-hds-t-body1-medium db:text-hds-d-body1-medium',
|
|
23
|
+
'body1-semi-bold': 'text-hds-m-body1-semi-bold tb:text-hds-t-body1-semi-bold db:text-hds-d-body1-semi-bold',
|
|
24
|
+
'body1-bold': 'text-hds-m-body1-bold tb:text-hds-t-body1-bold db:text-hds-d-body1-bold',
|
|
25
|
+
'body1c': 'text-hds-m-body1c tb:text-hds-t-body1c db:text-hds-d-body1c',
|
|
26
|
+
'body1c-medium': 'text-hds-m-body1c-medium tb:text-hds-t-body1c-medium db:text-hds-d-body1c-medium',
|
|
27
|
+
'body1c-semi-bold': 'text-hds-m-body1c-semi-bold tb:text-hds-t-body1c-semi-bold db:text-hds-d-body1c-semi-bold',
|
|
28
|
+
'body1c-bold': 'text-hds-m-body1c-bold tb:text-hds-t-body1c-bold db:text-hds-d-body1c-bold',
|
|
29
|
+
'body2': 'text-hds-m-body2 tb:text-hds-t-body2 db:text-hds-d-body2',
|
|
30
|
+
'body2-medium': 'text-hds-m-body2-medium tb:text-hds-t-body2-medium db:text-hds-d-body2-medium',
|
|
31
|
+
'body2-semi-bold': 'text-hds-m-body2-semi-bold tb:text-hds-t-body2-semi-bold db:text-hds-d-body2-semi-bold',
|
|
32
|
+
'body2-bold': 'text-hds-m-body2-bold tb:text-hds-t-body2-bold db:text-hds-d-body2-bold',
|
|
33
|
+
'body2c': 'text-hds-m-body2c tb:text-hds-t-body2c db:text-hds-d-body2c',
|
|
34
|
+
'body2c-medium': 'text-hds-m-body2c-medium tb:text-hds-t-body2c-medium db:text-hds-d-body2c-medium',
|
|
35
|
+
'body2c-semi-bold': 'text-hds-m-body2c-semi-bold tb:text-hds-t-body2c-semi-bold db:text-hds-d-body2c-semi-bold',
|
|
36
|
+
'body2c-bold': 'text-hds-m-body2c-bold tb:text-hds-t-body2c-bold db:text-hds-d-body2c-bold',
|
|
37
|
+
'body3': 'text-hds-m-body3 tb:text-hds-t-body3 db:text-hds-d-body3',
|
|
38
|
+
'body3-medium': 'text-hds-m-body3-medium tb:text-hds-t-body3-medium db:text-hds-d-body3-medium',
|
|
39
|
+
'body3-semi-bold': 'text-hds-m-body3-semi-bold tb:text-hds-t-body3-semi-bold db:text-hds-d-body3-semi-bold',
|
|
40
|
+
'body3-bold': 'text-hds-m-body3-bold tb:text-hds-t-body3-bold db:text-hds-d-body3-bold',
|
|
41
|
+
'body3c': 'text-hds-m-body3c tb:text-hds-t-body3c db:text-hds-d-body3c',
|
|
42
|
+
'body3c-medium': 'text-hds-m-body3c-medium tb:text-hds-t-body3c-medium db:text-hds-d-body3c-medium',
|
|
43
|
+
'body3c-semi-bold': 'text-hds-m-body3c-semi-bold tb:text-hds-t-body3c-semi-bold db:text-hds-d-body3c-semi-bold',
|
|
44
|
+
'body3c-bold': 'text-hds-m-body3c-bold tb:text-hds-t-body3c-bold db:text-hds-d-body3c-bold',
|
|
45
|
+
'quote': 'text-hds-m-quote tb:text-hds-t-quote db:text-hds-d-quote',
|
|
46
|
+
'code1': 'text-hds-m-code1 tb:text-hds-t-code1 db:text-hds-d-code1',
|
|
47
|
+
'code2': 'text-hds-m-code2 tb:text-hds-t-code2 db:text-hds-d-code2',
|
|
48
48
|
}
|
|
49
49
|
return React.createElement(
|
|
50
50
|
ComponentType,
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {default as Time} from './time';
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
import React, { useState, useEffect } from 'react';
|
|
2
|
+
|
|
3
|
+
const TimeComponent = ({ format, countdownTime }) => {
|
|
4
|
+
const [currentTime, setCurrentTime] = useState(new Date());
|
|
5
|
+
|
|
6
|
+
useEffect(() => {
|
|
7
|
+
const interval = setInterval(() => {
|
|
8
|
+
setCurrentTime(new Date());
|
|
9
|
+
}, 1000);
|
|
10
|
+
return () => clearInterval(interval);
|
|
11
|
+
}, []);
|
|
12
|
+
|
|
13
|
+
const formatTime = () => {
|
|
14
|
+
switch (format) {
|
|
15
|
+
case 'MM/dd/yyyy hh:mm:ss tt':
|
|
16
|
+
return currentTime.toLocaleString('en-US', {
|
|
17
|
+
month: '2-digit',
|
|
18
|
+
day: '2-digit',
|
|
19
|
+
year: 'numeric',
|
|
20
|
+
hour: 'numeric',
|
|
21
|
+
minute: 'numeric',
|
|
22
|
+
second: 'numeric',
|
|
23
|
+
hour12: true,
|
|
24
|
+
});
|
|
25
|
+
case 'yyyy-mm-dd hh:mm:ss':
|
|
26
|
+
return currentTime.toLocaleString('en-US', {
|
|
27
|
+
year: 'numeric',
|
|
28
|
+
month: '2-digit',
|
|
29
|
+
day: '2-digit',
|
|
30
|
+
hour: 'numeric',
|
|
31
|
+
minute: 'numeric',
|
|
32
|
+
second: 'numeric',
|
|
33
|
+
}).replace(/,/g, '');
|
|
34
|
+
case 'yyyy-mm-dd HH:MM:SS tt':
|
|
35
|
+
return currentTime.toLocaleString('en-US', {
|
|
36
|
+
year: 'numeric',
|
|
37
|
+
month: '2-digit',
|
|
38
|
+
day: '2-digit',
|
|
39
|
+
hour: 'numeric',
|
|
40
|
+
minute: 'numeric',
|
|
41
|
+
second: 'numeric',
|
|
42
|
+
hour12: false,
|
|
43
|
+
});
|
|
44
|
+
case 'm/d/yyyy':
|
|
45
|
+
return currentTime.toLocaleString('en-US', {
|
|
46
|
+
month: 'numeric',
|
|
47
|
+
day: 'numeric',
|
|
48
|
+
year: 'numeric',
|
|
49
|
+
});
|
|
50
|
+
case 'yyyy-mm-dd':
|
|
51
|
+
return currentTime.toLocaleString('en-US', {
|
|
52
|
+
year: 'numeric',
|
|
53
|
+
month: '2-digit',
|
|
54
|
+
day: '2-digit',
|
|
55
|
+
});
|
|
56
|
+
default:
|
|
57
|
+
return currentTime.toLocaleString();
|
|
58
|
+
}
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
const countdown = () => {
|
|
62
|
+
if (!countdownTime) {
|
|
63
|
+
return null;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
const remainingTime = countdownTime - currentTime;
|
|
67
|
+
|
|
68
|
+
if (remainingTime <= 0) {
|
|
69
|
+
return <div>Time's up!</div>;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
const seconds = Math.floor(remainingTime / 1000) % 60;
|
|
73
|
+
const minutes = Math.floor(remainingTime / 1000 / 60) % 60;
|
|
74
|
+
const hours = Math.floor(remainingTime / 1000 / 60 / 60) % 24;
|
|
75
|
+
const days = Math.floor(remainingTime / 1000 / 60 / 60 / 24);
|
|
76
|
+
|
|
77
|
+
return (
|
|
78
|
+
<div>
|
|
79
|
+
<div>{days} days</div>
|
|
80
|
+
<div>
|
|
81
|
+
{hours.toString().padStart(2, '0')}:
|
|
82
|
+
{minutes.toString().padStart(2, '0')}:
|
|
83
|
+
{seconds.toString().padStart(2, '0')}
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
);
|
|
87
|
+
};
|
|
88
|
+
|
|
89
|
+
return (
|
|
90
|
+
<div>
|
|
91
|
+
<div>{formatTime()}</div>
|
|
92
|
+
{countdown()}
|
|
93
|
+
</div>
|
|
94
|
+
);
|
|
95
|
+
};
|
|
96
|
+
|
|
97
|
+
export default TimeComponent;
|