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

package/package.json

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

package/src/components/faq-component/config.js

@@ -0,0 +1,6 @@
+export const faqComponent = {
+  tag: 'faq-component',
+  category: 'FAQ',
+  src: '@gudhub/ssg-web-components-library/src/components/faq-component/faq-component.js',
+  serverOnly: false
+};

package/src/components/faq-component/faq-component-data.json

@@ -0,0 +1,42 @@
+{
+  "title": "faq-component",
+  "subtitle": "subtitle",
+  "items": [
+    [
+      {
+        "title": "Expandable-vertical",
+        "text": "Be certain that our website development agency will provide only first-rate web-based software and website programming. With constantly advancing progress and great competition in the web development field Quality Assurance (QA) became one of the important traits that clients seek in web development firms, and Atlasiko Inc. enables this feature. We also offer you our testing services to ensure that all developed solutions have functionalities adequate to your initial request. Be certain that our website development agency will provide only first-rate web-based software and website programming. With constantly advancing progress and great competition in the web development field Quality Assurance (QA) became one of the important traits that clients seek in web development firms, and Atlasiko Inc. enables this feature. We also offer you our testing services to ensure that all developed solutions have functionalities adequate to your initial request.",
+        "list": {
+          "tag": "ul",
+          "items": ["List item 1", "List item 2", "List item 3"]
+        }
+      },
+      {
+        "title": "Expandable-vertical",
+        "text": "Be certain that our website development agency will provide only first-rate web-based software and website programming. With constantly advancing progress and great competition in the web development field Quality Assurance (QA) became one of the important traits that clients seek in web development firms, and Atlasiko Inc. enables this feature. We also offer you our testing services to ensure that all developed solutions have functionalities adequate to your initial request. Be certain that our website development agency will provide only first-rate web-based software and website programming. With constantly advancing progress and great competition in the web development field Quality Assurance (QA) became one of the important traits that clients seek in web development firms, and Atlasiko Inc. enables this feature. We also offer you our testing services to ensure that all developed solutions have functionalities adequate to your initial request."
+      },
+      {
+        "title": "Expandable-vertical",
+        "text": "Be certain that our website development agency will provide only first-rate web-based software and website programming. With constantly advancing progress and great competition in the web development field Quality Assurance (QA) became one of the important traits that clients seek in web development firms, and Atlasiko Inc. enables this feature. We also offer you our testing services to ensure that all developed solutions have functionalities adequate to your initial request. Be certain that our website development agency will provide only first-rate web-based software and website programming. With constantly advancing progress and great competition in the web development field Quality Assurance (QA) became one of the important traits that clients seek in web development firms, and Atlasiko Inc. enables this feature. We also offer you our testing services to ensure that all developed solutions have functionalities adequate to your initial request."
+      }
+    ],
+    [
+      {
+        "title": "Expandable-vertical",
+        "text": "Be certain that our website development agency will provide only first-rate web-based software and website programming. With constantly advancing progress and great competition in the web development field Quality Assurance (QA) became one of the important traits that clients seek in web development firms, and Atlasiko Inc. enables this feature. We also offer you our testing services to ensure that all developed solutions have functionalities adequate to your initial request. Be certain that our website development agency will provide only first-rate web-based software and website programming. With constantly advancing progress and great competition in the web development field Quality Assurance (QA) became one of the important traits that clients seek in web development firms, and Atlasiko Inc. enables this feature. We also offer you our testing services to ensure that all developed solutions have functionalities adequate to your initial request.",
+        "list": {
+          "tag": "ol",
+          "items": ["List item 1", "List item 2", "List item 3"]
+        }
+      },
+      {
+        "title": "Expandable-vertical",
+        "text": "Be certain that our website development agency will provide only first-rate web-based software and website programming. With constantly advancing progress and great competition in the web development field Quality Assurance (QA) became one of the important traits that clients seek in web development firms, and Atlasiko Inc. enables this feature. We also offer you our testing services to ensure that all developed solutions have functionalities adequate to your initial request. Be certain that our website development agency will provide only first-rate web-based software and website programming. With constantly advancing progress and great competition in the web development field Quality Assurance (QA) became one of the important traits that clients seek in web development firms, and Atlasiko Inc. enables this feature. We also offer you our testing services to ensure that all developed solutions have functionalities adequate to your initial request."
+      },
+      {
+        "title": "Expandable-vertical",
+        "text": "Be certain that our website development agency will provide only first-rate web-based software and website programming. With constantly advancing progress and great competition in the web development field Quality Assurance (QA) became one of the important traits that clients seek in web development firms, and Atlasiko Inc. enables this feature. We also offer you our testing services to ensure that all developed solutions have functionalities adequate to your initial request. Be certain that our website development agency will provide only first-rate web-based software and website programming. With constantly advancing progress and great competition in the web development field Quality Assurance (QA) became one of the important traits that clients seek in web development firms, and Atlasiko Inc. enables this feature. We also offer you our testing services to ensure that all developed solutions have functionalities adequate to your initial request."
+      }
+    ]
+  ]
+}

