From 7682d2c1843b8071428f1d2bee3f62fd41142339 Mon Sep 17 00:00:00 2001
From: Maximilian Blazek <68336485+dgtlntv@users.noreply.github.com>
Date: Mon, 29 Apr 2024 09:41:01 +0200
Subject: [PATCH] Testing react docs

---
 .../docs/components/accordion/react/index.md  | 41 ++++++++++++++++++-
 1 file changed, 40 insertions(+), 1 deletion(-)

diff --git a/vanilla/templates/docs/components/accordion/react/index.md b/vanilla/templates/docs/components/accordion/react/index.md
index 0c936cd..f4a9d8c 100644
--- a/vanilla/templates/docs/components/accordion/react/index.md
+++ b/vanilla/templates/docs/components/accordion/react/index.md
@@ -4,4 +4,43 @@ context:
   title: Accordion | React
 ---
 
-# 🚧 WIP 🚧
+The sidebar accordion, used in listing pages or as navigation, can hold multiple navigation items or to be used as a filter for content.
+
+# Props
+
+| name                 | DESCRIPTION                                                                                                                                                                                           | DEFAULT |
+| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
+| className            | Optional classes applied to the parent element. `string`                                                                                                                                              |         |
+| expanded             | An optional value to set the expanded section. The value must match a section key. This value will only set the expanded section on first render if externallyControlled is not set to true. `string` |         |
+| externallyControlled | Whether the expanded section will be controlled via external state. `boolean`                                                                                                                         |         |
+| onExpandedChange     | Optional function that is called when the expanded section is changed. The function is provided the section title or null. `(id: string, title: string) => void`                                      |         |
+| sections\*           | An array of sections and content. `Section[]`                                                                                                                                                         |         |
+| titleElement         | Optional string describing heading element that should be used for the section titles. `"h2"` `"h3"` `"h4"` `"h5"` `"h6"`                                                                             |         |
+
+## Default
+
+<iframe
+  src="https://canonical.github.io/react-components/iframe.html?args=&id=accordion--default-story&viewMode=story"
+  width="800"
+  height="260"
+></iframe>
+
+## External state
+
+The expanded accordion section can be controlled by external state.
+
+<iframe
+  src="https://canonical.github.io/react-components/iframe.html?args=&id=accordion--external-state&viewMode=story"
+  width="800"
+  height="260"
+></iframe>
+
+## Headings
+
+`titleElement` prop can be used to define heading element for section titles.
+
+<iframe
+  src="https://canonical.github.io/react-components/iframe.html?args=&id=accordion--headings&viewMode=story"
+  width="800"
+  height="260"
+></iframe>