feat(@vtmn/svelte, @vtmn/react): added `onClose` and `onOpen` directives on both React & Svelte `VtmnAccordion` components

[DKT-cdrag]

FEAT - Added onOpen onClose callback events on both React and Svelte Accordion components

Changes description

• Added on:close and on:open directives on Svelte Accordion component
• Added onClose and onOpen props on React Accordion component

Context

In a project hosting Decathlon Design System components, the devs needed an Accordion which can call a callback whenever the user open / closes the Accordion

Checklist

• [x] Tested on related showcases.
• [x] Added unit testing on Svelte component

Does this introduce a breaking change?

No

Other information

Not sure about the implementation of the React component : I didn't want to override the current implementation (adding state etc), so I added a ref and a callback (without preventing the default behaviour), but I'm not sure about the onClose and onOpen parameter (event)

[CLAassistant]

All committers have signed the CLA.

[Tlahey]

On the file packages/showcases/core/csf/components/structure/accordion.csf.js you can add close and open to add the new actions :)

[DKT-cdrag]

For some reason, on the Svelte package, I was unable to add the on:close & on:open directives into the events section, instead there are interpretated as regular props, leaving the events section empty.

[lauthieb]

For some reason, on the Svelte package, I was unable to add the on:close & on:open directives into the events section, instead there are interpretated as regular props, leaving the events section empty.

Maybe you can override Storybook parameters? https://storybook.js.org/docs/react/api/csf

[lauthieb]

Hi @DKT-cdrag, just converted to draft as @Tlahey give you some comments. Feel free to make this pr "ready for review" again when you will be ready for a new review. Thanks :)

[lauthieb]

Hi @DKT-cdrag, are you okay to do these changes? Thanks :)

[Tlahey]

Hello @DKT-cdrag

For your issue, you can check what we have done on the VtmnQuantity.stories.svelte

<script>
  import { action } from '@storybook/addon-actions';
</script>

<Story name="xxxxx" let:args>
  <VtmnAccordion
    summary="Item 1"
    class="accordion-stories"
    open
    on:close={action('close')}
    on:open={action('open')}
    {...args}
  >
    {args.slot}
  </VtmnAccordion>
</Story>

And update on your accordion.csf the the handles

export const parameters = {
  actions: {
    handles: ['mouseenter', 'click', 'focusin', 'focusout', 'on:close', 'on:open'],
  },
  design: {
    type: 'figma',
    url: 'https://www.figma.com/file/zDZIyayUlr1yTWrsi7cFoo/?node-id=8029%3A29057',
  },
};

enjoy :)

[DKT-cdrag]

Hello everyone,

The changes requested have been applied, I'll let you review those changes I figured out that the on:close and on:open were not displayed because the dispatch function had a ternary expression as the first argument, I just had to replace it into two distinct dispatches.

[lauthieb]

@DKT-cdrag this PR is stale for weeks. In order to have visibility, can we close it for now, and you can reopen it when you will be available? Thanks :)

[lauthieb]

@DKT-cdrag this PR is stale for weeks. In order to have visibility, can we close it for now, and you can reopen it when you will be available? Thanks :)

Hello all, as this PR is still stale & related to a community library, I propose to reopen it when you will have time to do this. Have a great day :) Laurent