hds-web 1.0.0 → 1.0.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.
- package/.github/workflows/chromatic.yml +26 -0
- package/dist/index.css +4 -2
- package/dist/index.es.css +4 -2
- package/dist/index.es.js +11 -3
- package/dist/index.js +11 -3
- package/package.json +7 -3
- package/src/HDS/assets/icons/HasuraPrimary.svg +10 -0
- package/src/HDS/components/BadgesCaption/badges.js +1 -1
- package/src/HDS/components/Buttons/button.js +7 -7
- package/src/HDS/components/Cards/Menu/flyoutB.js +63 -0
- package/src/HDS/components/Cards/Menu/index.js +2 -1
- package/src/HDS/components/Cards/Misc/iconCard.js +22 -0
- package/src/HDS/components/Cards/Misc/index.js +2 -1
- package/src/HDS/components/Cards/Misc/talkCard.js +48 -27
- package/src/HDS/components/Carousels/carouselCard.js +24 -13
- package/src/HDS/components/Headers/customHeader.js +50 -41
- package/src/HDS/components/Headers/v3Header.js +127 -100
- package/src/HDS/components/Hero/h1.js +189 -0
- package/src/HDS/components/Hero/index.js +1 -0
- package/src/HDS/components/Snippet/CodeSnippet.js +58 -58
- package/src/HDS/components/Snippet/index.js +1 -1
- package/src/HDS/components/common-components/Icon/IconMap.js +2 -0
- package/src/HDS/components/index.js +2 -1
- package/src/HDS/foundation/Animations/featureCard.js +77 -0
- package/src/HDS/foundation/Animations/index.js +1 -0
- package/src/HDS/helpers/Time/time.js +48 -70
- package/src/index.css +154 -0
- package/src/styles/tailwind.css +1022 -199
- package/src/HDS/components/Avatars/selectors.js +0 -0
- package/src/HDS/components/Buttons/socialMediaButton.js +0 -78
- package/src/HDS/components/Cards/Misc/featureCard.js +0 -0
- package/src/HDS/foundation/Typography/translated.js +0 -20
File without changes
|
@@ -1,78 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
|
3
|
-
import { Icon } from '../common-components/Icon';
|
4
|
-
|
5
|
-
const Buttonclasses = {
|
6
|
-
'Type1': {
|
7
|
-
'base': 'bg-neutral-0 border border-neutral-400 py-2.5 px-6 text-md-medium',
|
8
|
-
'hover': 'hover:bg-neutral-100 hover:shadow',
|
9
|
-
'focus': 'focus:shadow-[0px_0px_0px_4px_#F3F4F6] focus:outline-none',
|
10
|
-
},
|
11
|
-
'Type2': {
|
12
|
-
'base': 'text-neutral-0 bg-[#333333]',
|
13
|
-
'hover': 'hover:bg-[#333333]',
|
14
|
-
'focus': 'focus:bg-[#333333] focus:outline-none focus:shadow-[0px_0px_0px_4px_#D2D6DB]',
|
15
|
-
},
|
16
|
-
'Type3': {
|
17
|
-
'base': 'text-neutral-800',
|
18
|
-
'hover': 'hover:text-neutral-900 hover:underline',
|
19
|
-
'focus': 'focus:text-neutral-900 focus:underline focus:outline-none',
|
20
|
-
},
|
21
|
-
'Custom': {
|
22
|
-
'base': 'text-neutral-800',
|
23
|
-
'hover': 'hover:text-neutral-900 hover:underline',
|
24
|
-
'focus': 'focus:text-neutral-900 focus:underline focus:outline-none',
|
25
|
-
},
|
26
|
-
}
|
27
|
-
|
28
|
-
export default function SMButton({ IconVariant, type, label, ...props }) {
|
29
|
-
let defaultClasses = '';
|
30
|
-
if (state === 'default') {
|
31
|
-
const baseClasses = Buttonclasses[type][state]['base'];
|
32
|
-
const hoverClasses = Buttonclasses[type][state]['hover'];
|
33
|
-
const focusClasses = Buttonclasses[type][state]['focus'];
|
34
|
-
defaultClasses = `${baseClasses} ${hoverClasses} ${focusClasses}`;
|
35
|
-
} else if (state === 'disabled') {
|
36
|
-
defaultClasses = Buttonclasses[type][state];
|
37
|
-
}
|
38
|
-
const buttonClasses = [
|
39
|
-
'inline-flex items-center',
|
40
|
-
'rounded-full',
|
41
|
-
`${Buttonclasses[type][state]}`,
|
42
|
-
`button-${size}`,
|
43
|
-
defaultClasses,
|
44
|
-
|
45
|
-
].join(' ');
|
46
|
-
|
47
|
-
return (
|
48
|
-
<div className='text-color-pink-500'>
|
49
|
-
<button
|
50
|
-
type="button"
|
51
|
-
className=' '
|
52
|
-
{...props}
|
53
|
-
>
|
54
|
-
{IconVariant && (
|
55
|
-
<div className='-ml-0.5 mr-2 h-4 w-4'>
|
56
|
-
<Icon variant={IconVariant} strokeColor={'#1EA7FD'} />
|
57
|
-
</div>
|
58
|
-
)}
|
59
|
-
{label}
|
60
|
-
</button>
|
61
|
-
</div>
|
62
|
-
);
|
63
|
-
|
64
|
-
};
|
65
|
-
|
66
|
-
SMButton.propTypes = {
|
67
|
-
label: PropTypes.string.isRequired,
|
68
|
-
type: PropTypes.string.isRequired,
|
69
|
-
state: PropTypes.oneOf(['default', 'disabled']),
|
70
|
-
IconVariant: PropTypes.string
|
71
|
-
};
|
72
|
-
|
73
|
-
SMButton.defaultProps = {
|
74
|
-
size: 'sm',
|
75
|
-
type: 'primary',
|
76
|
-
IconVariant: 'home03'
|
77
|
-
|
78
|
-
};
|
File without changes
|
@@ -1,20 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import { Translations } from '../../helpers/Translations';
|
3
|
-
|
4
|
-
function Typography(props) {
|
5
|
-
const {
|
6
|
-
children,
|
7
|
-
textStyle = 'h1',
|
8
|
-
className = '',
|
9
|
-
countryCode = 'es',
|
10
|
-
messageId = '',
|
11
|
-
} = props;
|
12
|
-
const translatedText = Translations[countryCode][messageId] || children;
|
13
|
-
return (
|
14
|
-
<div
|
15
|
-
className={`text-hds-m-${textStyle} md:text-hds-m-${textStyle} sm:text-hds-t-${textStyle} ${className}`}
|
16
|
-
>
|
17
|
-
{translatedText}</div>
|
18
|
-
);
|
19
|
-
}
|
20
|
-
export default Typography;
|