@mailstep/design-system 0.7.50-beta.7 → 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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mailstep/design-system",
3
- "version": "0.7.50-beta.7",
3
+ "version": "0.7.50-beta.8",
4
4
  "license": "ISC",
5
5
  "type": "module",
6
6
  "main": "./ui/index.js",
@@ -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;
@@ -11,6 +11,7 @@ type Props = {
11
11
  selectedDistributionCenter?: string;
12
12
  withPassword?: boolean;
13
13
  loginLabel?: string;
14
+ passwordLabel?: string;
14
15
  withLogin?: boolean;
15
16
  };
16
17
  export declare const LoginForm: FC<Props>;
@@ -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];
@@ -54,7 +54,7 @@ export var LoginForm = function (_a) {
54
54
  var handleChangeDistributionCenter = useCallback(function (e) {
55
55
  onChangeDistributionCenter === null || onChangeDistributionCenter === void 0 ? void 0 : onChangeDistributionCenter(e.target.value);
56
56
  }, [onChangeDistributionCenter]);
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: 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
58
58
  // @ts-ignore
59
59
  , {
60
60
  // @ts-ignore
@@ -29,5 +29,6 @@ export type LoginPageProps = {
29
29
  withPassword?: boolean;
30
30
  withLogin?: boolean;
31
31
  loginLabel?: string;
32
+ passwordLabel?: string;
32
33
  admin?: boolean;
33
34
  };