Merge pull request #137 from shamalijadhav/feature/component-creation

Feature/component creation
WWWPiramalFinanceCOM · Jun 26, 2024 · 92fdf05 · 92fdf05
2 parents 19d86ec + 6090856
commit 92fdf05
Show file tree

Hide file tree

Showing 6 changed files with 134 additions and 6 deletions.
diff --git a/blocks/keyfeatures/keyfeatures.js b/blocks/keyfeatures/keyfeatures.js
@@ -52,7 +52,7 @@ function generateFeatureHTML(props) {
     keyFeatureInnerImage3 = keyFeatureInnerImage3.querySelector('div > picture > img').src;
 
     // Generate HTML
-    const html = `<div class="homeloanteaser teaser">
+    /* const html = `<div class="homeloanteaser teaser">
     <div id="" class="cmp-teaser">
         <a class="cmp-teaser__link" href="${containerLink}">
             <div class="cmp-teaser__content">
@@ -71,6 +71,7 @@ function generateFeatureHTML(props) {
                 data-src="${rightSideImage}" class="lozad"
                 src="${rightSideImage}" data-loaded="true" alt="${rightSideImageAlt}">
         </a>
+        ${keyFeatureTitle} 
         <div class="keyfeature-container">
             <div class="keyfeatures-info">
                 <p class="heading">${keyFeatureTitle}</p>
@@ -111,7 +112,71 @@ function generateFeatureHTML(props) {
             </div>
         </div>
     </div>
-</div>`
+</div>` */
+
+    const keyFeatureDiv = keyFeatureDiv ? ` 
+    <div class="keyfeature-container">
+        <div class="keyfeatures-info">
+            <p class="heading">${keyFeatureTitle}</p>
+            <img data-src="${keyFeatureImagePlus}" alt="plusicon"
+                class="plusicon lozad" src="${keyFeatureImagePlus}"
+                data-loaded="true" style="display: block;">
+            <img data-src="${keyFeatureImageMinus}" alt="minusicon"
+                class="minusicon lozad" style="display: none;"
+                src="${keyFeatureImageMinus}" data-loaded="true">
+            <div class="keyfeatures" style="display: none;">
+                <div class="feature" id="hideshow">
+                    <img data-src="${keyFeatureInnerImage1}" alt="cost"
+                        class="lozad" src="${keyFeatureInnerImage1}"
+                        data-loaded="true">
+                    <div class="feature-details">
+                        ${keyFeatureInnerText1.outerHTML}
+                    </div>
+                </div>
+    
+                <div class="feature" id="hideshow">
+                    <img data-src="${keyFeatureInnerImage2}" alt="tenure"
+                        class="lozad" src="${keyFeatureInnerImage2}"
+                        data-loaded="true">
+                    <div class="feature-details">
+                        ${keyFeatureInnerText2.outerHTML}
+                    </div>
+                </div>
+    
+                <div class="feature" id="hideshow">
+                    <img data-src="${keyFeatureInnerImage3}" alt="Interest"
+                        class="lozad" src="${keyFeatureInnerImage3}"
+                        data-loaded="true">
+                    <div class="feature-details">
+                    ${keyFeatureInnerText3.outerHTML}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>` : '';
+
+    const html = `<div class="homeloanteaser teaser">
+    <div id="" class="cmp-teaser">
+        <a class="cmp-teaser__link" href="${containerLink}">
+            <div class="cmp-teaser__content">
+                ${cardDescription.outerHTML}
+            </div>
+            <div class="cmp-teaser__image">
+                <div data-cmp-is="image"
+                    data-cmp-filereference="${leftSideImage}" data-cmp-hook-image="imageV3" class="cmp-image" itemscope=""
+                    itemtype="">
+                    <img loading="lazy" class="cmp-image__image" itemprop="contentUrl" alt="${leftSideImageAlt}" src="${leftSideImage}">
+                </div>
+            </div>
+        </a>
+        <a href="${rightSideImageLink}" class="redirectionbutton">
+        <img
+                data-src="${rightSideImage}" class="lozad"
+                src="${rightSideImage}" data-loaded="true" alt="${rightSideImageAlt}">
+        </a>
+       ${keyFeatureDiv}
+    </div>
+</div>`;
 
     return html;
 }

diff --git a/blocks/teaserv2/teaserv2.js b/blocks/teaserv2/teaserv2.js
@@ -30,8 +30,8 @@ function renderTeaserHTMLFactory(props) {
   const frontImageDiv = createElement("div", "front-image");
   if (frontImagePic) frontImageDiv.append(frontImagePic);
 
-  const titleDiv = createElement("div", "title", title?.textContent.trim());
-  const descriptionDiv = createElement("div", "description", description?.textContent.trim()) ;
+  const titleDiv = createElement("div", "title", title?.innerHTML);
+  const descriptionDiv = createElement("div", "description", description?.innerHTML) ;
 
   const buttonHrefAnchor = buttonHref?.querySelector("a") || "";
   if (buttonHrefAnchor) buttonHrefAnchor.innerText = button?.textContent.trim() || "";

diff --git a/scripts/scripts.js b/scripts/scripts.js
@@ -167,7 +167,8 @@ async function loadingCustomCss(){
     `${window.hlx.codeBasePath}/styles/about-us-company/about-us-company.css`,
     `${window.hlx.codeBasePath}/styles/reset.css`,
     `${window.hlx.codeBasePath}/styles/key-features/key-features.css`,
-    `${window.hlx.codeBasePath}/styles/metro-cities/metro-cities.css`
+    `${window.hlx.codeBasePath}/styles/metro-cities/metro-cities.css`,
+    `${window.hlx.codeBasePath}/styles/elgibility-criteria/elgibility-criteria.css`
   ]
 
   loadCssArray.forEach( async (eachCss) => {

diff --git a/styles/elgibility-criteria/elgibility-criteria.css b/styles/elgibility-criteria/elgibility-criteria.css
@@ -0,0 +1,62 @@
+.section.eligibility-criteria-wrapper {
+    margin-bottom: 72px;
+}
+
+.section.eligibility-criteria-wrapper .default-content-wrapper>h2 {
+    color: #000;
+    display: block;
+    font-family: Nunito-Extrabold, sans-serif;
+    font-size: 32px;
+    font-weight: 800;
+    line-height: 48px;
+    margin-bottom: 16px;
+}
+
+.section.eligibility-criteria-wrapper .default-content-wrapper>p {
+    color: #000;
+    display: block;
+    font-family: Nunito-Regular, sans-serif;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+}
+
+.section.eligibility-criteria-wrapper .default-content-wrapper>ul {
+    margin-top: 24px;
+    list-style: none;
+}
+
+.section.eligibility-criteria-wrapper .default-content-wrapper>ul>li strong {
+    display: block;
+    color: #f26841;
+    font-family: 'Nunito-Bold', sans-serif;
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 28px;
+    margin-bottom: 8px;
+}
+
+.section.eligibility-criteria-wrapper .default-content-wrapper>ul>li>ul>li {
+    color: #333;
+    font-family: 'Nunito-Regular', sans-serif;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+}
+
+@media screen and (max-width:768px) {
+    .section.eligibility-criteria-wrapper {
+        margin-bottom: 40px;
+    }
+
+    .section.eligibility-criteria-wrapper .default-content-wrapper>h2 {
+        font-size: 18px;
+        line-height: 27px;
+        margin-bottom: 8px;
+    }
+
+    .section.eligibility-criteria-wrapper .default-content-wrapper>ul>li strong {
+        font-size: 16px;
+        line-height: 24px;
+    }
+}
diff --git a/styles/elgibility-criteria/elgibility-criteria.js b/styles/elgibility-criteria/elgibility-criteria.js
diff --git a/styles/metro-cities/metro-cities.css b/styles/metro-cities/metro-cities.css
@@ -11,7 +11,7 @@
 .section.metro-cities-wrapper .default-content-wrapper>h2 {
     color: #000;
     display: block;
-    font-family: Nunito-Extrabold, sans-serif;
+    font-family: 'Nunito-Extrabold', sans-serif;
     font-size: 2pc;
     font-weight: 800;
     line-height: 40px;