@gudhub/ssg-web-components-library 1.0.0

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

@@ -0,0 +1,204 @@
+counter-section {
+    background-color: var(--secondary-bg-color);
+    .service_counter {
+        .container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        .h2 {
+            text-align: center;
+        }
+        .subtitle {
+            max-width: 850px;
+            margin-left: auto;
+            margin-right: auto;
+            text-align: center;
+        }
+        .counters {
+            width: 100%;
+            display: flex;
+            justify-content: space-around;
+            flex-wrap: wrap;
+            &:not(:last-child) {
+                margin-bottom: 50px;
+            }
+            .counter_item {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: flex-start;
+                max-width: 230px;
+                width: 33%;
+                text-align: center;
+                margin: var(--custom-margin);
+                position: relative;
+                &::after {
+                    content:'';
+                    position: absolute;
+                    top: 10%;
+                    right: -33%;
+                    width: 1px;
+                    height: 80%;
+                    background: var(--text-color);
+                }
+                &:last-child::after {
+                    content: none;
+                }
+                .counter {
+                    &_top {
+                        display: flex;
+                        font-size: 46px;
+                        font-weight: 700;
+                        line-height: 120%;
+                        color: var(--h-color);
+                        margin-bottom: 10px;
+                    }
+                    &_bottom {
+                        text-align: center;
+                        font-size: 16px;
+                        line-height: 140%;
+                        color: var(--text-color);
+                    }
+                }
+            }
+        }
+    }
+}
+
+@media screen and (max-width: 1130px) {
+    counter-section .service_counter .counters .counter_item::after {
+        right: -25%;
+    }
+}
+@media screen and (max-width: 1080px) {
+    counter-section .service_counter .counters {
+        justify-content: center;
+        .counter_item {
+            max-width: none;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            border-right: 1px solid var(--text-color);
+            &::after {
+                content: none;
+            }
+            &:last-child {
+                border-right: none;
+            }
+            .counter_top, .counter_bottom {
+                max-width: 230px;
+                margin-left: auto;
+                margin-right: auto;
+            }
+        }
+    }
+}
+@media screen and (max-width: 1025px) {
+    counter-component .service_counter {
+        .h2 {
+            margin-bottom: 30px;
+        }
+        .counters .counter_item .counter_top {
+            font-size: 48px;
+            line-height: 48px;
+            margin-bottom: 8px;
+        }
+    }
+    counter-component {
+        .service_counter {
+            .counters {
+                .counter_item {
+                    margin: 0 20px;
+                    margin-bottom: 20px;
+                }
+            }
+        }
+    }
+}
+@media screen and (max-width: 815px) {
+    counter-section .service_counter .counters {
+        justify-content: center;
+        gap: 20px;
+        .counter_item {
+            width: calc(50% - 10px);
+            border-right: none;
+        }
+    }
+}
+@media screen and (max-width: 770px) and (min-width: 600px) {
+    counter-component {
+        .service_counter .counters .counter_item {
+            width: 32%;
+            margin: 0;
+            margin-right: 1%;
+            margin-bottom: 20px;
+            &:nth-child(3n) {
+                margin-right: 0;
+            }
+        }
+    }
+}
+@media screen and (max-width: 600px) {
+    counter-component {
+        .service_counter .counters .counter_item {
+            width: 48%;
+            margin: 0;
+            margin-right: 1%;
+            margin-bottom: 20px;
+            &:nth-child(2n) {
+                margin-right: 0;
+            }
+        }
+    }
+}
+@media screen and (max-width: 600px) {
+    counter-component .service_counter {
+        .h2 {
+            margin-bottom: 23px;
+        }
+        .counters {
+            flex-wrap: wrap;
+            .counter_item {
+                max-width: initial;
+                &:first-child,
+                &:nth-child(2) {
+                    margin-bottom: 15px;
+                }
+                .counter_top {
+                    font-size: 56px;
+                }
+            }
+        }
+        .bottom_text {
+            margin-top: 10px;
+        }
+    }
+}
+@media screen and (max-width: 450px) {
+    counter-section .service_counter .counters .counter_item .counter {
+        &_top {
+            font-size: 36px;
+        }
+        &_bottom {
+            font-size: 14px;
+        }
+    }
+}
+@media screen and (max-width: 400px) {
+    counter-component .service_counter {
+        .counters {
+            .counter_item {
+                .counter_top {
+                    font-size: 32px;
+                    line-height: 35px;
+                }
+                .counter_bottom {
+                    font-size: 14px;
+                    line-height: 18px;
+                    max-width: 140px;
+                }
+            }
+        }
+    }
+}

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

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

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

