diff --git a/blocks/button-pfx/button-pfx.js b/blocks/button-pfx/button-pfx.js index 8335e23..556bb2f 100644 --- a/blocks/button-pfx/button-pfx.js +++ b/blocks/button-pfx/button-pfx.js @@ -1,6 +1,5 @@ export default async function decorate(block) { - const [link, target, buttonLabel, type] = block.children; - block.textContent = ''; + const [link, target, type] = block.children; const targetValue = target.textContent.trim() === 'true' ? '_blank' : '_self'; if (type.textContent.trim() === 'left-arrow') { @@ -9,17 +8,16 @@ export default async function decorate(block) { block.classList.add('right-arrow'); } - if (link.textContent.trim() === '') { - const buttonEl = document.createElement('button'); - buttonEl.classList.add('button'); - buttonEl.textContent = buttonLabel.textContent.trim(); - block.appendChild(buttonEl); - } else { - const buttonEl = document.createElement('a'); - buttonEl.classList.add('button'); - buttonEl.textContent = buttonLabel.textContent.trim(); - buttonEl.href = link.textContent.trim(); + if (link.textContent.trim() !== '') { + const buttonEl = document.querySelector('a'); buttonEl.setAttribute('target', targetValue); - block.appendChild(buttonEl); + } + + if (target.textContent.trim() !== '') { + target.classList.add('hidden'); + } + + if (type.textContent.trim() !== '') { + type.classList.add('hidden'); } } diff --git a/blocks/cards/cards.js b/blocks/cards/cards.js index 6c1bfad..d80e42b 100644 --- a/blocks/cards/cards.js +++ b/blocks/cards/cards.js @@ -1,26 +1,23 @@ import { createOptimizedPicture } from '../../scripts/aem.js'; -function decorateCTA(cta, ctaLabel, ctaTarget, isClickable) { +function decorateCTA(cta, ctaTarget, isClickable) { const link = cta.querySelector('a'); if (link && isClickable?.textContent.trim() !== 'true') { - if (ctaLabel.textContent.trim()) { - const label = ctaLabel.textContent.trim(); - link.textContent = label; + if (link.textContent.trim()) { + const label = link.textContent.trim(); link.title = label; } - if (ctaTarget.textContent.trim() === 'true') { link.target = '_blank'; } - - return link; + return cta.firstElementChild.firstElementChild; } - - return ctaLabel.children.length > 0 ? ctaLabel?.firstElementChild : ctaLabel; + cta.innerHTML = `

${link.textContent.trim()}

`; + return cta; } function generateCardDom(props, block) { - const [imageContainer, cardTopContent, eyebrow, title, description, cta, ctaLabel, ctaTarget, isClickable] = props; + const [imageContainer, cardTopContent, eyebrow, title, description, cta, ctaTarget, isClickable] = props; const picture = imageContainer.querySelector('picture'); const cardImPricing = block.classList.contains('card-im-pricing'); @@ -34,7 +31,7 @@ function generateCardDom(props, block) { ${eyebrow?.textContent.trim() !== '' ? `
${eyebrow.textContent.trim().toUpperCase()}
` : ``} ${title?.children.length > 0 ? `
${title.textContent.trim()}
` : ``} ${description?.children.length > 0 ? `
${description.innerHTML}
` : ``} - ${ctaLabel.textContent.trim() ? `
${decorateCTA(cta, ctaLabel, ctaTarget, isClickable).outerHTML}
` : ``} + ${cta.textContent.trim() ? `
${decorateCTA(cta, ctaTarget, isClickable).outerHTML}
` : ``} `; @@ -46,7 +43,7 @@ function generateCardDom(props, block) { ${eyebrow?.textContent.trim() !== '' ? `
${eyebrow.textContent.trim().toUpperCase()}
` : ``} ${title?.children.length > 0 ? `
${title.textContent.trim()}
` : ``} ${description?.children.length > 0 ? `
${description.innerHTML}
` : ``} - ${ctaLabel.textContent.trim() ? `
${decorateCTA(cta, ctaLabel, ctaTarget).outerHTML}
` : ``} + ${cta.textContent.trim() ? `
${decorateCTA(cta, ctaTarget).outerHTML}
` : ``} `; return cardDOM; diff --git a/blocks/hero/hero.js b/blocks/hero/hero.js index ceaa41c..32bccb1 100644 --- a/blocks/hero/hero.js +++ b/blocks/hero/hero.js @@ -4,74 +4,12 @@ import { environmentMode, replaceBasePath } from '../../scripts/global-functions import { BASE_CONTENT_PATH } from '../../scripts/url-constants.js'; import { createOptimizedPicture } from '../../scripts/aem.js'; -function decorateButton(heroLeftContainer) { - heroLeftContainer.querySelectorAll('div.button-container').forEach((btn) => { - const btnStyle = btn.children[0]?.textContent || 'primary'; - const btnLink = btn.children[1]?.textContent; - const btnLabel = btn.children[2]?.textContent; - const btnTarget = btn.children[3]?.textContent; - btn.textContent = ''; - if (btnLabel === '') { - btn.remove(); - } else { - const heroButton = document.createElement('a'); - heroButton.classList.add('button', btnStyle); - heroButton.innerHTML = btnLabel; - if (btnLink) { - const isPublishEnvironment = environmentMode() === 'publish'; - heroButton.href = replaceBasePath(isPublishEnvironment, btnLink, BASE_CONTENT_PATH); - } - - if (btnTarget === 'true') { - heroButton.target = '_blank'; - } - btn.append(heroButton); - } - }); -} - -function decorateRightContainer(heroRightContainer) { - const heroVariation = heroRightContainer.firstElementChild.textContent || 'imageVariation'; - if (heroVariation === 'imageVariation') { - const heroImageContainer = document.createElement('div'); - heroImageContainer.classList.add('hero-image-container'); - const heroImage = heroRightContainer.children[1]; - if (window.matchMedia('(min-width:986px)').matches && heroImage.querySelector('img') !== null) { - heroImageContainer.setAttribute('style', `background-image:url(${heroImage.querySelector('img').src})`); - } - heroImageContainer.append(heroImage); - heroRightContainer.textContent = ''; - heroRightContainer.append(heroImageContainer); - } else if (heroVariation === 'videoVariation') { - const heroRightContainerInner = document.createElement('div'); - heroRightContainerInner.classList.add('embed'); - const placeholder = heroRightContainer.children[2]; - const link = heroRightContainer.children[3]; - const overlayText = heroRightContainer.children[4]; - const isPopup = heroRightContainer.children[5]; - heroRightContainer.textContent = ''; - if (link.textContent !== '') { - heroRightContainerInner.append(placeholder); - heroRightContainerInner.append(link); - heroRightContainerInner.append(overlayText); - heroRightContainerInner.append(isPopup); - - decorateEmbed(heroRightContainerInner); - heroRightContainer.append(heroRightContainerInner); - } - } else { - heroRightContainer.textContent = ''; - } -} - async function loadStats(statsData, heroLeftContainerInner) { if (statsData.querySelector('a')) { const link = statsData.querySelector('a').href; - if (link.includes('/fragments/')) { const url = new URL(link); const fragmentPath = url.pathname; - const fragmentBlock = await loadFragment(fragmentPath); if (fragmentBlock) { const lastChild = statsData.lastElementChild; @@ -93,62 +31,121 @@ export default async function decorate(block) { const heroRightContainer = document.createElement('div'); const heroLeftContainerInner = document.createElement('div'); heroLeftContainerInner.classList.add('hero-content'); - let buttonContainer = document.createElement('div'); - buttonContainer.classList.add('button-container'); - let count = 1; - [...block.children].forEach((row, index) => { - if (index < 6) { - /* Image / Video */ - if (index === 0) { - const variationOption = row.firstElementChild?.textContent; - if (variationOption === 'noVariation') { - heroContainer.classList.add('hero-no-bg-image'); - } else if (variationOption === 'videoVariation') { - heroContainer.classList.add('hero-video'); - } + const [ + variation, + imageContainer, + videoPlaceHolder, + videoUrl, + videoOverlay, + videoPopup, + heroHeight, + eyebrow, + description, + button1, + target1, + button2, + target2, + button3, + target3, + stats, + ] = block.children; + + const variationOption = variation?.textContent.trim(); + if (variationOption === 'noVariation') { + heroContainer.classList.add('hero-no-bg-image'); + heroRightContainer.textContent = ''; + } else if (variationOption === 'videoVariation') { + heroContainer.classList.add('hero-video'); + const heroRightContainerInner = document.createElement('div'); + heroRightContainerInner.classList.add('embed'); + const placeholder = videoPlaceHolder; + const link = videoUrl; + const overlayText = videoOverlay; + const isPopup = videoPopup; + heroRightContainer.textContent = ''; + if (link.textContent !== '') { + heroRightContainerInner.append(placeholder); + heroRightContainerInner.append(link); + heroRightContainerInner.append(overlayText); + heroRightContainerInner.append(isPopup); + decorateEmbed(heroRightContainerInner); + heroRightContainer.append(heroRightContainerInner); + } + } else { + const heroImageContainer = document.createElement('div'); + heroImageContainer.classList.add('hero-image-container'); + const heroImage = imageContainer; + if (heroImage !== undefined && window.matchMedia('(min-width:986px)').matches) { + if (heroImage?.querySelector('img') !== null) { + const imageUrl = heroImage?.querySelector('img').src; + heroImageContainer.setAttribute('style', `background-image:url(${imageUrl})`); } - heroRightContainer.append(row.firstElementChild); - heroRightContainer.classList.add('hero-right-container'); - } else if (index === 6) { - /* Height Variation */ - heroContainer.classList.add(row.firstElementChild?.textContent || 'hero-primary-height'); - } else if (index === 7) { - /* Eyebrow Text */ - if (row.firstElementChild?.textContent !== '') { - const heroPreHeader = document.createElement('span'); - heroPreHeader.classList.add('eyebrow-text'); - heroPreHeader.append(row.firstElementChild); - heroLeftContainerInner.append(heroPreHeader); + heroImageContainer.append(heroImage); + heroRightContainer.textContent = ''; + heroRightContainer.append(heroImageContainer); + } + } + heroRightContainer.classList.add('hero-right-container'); + if (heroHeight.textContent.trim() !== '') { + heroContainer.classList.add(heroHeight.textContent.trim() || 'hero-primary-height'); + } + + if (eyebrow.textContent.trim() !== '') { + const heroPreHeader = document.createElement('span'); + heroPreHeader.classList.add('eyebrow-text'); + heroPreHeader.append(eyebrow); + heroLeftContainerInner.append(heroPreHeader); + } + + if (description.textContent.trim() !== '') { + description?.classList.add('hero-content-container'); + heroLeftContainerInner.append(description || ''); + } + const isPublishEnvironment = environmentMode() === 'publish'; + + if (button1.textContent.trim() !== '') { + const button1Link = button1.querySelector('a'); + if (button1Link !== null) { + if (target1 === true) { + button1Link.querySelector('a').target = '_blank'; } - } else if (index === 8) { - /* Hero Content */ - row.firstElementChild?.classList.add('hero-content-container'); - heroLeftContainerInner.append(row.firstElementChild || ''); - } else if (index >= 9 && index <= 20) { - /* Hero Buttons */ - if (buttonContainer.children.length >= 0 && count === 5) { - heroLeftContainerInner.append(buttonContainer); - buttonContainer = document.createElement('div'); - buttonContainer.classList.add('button-container'); - count = 1; + button1Link.href = replaceBasePath(isPublishEnvironment, button1Link.href, BASE_CONTENT_PATH); + heroLeftContainerInner.append(button1.firstElementChild); + } + } + if (button2.textContent.trim() !== '') { + const button2Link = button2.querySelector('a'); + if (button2Link !== null) { + if (target2 === true) { + button2Link.querySelector('a').target = '_blank'; } - count += 1; - buttonContainer.append(row.firstElementChild); - heroLeftContainerInner.append(buttonContainer); - heroLeftContainer.append(heroLeftContainerInner); - } else if (index === 21) { - const statsData = row.firstElementChild; - loadStats(statsData, heroLeftContainerInner); + button2Link.href = replaceBasePath(isPublishEnvironment, button2Link.href, BASE_CONTENT_PATH); + heroLeftContainerInner.append(button2.firstElementChild); } - }); + } + if (button3.textContent.trim() !== '') { + const button3Link = button3.querySelector('a'); + if (button3Link !== null) { + if (target3 === true) { + button3Link.querySelector('a').target = '_blank'; + } + button3Link.href = replaceBasePath(isPublishEnvironment, button3Link.href, BASE_CONTENT_PATH); + heroLeftContainerInner.append(button3.firstElementChild); + } + } + + if (stats !== '') { + const statsData = stats.firstElementChild; + loadStats(statsData, heroLeftContainerInner); + } + heroLeftContainer.append(heroLeftContainerInner); - decorateButton(heroLeftContainer); - decorateRightContainer(heroRightContainer); heroRightContainer .querySelectorAll('img') .forEach((img) => img.closest('picture').replaceWith(createOptimizedPicture(img.src, img.alt, false, [{ width: '750' }])), ); + heroContainer.append(heroLeftContainer); heroContainer.append(heroRightContainer); block.textContent = ''; diff --git a/blocks/imagetext/imagetext.js b/blocks/imagetext/imagetext.js index 955d523..ad8f321 100644 --- a/blocks/imagetext/imagetext.js +++ b/blocks/imagetext/imagetext.js @@ -113,27 +113,19 @@ export default async function decorate(block) { imagetextRightContainer.appendChild(imagetextAction); } else if (index === 4) { - button.classList.add('button'); - if (row.textContent.trim() !== '') { - button.classList.add(row.textContent.trim()); - } - } else if (index === 5) { - button.href = row.textContent?.trim() || ''; - } else if (index === 6) { - if (row.textContent.trim() !== '') { - button.innerHTML = row.textContent.trim(); + button.append(row.firstElementChild); } else { buttonDisable = true; } - } else if (index === 7) { + } else if (index === 5) { if (row.textContent.trim() === 'true' && buttonDisable === false) { button.target = '_blank'; } if (buttonDisable === false) { imagetextAction.appendChild(button); } - } else if (index === 8) { + } else if (index === 6) { /* Support Title */ const line = document.createElement('div'); line.classList.add('cross-line'); @@ -144,31 +136,31 @@ export default async function decorate(block) { content.innerHTML = row.firstElementChild.innerHTML; supportContainer.appendChild(content); - } else if (index >= 9) { - if (index >= 9 && index <= 11) { + } else if (index >= 7) { + if (index >= 7 && index <= 9) { elementsInContainer.push(row); - if (index === 11) { + if (index === 9) { addElementsToContainer(leftInnerContainer, elementsInContainer); elementsInContainer = []; } } - if (index >= 12 && index <= 14) { + if (index >= 10 && index <= 12) { elementsInContainer.push(row); - if (index === 14) { + if (index === 12) { addElementsToContainer(rightInnerContainer, elementsInContainer); elementsInContainer = []; } } - if (index >= 15 && index <= 17) { + if (index >= 13 && index <= 15) { elementsInContainer.push(row); - if (index === 17) { + if (index === 15) { addElementsToContainer(leftInnerContainer, elementsInContainer); elementsInContainer = []; } } - if (index >= 18 && index <= 20) { + if (index >= 16 && index <= 18) { elementsInContainer.push(row); - if (index === 20) { + if (index === 18) { addElementsToContainer(rightInnerContainer, elementsInContainer); elementsInContainer = []; } diff --git a/blocks/left-right-boxed/left-right-boxed.js b/blocks/left-right-boxed/left-right-boxed.js index af644bb..47d135c 100644 --- a/blocks/left-right-boxed/left-right-boxed.js +++ b/blocks/left-right-boxed/left-right-boxed.js @@ -1,26 +1,40 @@ import { createOptimizedPicture } from '../../scripts/aem.js'; import { decorateEmbed } from '../embed/embed.js'; -function decorateRightContainer(boxedRightContainer) { - const boxedVariation = boxedRightContainer.firstElementChild.textContent || 'imageVariation'; +export default async function decorate(block) { + const boxedContainer = document.createElement('div'); + boxedContainer.classList.add('boxed-main-container'); + const boxedLeftContainer = document.createElement('div'); + boxedLeftContainer.classList.add('boxed-left-container'); + const boxedRightContainer = document.createElement('div'); + const boxedLeftContainerInner = document.createElement('div'); + boxedLeftContainerInner.classList.add('boxed-content-container'); - if (boxedVariation === 'imageVariation') { - const boxedImageContainer = document.createElement('div'); - boxedImageContainer.classList.add('boxed-image-container'); - const boxedImage = boxedRightContainer.children[2]; - if (window.matchMedia('(min-width:986px)').matches && boxedImage.querySelector('img') !== null) { - boxedImageContainer.setAttribute('style', `background-image:url(${boxedImage.querySelector('img').src})`); - } - boxedImageContainer.append(boxedImage); - boxedRightContainer.textContent = ''; - boxedRightContainer.append(boxedImageContainer); - } else if (boxedVariation === 'videoVariation') { + const [ + variation, + imagetoLeft, + imageContainer, + videoPlaceHolder, + videoUrl, + videoOverlay, + videoPopup, + eyebrow, + description, + imgReverse, + ] = block.children; + + const variationImagetoLeft = imagetoLeft.firstElementChild?.textContent || 'false'; + if (variationImagetoLeft === 'true') { + boxedContainer.classList.add('boxed-content-right'); + } + const variationOption = variation?.textContent.trim(); + if (variationOption === 'videoVariation') { const boxedRightContainerInner = document.createElement('div'); boxedRightContainerInner.classList.add('embed'); - const placeholder = boxedRightContainer.children[3]; - const link = boxedRightContainer.children[4]; - const overlayText = boxedRightContainer.children[5]; - const isPopup = boxedRightContainer.children[6]; + const placeholder = videoPlaceHolder; + const link = videoUrl; + const overlayText = videoOverlay; + const isPopup = videoPopup; boxedRightContainer.textContent = ''; if (link.textContent !== '') { if (window.matchMedia('(min-width:986px)').matches && placeholder.querySelector('img') !== null) { @@ -35,51 +49,35 @@ function decorateRightContainer(boxedRightContainer) { boxedRightContainer.append(boxedRightContainerInner); } } else { - boxedRightContainer.textContent = ''; + const boxedImageContainer = document.createElement('div'); + boxedImageContainer.classList.add('boxed-image-container'); + const boxedImage = imageContainer; + if (boxedImage !== undefined && window.matchMedia('(min-width:986px)').matches) { + if (boxedImage?.querySelector('img') !== null) { + boxedImageContainer.setAttribute('style', `background-image:url(${boxedImage.querySelector('img').src})`); + } + boxedImageContainer.append(boxedImage); + boxedRightContainer.textContent = ''; + boxedRightContainer.append(boxedImageContainer); + } + } + boxedRightContainer.classList.add('boxed-right-container'); + if (eyebrow.textContent.trim() !== '') { + const boxedEyebrowText = document.createElement('span'); + boxedEyebrowText.classList.add('eyebrow-text'); + boxedEyebrowText.append(eyebrow); + boxedLeftContainerInner.append(boxedEyebrowText); } -} -export default async function decorate(block) { - const boxedContainer = document.createElement('div'); - boxedContainer.classList.add('boxed-main-container'); - const boxedLeftContainer = document.createElement('div'); - boxedLeftContainer.classList.add('boxed-left-container'); - const boxedRightContainer = document.createElement('div'); - const boxedLeftContainerInner = document.createElement('div'); - boxedLeftContainerInner.classList.add('boxed-content-container'); + if (description.textContent.trim() !== '') { + boxedLeftContainerInner.append(description || ''); + } - [...block.children].forEach((row, index) => { - if (index <= 6) { - if (index === 1) { - const variationOption = row.firstElementChild?.textContent || 'false'; - if (variationOption === 'true') { - boxedContainer.classList.add('boxed-content-right'); - } - } - /* Image / Video */ - boxedRightContainer.append(row.firstElementChild); - boxedRightContainer.classList.add('boxed-right-container'); - } else if (index === 7) { - /* Eyebrow Text */ - if (row.firstElementChild?.textContent !== '') { - const boxedEyebrowText = document.createElement('span'); - boxedEyebrowText.classList.add('eyebrow-text'); - boxedEyebrowText.append(row.firstElementChild); - boxedLeftContainerInner.append(boxedEyebrowText); - } - } else if (index === 8) { - /* Left Right Boxed Content */ - boxedLeftContainerInner.append(row.firstElementChild || ''); - boxedLeftContainer.append(boxedLeftContainerInner); - } else if (index === 9) { - /* Reverse order in Mobile */ - const mobileReverse = row.firstElementChild?.textContent || 'false'; - if (mobileReverse === 'true') { - boxedContainer.classList.add('boxed-mobile-reverse'); - } - } - }); - decorateRightContainer(boxedRightContainer); + if (imgReverse.textContent.trim() === 'true') { + boxedContainer.classList.add('boxed-mobile-reverse'); + } + + boxedLeftContainer.append(boxedLeftContainerInner); boxedRightContainer .querySelectorAll('img') diff --git a/component-definition.json b/component-definition.json index 8b63cf6..b32e1cf 100644 --- a/component-definition.json +++ b/component-definition.json @@ -386,7 +386,10 @@ "resourceType": "core/franklin/components/block/v1/block", "template": { "name": "Hero", - "model": "hero" + "model": "hero", + "buttonOneLinkType": "primary", + "buttonTwoLinkType": "primary", + "buttonThreeLinkType": "primary" } } } @@ -682,7 +685,8 @@ "resourceType": "core/franklin/components/block/v1/block", "template": { "name": "Title Pfx", - "model": "title-pfx" + "model": "title-pfx", + "titleType": "h2" } } } diff --git a/component-models.json b/component-models.json index 838f325..ed79193 100644 --- a/component-models.json +++ b/component-models.json @@ -56,7 +56,7 @@ }, { "component": "select", - "name": "type", + "name": "titleType", "value": "h2", "label": "Type", "valueType": "string", @@ -88,55 +88,42 @@ ] }, { - "component": "select", - "name": "fontColor", - "value": "title-dark-grey", - "label": "Color", + "component": "multiselect", + "name": "classes", + "placeholder": "Title Pfx Styles", + "label": "Title Pfx Styles", "valueType": "string", "options": [ { - "name": "Gray - Default", + "name": "Title Color Gray", "value": "title-dark-grey" }, { - "name": "Dark Blue", + "name": "Title Color Dark Blue", "value": "title-dark-blue-gradient" - } - ] - }, - { - "component": "multiselect", - "name": "classes", - "placeholder": "Select Spacing", - "label": "Spacing", - "valueType": "string", - "options": [ - { - "name": "Default", - "value": "" }, { - "name": "Small", + "name": "Padding Small", "value": "title-spacer-small" }, { - "name": "Medium", + "name": "Padding Medium", "value": "title-spacer-medium" }, { - "name": "Large", + "name": "Padding Large", "value": "title-spacer-large" }, { - "name": "Extra Large", + "name": "Padding Extra Large", "value": "title-spacer-extra-large" }, { - "name": "Remove Top Spacer", + "name": "Remove Top Padding", "value": "title-no-top-margin" }, { - "name": "Remove Bottom Spacer", + "name": "Remove Bottom Padding", "value": "title-no-bottom-margin" } ] @@ -215,7 +202,7 @@ { "component": "aem-content", "valueType": "string", - "name": "href", + "name": "link", "label": "Link", "value": "" }, @@ -229,7 +216,7 @@ { "component": "text-input", "valueType": "string", - "name": "text", + "name": "linkText", "label": "Button Label", "value": "" }, @@ -755,7 +742,7 @@ { "component": "text-input", "valueType": "string", - "name": "buttonLabel", + "name": "buttonLinkText", "value": "", "label": "Button Label" }, @@ -1179,10 +1166,24 @@ "value": "", "description": "ⓘ Heading (H1) and Description" }, + { + "component": "aem-content", + "valueType": "string", + "name": "buttonOneLink", + "value": "", + "label": "Button Link" + }, + { + "component": "text-input", + "valueType": "string", + "name": "buttonOneLinkText", + "value": "", + "label": "Button Label" + }, { "component": "radio-group", "label": "Button 1 Style", - "name": "buttonOneStyle", + "name": "buttonOneLinkType", "valueType": "string", "value": "primary", "options": [ @@ -1196,30 +1197,30 @@ } ] }, + { + "component": "boolean", + "label": "Target Blank", + "name": "isTargetBlankOne", + "valueType": "boolean" + }, { "component": "aem-content", "valueType": "string", - "name": "buttonOneLink", + "name": "buttonTwoLink", "value": "", "label": "Button Link" }, { "component": "text-input", "valueType": "string", - "name": "buttonOneLabel", + "name": "buttonTwoLinkText", "value": "", "label": "Button Label" }, - { - "component": "boolean", - "label": "Target Blank", - "name": "isTargetBlankOne", - "valueType": "boolean" - }, { "component": "radio-group", "label": "Button 2 Style", - "name": "buttonTwoStyle", + "name": "buttonTwoLinkType", "value": "primary", "valueType": "string", "options": [ @@ -1233,30 +1234,30 @@ } ] }, + { + "component": "boolean", + "label": "Target Blank", + "name": "isTargetBlankTwo", + "valueType": "boolean" + }, { "component": "aem-content", "valueType": "string", - "name": "buttonTwoLink", + "name": "buttonThreeLink", "value": "", "label": "Button Link" }, { "component": "text-input", "valueType": "string", - "name": "buttonTwoLabel", + "name": "buttonThreeLinkText", "value": "", "label": "Button Label" }, - { - "component": "boolean", - "label": "Target Blank", - "name": "isTargetBlankTwo", - "valueType": "boolean" - }, { "component": "radio-group", "label": "Button 3 Style", - "name": "buttonThreeStyle", + "name": "buttonThreeLinkType", "valueType": "string", "value": "primary", "options": [ @@ -1270,20 +1271,6 @@ } ] }, - { - "component": "aem-content", - "valueType": "string", - "name": "buttonThreeLink", - "value": "", - "label": "Button Link" - }, - { - "component": "text-input", - "valueType": "string", - "name": "buttonThreeLabel", - "value": "", - "label": "Button Label" - }, { "component": "boolean", "label": "Target Blank", @@ -2290,10 +2277,24 @@ "label": "Action Text", "value": "" }, + { + "component": "aem-content", + "valueType": "string", + "name": "buttonLink", + "value": "", + "label": "Button Link" + }, + { + "component": "text-input", + "valueType": "string", + "name": "buttonLinkText", + "value": "", + "label": "Button Label" + }, { "component": "radio-group", "label": "Action Button Style", - "name": "buttonStyle", + "name": "buttonLinkType", "valueType": "string", "value": "primary", "options": [ @@ -2307,20 +2308,6 @@ } ] }, - { - "component": "aem-content", - "valueType": "string", - "name": "buttonLink", - "value": "", - "label": "Button Link" - }, - { - "component": "text-input", - "valueType": "string", - "name": "buttonLabel", - "value": "", - "label": "Button Label" - }, { "component": "boolean", "label": "Target Blank",