UI fixes for repeater element.

adobecom · May 7, 2024 · 3f16fa4 · 3f16fa4
1 parent aa2402e
commit 3f16fa4
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 5 deletions.
diff --git a/blocks/event-info-component/event-info-component.css b/blocks/event-info-component/event-info-component.css
@@ -254,3 +254,32 @@
 .hidden {
   display: none;
 }
+
+.repeater-element {
+  max-width: 100%;
+  height: var(--spectrum-spacing-700, 48px);
+  flex-shrink: 0;
+  border-radius: 10px;
+  border: 1px dashed var(--Divider, #6E6E6E);
+  display: flex;
+  align-items: center;
+  padding: 0px 32px;
+  margin-bottom: 24px;
+}
+
+.icon-add-circle {
+  height: 24px;
+  width: 24px;
+}
+
+.repeater-element-title {
+  width: 100%;
+  color: var(--web-gray-scale-color-gray-500909090, var(--web-grey-scale-color-gray-500909090, #909090));
+  /* Heading/Heading S */
+  font-family: "Adobe Clean";
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 24px; /* 125% */
+  margin: 0px;
+}
diff --git a/blocks/event-info-component/event-info-component.js b/blocks/event-info-component/event-info-component.js
@@ -106,13 +106,18 @@ function decorateDateTimeFields(row) {
   });
 }
 
-function addRepeater(element) {
+function addRepeater(element, title) {
   element.lastChild.setAttribute('repeatIdx', 0);
 
   const tag = createTag('div');
-  tag.classList.add('trial-repeater');
+  tag.classList.add('repeater-element');
+
+  const heading = createTag('h3', { class: 'repeater-element-title' }, title);
+  tag.append(heading);
+
   const plusIcon = getIcon('add-circle');
   tag.append(plusIcon);
+
   element.append(tag);
 }
 
@@ -124,11 +129,11 @@ export default function init(el) {
   rows.forEach(async (r, i) => {
     if (i === 1) {
       await decorateField(r, 'text');
-      addRepeater(r);
+      addRepeater(r, 'Add event title');
     }
     if (i === 2) {
       await decorateField(r, 'textarea');
-      addRepeater(r);
+      addRepeater(r, 'Add event description');
     }
     if (i === 3) decorateDateTimeFields(r);
   });

diff --git a/blocks/form-handler/controllers/event-info-component-controller.js b/blocks/form-handler/controllers/event-info-component-controller.js
@@ -284,7 +284,7 @@ export default function init(component) {
 }
 
 function initRepeater(component) {
-  const repeaters = component.querySelectorAll('.trial-repeater');
+  const repeaters = component.querySelectorAll('.repeater-element');
   repeaters.forEach((tRepeater) => {
     const vanillaNode = tRepeater.previousElementSibling.cloneNode(true);
     tRepeater.addEventListener('click', (event) => {