Merge pull request #94 from pantheon-systems/ag/pcc-676/preview-bar-vue

[PCC-676] Add preview bar support in Vue SDK

.npmrc

@@ -1,4 +1,3 @@
-node-linker=hoisted
 shamefully-hoist=true
 save-workspace-protocol=false
 prefer-workspace-packages=true

packages/core/src/core/pantheon-client.ts

@@ -27,7 +27,7 @@ export interface PantheonClientConfig {
   /**
    * NOT FOR EXTERNAL USE.
    */
-  pccHost: string;
+  pccHost?: string;
 
   /**
    * ID of the site you want to query

packages/vue-sdk/.prettierrc.json

@@ -0,0 +1 @@
+{}

packages/vue-sdk/package.json

@@ -56,8 +56,11 @@
     "eslint": "^8.46.0",
     "eslint-config-pcc-custom": "workspace:*",
     "h3": "^1.8.2",
+    "sass": "^1.69.5",
     "tsup": "^7.0.0",
     "typescript": "^5.1.3",
+    "unplugin-vue": "^4.3.5",
+    "vite": "^4.4.10",
     "vue": "npm:vue@^3.3.4",
     "vue-2": "npm:vue@^2.7.14",
     "vue-3": "npm:vue@^3.3.4"
@@ -79,8 +82,10 @@
     "@apollo/client": "^3.7.17",
     "@pantheon-systems/pcc-sdk-core": "latest",
     "@vue/apollo-composable": "^4.0.0-beta.7",
+    "floating-vue": "2.0.0-beta.24",
     "graphql": "^16.8.1",
     "markdown-it": "^13.0.2",
+    "query-string": "^8.1.0",
     "vue-demi": "latest"
   },
   "sideEffects": false

packages/vue-sdk/src/components/Common/HoverButton.vue

@@ -0,0 +1,30 @@
+<template>
+  <button
+    @mouseover="isHovered = true"
+    @focus="isHovered = true"
+    @mouseout="isHovered = false"
+    @blur="isHovered = false"
+    :style="style"
+    :class="class"
+    v-bind="$attrs"
+  >
+    <slot :isHovered="isHovered"></slot>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue-demi";
+
+const isHovered = ref(false);
+
+defineProps({
+  style: {
+    type: String,
+    default: "",
+  },
+  class: {
+    type: String,
+    default: "",
+  },
+});
+</script>

packages/vue-sdk/src/components/Preview/LivePreviewIndicator.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import IconDot from "./assets/IconDot.vue";
+import IconInfo from "./assets/IconInfo.vue";
+
+import { Tooltip } from "floating-vue";
+import "floating-vue/dist/style.css";
+
+defineProps({
+  isLive: Boolean,
+});
+</script>
+
+<template>
+  <div class="lpi-container">
+    <IconDot :fill="isLive ? '#218C5F' : '#CFCFD3'" />
+    <span>{{ isLive ? "Active Live Preview" : "Inactive Live Preview" }}</span>
+
+    <Tooltip>
+      <div class="info-tooltip-button">
+        <button v-if="!isLive">
+          <IconInfo />
+        </button>
+      </div>
+
+      <template #popper>
+        <div class="info-tooltip">
+          <span>
+            This preview page is no longer connected to the document (updates to
+            the document will not be displayed until this is reconnected).
+          </span>
+          <br />
+          <span style="font-weight: 500">
+            To reconnect, navigate to the document and select the
+            &apos;Preview&apos; button in the Content Cloud add-on.
+          </span>
+        </div>
+      </template>
+    </Tooltip>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.lpi-container {
+  border: 1px solid #cfcfd3;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  border-radius: 100px;
+  color: #6d6d78;
+  padding: 0 8px;
+  font-size: 12px;
+  flex-direction: row;
+  width: fit-content;
+  height: 24px;
+
+  > span {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-left: 8px;
+  }
+
+  > button {
+    margin-left: 8px;
+  }
+}
+
+.info-tooltip-button {
+  display: flex;
+  margin-left: 8px;
+}
+
+.info-tooltip {
+  font-size: 0.8rem;
+  font-weight: 400;
+  background: #283139;
+  max-width: 320px;
+}
+</style>

packages/vue-sdk/src/components/Preview/assets/HamburgerIcon.vue

@@ -0,0 +1,15 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style="{style}"
+  >
+    <path
+      d="M2 4.5L23 4.5V7.5L2 7.5L2 4.5ZM2 12L23 12V15L2 15L2 12ZM23 19.5V22.5L2 22.5L2 19.5L23 19.5Z"
+      fill="#23232D"
+    />
+  </svg>
+</template>

packages/vue-sdk/src/components/Preview/assets/IconDot.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+defineProps({
+  fill: { type: String, required: true },
+});
+</script>
+
+<template>
+  <svg
+    width="6"
+    height="6"
+    viewBox="0 0 6 6"
+    :fill="fill"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="3" cy="3" r="3" :fill="fill" />
+  </svg>
+</template>

packages/vue-sdk/src/components/Preview/assets/IconInfo.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    width="14"
+    height="13"
+    viewBox="0 0 14 13"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M7 12.5C4.84375 12.5 2.875 11.375 1.79688 9.5C0.71875 7.64844 0.71875 5.375 1.79688 3.5C2.875 1.64844 4.84375 0.5 7 0.5C9.13281 0.5 11.1016 1.64844 12.1797 3.5C13.2578 5.375 13.2578 7.64844 12.1797 9.5C11.1016 11.375 9.13281 12.5 7 12.5ZM6.0625 8.375H5.5V9.5H6.0625H7.9375H8.5V8.375H7.9375H7.75V6.3125V5.75H7.1875H6.0625H5.5V6.875H6.0625H6.625V8.375H6.0625ZM7.75 5V3.5H6.25V5H7.75Z"
+      fill="#6D6D78"
+    />
+  </svg>
+</template>

packages/vue-sdk/src/components/Preview/assets/IconUp.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+defineProps({
+  flip: Boolean,
+  style: {
+    type: String,
+    required: false,
+  },
+});
+</script>
+
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    :transform="flip ? 'scale(1,-1)' : undefined"
+    :style="style"
+  >
+    <path
+      d="M13 5.39062L14.0312 6.46875L23.0312 15.4688L24.1094 16.5L22 18.6562L20.9219 17.5781L13 9.65625L5.03125 17.5781L4 18.6562L1.84375 16.5L2.92188 15.4688L11.9219 6.46875L13 5.39062Z"
+      fill="#23232D"
+    />
+  </svg>
+</template>