cec-nuxt-lib 0.3.6 → 0.3.8

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "cec-nuxt-lib",
   "configKey": "cec-nuxt-lib",
-  "version": "0.3.6"
+  "version": "0.3.8"
 }

package/dist/runtime/components/cecCanvas.vue

@@ -3,23 +3,14 @@ import { onMounted } from 'vue';
 import { useState } from '#app';
 
 import { createRenderer, text } from '@contensis/canvas-html';
-
 import type { Block } from '@contensis/canvas-html';
-
-const sizeString = (n) => {
-  if (n < 1000) {
-    return `${n}B`;
-  } else if (n < 1000 * 1000) {
-    return `${(n / 1000).toFixed(2)}KB`;
-  } else {
-    return `${(n / 1000 / 1000).toFixed(2)}MB`;
-  }
-};
+const getCanvas = (data: Block[]) => renderer({ data });
 
 const baseUrl = useState('baseUrl');
-const getCanvas = (data: Block[]) => renderer({ data });
 const listItems = useState('listItems');
+const path = useState('path');
 const questions = useState('questions', () => []);
+const title = useState('title');
 let canvasHtml;
 
 const props = defineProps({
@@ -31,6 +22,16 @@ const props = defineProps({
 
 const { canvas } = props;
 
+const sizeString = (n) => {
+  if (n < 1000) {
+    return `${n}B`;
+  } else if (n < 1000 * 1000) {
+    return `${(n / 1000).toFixed(2)}KB`;
+  } else {
+    return `${(n / 1000 / 1000).toFixed(2)}MB`;
+  }
+};
+
 const regex =
   /^https:\/\/digital-core\.cheshireeast\.gov\.uk(?!.*(?:&pagePath|&pageTitle|login)).*$/;
 
@@ -82,7 +83,7 @@ const anchor = (data) => {
 
 const carousel = (data, id) => {
   // Create the indicators
-  let indicators = data.carouselComponent.reduce((acc, e, i) => {
+  let indicators = data.carouselComponent.reduce((acc, _, i) => {
     return (
       acc +
       `<button type="button" data-bs-target="#${id}-indicators" data-bs-slide-to="${i}" class="${i ? '' : 'active'}" aria-current="${i ? '' : 'true'}" aria-label="Slide ${i}">${i + 1}</button>`
@@ -169,6 +170,46 @@ const centralColumn = (props: any) => {
   }
 };
 
+const centralPromotionalSection = (props: any) => {
+  let item = props.block?.value;
+  return `
+  <div class="row">
+    <div class="py-5 bg-cec-central-promo-section">
+      <div class="cec-meta-outer px-4">
+        <div class="cec-meta-content col-lg-8 col-md-12 px-3 py-4 px-md-5">
+          <div>${item.content}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  `;
+};
+
+const contactDetails = (data) => {
+  let address = data.buildingName ? `<p class="mb-0">${data.buildingName}` : '';
+  address += data.streetAddress
+    ? makeAddressItem('streetAddress', data.streetAddress)
+    : '';
+  address += data.locality
+    ? makeAddressItem('addressLocality', data.locality)
+    : '';
+  address += data.county ? makeAddressItem('addressRegion', data.county) : '';
+  address += data.postCode ? makeAddressItem('postalCode', data.postCode) : '';
+  let contact = data.phoneNumber
+    ? makeAddressItem('telephone', data.phoneNumber)
+    : '';
+  contact += data.email ? makeAddressItem('email', data.email) : '';
+  return `
+  <div itemscope itemtype="https://schema.org/Organization">
+    ${makeAddressItem('name', data.name)}
+    <div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
+      ${address}
+    </div>
+    ${contact}
+  </div>
+`;
+};
+
 const container = (data) => {
   if (data.closeContainer) {
     return `</div>${data.singleChoice === 'cec-main-column' ? '</div>' : ''}`;
@@ -181,10 +222,10 @@ const container = (data) => {
   `;
 };
 
-const promotionalFullWidthImageWithOverlay = (props: any) => {
+const fullWidthImageWithOverlay = (props: any) => {
   let item = props.block?.value;
   let overlay;
-  if (!item.overlayText) {
+  if (item.overlayImage) {
     overlay = `
   <div class="cec-cent-promo-txt-wrap top-50 end-0">
       <div
@@ -197,7 +238,7 @@ const promotionalFullWidthImageWithOverlay = (props: any) => {
         />
     </div>
   </div>`;
-  } else {
+  } else if (item.overlayText) {
     overlay = `
   <div class="position-relative">
     <div class="row g-0">
@@ -211,17 +252,19 @@ const promotionalFullWidthImageWithOverlay = (props: any) => {
           <div
             class="cec-cent-promo-txt bg-tog-for-chil-green col-lg-8 col-md-12 mx-auto my-md-4 mb-md-5 pb-2"
           >
-            <div class="text-white text-center p-4">${item.overlayText}</div>
+            <div class="text-white text-center p-3">${item.overlayText}</div>
           </div>
         </div>
       </div>
     </div>
   </div>
   `;
+  } else {
+    overlay = '';
   }
   return `
   <div class="position-relative">
-    <div class="row g-0 mb-3">
+    <div class="row g-0">
       <img
         class="img-fluid"
         alt="${item.image.altText}"
@@ -233,137 +276,23 @@ const promotionalFullWidthImageWithOverlay = (props: any) => {
   `;
 };
 
-const promotionalContrastRegion = (props: any) => {
-  let item = props.block?.value;
-  const bgClass = `bg-${item.colour.toLowerCase().replace(/\s/g, '-')}`;
-  let textCol = `
-    <div class="p-2 ps-lg-4 ms-lg-5 col">
-      <div class="cec-pull-column pe-md-5">${item.content}</div>
-    </div>`;
-  let imageCol = `
-    <div class="col">
-      <img
-        class="img-fluid"
-        alt="${item.image.altText}"
-        src="${baseUrl.value}${item.image.asset.sys.uri}"
-      />
-    </div>`;
-  return `
-    <div
-    class="${bgClass} cec-pull-container pe-md-0 d-flex flex-column flex-md-row justify-content-center ps-4 align-items-center py-5 mb-4"
-    >
-    ${item.alignment === 'left' ? imageCol + textCol : textCol + imageCol}
-    </div>
-`;
-};
-
-const promotionalFullWidthImageWithSideOverlay = (props: any) => {
+const fullWidthImageWithSideOverlay = (props: any) => {
   let item = props.block?.value;
   return `
   <div class="position-relative side-overlay-section">
     <div class="row g-0">
-      <img
-        class="img-fluid"
-        alt="${item.image.altText}"
-        src="${baseUrl.value}${item.image.asset.sys.uri}"
-      />
-      <div
-        style="position: absolute"
-        class="my-side-overlay col-lg-6 bg-cec-green ms-lg-5 mt-lg-5 p-2 top-0"
-      >
-        <h2 class="text-white promo-heading display-6">${item.heading}</h2>
-        <div class="text-white">${item.content}</div>
-      </div>
+        <img
+          class="img-fluid"
+          alt="${item.image.altText}"
+          src="${baseUrl.value}${item.image.asset.sys.uri}"
+        />
+    <div style="position: absolute;" class="my-side-overlay  col-lg-6 bg-cec-green ms-lg-5 mt-lg-5 p-2 top-0 ">
+      <h2 class="text-white promo-heading display-6">${item.heading}</h2>
+      <div class="text-white "> ${item.content}</div>
     </div>
-  </div>
-  `;
-};
-
-const centralPromotionalSection = (props: any) => {
-  let item = props.block?.value;
-  return `
-<div class="row">
-  <div class="py-5 bg-cec-central-promo-section">
-    <div class="cec-meta-outer px-4">
-      <div class="cec-meta-content col-lg-8 col-md-12 px-3 py-4 px-md-5">
-        <div>${item.content}</div>
-      </div>
     </div>
   </div>
-</div>
-`;
-};
-
-const promotionalBannerWithText = (props: any) => {
-  let item = props.block?.value;
-  let overlay = `
-  <div class="cec-cent-promo-txt-wrap col-md-11 top-50 w-100 text-center">
-    <h1
-      class="mb-0 cec-cent-promo-txt d-md-inline-block px-3 pt-1 pb-3 promo-heading bg-cec-green text-white"
-    >
-      ${item.text}
-    </h1>
-  </div>
   `;
-  let paras = item.html.replace(/<\/?p>/g, '').split('\n');
-  if (paras.length) {
-    overlay = `
-  <div
-    class="cec-cent-promo-txt-wrap col-lg-8 col-md-11  text-center top-50 w-100 "
-  >
-    <div id="overlay" class="bg-tog-for-chil-green d-md-inline-block py-3 px-4 ">
-      <h1
-        class="hp-promo-heading text-white d-md-inline-block display-md-5 text-center px-3 pt-1 pb-0"
-        style="font-family: myriad-pro, sans-serif"
-      >
-        ${paras[0]}
-      </h1>
-      <div class="d-flex justify-content-center mt-2 strapline text-white">
-        ${paras[1]}
-      </div>
-    </div>
-  </div>`;
-  }
-  return `
-  <div class="position-relative row g-0 mb-3">
-    <img
-      alt="${item.bannerImage.altText}"
-      src="${baseUrl.value}${item.bannerImage.asset.sys.uri}"
-    />
-    ${overlay}
-  </div>
-  `;
-};
-
-const processUri = (uri) => {
-  return uri.toLowerCase().replace(/%e2/g, '%E2');
-};
-
-const genericList = (props: any) => {
-  let item = props.block?.value;
-  let id = props.block.id;
-  return listItems.value[id]
-    ? `
-    <h2 class="fs-4 mt-3">${item.title}</h2>
-    <ul>
-      ${listItems.value[id].reduce((acc, e) => {
-        return e.sys.dataFormat === 'webpage'
-          ? `${acc}
-      <li><a href="${processUri(e.sys.uri)}">${e.title}</a></li>
-      `
-          : `${acc}
-      <li>
-        <a href="${processUri(e.sys.uri)}"
-          >${e.title[0].toUpperCase()}${e.title.slice(1)}
-          (${e.sys.contentTypeId.toUpperCase()},
-          ${sizeString(e.sys.properties.fileSize)})
-        </a>
-      </li>
-      `;
-      }, '')}
-    </ul>
-`
-    : '';
 };
 
 const heroUnit = (props: any) => {
@@ -374,8 +303,8 @@ const heroUnit = (props: any) => {
 const horizontalTable = (props: any) => {
   let data = props.block?.value;
   let rows = data.tableRow.reduce((acc, r) => {
-    let cols = r.columns.reduce((acc, c) => {
-      return `<td>${c}</td>`;
+    let cols = r.columns.reduce((acc1, c) => {
+      return acc1 + `<td>${c}</td>`;
     }, '');
     return `${acc}<tr><th scope="row">${r.headerCell}</th>${cols}</tr>`;
   }, '');
@@ -383,10 +312,10 @@ const horizontalTable = (props: any) => {
   <div class="table-responsive">
     <table class="usr_TableDefault">
   <caption class="hidden">${data.caption}</caption>
-        <tbody>
-          ${rows}
-        </tbody>
-    </table>
+      <tbody>
+        ${rows}
+      </tbody>
+  </table>
   </div>
   `;
 };
@@ -409,6 +338,63 @@ const linkEntry = (data) => {
   return `<a title="${data.title || ''}" href="${data.target}">${data.text}</a>`;
 };
 
+const makeAddressItem = (prop, text) => {
+  if (prop === 'email') {
+    return `<p class="mb-0"> <a href="mailto:${text}" itemprop="${prop}>${text}</a></p>`;
+  }
+  return `<p class="mb-0" itemprop="${prop}">${text}</p>`;
+};
+
+const makeQuestions = (data, id) => {
+  data.question.forEach((qu, j) => {
+    qu.stack = [0];
+    qu.buttons = qu.responseForQuestionComponent.reduce((acc, r, i) => {
+      return (
+        acc +
+        `<div class="col w-auto ps-0 pe-3">
+        <button
+          type="button"
+          id="${id}_${j}_${i}"
+          class="cec-button question-btns"
+        >
+          ${r.buttonText}
+        </button>
+      </div>`
+      );
+    }, '');
+    questions.value.push({ id: id, question: data.question, stack: [0] });
+  });
+
+  let buttons = data.question[0].buttons;
+  return `
+  <div class="mt-3 questions">
+    <h2>Answer the questions:</h2>
+    <fieldset class="p-1 mb-3">
+      <legend>${data.entryTitle}</legend>
+      <div class="ps-2 align-items-end question row g-0">
+        <div id="${id}_display">${data.question[0].question}</div>
+        <div class="row row-cols-auto btns-div" id="${id}_buttons">
+          ${buttons}
+        </div>
+      </div>
+      <button
+        type="button"
+        class="mt-4 btn btn-light previous"
+        id="${id}_prev"
+      >
+        Previous question
+      </button>
+      <button
+        type="button"
+        class="mt-4 btn btn-light reset"
+        id="${id}_reset"
+      >
+        Restart
+      </button>
+    </fieldset>
+  </div>`;
+};
+
 const processTime = (str) => {
   let suffix = 'am';
   if (str === '00:00') {
@@ -472,6 +458,174 @@ const openingHours = (data) => {
 `;
 };
 
+const promotionalBannerWithText = (props: any) => {
+  let item = props.block?.value;
+  let overlay = `
+  <div class="cec-cent-promo-txt-wrap col-md-11 top-50 w-100 text-center">
+    <h1
+      class="mb-0 cec-cent-promo-txt d-md-inline-block px-3 pt-1 pb-3 promo-heading bg-cec-green text-white"
+    >
+      ${item.text}
+    </h1>
+  </div>
+  `;
+  let paras = item.html.replace(/<\/?p>/g, '').split('\n');
+  if (paras.length) {
+    overlay = `
+  <div
+    class="cec-cent-promo-txt-wrap col-lg-8 col-md-11  text-center top-50 w-100 "
+  >
+    <div id="overlay" class="bg-tog-for-chil-green d-md-inline-block py-3 px-4 ">
+      <h1
+        class="hp-promo-heading text-white d-md-inline-block display-md-5 text-center px-3 pt-1 pb-0"
+        style="font-family: myriad-pro, sans-serif"
+      >
+        ${paras[0]}
+      </h1>
+      <div class="d-flex justify-content-center mt-2 strapline text-white">
+        ${paras[1]}
+      </div>
+    </div>
+  </div>`;
+  }
+  return `
+  <div class="position-relative row g-0 mb-3">
+    <img
+      alt="${item.bannerImage.altText}"
+      src="${baseUrl.value}${item.bannerImage.asset.sys.uri}"
+    />
+    ${overlay}
+  </div>
+  `;
+};
+const promotionalContrastRegion = (props: any) => {
+  let item = props.block?.value;
+  const bgClass = `bg-${item.colour.toLowerCase().replace(/\s/g, '-')}`;
+  let textCol = `
+    <div class="p-2 ps-lg-4 ms-lg-5 col">
+      <div class="cec-pull-column pe-md-5">${item.content}</div>
+    </div>`;
+  let imageCol = `
+    <div class="col">
+      <img
+        class="img-fluid"
+        alt="${item.image.altText}"
+        src="${baseUrl.value}${item.image.asset.sys.uri}"
+      />
+    </div>`;
+  return `
+    <div
+    class="${bgClass} cec-pull-container pe-md-0 d-flex flex-column flex-md-row justify-content-center ps-4 align-items-center py-5 mb-4"
+    >
+    ${item.alignment === 'left' ? imageCol + textCol : textCol + imageCol}
+    </div>
+`;
+};
+
+const promotionalFullWidthImageWithOverlay = (props: any) => {
+  let item = props.block?.value;
+  let overlay;
+  if (!item.overlayText) {
+    overlay = `
+  <div class="cec-cent-promo-txt-wrap top-50 end-0">
+      <div
+        class="cec-cent-promo-txt text-center bg-tog-for-chil-green col-lg-8 col-md-10 mx-auto my-md-4 mb-md-5 pb-2"
+      >
+        <img
+          class="px-4 mx-auto mt-2"
+          alt="${item.overlayImage.altText}"
+          src="${baseUrl.value}${item.overlayImage.asset.sys.uri}"
+        />
+    </div>
+  </div>`;
+  } else {
+    overlay = `
+  <div class="position-relative">
+    <div class="row g-0">
+      <img
+        class="img-fluid"
+        alt="${item.image.altText}"
+        src="${baseUrl.value}${item.image.asset.sys.uri}"
+      />
+      <div class="cec-cent-promo-txt-wrap top-50 end-0">
+        <div class="container-md">
+          <div
+            class="cec-cent-promo-txt bg-tog-for-chil-green col-lg-8 col-md-12 mx-auto my-md-4 mb-md-5 pb-2"
+          >
+            <div class="text-white text-center p-4">${item.overlayText}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  `;
+  }
+  return `
+  <div class="position-relative">
+    <div class="row g-0 mb-3">
+      <img
+        class="img-fluid"
+        alt="${item.image.altText}"
+        src="${baseUrl.value}${item.image.asset.sys.uri}"
+      />
+  ${overlay}
+    </div>
+  </div>
+  `;
+};
+const promotionalFullWidthImageWithSideOverlay = (props: any) => {
+  let item = props.block?.value;
+  return `
+  <div class="position-relative side-overlay-section">
+    <div class="row g-0">
+      <img
+        class="img-fluid"
+        alt="${item.image.altText}"
+        src="${baseUrl.value}${item.image.asset.sys.uri}"
+      />
+      <div
+        style="position: absolute"
+        class="my-side-overlay col-lg-6 bg-cec-green ms-lg-5 mt-lg-5 p-2 top-0"
+      >
+        <h2 class="text-white promo-heading display-6">${item.heading}</h2>
+        <div class="text-white">${item.content}</div>
+      </div>
+    </div>
+  </div>
+  `;
+};
+
+const processUri = (uri) => {
+  return uri.toLowerCase().replace(/%e2/g, '%E2');
+};
+
+const genericList = (props: any) => {
+  let item = props.block?.value;
+  let id = props.block.id;
+  return listItems.value[id]
+    ? `
+    <h2 class="fs-4 mt-3">${item.title}</h2>
+    <ul>
+      ${listItems.value[id].reduce((acc, e) => {
+        return e.sys.dataFormat === 'webpage'
+          ? `${acc}
+      <li><a href="${processUri(e.sys.uri)}">${e.title}</a></li>
+      `
+          : `${acc}
+      <li>
+        <a href="${processUri(e.sys.uri)}"
+          >${e.title[0].toUpperCase()}${e.title.slice(1)}
+          (${e.sys.contentTypeId.toUpperCase()},
+          ${sizeString(e.sys.properties.fileSize)})
+        </a>
+      </li>
+      `;
+      }, '')}
+    </ul>
+`
+    : '';
+};
+
 const myInlineEntry = (props: any) => {
   let data = props.block?.value;
   let id = props.block?.id;
@@ -482,6 +636,8 @@ const myInlineEntry = (props: any) => {
       return anchor(data);
     case 'carousel':
       return carousel(data, id);
+    case 'contactDetails':
+      return contactDetails(data);
     case 'container':
       return container(data);
     case 'linkEntry':
@@ -495,56 +651,6 @@ const myInlineEntry = (props: any) => {
   }
 };
 
-const makeQuestions = (data, id) => {
-  data.question.forEach((qu, j) => {
-    qu.stack = [0];
-    qu.buttons = qu.responseForQuestionComponent.reduce((acc, r, i) => {
-      return (
-        acc +
-        `<div class="col w-auto ps-0 pe-3">
-        <button
-          type="button"
-          id="${id}_${j}_${i}"
-          class="cec-button question-btns"
-        >
-          ${r.buttonText}
-        </button>
-      </div>`
-      );
-    }, '');
-    questions.value.push({ id: id, question: data.question, stack: [0] });
-  });
-
-  let buttons = data.question[0].buttons;
-  return `
-  <div class="mt-3 questions">
-    <h2>Answer the questions:</h2>
-    <fieldset class="p-1 mb-3">
-      <legend>${data.entryTitle}</legend>
-      <div class="ps-2 align-items-end question row g-0">
-        <div id="${id}_display">${data.question[0].question}</div>
-        <div class="row row-cols-auto btns-div" id="${id}_buttons">
-          ${buttons}
-        </div>
-      </div>
-      <button
-        type="button"
-        class="mt-4 btn btn-light previous"
-        id="${id}_prev"
-      >
-        Previous question
-      </button>
-      <button
-        type="button"
-        class="mt-4 btn btn-light reset"
-        id="${id}_reset"
-      >
-        Restart
-      </button>
-    </fieldset>
-  </div>`;
-};
-
 const renderer = createRenderer({
   blocks: {
     _inlineEntry: myInlineEntry,
@@ -553,6 +659,8 @@ const renderer = createRenderer({
     accordionComponent: accordionComponent,
     cecButton: cecButton,
     centralColumn: centralColumn,
+    fullWidthImageWithOverlay: fullWidthImageWithOverlay,
+    fullWidthImageWithSideOverlay: fullWidthImageWithSideOverlay,
     centralPromotionalSection: centralPromotionalSection,
     promotionalFullWidthImageWithOverlay: promotionalFullWidthImageWithOverlay,
     promotionalFullWidthImageWithSideOverlay:

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.3.6",
+  "version": "0.3.8",
   "name": "cec-nuxt-lib",
   "description": "Nuxt components and assets",
   "license": "MIT",