Repeater: Tab - Add clone button

TangibleInc · Jan 7, 2025 · ff891f8 · ff891f8
1 parent d7b7d29
commit ff891f8
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 11 deletions.
diff --git a/assets/build/beaver-builder/index.min.css b/assets/build/beaver-builder/index.min.css
diff --git a/assets/build/default/index.min.css b/assets/build/default/index.min.css
diff --git a/assets/build/elementor/index.min.css b/assets/build/elementor/index.min.css
diff --git a/assets/build/index.min.js b/assets/build/index.min.js
diff --git a/assets/build/wp/index.min.css b/assets/build/wp/index.min.css
diff --git a/assets/src/components/base/button/index.scss b/assets/src/components/base/button/index.scss
@@ -21,6 +21,7 @@
 }
 
 .tf-button-icon-trash[disabled],
+.tf-button-icon-clone[disabled],
 .tf-button-danger[disabled],
 .tf-button-primary[disabled],
 .tf-button-action[disabled],
@@ -64,7 +65,8 @@
 /* Icons */
 $icons: (
   (name: 'trash', icon: url('data:image/svg+xml;utf8,<svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.99995 0.714233C6.73758 0.714233 5.71423 1.73758 5.71423 2.99995H0V4.49995H1.38525L3.15687 15.4619C3.31345 16.4307 4.14986 17.1428 5.13126 17.1428H10.8687C11.8501 17.1428 12.6865 16.4307 12.8431 15.4619L14.6147 4.49995H16V2.99995H10.2857C10.2857 1.73758 9.26231 0.714233 7.99995 0.714233ZM2.90471 4.49995H13.0952L11.3623 15.2225C11.3231 15.4647 11.114 15.6428 10.8687 15.6428H5.13126C4.88591 15.6428 4.6768 15.4648 4.63766 15.2225L2.90471 4.49995Z" fill="%23D63638"/></svg>')),
-  (name: 'eye', icon: url('data:image/svg+xml;utf8,<svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 9.5C10.933 9.5 12.5 7.933 12.5 6C12.5 4.067 10.933 2.5 9 2.5C7.067 2.5 5.5 4.067 5.5 6C5.5 7.933 7.067 9.5 9 9.5Z" fill="%233858E9"/><path fill-rule="evenodd" clip-rule="evenodd" d="M9 0C15 0 18 6 18 6C18 6 15 12 9 12C3 12 0 6 0 6C0 6 3 0 9 0ZM1.7411 6C1.76335 5.96583 1.7865 5.93066 1.81058 5.89455C2.14492 5.39303 2.64648 4.72484 3.31066 4.06066C4.64716 2.72416 6.53814 1.5 9 1.5C11.4619 1.5 13.3528 2.72416 14.6893 4.06066C15.3535 4.72484 15.8551 5.39303 16.1894 5.89455C16.2135 5.93066 16.2367 5.96583 16.2589 6C16.2367 6.03417 16.2135 6.06934 16.1894 6.10545C15.8551 6.60697 15.3535 7.27516 14.6893 7.93934C13.3528 9.27584 11.4619 10.5 9 10.5C6.53814 10.5 4.64716 9.27584 3.31066 7.93934C2.64648 7.27516 2.14492 6.60697 1.81058 6.10545C1.7865 6.06934 1.76335 6.03417 1.7411 6Z" fill="%233858E9"/></svg>'))
+  (name: 'eye', icon: url('data:image/svg+xml;utf8,<svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 9.5C10.933 9.5 12.5 7.933 12.5 6C12.5 4.067 10.933 2.5 9 2.5C7.067 2.5 5.5 4.067 5.5 6C5.5 7.933 7.067 9.5 9 9.5Z" fill="%233858E9"/><path fill-rule="evenodd" clip-rule="evenodd" d="M9 0C15 0 18 6 18 6C18 6 15 12 9 12C3 12 0 6 0 6C0 6 3 0 9 0ZM1.7411 6C1.76335 5.96583 1.7865 5.93066 1.81058 5.89455C2.14492 5.39303 2.64648 4.72484 3.31066 4.06066C4.64716 2.72416 6.53814 1.5 9 1.5C11.4619 1.5 13.3528 2.72416 14.6893 4.06066C15.3535 4.72484 15.8551 5.39303 16.1894 5.89455C16.2135 5.93066 16.2367 5.96583 16.2589 6C16.2367 6.03417 16.2135 6.06934 16.1894 6.10545C15.8551 6.60697 15.3535 7.27516 14.6893 7.93934C13.3528 9.27584 11.4619 10.5 9 10.5C6.53814 10.5 4.64716 9.27584 3.31066 7.93934C2.64648 7.27516 2.14492 6.60697 1.81058 6.10545C1.7865 6.06934 1.76335 6.03417 1.7411 6Z" fill="%233858E9"/></svg>')),
+  (name: 'clone', icon: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.25 8.75H13V10.25H10.25V13H8.75V10.25H6V8.75H8.75V6H10.25V8.75Z" fill="%231E1E1E"/><path fill-rule="evenodd" clip-rule="evenodd" d="M13 3H14C15.1046 3 16 3.89543 16 5V14C16 15.1046 15.1046 16 14 16H5C3.89543 16 3 15.1046 3 14V13H2C0.89543 13 0 12.1046 0 11V2C0 0.89543 0.895431 0 2 0H11C12.1046 0 13 0.895431 13 2V3ZM11 1.5H2C1.72386 1.5 1.5 1.72386 1.5 2V11C1.5 11.2761 1.72386 11.5 2 11.5H3V5C3 3.89543 3.89543 3 5 3H11.5V2C11.5 1.72386 11.2761 1.5 11 1.5ZM5 4.5H14C14.2761 4.5 14.5 4.72386 14.5 5V14C14.5 14.2761 14.2761 14.5 14 14.5H5C4.72386 14.5 4.5 14.2761 4.5 14V5C4.5 4.72386 4.72386 4.5 5 4.5Z" fill="%231E1E1E"/></svg>'))
 );
 
 @each $icon in $icons {  

diff --git a/assets/src/components/repeater/layout/tab/Tab.jsx b/assets/src/components/repeater/layout/tab/Tab.jsx
@@ -45,6 +45,18 @@ const Tab = ({
               </Button> }
           </div>
           <div className='tf-repeater-tab-icon-actions'>
+            { maxLength !== undefined &&
+              <Button
+                type="icon-clone"
+                contentVisuallyHidden={ true }
+                isDisabled={ maxLength <= items.length }
+                onPress={() => dispatch({
+                  type : 'clone',
+                  item : items[ activeItem ]
+                })}
+              >
+                Clone
+              </Button> }
             { maxLength !== undefined &&
               <ModalTrigger
                 label="Remove"

diff --git a/tests/jest/cases/components/repeaters/common.js b/tests/jest/cases/components/repeaters/common.js
@@ -270,8 +270,13 @@ const commonRepeaterTests = (layout, args = {}) => {
     addButton = within(container).getByText(config.addText)
     expect(addButton).toBeDisabled()
 
-    if( layout !== 'bare' ) {
-      cloneButton  = within(container).getAllByText(config.cloneText)
+    if( layout === 'tab' ) {
+      cloneButton = within(container).getByText(config.cloneText)
+      cloneButton = cloneButton.parentNode // Child element because visually hidden
+      expect(cloneButton).toBeDisabled()
+    }
+    else if( layout !== 'bare' ) {
+      cloneButton = within(container).getAllByText(config.cloneText)
       expect(cloneButton[0]).toBeDisabled()
       expect(cloneButton[1]).toBeDisabled()
     }