cja-phoenix 0.3.7 → 0.4.0

package/src/components/structural/Modal.vue

@@ -1,19 +1,19 @@
 <template>
   <Teleport to="body">
     <Transition name="fade">
-      <div v-show="active" class="modal-backdrop">
+      <div v-show="active" class="modal-backdrop" :style="{ ...cssVars }">
         <div class="modal-overlay" @click.self="closeModal">
           <div class="modal-container" ref="modalContainer">
-            <button
-              type="button"
-              class="btn-close"
-              aria-label="Close"
-              @click="closeModal"
-            >
-              <span class="m-cgg-icon--cross"></span>
-            </button>
-            <div class="modal-header" v-if="title">
-              {{ title }}
+            <div class="modal-header" :class="{ 'has-title': $slots.header }">
+              <div class="modal-header-wrapper">
+                <slot name="header"></slot>
+              </div>
+              <button
+                type="button"
+                class="btn-close m-cgg-icon--cross"
+                aria-label="Close"
+                @click="closeModal"
+              ></button>
             </div>
             <div class="modal-body">
               <slot name="body"></slot>
@@ -29,27 +29,42 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from "vue";
-
-defineProps<{
-  title?: string;
-}>();
+import { ref, watch, computed } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    maxWidth?: {
+      md?: string;
+      lg?: string;
+      xl?: string;
+    };
+  }>(),
+  {
+    maxWidth: () => ({
+      md: "min(calc(100% - 48px), 768px)",
+      lg: "min(calc(100% - 48px), 1024px)",
+      xl: "1024px",
+    }),
+  }
+);
 
 const active = ref(false);
 const modalContainer = ref();
 
+const cssVars = computed(() => ({
+  "--md-max-width": props.maxWidth.md,
+  "--lg-max-width": props.maxWidth.lg,
+  "--xl-max-width": props.maxWidth.xl,
+}));
+
 const emit = defineEmits(["close"]);
 
 watch(
   () => active.value,
   (active) => {
-    if (active) {
-      document.body.style.overflow = "hidden";
-      document.documentElement.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "";
-      document.documentElement.style.overflow = "";
-    }
+    document.querySelectorAll("html, body").forEach((el) => {
+      (el as HTMLElement).style.overflow = active ? "hidden" : "";
+    });
   }
 );
 
@@ -74,6 +89,8 @@ defineExpose({ active, openModal, closeModal, toggleModal });
 </script>
 
 <style lang="scss" scoped>
+@import "../../assets/breakpoints.scss";
+
 .modal-backdrop {
   position: fixed;
   top: 0;
@@ -105,87 +122,83 @@ defineExpose({ active, openModal, closeModal, toggleModal });
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
+  gap: 16px;
 
-  @media screen and (min-width: 601px) {
+  @media screen and (min-width: $break-md-min) {
     top: 50%;
     left: 50%;
     transform: translateY(-50%) translateX(-50%);
-    max-width: calc(100% - 60px);
-    max-height: calc(100% - 40px);
+    max-width: var(--md-max-width);
+    max-height: calc(100% - 48px);
     border-radius: 8px;
     padding: 20px 40px;
     height: auto;
   }
 
-  @media screen and (min-width: 1100px) {
-    max-width: 1040px;
+  @media screen and (min-width: $break-lg-min) {
+    max-width: var(--lg-max-width);
+  }
+
+  @media screen and (min-width: $break-xl-min) {
+    max-width: var(--xl-max-width);
   }
 
   .modal-header {
-    font-weight: 700;
-    font-size: 18px;
-    line-height: 21px;
-    padding: 0 20px 15px 0;
-    border-bottom: 1px solid #dedede;
-
-    @media screen and (min-width: 601px) {
-      font-size: 24px;
-      line-height: 27px;
-    }
+    display: grid;
+    grid-template-columns: 1fr 20px;
+    padding: 0;
 
     &:before,
     &:after {
       content: none;
     }
-  }
-
-  .btn-close {
-    position: absolute;
-    top: 20px;
-    right: 20px;
-    background: none;
-    border: none;
-    padding: 0;
-    outline: 0;
-    height: 20px;
-    cursor: pointer;
-    z-index: 2;
 
-    @media screen and (min-width: 601px) {
-      right: 40px;
+    &.has-title {
+      padding: 0 0 8px 0;
+      border-bottom: 1px solid #dedede;
     }
 
-    span {
-      display: block;
+    .modal-header-wrapper {
       font-size: 16px;
       line-height: 20px;
+      font-weight: 700;
     }
 
-    &:focus {
+    .btn-close {
+      background: none;
+      border: none;
+      padding: 0;
       outline: 0;
+      height: 20px;
+      width: 20px;
+      cursor: pointer;
+      z-index: 2;
+      font-size: 16px;
+      line-height: 20px;
+
+      &:focus {
+        outline: 0;
+      }
     }
   }
 
   .modal-body {
-    margin: 0 -15px -15px;
-    font-size: 15px;
-    line-height: 17px;
+    font-size: 14px;
+    line-height: 18px;
     overflow-y: auto;
     flex-grow: 1;
     height: auto;
-    padding: 15px;
   }
 
   .modal-footer {
     border-top: 1px solid #dedede;
-    padding: 15px 0 0;
-    margin-top: 15px;
+    padding: 8px 0 0;
 
     :deep(.button-container) {
       display: flex;
       flex-direction: row;
       justify-content: flex-end;
-      gap: 10px;
+      gap: 8px;
     }
   }
 }

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/utils/useViewportDetector.ts

@@ -3,8 +3,8 @@ import { Ref, onMounted, onUnmounted, ref } from "vue";
 export const useViewportDetector = (
   breakpoints: { [index: string]: number } = {
     xs: 0,
-    s: 420,
-    m: 768,
+    sm: 420,
+    md: 768,
     lg: 1024,
     xl: 1200,
   }