diff --git a/docs/documentation/docs/assets/accordion.png b/docs/documentation/docs/assets/accordion.png new file mode 100644 index 000000000..5939115f6 Binary files /dev/null and b/docs/documentation/docs/assets/accordion.png differ diff --git a/docs/documentation/docs/controls/Accordion.md b/docs/documentation/docs/controls/Accordion.md new file mode 100644 index 000000000..57473c80d --- /dev/null +++ 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) => ( + +
+
{item.Reponse}
+
{`Langue : ${item.Langue.Nom}`}
+
+
+ )) +} +``` + +## 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 index a30861828..0b25a8499 100644 --- 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 index 1b46b59a0..9b67e0085 100644 --- 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 index 261db1beb..9904b051c 100644 --- 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 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 {