New design tour

.npmrc

@@ -0,0 +1,3 @@
+public-hoist-pattern[]=*
+# node-linker=hoisted
+pnpmfile=pnpmfile.cjs

app.js

@@ -68,6 +68,9 @@ apostrophe({
     'article-category': {},
 
     // Import and export content
-    '@apostrophecms/import-export': {}
+    '@apostrophecms/import-export': {},
+
+    // Tour
+    tour: {}
   }
 });

modules/@apostrophecms/home-page/views/page.html

@@ -5,6 +5,8 @@
 
 {% extends "layout.html" %}
 
+{% block bodyClass %}{{ super() }} home-page{% endblock %}
+
 {# Home page is full width #}
 {% block pageTitle %}
   <h1 class="home-title">

modules/asset/ui/src/_card.scss

@@ -74,7 +74,7 @@
 
 .card__text {
   font-size: 1rem;
-  color: color-mix(in srgb, var(--default-color), transparent 40%);
+  color: color-mix(in srgb, var(--default-color), transparent 20%);
   font-weight: 400;
   line-height: 1.3;
 }

modules/asset/ui/src/_header.scss

@@ -4,7 +4,7 @@
   align-items: center;
   flex-direction: column;
   height: 62px;
-  margin: 20px 0 40px 0;
+  padding: 20px 0 40px 0;
 }
 
 .breadcrumb {

modules/asset/ui/src/_nav.scss

@@ -1,7 +1,7 @@
 .nav-bar {
   font-family: var(--nav-font);
   z-index: 5;
-  position: fixed;
+  // position: fixed;
   box-sizing: border-box;
   left: auto;
   right: auto;
@@ -44,9 +44,9 @@
 }
 
 .mobile-nav {
+  display: none;
   z-index: 9999;
-  position: fixed;
-  display: flex;
+
   flex-direction: column;
   align-items: center;
   justify-content: center;
@@ -64,6 +64,8 @@
   transition: opacity 0.3s ease;
 
   &.active {
+    position: fixed;
+    display: flex;
     opacity: 1;
     visibility: visible;
     pointer-events: auto;

modules/asset/ui/src/_set-save-prefs.js

@@ -0,0 +1,15 @@
+export default () => {
+  apos.util.onReadyAndRefresh(() => {
+
+    const pagePref = localStorage.getItem('apos-@apostrophecms/page-save-pref');
+    if (!pagePref) {
+      localStorage.setItem('apos-@apostrophecms/page-save-pref', 'onSaveAndView');
+    }
+
+    const articlePref = localStorage.getItem('apos-article-save-pref');
+    if (!articlePref) {
+      localStorage.setItem('apos-article-save-pref', 'onSaveAndView');
+    }
+
+  });
+};

modules/asset/ui/src/index.js

@@ -1,11 +1,13 @@
 import localToggle from './_locales.js';
 import modeToggle from './_dark-light-switch.js';
 import mobileMenu from './_mobile.js';
+import savePrefs from './_set-save-prefs.js';
 
 export default () => {
   localToggle();
   modeToggle();
   mobileMenu();
+  savePrefs();
 
   console.log('look at me, I am project level js');
 };

modules/card-widget/views/widget.html

@@ -22,8 +22,8 @@
   </div>
   {% if widget.linkText %}
     <div class="card__link">
-      {% set path = apos.helper.linkPath(item) %}
-      {% set class = 'button ' + item.style %}
+      {% set path = apos.helper.linkPath(widget) %}
+      {% set class = 'button ' + widget.style %}
         {{ link.render({
           label: widget.linkText,
           path: path,

modules/tour/index.js

@@ -0,0 +1,36 @@
+export default {
+  options: {
+    name: 'tour'
+  },
+  icons: {
+    'bullhorn-icon': 'Bullhorn'
+  },
+  init(self, options) {
+    self.prependNodes('body', 'ui');
+    self.apos.adminBar.add(
+      'tour-settings',
+      'Tour Settings',
+      true,
+      {
+        contextUtility: true,
+        icon: 'bullhorn-icon',
+        tooltip: 'Tour Settings',
+        modal: 'AposModalShareDraft'
+      }
+    );
+  },
+  methods(self) {
+    return {
+      ui(req) {
+        return [
+          {
+            name: 'div',
+            attrs: {
+              id: 'apos-tour'
+            }
+          }
+        ];
+      }
+    };
+  }
+};

modules/tour/ui/apos/apps/AposTour.js

@@ -0,0 +1,8 @@
+import createApp from 'Modules/@apostrophecms/ui/lib/vue';
+
+export default function() {
+  const component = apos.vueComponents.TheAposTour;
+  const el = document.querySelector('#apos-tour');
+  const app = createApp(component);
+  app.mount(el);
+}

modules/tour/ui/apos/components/AposModalTourSettings.vue

@@ -0,0 +1,164 @@
+<template>
+  <AposModal
+    :modal="modal"
+    class="apos-tour-settings"
+    v-on="{ esc: close }"
+    @inactive="modal.active = false"
+    @show-modal="modal.showModal = true"
+  >
+    <template #main>
+      <AposModalBody>
+        <template #bodyMain>
+          <div class="apos-tour-settings__header">
+            <h2 class="apos-tour-settings__heading">
+              Tour Settings
+            </h2>
+            <Close class="apos-tour-settings__close" tabindex="0" :title="$t('apostrophe:close')" :size="18"
+              @click.prevent="close" />
+          </div>
+
+          <div class="apos-tour-settings__content">
+            <div class="apos-tour-settings__toggle-wrapper">
+              <p class="apos-tour-settings__description">
+                Resetting the tour may require a page refresh.
+              </p>
+
+              <div class="apos-tour-settings__buttons">
+                <AposButton type="default" label="Disable Tour" @click="disable" />
+                <AposButton type="primary" label="Reset Tour" @click="reset" />
+              </div>
+            </div>
+          </div>
+        </template>
+      </AposModalBody>
+    </template>
+  </AposModal>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import Close from '@apostrophecms/vue-material-design-icons/Close.vue';
+import { useTour } from '../composables/useTour';
+
+const { setTourValue, disableTour, resetTour } = useTour();
+
+const modal = ref({
+  active: false,
+  type: 'overlay',
+  showModal: false,
+  disableHeader: true
+});
+
+onMounted(() => {
+  modal.value.active = true;
+});
+
+function close() {
+  modal.value.showModal = false;
+}
+
+function reset() {
+  resetTour();
+  close();
+  apos.notify('Tour reset. Refresh the page to trigger the tour', {
+    type: 'success',
+    dismiss: true,
+    icon: 'bullhorn-icon'
+  });
+}
+
+function disable() {
+  disableTour();
+  close();
+  apos.notify('Tour disabled. Re-enable it through the Tour menu in the admin bar', {
+    type: 'success',
+    dismiss: true,
+    icon: 'bullhorn-icon'
+  });
+}
+</script>
+
+<style lang="scss"
+  scoped>
+  .apos-tour-settings {
+    z-index: $z-index-modal;
+    position: fixed;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    :deep(.apos-modal__inner) {
+      inset: auto;
+      max-width: 700px;
+      height: auto;
+      border-radius: 15px;
+    }
+
+    :deep(.apos-modal__overlay) {
+      .apos-modal+.apos-tour-settings & {
+        display: block;
+      }
+    }
+
+    :deep(.apos-modal__body) {
+      padding: 20px;
+    }
+
+    :deep(.apos-modal__body-main) {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+
+  .apos-tour-settings__header {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    padding: 0 20px 20px;
+    border-bottom: 1px solid var(--a-base-8);
+  }
+
+  .apos-tour-settings__heading {
+    @include type-title;
+
+    & {
+      line-height: var(--a-line-tall);
+      margin: 0;
+    }
+  }
+
+  .apos-tour-settings__close {
+    align-self: center;
+    height: 18px;
+    cursor: pointer;
+  }
+
+  .apos-tour-settings__toggle-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: $spacing-base;
+  }
+
+  .apos-tour-settings__buttons {
+    display: flex;
+    gap: 1rem;
+
+    :deep(.apos-button) {
+      min-width: 140px;
+    }
+  }
+
+  .apos-tour-settings__description {
+    @include type-base;
+
+    & {
+      margin: 1.3rem 0 1.2rem 0;
+      line-height: var(--a-line-tall);
+      max-width: 355px;
+      color: var(--a-text-primary);
+    }
+  }
+</style>