package/src/components/faq-component/faq-component.html

@@ -0,0 +1,53 @@
+<section itemscope="" itemtype="https://schema.org/FAQPage">
+    <div class="container">
+        <div class="top-wrapper">
+            ${json.title ? `
+                <h2 gh-id="${ghId}.title"> TITLE </h2>
+            ` : ''}
+            ${json.subtitle ? `
+                <p class="subtitle" gh-id="${ghId}.subtitle"> SUBTITLE </p>
+            ` : ''}
+        </div>
+        <div class="flex-wrapper">
+            ${json.items.reduce((acc, itemsColumn, indexColumn) => acc + `
+                <div class="accordion-column">
+                    ${itemsColumn.reduce((acc, item, index) => acc + `
+                        <div class="primary-block" itemscope="" itemprop="mainEntity" itemtype="https://schema.org/Question">
+                            <div class="visible-content">
+                                ${item.title ? `<h3 class="title" gh-id="${ghId}.items.${indexColumn}.${index}.title" itemprop="name"></h3>` : ''}
+                                <div class="icon">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17" fill="none"><path d="M1 8.33333L8.5 14.8148L16 8.33333M8.5 15L8.5 0" stroke="none" stroke-width="2"></path></svg>
+                                </div>
+                            </div>
+                            <div class="expandable-wrapper" itemscope="" itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
+                                <div class="content" itemprop="text">
+                                    ${item.text ? `<p class="text" gh-id="${ghId}.items.${indexColumn}.${index}.text"></p>` : ''}
+                                    ${item.list ? `
+                                        <div class="list">
+                                            ${(() => {
+                                                let tag = 'ul';
+                                                if (item.list.tag === 'ul' || item.list.tag === 'ol') {
+                                                    tag = item.list.tag;
+                                                }
+                                                return `
+                                                    <${tag}>
+                                                        ${item.list.items.reduce((acc, listItem, itemIndex) => acc + `
+                                                            <li gh-id="${ghId}.items.${indexColumn}.${index}.list.items.${itemIndex}"></li>
+                                                        `, '')}
+                                                    </${tag}>
+                                                `
+                                            })()}
+                                        </div>
+                                    ` : ''}
+                                    ${item.button ? `
+                                        <button-component class="btn" data-link="${item.button.link}" data-popup-id="${item.button.popupId}" data-placement="${item.button.placement}">${item.button.text}</button-component>    
+                                    ` : ''}
+                                </div>
+                            </div>
+                        </div>
+                    `, '')}
+                </div>
+            `, '')}
+        </div>
+    </div>
+</section>

package/src/components/faq-component/faq-component.js

@@ -0,0 +1,83 @@
+import html from './faq-component.html';
+import './faq-component.scss';
+import jsonTemplate from './faq-component-data.json';
+
+class FaqComponent extends GHComponent {
+    constructor() {
+        super();
+        super.setDefaultData(jsonTemplate);
+        this.openedElement = null;
+    }
+    
+    async onServerRender() {
+        this.ghId = this.getAttribute('data-gh-id') || null;
+
+        const getCurrentChapter = await window?.getCurrentChapter();
+        this.chapter = getCurrentChapter ? getCurrentChapter : 'pages';
+
+        this.json = await super.getGhData(this.ghId, this.chapter);
+
+        if (this.ghId) {
+            await super.render(html);
+        }
+    }
+    
+    onClientReady() {
+        this.attachEventListeners();
+    }
+    
+    getBindedCallback(element) {
+        const expandableFunction = (event) => {
+            event.preventDefault();
+
+            const checkIsTargetInteractive = (target) => {
+                const preventedTagsForInteractive = ['button', 'a'];
+                const checkInteractiveTagNames = (target) => preventedTagsForInteractive.includes(target.tagName.toLowerCase());
+                const checkClassNames = (target) => target.classList.contains('btn');
+    
+                const checkers = [checkInteractiveTagNames, checkClassNames];
+                const result = checkers.some((checker) => checker(target));
+    
+                return result;
+            }
+    
+            if (checkIsTargetInteractive(event.target)) {
+                return;
+            }
+    
+            const isOpening = element.classList.toggle('expand');
+
+            const toggleOverflow = (element, bool) => {
+                const action = bool ? 'add' : 'remove';
+                element.classList[action]('overflow');
+            };
+            if (isOpening) {
+                if (this.openedElement && this.openedElement !== element) {
+                    this.openedElement.classList.remove('expand');
+                    toggleOverflow(this.openedElement, false);
+                }
+    
+                this.openedElement = element;
+    
+                setTimeout(() => toggleOverflow(element, true), 0);
+            } else {
+                toggleOverflow(element, false);
+                if (this.openedElement === element) {
+                    this.openedElement = null;
+                }
+            }
+        }
+    
+        return expandableFunction;
+    }
+    
+    attachEventListeners() {
+        const items = this.querySelectorAll('.primary-block');
+        for (const item of items) {
+            const boundCallback = this.getBindedCallback(item);
+            item.addEventListener('click', boundCallback);
+        }
+    }
+}
+
+window.customElements.define('faq-component', FaqComponent);

