@mailstep/design-system 0.7.20 → 0.7.21-beta.1

package/package.json

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

package/ui/Blocks/CommonGrid/store/index.d.ts

@@ -29,7 +29,7 @@ export declare const actionTypes: {
 declare const _default: (state: MultiState | undefined, action: Action) => MultiState;
 export default _default;
 export declare const createActions: (gridName: string) => {
-    init: (initProps: InitProps) => Action;
+    init: (initProps?: InitProps) => Action;
     clearUxState: () => Action;
     handleUxChange: (uxKey: keyof GridState['uxState'], uxValue: any) => Action;
     openConfigForm: () => Action;

package/ui/Blocks/CommonGrid/store/index.js

@@ -158,7 +158,10 @@ export default (function (state, action) {
     });
 });
 export var createActions = function (gridName) { return ({
-    init: function (initProps) { return ({ gridName: gridName, type: actionTypes.init, initProps: initProps }); },
+    init: function (initProps) {
+        if (initProps === void 0) { initProps = {}; }
+        return ({ gridName: gridName, type: actionTypes.init, initProps: initProps });
+    },
     clearUxState: function () { return ({ gridName: gridName, type: actionTypes.clearUxState }); },
     handleUxChange: function (uxKey, uxValue) { return ({
         gridName: gridName,

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;
-    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 })] }), 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, _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, {})] }));
 };
 export default Login;

package/ui/Blocks/LoginPage/components/LoginForm.d.ts

@@ -9,6 +9,8 @@ type Props = {
     distributionCenterOptions?: Option[];
     onChangeDistributionCenter?: (dcId: string) => void;
     selectedDistributionCenter?: string;
+    withPassword?: boolean;
+    loginLabel?: string;
 };
 export declare const LoginForm: FC<Props>;
 export {};

package/ui/Blocks/LoginPage/components/LoginForm.js

@@ -13,7 +13,7 @@ import styled, { x } from '@xstyled/styled-components';
 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"])));
 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"])));
 export var LoginForm = function (_a) {
-    var onSubmit = _a.onSubmit, isSubmitting = _a.isSubmitting, isSubmitDisabled = _a.isSubmitDisabled, distributionCenterOptions = _a.distributionCenterOptions, withDistributionCenterSelect = _a.withDistributionCenterSelect, onChangeDistributionCenter = _a.onChangeDistributionCenter, selectedDistributionCenter = _a.selectedDistributionCenter;
+    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, loginLabel = _a.loginLabel;
     var _b = useState(''), login = _b[0], setLogin = _b[1];
     var _c = useState(''), password = _c[0], setPassword = _c[1];
     var _d = useState(''), loginError = _d[0], setLoginError = _d[1];
@@ -33,7 +33,7 @@ export var LoginForm = function (_a) {
             setLoginError(i18n._({ id: 'requiredField', message: 'Required field' }));
             return;
         }
-        if (!password) {
+        if (withPassword && !password) {
             setPasswordError(i18n._({ id: 'requiredField', message: 'Required field' }));
             return;
         }
@@ -49,7 +49,7 @@ export var LoginForm = function (_a) {
     var handleChangeDistributionCenter = useCallback(function (e) {
         onChangeDistributionCenter === null || onChangeDistributionCenter === void 0 ? void 0 : onChangeDistributionCenter(e.target.value);
     }, [onChangeDistributionCenter]);
-    return (_jsxs(Container, { children: [_jsx(x.div, { mt: "24px", children: _jsx(Input, { label: i18n._({ id: 'form.login.label', message: 'Login' }), placeholder: i18n._({ id: 'form.login.label', message: 'Login' }), type: "text", name: "login", error: loginError, value: login, onChange: handleChangeLogin, onEnter: handleSubmit }) }), _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
+    return (_jsxs(Container, { children: [_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
                 // @ts-ignore
                 , { 
                     // @ts-ignore

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

@@ -7,3 +7,4 @@ export declare const Default: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithDistributionCenterSelect: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithBackgroundImage: () => import("react/jsx-runtime").JSX.Element;
 export declare const WarehouseBrand: () => import("react/jsx-runtime").JSX.Element;
+export declare const WarehouseBrandWithAccessKey: () => import("react/jsx-runtime").JSX.Element;

package/ui/Blocks/LoginPage/stories/LoginPage.stories.js

@@ -102,3 +102,12 @@ export var WarehouseBrand = function () {
                 console.log('Language changed:', language);
             }, brand: "warehouse", brandVariant: "m", languageItems: languageItems, hasSupport: false, hasSocialLinks: false }) }));
 };
+export var WarehouseBrandWithAccessKey = function () {
+    return (_jsx(LinguiContainer, { children: _jsx(LoginPage, { onSubmit: function (data) { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    alert("submit");
+                    console.log('Login data:', data);
+                    return [2 /*return*/];
+                });
+            }); }, isSubmitting: false, isSubmitDisabled: false, activeLanguage: "en", version: "1.0.0", onLanguageChange: console.log, brand: "warehouse", brandVariant: "m", languageItems: languageItems, hasSupport: false, hasSocialLinks: false, withPassword: false, loginLabel: "Access Key" }) }));
+};

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

@@ -25,4 +25,6 @@ export type LoginPageProps = {
     backgroundImage?: BackgroundImages;
     hasSupport?: boolean;
     hasSocialLinks?: boolean;
+    withPassword?: boolean;
+    loginLabel?: string;
 };

package/ui/Elements/Icon/icons/index.d.ts

@@ -68,4 +68,3 @@ export { Container } from './Container';
 export { Dashboard } from './Dashboard';
 export { HorizontalLines } from './HorizontalLines';
 export { Admin } from './Admin';
-export { Pallet } from './Pallet';

package/ui/Elements/Icon/icons/index.js

@@ -68,4 +68,3 @@ export { Container } from './Container';
 export { Dashboard } from './Dashboard';
 export { HorizontalLines } from './HorizontalLines';
 export { Admin } from './Admin';
-export { Pallet } from './Pallet';