Merge pull request #854 from adobecom/MWPW-160278

MWPW-160278
adobecom · Oct 16, 2024 · 21181e4 · 21181e4
2 parents 3b8b39f + 3f4f74b
commit 21181e4
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 20 deletions.
diff --git a/acrobat/blocks/verb-widget/icons.js b/acrobat/blocks/verb-widget/icons.js
diff --git a/acrobat/blocks/verb-widget/verb-widget.css b/acrobat/blocks/verb-widget/verb-widget.css
@@ -10,8 +10,15 @@
   color: initial;
 }
 
+.verb-legal-wrapper {
+  align-items: flex-start;
+  display: flex;
+  flex-flow: column;
+}
+
 .verb-legal {
   margin-top: 30px;
+  margin-bottom: 0;
   font-size: 14px;
   line-height: 20px;
   max-width: 527px;
@@ -20,6 +27,10 @@
   color: #2c2c2c;
 }
 
+.verb-legal-two {
+  margin-top: 0;
+}
+
 .verb-icon {
   background-size: cover;
   display: inline-flex;
@@ -41,30 +52,24 @@
 
 }
 
-.verb-big-icon {
-  width: 500px;
-  height: 500px;
-  background-image: url('../../img/icons/chat-pdf.svg');
-  background-size: contain;
-  margin: auto;
-  background-repeat: no-repeat;
-  display: inline;
-  float: right;
-  position: absolute;
-  right: 0;
-  top: 40px;
-}
-
 .security-icon {
+  display: flex;
   width: 42px;
   height: 42px;
-  background-size: contain;
-  background-repeat: no-repeat;
-  display: inline-block;
+  margin: 15px 3px 0 0;
+}
+
+.info-icon {
+  display: flex;
+  margin: 15px 0 0 20px;
 }
 
 .verb-footer {
   text-align: center;
+  align-items: center;
+  display: flex;
+  flex-flow: row;
+  justify-content: center;
 }
 
 .verb-footer a {

diff --git a/acrobat/blocks/verb-widget/verb-widget.js b/acrobat/blocks/verb-widget/verb-widget.js
@@ -132,11 +132,16 @@ export default async function init(element) {
   }
 
   // Since we're using placeholders we need a solution for the hyperlinks
+  const legalWrapper = createTag('div', { class: 'verb-legal-wrapper' });
   const legal = createTag('p', { class: 'verb-legal' }, `${window.mph['verb-widget-legal']} `);
+  const legalTwo = createTag('p', { class: 'verb-legal verb-legal-two' }, `${window.mph['verb-widget-legal-2']} `);
   const iconSecurity = createTag('div', { class: 'security-icon' });
+  const infoIcon = createTag('div', { class: 'info-icon milo-tooltip right', 'data-tooltip': `${window.mph['verb-widget-tool-tip']}` });
   const securityIconSvg = createSvgElement('SECURITY_ICON');
+  const infoIconSvg = createSvgElement('INFO_ICON');
   if (securityIconSvg) {
     iconSecurity.appendChild(securityIconSvg);
+    infoIcon.appendChild(infoIconSvg);
   }
   const footer = createTag('div', { class: 'verb-footer' });
 
@@ -162,10 +167,11 @@ export default async function init(element) {
   } else {
     widgetLeft.append(widgetHeader, widgetHeading, widgetCopy, errorState, widgetButton, button);
     // Make ticket to localize links
-    legal.innerHTML = legal.outerHTML.replace(window.mph['verb-widget-terms-of-use'], `<a class="verb-legal-url" href="${touURL}"> ${window.mph['verb-widget-terms-of-use']}</a>`);
-    legal.innerHTML = legal.outerHTML.replace(window.mph['verb-widget-privacy-policy'], `<a class="verb-legal-url" href="${ppURL}"> ${window.mph['verb-widget-privacy-policy']}</a>`);
+    legalTwo.innerHTML = legalTwo.outerHTML.replace(window.mph['verb-widget-terms-of-use'], `<a class="verb-legal-url" href="${touURL}"> ${window.mph['verb-widget-terms-of-use']}</a>`);
+    legalTwo.innerHTML = legalTwo.outerHTML.replace(window.mph['verb-widget-privacy-policy'], `<a class="verb-legal-url" href="${ppURL}"> ${window.mph['verb-widget-privacy-policy']}</a>`);
 
-    footer.append(iconSecurity, legal);
+    legalWrapper.append(legal, legalTwo);
+    footer.append(iconSecurity, legalWrapper, infoIcon);
 
     element.append(widget, footer);
   }