cja-phoenix 0.6.0 → 0.6.2

package/src/stories/CjaButton.story.vue

@@ -0,0 +1,192 @@
+<script setup lang="ts">
+import CjaButton from "../components/structural/CjaButton.vue";
+import TextInput from "../components/forms/TextInput.vue";
+
+const initState = () => ({
+  content: "Button Text",
+});
+
+const initStateAllConfigs = () => ({
+  content: "Button Text",
+  type: "primary" as "primary" | "secondary" | "tertiary",
+  color: "blue" as "blue" | "orange" | "white",
+  size: "md" as "sm" | "md" | "lg",
+  icon: "" as string,
+  iconAny: "" as string,
+  iconPosition: "right" as "left" | "right",
+  loading: false as boolean,
+  disabled: false as boolean,
+});
+
+const initStateIcon = () => ({
+  type: "primary" as "primary" | "secondary" | "tertiary",
+  color: "blue" as "blue" | "orange" | "white",
+  size: "md" as "sm" | "md" | "lg",
+  icon: "m-cgg-icon--gears" as string,
+  iconAny: "" as string,
+  iconPosition: "right" as "left" | "right",
+  loading: false as boolean,
+  disabled: false as boolean,
+});
+
+const options = {
+  type: ["primary", "secondary", "tertiary"],
+  color: ["blue", "orange", "white"],
+  size: ["sm", "md", "lg"],
+  icon: [
+    { label: "None", value: "" },
+    { label: "Chevron Right", value: "m-cgg-icon--chevron-right" },
+    { label: "Chevron Down", value: "m-cgg-icon--chevron-down" },
+    { label: "Gears", value: "m-cgg-icon--gears" },
+  ],
+  iconPosition: ["right", "left"],
+};
+
+const inputValue = "";
+</script>
+
+<template>
+  <Story title="Button">
+    <Variant title="Default" :init-state="initState">
+      <template #default="{ state }">
+        <CjaButton>{{ state.content }}</CjaButton>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText type="text" v-model="state.content" title="Content" />
+      </template>
+    </Variant>
+    <Variant title="All Configs" :init-state="initStateAllConfigs">
+      <template #default="{ state }">
+        <div class="form-container">
+          <TextInput v-model="inputValue" :size="state.size" />
+          <CjaButton
+            :type="state.type"
+            :color="state.color"
+            :size="state.size"
+            :icon="state.iconAny || state.icon"
+            :iconPosition="state.iconPosition"
+            :loading="state.loading"
+            :disabled="state.disabled"
+            >{{ state.content }}</CjaButton
+          >
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText type="text" v-model="state.content" title="Content" />
+        <HstSelect v-model="state.type" :options="options.type" title="Type" />
+        <HstSelect
+          v-model="state.color"
+          :options="options.color"
+          title="Color"
+        />
+        <HstSelect v-model="state.size" :options="options.size" title="Size" />
+        <HstText type="text" v-model="state.iconAny" title="Icon Any" />
+        <HstSelect v-model="state.icon" :options="options.icon" title="Icon" />
+        <HstSelect
+          v-model="state.iconPosition"
+          :options="options.iconPosition"
+          title="Icon Position"
+        />
+        <HstCheckbox v-model="state.loading" title="Loading" />
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+      </template>
+    </Variant>
+    <Variant title="Icon Button" :init-state="initStateIcon">
+      <template #default="{ state }">
+        <div class="form-container">
+          <TextInput v-model="inputValue" :size="state.size" />
+          <CjaButton
+            :type="state.type"
+            :color="state.color"
+            :size="state.size"
+            :icon="state.iconAny || state.icon"
+            :iconPosition="state.iconPosition"
+            :loading="state.loading"
+            :disabled="state.disabled"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstSelect v-model="state.type" :options="options.type" title="Type" />
+        <HstSelect
+          v-model="state.color"
+          :options="options.color"
+          title="Color"
+        />
+        <HstSelect v-model="state.size" :options="options.size" title="Size" />
+        <HstText type="text" v-model="state.iconAny" title="Icon Any" />
+        <HstSelect v-model="state.icon" :options="options.icon" title="Icon" />
+        <HstSelect
+          v-model="state.iconPosition"
+          :options="options.iconPosition"
+          title="Icon Position"
+        />
+        <HstCheckbox v-model="state.loading" title="Loading" />
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+      </template>
+    </Variant>
+  </Story>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  display: grid;
+  grid-template-columns: 200px max-content;
+  gap: 24px;
+}
+</style>
+
+<docs lang="md">
+## Props
+
+#### type
+
+Defines fill and border type
+
+- **primary** has background fill
+- **secondary** is bordered without fill
+- **tertiary** does not have background or border
+
+#### color
+
+Defines button color profile
+
+- <b style="color: #076b9c">blue</b>
+- <b style="color: #f58423">orange</b>
+- <b style="color: #fff">white</b>
+
+#### size
+
+Defines button size, changing padding and font-size
+
+- **sm**
+- **md**
+- **lg**
+
+#### icon
+
+An iconia class icon, inserted as a class into a span
+
+#### iconPosition
+
+Defines icon position relative to button text
+
+- **left**
+- **right**
+
+#### loading
+
+Displays a spinner when boolean is true, prevents display of button text and icon
+
+## Defaults
+
+When implementing a **CjaButton** component with no props, the following props are pre-defined as default:
+
+- **type**: primary
+- **color**: <b style="color: #076b9c">blue</b>
+- **size**: md
+- **iconPosition**: right
+</docs>

