#638 - Documentation added

pnp · Aug 24, 2020 · 079ba38 · 079ba38
1 parent 5d04223
commit 079ba38
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 1 deletion.
diff --git a/docs/documentation/docs/assets/accordion.png b/docs/documentation/docs/assets/accordion.png
diff --git a/docs/documentation/docs/controls/Accordion.md b/docs/documentation/docs/controls/Accordion.md
@@ -0,0 +1,44 @@
+# Accordion
+
+This control allows you to render an accordion control.
+
+Here is an example of the control in action:
+
+![Accordion control](../assets/accordion.png)
+
+## How to use this control in your solutions
+
+- Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../../#getting-started) page for more information about installing the dependency.
+- In your component file, import the `Accordion` control as follows:
+
+```TypeScript
+import { Accordion } from "@pnp/spfx-controls-react/lib/Accordion";
+```
+
+- Use the `Accordion` control in your code as follows:
+
+```TypeScript
+{
+  sampleItems.map((item, index) => (
+    <Accordion title={item.Question} defaultCollapsed={true} className={"itemCell"} key={index}>
+      <div className={"itemContent"}>
+        <div className={"itemResponse"}>{item.Reponse}</div>
+        <div className={"itemIndex"}>{`Langue :  ${item.Langue.Nom}`}</div>
+      </div>
+    </Accordion>
+  ))
+}
+```
+
+## Implementation
+
+The `Accordion` control can be configured with the following properties:
+
+| Property | Type | Required | Description | Default |
+| ---- | ---- | ---- | ---- | ---- |
+| title | string | yes | The title in the accordion to display. | |
+| defaultCollapsed | boolean | no | Is the accordion by default collapsed? | false |
+| className | string | no | Additional class name to add to your accordion. | |
+
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/Accordion)
diff --git a/docs/documentation/docs/index.md b/docs/documentation/docs/index.md
@@ -49,6 +49,7 @@ telemetry.optOut();
 
 The following controls are currently available:
 
+- [Accordion](./controls/Accordion) (Control to render an accordion)
 - [Carousel](./controls/Carousel) (Control displays children elements with 'previous/next element' options)
 - [Charts](./controls/ChartControl) (makes it easy to integrate [Chart.js](https://www.chartjs.org/) charts into web part)
 - [ComboBoxListItemPicker](./controls/ComboBoxListItemPicker) (allows to select one or more items from a list)

diff --git a/docs/documentation/mkdocs.yml b/docs/documentation/mkdocs.yml
@@ -2,6 +2,7 @@ site_name: '@pnp/spfx-controls-react'
 nav:
   - Home: 'index.md'
   - Controls:
+    - Accordion: 'controls/Accordion.md'
     - Carousel: 'controls/Carousel.md'
     - Charts:
       - "ChartControl": 'controls/ChartControl.md'

diff --git a/src/controls/accordion/Accordion.tsx b/src/controls/accordion/Accordion.tsx
@@ -4,6 +4,7 @@ import { IAccordionProps, IAccordionState } from './index';
 import { css } from "@uifabric/utilities/lib/css";
 import { DefaultButton } from 'office-ui-fabric-react/lib/components/Button';
 import { IIconProps } from 'office-ui-fabric-react/lib/Icon';
+import * as telemetry from '../../common/telemetry';
 
 /**
  * Icon styles. Feel free to change them
@@ -17,8 +18,10 @@ export class Accordion extends React.Component<IAccordionProps, IAccordionState>
     super(props);
 
     this.state = {
-      expanded: props.defaultCollapsed == null ? false : !props.defaultCollapsed
+      expanded: props.defaultCollapsed === null ? false : !props.defaultCollapsed
     };
+
+    telemetry.track('ReactAccordion', {});
   }
 
   public render(): React.ReactElement<IAccordionProps> {