Skip to content

Commit

Permalink
Merge pull request #135 from shamalijadhav/feature/component-creation
Browse files Browse the repository at this point in the history 
Feature/component creation
  • Loading branch information
@Sm1pleScr1pt
Sm1pleScr1pt committed Jun 25, 2024
2 parents beeca5c + 862aea7 commit a531c56
Show file tree
Hide file tree
Showing 5 changed files with 214 additions and 19 deletions.
12 changes: 11 additions & 1 deletion blocks/footer/footer.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -222,7 +222,7 @@ color: #F58667;
font-size: 0.75rem;
line-height: 1rem;
color: #fff;
margin-left: -40px;
/* margin-left: -40px; */
margin-top: 0.5rem;
}
.footer-section-second .columns > div {
Expand Down Expand Up @@ -276,4 +276,14 @@ color: #F58667;
.footer-section-first .columns > div > div:last-child {
margin-right: 20%;
}
.footer-section-second .columns-2-cols ul li p:first-child{
padding-bottom: unset;
}
.footer-section-third .imgwithlink-wrapper .imgwithlink .image-href-mobile img{
height: 2.375rem;
width: 100%;
}
.footer-section-third {
flex-direction: column;
}
}
140 changes: 140 additions & 0 deletions blocks/keyfeatures/keyfeatures.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
/* .section.home-loans-products-wrapper.grid-container{
display: grid;
grid-template-rows: auto 1fr;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
} */
.section.home-loans-products-wrapper .wrappercreation-wrapper .wrappercreation{
margin-top: 40px;
}
.section.home-loans-products-wrapper .default-content-wrapper #more-home-loan-products{
color: #000;
font-family: Nunito-Extrabold, sans-serif;
font-size: 32px;
font-weight: 800;
line-height: 40px;
padding-bottom: 8px;
}
.section.home-loans-products-wrapper .wrappercreation-wrapper .wrappercreation .wrapper-creation-container{
display: grid;
grid-template-rows: auto 1fr;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.section.home-loans-products-wrapper .wrappercreation-wrapper .wrappercreation .wrapper-creation-container .keyfeatures-wrapper {
position: relative;
}
.section.home-loans-products-wrapper .wrappercreation-wrapper .wrappercreation .wrapper-creation-container .keyfeatures-wrapper .keyfeatures .homeloanteaser .cmp-teaser .cmp-teaser__link{
background: #fff9f2;
border-radius: 9pt 9pt 0 0;
display: flex;
gap: 24px;
justify-content: start;
padding: 1pc 24px 40px;
flex-direction: column-reverse;
}
.section.home-loans-products-wrapper .wrappercreation-wrapper .wrappercreation .wrapper-creation-container .keyfeatures-wrapper .keyfeatures{
/* padding: 0 24px 16px; */
}
.homeloanteaser a:nth-child(2) img{
position: absolute;
top: 17px;
right: 24px;
height: 32px;
width: 32px;
}

.section.home-loans-products-wrapper .wrappercreation-wrapper .wrappercreation .wrapper-creation-container .keyfeatures-wrapper .keyfeatures .homeloanteaser .cmp-teaser .cmp-teaser__link:hover{
text-decoration: none;
}

.section.home-loans-products-wrapper .wrappercreation-wrapper .wrappercreation .wrapper-creation-container .keyfeatures-wrapper .keyfeatures .homeloanteaser .cmp-teaser .cmp-teaser__link .cmp-teaser__content p{
color: #666;
font-family: Nunito-Regular, sans-serif;
font-size: 1pc;
font-weight: 400;
line-height: 24px;
}

.section.home-loans-products-wrapper .wrappercreation-wrapper .wrappercreation .wrapper-creation-container .keyfeatures-wrapper .keyfeatures .homeloanteaser .cmp-teaser .cmp-teaser__link .cmp-teaser__content p:nth-child(1) strong{
color: #000;
font-family: Nunito-Extrabold, sans-serif;
font-size: 18px;
font-weight: 800;
line-height: 28px;
}
.cmp-teaser__link .cmp-teaser__image img{
height: 12px;
width: 137px;
}

.section.home-loans-products-wrapper .wrappercreation-wrapper .wrappercreation .wrapper-creation-container .keyfeatures-wrapper .keyfeatures .homeloanteaser .cmp-teaser .cmp-teaser__link .cmp-teaser__image .cmp-image__image{
height: 12px;
width: 137px;
}
.homeloanteaser .cmp-teaser .keyfeature-container .keyfeatures-info {
position: relative;
background-color: #fff4e7;
border-radius: 8px;
height: 100%;
position: relative;
z-index: 20;
}
.homeloanteaser .cmp-teaser .keyfeature-container{
border-top: 1px solid #eeebeb;
}
.section.home-loans-products-wrapper .wrappercreation-wrapper .wrappercreation .wrapper-creation-container .keyfeatures-wrapper .keyfeatures .homeloanteaser .cmp-teaser .keyfeature-container .keyfeatures-info .plusicon,

.section.home-loans-products-wrapper .wrappercreation-wrapper .wrappercreation .wrapper-creation-container .keyfeatures-wrapper .keyfeatures .homeloanteaser .cmp-teaser .keyfeature-container .keyfeatures-info .minusicon{
height: 16px;
width: 16px;
position: absolute;
top: 20px;
z-index: -1;
top: 20px;
right: 24px
}
.homeloanteaser .cmp-teaser .keyfeature-container .keyfeatures-info .heading{
color: #333;
cursor: pointer;
font-family: Nunito-Bold, sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 24px;
padding: 16px 24px;
}

.homeloanteaser .keyfeature-container .keyfeatures .feature{
position: relative;
display: flex;
align-items: center;
padding-top: 24px;
}
.homeloanteaser .keyfeature-container .keyfeatures .feature .feature-details{
padding-left: 16px;
}

.homeloanteaser .keyfeature-container .keyfeatures .feature .feature-details div p:first-child{
color: #666;
font-family: Nunito-Regular, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
.homeloanteaser .keyfeature-container .keyfeatures .feature .feature-details div p:last-child strong{
color: #333;
font-family: Nunito-Bold, sans-serif;
font-size: 18px;
font-weight: 700;
line-height: 26px;
padding-top: 4px;
}
.keyfeature-container .keyfeatures-info .keyfeatures{
padding: 0 24px 16px;
}

@media screen and (max-width: 767.99px) {
.section.home-loans-products-wrapper .wrappercreation-wrapper .wrappercreation .wrapper-creation-container{
grid-template-columns: 1fr;
}
}
62 changes: 48 additions & 14 deletions blocks/keyfeatures/keyfeatures.js
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,36 @@
export default function decorate(block) {
const props = [...block.children].map( row => row);
const props = [...block.children].map(row => row);
const getHTML = generateFeatureHTML(props);
const newDivFeature = document.createElement('div');
newDivFeature.innerHTML = getHTML;
block.innerHTML = '';
block.append(newDivFeature);
try {
featureDropDownClick()
} catch (error) {
console.log(error)
}
}

function generateFeatureHTML(props) {
let [
containerLink,
cardDescription,
leftSideImage,
leftSideImageAlt,
rightSideImage,
containerLink,
cardDescription,
leftSideImage,
leftSideImageAlt,
rightSideImage,
rightSideImageAlt,
rightSideImageLink,
keyFeatureTitle,
keyFeatureImagePlus,
keyFeatureImageMinus,
keyFeatureInnerImage1,
keyFeatureInnerImage1,
keyFeatureInnerText1,
keyFeatureInnerImage2,
keyFeatureInnerImage2,
keyFeatureInnerText2,
keyFeatureInnerImage3,
keyFeatureInnerText3,
]
]
= props;

containerLink = containerLink.textContent.trim();
Expand All @@ -46,8 +51,8 @@ function generateFeatureHTML(props) {
keyFeatureInnerImage2 = keyFeatureInnerImage2.querySelector('div > picture > img').src;
keyFeatureInnerImage3 = keyFeatureInnerImage3.querySelector('div > picture > img').src;

// Generate HTML
const html = `<div class="homeloanteaser teaser">
// Generate HTML
const html = `<div class="homeloanteaser teaser">
<div id="" class="cmp-teaser">
<a class="cmp-teaser__link" href="${containerLink}">
<div class="cmp-teaser__content">
Expand All @@ -57,8 +62,7 @@ function generateFeatureHTML(props) {
<div data-cmp-is="image"
data-cmp-filereference="${leftSideImage}" data-cmp-hook-image="imageV3" class="cmp-image" itemscope=""
itemtype="">
<img src=""
loading="lazy" class="cmp-image__image" itemprop="contentUrl" alt="${leftSideImageAlt}" src="${leftSideImage}">
<img loading="lazy" class="cmp-image__image" itemprop="contentUrl" alt="${leftSideImageAlt}" src="${leftSideImage}">
</div>
</div>
</a>
Expand Down Expand Up @@ -109,6 +113,36 @@ function generateFeatureHTML(props) {
</div>
</div>`

return html;
return html;
}


function featureDropDownClick() {
var featureClick = document.querySelectorAll('.keyfeatures-info .heading')
featureClick.forEach(function (btn) {
btn.addEventListener('click', function (e) {
e.stopImmediatePropagation();
var wrapperContainer = this.closest('.wrapper-creation-container');
var keyfeaturesList = wrapperContainer.querySelectorAll('.keyfeatures-info .keyfeatures');
keyfeaturesList.forEach(function (keyfeatures) {
if (keyfeatures.style.display === 'none') {
keyfeatures.style.display = 'block';
document.querySelectorAll('.plusicon').forEach(function (icon) {
icon.style.display = 'none';
})
document.querySelectorAll('.minusicon').forEach(function (icon) {
icon.style.display = 'block';
})
} else {
keyfeatures.style.display = 'none';
document.querySelectorAll('.plusicon').forEach(function (icon) {
icon.style.display = 'block';
})
document.querySelectorAll('.minusicon').forEach(function (icon) {
icon.style.display = 'none';
})
}
});
})
})
}
13 changes: 12 additions & 1 deletion component-filters.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,19 @@
"imgwithlink",
"carousel",
"teaser",
"tab-container",
"tabs",
"accordion-group"
"detailed-teaser",
"accordion-group",
"teaserv2",
"code",
"contentfragment",
"experiencefragment",
"wrappercreation",
"container",
"mycontainer",
"keyfeatures",
"embed"
]
},
{
Expand Down
6 changes: 3 additions & 3 deletions styles/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -417,11 +417,11 @@ main img {


/* common classes for banner background start */
.teaser.block.bg--lilen>.background{
.teaser.block.--lilen>.background{
background-color: var(--lilen);
}

.teaser.block.bg--rosewhite>.background{
.teaser.block.--rosewhite>.background{
background-color: var(--rosewhite);
}

Expand All @@ -430,7 +430,7 @@ main img {
background-size: 100% 100%;
}

.teaser.block.bg----skyblue>.background {
.teaser.block.--skyblue>.background {
background-color: var(--skyblue);
}
/* common classes for banner background end */
Expand Down

0 comments on commit a531c56

Please sign in to comment.