package/src/stories/ContentTabs.story.vue

@@ -0,0 +1,59 @@
+<script lang="ts" setup>
+import ContentTabs from "../components/structural/ContentTabs.vue";
+
+const initState = () => ({
+  tabs: ["Tab 1", "Tab 2"],
+});
+</script>
+
+<template>
+  <Story title="Content Tabs">
+    <Variant title="Default" :init-state="initState">
+      <template #default="{ state }">
+        <ContentTabs :defaultTab="0" :tabs="state.tabs">
+          <template #[i] v-for="(tab, i) in state.tabs">
+            Each tab must match a numbered slot equivalent to the position on
+            the array, this is the slot for: {{ tab }}
+          </template>
+        </ContentTabs>
+      </template>
+
+      <template #controls="{ state }">
+        <HstJson v-model="state.tabs" title="Tabs"></HstJson>
+      </template>
+
+      <template #source>
+        <textarea v-pre>
+            <ContentTabs :defaultTab="0" :tabs="['Tab 1', 'Tab 2']">
+              <template #0> Slot content </template>
+              <template #1> Slot content </template>
+            </ContentTabs>
+        </textarea>
+      </template>
+    </Variant>
+  </Story>
+</template>
+
+<docs lang="md">
+### Props
+
+#### defaultTab
+
+The initial active tab when the component is first rendered.
+
+#### tabs
+
+An array of strings displayed on the tab controls, each one must match a numbered slot in order to display content properly.
+
+### Emits
+
+#### tab:changed
+
+Triggered when the tab controls are clicked, sends the new tab number.
+
+### Exposed
+
+#### activeTab
+
+Exposes the **activeTab** variable, used to display the current selected tab.
+</docs>

