@gudhub/ssg-web-components-library 1.0.1 → 1.0.2

package/package.json

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

package/src/components/about-us-banner/about-us-banner-data.json

@@ -1,8 +1,20 @@
 {
     "title": "Title",
-    "subtitle": "Subtitle",
+    "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.",
+    "buttons": {
+      "primary": {
+        "popupId": "form",
+        "placement": "about-us-banner",
+        "text": "Primary"
+      },
+      "secondary": {
+        "popupId": "form",
+        "placement": "about-us-banner",
+        "text": "Secondary"
+      }
+    },
     "image": {
-      "src": "/assets/images/banner-image.png",
+      "src": "",
       "alt": "image alt",
       "title": "image title"
     }

package/src/components/about-us-banner/about-us-banner.scss

@@ -1,5 +1,5 @@
 about-us-banner {
-    background-color: var(--primary-bg-color);
+    background-color: var(--bg-color);
     display: block;
     .subtitle {
         margin-bottom: 40px;

package/src/components/about-us-image-counter/about-us-image-counter-data.json

@@ -1,32 +1,36 @@
 {
     "title": "Title",
     "subtitle": "Etiam sed ullamcorper tortor, sit amet dictum est. Ut posuere dolor sodales euismod feugiat",
-    "button_text": "Тестувати безкоштовно",
+    "button": {
+      "popupId": "form",
+      "placement": "about-us-image-counter",
+      "text": "Button Text"
+    },
     "items": [
       {
         "icon": {
-          "src": "/assets/images/lowes.png",
+          "src": "",
           "alt": "Image alt",
           "title": "image title"
         }
       },
       {
         "icon": {
-          "src": "/assets/images/formica.png",
+          "src": "",
           "alt": "Tristique senectus",
           "title": "Tristique senectus"
         }
       },
       {
         "icon": {
-          "src": "/assets/images/master-brand.png",
+          "src": "",
           "alt": "Donec lacinia orci",
           "title": "Donec lacinia orci"
         }
       },
       {
         "icon": {
-          "src": "/assets/images/lg.png",
+          "src": "",
           "alt": "Suspendisse",
           "title": "Suspendisse"
         }

package/src/components/about-us-image-counter/about-us-image-counter.scss

@@ -1,6 +1,6 @@
 about-us-image-counter {
     --column-grid-gap: 10px;
-    background-color: var(--primary-bg-color);
+    background-color: var(--bg-color);
     .container {
         display: flex;
         flex-direction: column;

package/src/components/about-us-team-members/about-us-team-members-data.json

@@ -8,7 +8,7 @@
             "items": [
                 {
                     "image": {
-                        "src": "/assets/images/placeholder392x324.png",
+                        "src": "",
                         "alt": "image alt",
                         "title": "image title"
                     },
@@ -17,7 +17,7 @@
                 },
                 {
                     "image": {
-                        "src": "/assets/images/placeholder392x324.png",
+                        "src": "",
                         "alt": "image alt",
                         "title": "image title"
                     },
@@ -26,7 +26,7 @@
                 },
                 {
                     "image": {
-                        "src": "/assets/images/placeholder392x324.png",
+                        "src": "",
                         "alt": "image alt",
                         "title": "image title"
                     },
@@ -35,7 +35,7 @@
                 },
                 {
                     "image": {
-                        "src": "/assets/images/placeholder392x324.png",
+                        "src": "",
                         "alt": "image alt",
                         "title": "image title"
                     },
@@ -44,7 +44,7 @@
                 },
                 {
                     "image": {
-                        "src": "/assets/images/placeholder392x324.png",
+                        "src": "",
                         "alt": "image alt",
                         "title": "image title"
                     },
@@ -53,7 +53,7 @@
                 },
                 {
                     "image": {
-                        "src": "/assets/images/placeholder392x324.png",
+                        "src": "",
                         "alt": "image alt",
                         "title": "image title"
                     },
@@ -68,7 +68,7 @@
             "items": [
                 {
                     "image": {
-                        "src": "/assets/images/placeholder392x324.png",
+                        "src": "",
                         "alt": "image alt",
                         "title": "image title"
                     },
@@ -77,7 +77,7 @@
                 },
                 {
                     "image": {
-                        "src": "/assets/images/placeholder392x324.png",
+                        "src": "",
                         "alt": "image alt",
                         "title": "image title"
                     },
@@ -86,7 +86,7 @@
                 },
                 {
                     "image": {
-                        "src": "/assets/images/placeholder392x324.png",
+                        "src": "",
                         "alt": "image alt",
                         "title": "image title"
                     },

package/src/components/about-us-team-members/about-us-team-members.scss

@@ -1,5 +1,5 @@
 about-us-team-members {
-    background-color: var(--primary-bg-color);
+    background-color: var(--bg-color);
     --items-in-row: 3;
     --col-gap: 20px;
     --row-gap: 50px;

package/src/components/animation-block/animation-block-data.json

@@ -1,38 +1,69 @@
 {
     "title": "Інтеграції CRM для Бізнесу",
     "subtitle": "Поєднайте інструменти, якими ви користуєтеся разом з вашим бізнесом для максимальної продуктивності та ефективності компанії.",
-    "buttons": [
-      {
-        "class": "btn",
+    "buttons": {
+      "primary": {
+        "popupId": "form",
+        "placement": "integrations",
         "text": "Спробувати CRM"
       },
-      {
-        "class": "btn empty",
+      "secondary": {
+        "popupId": "form",
+        "placement": "integrations",
         "text": "Більше Інтеграцій"
       }
-    ],
+    },
     "rows": [
       {
         "row": [
           {
-            "src": "/assets/images/slack.jpg",
+            "image": {
+              "src": "",
+              "title": "Facebook - іконка",
+              "alt": "Facebook"
+            },
+            "title": "Facebook",
+            "subtitle": "Комунікації"
+          },
+          {
+            "image": {
+              "src": "",
+              "title": "Slack - іконка",
+              "alt": "Slack"
+            },
             "title": "Slack",
-            "alt": "Slack"
+            "subtitle": "Комунікації"
           },
           {
-            "src": "/assets/images/telegram.jpg",
+            "image": {
+              "src": "",
+              "title": "Telegram - іконка",
+              "alt": "Telegram"
+            },
             "title": "Telegram",
-            "alt": "Telegram"
-          },
+            "subtitle": "Комунікації"
+          }
+        ]
+      },
+      {
+        "row": [
           {
-            "src": "/assets/images/slack.jpg",
-            "title": "Slack",
-            "alt": "Slack"
+            "image": {
+              "src": "",
+              "title": "Turbo-sms - іконка",
+              "alt": "Turbo-sms"
+            },
+            "title": "Turbo-sms",
+            "subtitle": "Комунікації"
           },
           {
-            "src": "/assets/images/telegram.jpg",
-            "title": "Telegram",
-            "alt": "Telegram"
+            "image": {
+              "src": "",
+              "title": "Viber - іконка",
+              "alt": "Viber"
+            },
+            "title": "Viber",
+            "subtitle": "Комунікації"
           }
         ]
       }

package/src/components/animation-block/animation-block.html

@@ -12,7 +12,7 @@
                                 return acc + `
                                     <div class="item">
                                         <div class="icon-wrapper">
-                                            <img src="${row_item.image.src}" alt="${row_item.image.alt}" title="${row_item.image.title}">
+                                            <img src="${row_item.image.src ? row_item.image.src : svgPlaceholder}" alt="${row_item.image.alt}" title="${row_item.image.title}" height="40">
                                         </div>
                                         <div class="item-text">
                                             <div class="bold" gh-id="${ghId}.rows.${rowIndex}.row.${index}.title"></div>

package/src/components/animation-block/animation-block.js

@@ -1,6 +1,7 @@
 import html from './animation-block.html';
 import './animation-block.scss';
 import jsonTemplate from './animation-block-data.json';
+import svgPlaceholder from '../svgPlaceholder.js';
 class AnimationBlock extends GHComponent {
     constructor() {
         super();
@@ -8,6 +9,7 @@ class AnimationBlock extends GHComponent {
     }
 
     async onServerRender() {
+        this.svgPlaceholder = svgPlaceholder;
         this.ghId = this.getAttribute('data-gh-id') || null;
 
         

package/src/components/animation-block/animation-block.scss

@@ -1,5 +1,5 @@
 animation-block {
-    background: var(--primary-bg-color);
+    background: var(--bg-color);
     h1 {
         text-align: center;
     }
@@ -21,8 +21,8 @@ animation-block {
         left: 0;
         width: 20px;
         height: 100%;
-        background: var(--primary-bg-color);
-        background: linear-gradient(90deg, var(--primary-bg-color) 0%, rgba(0,212,255,0) 100%);
+        background: var(--bg-color);
+        background: linear-gradient(90deg, var(--bg-color) 0%, rgba(0,212,255,0) 100%);
         z-index: 1;
         }
         &::after {
@@ -33,8 +33,8 @@ animation-block {
             right: 0;
             width: 20px;
             height: 100%;
-            background: var(--primary-bg-color);
-            background: linear-gradient(-90deg, var(--primary-bg-color) 0%, rgba(0,212,255,0) 100%);
+            background: var(--bg-color);
+            background: linear-gradient(-90deg, var(--bg-color) 0%, rgba(0,212,255,0) 100%);
         }
     }
     .row {
@@ -60,7 +60,7 @@ animation-block {
             justify-content: center;
             align-items: center;
             gap: 10px;
-            width: 230px;
+            min-width: 230px;
             height: 66px;
             padding: 10px 15px;
             border-radius: 10px;
@@ -69,6 +69,9 @@ animation-block {
                 display: flex;
                 justify-content: center;
                 align-items: center;
+                img {
+                    height: 40px;
+                }
             }
             .item-text {
                 display: flex;

package/src/components/animation-block/config.js

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

package/src/components/banner-and-text/banner-and-text-data.json

@@ -17,7 +17,7 @@
       }
     ],
     "image": {
-      "src": "/assets/images/icons/megaphone.png",
+      "src": "",
       "alt": "image alt",
       "title": "image title"
     }

package/src/components/banner-and-text/banner-and-text.html

@@ -7,7 +7,7 @@
         <div class="flex-wrapper">
             <div class="left">
                 <div class="image">
-                    <img src="${image.src}" alt="${image.alt}" title="${image.title}">
+                    <img src="${image.src ? image.src : svgPlaceholder}" alt="${image.alt}" title="${image.title}">
                 </div>
                 <div class="offer" gh-id="${ghId}.offer"></div>
                 <div class="offer_subtitle" gh-id="${ghId}.offer_subtitle"></div>

package/src/components/banner-and-text/banner-and-text.js

@@ -1,6 +1,7 @@
 import html from './banner-and-text.html';
 import './banner-and-text.scss';
 import jsonTemplate from './banner-and-text-data.json';
+import svgPlaceholder from '../svgPlaceholder.js';
 
 class BannerAndText extends GHComponent {
     constructor() {
@@ -10,6 +11,7 @@ class BannerAndText extends GHComponent {
     }
 
     async onServerRender() {
+        this.svgPlaceholder = svgPlaceholder;
         this.ghId = this.getAttribute('data-gh-id') || null;
         this.chapter = this.getAttribute('data-chapter') || 'pages';
         

package/src/components/banner-and-text/banner-and-text.scss

@@ -1,5 +1,5 @@
 banner-and-text {
-    background-color: var(--primary-bg-color);
+    background-color: var(--bg-color);
     .flex-wrapper {
         gap: 25px;
         align-items: center;

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

@@ -7,14 +7,14 @@ class ButtonComponent extends GHComponent {
         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()"';
+        this.link = this.hasAttribute('data-link') ? this.getAttribute('data-link') : null;
+        this.tag = this.link && !this.popupId ? `a href="${this.link}"` : 'div onclick="openPopup()"';
     }
     
     async onServerRender() {
         this.text = this.textContent != '' ? this.textContent : 'Замовити консультацію';
-        if (this.href) {
-            this.removeHref();
+        if (this.link) {
+            this.removeLink();
         }
 
         this.className = this.hasAttribute('class') ? this.getAttribute('class') : 'btn';
@@ -32,8 +32,8 @@ class ButtonComponent extends GHComponent {
         }));
     }
 
-    removeHref() {
-        this.removeAttribute('href');
+    removeLink() {
+        this.removeAttribute('link');
     }
 }
 window.customElements.define('button-component', ButtonComponent);

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

@@ -1,11 +1,12 @@
+# How to customize
+In json that used by component must be object "button", it can have 2 types: popup opener or redirect to link (be like a common <a> tag), it defines by "popupId"+"placement" or "link". Also you must write "text" property that will be displayed in button. 
+
 # 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)
+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/counter-section/counter-section-data.json

@@ -1,7 +1,11 @@
 {
     "title": "Title",
     "subtitle": "Subtitle",
-    "button_text": "button_text",
+    "button": {
+      "popupId": "form",
+      "placement": "counter-section",
+      "text": "Button Text"
+    },
     "items": [
       {
         "number": "98",

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

@@ -1,5 +1,5 @@
 counter-section {
-    background-color: var(--secondary-bg-color);
+    background-color: var(--bg-color);
     .service_counter {
         .container {
             display: flex;

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

@@ -1,7 +1,11 @@
 {
     "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": "Спробувати Безкоштовно",
+    "button": {
+      "popupId": "form",
+      "placement": "counter-section-with-text",
+      "text": "Button Text"
+    },
     "items": [
       {
         "number": "98",

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

@@ -1,7 +1,7 @@
 counter-section-with-text {
     --col-gap: 20px;
     --items-in-row: 3;
-    background-color: var(--secondary-bg-color);
+    background-color: var(--bg-color);
     .service_counter {
         .container {
             .flex-wrapper {

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

@@ -1,9 +1,17 @@
 {
     "title": "Title",
-    "subtitle": "Subtitle",
-    "button": {
-      "link": "/contact-us/",
-      "text": "Let's Talk!"
+    "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.",
+    "buttons": {
+      "primary": {
+        "popupId": "form",
+        "placement": "about-us-banner",
+        "text": "Primary"
+      },
+      "secondary": {
+        "popupId": "form",
+        "placement": "about-us-banner",
+        "text": "Secondary"
+      }
     },
     "list": [
       "Lorem ipsum dolor sit amet",
@@ -13,7 +21,7 @@
       "In hac habitasse platea dictumst"
     ],
     "image": {
-      "src": "/assets/images/banner-image.png",
+      "src": "",
       "alt": "image alt",
       "title": "image title"
     }

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

@@ -1,5 +1,5 @@
 crm-services-banner {
-    background-color: var(--primary-bg-color);
+    background-color: var(--bg-color);
     display: block;
     .main-subtitle {
         margin-bottom: 40px;

package/src/components/fullscreen-image-and-text/fullscreen-image-and-text-data.json

@@ -0,0 +1,42 @@
+{
+    "title": "Title",
+    "button": {
+      "popupId": "form",
+      "placement": "fullscreen-image-and-text",
+      "text": "Button Text"
+    },
+    "image": {
+      "src": "",
+      "alt": "Alt",
+      "title": "Title"
+    },
+    "paragraphs": [
+      {
+        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed faucibus fringilla mi1, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed faucibus fringilla mi1elit. Sed faucibus fringilla mi1, Lorem ipsum dolor sit amet, consectetur adipiscing elit elit. Sed faucibus fringilla mi1, Lorem ipsum dolor sit amet, consectetur adipiscing elit"
+      }
+    ],
+    "lists": [
+      {
+        "title": "sit amet",
+        "list": [
+          {
+            "li": "ipsum dolor"
+          },
+          {
+            "li": "ipsum dolor"
+          }
+        ]
+      },
+      {
+        "title": "faucibus fringilla",
+        "list": [
+          {
+            "li": "adipiscing elit"
+          },
+          {
+            "li": "adipiscing elit"
+          }
+        ]
+      }
+    ]
+  }

package/src/components/fullscreen-image-and-text/fullscreen-image-and-text.html

@@ -1,5 +1,5 @@
-<section class="fullscreen_image_and_text">
-    <div class="container">
+<section class="fullscreen_image_and_text container">
+    <div class="content-container">
         <h2 gh-id="${ghId}.title"> TITLE </h2>
         <div class="content">
             ${
@@ -15,7 +15,7 @@
                         ${ lists.reduce((acc, list, index) => {
                             return acc + `
                                 <div class="list">
-                                    <h3 gh-id="${ghId}.lists.${index}.title"></h3>
+                                    ${list.title ? `<h3 gh-id="${ghId}.lists.${index}.title"></h3>` : ''}
                                     <ul>
                                         ${
                                             list.list.reduce((acc, li, indexLi) => {
@@ -32,11 +32,11 @@
                 ` : ''
             }
             ${ json.button ? `
-                <a href="${json.button.link}" class="btn" gh-id="${ghId}.button.text"></a>    
+                <button-component data-link="${json.button.link}" ${json.button.popupId && json.button.placement ? `data-popup-id="${json.button.popupId}" data-placement="${json.button.placement}"` : ''}>${json.button.text}</button-component>
             ` : ''}
         </div>
     </div>
     <div class="image">
-        <image-component lazyload src="${image.src}" alt="${image.alt}" title="${image.title}"></image-component>
+        <image-component lazyload src="${image.src ? image.src : ''}" alt="${image.alt}" title="${image.title}"></image-component>
     </div>
 </section>

package/src/components/fullscreen-image-and-text/fullscreen-image-and-text.js

@@ -1,5 +1,6 @@
 import html from './fullscreen-image-and-text.html';
 import './fullscreen-image-and-text.scss';
+import jsonTemplate from './fullscreen-image-and-text-data.json';
 
 class FullscreenImageAndText extends GHComponent {
     /**
@@ -8,6 +9,7 @@ class FullscreenImageAndText extends GHComponent {
      */
     constructor() {
         super();
+        super.setDefaultData(jsonTemplate);
     }
 
     async onServerRender() {