package/src/components/faq-component/faq-component.md

@@ -0,0 +1,48 @@
+# Attributes:
+
+None
+
+# Component data-object:
+
+("?" means "unnecessary")
+
+```json
+{
+  "title?": "string",
+  "subtitle?": "string",
+  "items": [
+    [
+      {
+        "title": "string",
+        "text": "string",
+        "button?": {
+          "link": "/link/",
+          "popupId": "form",
+          "placement": "faq-component",
+          "text": "Button Text"
+        },
+        "list?": {
+          "tag?": "string", // "ol" or "ul"
+          "items": ["string", "string", "string"]
+        }
+      }
+    ],
+    [
+      {
+        "title": "string",
+        "text": "string",
+        "button?": {
+          "link": "/link/",
+          "popupId": "form",
+          "placement": "faq-component",
+          "text": "Button Text"
+        },
+        "list?": {
+          "tag?": "string", // "ol" or "ul"
+          "items": ["string", "string", "string"]
+        }
+      }
+    ]
+  ]
+}
+```

package/src/components/faq-component/faq-component.scss

@@ -0,0 +1,123 @@
+faq-component {
+    --hover-transition-duration: .2s;
+    --expand-transition-duration: .5s;
+    --gap: 20px;
+    background: var(--bg-color);
+    .subtitle {
+        max-width: 940px;
+        margin-left: auto;
+        margin-right: auto;
+        text-align: center;
+    }
+    .flex-wrapper {
+        display: flex;
+        gap: var(--gap);
+    }
+    .accordion-column {
+        width: calc(50% - (var(--gap) / 2));
+        & > *:not(:last-child) {
+            margin-bottom: 20px;
+        }
+    }
+    .primary-block {
+        width: 100%;
+        background: var(--block-primary-bg-color);
+        border-radius: var(--block-primary-border-radius);
+        box-shadow: var(--block-primary-box-shadow);
+        cursor: pointer;
+        transition: all var(--hover-transition-duration) ease;
+        &:hover, &.expand {
+            background-color: var(--block-primary-bg-hover-color);
+        }
+        .visible-content {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 16px;
+            .title {
+                margin-bottom: 0;
+                transition: color var(--hover-transition-duration) ease;
+            }
+            .icon {
+                width: 24px;
+                height: 24px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                svg {
+                    width: 16px;
+                    height: auto;
+                    transition: transform var(--hover-transition-duration) linear;
+                    path {
+                        stroke: var(--h-color);
+                        transition: stroke var(--hover-transition-duration) ease;
+                    }
+                }
+            }
+        }
+        .expandable-wrapper {
+            max-height: 0;
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+            overflow: hidden;
+            transition: max-height var(--expand-transition-duration) ease;
+            .content {
+                padding: 20px 15px;
+                .text, li {
+                    font-size: var(--text-font-size);
+                    font-weight: var(--text-font-weight);
+                    color: var(--block-primary-text-color);
+                    line-height: 140%;
+                    letter-spacing: 0.01em;
+                    text-align: inherit;
+                }
+                ul {
+                    padding-top: 10px;
+                    padding-left: 18px;
+                    list-style: disc;
+                }
+                ol {
+                    padding-top: 10px;
+                    padding-left: 18px;
+                    list-style: decimal;
+                }
+            }
+        }
+        &.expand {
+            .expandable-wrapper {
+                max-height: 200px;
+            }
+            .icon {
+                svg {
+                    transform: rotate(180deg);
+                }
+            }
+        }
+        &.overflow {
+            .expandable-wrapper {
+                overflow: auto;
+            }
+        }
+        &:hover, &.expand {
+            .title {
+                color: var(--block-primary-accent-color);
+            }
+            .icon {
+                svg {
+                    path {
+                        stroke: var(--block-primary-accent-color);
+                    }
+                }
+            }
+        }
+    }
+    @media screen and (max-width: 800px) {
+        .flex-wrapper {
+            flex-direction: column;
+        }
+        .accordion-column {
+            width: 100%;
+        }
+    }
+}

package/src/components/info-table/config.js

@@ -0,0 +1,6 @@
+export const infoTable = {
+  tag: 'info-table',
+  category: 'Table',
+  src: '@gudhub/ssg-web-components-library/src/components/info-table/info-table.js',
+  serverOnly: false
+};

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

