@synerise/ds-wizard 0.6.2 → 0.7.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.7.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-wizard@0.6.3...@synerise/ds-wizard@0.7.0) (2024-02-21)
+
+
+### Features
+
+* **wizard:** navigation in footer, editable header ([e4c70fa](https://github.com/Synerise/synerise-design/commit/e4c70fa734e0557d236d0fee36d0b9b83a99ad09))
+
+
+
+
+
+## [0.6.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-wizard@0.6.2...@synerise/ds-wizard@0.6.3) (2024-02-19)
+
+**Note:** Version bump only for package @synerise/ds-wizard
+
+
+
+
+
 ## [0.6.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-wizard@0.6.1...@synerise/ds-wizard@0.6.2) (2024-02-19)
 
 **Note:** Version bump only for package @synerise/ds-wizard

package/dist/Wizard.d.ts

@@ -1,6 +1,6 @@
 import { WizardProps } from './Wizard.types';
 declare const Wizard: {
-    ({ stepper, contentWidth, headerAction, footer, title, onClose, children, onPrevStep, onNextStep, stepButtonProps, texts, visible, className, }: WizardProps): JSX.Element | null;
-    OnModal: ({ visible, stepper, headerAction, title, onClose, children, onPrevStep, onNextStep, texts, modalProps, stepButtonProps, }: import("./onModal/onModal.types").OnModalProps) => JSX.Element;
+    ({ stepper, contentWidth, headerAction, footerAction, footer, footerLeft, title, onClose, children, onPrevStep, onNextStep, stepButtonProps, texts, visible, className, navigationInFooter, headerInlineEdit, headerAvatar, }: WizardProps): JSX.Element | null;
+    OnModal: ({ visible, stepper, headerAction, title, onClose, children, onPrevStep, onNextStep, texts, modalProps, stepButtonProps, }: import(".").OnModalProps) => JSX.Element;
 };
 export default Wizard;

package/dist/Wizard.js

@@ -3,7 +3,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import React from 'react';
 import classnames from 'classnames';
 import Layout from '@synerise/ds-layout';
-import PageHeader from '@synerise/ds-page-header/dist/PageHeader';
+import PageHeader from '@synerise/ds-page-header';
 import Button from '@synerise/ds-button';
 import Icon, { ArrowLeftCircleM } from '@synerise/ds-icon';
 import { useIntl } from 'react-intl';
@@ -14,7 +14,9 @@ var Wizard = function Wizard(_ref) {
   var stepper = _ref.stepper,
       contentWidth = _ref.contentWidth,
       headerAction = _ref.headerAction,
+      footerAction = _ref.footerAction,
       footer = _ref.footer,
+      footerLeft = _ref.footerLeft,
       title = _ref.title,
       onClose = _ref.onClose,
       children = _ref.children,
@@ -23,43 +25,52 @@ var Wizard = function Wizard(_ref) {
       stepButtonProps = _ref.stepButtonProps,
       texts = _ref.texts,
       visible = _ref.visible,
-      className = _ref.className;
+      className = _ref.className,
+      navigationInFooter = _ref.navigationInFooter,
+      headerInlineEdit = _ref.headerInlineEdit,
+      headerAvatar = _ref.headerAvatar;
   var intl = useIntl();
+  var prevButtonType = navigationInFooter ? 'secondary' : 'ghost';
   var prevButtonProps = stepButtonProps != null && stepButtonProps.prevButtonProps ? stepButtonProps.prevButtonProps : {
-    type: 'ghost',
+    type: prevButtonType,
     mode: 'icon-label'
   };
   var nextButtonProps = stepButtonProps != null && stepButtonProps.nextButtonProps ? stepButtonProps.nextButtonProps : {
     type: 'primary'
   };
+  var navButtons = /*#__PURE__*/React.createElement(React.Fragment, null, onPrevStep ? /*#__PURE__*/React.createElement(Button, _extends({}, prevButtonProps, {
+    onClick: onPrevStep
+  }), /*#__PURE__*/React.createElement(Icon, {
+    component: /*#__PURE__*/React.createElement(ArrowLeftCircleM, null)
+  }), ' ', (texts == null ? void 0 : texts.prevButtonLabel) || intl.formatMessage({
+    id: 'DS.WIZARD.PREV-BUTTON',
+    defaultMessage: 'Back'
+  })) : /*#__PURE__*/React.createElement(S.ButtonPlaceholder, null), onNextStep && /*#__PURE__*/React.createElement(Button, _extends({}, nextButtonProps, {
+    onClick: onNextStep
+  }), (texts == null ? void 0 : texts.nextButtonLabel) || intl.formatMessage({
+    id: 'DS.WIZARD.NEXT-BUTTON',
+    defaultMessage: 'Next step'
+  })));
+  var hasFooter = Boolean(footer || footerLeft || navigationInFooter);
+  var editableTitle = headerInlineEdit !== undefined;
   return visible ? /*#__PURE__*/React.createElement(S.WizardWrapper, {
     className: classnames(className, 'ds-wizard')
   }, /*#__PURE__*/React.createElement(Layout, {
     fullPage: true,
     header: /*#__PURE__*/React.createElement(PageHeader, {
-      title: title,
+      inlineEdit: headerInlineEdit,
+      avatar: editableTitle && headerAvatar,
+      title: !editableTitle && title,
       onClose: onClose,
       rightSide: /*#__PURE__*/React.createElement(S.WizardHeader, {
         withHeaderAction: !!headerAction
       }, stepper && /*#__PURE__*/React.createElement(S.WizardStepper, null, stepper), headerAction && /*#__PURE__*/React.createElement(S.WizardHeaderAction, null, headerAction))
     })
   }, /*#__PURE__*/React.createElement(S.WizardContainer, {
-    withFooter: Boolean(footer)
+    withFooter: hasFooter
   }, /*#__PURE__*/React.createElement(S.WizardContent, {
     contentWidth: contentWidth
-  }, children, /*#__PURE__*/React.createElement(S.WizardButtons, null, onPrevStep ? /*#__PURE__*/React.createElement(Button, _extends({}, prevButtonProps, {
-    onClick: onPrevStep
-  }), /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(ArrowLeftCircleM, null)
-  }), ' ', (texts == null ? void 0 : texts.prevButtonLabel) || intl.formatMessage({
-    id: 'DS.WIZARD.PREV-BUTTON',
-    defaultMessage: 'Back'
-  })) : /*#__PURE__*/React.createElement(S.ButtonPlaceholder, null), onNextStep && /*#__PURE__*/React.createElement(Button, _extends({}, nextButtonProps, {
-    onClick: onNextStep
-  }), (texts == null ? void 0 : texts.nextButtonLabel) || intl.formatMessage({
-    id: 'DS.WIZARD.NEXT-BUTTON',
-    defaultMessage: 'Next step'
-  }))))), footer && /*#__PURE__*/React.createElement(S.WizardFooter, null, footer))) : null;
+  }, children, !navigationInFooter && /*#__PURE__*/React.createElement(S.WizardButtons, null, navButtons))), hasFooter && /*#__PURE__*/React.createElement(S.WizardFooter, null, (footerLeft || footer) && /*#__PURE__*/React.createElement(S.FooterLeftSide, null, footerLeft || footer), navigationInFooter && /*#__PURE__*/React.createElement(S.FooterRightSide, null, footerAction, " ", navButtons)))) : null;
 };
 
 Wizard.OnModal = WizardOnModal;

