@gudhub/ssg-web-components-library 1.0.115 → 1.0.116

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gudhub/ssg-web-components-library",
-  "version": "1.0.115",
+  "version": "1.0.116",
   "description": "",
   "main": "index.js",
   "type": "module",

package/src/components/get-in-touch-form/get-in-touch-form.html

@@ -10,6 +10,9 @@
             <button type="submit" class="btn">${buttonText ? buttonText : 'Get in touch'}</button>
             <div class="loader"></div>
         </div>
+        <div class="recaptcha-notice">
+            This site is protected by reCAPTCHA.
+        </div>
     </form>
     <div class="overflow success">
         <div class="icon_wrapper">

package/src/components/get-in-touch-form/get-in-touch-form.js

@@ -5,6 +5,7 @@ import defaultConfigs from './get-in-touch-form-data.json';
 import { checkInputsValidations } from './inputsValidation.js';
 
 let recaptchaPromise = null;
+let recaptchaBadgeObserver = null;
 
 function loadRecaptcha(siteKey) {
     if (!siteKey) {
@@ -35,16 +36,41 @@ function loadRecaptcha(siteKey) {
     return recaptchaPromise;
 }
 
+function hideRecaptchaBadge() {
+    const badge = document.querySelector('.grecaptcha-badge');
+
+    if (!badge) return;
+
+    badge.style.setProperty('visibility', 'hidden', 'important');
+    badge.style.setProperty('opacity', '0', 'important');
+    badge.style.setProperty('pointer-events', 'none', 'important');
+}
+
+function observeRecaptchaBadge() {
+    hideRecaptchaBadge();
+
+    if (recaptchaBadgeObserver) return;
+
+    recaptchaBadgeObserver = new MutationObserver(() => {
+        hideRecaptchaBadge();
+    });
+
+    recaptchaBadgeObserver.observe(document.body, {
+        childList: true,
+        subtree: true
+    });
+}
+
 class GetInTouchForm extends GHComponent {
     constructor() {
         super();
 
-        this.formId = this.getAttribute("data-form-id");
+        this.formId = this.getAttribute('data-form-id');
         this.defaultConfigs = defaultConfigs;
 
         this.generateInput = this.generateInput;
         this.isFormSubmitted = false;
-        
+
         this.placement = 'main';
         this.config = window.getConfig()?.componentsConfigs?.formConfig || window.getConfig()?.formConfig;
 
@@ -66,7 +92,11 @@ class GetInTouchForm extends GHComponent {
             this.attachEventListeners();
 
             if (this.recaptcha_site_key) {
-                loadRecaptcha(this.recaptcha_site_key).catch(console.error);
+                loadRecaptcha(this.recaptcha_site_key)
+                    .then(() => {
+                        observeRecaptchaBadge();
+                    })
+                    .catch(console.error);
             }
         }
     }
@@ -76,15 +106,26 @@ class GetInTouchForm extends GHComponent {
         super.render(html);
         this.attachEventListeners();
 
-        loadRecaptcha(this.recaptcha_site_key).catch(console.error);
+        if (this.recaptcha_site_key) {
+            loadRecaptcha(this.recaptcha_site_key)
+                .then(() => {
+                    observeRecaptchaBadge();
+                })
+                .catch(console.error);
+        }
     }
 
     attachEventListeners() {
-        this.getElementsByTagName('form')[0]
-            .addEventListener('submit', (e) => this.handleSubmit(e));
+        const form = this.getElementsByTagName('form')[0];
+        const restartButton = this.getElementsByClassName('restart_button')[0];
 
-        this.getElementsByClassName('restart_button')[0]
-            .addEventListener('click', () => this.hideFail());
+        if (form) {
+            form.addEventListener('submit', (e) => this.handleSubmit(e));
+        }
+
+        if (restartButton) {
+            restartButton.addEventListener('click', () => this.hideFail());
+        }
     }
 
     onParentPopupClose() {
@@ -99,7 +140,7 @@ class GetInTouchForm extends GHComponent {
     initConfig(formConfigs) {
         try {
             this.config = formConfigs.find(({ id }) => id === this.formId);
-            if (!this.config) throw new Error("Config not found");
+            if (!this.config) throw new Error('Config not found');
         } catch {
             const defaultId = this.isInPopup ? 'default popup' : 'default';
             this.config = defaultConfigs.find(({ id }) => id === defaultId);
@@ -107,7 +148,7 @@ class GetInTouchForm extends GHComponent {
 
         this.titleName = this.getAttribute('data-form-title') || this.config.title;
         this.subtitleName = this.getAttribute('data-form-subtitle') || this.config.subtitle;
-        this.placement = this.getAttribute('data-form-placement') || "main";
+        this.placement = this.getAttribute('data-form-placement') || 'main';
         this.buttonText = this.getAttribute('data-form-button-text') || this.config.button_text;
     }
 
@@ -121,6 +162,8 @@ class GetInTouchForm extends GHComponent {
 
         return new Promise((resolve, reject) => {
             grecaptcha.ready(() => {
+                hideRecaptchaBadge();
+
                 grecaptcha.execute(this.recaptcha_site_key, { action })
                     .then(resolve)
                     .catch(reject);
@@ -146,7 +189,6 @@ class GetInTouchForm extends GHComponent {
                 }
 
                 this.handleSuccessFormValidation(form, token);
-
             } catch (error) {
                 console.error(error);
                 this.showFail();
@@ -179,7 +221,7 @@ class GetInTouchForm extends GHComponent {
     inputsValidation = async (form) => {
         const inputs = Array.from(form.querySelectorAll('input'));
         return checkInputsValidations(inputs);
-    }
+    };
 
     verifyRecaptcha = async (recaptchaToken) => {
         const response = await fetch('/api/verify-recaptcha', {
@@ -200,7 +242,7 @@ class GetInTouchForm extends GHComponent {
         }
 
         return data;
-    }
+    };
 
     createDataObject(form, placement, recaptchaToken) {
         const inputs = {};
@@ -230,13 +272,24 @@ class GetInTouchForm extends GHComponent {
 
     addLoader() {
         this.classList.add('loading');
-        this.querySelector('button[type="submit"]').disabled = true;
+
+        const btn = this.querySelector('button[type="submit"]');
+
+        if (btn) {
+            btn.disabled = true;
+        }
     }
 
     removeLoader() {
         this.classList.remove('loading');
+
         const btn = this.querySelector('button[type="submit"]');
-        setTimeout(() => btn.disabled = false, 500);
+
+        if (btn) {
+            setTimeout(() => {
+                btn.disabled = false;
+            }, 500);
+        }
     }
 
     showSuccess({ email, phone }) {
@@ -278,6 +331,9 @@ class GetInTouchForm extends GHComponent {
 
     hideFail() {
         const el = this.querySelector('.overflow.fail');
+
+        if (!el) return;
+
         el.style.opacity = 0;
 
         setTimeout(() => {
@@ -315,4 +371,4 @@ class GetInTouchForm extends GHComponent {
 
 if (!customElements.get('get-in-touch-form')) {
     customElements.define('get-in-touch-form', GetInTouchForm);
-}
+}

package/src/components/get-in-touch-form/get-in-touch-form.scss

@@ -271,6 +271,12 @@ get-in-touch-form {
             }
         }
     }
+    .recaptcha-notice {
+        margin-top: 10px;
+        font-size: 12px;
+        line-height: 1.4;
+        opacity: 0.7;
+    }
     &[data-in-popup] {
         .get-in-touch-form {
             padding-top: 0;
@@ -368,4 +374,10 @@ popup-container[data-position="bottom-right"] {
             }
         }
     }
+}
+
+body .grecaptcha-badge {
+    visibility: hidden !important;
+    opacity: 0 !important;
+    pointer-events: none !important;
 }

package/src/components/info-table/info-table.html

@@ -6,16 +6,74 @@
         </div>
 
         <div class="blocks-wrapper">
-            <div class="block" gh-array="${ghId}.items" itemscope="" itemtype="https://schema.org/Table">
-                ${json.items.reduce((acc, item, index) => {
-                    return acc + `
-                        <div class="item" gh-item itemprop="about" itemscope="" itemtype="https://schema.org/Thing">
-                            <p class="item-title" gh-id="${ghId}.items.${index}.title" itemprop="name"></p>
-                            <p class="item-price" gh-id="${ghId}.items.${index}.price" itemprop="description"></p>
-                        </div>
-                    `
-                }, '')}
-            </div>
+            <table
+                class="block"
+                itemscope
+                itemtype="${json.schema?.tableType || 'https://schema.org/Table'}"
+            >
+                ${json.headers?.length ? `
+                    <thead>
+                        <tr class="table-head" gh-array="${ghId}.headers">
+                            ${json.headers.reduce((acc, item, index) => {
+                                return acc + `
+                                    <th gh-item>
+                                        <span gh-id="${ghId}.headers.${index}"></span>
+                                    </th>
+                                `
+                            }, '')}
+                        </tr>
+                    </thead>
+                ` : ''}
+
+                <tbody gh-array="${ghId}.items">
+                    ${json.items.reduce((acc, item, index) => {
+                        return acc + `
+                            <tr
+                                class="item"
+                                gh-item
+                                itemprop="${json.schema?.rowProp || 'about'}"
+                                itemscope
+                                itemtype="${json.schema?.rowType || 'https://schema.org/Thing'}"
+                            >
+                                <td>
+                                    <p
+                                        class="item-title"
+                                        gh-id="${ghId}.items.${index}.title"
+                                        itemprop="${json.schema?.titleProp || 'name'}"
+                                    ></p>
+                                </td>
+
+                                ${json.schema?.valueType === 'offer' ? `
+                                    <td
+                                        itemprop="${json.schema?.offerProp || 'offers'}"
+                                        itemscope
+                                        itemtype="${json.schema?.offerType || 'https://schema.org/Offer'}"
+                                    >
+                                        <p class="item-price">
+                                            $<span
+                                                gh-id="${ghId}.items.${index}.price"
+                                                itemprop="${json.schema?.priceProp || 'price'}"
+                                            ></span>
+                                            <span
+                                                gh-id="${ghId}.items.${index}.currency"
+                                                itemprop="${json.schema?.currencyProp || 'priceCurrency'}"
+                                            ></span>
+                                        </p>
+                                    </td>
+                                ` : `
+                                    <td>
+                                        <p
+                                            class="item-price"
+                                            gh-id="${ghId}.items.${index}.price"
+                                            itemprop="${json.schema?.valueProp || 'description'}"
+                                        ></p>
+                                    </td>
+                                `}
+                            </tr>
+                        `
+                    }, '')}
+                </tbody>
+            </table>
         </div>
     </div>
 </section>

package/src/components/info-table/info-table.json

@@ -1,22 +1,41 @@
 {
-  "title": "Lorem Ipsum Pricing",
-  "subtitle": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-  "items": [
-    {
-      "title": "Basic Plan",
-      "price": "$19 / month"
+    "title": "Lorem Ipsum Pricing",
+    "subtitle": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    "schema": {
+        "tableType": "https://schema.org/Table",
+        "rowProp": "about",
+        "rowType": "https://schema.org/Service",
+        "titleProp": "name",
+        "valueType": "offer",
+        "offerProp": "offers",
+        "offerType": "https://schema.org/Offer",
+        "priceProp": "price",
+        "currencyProp": "priceCurrency"
     },
-    {
-      "title": "Standard Plan",
-      "price": "$49 / month"
-    },
-    {
-      "title": "Premium Plan",
-      "price": "$99 / month"
-    },
-    {
-      "title": "Enterprise Plan",
-      "price": "Custom pricing"
-    }
-  ]
-}
+    "headers": [
+        "Service Name",
+        "Price Starts at"
+    ],
+    "items": [
+        {
+            "title": "Lorem Ipsum Service",
+            "price": "120",
+            "currency": "USD"
+        },
+        {
+            "title": "Dolor Sit Service",
+            "price": "240",
+            "currency": "USD"
+        },
+        {
+            "title": "Consectetur Service",
+            "price": "360",
+            "currency": "USD"
+        },
+        {
+            "title": "Adipiscing Service",
+            "price": "480",
+            "currency": "USD"
+        }
+    ]
+}

package/src/components/info-table/info-table.readme.md

@@ -1,40 +1,176 @@
-# Component data-object:
+Ось оновлений README під твій новий динамічний компонент з `headers` та `schema`.
 
-("?": means "unnecessary")
+````md
+# Component data-object
+
+`("?": means "unnecessary")`
 
 ```json
 {
-    "title?": "Lorem Ipsum Pricing",
+    "title?": "Lorem Ipsum Overview",
     "subtitle?": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    "schema?": {
+        "tableType": "https://schema.org/Table",
+        "rowProp": "about",
+        "rowType": "https://schema.org/Thing",
+        "titleProp": "name",
+        "valueProp": "description"
+    },
+    "headers?": [
+        "Feature Name",
+        "Description"
+    ],
     "items": [
         {
-            "title": "Basic Plan",
-            "price": "$19 / month"
+            "title": "Lorem Ipsum Feature",
+            "price": "Lorem ipsum dolor sit amet"
         },
         {
-            "title": "Standard Plan",
-            "price": "$49 / month"
+            "title": "Dolor Sit Amet",
+            "price": "Consectetur adipiscing elit"
         },
         {
-            "title": "Premium Plan",
-            "price": "$99 / month"
+            "title": "Sed Do Eiusmod",
+            "price": "Tempor incididunt ut labore"
         },
         {
-            "title": "Enterprise Plan",
-            "price": "Custom pricing"
+            "title": "Ut Enim Ad Minim",
+            "price": "Veniam quis nostrud exercitation"
         }
     ]
 }
-```
+````
 
 ## Fields description
 
-`title` - component title. If field does not exist, title will not be rendered.
+`title` - component title. If the field does not exist, the title will not be rendered.
+
+`subtitle` - component subtitle. If the field does not exist, the subtitle will not be rendered.
+
+`schema` - optional object for configuring microdata markup.
+
+`schema.tableType` - Schema.org type for the table. Default value is `https://schema.org/Table`.
+
+`schema.rowProp` - item property used for each table row. Default value is `about`.
+
+`schema.rowType` - Schema.org type for each table row. Default value is `https://schema.org/Thing`.
+
+`schema.titleProp` - item property for the first column value. Default value is `name`.
+
+`schema.valueProp` - item property for the second column value. Default value is `description`.
+
+`headers` - optional array of table header labels. If the field does not exist or is empty, the table header will not be rendered.
+
+`items` - array of table rows.
+
+`items.title` - item title. Usually rendered in the first table column.
+
+`items.price` - item price/value/description. Usually rendered in the second table column.
+
+---
+
+# Pricing table example
+
+Use this structure when the table contains services and prices.
+
+```json
+{
+    "title": "3D Rendering Services Pricing",
+    "subtitle": "Explore starting prices for different 3D rendering services.",
+    "schema": {
+        "tableType": "https://schema.org/Table",
+        "rowProp": "about",
+        "rowType": "https://schema.org/Service",
+        "titleProp": "name",
+        "valueType": "offer",
+        "offerProp": "offers",
+        "offerType": "https://schema.org/Offer",
+        "priceProp": "price",
+        "currencyProp": "priceCurrency"
+    },
+    "headers": [
+        "Service Name",
+        "Price Starts at"
+    ],
+    "items": [
+        {
+            "title": "Interior 3D Rendering",
+            "price": "547",
+            "currency": "CAD"
+        },
+        {
+            "title": "Exterior 3D Rendering",
+            "price": "683",
+            "currency": "CAD"
+        },
+        {
+            "title": "Commercial Interior 3D Rendering",
+            "price": "820",
+            "currency": "CAD"
+        },
+        {
+            "title": "Commercial Exterior 3D Rendering",
+            "price": "957",
+            "currency": "CAD"
+        }
+    ]
+}
+```
+
+## Additional fields for pricing table
+
+`schema.valueType` - defines how the second column should be rendered. If the value is `offer`, the component renders the second column as a Schema.org `Offer`.
+
+`schema.offerProp` - item property for the offer object. Default value is `offers`.
+
+`schema.offerType` - Schema.org type for the offer. Default value is `https://schema.org/Offer`.
+
+`schema.priceProp` - item property for the price value. Default value is `price`.
+
+`schema.currencyProp` - item property for the currency value. Default value is `priceCurrency`.
+
+`items.currency` - price currency. Required when `schema.valueType` is set to `offer`.
+
+---
+
+# Explanation
+
+The component supports two table formats.
 
-`subtitle` - component subtitle. If field does not exist, subtitle will not be rendered.
+The first format is a regular informational table. In this case, each row is marked as a Schema.org `Thing`, the first column is marked as `name`, and the second column is marked as `description`.
 
-`items` - array of table items.
+Example output structure:
 
-`items.title` - item title.
+```text
+Table
+ └── about: Thing
+      ├── name: Lorem Ipsum Feature
+      └── description: Lorem ipsum dolor sit amet
+```
+
+The second format is a pricing table. In this case, each row is marked as a Schema.org `Service`, and the second column is rendered as an `Offer` with separate `price` and `priceCurrency` values.
+
+Example output structure:
+
+```text
+Table
+ └── about: Service
+      ├── name: Interior 3D Rendering
+      └── offers: Offer
+           ├── price: 547
+           └── priceCurrency: CAD
+```
+
+For regular text tables, use:
+
+```json
+"valueProp": "description"
+```
+
+For pricing tables, use:
+
+```json
+"valueType": "offer"
+```
 
-`items.price` - item price/value.
+This allows the same component to be reused for simple informational tables and for service pricing tables with more correct microdata markup.

package/src/components/info-table/info-table.scss

@@ -4,53 +4,90 @@ info-table {
     }
 
     .top-wrapper {
-        display: flex;
-        align-items: center;
+        margin-bottom: 30px;
 
-        h2 {
-            width: 50%;
-            font-size: 18px;
+        .title {
+            color: #05183A;
             font-weight: 700;
-            color: black;
-            line-height: 120%;
+            font-size: 30px;
+            line-height: 136%;
+            letter-spacing: 0%;
+            text-align: center;
+            text-transform: uppercase;
+            margin-bottom: 12px;
         }
 
-        p {
-            width: 50%;
+        .subtitle {
+            font-weight: 400;
             font-size: 18px;
-            font-weight: 700 !important;
-            color: black !important;
-            line-height: 120%;
+            line-height: 136%;
+            letter-spacing: 0%;
+            text-align: justify;
+            color: #63636F;
             text-align: center;
         }
-
-        .title {
-            margin-bottom: 30px;
-        }
     }
+
     .block {
+        width: 100%;
         margin-bottom: 25px;
         border: 1px solid #C8C8C8;
+        border-collapse: collapse;
+        table-layout: fixed;
+    }
+
+    .table-head {
+        th {
+            width: 50%;
+            height: 52px;
+            padding: 0 15px;
+            border-bottom: 1px solid #C8C8C8;
+            vertical-align: middle;
+            text-align: center;
+            font-size: 18px;
+            font-weight: 700;
+            color: black;
+            line-height: 120%;
+        }
+
+        th:not(:last-child) {
+            border-right: 1px solid #C8C8C8;
+        }
     }
-    .item {
-        display: flex;
 
+    .item {
         &:nth-child(even) {
             background-color: #F6F6F6;
         }
-        &:not(:last-child) {
+
+        td {
+            width: 50%;
+            height: 48px;
+            padding: 0 15px;
             border-bottom: 1px solid #C8C8C8;
+            vertical-align: middle;
+            text-align: center;
+        }
+
+        td:not(:last-child) {
+            border-right: 1px solid #C8C8C8;
+        }
+
+        &:last-child {
+            td {
+                border-bottom: none;
+            }
         }
 
         &-title,
         &-price {
-            line-height: 48px;
+            width: 100%;
+            margin: 0;
+            font-size: 16px;
+            font-weight: 400;
+            color: black;
+            line-height: 140%;
             text-align: center;
-            width: 50%;
-            height: 48px;
-        }
-        &-price {
-            border-left: 1px solid #C8C8C8;
         }
     }
 
@@ -70,6 +107,38 @@ info-table {
     @media (max-width: 700px) {
         section {
             padding-bottom: 40px;
-        } 
+        }
+
+        .top-wrapper {
+            margin-bottom: 24px;
+
+            .title {
+                font-size: 26px;
+            }
+
+            .subtitle {
+                font-size: 16px;
+            }
+        }
+
+        .table-head {
+            th {
+                height: 48px;
+                padding: 0 10px;
+                font-size: 16px;
+            }
+        }
+
+        .item {
+            td {
+                height: 46px;
+                padding: 0 10px;
+            }
+
+            &-title,
+            &-price {
+                font-size: 15px;
+            }
+        }
     }
-}
+}