@@ -0,0 +1,21 @@
+<section class="info-table">
+    <div class="container">
+        <div class="top-wrapper">
+            ${json.title ? `<h2 class="title" gh-id="${ghId}.title"></h2>` : ''}
+            ${json.subtitle ? `<p class="subtitle" gh-id="${ghId}.subtitle"></p>` : ''}
+        </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>
+        </div>
+    </div>
+</section>

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

@@ -0,0 +1,23 @@
+import html from './info-table.html';
+import './info-table.scss';
+import jsonTemplate from './info-table.json';
+
+class InfoTable extends window.GHComponent {
+    constructor() {
+        super();
+        super.setDefaultData(jsonTemplate);
+    }
+
+    async onServerRender() {
+        this.ghId = this.getAttribute('data-gh-id') || null;
+        this.json = await super.getGhData(this.ghId, 'areas');
+
+        console.log("AAAAAAAAAAAAAAAAAAAAAAAA", this.json);
+
+        if (this.json) {
+            super.render(html);
+        }
+    }
+}
+
+window.customElements.define('info-table', InfoTable);

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

@@ -0,0 +1,22 @@
+{
+  "title": "Lorem Ipsum Pricing",
+  "subtitle": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  "items": [
+    {
+      "title": "Basic Plan",
+      "price": "$19 / month"
+    },
+    {
+      "title": "Standard Plan",
+      "price": "$49 / month"
+    },
+    {
+      "title": "Premium Plan",
+      "price": "$99 / month"
+    },
+    {
+      "title": "Enterprise Plan",
+      "price": "Custom pricing"
+    }
+  ]
+}

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

@@ -0,0 +1,40 @@
+# Component data-object:
+
+("?": means "unnecessary")
+
+```json
+{
+    "title?": "Lorem Ipsum Pricing",
+    "subtitle?": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    "items": [
+        {
+            "title": "Basic Plan",
+            "price": "$19 / month"
+        },
+        {
+            "title": "Standard Plan",
+            "price": "$49 / month"
+        },
+        {
+            "title": "Premium Plan",
+            "price": "$99 / month"
+        },
+        {
+            "title": "Enterprise Plan",
+            "price": "Custom pricing"
+        }
+    ]
+}
+```
+
+## Fields description
+
+`title` - component title. If field does not exist, title will not be rendered.
+
+`subtitle` - component subtitle. If field does not exist, subtitle will not be rendered.
+
+`items` - array of table items.
+
+`items.title` - item title.
+
+`items.price` - item price/value.

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

@@ -0,0 +1,75 @@
+info-table {
+    section { 
+        padding: 0 375px 80px 375px;
+    }
+
+    .top-wrapper {
+        display: flex;
+        align-items: center;
+
+        h2 {
+            width: 50%;
+            font-size: 18px;
+            font-weight: 700;
+            color: black;
+            line-height: 120%;
+        }
+
+        p {
+            width: 50%;
+            font-size: 18px;
+            font-weight: 700 !important;
+            color: black !important;
+            line-height: 120%;
+            text-align: center;
+        }
+
+        .title {
+            margin-bottom: 30px;
+        }
+    }
+    .block {
+        margin-bottom: 25px;
+        border: 1px solid #C8C8C8;
+    }
+    .item {
+        display: flex;
+
+        &:nth-child(even) {
+            background-color: #F6F6F6;
+        }
+        &:not(:last-child) {
+            border-bottom: 1px solid #C8C8C8;
+        }
+
+        &-title,
+        &-price {
+            line-height: 48px;
+            text-align: center;
+            width: 50%;
+            height: 48px;
+        }
+        &-price {
+            border-left: 1px solid #C8C8C8;
+        }
+    }
+
+    @media (max-width: 1900px) {
+        section {
+            padding-left: calc(100vw / 15);
+            padding-right: calc(100vw / 15);
+        }
+    }
+
+    @media (max-width: 1000px) {
+        section {
+            padding-bottom: 70px;
+        }
+    }
+
+    @media (max-width: 700px) {
+        section {
+            padding-bottom: 40px;
+        } 
+    }
+}

package/src/config.js

@@ -66,6 +66,8 @@ export { PageBannerImageAndMenu } from './components/page-banner-image-and-menu/
 export { GoogleAnalytics } from './components/google-analytics/config.js';
 export { GoogleTag } from './components/google-tag/config.js';
 export { cookiesPopup } from './components/cookies-popup/config.js';
+export { infoTable } from './components/info-table/config.js';
+export { faqComponent } from './components/faq-component/config.js';
 
 // export { liqPayComponent } from './components/liqpay-component/config.js';
 // export { htmlTextFromEditorJs } from './components/html-text-from-editor-js/config.js';