package/dist/Wizard.styles.d.ts

@@ -8,12 +8,14 @@ export declare const WizardContainer: import("styled-components").StyledComponen
     contentWidth?: string | undefined;
     withFooter: boolean;
 }, never>;
+export declare const WizardButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const WizardContent: import("styled-components").StyledComponent<"div", any, {
     contentWidth?: string | undefined;
 }, never>;
 export declare const ModalWizardContent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const WizardButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ButtonPlaceholder: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const ModalWizardButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FooterLeftSide: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FooterRightSide: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const WizardFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const HeaderActions: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Wizard.styles.js

@@ -29,20 +29,20 @@ export var WizardContainer = styled.div.withConfig({
 }, function (props) {
   return props.withFooter ? '80px' : '0';
 });
+export var WizardButtons = styled.div.withConfig({
+  displayName: "Wizardstyles__WizardButtons",
+  componentId: "sc-1lvfph4-5"
+})(["display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;margin:48px 0 0;"]);
 export var WizardContent = styled.div.withConfig({
   displayName: "Wizardstyles__WizardContent",
-  componentId: "sc-1lvfph4-5"
+  componentId: "sc-1lvfph4-6"
 })(["width:", ";max-width:calc(100% - 48px);display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;"], function (props) {
   return props.contentWidth ? props.contentWidth : '100%';
 });
 export var ModalWizardContent = styled.div.withConfig({
   displayName: "Wizardstyles__ModalWizardContent",
-  componentId: "sc-1lvfph4-6"
-})(["width:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;"]);
-export var WizardButtons = styled.div.withConfig({
-  displayName: "Wizardstyles__WizardButtons",
   componentId: "sc-1lvfph4-7"
-})(["display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;margin:48px 0 0;"]);
+})(["width:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;"]);
 export var ButtonPlaceholder = styled.span.withConfig({
   displayName: "Wizardstyles__ButtonPlaceholder",
   componentId: "sc-1lvfph4-8"
@@ -51,17 +51,25 @@ export var ModalWizardButtons = styled.div.withConfig({
   displayName: "Wizardstyles__ModalWizardButtons",
   componentId: "sc-1lvfph4-9"
 })(["display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;"]);
+export var FooterLeftSide = styled.div.withConfig({
+  displayName: "Wizardstyles__FooterLeftSide",
+  componentId: "sc-1lvfph4-10"
+})(["display:flex;justify-content:flex-start;"]);
+export var FooterRightSide = styled.div.withConfig({
+  displayName: "Wizardstyles__FooterRightSide",
+  componentId: "sc-1lvfph4-11"
+})(["display:flex;justify-content:flex-end;align-items:center;gap:16px;", "{display:none;}"], ButtonPlaceholder);
 export var WizardFooter = styled.div.withConfig({
   displayName: "Wizardstyles__WizardFooter",
-  componentId: "sc-1lvfph4-10"
-})(["display:flex;width:calc(100% - 48px);padding:15px 0;margin:0 24px;background-color:", ";border-top:1px solid ", ";position:fixed;bottom:0;left:0;& > *{margin-right:8px;}"], function (props) {
+  componentId: "sc-1lvfph4-12"
+})(["display:flex;justify-content:space-between;width:calc(100% - 48px);padding:15px 0;margin:0 24px;background-color:", ";border-top:1px solid ", ";position:fixed;bottom:0;left:0;& > *{margin-right:8px;}", ":empty,", ":empty{display:none;}"], function (props) {
   return props.theme.palette.white;
 }, function (props) {
   return props.theme.palette['grey-200'];
-});
+}, FooterLeftSide, FooterRightSide);
 export var HeaderActions = styled.div.withConfig({
   displayName: "Wizardstyles__HeaderActions",
-  componentId: "sc-1lvfph4-11"
+  componentId: "sc-1lvfph4-13"
 })(["display:flex;flex-direction:row;align-items:center;justify-content:flex-end;margin-right:16px;padding-right:24px;position:relative;.ds-stepper{margin-right:24px;}&:after{content:'';display:flex;height:40px;width:1px;background-color:", ";position:absolute;right:0;top:-4px;}"], function (props) {
   return props.theme.palette['grey-200'];
 });

