@mailstep/design-system 0.7.50-beta.2 → 0.7.50-beta.4
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,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
2
|
+
import { Admin } from '../../Elements/Icon/icons/Admin';
|
|
3
3
|
import { H6 } from '../../Elements/Typography/Typography';
|
|
4
4
|
import LanguageSwitch from '../LanguageSwitch';
|
|
5
5
|
import { LoginForm } from './components/LoginForm';
|
|
@@ -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, backgroundColor = _a.backgroundColor,
|
|
13
|
-
return (_jsxs(Wrapper, { backgroundImage: backgroundImage, backgroundColor: backgroundColor, children: [_jsxs(CardBodyWithLanguage, { children: [
|
|
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, backgroundColor = _a.backgroundColor, 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, loginLabel = _a.loginLabel;
|
|
13
|
+
return (_jsxs(Wrapper, { backgroundImage: backgroundImage, backgroundColor: backgroundColor, 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, loginLabel: loginLabel })] }), children, version && _jsx(Version, { children: version }), hasSocialLinks && _jsx(SocialLinks, {})] }));
|
|
14
14
|
};
|
|
15
15
|
export default Login;
|
|
@@ -68,7 +68,7 @@ export var Default = function () {
|
|
|
68
68
|
});
|
|
69
69
|
}); }, isSubmitting: false, isSubmitDisabled: false, activeLanguage: "en", version: "1.0.0", onLanguageChange: function (language) {
|
|
70
70
|
console.log('Language changed:', language);
|
|
71
|
-
}, brand: "mailship", brandVariant: "s", languageItems: languageItems }) }));
|
|
71
|
+
}, brand: "mailship", brandVariant: "s", admin: true, languageItems: languageItems }) }));
|
|
72
72
|
};
|
|
73
73
|
export var WithDistributionCenterSelect = function () {
|
|
74
74
|
return (_jsx(LinguiContainer, { children: _jsx(LoginPage, { onSubmit: function (data) { return __awaiter(void 0, void 0, void 0, function () {
|
|
@@ -16,9 +16,9 @@ export var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTe
|
|
|
16
16
|
return "".concat(backgroundColor ? backgroundColor : 'transparent', " ").concat(backgroundImage ? "url(".concat(backgroundImageMap[backgroundImage], ")") : '', " 50% 0% no-repeat padding-box;");
|
|
17
17
|
});
|
|
18
18
|
export var LanguageBox = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n margin: 15px 0;\n align-items: flex-end;\n justify-content: space-between;\n @media (min-width: 1024px) {\n justify-content: flex-end;\n margin: 40px 0;\n }\n"], ["\n display: flex;\n margin: 15px 0;\n align-items: flex-end;\n justify-content: space-between;\n @media (min-width: 1024px) {\n justify-content: flex-end;\n margin: 40px 0;\n }\n"])));
|
|
19
|
-
export var CardBodyWithLanguage = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n justify-content: start;\n padding: 0 32px 10px 32px;\n flex-grow: 1;\n margin: auto;\n width: 500px;\n @media (min-width: 1024px) {\n display: block;\n flex-grow: 0;\n }\n"], ["\n display: flex;\n justify-content: start;\n padding: 0 32px 10px 32px;\n flex-grow: 1;\n margin: auto;\n width: 500px;\n @media (min-width: 1024px) {\n display: block;\n flex-grow: 0;\n }\n"])));
|
|
19
|
+
export var CardBodyWithLanguage = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n justify-content: start;\n flex-direction: column;\n padding: 0 32px 10px 32px;\n flex-grow: 1;\n margin: auto;\n width: 500px;\n @media (min-width: 1024px) {\n display: block;\n flex-grow: 0;\n }\n"], ["\n display: flex;\n justify-content: start;\n flex-direction: column;\n padding: 0 32px 10px 32px;\n flex-grow: 1;\n margin: auto;\n width: 500px;\n @media (min-width: 1024px) {\n display: block;\n flex-grow: 0;\n }\n"])));
|
|
20
20
|
export var MailTo = styled.a(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n color: ", ";\n &:hover {\n color: ", ";\n }\n"], ["\n color: ", ";\n &:hover {\n color: ", ";\n }\n"])), th.color('typoPrimary'), th.color('red1'));
|
|
21
|
-
export var LogoWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n margin-top: 30px;\n @media (min-width: 1024px) {\n
|
|
21
|
+
export var LogoWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n margin-top: 30px;\n @media (min-width: 1024px) {\n justify-content: space-between;\n align-items: center;\n margin-top: 0;\n }\n"], ["\n display: flex;\n justify-content: center;\n margin-top: 30px;\n @media (min-width: 1024px) {\n justify-content: space-between;\n align-items: center;\n margin-top: 0;\n }\n"])));
|
|
22
22
|
export var MainLogo = styled(Logo)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n width: 50%;\n height: auto;\n"], ["\n width: 50%;\n height: auto;\n"])));
|
|
23
23
|
export var Version = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n color: gray;\n position: fixed;\n bottom: 10px;\n right: 10px;\n font-size: 12px;\n"], ["\n color: gray;\n position: fixed;\n bottom: 10px;\n right: 10px;\n font-size: 12px;\n"])));
|
|
24
24
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
@@ -24,9 +24,10 @@ export type LoginPageProps = {
|
|
|
24
24
|
version?: string;
|
|
25
25
|
backgroundImage?: BackgroundImages;
|
|
26
26
|
backgroundColor?: string;
|
|
27
|
-
|
|
27
|
+
icon?: string;
|
|
28
28
|
hasSupport?: boolean;
|
|
29
29
|
hasSocialLinks?: boolean;
|
|
30
30
|
withPassword?: boolean;
|
|
31
31
|
loginLabel?: string;
|
|
32
|
+
admin?: boolean;
|
|
32
33
|
};
|