#638 - Changes to make the new Accordion control work in v1

Author: estruyf

src/Accordion.ts

@@ -0,0 +1 @@
+export * from "./controls/accordion";

src/controls/accordion/Accordion.module.scss

@@ -0,0 +1,49 @@
+@import "~office-ui-fabric-react/dist/sass/References.scss";
+
+.accordion {
+  background: #fafafa;
+
+  & > button {
+    min-height: 44px;
+    border: 2px solid transparent;
+    outline: 1px solid transparent;
+    outline-offset: -3px;
+    background: #f0f0f0; // Microsoft web site doesn't use Fabric colors!
+    color: rgba(0, 0, 0, 0.8); // Microsoft web site doesn't use Fabric colors!
+    text-align: left;
+    width: 100%;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.2); // Microsoft web site doesn't use Fabric colors!
+
+    :global(.ms-Button-label) {
+      font-weight: 400;
+    }
+
+    &:hover,
+    &:focus {
+      box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.16); // Microsoft web site doesn't use Fabric colors!
+      color: $ms-color-black;
+      background: #f0f0f0; // Microsoft web site doesn't use Fabric colors!
+    }
+
+    &:focus {
+      border-width: 2px;
+      border-style: solid;
+      border-color: $ms-color-black;
+      outline-color: rgba(255, 255, 255, 0.6); // Microsoft web site doesn't use Fabric colors!
+    }
+  }
+
+  .drawer {
+    padding: 24px 12px 24px 12px;
+    background: #fafafa; // Microsoft web site doesn't use Fabric colors!
+    font-weight: 400;
+    font-size: 15px;
+    line-height: 20px;
+  }
+}
+
+.accordionChevron {
+  font-size: 16px;
+  margin-left: -6px;
+  color: rgba(0, 0, 0, 0.8);
+}

src/controls/accordion/Accordion.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import styles from './Accordion.module.scss';
+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';
+
+/**
+ * Icon styles. Feel free to change them
+ */
+const collapsedIcon: IIconProps = { iconName: 'ChevronRight', className: styles.accordionChevron };
+const expandedIcon: IIconProps = { iconName: 'ChevronDown', className: styles.accordionChevron };
+
+export class Accordion extends React.Component<IAccordionProps, IAccordionState> {
+  private _drawerDiv: HTMLDivElement = undefined;
+  constructor(props: IAccordionProps) {
+    super(props);
+
+    this.state = {
+      expanded: props.defaultCollapsed == null ? false : !props.defaultCollapsed
+    };
+  }
+
+  public render(): React.ReactElement<IAccordionProps> {
+    return (
+      <div className={css(styles.accordion, this.props.className)}>
+        <DefaultButton
+          toggled={true}
+          checked={this.state.expanded}
+          text={this.props.title}
+          iconProps={this.state.expanded ? expandedIcon : collapsedIcon}
+          onClick={() => {
+            this.setState({
+              expanded: !this.state.expanded
+            });
+          }}
+          aria-expanded={this.state.expanded}
+          aria-controls={this._drawerDiv && this._drawerDiv.id}
+        />
+        {this.state.expanded &&
+          <div className={styles.drawer} ref={(el) => { this._drawerDiv = el; }}>
+            {this.props.children}
+          </div>
+        }
+      </div>
+    );
+  }
+}
+

src/controls/accordion/IAccordion.types.ts

@@ -0,0 +1,10 @@
+
+export interface IAccordionProps {
+  defaultCollapsed?: boolean;
+  title: string;
+  className?: string;
+}
+
+export interface IAccordionState {
+  expanded: boolean;
+}

src/controls/accordion/index.ts

@@ -0,0 +1,2 @@
+export * from './Accordion';
+export * from './IAccordion.types';

src/index.ts

@@ -33,3 +33,4 @@ export * from './FieldTextRenderer';
 export * from './FieldTitleRenderer';
 export * from './FieldUrlRenderer';
 export * from './FieldUserRenderer';
+export * from './Accordion';

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -60,6 +60,7 @@ import { FolderExplorer, IFolder, IBreadcrumbItem } from '../../../FolderExplore
 import { Pagination } from '../../../controls/pagination';
 import CarouselImage from '../../../controls/carousel/CarouselImage';
 import { FieldCollectionData, CustomCollectionFieldType } from '../../../FieldCollectionData';
+import { Accordion } from '../../..';
 
 /**
  * The sample data below was randomly generated (except for the title). It is used by the grid layout
@@ -101,6 +102,39 @@ const sampleGridData: any[] = [{
   activity: "5/26/2019"
 }];
 
+const sampleItems = [
+  {
+    Langue: { Nom: 'Français' },
+    Question: 'Charger des fichiers et dossiers',
+    Reponse: '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.'
+  },
+  {
+    Langue: { Nom: 'Français' },
+    Question: 'Enregistrer un fichier',
+    Reponse: '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.'
+  },
+  {
+    Langue: { Nom: 'Français' },
+    Question: 'Troisième exemple',
+    Reponse: '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.'
+  },
+  {
+    Langue: { Nom: 'Français' },
+    Question: 'Quatrième exemple',
+    Reponse: '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.'
+  },
+  {
+    Langue: { Nom: 'Français' },
+    Question: 'Cinquième exemple',
+    Reponse: '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.'
+  },
+  {
+    Langue: { Nom: 'Français' },
+    Question: 'Sixième exemple',
+    Reponse: '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.'
+  }
+];
+
 /**
  * Component that can be used to test out the React controls from this project
  */
@@ -600,6 +634,17 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
             <Link href="https://pnp.github.io/sp-dev-fx-controls-react/">See all</Link>
           } />
 
+        {
+          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>
+          ))
+        }
+
         <div className="ms-font-m">Services tester:
           <TaxonomyPicker
             allowMultipleSelections={true}