@dcodegroup-au/page-builder 0.5.2 → 0.5.3

package/example/src/App.vue

@@ -9,6 +9,7 @@ import {ChildSafeStandard} from "./pages/ChildSafeStandard.js";
 import {AdvisoryServices} from "./pages/AdvisoryService.js";
 import {PartnerWithUs} from "./pages/PartnerWithUs.js";
 import {OurGroups} from "./pages/OurGroups.js";
+import {Vectea2024} from "./pages/Vectea2024.js";
 
 const slide = {
   title: "About ELAA",
@@ -92,10 +93,10 @@ const breadcrumbs = [
 
 <template>
   <div>
-    {{ JSON.stringify(OurGroups) }}
+    {{ JSON.stringify(Vectea2024) }}
     <div style="margin: 40px 0">
       <h1 style="margin-bottom: 20px; font-size: 50px;">Page Render</h1>
-      <PageRender :page="OurGroups"/>
+      <PageRender :page="Vectea2024"/>
     </div>
     <div style="margin: 40px 0">
       <h1 style="margin-bottom: 20px; font-size: 50px;">Slider Edit</h1>
@@ -111,7 +112,7 @@ const breadcrumbs = [
     </div>
     <div style="margin: 40px 0">
       <h1 style="margin-bottom: 20px; font-size: 50px;">Page Builder</h1>
-      <PageBuilder v-model="OurGroups" :breadcrumbs="breadcrumbs"/>
+      <PageBuilder v-model="Vectea2024" :breadcrumbs="breadcrumbs"/>
     </div>
   </div>
 </template>

package/example/src/pages/Vectea2024.js

@@ -0,0 +1,205 @@
+export const Vectea2024 =
+  {
+  title: "VECTEA 2024",
+  sections: [
+    {
+      title: "Standard header",
+      type: "standard_header",
+      components: [
+        {
+          name: "Standard header",
+          type: "header",
+          title: "VECTEA 2024",
+          supporting_text_max_length: 500,
+          supporting_text: "The Victorian Early Childhood Teachers and Educators Agreement (VECTEA) is an enterprise agreement that applies to early childhood teachers and educators employed in kindergarten education programs in Victoria.",
+        },
+      ]
+    },
+    {
+      title: "Paragraph section",
+      type: "paragraph",
+      components: [
+        {
+          name: "Paragraph section",
+          type: "paragraph",
+          title: "ELAA is proudly supporting",
+          paragraph: '<p>The Victorian Government’s Best Start, Best Life reforms represent the most substantial transformation in Victoria’s early childhood sector in a generation. As part of these reforms:</p><ol><li data-list=\\"bullet\\"><span class=\\"ql-ui\\" contenteditable=\\"false\\"></span>The Three-Year-Old Kindergarten program will expand, reaching 15 hours per week across the state by 2029.</li><li data-list=\\"bullet\\"><span class=\\"ql-ui\\" contenteditable=\\"false\\"></span>The Four-Year-Old Kindergarten program will evolve into Pre-Prep, with weekly hours increasing from 15 to 30 by 2036 throughout Victoria.</li></ol><p>Extending the hours of teacher-led, play-based learning through Pre-Prep in the year before school provides children with enhanced access to the numerous benefits of early childhood education. Pre-Prep will launch in 2025, starting with children in six regional Victorian local government areas, and will gradually expand across the state.</p>',
+          featured_image: "https://beta.elaa.org.au/img/what-we-do/vectea-2024/01.jpg",
+        },
+      ]
+    },
+    {
+      title: "Link card section",
+      type: "link_card",
+      display: "vertical",
+      no_background: true,
+      components: [
+        {
+          name: "Section header",
+          type: "header",
+          title: "ELAA Supports",
+        },
+        {
+          name: "Link cards",
+          type: "link_cards",
+          supportive_text: "Manage the link cards.",
+          max_items: 4,
+          data: [
+            {
+              title: "Read more about our history",
+              description: "Happy Birthday ELAA – celebrating 30 years of service to members",
+              icon: "AlertCircle",
+              public: true,
+              primary_button: {
+                show: true,
+                name: 'Button',
+                label: 'Learn more',
+                url: 'https://beta-frontend.elaa.org.au/img/homepage/asset_free_resources.png', // external could be an url
+                type: 'external-page',
+                open_in_new_tab: false,
+              }
+            },
+            {
+              title: "Read more about our history",
+              description: "Happy Birthday ELAA – celebrating 30 years of service to members",
+              public: true,
+              icon: 'AlignLeft01',
+              primary_button: {
+                show: true,
+                name: 'Button',
+                label: 'Learn more',
+                url: 'https://beta-frontend.elaa.org.au/img/homepage/asset_free_resources.png', // external could be an url
+                type: 'external-page',
+                open_in_new_tab: true,
+              }
+            },
+          ]
+        }
+      ]
+    },
+    {
+      title: "Bullet Points Section",
+      type: "bullet_points",
+      components: [
+        {
+          name: "Section header",
+          type: "header",
+          title: "Why Partner with ELAA?",
+          featured_image: "https://beta.elaa.org.au/img/what-we-do/vectea-2024/02.jpg",
+        },
+        {
+          name: "Bullet Points",
+          type: "bullet_points",
+          supportive_text: "This section can contain up to 10 items.",
+          has_type_switcher: false,
+          max_items: 10,
+          max_title: 500,
+          data: [
+            {
+              title: "We are uniquely placed to raise your business profile in the ECEC sector",
+            },
+            {
+              title: "Work with a values based peak body who are trusted by their members.",
+            },
+            {
+              title: "We actively work with our partners, developing flexible tailored approaches to maximise your return on investment.",
+            },
+            {
+              title: "We have a dedicated, largely female audience – and we know what works for them.",
+            },
+          ]
+        }
+      ]
+    },
+    {
+      title: "Bullet Points Section",
+      type: "bullet_points",
+      has_background: true,
+      components: [
+        {
+          revert: true,
+          name: "Section header",
+          type: "header",
+          title: "Benefits for teaching staff",
+          supporting_text: "The VECTEA has delivered significantly improved pay and conditions for teachers compared to teachers on the industry (modern) award, enabling kindergartens to retain their superior quality ratings.\n" +
+            "\n" +
+            "Some of the beneficial employment conditions of the VECTEA 2020 for teachers and educators include:​",
+          featured_image: "https://beta.elaa.org.au/img/what-we-do/vectea-2024/03.jpg",
+        },
+        {
+          name: "Bullet Points",
+          type: "bullet_points",
+          supportive_text: "This section can contain up to 10 items.",
+          has_type_switcher: false,
+          max_items: 10,
+          max_title: 500,
+          data: [
+            {
+              title: "extended planning time to support quality programming ​ (30 minutes per teaching hour for early childhood teachers (ECT) and 15 minutes per teaching hour for educators)",
+            },
+            {
+              title: "10 weeks of paid annual leave (term break leave)",
+            },
+            {
+              title: "16 weeks of employer-paid parental leave for primary caregivers",
+            },
+            {
+              title: "We actively work with our partners, developing flexible tailored approaches to maximise your return on investment.",
+            },
+            {
+              title: "We have a dedicated, largely female audience – and we know what works for them.",
+            },
+          ]
+        }
+      ]
+    },
+    {
+      title: "FAQs Section",
+      type: "faqs",
+      components: [
+        {
+          name: "Section header",
+          type: "header",
+          title: 'Frequently asked questions',
+          supporting_text: 'Frequently Asked Questions for Committees and Managers',
+        },
+        {
+          name: "FAQs",
+          type: "feature_items",
+          supportive_text: "This section can contain up to 10 items.",
+          has_type_switcher: false,
+          max_items: 50,
+          max_title: 500,
+          data: [
+            {
+              has_extra: true,
+              as_item: true,
+              title: "What is an enterprise agreement? Is this the same as an award?",
+              supporting_text: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos quaerat sed minus maiores dolorem consectetur quibusdam harum itaque deserunt at eligendi qui illum praesentium odit sit, voluptates nobis expedita?",
+            },
+            {
+              has_extra: true,
+              as_item: true,
+              title: "What is an enterprise agreement? Is this the same as an award?",
+              supporting_text: "The last scheduled salary increase under VECTEA 2020, along with its corresponding agreements, was in April 2024. During the re-negotiation period, current salaries established under VECTEA 2020 will continue to be in effect. \n" +
+                "Future salary increases under a new VECTEA 2024 will take effect once the Fair Work Commission approves the new agreement.\n" +
+                "ELAA will continue to release Wage Bulletins every July for the VECTEA 2020. During this period, salaries of certain VECTEA classifications may be updated in accordance with increases to the underpinning modern awards.",
+            },
+            {
+              has_extra: true,
+              as_item: true,
+              title: "We actively work with our partners, developing flexible tailored approaches to maximise your return on investment.",
+              supporting_text: "This section can contain up to 10 items.",
+            },
+            {
+              has_extra: true,
+              as_item: true,
+              title: "We have a dedicated, largely female audience – and we know what works for them.",
+              supporting_text: "This section can contain up to 10 items.",
+            },
+          ]
+        }
+      ]
+    },
+  ]
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dcodegroup-au/page-builder",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "exports": {
     ".": {
       "import": "./dist/page-builder.es.js"

package/src/components/PageRender.vue

@@ -26,6 +26,7 @@ import LinkList from "@/components/presenters/modules/LinkList.vue";
 import BulletPoints from "@/components/presenters/modules/BulletPoints.vue";
 import Callout from "@/components/presenters/modules/Callout.vue";
 import ContactUs from "@/components/presenters/modules/ContactUs.vue";
+import FAQ from "@/components/presenters/modules/FAQ.vue";
 
 const props = defineProps({
   page: {
@@ -50,6 +51,7 @@ const componentMaps = ref({
   bullet_points: markRaw(BulletPoints),
   callout: markRaw(Callout),
   contact_us: markRaw(ContactUs),
+  faqs: markRaw(FAQ),
 });
 
 const currentComponent = (section) => {

package/src/components/builders/Header.vue

@@ -21,14 +21,14 @@
             :label-text="dataRef?.title_label ?? 'Title *'"
             class="w-full mb-4"
             :value="dataRef.title"
-            :limit="51"
+            :limit="100"
         >
           <input
               v-model="dataRef.title"
               name="title"
               type="text"
               placeholder="Title"
-              :maxlength="51"
+              :maxlength="100"
               class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
           />
         </input-wrapper>

package/src/components/builders/NewsGrid.vue

@@ -12,14 +12,14 @@
             label-text="Title *"
             class="w-full mb-4"
             :value="componentData.button.title"
-            :limit="20"
+            :limit="100"
         >
           <input
               v-model="componentData.button.title"
               name="title"
               type="text"
               placeholder="Title"
-              :maxlength="20"
+              :maxlength="100"
               class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
           />
         </input-wrapper>

package/src/components/common/Button.vue

@@ -8,14 +8,14 @@
           label-text="Button Label *"
           class="w-full mb-4"
           :value="button.label"
-          :limit="20"
+          :limit="100"
       >
         <input
             v-model="button.label"
             name="button.label"
             type="text"
             placeholder="Label"
-            :maxlength="20"
+            :maxlength="100"
             class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
         />
       </input-wrapper>

package/src/components/presenters/modules/BulletPoints.vue

@@ -1,22 +1,31 @@
 <template>
   <div class="overflow-hidden">
-    <div class="max-w-[1640px] md:px-[120px] mx-auto w-full my-[40px]" :class="{'flex gap-8': headerComponent?.featured_image, 'flex-row-reverse justify-between': headerComponent?.revert}">
-      <img v-if="headerComponent?.featured_image"
-           :src="headerComponent?.featured_image"
-           class="w-[480px] object-cover rounded-[24px]"
-           alt="Feature"/>
-      <div v-if="headerComponent" :class="{'py-[48px]': headerComponent?.featured_image}">
-        <div v-if="headerComponent?.icon" class="w-[48px] h-[48px] bg-brand-100 border-[8px] border-brand-50 rounded-full flex items-center justify-center">
-          <IconComponent :icon="headerComponent.icon" icon-classes="w-5 h-5 text-brand-600"></IconComponent>
-        </div>
-        <h3 class="text-[36px] text-gray-900 font-semibold">{{ headerComponent.title }}</h3>
-        <p v-if="headerComponent?.supporting_text" class="text-[20px] font-normal mt-2 text-gray-600 leading-[30px]" v-html="headerComponent.supporting_text"></p>
-        <div class="flex flex-col mt-8 gap-4" :class="{'!grid grid-cols-3' :!headerComponent?.featured_image}" v-if="bulletPointsComponent">
-          <div v-for="item in bulletPointsComponent.data" class="flex">
-            <div class="bg-gray-100 rounded-full w-[28px] h-[28px] flex items-center justify-center text-gray-500 mr-2">
-              <CheckIcon class="w-4 h-4"></CheckIcon>
+    <div :class="{'bg-gray-50 py-2' : section?.has_background}">
+      <div class="max-w-[1640px] md:px-[120px] mx-auto w-full my-[40px]"
+           :class="{'flex gap-8': headerComponent?.featured_image, 'flex-row-reverse justify-between': headerComponent?.revert}">
+        <img v-if="headerComponent?.featured_image"
+             :src="headerComponent?.featured_image"
+             class="max-w-[480px] w-full object-cover rounded-[24px]"
+             ref="leftColumn"
+             alt="Feature"/>
+        <div v-if="headerComponent" class="h-fit" :class="{'py-[48px]': headerComponent?.featured_image}"
+             ref="rightColumn">
+          <div v-if="headerComponent?.icon"
+               class="w-[48px] h-[48px] bg-brand-100 border-[8px] border-brand-50 rounded-full flex items-center justify-center">
+            <IconComponent :icon="headerComponent.icon" icon-classes="w-5 h-5 text-brand-600"></IconComponent>
+          </div>
+          <h3 class="text-[36px] text-gray-900 font-semibold">{{ headerComponent.title }}</h3>
+          <p v-if="headerComponent?.supporting_text" class="text-[20px] font-normal mt-2 text-gray-600 leading-[30px]"
+             v-html="headerComponent.supporting_text"></p>
+          <div class="flex flex-col mt-8 gap-4" :class="{'!grid grid-cols-3' :!headerComponent?.featured_image}"
+               v-if="bulletPointsComponent">
+            <div v-for="item in bulletPointsComponent.data" class="flex">
+              <div
+                  class="bg-gray-100 rounded-full w-[28px] h-[28px] flex items-center justify-center text-gray-500 mr-2">
+                <CheckIcon class="w-4 h-4"></CheckIcon>
+              </div>
+              <p class="text-lg text-gray-600 w-[97%]">{{ item.title }}</p>
             </div>
-            <p class="text-lg text-gray-600 w-[97%]">{{ item.title }}</p>
           </div>
         </div>
       </div>
@@ -24,7 +33,7 @@
   </div>
 </template>
 <script setup>
-import {ref, computed} from "vue";
+import {ref, computed, onMounted} from "vue";
 import CheckIcon from "@/assets/img/icons/check.svg";
 import IconComponent from "@/components/common/Icon.vue";
 
@@ -35,6 +44,9 @@ const props = defineProps({
   },
 });
 
+const leftColumn = ref(null);
+const rightColumn = ref(null);
+
 const section = ref(props.section);
 const headerComponent = computed(() => {
   return section.value.components.find((component) => component.type === "header");
@@ -42,4 +54,10 @@ const headerComponent = computed(() => {
 const bulletPointsComponent = computed(() => {
   return section.value.components.find((component) => component.type === "bullet_points");
 });
+
+onMounted(() => {
+  if (leftColumn.value && rightColumn.value) {
+    leftColumn.value.style.height = `${rightColumn.value.offsetHeight}px`;
+  }
+});
 </script>

package/src/components/presenters/modules/FAQ.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="overflow-hidden">
+    <div class="max-w-[1640px] md:px-[120px] mx-auto w-full bg-white py-[40px] flex justify-center gap-[10%]">
+      <div v-for="(header, index) in headerComponents" class="gap-4 max-w-[800px] w-full">
+        <div class="px-[40px] text-center mb-6 mx-auto" v-if="header">
+          <h3 class="text-[36px] text-gray-900 font-semibold">{{ header.title }}</h3>
+          <p v-if="header?.supporting_text"
+             class="text-[20px] font-normal mt-2 text-gray-600 leading-[30px] max-w-[768px] mx-auto"
+             v-html="header.supporting_text"></p>
+        </div>
+        <div v-if="featureComponents[index]" class="flex flex-col divide-y gap-8">
+          <div v-for="(link, index) in featureComponents[index].data"
+               class="relative bg-white p-2 w-full pt-6">
+            <a class="text-gray-900 cursor-pointer w-full inline-flex justify-between gap-1.5 items-center leading-[28px] font-semibold text-lg">
+              <span class="hover:underline" @click="toggle(index)">
+                {{ link.title }}
+              </span>
+              <Plus v-if="!show[index]" class="w-6 h-6 cursor-pointer text-gray-400 hover:text-gray-700" @click="toggle(index)"></Plus>
+              <Minus v-else class="w-6 h-6 cursor-pointer text-gray-400 hover:text-gray-700" @click="toggle(index)"></Minus>
+            </a>
+            <p v-if="show[index]" class="mt-2 text-gray-600 leading-[24px]" v-html="link.supporting_text"></p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import {ref, computed} from "vue";
+import Plus from "@/assets/img/icons/plus-circle.svg";
+import Minus from "@/assets/img/icons/minus-circle.svg";
+
+const props = defineProps({
+  section: {
+    required: true,
+    type: Object,
+  },
+});
+
+const section = ref(props.section);
+const show = ref([]);
+const headerComponents = computed(() => {
+  return section.value.components.filter((component) => component.type === "header");
+});
+
+const featureComponents = computed(() => {
+  return section.value.components.filter((component) => component.type === "feature_items");
+});
+
+featureComponents.value.forEach((value, index) => {
+  show.value[index] = false;
+})
+
+const toggle = (index) => {
+  show.value[index] = !show.value[index];
+};
+
+</script>

package/src/components/presenters/modules/LinkCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="overflow-hidden bg-aqua-100">
+  <div class="overflow-hidden" :class="{'bg-aqua-100': !section?.no_background}">
     <div class="max-w-[1640px] md:px-[120px] mx-auto w-full my-[40px]">
       <div class="rounded-xl px-[40px] text-center mb-6 max-w-[1280px] mx-auto" v-if="headerComponent">
         <h3 class="text-[36px] text-gray-900 font-semibold">{{ headerComponent.title }}</h3>
@@ -13,7 +13,9 @@
                alt="Feature"/>
         </div>
         <div class="flex gap-8 w-full" ref="rightColumn" :class="{'flex-col h-fit': headerComponent?.featured_image}">
-          <div v-for="(data, index) in cardComponent.data" class="relative bg-white p-8 rounded-[24px] w-full">
+          <div v-for="(data, index) in cardComponent.data"
+               class="relative bg-white p-8 rounded-[24px] w-full"
+               :class="{'!bg-gray-50': section?.no_background}">
             <div v-if="data.icon" class="w-[48px] h-[48px] flex justify-center items-center rounded-[10px] text-white bg-aqua-900 mb-4">
               <IconComponent :icon="data.icon" icon-classes="w-5 h-5" :key="index"></IconComponent>
             </div>

package/src/components/presenters/modules/Paragraph.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="overflow-hidden">
-    <div class="max-w-[1640px] md:px-[120px] mx-auto w-full pt-4 mb-4">
+  <div class="overflow-hidden mt-4">
+    <div class="max-w-[1640px] md:px-[120px] mx-auto w-full pt-4 mb-4 flex gap-16">
       <div class="max-w-[800px]" v-if="section.components[0]?.title">
         <h3 class="text-[36px] text-gray-900 font-semibold">
           {{ section.components[0].title }}
@@ -9,6 +9,9 @@
           <div v-html="section.components[0].paragraph"></div>
         </div>
       </div>
+      <div class="w-full rounded-[24px]" v-if="section.components[0]?.featured_image">
+        <img :src="section.components[0]?.featured_image" alt="Feature Image" class="w-full h-full object-cover rounded-[24px]"/>
+      </div>
     </div>
   </div>
 </template>