@gudhub/ssg-web-components-library 1.0.0

package/src/components/breadcrumbs/breadcrumbs.scss

@@ -0,0 +1,118 @@
+breadcrumbs-component {
+    .breadcrumbs_list {
+        list-style: none;
+        display: flex;
+        align-items: center;
+        margin-bottom: 30px;
+        height: 16px;
+        li {
+            margin-right: 31px;
+            position: relative;
+            font-size: 16px;
+            line-height: 100%;
+            font-weight: 300;
+            height: 100%;
+            white-space: nowrap;
+            a {
+                display: flex;
+                align-items: center;
+                color: var(--breadcrumbsColor);
+                position: relative;
+                &::after {
+                    content: '';
+                    position: absolute;
+                    bottom: -2px;
+                    left: 0;
+                    transition: all .2s ease;
+                    height: 1px;
+                    width: 0;
+                    background: var(--breadcrumbsColor);
+                }
+                &:hover::after {
+                    width: 100%;
+                }
+            }
+            &:last-child {
+                color: var(--breadcrumbsLastColor);
+                margin-right: 0;
+                max-width: 80%;
+                overflow: hidden;
+                font-weight: 500;
+                text-overflow: ellipsis;
+                &::after {
+                    content: none;
+                }
+            }
+            &::after {
+                content: '';
+                position: absolute;
+                top: calc(50% - 5px);
+                right: -17px;
+                width: 6px;
+                height: 6px;
+                background-repeat: no-repeat;
+                border-right: 1px solid;
+                border-bottom: 1px solid;
+                border-color: var(--breadcrumbsColor);
+                transform: rotate(-45deg);
+            }
+        }
+    }
+}
+article breadcrumbs-component .breadcrumbs_list {
+    li {
+        &:last-child {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            max-width: 400px;
+        }
+    }
+}
+
+@media screen and (max-width: 1300px) {
+    breadcrumbs-component {
+        padding-top: 30px;
+        display: block;
+    }
+    .service_banner_left breadcrumbs-component + h1 {
+        margin-top: 0;
+    }
+}
+@media screen and (max-width: 1080px) {
+    article breadcrumbs-component .breadcrumbs_list li:last-child {
+        max-width: 280px;
+    }
+}
+@media screen and (max-width: 990px) {
+    article breadcrumbs-component .breadcrumbs_list li:last-child {
+        max-width: 100%;
+    }
+}
+@media screen and (max-width: 640px) {
+    breadcrumbs-component {
+        padding-top: 15px;
+        .breadcrumbs_list {
+            margin-bottom: 15px;
+            li {
+                margin-right: 21px;
+                font-size: 14px;
+                &::after {
+                    right: -11px;
+                }
+            }
+        }
+    }
+}
+@media screen and (max-width: 420px) {
+    breadcrumbs-component {
+        .breadcrumbs_list {
+            li {
+                font-size: 12px;
+                &::after {
+                    top: calc(50% - 6px);
+                    right: -13px;
+                }
+            }
+        }
+    }
+}

package/src/components/breadcrumbs/config.js

@@ -0,0 +1,5 @@
+export const breadcrumbsComponent = {
+  tag: 'breadcrumbs-component',
+  src: '@gudhub/ssg-web-component-library/src/components/breadcrumbs/breadcrumbs-component.js',
+  serverOnly: true
+}

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

@@ -0,0 +1,3 @@
+<${tag} class="${className}">
+    ${text}
+</${tag}>

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

@@ -0,0 +1,39 @@
+import html from './button-component.html';
+import './button-component.scss';
+
+class ButtonComponent extends GHComponent {
+
+    constructor() {
+        super();
+        this.popupId = this.hasAttribute('data-popup-id') ? this.getAttribute('data-popup-id') : null;
+        this.placement = this.hasAttribute('data-placement') ? this.getAttribute('data-placement') : 'no-placement-attribute';
+        this.href = this.hasAttribute('href') ? this.getAttribute('href') : null;
+        this.tag = !this.popupId && this.href ? `a href="${this.href}"` : 'div onclick="openPopup()"';
+    }
+    
+    async onServerRender() {
+        this.text = this.textContent != '' ? this.textContent : 'Замовити консультацію';
+        if (this.href) {
+            this.removeHref();
+        }
+
+        this.className = this.hasAttribute('class') ? this.getAttribute('class') : 'btn';
+
+        super.render(html);
+        this.removeAttribute('class');
+    }
+
+    openPopup () {
+        window.dispatchEvent( new CustomEvent('open-popup', {
+            detail: {
+                popupId: this.popupId,
+                placement: this.placement
+            }
+        }));
+    }
+
+    removeHref() {
+        this.removeAttribute('href');
+    }
+}
+window.customElements.define('button-component', ButtonComponent);

