Initial commit

lib/assets/javascripts/new-dashboard/components/Onboarding/wizard/Wizard.vue

@@ -0,0 +1,31 @@
+<template>
+  <component :is="componentName" @closeModal="closeModal"></component>
+</template>
+
+<script>
+import { createWizard } from '../wizard/createWizard';
+
+// Wizards
+import CARTOVLWizard from '../tutorials/CARTOVL';
+import CARTOframesWizard from '../tutorials/CARTOframes';
+import BuilderWizard from '../tutorials/Builder';
+
+export default {
+  name: 'Wizard',
+  components: {
+    builder: createWizard(BuilderWizard.wizardName, BuilderWizard.steps),
+    cartoframes: createWizard(CARTOframesWizard.wizardName, CARTOframesWizard.steps, CARTOframesWizard.showFooter),
+    'carto-vl': createWizard(CARTOVLWizard.wizardName, CARTOVLWizard.steps)
+  },
+  computed: {
+    componentName () {
+      return this.$route.params.onboardingId;
+    }
+  },
+  methods: {
+    closeModal () {
+      this.$router.push({ name: 'home' });
+    }
+  }
+};
+</script>

lib/assets/javascripts/new-dashboard/components/Onboarding/wizard/createWizard.js

@@ -0,0 +1,83 @@
+import Step from 'new-dashboard/components/Onboarding/components/Step.vue';
+import Header from 'new-dashboard/components/Onboarding/components/Header.vue';
+import Footer from 'new-dashboard/components/Onboarding/components/Footer.vue';
+import Modal from 'new-dashboard/components/Modal.vue';
+
+import mixin from '../tutorials/mixin';
+import template from './template.html';
+import './style.scss';
+
+const defaultComponentConfiguration = {
+  template,
+  components: {
+    Step,
+    Header,
+    Footer,
+    Modal
+  },
+  mixins: [mixin]
+};
+
+/**
+* Onboarding Wizard Creation
+*
+* Function to create a new wizard from a defined steps
+*
+* @param {string} name - Name for the generated wizard.
+* @param {array} steps - Wizard's steps definition.
+*
+* Each step within the array needs to follow this format:
+* { stepName: <String>, component: <ComponentObject> }
+*
+*   stepName: Name that the step takes in the wizard
+*   component: Vue component object definition for the Step
+*/
+
+export function createWizard (name = '', steps = {}, showFooter = true) {
+  const stepsLength = Object.keys(steps).length;
+
+  if (!steps || !stepsLength) {
+    throw new Error('Steps components are needed to generate a Wizard');
+  }
+
+  const wizardConfiguration = generateWizardConfiguration(name, steps, showFooter);
+
+  return {
+    ...defaultComponentConfiguration,
+    ...wizardConfiguration
+  };
+}
+
+function generateWizardConfiguration (name, steps, showFooter) {
+  // Generate Wizard configuration
+  const { components, stepNames } = parseSteps(steps);
+
+  const wizardComponents = {
+    ...defaultComponentConfiguration.components,
+    ...components
+  };
+
+  return {
+    name,
+    components: wizardComponents,
+    data () {
+      return {
+        wizardName: name,
+        stepNames,
+        showFooter
+      };
+    }
+  };
+}
+
+function parseSteps (steps) {
+  const components = {};
+  const stepNames = [];
+
+  Object.values(steps).forEach(component => {
+    components[component.name] = component;
+    stepNames.push(component.stepName);
+  });
+
+  return { components, stepNames };
+}

lib/assets/javascripts/new-dashboard/components/Onboarding/wizard/style.scss

@@ -0,0 +1,15 @@
+@import 'new-dashboard/styles/variables';
+
+.wizard {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+  overflow: hidden auto;
+  background-color: $onboarding__bg-color;
+
+  // Fix for Safari Scrolling with GPU acceleration
+  /* stylelint-disable */
+  transform: translate3d(0, 0, 0);
+  /* stylelint-enable */
+}

lib/assets/javascripts/new-dashboard/components/Onboarding/wizard/template.html

@@ -0,0 +1,22 @@
+<Modal :name="wizardName" :isOpen="isModalOpen" @closeModal="closeModal">
+  <div ref="wizard" class="wizard">
+    <Header :stepNames="stepNames" :currentStep="step" @goToStep="goToStep"></Header>
+
+    <template v-for="step in totalStepCount">
+      <Step
+        v-if="isCurrentStep(step)"
+        :class="getStepGTMString(step)"
+        :stepNum="step"
+        :key="step"
+        :fullWidth="step === stepNames.length && stepNames.length > 1">
+        <component :is="stepComponent"></component>
+      </Step>
+    </template>
+
+    <Footer v-if="showFooter"
+      :stepNames="stepNames"
+      :currentStep="step"
+      @goToStep="goToStep"
+      @closeModal="closeModal"></Footer>
+  </div>
+</Modal>