package/src/stories/Modal.story.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import Modal from "../components/structural/Modal.vue";
+import CjaButton from "../components/structural/CjaButton.vue";
+
+const modal = ref();
+
+const initState = () => ({
+  mdMaxWidth: "min(calc(100% - 48px), 768px)",
+  lgMaxWidth: "min(calc(100% - 48px), 1024px)",
+  xlMaxWidth: "1024px",
+  modalHeader: true,
+  modalBody: true,
+  modalFooter: false,
+});
+</script>
+
+<template>
+  <Story title="Modal">
+    <Variant title="Default" :init-state="initState">
+      <template #default="{ state }">
+        <Modal
+          ref="modal"
+          :maxWidth="{
+            md: state.mdMaxWidth,
+            lg: state.lgMaxWidth,
+            xl: state.xlMaxWidth,
+          }"
+        >
+          <template #header v-if="state.modalHeader">
+            Modal Header Slot
+          </template>
+          <template #body v-if="state.modalBody">
+            <div class="modal-body">
+              <h2>Modal Body Slot</h2>
+              <p>
+                The modal body slot can host whatever component you need to use
+                inside
+              </p>
+            </div>
+          </template>
+          <template #footer v-if="state.modalFooter">
+            <div class="modal-footer">Modal Footer Slot</div>
+          </template>
+        </Modal>
+
+        <CjaButton @click="modal.openModal()">Open modal</CjaButton>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText v-model="state.mdMaxWidth" title="Max Width md" />
+        <HstText v-model="state.lgMaxWidth" title="Max Width lg" />
+        <HstText v-model="state.xlMaxWidth" title="Max Width xl" />
+        <HstCheckbox v-model="state.modalHeader" title="Modal Header" />
+        <HstCheckbox v-model="state.modalBody" title="Modal Body" />
+        <HstCheckbox v-model="state.modalFooter" title="Modal Footer" />
+      </template>
+    </Variant>
+  </Story>
+</template>
+
+<style lang="scss" scoped>
+h2 {
+  margin-top: 0;
+}
+
+p {
+  margin: 0;
+}
+</style>
+
+<docs lang="md">
+### Props
+
+#### maxWidth
+
+Defines a maxWidth CSS string for the **md**, **lg** and **xl** viewports.
+
+### Slots
+
+#### #header
+
+Displays content inside the header slot space and adds a horizontal rule below it to the modal.
+
+#### #body
+
+Displays content inside the modal, becoming scrollable after a threshold. If you need to stylize slotted content, wrap the html within a div, it will be scoped to the vue scope you are currently working with.
+
+#### #footer
+
+Displays content below the modal body, separated by a horizontal ruler. Exempt from the scrollable container.
+
+### Emits
+
+#### @close
+
+Triggered when the modal is closed, through the close button or clicking outside the modal window.
+
+### Exposed
+
+#### active
+
+Exposes the modal's current **active** status, allows you to detect if the modal is opened or closed.
+
+#### openModal()
+
+Exposes the **openModal** method, used to display the modal, typically wrapped in a local function to perform additional changes before opening the modal.
+
+#### closeModal()
+
+Exposes the **closeModal** method, used to hide the modal, emits a **@close** event.
+
+#### toggleModal()
+
+Exposes the **toggleModal** method, used to hide or show the modal depending on the current **active** value. Emits a **@close** event if the modal was closed.
+
+## Defaults
+
+- **maxWidth**:
+  ```
+    {
+      md: "min(calc(100% - 48px), 768px)",
+      lg: "min(calc(100% - 48px), 1024px)",
+      xl: "1024px"
+    }
+  ```
+</docs>

package/src/stories/RadioInputList.story.vue

