@mailstep/design-system 0.7.49 → 0.7.50-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.7.49",
+  "version": "0.7.50-beta.0",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Blocks/LoginPage/LoginPage.js

@@ -8,7 +8,7 @@ import { Trans } from '@lingui/react';
 import { x } from '@xstyled/styled-components';
 import { Wrapper, MailTo, LanguageBox, LogoWrapper, MainLogo, Version, CardBodyWithLanguage } from './styles';
 var Login = function (_a) {
-    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, _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;
-    return (_jsxs(Wrapper, { backgroundImage: backgroundImage, children: [_jsxs(CardBodyWithLanguage, { children: [_jsx(LogoWrapper, { children: _jsx(MainLogo, { brand: brand, variant: brandVariant }) }), _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, {})] }));
+    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, _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;
+    return (_jsxs(Wrapper, { backgroundImage: backgroundImage, backgroundColor: backgroundColor, children: [_jsxs(CardBodyWithLanguage, { children: [_jsx(LogoWrapper, { children: _jsx(MainLogo, { brand: brand, variant: brandVariant }) }), _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, {})] }));
 };
 export default Login;

package/ui/Blocks/LoginPage/styles.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 export declare const Wrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     backgroundImage?: "mailship" | undefined;
+    backgroundColor?: string | undefined;
 }, never>;
 export declare const LanguageBox: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
 export declare const CardBodyWithLanguage: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;

package/ui/Blocks/LoginPage/styles.js

@@ -8,9 +8,12 @@ import styled, { th } from '@xstyled/styled-components';
 var backgroundImageMap = {
     mailship: mailship
 };
-export var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  font-family: ", ";\n  flex-grow: 1;\n  background: ", ";\n  opacity: 1;\n  z-index: 1;\n  display: flex;\n  justify-content: space-between;\n  @media (min-width: 1024px) {\n    background: ", "\n    background-size: cover;\n  }\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  font-family: ", ";\n  flex-grow: 1;\n  background: ", ";\n  opacity: 1;\n  z-index: 1;\n  display: flex;\n  justify-content: space-between;\n  @media (min-width: 1024px) {\n    background: ", "\n    background-size: cover;\n  }\n"])), th('fonts.primary'), th('colors.bgLightGray'), function (_a) {
-    var backgroundImage = _a.backgroundImage;
-    return "transparent ".concat(backgroundImage && "url(".concat(backgroundImageMap[backgroundImage], ")"), " 50% 0% no-repeat padding-box;");
+export var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  font-family: ", ";\n  flex-grow: 1;\n  background: ", ";\n  opacity: 1;\n  z-index: 1;\n  display: flex;\n  justify-content: space-between;\n  @media (min-width: 1024px) {\n    background: ", "\n    background-size: cover;\n  }\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  font-family: ", ";\n  flex-grow: 1;\n  background: ", ";\n  opacity: 1;\n  z-index: 1;\n  display: flex;\n  justify-content: space-between;\n  @media (min-width: 1024px) {\n    background: ", "\n    background-size: cover;\n  }\n"])), th('fonts.primary'), function (_a) {
+    var backgroundColor = _a.backgroundColor;
+    return backgroundColor || th('colors.bgLightGray');
+}, function (_a) {
+    var backgroundImage = _a.backgroundImage, backgroundColor = _a.backgroundColor;
+    return "".concat(backgroundColor ? backgroundColor : 'transparent', " ").concat(backgroundImage && "url(".concat(backgroundImageMap[backgroundImage], ")"), " 50% 0% no-repeat padding-box;");
 });
 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"])));
 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"])));

package/ui/Blocks/LoginPage/types.d.ts

@@ -23,6 +23,7 @@ export type LoginPageProps = {
     languageItems?: LanguageItem[];
     version?: string;
     backgroundImage?: BackgroundImages;
+    backgroundColor?: string;
     hasSupport?: boolean;
     hasSocialLinks?: boolean;
     withPassword?: boolean;