package/src/components/button-component/button-component.readme.md

@@ -0,0 +1,11 @@
+# Button text
+Button text defines in component innerText: <button-component>button text</button-component>
+
+#
+
+# Data-attributes
+data-popup-id="popup-id": button will open popup, and "popup-id" determines which popup will be opened
+
+href: button will be with tag <a> and open link from href attribute of component
+
+data-placement: value of this attribute  will be in event details (for example it used in form to track which button user clicked)

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

@@ -0,0 +1,34 @@
+button-component {
+    .btn {
+        color: var(--button-primary-normal-font-color);
+        border-radius: var(--button-primary-border-radius);
+        border: 1px solid;
+        background-color: var(--button-primary-normal-fill-color);
+        border-color: var(--button-primary-normal-border-color);
+        padding: 20px 25px;
+        cursor: pointer;
+        font-weight: var(--button-primary-font-weight);
+        transition: all .2s ease;
+        &:hover {
+            color: var(--button-primary-hover-font-color);
+            background-color: var(--button-primary-hover-fill-color);
+            border-color: var(--button-primary-hover-border-color);
+        }
+        &.empty {
+            color: var(--button-secondary-normal-font-color);
+            border-radius: var(--button-secondary-border-radius);
+            background-color: var(--button-secondary-normal-fill-color);
+            border-color: var(--button-secondary-normal-border-color);
+            font-weight: var(--button-secondary-font-weight);
+            &:hover {
+                color: var(--button-secondary-hover-font-color);
+                background-color: var(--button-secondary-hover-fill-color);
+                border-color: var(--button-secondary-hover-border-color);
+            }
+        }
+    }
+
+    a {
+        display: block;
+    }
+}

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

@@ -0,0 +1,5 @@
+export const buttonComponent = {
+  tag: 'button-component',
+  src: '@gudhub/ssg-web-component-library/src/components/button-component/button-component.js',
+  serverOnly: false
+}

package/src/components/category-banner/category-banner.html

@@ -0,0 +1,7 @@
+<section>
+    <div class="container">
+        <breadcrumbs-component data-items='${breadcrumbs}'></breadcrumbs-component>
+        <h1>${title}</h1>
+        <p class="subtitle">${description}</p>
+    </div>
+</section>

package/src/components/category-banner/category-banner.js

@@ -0,0 +1,44 @@
+import html from './category-banner.html';
+import './category-banner.scss';
+
+class CategoryBanner extends GHComponent {
+    /**
+     * data-chapter - blog, default - page
+     */
+    constructor() {
+        super();
+    }
+
+    async onServerRender() {
+        let chapter = this.getAttribute('data-chapter')
+        let url = new URL(window.location.href);
+        let route = url.searchParams.get('path');
+        let slug;
+        if (route.includes('/page/')) {
+            route = route.slice(1, route.length - 1);
+            route = route.split('/');
+            slug = `/${route[0]}/${route[1]}/`;
+        } else {
+            slug = false;
+        }
+
+        // This algorithm with findIds we use because pagination pages is not exist in gudhub application and can't get data from their items
+        let ids = await super.findIds(chapter, slug);
+        const items = await gudhub.getItems(ids.appId);
+        const item = items.find(item => item.item_id == ids.itemId);
+
+        let description = await fetch(`https://gudhub.com/userdata/${ids.appId}/${item.fields.find(field => field.field_id == window.constants.chapters.blog.description_field_id).field_value}.html?t=${new Date().getTime()}`);
+        description = await description.text();
+
+        let div = document.createElement('div');
+        div.innerHTML = description;
+        this.description = div.querySelector('div').innerText;
+        this.title = item.fields.find(field => field.field_id == window.constants.chapters.blog.heading_field_id).field_value;
+
+        this.breadcrumbs = JSON.stringify([{"title": "Blog", "slug": "/blog/"},{"title": this.title}]);
+        
+        super.render(html);
+    }
+}
+
+window.customElements.define('category-banner', CategoryBanner);