@@ -0,0 +1,61 @@
+<script lang="ts" setup>
+import RadioInputList from "../components/forms/RadioInputList.vue";
+
+const initState = () => ({
+  title: "Radio Input List Title",
+  options: [
+    {
+      value: true,
+      label: "Yes",
+    },
+    {
+      value: false,
+      label: "No",
+    },
+  ],
+  size: "md",
+  layout: "vertical",
+  listLayout: "vertical",
+  modelValue: true,
+  name: "storyRadio",
+});
+
+const options = {
+  size: ["sm", "md", "lg"],
+  layout: ["vertical", "horizontal"],
+  listLayout: ["vertical", "horizontal"],
+};
+</script>
+
+<template>
+  <Story title="Radio List">
+    <Variant title="Default" :init-state="initState">
+      <template #default="{ state }">
+        <RadioInputList
+          :title="state.title"
+          :size="state.size"
+          :layout="state.layout"
+          :list-layout="state.listLayout"
+          :model-value="state.modelValue"
+          :options="state.options"
+          :name="state.name"
+        />
+      </template>
+
+      <template #controls="{ state }">
+        <HstText v-model="state.title" title="Title" />
+        <HstSelect v-model="state.size" :options="options.size" title="Size" />
+        <HstSelect
+          v-model="state.layout"
+          :options="options.layout"
+          title="Input Layout"
+        />
+        <HstSelect
+          v-model="state.listLayout"
+          :options="options.listLayout"
+          title="List Layout"
+        />
+      </template>
+    </Variant>
+  </Story>
+</template>

package/src/types/CheckoutMilestone.ts

@@ -0,0 +1,5 @@
+export interface CheckoutMilestone {
+  status: "past" | "current" | "future";
+  title: string;
+  description?: string;
+}

package/src/types/Footer.ts

@@ -0,0 +1,17 @@
+import { StoryLink } from "./Storyblok";
+
+interface FooterLink {
+  text: string;
+  link: StoryLink;
+}
+
+export interface FooterCategory {
+  text: string;
+  link?: StoryLink;
+  subLinks?: FooterLink[];
+}
+
+export interface SocialLink {
+  socialNetwork: string;
+  link: StoryLink;
+}

package/src/types/Menu.ts

@@ -0,0 +1,19 @@
+import { StoryLink } from "./Storyblok";
+
+export interface MacroStep {
+  label: string;
+  icon: string;
+  status: "past" | "current" | "future";
+  navigationUrl?: string;
+}
+
+export interface MenuLink {
+  text: string;
+  link: StoryLink;
+}
+
+export interface MenuCategory {
+  text: string;
+  link?: StoryLink;
+  subLinks?: MenuLink[];
+}

package/src/types/RadioOption.ts

@@ -0,0 +1,7 @@
+import { InputHTMLAttributes } from "vue";
+
+export interface RadioOption {
+  value: InputHTMLAttributes["value"];
+  label: string;
+  disabled: InputHTMLAttributes["disabled"];
+}

package/src/types/Router.ts

@@ -0,0 +1,19 @@
+import "vue-router";
+
+declare module "vue-router" {
+  interface Router {
+    replaceRoutes: (newRoutesName: string) => void;
+    nextStep: () => void;
+    previousStep: () => void;
+    skipStep: (skipNr: number) => void;
+  }
+
+  interface RouteMeta {
+    step: number;
+    displayStep: number;
+    displayTotalSteps: number;
+    fields: string[];
+  }
+}
+
+export {};

package/src/types/SelectOption.ts

@@ -0,0 +1,6 @@
+import { SelectHTMLAttributes } from "vue";
+
+export interface SelectOption {
+  value: SelectHTMLAttributes["value"];
+  label: string;
+}

package/src/types/StoreDataValue.ts

@@ -0,0 +1,12 @@
+import { RadioOption } from "./RadioOption";
+import { SelectOption } from "./SelectOption";
+
+export interface StoreDataValue {
+  value: any;
+  label?: string;
+  options?: SelectOption[] | RadioOption[];
+}
+
+export interface StoreData {
+  [key: string]: StoreDataValue;
+}

package/src/types/Storyblok.ts

@@ -0,0 +1,10 @@
+export interface StoryLink {
+  linktype: "url" | "story" | "asset" | "email";
+  url?: string;
+  target?: HTMLAnchorElement["target"];
+  story?: {
+    url: string;
+    slug: string;
+    full_slug: string;
+  };
+}

package/src/types/TileOption.ts

@@ -0,0 +1,8 @@
+export interface TileOption {
+  value: any;
+  label: string;
+  description?: string;
+  descriptionLong?: string;
+  tooltip?: string;
+  image?: string;
+}

