From 34fe7129a5661695a524477e0c69a5f424046877 Mon Sep 17 00:00:00 2001
From: sadomovalex <sadomovalex@gmail.com>
Date: Fri, 21 Aug 2020 17:44:29 +0300
Subject: [PATCH] Add Accordion control from
 https://github.com/hugoabernier/AccordionWebPart

---
 src/Accordion.ts                             |  1 +
 src/controls/accordion/Accordion.module.scss | 49 ++++++++++++++++++++
 src/controls/accordion/Accordion.tsx         | 48 +++++++++++++++++++
 src/controls/accordion/IAccordion.types.ts   | 10 ++++
 src/controls/accordion/index.ts              |  2 +
 src/index.ts                                 |  1 +
 6 files changed, 111 insertions(+)
 create mode 100644 src/Accordion.ts
 create mode 100644 src/controls/accordion/Accordion.module.scss
 create mode 100644 src/controls/accordion/Accordion.tsx
 create mode 100644 src/controls/accordion/IAccordion.types.ts
 create mode 100644 src/controls/accordion/index.ts

diff --git a/src/Accordion.ts b/src/Accordion.ts
new file mode 100644
index 000000000..7fe965b56
--- /dev/null
+++ b/src/Accordion.ts
@@ -0,0 +1 @@
+export * from "./controls/accordion/index";
diff --git a/src/controls/accordion/Accordion.module.scss b/src/controls/accordion/Accordion.module.scss
new file mode 100644
index 000000000..aadc7f784
--- /dev/null
+++ b/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);
+}
diff --git a/src/controls/accordion/Accordion.tsx b/src/controls/accordion/Accordion.tsx
new file mode 100644
index 000000000..4c6baa777
--- /dev/null
+++ b/src/controls/accordion/Accordion.tsx
@@ -0,0 +1,48 @@
+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, IIconProps } from 'office-ui-fabric-react';
+
+/**
+ * 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
+          toggle
+          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>
+    );
+  }
+}
+
diff --git a/src/controls/accordion/IAccordion.types.ts b/src/controls/accordion/IAccordion.types.ts
new file mode 100644
index 000000000..70a1b0579
--- /dev/null
+++ b/src/controls/accordion/IAccordion.types.ts
@@ -0,0 +1,10 @@
+
+export interface IAccordionProps {
+  defaultCollapsed?: boolean;
+  title: string;
+  className?: string;
+}
+
+export interface IAccordionState {
+  expanded: boolean;
+}
diff --git a/src/controls/accordion/index.ts b/src/controls/accordion/index.ts
new file mode 100644
index 000000000..07b682d31
--- /dev/null
+++ b/src/controls/accordion/index.ts
@@ -0,0 +1,2 @@
+export * from './Accordion';
+export * from './IAccordion.types';
diff --git a/src/index.ts b/src/index.ts
index abdc4894e..b06840c1d 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -15,6 +15,7 @@ export * from './FolderExplorer';
 export * from './FolderPicker';
 export * from './IconPicker';
 export * from './Pagination';
+export * from './Accordion';
 
 export * from './IFrameDialog';
 export * from './IFramePanel';