@mailstep/design-system 0.7.50-beta.6 → 0.7.50-beta.8
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/package.json +1 -1
- package/ui/Blocks/LoginPage/LoginPage.js +2 -2
- package/ui/Blocks/LoginPage/components/LoginForm.d.ts +1 -0
- package/ui/Blocks/LoginPage/components/LoginForm.js +3 -2
- package/ui/Blocks/LoginPage/types.d.ts +1 -0
- package/ui/index.es.js +1701 -1699
- package/ui/index.umd.js +79 -79
package/package.json
CHANGED
|
@@ -9,7 +9,7 @@ import { Trans } from '@lingui/react';
|
|
|
9
9
|
import { x } from '@xstyled/styled-components';
|
|
10
10
|
import { Wrapper, MailTo, LanguageBox, LogoWrapper, MainLogo, Version, CardBodyWithLanguage } from './styles';
|
|
11
11
|
var Login = function (_a) {
|
|
12
|
-
var onSubmit = _a.onSubmit, activeLanguage = _a.activeLanguage, onLanguageChange = _a.onLanguageChange, children = _a.children, brand = _a.brand, brandVariant = _a.brandVariant, isSubmitting = _a.isSubmitting, isSubmitDisabled = _a.isSubmitDisabled, withDistributionCenterSelect = _a.withDistributionCenterSelect, distributionCenterOptions = _a.distributionCenterOptions, selectedDistributionCenter = _a.selectedDistributionCenter, onChangeDistributionCenter = _a.onChangeDistributionCenter, languageItems = _a.languageItems, version = _a.version, backgroundImage = _a.backgroundImage, admin = _a.admin, _b = _a.hasSupport, hasSupport = _b === void 0 ? true : _b, _c = _a.hasSocialLinks, hasSocialLinks = _c === void 0 ? true : _c, _d = _a.withPassword, withPassword = _d === void 0 ? true : _d, _e = _a.withLogin, withLogin = _e === void 0 ? true : _e, loginLabel = _a.loginLabel;
|
|
13
|
-
return (_jsxs(Wrapper, { backgroundImage: backgroundImage, children: [_jsxs(CardBodyWithLanguage, { children: [_jsxs(LogoWrapper, { children: [_jsx(MainLogo, { brand: brand, variant: brandVariant }), admin && _jsx(Admin, {})] }), _jsxs(LanguageBox, { children: [hasSupport && (_jsxs(x.div, { mr: 4, children: [_jsx(H6, { color: "gray1", variant: "bold", mt: "8px", mb: "8px", as: "h6", children: _jsx(Trans, { id: "form.heading.support", message: "Support:" }) }), _jsx(MailTo, { href: "mailto:mailstep@mailstep.cz", children: EMAIL_ADDRESS })] })), _jsx(LanguageSwitch, { activeLanguage: activeLanguage, onLanguageChange: onLanguageChange, languageItems: languageItems })] }), _jsx(LoginForm, { onSubmit: onSubmit, isSubmitDisabled: isSubmitDisabled, isSubmitting: isSubmitting, onChangeDistributionCenter: onChangeDistributionCenter, withDistributionCenterSelect: withDistributionCenterSelect, distributionCenterOptions: distributionCenterOptions, selectedDistributionCenter: selectedDistributionCenter, withPassword: withPassword, withLogin: withLogin, loginLabel: loginLabel })] }), children, version && _jsx(Version, { children: version }), hasSocialLinks && _jsx(SocialLinks, {})] }));
|
|
12
|
+
var onSubmit = _a.onSubmit, activeLanguage = _a.activeLanguage, onLanguageChange = _a.onLanguageChange, children = _a.children, brand = _a.brand, brandVariant = _a.brandVariant, isSubmitting = _a.isSubmitting, isSubmitDisabled = _a.isSubmitDisabled, withDistributionCenterSelect = _a.withDistributionCenterSelect, distributionCenterOptions = _a.distributionCenterOptions, selectedDistributionCenter = _a.selectedDistributionCenter, onChangeDistributionCenter = _a.onChangeDistributionCenter, languageItems = _a.languageItems, version = _a.version, backgroundImage = _a.backgroundImage, admin = _a.admin, _b = _a.hasSupport, hasSupport = _b === void 0 ? true : _b, _c = _a.hasSocialLinks, hasSocialLinks = _c === void 0 ? true : _c, _d = _a.withPassword, withPassword = _d === void 0 ? true : _d, _e = _a.withLogin, withLogin = _e === void 0 ? true : _e, loginLabel = _a.loginLabel, passwordLabel = _a.passwordLabel;
|
|
13
|
+
return (_jsxs(Wrapper, { backgroundImage: backgroundImage, children: [_jsxs(CardBodyWithLanguage, { children: [_jsxs(LogoWrapper, { children: [_jsx(MainLogo, { brand: brand, variant: brandVariant }), admin && _jsx(Admin, {})] }), _jsxs(LanguageBox, { children: [hasSupport && (_jsxs(x.div, { mr: 4, children: [_jsx(H6, { color: "gray1", variant: "bold", mt: "8px", mb: "8px", as: "h6", children: _jsx(Trans, { id: "form.heading.support", message: "Support:" }) }), _jsx(MailTo, { href: "mailto:mailstep@mailstep.cz", children: EMAIL_ADDRESS })] })), _jsx(LanguageSwitch, { activeLanguage: activeLanguage, onLanguageChange: onLanguageChange, languageItems: languageItems })] }), _jsx(LoginForm, { onSubmit: onSubmit, isSubmitDisabled: isSubmitDisabled, isSubmitting: isSubmitting, onChangeDistributionCenter: onChangeDistributionCenter, withDistributionCenterSelect: withDistributionCenterSelect, distributionCenterOptions: distributionCenterOptions, selectedDistributionCenter: selectedDistributionCenter, withPassword: withPassword, withLogin: withLogin, loginLabel: loginLabel, passwordLabel: passwordLabel })] }), children, version && _jsx(Version, { children: version }), hasSocialLinks && _jsx(SocialLinks, {})] }));
|
|
14
14
|
};
|
|
15
15
|
export default Login;
|
|
@@ -13,7 +13,7 @@ import styled, { x } from '@xstyled/styled-components';
|
|
|
13
13
|
var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n width: 100%;\n box-sizing: border-box;\n margin-bottom: 10px;\n & > div > H4 {\n display: none;\n }\n @media (min-width: 1024px) {\n height: 300px;\n min-width: 300px;\n margin-bottom: 50px;\n & > div > H4 {\n display: block;\n }\n }\n"], ["\n display: block;\n width: 100%;\n box-sizing: border-box;\n margin-bottom: 10px;\n & > div > H4 {\n display: none;\n }\n @media (min-width: 1024px) {\n height: 300px;\n min-width: 300px;\n margin-bottom: 50px;\n & > div > H4 {\n display: block;\n }\n }\n"])));
|
|
14
14
|
var ButtonsContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n margin-top: 15px;\n width: 100%;\n @media (min-width: 1024px) {\n display: inline-block;\n margin-top: 40px;\n }\n"], ["\n display: flex;\n margin-top: 15px;\n width: 100%;\n @media (min-width: 1024px) {\n display: inline-block;\n margin-top: 40px;\n }\n"])));
|
|
15
15
|
export var LoginForm = function (_a) {
|
|
16
|
-
var onSubmit = _a.onSubmit, isSubmitting = _a.isSubmitting, isSubmitDisabled = _a.isSubmitDisabled, distributionCenterOptions = _a.distributionCenterOptions, withDistributionCenterSelect = _a.withDistributionCenterSelect, onChangeDistributionCenter = _a.onChangeDistributionCenter, selectedDistributionCenter = _a.selectedDistributionCenter, withPassword = _a.withPassword, withLogin = _a.withLogin, loginLabel = _a.loginLabel;
|
|
16
|
+
var onSubmit = _a.onSubmit, isSubmitting = _a.isSubmitting, isSubmitDisabled = _a.isSubmitDisabled, distributionCenterOptions = _a.distributionCenterOptions, withDistributionCenterSelect = _a.withDistributionCenterSelect, onChangeDistributionCenter = _a.onChangeDistributionCenter, selectedDistributionCenter = _a.selectedDistributionCenter, withPassword = _a.withPassword, withLogin = _a.withLogin, loginLabel = _a.loginLabel, passwordLabel = _a.passwordLabel;
|
|
17
17
|
var _b = useState(''), login = _b[0], setLogin = _b[1];
|
|
18
18
|
var _c = useState(''), password = _c[0], setPassword = _c[1];
|
|
19
19
|
var _d = useState(''), submitError = _d[0], setSubmitError = _d[1];
|
|
@@ -30,6 +30,7 @@ export var LoginForm = function (_a) {
|
|
|
30
30
|
setLoginError('');
|
|
31
31
|
setPasswordError('');
|
|
32
32
|
setDCCenterError('');
|
|
33
|
+
setSubmitError('');
|
|
33
34
|
if (withLogin && !login) {
|
|
34
35
|
setLoginError(i18n._({ id: 'requiredField', message: 'Required field' }));
|
|
35
36
|
return;
|
|
@@ -53,7 +54,7 @@ export var LoginForm = function (_a) {
|
|
|
53
54
|
var handleChangeDistributionCenter = useCallback(function (e) {
|
|
54
55
|
onChangeDistributionCenter === null || onChangeDistributionCenter === void 0 ? void 0 : onChangeDistributionCenter(e.target.value);
|
|
55
56
|
}, [onChangeDistributionCenter]);
|
|
56
|
-
return (_jsxs(Container, { children: [withLogin && (_jsx(x.div, { mt: "24px", children: _jsx(Input, { label: loginLabel || i18n._({ id: 'form.login.label', message: 'Login' }), placeholder: i18n._({ id: 'form.login.label', message: 'Login' }), type: "text", name: "login", autoFocus: true, error: loginError, value: login, onChange: handleChangeLogin, onEnter: handleSubmit }) })), withPassword && (_jsx(x.div, { mt: "12px", children: _jsx(Input, { label: i18n._({ id: 'form.password.label', message: 'Password' }), placeholder: i18n._({ id: 'form.password.label', message: 'Password' }), name: "password", type: "password", value: password, onChange: handleChangePassword, error: passwordError, onEnter: handleSubmit }) })), withDistributionCenterSelect && (_jsx(x.div, { mt: "12px", children: _jsx(SingleSelect
|
|
57
|
+
return (_jsxs(Container, { children: [withLogin && (_jsx(x.div, { mt: "24px", children: _jsx(Input, { label: loginLabel || i18n._({ id: 'form.login.label', message: 'Login' }), placeholder: i18n._({ id: 'form.login.label', message: 'Login' }), type: "text", name: "login", autoFocus: true, error: loginError, value: login, onChange: handleChangeLogin, onEnter: handleSubmit }) })), withPassword && (_jsx(x.div, { mt: "12px", children: _jsx(Input, { label: passwordLabel || i18n._({ id: 'form.password.label', message: 'Password' }), placeholder: i18n._({ id: 'form.password.label', message: 'Password' }), name: "password", type: "password", value: password, onChange: handleChangePassword, error: passwordError, onEnter: handleSubmit }) })), withDistributionCenterSelect && (_jsx(x.div, { mt: "12px", children: _jsx(SingleSelect
|
|
57
58
|
// @ts-ignore
|
|
58
59
|
, {
|
|
59
60
|
// @ts-ignore
|