feat(doc): add more info on accordion is-open state

ovh · Dec 30, 2024 · 75c56f5 · 75c56f5
1 parent 39f68fc
commit 75c56f5
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 9 deletions.
diff --git a/packages/examples/react-webpack/src/app/components/testAccordion/TestAccordion.tsx b/packages/examples/react-webpack/src/app/components/testAccordion/TestAccordion.tsx
@@ -4,7 +4,7 @@ import React, { type ReactElement, useRef, useState } from 'react';
 
 function TestAccordion(): ReactElement {
   const [isOpen, setIsOpen] = useState(false);
-  const accordionRef = useRef<HTMLOdsAccordionElement>(null)
+  const accordionRef = useRef<HTMLOdsAccordionElement>(null);
 
   function onToggleClick() {
     accordionRef.current?.toggle();
@@ -21,7 +21,7 @@ function TestAccordion(): ReactElement {
         <span slot="summary">Hello, world!</span>
 
         <span>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+          Lorem ipsum dolor sit amet ...
         </span>
       </OdsAccordion>
 

diff --git a/packages/ods/src/components/accordion/tests/setup.ts b/packages/ods/src/components/accordion/tests/setup.ts
@@ -1,9 +1,7 @@
-const mutationObserverMock = jest
+global.MutationObserver = jest
   .fn<MutationObserver, [MutationCallback]>()
   .mockImplementation(() => ({
     disconnect: jest.fn(),
     observe: jest.fn(),
     takeRecords: jest.fn(),
   }));
-
-global.MutationObserver = mutationObserverMock;
diff --git a/packages/ods/src/components/select/tests/setup.ts b/packages/ods/src/components/select/tests/setup.ts
@@ -1,9 +1,7 @@
-const mutationObserverMock = jest
+global.MutationObserver = jest
   .fn<MutationObserver, [MutationCallback]>()
   .mockImplementation(() => ({
     disconnect: jest.fn(),
     observe: jest.fn(),
     takeRecords: jest.fn(),
   }));
-
-global.MutationObserver = mutationObserverMock;
diff --git a/packages/storybook/stories/components/accordion/technical-information.mdx b/packages/storybook/stories/components/accordion/technical-information.mdx
@@ -1,5 +1,7 @@
-import { Canvas, Meta } from '@storybook/blocks';
+import { ODS_MESSAGE_COLOR } from '@ovhcloud/ods-components';
+import { OdsLink, OdsMessage } from '@ovhcloud/ods-components/react';
 import SpecificationsAccordion from '@ovhcloud/ods-components/src/components/accordion/documentation/custom-elements.json';
+import { Canvas, Meta, Source } from '@storybook/blocks';
 import { Banner } from '../../../src/components/banner/Banner';
 import { Heading } from '../../../src/components/heading/Heading';
 import { TechnicalSpecification } from '../../../src/components/technicalSpecification/TechnicalSpecification';
@@ -15,6 +17,61 @@ import * as AccordionStories from './accordion.stories';
 
 <TechnicalSpecification data={ SpecificationsAccordion } />
 
+<OdsMessage color={ ODS_MESSAGE_COLOR.information }
+            isDismissible={ false }>
+  <div>
+    ODS component is using internally the native <OdsLink href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details" label="<details>" target="_blank" /> HTML element.
+
+    This component does handle its open state on its own. It is therefore quite difficult to keep an internal state sync
+    without having some useless re-rendering.
+
+    That's why the `is-open` attribute should be used as an initialization value and not as an active state.
+
+    If you need to keep the component state, update it using `odsToggle` events.
+
+    Here is an example using React:
+
+    <Source code={`
+import type { OdsAccordionToggleEvent } from '@ovhcloud/ods-components';
+import { OdsAccordion, OdsButton } from '@ovhcloud/ods-components/react';
+import React, { type ReactElement, useRef, useState } from 'react';
+
+function TestAccordion(): ReactElement {
+  const [isOpen, setIsOpen] = useState(false);
+  const accordionRef = useRef<HTMLOdsAccordionElement>(null);
+
+  function onToggleClick() {
+    accordionRef.current?.toggle();
+  }
+
+  return (
+    <div>
+      <p>
+        Accordion isOpen value: { isOpen.toString() }
+      </p>
+
+      <OdsAccordion onOdsToggle={ (e: OdsAccordionToggleEvent) => setIsOpen(e.detail.isOpen) }
+                    ref={ accordionRef }>
+        <span slot="summary">Hello, world!</span>
+
+        <span>
+          Lorem ipsum dolor sit amet ...
+        </span>
+      </OdsAccordion>
+
+      <br /><br />
+
+      <OdsButton onClick={ onToggleClick }
+                   label="Toggle accordion" />
+      </div>
+    );
+  }
+`}
+            dark="true"
+            language="tsx" />
+  </div>
+</OdsMessage>
+
 <Heading label="Style customization" level={ 2 } />
 
 You can add your own style on the accordion element using the parts `accordion`, `summary` and `content`.