package/src/types/index.ts

@@ -0,0 +1,19 @@
+import { MacroStep, MenuLink, MenuCategory } from "./Menu";
+import { FooterCategory, SocialLink } from "./Footer";
+import { SelectOption } from "./SelectOption";
+import { TileOption } from "./TileOption";
+import { CheckoutMilestone } from "./CheckoutMilestone";
+import { StoreData, StoreDataValue } from "./StoreDataValue";
+
+export type {
+  MacroStep,
+  MenuCategory,
+  MenuLink,
+  SelectOption,
+  TileOption,
+  CheckoutMilestone,
+  StoreData,
+  StoreDataValue,
+  FooterCategory,
+  SocialLink,
+};

package/src/utils/cjaRouter.ts

@@ -0,0 +1,74 @@
+export const getCjaRouter = (
+  router: any,
+  options: {
+    sessionRoutesToken: string;
+    routeGetter: any;
+  }
+) => {
+  router.replaceRoutes = (newRoutesName: string) => {
+    if (
+      window.sessionStorage.getItem(options.sessionRoutesToken) != newRoutesName
+    ) {
+      const newRoutes = options.routeGetter(newRoutesName);
+
+      router.getRoutes().forEach((route) => {
+        if (route.name) {
+          router.removeRoute(route.name);
+        }
+      });
+
+      newRoutes.forEach((route) => {
+        router.addRoute(route);
+      });
+
+      window.sessionStorage.setItem(options.sessionRoutesToken, newRoutesName);
+      if (router.currentRoute.value.name) {
+        router.replace({ name: router.currentRoute.value.name });
+      }
+    }
+  };
+
+  router.nextStep = () => {
+    const nextStep = router
+      .getRoutes()
+      .find(
+        (route) => route.meta.step == router.currentRoute.value.meta.step + 1
+      );
+
+    if (nextStep) {
+      router.push(nextStep.path);
+    }
+  };
+
+  router.previousStep = () => {
+    const previousStep = router
+      .getRoutes()
+      .find(
+        (route) => route.meta.step == router.currentRoute.value.meta.step - 1
+      );
+
+    if (previousStep) {
+      router.push(previousStep.path);
+    }
+  };
+
+  router.skipStep = (skipNr) => {
+    const targetStep = router
+      .getRoutes()
+      .find(
+        (route) =>
+          route.meta.step == router.currentRoute.value.meta.step + 1 + skipNr
+      );
+
+    if (targetStep) {
+      router.push(targetStep.path);
+    }
+  };
+
+  router.beforeEach((to, from) => {
+    to.meta.animation =
+      from.meta?.step < to.meta?.step ? "slide-right" : "slide-left";
+  });
+
+  return router;
+};

package/src/utils/cjaStore.ts

@@ -0,0 +1,43 @@
+import { StoreData } from "../types/StoreDataValue";
+
+interface State {
+  journeyId: undefined | string;
+  data: StoreData;
+  [key: string]: any;
+}
+
+export const getCjaStore = (options: {
+  data: StoreData;
+  state?: any;
+  actions?: any;
+}) => ({
+  state: (): State => ({
+    journeyId: undefined,
+    data: { ...options.data } as StoreData,
+    ...options.state,
+  }),
+  actions: {
+    changeJourneyID(journeyId: string): void {
+      this.journeyId = journeyId;
+    },
+    changeData(
+      payload: { key: string; value: any },
+      target: string = "data"
+    ): void {
+      const field = this[target][payload.key];
+
+      if (field) {
+        field.value = payload.value;
+
+        if (field.options) {
+          field.label = Array.isArray(payload.value)
+            ? field.value.map(
+                (v) => field.options.find((k) => k.value == v)?.label
+              )
+            : field.options.find((k) => k.value == payload.value)?.label;
+        }
+      }
+    },
+    ...options.actions,
+  },
+});