@prosistemas/sca-web-kit 2.6.5 → 3.0.0
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/assets/icons/newsletter.svg +11 -0
- package/dist/components/shared/newsletter-modal/newsletter-modal.js +1 -1
- package/dist/components/shared/newsletter-strip/newsletter-strip.js +2 -3
- package/dist/components/shared/newsletter-strip/newsletter-strip.module.scss +73 -82
- package/dist/index.d.ts +0 -1
- package/dist/index.js +0 -2
- package/package.json +1 -1
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M30.8766 33.1272H17.3852C14.9028 33.1272 12.8906 31.1151 12.8906 28.6326V19.6332C12.8906 17.1508 14.9028 15.1387 17.3852 15.1387H30.8817C33.3642 15.1387 35.3763 17.1508 35.3763 19.6332V28.6326C35.3737 31.1125 33.3616 33.1272 30.8766 33.1272V33.1272Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
+
<path d="M13.0703 18.4336L21.3733 24.3724C23.0128 25.5468 25.2177 25.5468 26.8598 24.3775L35.1911 18.4362" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
+
<g opacity="0.4">
|
|
5
|
+
<path d="M6.55469 9.12114C7.73936 7.73345 9.0885 6.49738 10.5687 5.42578" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
6
|
+
<path d="M36.9802 43.3555C33.3054 45.8173 28.888 47.2564 24.1313 47.2564C21.7876 47.2564 19.5288 46.9018 17.3984 46.2542" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
7
|
+
<path d="M9.60598 42.1171C6.31408 39.4573 3.7854 35.9059 2.34375 31.8379" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
8
|
+
<path d="M2.34752 16.418C1.49178 18.8336 1.00352 21.4188 1.00352 24.1273" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
9
|
+
<path d="M43.3112 36.9771C45.7884 33.2997 47.2609 28.8951 47.2609 24.1281C47.2609 11.3537 36.9072 1 24.1328 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
10
|
+
</g>
|
|
11
|
+
</svg>
|
|
@@ -6,5 +6,5 @@ import newsletterSuccessIcon from '@prosistemas/sca-web-kit/assets/icons/newslet
|
|
|
6
6
|
import Button from '../../ui/button/button';
|
|
7
7
|
import { XIcon } from '@phosphor-icons/react/dist/ssr';
|
|
8
8
|
export default function NewsletterModal({ onCloseButtonClick, type, }) {
|
|
9
|
-
return (_jsxs("div", { className: styles['newsletter-modal'], children: [_jsx(Button, { className: styles['close-button'], icon: XIcon, iconWeight: "bold", round: true, onClick: onCloseButtonClick }), _jsx("img", { src: type === "error" ? newsletterErrorIcon : newsletterSuccessIcon, alt: "
|
|
9
|
+
return (_jsxs("div", { className: styles['newsletter-modal'], children: [_jsx(Button, { className: styles['close-button'], icon: XIcon, iconWeight: "bold", round: true, onClick: onCloseButtonClick }), _jsx("img", { src: type === "error" ? newsletterErrorIcon : newsletterSuccessIcon, alt: "", width: 150, height: 150, className: styles['icon'] }), type === 'success' ? (_jsxs(_Fragment, { children: [_jsx("p", { className: `${styles['title']} ${montserrat.className}`, children: "Cadastro realizado com sucesso!" }), _jsx("p", { className: styles['subtitle'], children: "Agora voc\u00EA receber\u00E1 em primeira m\u00E3o, os melhores conte\u00FAdos sobre gest\u00E3o de pessoas, despesas e benef\u00EDcios." })] })) : type === 'already-registered' ? (_jsxs(_Fragment, { children: [_jsx("p", { className: `${styles['title']} ${montserrat.className}`, children: "Seu e-mail j\u00E1 est\u00E1 cadastrado!" }), _jsx("p", { className: styles['subtitle'], children: "Esse endere\u00E7o de e-mail j\u00E1 consta no nosso banco de dados. " })] })) : (_jsxs(_Fragment, { children: [_jsx("p", { className: `${styles['title']} ${montserrat.className}`, children: "Um erro ocorreu ao registrar seu e-mail!" }), _jsx("p", { className: styles['subtitle'], children: "Verifique se o seu e-mail foi digitado corretamente e tente novamente por gentileza." })] }))] }));
|
|
10
10
|
}
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import styles from './newsletter-strip.module.scss';
|
|
3
|
-
import { inter } from '../../../fonts';
|
|
4
3
|
import scaGradientLogo from '@prosistemas/sca-web-kit/assets/logos/sca/sca-s-gradient.svg';
|
|
4
|
+
import newsletterIcon from '@prosistemas/sca-web-kit/assets/icons/newsletter.svg';
|
|
5
5
|
import InfoHeader from '../info-header/info-header';
|
|
6
6
|
import Button from '../../ui/button/button';
|
|
7
|
-
import { EnvelopeIcon } from '@phosphor-icons/react/dist/ssr';
|
|
8
7
|
import Image from 'next/image';
|
|
9
8
|
export default function NewsletterStrip({ buttonLabel, onButtonClick, onFormSubmit, buttonLoading = false, buttonDisabled = false, emailValue, onEmailChange, nameValue, onNameChange, }) {
|
|
10
|
-
return (_jsxs("div", { className: styles['newsletter-strip'], children: [
|
|
9
|
+
return (_jsxs("div", { className: styles['newsletter-strip'], children: [_jsx(Image, { className: styles['icon'], src: newsletterIcon, width: 46, height: 46, alt: '' }), _jsx(InfoHeader, { className: styles['info-header'], titleClassName: styles['title'], subtitleClassName: styles['subtitle'], title: 'Os melhores conte\u00FAdos de tecnologia e fitness', subtitle: 'Assine e receba novidades toda semana em sua caixa de entrada.', dark: true }), _jsxs("form", { className: styles['input-wrapper'], onSubmit: onFormSubmit, children: [_jsx("input", { className: `${styles['name']} `, id: "name", type: "text", name: "text", placeholder: "Insira seu nome", value: nameValue, onChange: onNameChange, required: true }), _jsx("input", { className: `${styles['email']}`, id: "email", type: "email", name: "email", placeholder: "Insira seu e-mail", value: emailValue, onChange: onEmailChange, required: true }), _jsx(Button, { className: styles['button'], label: buttonLabel ?? "Assinar", onClick: onButtonClick, loading: buttonLoading, disabled: buttonDisabled, type: 'submit' }), _jsx("div", { className: styles['blue-hue'] })] }), _jsxs("div", { className: styles['background-logo'], children: [_jsx(Image, { className: styles['logo'], src: scaGradientLogo, width: 335.5, height: 439.05, alt: '' }), _jsx("div", { className: styles['hue'] })] })] }));
|
|
11
10
|
}
|
|
@@ -1,133 +1,124 @@
|
|
|
1
1
|
.newsletter-strip {
|
|
2
|
+
position: relative;
|
|
2
3
|
width: 100%;
|
|
4
|
+
max-width: 1440px;
|
|
5
|
+
|
|
3
6
|
display: flex;
|
|
7
|
+
flex-direction: column;
|
|
4
8
|
align-items: center;
|
|
5
|
-
|
|
6
|
-
gap: var(--global-padding-single);
|
|
9
|
+
gap: 32px;
|
|
7
10
|
|
|
8
|
-
padding:
|
|
11
|
+
padding: 72px var(--global-padding-single);
|
|
9
12
|
background: var(--dark700);
|
|
10
13
|
|
|
11
|
-
|
|
12
|
-
|
|
14
|
+
.icon {
|
|
15
|
+
z-index: 1;
|
|
13
16
|
}
|
|
14
17
|
|
|
15
|
-
.
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
align-items: center;
|
|
19
|
-
}
|
|
18
|
+
.info-header {
|
|
19
|
+
z-index: 1;
|
|
20
|
+
gap: 6px;
|
|
20
21
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
@media (max-width: 1024px) {
|
|
25
|
-
flex-direction: column;
|
|
26
|
-
gap: 16px;
|
|
22
|
+
.title {
|
|
23
|
+
font-size: 24px;
|
|
27
24
|
}
|
|
28
25
|
|
|
29
|
-
.
|
|
30
|
-
|
|
26
|
+
.subtitle {
|
|
27
|
+
font-size: 16px;
|
|
28
|
+
opacity: 0.8;
|
|
31
29
|
}
|
|
30
|
+
}
|
|
32
31
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
align-items: flex-start;
|
|
32
|
+
.input-wrapper {
|
|
33
|
+
width: 100%;
|
|
34
|
+
padding: 0 100px;
|
|
37
35
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
36
|
+
z-index: 1;
|
|
37
|
+
display: flex;
|
|
38
|
+
align-items: center;
|
|
39
|
+
gap: 16px;
|
|
41
40
|
|
|
42
|
-
|
|
41
|
+
@media (max-width: 1024px) {
|
|
42
|
+
padding: 0 64px;
|
|
43
|
+
}
|
|
43
44
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
}
|
|
45
|
+
@media (max-width: 900px) {
|
|
46
|
+
padding: 0 32px;
|
|
47
47
|
}
|
|
48
|
-
}
|
|
49
48
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
49
|
+
@media (max-width: 768px) {
|
|
50
|
+
padding: 0;
|
|
51
|
+
}
|
|
53
52
|
|
|
54
53
|
@media (max-width: 768px) {
|
|
55
|
-
width: 100%;
|
|
56
54
|
flex-direction: column;
|
|
55
|
+
max-width: 415px;
|
|
57
56
|
}
|
|
58
57
|
|
|
59
|
-
.email,
|
|
60
|
-
.name {
|
|
61
|
-
height: 55.5px;
|
|
62
58
|
|
|
63
|
-
|
|
64
|
-
|
|
59
|
+
.name,
|
|
60
|
+
.email {
|
|
61
|
+
width: 100%;
|
|
62
|
+
height: 56px;
|
|
65
63
|
|
|
66
|
-
background:
|
|
64
|
+
background: white;
|
|
67
65
|
border: none;
|
|
68
66
|
outline: none;
|
|
69
|
-
z-index: 1;
|
|
70
67
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
.email {
|
|
79
|
-
width: 335px;
|
|
68
|
+
border-radius: 8px;
|
|
69
|
+
color: var(--neutral700);
|
|
70
|
+
font-size: 14px;
|
|
71
|
+
padding: 0 24px;
|
|
80
72
|
}
|
|
81
73
|
|
|
82
|
-
.name
|
|
83
|
-
|
|
74
|
+
.name::placeholder,
|
|
75
|
+
.email::placeholder {
|
|
76
|
+
color: var(--neutral500);
|
|
77
|
+
font-size: 14px;
|
|
84
78
|
}
|
|
85
79
|
|
|
86
80
|
.button {
|
|
87
|
-
|
|
88
|
-
height: 55.5px;
|
|
89
|
-
padding: 16px 48px;
|
|
90
|
-
z-index: 1;
|
|
81
|
+
height: 56px;
|
|
91
82
|
|
|
92
83
|
@media (max-width: 768px) {
|
|
93
84
|
width: 100%;
|
|
94
85
|
}
|
|
95
86
|
}
|
|
87
|
+
}
|
|
96
88
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
right: 0px;
|
|
89
|
+
.background-logo {
|
|
90
|
+
position: absolute;
|
|
91
|
+
top: -24px;
|
|
92
|
+
left: 64px;
|
|
102
93
|
|
|
103
|
-
|
|
94
|
+
z-index: 0;
|
|
104
95
|
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
transform: translateX(-50%);
|
|
108
|
-
scale: 120%;
|
|
109
|
-
transform-origin: bottom center;
|
|
110
|
-
}
|
|
96
|
+
width: 335.5px;
|
|
97
|
+
height: 439.05px;
|
|
111
98
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
.blue-hue {
|
|
118
|
-
opacity: 0.7;
|
|
99
|
+
@media (max-width: 768px) {
|
|
100
|
+
top: 50%;
|
|
101
|
+
left: 50%;
|
|
119
102
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
background: var(--light500);
|
|
124
|
-
filter: blur(125px);
|
|
103
|
+
transform: translateY(-50%) translateX(-50%);
|
|
104
|
+
transform-origin: center;
|
|
105
|
+
}
|
|
125
106
|
|
|
107
|
+
.logo {
|
|
108
|
+
position: absolute;
|
|
109
|
+
z-index: 2;
|
|
126
110
|
}
|
|
127
111
|
|
|
128
|
-
.
|
|
112
|
+
.hue {
|
|
129
113
|
position: absolute;
|
|
130
|
-
z-index:
|
|
114
|
+
z-index: 1;
|
|
115
|
+
|
|
116
|
+
width: 302px;
|
|
117
|
+
height: 586px;
|
|
118
|
+
|
|
119
|
+
border-radius: 50%;
|
|
120
|
+
filter: blur(125px);
|
|
121
|
+
background: var(--light500);
|
|
131
122
|
}
|
|
132
123
|
}
|
|
133
124
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -10,4 +10,3 @@ export { default as InfoHeader } from './components/shared/info-header/info-head
|
|
|
10
10
|
export { default as NewsletterStrip } from './components/shared/newsletter-strip/newsletter-strip';
|
|
11
11
|
export { default as NewsletterModal } from './components/shared/newsletter-modal/newsletter-modal';
|
|
12
12
|
export { default as NewsletterModalDialog } from './components/shared/newsletter-modal-dialog/newsletter-modal-dialog';
|
|
13
|
-
export { default as Footer } from './components/layout/footer/footer';
|
package/dist/index.js
CHANGED
|
@@ -12,5 +12,3 @@ export { default as InfoHeader } from './components/shared/info-header/info-head
|
|
|
12
12
|
export { default as NewsletterStrip } from './components/shared/newsletter-strip/newsletter-strip';
|
|
13
13
|
export { default as NewsletterModal } from './components/shared/newsletter-modal/newsletter-modal';
|
|
14
14
|
export { default as NewsletterModalDialog } from './components/shared/newsletter-modal-dialog/newsletter-modal-dialog';
|
|
15
|
-
// Layout
|
|
16
|
-
export { default as Footer } from './components/layout/footer/footer';
|