[embedded-app] Remove StepZilla, use custom component (#747)

* [embedded-app] Remove StepZilla, use custom component * Use default 'website' for embedded jss app's layout service config * Added type="button" on nav buttons to prevent page reload on click * Update after review Co-authored-by: Adam Brauer <[email protected]>
Sitecore · Jul 16, 2021 · d391d1b · d391d1b
1 parent 27d4a55
commit d391d1b
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 60 deletions.
diff --git a/docs/data/routes/docs/techniques/mvc-integration/client-side-embedding/en.md b/docs/data/routes/docs/techniques/mvc-integration/client-side-embedding/en.md
@@ -110,9 +110,9 @@ Fastest option. This package contains the rendering items, Sublayout and modifie
 
 ### Wizard Steps
 
-* The sample uses the [`react-stepzilla`](https://github.com/newbreedofgeek/react-stepzilla) module to provide a step-based UX.
+* The sample uses a step-based UX.
 * Each step is a separate JSS route to provide for easier management/editing via the Experience Editor.
-* The `Wizard` component "creatively" uses a `StepReference` component to allow steps to be managed via the Experience Editor, but then when rendering for the front-end, uses the component data to construct the step data expected by `react-stepzilla`.
+* The `Wizard` component "creatively" uses a `StepReference` component to allow steps to be managed via the Experience Editor, but then when rendering for the front-end, uses the component data to construct the step.
 * The `Step` component loads the referenced route from the Layout Service as each step is displayed.
     * This means that each step will register in analytics as it is displayed  as well.
 * `Step` uses the same placeholder name as `App`, so that step contents can be rendered directly in the `App` as well (i.e. in the Experience Editor).

diff --git a/samples/sitecore-embedded-jss-app/assets/css/app.css b/samples/sitecore-embedded-jss-app/assets/css/app.css
@@ -99,10 +99,31 @@ ol.progtrckr li.progtrckr-done:hover:before {
 
 /* Custom */
 
-.step-progress {
+.wizard {
   width: 400px;
 }
 
+.wizard-step {
+  height: 250px;
+  margin-top: 20px;
+  padding-left: 15px;
+  padding-bottom: 20px;
+}
+
+.wizard-navigation {
+  display: flex;
+  justify-content: space-between;
+}
+
+.wizard-step-name {
+  padding-bottom: 5px;
+  margin: 0 10px;
+}
+
+.wizard-step-name.selected {
+  border-bottom: 2px solid rgb(3, 31, 156);
+}
+
 .footer-buttons {
   margin-top: 10px;
 }
@@ -115,11 +136,6 @@ ol.progtrckr li.progtrckr-done:hover:before {
   float: right !important;
 }
 
-.wizard-step {
-  height: 250px;
-  padding-left: 15px;
-}
-
 .question {
   padding-top: 10px;
 }

diff --git a/samples/sitecore-embedded-jss-app/package-lock.json b/samples/sitecore-embedded-jss-app/package-lock.json
diff --git a/samples/sitecore-embedded-jss-app/package.json b/samples/sitecore-embedded-jss-app/package.json
@@ -57,8 +57,7 @@
     "isomorphic-fetch": "~3.0.0",
     "prop-types": "~15.6.0",
     "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-stepzilla": "~4.7.0"
+    "react-dom": "^17.0.1"
   },
   "devDependencies": {
     "@sitecore-jss/sitecore-jss-cli": "^19.0.0-canary.20",

diff --git a/samples/sitecore-embedded-jss-app/src/app/components/Step.js b/samples/sitecore-embedded-jss-app/src/app/components/Step.js
@@ -28,14 +28,12 @@ export default class Step extends React.Component {
     const { onFormValueChange, formValues } = this.props;
 
     return routeData.placeholders ? (
-      <div className="wizard-step">
-        <Placeholder
-          name="jss-main"
-          rendering={routeData}
-          onValueChange={onFormValueChange}
-          formValues={formValues}
-        />
-      </div>
+      <Placeholder
+        name="jss-main"
+        rendering={routeData}
+        onValueChange={onFormValueChange}
+        formValues={formValues}
+      />
     ) : (
       <div />
     );

diff --git a/samples/sitecore-embedded-jss-app/src/app/components/StepZillaPatched.js b/samples/sitecore-embedded-jss-app/src/app/components/StepZillaPatched.js
diff --git a/samples/sitecore-embedded-jss-app/src/app/components/Wizard.js b/samples/sitecore-embedded-jss-app/src/app/components/Wizard.js
@@ -1,11 +1,11 @@
 import React from 'react';
 import { withSitecoreContext } from '@sitecore-jss/sitecore-jss-react';
-import StepZilla from './StepZillaPatched';
 import Step from './Step';
 
 class Wizard extends React.Component {
   state = {
     formValues: {},
+    step: 0,
   };
 
   constructor(props) {
@@ -22,12 +22,52 @@ class Wizard extends React.Component {
     });
   }
 
+  selectNextStep = () => this.setState({ step: this.state.step + 1 });
+
+  selectPreviousStep = () => this.setState({ step: this.state.step - 1 });
+
+  renderStepName = (step, i) => (
+    <span key={step.name} className={`wizard-step-name ${i === this.state.step ? 'selected' : ''}`}>
+      {step.name}
+    </span>
+  );
+
+  renderNavigation = (stepsCount) => (
+    <div className="wizard-navigation">
+      {this.state.step !== 0 && stepsCount ? (
+        <button type="button" onClick={this.selectPreviousStep}>
+          Previous
+        </button>
+      ) : (
+        <div />
+      )}
+      {this.state.step !== stepsCount - 1 && stepsCount && (
+        <button type="button" onClick={this.selectNextStep}>
+          Next
+        </button>
+      )}
+    </div>
+  );
+
+  renderEditing = (childSteps) => (
+    <div>
+      <h1>Wizard Steps</h1>
+      <ol>
+        {childSteps.map((step) => (
+          <li key={step.url}>
+            <a href={step.url}>{step.displayName}</a>
+          </li>
+        ))}
+      </ol>
+    </div>
+  );
+
   render() {
     const { rendering, sitecoreContext } = this.props;
     const childSteps = rendering.fields.data.item.children;
 
     if (sitecoreContext.pageEditing) {
-      return renderEditing(childSteps);
+      return this.renderEditing(childSteps);
     }
 
     const steps = childSteps.map((step, index) => ({
@@ -43,24 +83,13 @@ class Wizard extends React.Component {
     }));
 
     return (
-      <div className="step-progress">
-        <StepZilla steps={steps} dontValidate={true} />
+      <div className="wizard">
+        <div className="wizard-steps">{steps.map(this.renderStepName)}</div>
+        <div className="wizard-step">{steps[this.state.step].component}</div>
+        {this.renderNavigation(steps.length)}
       </div>
     );
   }
 }
 
-const renderEditing = (childSteps, context) => (
-  <div>
-    <h1>Wizard Steps</h1>
-    <ol>
-      {childSteps.map((step) => (
-        <li key={step.url}>
-          <a href={step.url}>{step.displayName}</a>
-        </li>
-      ))}
-    </ol>
-  </div>
-);
-
 export default withSitecoreContext()(Wizard);
diff --git a/samples/sitecore-embedded-jss-app/src/boot/SitecoreContentService.js b/samples/sitecore-embedded-jss-app/src/boot/SitecoreContentService.js
@@ -2,14 +2,13 @@
 /* global __SC_API_HOST__, __TRANSLATION_PATH__, __SC_API_KEY__ */
 
 import { RestLayoutService } from '@sitecore-jss/sitecore-jss-react';
-import { config } from '../../package.json';
 
 class SitecoreContentService {
   constructor() {
     this.layoutService = new RestLayoutService({
       apiHost: `${__SC_API_HOST__}`,
       apiKey: __SC_API_KEY__,
-      siteName: config.appName,
+      siteName: 'website', // the name of the site you're "embedding" into ('website' in the sample)
     });
   }