@iress-oss/ids-mcp-server 6.0.0-alpha.1-canary-20251204032753-fe18cab → 6.0.0-alpha.1-canary-20251204040305-3639454

package/generated/docs/components_components-expander-docs.md

@@ -0,0 +1,428 @@
+Expander
+========
+
+Overview
+--------
+
+Expanders are commonly used to reveal more information or details about an element or content on a page.
+
+* * *
+
+Updated
+
+**Recently updated**
+
+This component has been recently updated with new props. The props have been marked as beta. Please tell us if there are any issues.
+
+[](./iframe.html?id=components-expander--default)
+
+Expander activator
+
+Expander content will go here
+
+```
+
+<IressExpander activator\="Expander activator"\>
+  Expander content will go here
+</IressExpander\>
+
+```
+
+Props
+-----
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| activator\* | 
+The element used to activate the expandable container.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Expander activator"
+
+ |
+| activatorStyle | 
+
+This allows you to customise the content styling specifically, which is the floating element. It accepts an object with any of the styling properties available on `IressCSSProps`, as well as `className` and `style`.
+
+IressCustomiseSlot
+
+
+
+ | { } | Set object |
+| children | 
+
+Contents that will be expanded/collapsed when the expander is activated.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Expander content will go here"
+
+ |
+| mode | 
+
+Controls the display mode of the activator element. Can be Section, Heading or Link.
+
+union
+
+
+
+ | 
+
+'section'
+
+ | 
+
+sectionlink
+
+ |
+| onChange | 
+
+Emitted when the open state changes.
+
+(newValue: boolean) => void
+
+ | \- | \- |
+| open | 
+
+When true the expandable container will be visible and the activator will display as open.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+
+Accessibility
+-------------
+
+For Accessibility guidelines refer to [W3 ARIA Patterns Disclosure](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/), [W3 ARIA Patterns Accordion](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/).
+
+Examples
+--------
+
+### Mode
+
+Expander has a `mode` prop which can be used to change how the expander is displayed. There are two modes `section` (default) and `link`.
+
+*   `section` mode is used to expand larger sections of rich content, such as a table or a detailed transcript.
+*   `link` mode is used to expand a small section of content, usually used to provide additional context (eg. "Learn more" or "See more details").
+
+[](./iframe.html?id=components-expander--mode)
+
+Section (default)
+-----------------
+
+Expander activator
+
+Expander content will go here
+
+Link
+----
+
+Expander activator
+
+Expander content will go here
+
+```
+
+<IressStack gap\="lg"\>
+  <IressStack gap\="xs"\>
+    <IressText element\="h2"\>
+      Section (default)    </IressText\>
+    <IressExpander
+      activator\="Expander activator"
+      mode\="section"
+    \>
+      Expander content will go here    </IressExpander\>
+  </IressStack\>
+  <IressStack gap\="xs"\>
+    <IressText element\="h2"\>
+      Link    </IressText\>
+    <IressExpander
+      activator\="Expander activator"
+      mode\="link"
+    \>
+      Expander content will go here    </IressExpander\>
+  </IressStack\>
+</IressStack\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| activator\* | 
+The element used to activate the expandable container.
+
+ReactNode
+
+
+
+ | \- | \- |
+| activatorStyle | 
+
+This allows you to customise the content styling specifically, which is the floating element. It accepts an object with any of the styling properties available on `IressCSSProps`, as well as `className` and `style`.
+
+IressCustomiseSlot
+
+
+
+ | { } | Set object |
+| children | 
+
+Contents that will be expanded/collapsed when the expander is activated.
+
+ReactNode
+
+
+
+ | \- | \- |
+| mode | 
+
+Controls the display mode of the activator element. Can be Section, Heading or Link.
+
+union
+
+
+
+ | 
+
+'section'
+
+ | \- |
+| onChange | 
+
+Emitted when the open state changes.
+
+(newValue: boolean) => void
+
+ | \- | \- |
+| open | 
+
+When true the expandable container will be visible and the activator will display as open.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+
+### Open
+
+The `open` prop can be used to control the open state of the expander as can be seen below.
+
+[](./iframe.html?id=components-expander--open)
+
+Expander activator
+
+Expander content will go here
+
+```
+
+<IressExpander
+  activator\="Expander activator"
+  open
+\>
+  Expander content will go here
+</IressExpander\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| activator\* | 
+The element used to activate the expandable container.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Expander activator"
+
+ |
+| activatorStyle | 
+
+This allows you to customise the content styling specifically, which is the floating element. It accepts an object with any of the styling properties available on `IressCSSProps`, as well as `className` and `style`.
+
+IressCustomiseSlot
+
+
+
+ | { } | Set object |
+| children | 
+
+Contents that will be expanded/collapsed when the expander is activated.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Expander content will go here"
+
+ |
+| mode | 
+
+Controls the display mode of the activator element. Can be Section, Heading or Link.
+
+union
+
+
+
+ | 
+
+'section'
+
+ | 
+
+sectionlink
+
+ |
+| onChange | 
+
+Emitted when the open state changes.
+
+(newValue: boolean) => void
+
+ | \- | \- |
+| open | 
+
+When true the expandable container will be visible and the activator will display as open.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | FalseTrue |
+
+### Multiple expanders (accordion)
+
+You can use multiple expanders to create an accordion, where all expander closes when another is opened.
+
+[](./iframe.html?id=components-expander--multiple)
+
+Top
+
+Expander content for the top activator goes here.
+
+Bottom
+
+Expander content for the bottom activator goes here.
+
+```
+
+export const MultipleExpander \= () \=> {
+  const \[openActivator, setOpenActivator\] \= useState('');
+  const handleChange \= (newOpenActivator: string, open?: boolean) \=> {
+    setOpenActivator(open ? newOpenActivator : '');
+  };
+  return (
+    <div\>
+      <IressExpander
+        activator\="Top"
+        open\={openActivator \=== 'top'}
+        onChange\={(open) \=> handleChange('top', open)}
+      \>
+        Expander content for the top activator goes here.      </IressExpander\>
+      <IressExpander
+        activator\="Bottom"
+        open\={openActivator \=== 'bottom'}
+        onChange\={(open) \=> handleChange('bottom', open)}
+      \>
+        Expander content for the bottom activator goes here.      </IressExpander\>
+    </div\>
+  );
+};
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| activator\* | 
+The element used to activate the expandable container.
+
+ReactNode
+
+
+
+ | \- | \- |
+| activatorStyle | 
+
+This allows you to customise the content styling specifically, which is the floating element. It accepts an object with any of the styling properties available on `IressCSSProps`, as well as `className` and `style`.
+
+IressCustomiseSlot
+
+
+
+ | { } | \- |
+| children | 
+
+Contents that will be expanded/collapsed when the expander is activated.
+
+ReactNode
+
+
+
+ | \- | \- |
+| mode | 
+
+Controls the display mode of the activator element. Can be Section, Heading or Link.
+
+union
+
+
+
+ | 
+
+'section'
+
+ | \- |
+| onChange | 
+
+Emitted when the open state changes.
+
+(newValue: boolean) => void
+
+ | \- | \- |
+| open | 
+
+When true the expandable container will be visible and the activator will display as open.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | \- |