feat(@vtmn/svelte): add property for ol attributes VtmnBreadcrumb (…

…#1481)
Decathlon · Feb 12, 2024 · 97f3245 · 97f3245
1 parent 288b2c4
commit 97f3245
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/packages/sources/svelte/src/components/navigation/VtmnBreadcrumb/VtmnBreadcrumb.svelte b/packages/sources/svelte/src/components/navigation/VtmnBreadcrumb/VtmnBreadcrumb.svelte
@@ -8,11 +8,17 @@
    */
   export let className = undefined;
 
+  /**
+   * Properties applied on the `ol` node
+   * @type {object}
+   */
+  export let orderedListAttributes = {};
+
   $: componentClass = cn('vtmn-breadcrumb', className);
 </script>
 
 <nav class={componentClass} {...$$restProps}>
-  <ol>
+  <ol {...orderedListAttributes}>
     <slot />
   </ol>
 </nav>

diff --git a/packages/sources/svelte/src/components/navigation/VtmnBreadcrumb/test/VtmnBreadcrumb.spec.js b/packages/sources/svelte/src/components/navigation/VtmnBreadcrumb/test/VtmnBreadcrumb.spec.js
@@ -16,6 +16,15 @@ describe('VtmnBreadcrumbWithSlot', () => {
     expect(container.querySelector('ol').children.length).toEqual(3);
   });
 
+  test('Should apply property on the ol node', () => {
+    const { getByTestId } = render(VtmnBreadcrumbWithSlot, {
+      orderedListAttributes: {
+        'data-testid': 'foo',
+      },
+    });
+    expect(getByTestId('foo')).toBeVisible();
+  });
+
   test('Should apply a custom class on the breadcrumb', () => {
     const { container } = render(VtmnBreadcrumbWithSlot, {
       class: 'custom-class',