package/src/components/category-banner/category-banner.scss

@@ -0,0 +1,22 @@
+category-banner {
+    section {
+        padding-top: 70px;
+    }
+    text-align: center;
+    h1 {
+        text-align: center;
+    }
+    p {
+        width: 100%;
+        max-width: 950px;
+        margin: 0 auto
+    }
+}
+
+@media screen and (max-width: 600px) {
+    category-banner {
+        section {
+            padding-top: 60px;
+        }
+    }
+}

package/src/components/category-banner/config.js

@@ -0,0 +1,5 @@
+export const categoryBanner = {
+  tag: 'category-banner',
+  src: '@gudhub/ssg-web-component-library/src/components/category-banner/category-banner.js',
+  serverOnly: true
+}

package/src/components/contact-us-block/config.js

@@ -0,0 +1,5 @@
+export const contactUsBlock = {
+  tag: 'contact-us-block',
+  src: '@gudhub/ssg-web-component-library/src/components/contact-us-block/contact-us-block.js',
+  serverOnly: false
+}

package/src/components/contact-us-block/contact-us-block.html

@@ -0,0 +1,41 @@
+<section class="contact_us_block">
+    <div class="contact_us_block_container">
+        <h1 class="title" gh-id="${ghId}.title"></h1>
+        <div class="subtitle" gh-id="${ghId}.subtitle"></div>
+        <ul class="contact_info_list">
+            <li class="tel">
+                <a href="tel:${hrefPhone}"> 
+                    <div class="icon-wrapper">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none"><g clip-path="url(#clip0_1428_29328)"><path d="M22.3204 17.1261C21.6107 16.4098 20.6649 16.0155 19.6566 16.0155C19.6556 16.0155 19.6545 16.0155 19.6535 16.0155C18.6442 16.0163 17.6978 16.4122 16.9885 17.1304L15.4698 18.668C11.8226 17.1394 8.90841 14.2224 7.38191 10.5773L8.93201 9.00779C10.3827 7.53899 10.3699 5.1619 8.90336 3.70885L5.36176 0.199707H5.05312C2.37882 0.199707 0.203125 2.3754 0.203125 5.0497C0.203125 7.85059 0.751874 10.5681 1.83402 13.1267C2.87917 15.5977 4.37522 17.8167 6.28061 19.7221C8.18601 21.6275 10.4051 23.1236 12.876 24.1687C15.4346 25.2509 18.1522 25.7997 20.9531 25.7997C23.6274 25.7997 25.8031 23.624 25.8031 20.9497V20.6411L22.3204 17.1261ZM20.9531 24.2997C10.3386 24.2997 1.70312 15.6642 1.70312 5.0497C1.70312 3.30205 3.04817 1.8627 4.75752 1.71265L7.84756 4.7743C8.72746 5.64615 8.73521 7.07239 7.86476 7.95369L5.63031 10.2161L5.80246 10.6671C7.46651 15.0268 10.9135 18.5018 15.2596 20.2011L15.8398 20.4279L18.0557 18.1844C18.4813 17.7535 19.0491 17.516 19.6547 17.5155C19.6554 17.5155 19.656 17.5155 19.6566 17.5155C20.2615 17.5155 20.829 17.7521 21.2548 18.1818L24.2902 21.2453C24.1401 22.9546 22.7007 24.2997 20.9531 24.2997Z" fill="white"/><path d="M22.0529 3.9488C19.6353 1.5312 16.4209 0.199707 13.002 0.199707V1.6997C19.2328 1.6997 24.3019 6.76884 24.3019 12.9997H25.8019C25.8019 9.58069 24.4705 6.36635 22.0529 3.9488Z" fill="white"/><path d="M13.002 4.69971V6.1997C16.7515 6.1997 19.8019 9.25015 19.8019 12.9997H21.3019C21.3019 8.42305 17.5786 4.69971 13.002 4.69971Z" fill="white"/></g><defs><clipPath id="clip0_1428_29328"><rect width="25.6" height="25.6" fill="white" transform="translate(0.199219 0.200195)"/></clipPath></defs></svg>
+                    </div>
+                    <div class="flex-wrapper">
+                        <h3>Phone:</h3>
+                        <span>${info.phone}</span>
+                    </div>
+                </a>
+            </li>
+            <li class="mail">
+                <a href="mailto:${info.email}">
+                    <div class="icon-wrapper">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" fill="none"><g clip-path="url(#clip0_1428_29305)"><mask id="mask0_1428_29305" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="30" height="30"><path d="M0.902344 0.919592H29.0623V29.0796H0.902344V0.919592Z" fill="white"/></mask><g mask="url(#mask0_1428_29305)"><path d="M1.72656 5.15522H28.2366V24.8452H1.72656V5.15522Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/><path d="M1.7207 5.155L14.9757 17.75L28.2307 5.155" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/><path d="M1.7207 24.8452L11.6517 14.5917" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/><path d="M28.2278 24.8452L18.2969 14.5917" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/></g></g><defs><clipPath id="clip0_1428_29305"><rect width="28.16" height="28.16" fill="white" transform="translate(0.919922 0.919922)"/></clipPath></defs></svg>
+                    </div>
+                    <div class="flex-wrapper">
+                        <h3>Email:</h3>
+                        <span>${info.email}</span>
+                    </div>
+                </a>
+            </li>
+            <li class="address">
+                <a href="${info.googleMaps}" target="_blank" rel="noreferrer noopener nofollow">
+                    <div class="icon-wrapper">
+                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="29" viewBox="0 0 24 29" fill="none"><g clip-path="url(#clip0_1428_29403)"><path d="M12.0535 14.2955C10.984 14.2955 9.91434 13.8884 9.10029 13.0741C7.47178 11.4458 7.47178 8.79617 9.10029 7.16766C9.88898 6.37875 10.9379 5.94434 12.0535 5.94434C13.1692 5.94434 14.2179 6.37896 15.0068 7.16766C16.6353 8.79617 16.6353 11.4458 15.0068 13.0741C14.1925 13.8884 13.123 14.2955 12.0535 14.2955ZM12.0535 7.59756C11.4071 7.59756 10.7606 7.84355 10.2684 8.33576C9.28398 9.32018 9.28398 10.9218 10.2684 11.9062C10.7451 12.383 11.3791 12.6455 12.0535 12.6455C12.7279 12.6455 13.3619 12.383 13.8387 11.9062C14.8231 10.9218 14.8231 9.32018 13.8387 8.33576C13.3465 7.84355 12.7 7.59756 12.0535 7.59756Z" fill="white"/><path d="M12.0675 28.5799L11.4288 27.8297C11.0549 27.3903 2.26953 16.9919 2.26953 10.2082C2.26953 4.8109 6.66051 0.419922 12.0578 0.419922C17.4551 0.419922 21.8461 4.8109 21.8461 10.2082C21.8461 16.6582 13.0684 27.3673 12.6948 27.82L12.0675 28.5799ZM12.0578 2.07186C7.57145 2.07186 3.92146 5.72184 3.92146 10.2082C3.92146 12.7296 5.42494 16.3785 8.26947 20.7607C9.74566 23.0348 11.2322 24.9607 12.0488 25.9799C12.8667 24.9327 14.3674 22.9435 15.8528 20.6262C18.693 16.1959 20.1942 12.5932 20.1942 10.2082C20.1942 5.72184 16.5442 2.07186 12.0578 2.07186Z" fill="white"/></g><defs><clipPath id="clip0_1428_29403"><rect width="28.16" height="28.16" fill="white" transform="translate(-2.08008 0.419922)"/></clipPath></defs></svg>
+                    </div>
+                    <div class="flex-wrapper">
+                        <h3>Adress:</h3>
+                        <span>${info.fullAddress}</span>
+                    </div>
+                </a>
+            </li>
+        </ul>
+    </div>
+</section>

package/src/components/contact-us-block/contact-us-block.js

@@ -0,0 +1,22 @@
+import html from './contact-us-block.html';
+import './contact-us-block.scss';
+
+import generalInfo from '../../../../general-info.json';
+
+class ContactUsBlock extends GHComponent {
+
+    constructor() {
+        super();
+    }
+
+    async onServerRender() {
+        this.ghId = this.getAttribute('data-gh-id') || null;
+        
+        this.info = generalInfo;
+
+        this.hrefPhone = this.info.phone.replace(/[ ()+-]/g, '');
+        
+        super.render(html);
+    }
+}
+window.customElements.define('contact-us-block', ContactUsBlock);

package/src/components/contact-us-block/contact-us-block.scss

@@ -0,0 +1,59 @@
+contact-us-block {
+    background-color: var(--primary-bg-color);
+    .contact_us_block {
+        .title, .subtitle {
+            text-align: left;
+        }
+        .contact_info_list {
+            padding-top: 30px;
+            list-style: none;
+            li {
+                &:not(:last-child) {
+                margin-bottom: 30px;
+                }
+                span {
+                    color: var(--text-color);
+                    transition: color .3s ease;
+                }
+                &:hover {
+                    span {
+                        color: var(--primary-color);
+                    }
+                }
+            }
+            a {
+                display: flex;
+                gap: 10px;
+            }
+            h3 {
+                font-size: 28px;
+                margin-bottom: 0;
+            }
+            .icon-wrapper {
+                position: relative;
+                min-width: 64px;
+                height: 64px;
+                background-color: var(--primary-color);
+                border-radius: 50%;
+                svg {
+                    width: 28px;
+                    height: 28px;
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                }
+            }
+            .flex-wrapper {
+                max-width: 300px;
+                flex-direction: column;
+                justify-content: center;
+            }
+        } 
+    }
+    @media screen and (max-width: 900px) {
+        .contact_us_block .contact_info_list {
+            padding-top: 0;
+        }
+    }
+}

package/src/components/cookies-popup/config.js

@@ -0,0 +1,5 @@
+export const aboutUsBanner = {
+    tag: 'about-us-banner',
+    src: '@gudhub/ssg-web-component-library/src/components/about-us-banner/about-us-banner.js',
+    serverOnly: false
+}

package/src/components/cookies-popup/cookies-popup.html

@@ -0,0 +1,8 @@
+<div class="cookies_popup">
+    <div class="container">
+        <div class="flex_wrap">
+            <div class="text">By continuing to use this site, you agree to our <a href="/privacy-policy/">cookie policy</a>.</div>
+            <div class="popup_btn" onclick="gotIt()">GOT IT</div>
+        </div>
+    </div>
+</div>

package/src/components/cookies-popup/cookies-popup.js

@@ -0,0 +1,27 @@
+import html from './cookies-popup.html';
+import './cookies-popup.scss';
+
+class CookiesPopup extends GHComponent {
+    
+    constructor() {
+        super();
+    }
+
+    async onServerRender() {
+        super.render(html);
+    }
+
+    onClientReady () {
+        if ( localStorage.getItem('agreeWithCookies') == null ) {
+            this.classList.add('show');
+        }
+    }
+
+    gotIt() {
+        this.classList.add('hide');
+        localStorage.setItem('agreeWithCookies', true);
+    }
+
+}
+
+window.customElements.define('cookies-popup', CookiesPopup);

package/src/components/cookies-popup/cookies-popup.scss

@@ -0,0 +1,68 @@
+cookies-popup {
+    display: none;
+    &.show {
+        display: block;
+        background-color: #4D555B;
+        padding: 15px 0;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        z-index: 10;
+        transition: all 1s ease;
+        &.hide {
+            bottom: -100%;
+        }
+        .flex_wrap {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .text {
+            color: #fff;
+            font-size: 16px;
+            line-height: 25px;
+            margin-right: 60px;
+            a {
+                color: #fff;
+                font-size: 14px;
+                line-height: 22px;
+                text-decoration: underline;
+                transition: all .2s ease;
+                &:hover {
+                    color: #00BFD6;
+                }
+            }
+        }
+        .popup_btn {
+            padding: 8px 40px;
+            background-color: #00BFD6;
+            border: 1px solid #00BFD6;
+            color: #fff;
+            font-size: 14px;
+            line-height: 22px;
+            border-radius: 50px;
+            cursor: pointer;
+            transition: all .2s ease;
+            white-space: nowrap;
+            &:hover {
+                background-color: #fff;
+                color: #00BFD6;
+            }
+        }
+    }
+}
+
+@media screen and (max-width: 450px) {
+    cookies-popup.show {
+        .text {
+            color: #fff;
+            font-size: 14px;
+            line-height: 18px;
+            margin-right: 15px;
+        }
+        .popup_btn {
+            padding: 8px 20px;
+        }
+    }
+}

package/src/components/counter-section/config.js

@@ -0,0 +1,5 @@
+export const counterSection = {
+  tag: 'counter-section',
+  src: '@gudhub/ssg-web-component-library/src/components/counter-section/counter-section.js',
+  serverOnly: true
+}

package/src/components/counter-section/counter-section-data.json

@@ -0,0 +1,21 @@
+{
+    "title": "Title",
+    "subtitle": "Subtitle",
+    "button_text": "button_text",
+    "items": [
+      {
+        "number": "98",
+        "symbol": "%",
+        "text": "Sed rhoncus venenatis velit"
+      },
+      {
+        "number": "10/7",
+        "text": "Duis efficitur condimentum lacus"
+      },
+      {
+        "number": "На",
+        "symbol": "&nbsp%",
+        "text": "Quisque vel justo lorem"
+      }
+    ]
+  }

package/src/components/counter-section/counter-section.html

@@ -0,0 +1,38 @@
+<section class="service_counter">
+    <div class="container">
+        <div class="top_part">
+            ${json.title ? `
+                <h2 class="h2" gh-id="${ghId}.title"> TITLE </h2>
+            ` : ''}
+            ${json.subtitle ? `
+                <p gh-id="${ghId}.subtitle" class="subtitle"> SUBTITLE </p>
+            ` : ''}
+        </div>
+        <div class="counters">
+            ${
+                items.reduce((acc, item, index) => {
+                    return acc + `
+                    <div class="counter_item">
+                        <div class="counter_top">
+                            ${item.number ? `
+                                <span class="counter_num" gh-id="${ghId}.items.${index}.number"></span>
+                            ` : ''}
+                            ${item.symbol ? `
+                                <span class="counter_symbol" gh-id="${ghId}.items.${index}.symbol"></span>
+                            ` : ''}
+                        </div>
+                        ${item.text ? `
+                            <div class="counter_bottom" gh-id="${ghId}.items.${index}.text"></div>
+                        ` : ""}
+                    </div>
+                    `
+                }, '')
+            }
+        </div>
+        ${json.button ? `
+            <div class="bottom_button">
+                <button-component data-popup-id="${json.button.popupId}" data-placement="${json.button.placement}">${json.button.text}</button-component>
+            </div>
+        `: ''}
+    </div>
+</section>

package/src/components/counter-section/counter-section.js

@@ -0,0 +1,23 @@
+import html from './counter-section.html';
+import './counter-section.scss';
+import jsonTemplate from './counter-section-data.json';
+
+class CounterSection extends GHComponent {
+
+    constructor() {
+        super();
+        super.setDefaultData(jsonTemplate);
+    }
+
+    async onServerRender() {
+        this.ghId = this.getAttribute('data-gh-id') || null;
+
+        this.json = await super.getGhData(this.ghId);
+        this.items = this.json.items;
+
+        super.render(html);
+    }
+
+}
+
+window.customElements.define('counter-section', CounterSection);

package/src/components/counter-section/counter-section.readme.md

@@ -0,0 +1,19 @@
+# Attributes:
+
+none
+
+
+# Component data-object: 
+("?" means "unnecessary")
+```json
+{
+    "title?": "string",
+    "subtitle?": "string",
+    "button_text?": "string",
+    "items": [ {
+        "number?": "string",
+        "symbol?": "string",
+        "text?": "string"
+    } ]
+}
+```