package/dist/Wizard.types.d.ts

@@ -1,11 +1,14 @@
 import { ReactNode } from 'react';
 import { ButtonProps } from '@synerise/ds-button';
+import type { PageHeaderProps } from '@synerise/ds-page-header';
 export type WizardProps = {
     stepper?: ReactNode;
     footer?: ReactNode;
+    footerLeft?: ReactNode;
     children?: ReactNode;
     title: ReactNode;
     headerAction?: ReactNode;
+    footerAction?: ReactNode;
     onClose: () => void;
     visible: boolean;
     contentWidth?: string;
@@ -20,4 +23,7 @@ export type WizardProps = {
         prevButtonProps?: Partial<Omit<ButtonProps, 'onClick'>>;
         nextButtonProps?: Partial<Omit<ButtonProps, 'onClick'>>;
     };
+    headerInlineEdit?: PageHeaderProps['inlineEdit'];
+    headerAvatar?: PageHeaderProps['avatar'];
+    navigationInFooter?: boolean;
 };

package/dist/index.d.ts

@@ -1 +1,3 @@
 export { default } from './Wizard';
+export { WizardProps } from './Wizard.types';
+export { OnModalProps } from './onModal/onModal.types';

package/dist/index.js

@@ -1 +1,3 @@
-export { default } from './Wizard';
+export { default } from './Wizard';
+export { WizardProps } from './Wizard.types';
+export { OnModalProps } from './onModal/onModal.types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-wizard",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "description": "Wizard UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -33,12 +33,12 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^0.19.0",
-    "@synerise/ds-icon": "^0.60.0",
-    "@synerise/ds-layout": "^0.14.0",
-    "@synerise/ds-modal": "^0.17.18",
-    "@synerise/ds-page-header": "^0.14.96",
-    "@synerise/ds-utils": "^0.24.24",
+    "@synerise/ds-button": "^0.19.2",
+    "@synerise/ds-icon": "^0.60.2",
+    "@synerise/ds-layout": "^0.14.2",
+    "@synerise/ds-modal": "^0.17.20",
+    "@synerise/ds-page-header": "^0.15.0",
+    "@synerise/ds-utils": "^0.24.26",
     "classnames": "2.3.2",
     "react-dom": "16.13.0",
     "react-intl": "3.12.0"
@@ -53,5 +53,5 @@
     "@testing-library/react": "10.0.1",
     "@testing-library/user-event": "^10.3.1"
   },
-  "gitHead": "17e3bca1d4d134a28aaa186f0e2637616ca86174"
+  "gitHead": "673df74b628304300c09f0d7e26279b5901cd925"
 }