@@ -0,0 +1,21 @@
+{
+    "title": "Title",
+    "subtitle": "subtitle Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+    "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-with-text/counter-section-with-text.html

@@ -0,0 +1,46 @@
+<section class="service_counter">
+    <div class="container">
+        <div class="flex-wrapper">
+            <div class="left">
+                <div class="text">
+                    ${json.title ? `
+                        <h2 class="h2" gh-id="${ghId}.title"> TITLE </h2>
+                    ` : ''}
+                    ${json.subtitle ? `
+                        <p class="subtitle" gh-id="${ghId}.subtitle"> SUBTITLE </p>
+                    ` : ''}
+                </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>
+            <div class="right">
+                <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>
+            </div>
+        </div>
+        ${json.button_text ? `
+            <div class="bottom_button">
+                <button-component data-popup-title="Тестувати Безкоштовно" data-popup-subtitle="Заповніть форму зараз і ми зв'яжемося з вами!">${json.button_text}</button-component>
+            </div>
+        `: ''}
+    </div>
+</section>

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

@@ -0,0 +1,23 @@
+import html from './counter-section-with-text.html';
+import './counter-section-with-text.scss';
+import jsonTemplate from './counter-section-with-text-data.json';
+
+class CounterSectionWithText 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-with-text', CounterSectionWithText);

package/src/components/counter-section-with-text/counter-section-with-text.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"
+    } ]
+}
+```

package/src/components/counter-section-with-text/counter-section-with-text.scss

@@ -0,0 +1,164 @@
+counter-section-with-text {
+    --col-gap: 20px;
+    --items-in-row: 3;
+    background-color: var(--secondary-bg-color);
+    .service_counter {
+        .container {
+            .flex-wrapper {
+                display: flex;
+                flex-direction: row;
+                justify-content: center;
+                align-items: center;
+                gap: var(--col-gap);
+                .left, .right {
+                    max-width: calc((100% - var(--col-gap)) / 2) ;
+                }
+                .left {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 50px;
+                    .text {
+                        text-align: left;
+                        .h2 {
+                            text-align: inherit;
+                        }
+                        & > :last-child {
+                            margin-bottom: 0;
+                        }
+                    }
+                }
+                .right {
+                    .counters {
+                        width: 100%;
+                        display: flex;
+                        justify-content: center;
+                        flex-wrap: wrap;
+                        --gap: 30px;
+                        gap: var(--gap);
+                        .counter_item {
+                            display: flex;
+                            flex-direction: column;
+                            justify-content: flex-start;
+                            align-items: center;
+                            text-align: center;
+
+                            max-width: calc((100% - (var(--gap) * (var(--items-in-row) - 1))) / var(--items-in-row));
+                            .counter {
+                                &_top {
+                                    display: flex;
+                                    width: max-content;
+                                    font-size: 46px;
+                                    font-weight: 700;
+                                    line-height: 120%;
+                                    color: var(--h-color);
+                                    margin-bottom: 10px;
+                                    
+                                    .counter {
+                                        &_num, &_symbol {
+                                            word-break: keep-all;
+                                        }
+                                    }
+                                }
+                                &_bottom {
+                                    text-align: center;
+                                    font-size: var(--text-font-size);
+                                    line-height: 140%;
+                                    color: var(--text-color);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            .bottom_button {
+                .btn {
+                    width: 260px;
+                    height: 60px;
+                }
+            }
+            & > .bottom_button {
+                display: none;
+                width: 100%;
+                .btn {
+                    margin: auto;
+                }
+            }
+        }
+    }
+
+    @media screen and (max-width: 1025px) {
+        .service_counter {
+            .container {
+                .flex-wrapper {
+                    .left {
+                        gap: 20px;
+                    }
+                }
+            }
+        }
+    }
+
+    @media screen and (min-width: 730px) and (max-width: 900px) {
+        .service_counter {
+            .container {
+                .flex-wrapper {
+                    margin-bottom: 20px;
+                    .left {
+                        .bottom_button {
+                            display: none;
+                        }
+                    }
+                    .right {
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        .counters {
+                            flex-direction: column;
+                            align-items: center;
+                            .counter_item {
+                                max-width: 205px;
+                            }
+                        }
+                    }
+                }
+                & > .bottom_button {
+                    display: block;
+                }
+            }
+        }
+    }
+
+    @media screen and (max-width: 730px) {
+        .service_counter {
+            .container {
+                .flex-wrapper {
+                    flex-direction: column;
+                    margin-bottom: 20px;
+                    .left, .right {
+                        max-width: 100%;
+                    }
+                    .left {
+                        .text {
+                            text-align: center;
+                        }
+                        .bottom_button {
+                            display: none;
+                        }
+                    }
+                    .right {
+                        .counters {
+                            flex-direction: row;
+                            align-items: center;
+                        }
+                    }
+                }
+                & > .bottom_button {
+                    display: block;
+                }
+            }
+        }
+    }
+    @media screen and (max-width: 600px) {
+            --items-in-row: 2;
+    }
+}

package/src/components/crm-services-banner/config.js

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

package/src/components/crm-services-banner/crm-services-banner-data.json

@@ -0,0 +1,20 @@
+{
+    "title": "Title",
+    "subtitle": "Subtitle",
+    "button": {
+      "link": "/contact-us/",
+      "text": "Let's Talk!"
+    },
+    "list": [
+      "Lorem ipsum dolor sit amet",
+      "Donec ut placerat velit",
+      "Morbi euismod elementum nibh",
+      "Phasellus venenatis volutpat lectus",
+      "In hac habitasse platea dictumst"
+    ],
+    "image": {
+      "src": "/assets/images/banner-image.png",
+      "alt": "image alt",
+      "title": "image title"
+    }
+  }

package/src/components/crm-services-banner/crm-services-banner.html

@@ -0,0 +1,28 @@
+<section>
+    <div class="container">
+        <div class="flex-wrapper">
+            <div class="left">
+                <h1 gh-id="${ghId}.title"></h1>
+                <div class="main-subtitle" gh-id="${ghId}.subtitle"></div>
+                <ul class="banner_list tick_list">
+                    ${
+                        list.reduce((acc, item, index) => {
+                            return acc + `
+                               <li gh-id="${ghId}.list.${index}"></li>
+                            `
+                        }, '')
+                    }
+                </ul>
+                <div class="flex_button">
+                    ${json.buttons ? `
+						<button-component data-popup-id="${json.buttons.primary.popupId}" data-placement="${json.buttons.primary.placement}">${json.buttons.primary.text}</button-component>
+						<button-component data-popup-id="${json.buttons.secondary.popupId}" data-placement="${json.buttons.secondary.placement}" class="btn empty">${json.buttons.secondary.text}</button-component>
+					` : ''}
+                </div>
+            </div>
+            <div class="right">
+				<image-component lazyload src="${image.src}" alt="${image.alt}" title="${image.title}" width="515" height="649"></image-component>
+            </div>
+        </div>
+    </div>
+</section>

package/src/components/crm-services-banner/crm-services-banner.js

@@ -0,0 +1,25 @@
+import html from './crm-services-banner.html';
+import './crm-services-banner.scss';
+import jsonTemplate from './crm-services-banner-data.json';
+
+class CrmServicesBanner 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.list = this.json.list;
+
+        this.image = this.json.image;
+
+        super.render(html);
+    }
+
+}
+
+window.customElements.define('crm-services-banner', CrmServicesBanner);

package/src/components/crm-services-banner/crm-services-banner.scss

@@ -0,0 +1,57 @@
+crm-services-banner {
+    background-color: var(--primary-bg-color);
+    display: block;
+    .main-subtitle {
+        margin-bottom: 40px;
+    }
+    .banner_list {
+        color: var(--subtitle-color);
+        margin-bottom: 40px;
+    }
+    .flex_button {
+        display: flex;
+        gap: 20px;
+    }
+    .flex-wrapper {
+        gap: 20px;
+        .left {
+            flex-shrink: 1;
+        }
+        .right {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-shrink: 0;
+            max-width: calc(100% / 2);
+            img {
+                max-width: 100%;
+            }
+        }
+    }
+    .btn {
+        white-space: nowrap;
+    }
+
+    @media screen and (max-width: 1024px) {
+        .flex-wrapper {
+            flex-direction: column;
+            .left {
+                flex-shrink: 0;
+            }
+            .right {
+                max-width: 100%;
+                justify-content: center;
+                flex-shrink: 0;
+            }
+        }
+    }
+
+    @media screen and (max-width: 550px) {
+        .flex_button {
+            flex-wrap: wrap;
+            & > * {
+                width: 100%;
+            }
+        }
+    }
+}

package/src/components/edit-mode/config.js

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

package/src/components/edit-mode/edit-mode.html

@@ -0,0 +1,4 @@
+<div class="edit-mode-button">
+    <input class="edit-mode-switch" type="checkbox" id="edit-mode-switch" onchange="toggleEditMode()" />
+    <label class="edit-mode-label" for="edit-mode-switch"></label>
+</div>

package/src/components/edit-mode/edit-mode.js

@@ -0,0 +1,23 @@
+import html from './edit-mode.html';
+import './edit-mode.scss';
+
+class EditMode extends GHComponent {
+    constructor() {
+        super();
+    }
+
+    onServerRender() {
+        super.render(html);
+    }
+
+    toggleEditMode() {
+        const event = new Event('toggle-edit-mode');
+        window.dispatchEvent(event);
+        document.querySelector('body').classList.toggle('edit-mode-enabled');
+    }
+
+}
+
+if(!window.customElements.get('edit-mode')) {
+    window.customElements.define('edit-mode', EditMode);
+}