cja-phoenix 0.2.23 → 0.3.0

package/src/stories/CjaButton.story.vue

@@ -0,0 +1,180 @@
+<script setup lang="ts" setup>
+import { ref } from "vue";
+import { CjaButton, TextInput } from "../components";
+
+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 = ref();
+</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 }">
+        <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
+        >
+      </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 }">
+        <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"
+        />
+      </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>
+
+<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";
+
+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

@@ -1,18 +1,88 @@
 <script setup lang="ts">
 import { ref, reactive } from "vue";
 import Modal from "../components/structural/Modal.vue";
+import { CjaButton } from "../components";
 
 const modal = ref();
 
-const state = reactive({
-  title: "",
+const initState = () => ({
+  title: "Modal Title",
+  modalBody: true,
+  modalFooter: false,
 });
 </script>
 
 <template>
   <Story title="Modal">
-    <modal ref="modal" :title="state.title"></modal>
+    <Variant title="Default" :init-state="initState">
+      <template #default="{ state }">
+        <Modal ref="modal" :title="state.title">
+          <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">
+              <CjaButton :color="'orange'">Continuar</CjaButton>
+            </div>
+          </template>
+        </Modal>
 
-    <button @click="modal.openModal()" type="button">Open modal</button>
+        <CjaButton @click="modal.openModal()">Open modal</CjaButton>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText type="text" v-model="state.title" title="Modal Title" />
+        <HstCheckbox v-model="state.modalBody" title="Modal Body" />
+        <HstCheckbox v-model="state.modalFooter" title="Modal Footer" />
+      </template>
+    </Variant>
   </Story>
 </template>
+
+<docs lang="md">
+### Props
+
+#### title
+
+Adds a title and a horizontal rule below it to the modal.
+
+### Slots
+
+#### #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.
+</docs>

package/src/types/MacroStep.ts

@@ -2,4 +2,5 @@ export interface MacroStep {
   label: string;
   icon: string;
   status: "past" | "current" | "future";
+  navigationUrl?: string;
 }

package/src/types/index.ts

@@ -1,5 +1,4 @@
 import { MacroStep } from "./MacroStep";
-import { Tab } from "./Tab";
 import { SelectOption } from "./SelectOption";
 import { TileOption } from "./TileOption";
 import { CheckoutMilestone } from "./CheckoutMilestone";
@@ -7,7 +6,6 @@ import { StoreData, StoreDataValue } from "./StoreDataValue";
 
 export type {
   MacroStep,
-  Tab,
   SelectOption,
   TileOption,
   CheckoutMilestone,

package/src/utils/gtm.ts

@@ -16,6 +16,7 @@ export const useCjaGtm = (
     stepName: string;
     stepNumber: number;
     stepDetails?: any;
+    action?: string;
   }) => {
     gtm?.trackEvent({
       event: `${gtmOptions.location} Step`,
@@ -24,6 +25,7 @@ export const useCjaGtm = (
         value: options.stepName,
         noninteraction: false,
         location: gtmOptions.location,
+        action: options.action,
         properties: {
           stepName: options.stepName,
           stepNumber: options.stepNumber,

package/dist/types/types/Tab.d.ts

@@ -1,4 +0,0 @@
-export interface Tab {
-    label: string;
-    control: string;
-}

package/src/types/Tab.ts

@@ -1,4 +0,0 @@
-export interface Tab {
-  label: string;
-  control: string;
-}