+
+ {
+ this.props.tabs.map((tab: any, index: number) => {
+ return (
+
+
+
+
+
+
+
+ );
+ })
+ }
+
+
+ );
+ }
+ else
+ {
+ return (
+
+
+
+ {this.props.title}
+
+
+ {tab.Title}
+
+
+
+ {
+ this.props.tabs.map((tab: any, index: number) => {
+ return (
+
+
+
+
+
+
+
+
+ );
+ })
+ }
+
+
+ );
+ }
+
+
+ }
+}
diff --git a/samples/react-tabacordion/src/webparts/tabAccordion/components/CTab.module.scss b/samples/react-tabacordion/src/webparts/tabAccordion/components/CTab.module.scss
new file mode 100644
index 000000000..88eaa7f07
--- /dev/null
+++ b/samples/react-tabacordion/src/webparts/tabAccordion/components/CTab.module.scss
@@ -0,0 +1,119 @@
+@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
+.outermargin {
+ margin:1em 1em;
+}
+.tabs {
+ display: inline-block;
+ vertical-align: top;
+ width: 100%;
+ height: 100%;
+ margin-top: 20px;
+}
+
+.tabs .tablinks {
+ margin: 0;
+ padding: 0;
+ height: 58px;
+ position: relative;
+ background-color: $ms-color-neutralLighter;
+}
+
+.tabs .tablink {
+ cursor: pointer;
+ display: inline-block;
+ position: relative;
+ height: 58px;
+ line-height: 58px;
+ padding-left: 10px;
+ padding-right:10px;
+ font-family: "Segoe UI Web (West European)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
+ font-size: 17px;
+ font-weight: 400;
+ cursor: pointer;
+ margin-left: 20px;
+ color: $ms-color-neutralTertiary;
+}
+
+
+
+.tabs .tablinkactive {
+ cursor: pointer;
+ display: inline-block;
+ position: relative;
+ height: 58px;
+ line-height: 58px;
+ padding-left: 10px;
+ padding-right:10px;
+ font-family: "Segoe UI Web (West European)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
+ font-size: 17px;
+ font-weight: 400;
+ cursor: pointer;
+ font-weight: 600 !important;
+ margin-left: 20px;
+ color: $ms-color-themePrimary;
+}
+.tabs .tablinkactive span {
+ border-bottom:2px solid;
+ border-bottom-color: $ms-color-themePrimary;
+ padding-bottom: 15px;
+}
+.tabs .tablink:focus {
+ outline:none;
+}
+.tabs .tablinkactive:focus {
+ outline:none;
+}
+.tabs .content {
+ padding: 15px 35px;
+}
+
+
+.tabs .content table {
+ border:none;
+ border-collapse: collapse;
+ font-weight: 400;
+ font-size: 16px;
+}
+
+.tabs .content tr:first-child {
+ color:#fff;
+ border-top: 1px solid #ddd;
+ font-weight: 600;
+ background-color: #666;
+}
+
+.tabs .content td {
+ border-bottom: 1px solid #ddd;
+ padding:5px;
+ vertical-align: top;
+}
+.tabs .content tr {
+ border-left: 1px solid #ddd;
+ border-right:1px solid #ddd;
+ vertical-align: top;
+}
+
+.tabs .content img {
+ width:100%;
+}
+
+
+
+.tabs .content a {
+ color: $ms-color-themePrimary !important;
+}
+
+.activeLinkStyle {
+ border-Bottom: '2px solid rgb(0, 120, 212)'
+}
+
+.webparttitle {
+ font-size: 32px;
+ font-weight: 600;
+ display: inline-block;
+}
+
+.webpartheader > span {
+ float: right;
+ position:relative;
+}
\ No newline at end of file
diff --git a/samples/react-tabacordion/src/webparts/tabAccordion/components/CTab.tsx b/samples/react-tabacordion/src/webparts/tabAccordion/components/CTab.tsx
new file mode 100644
index 000000000..77851d7cb
--- /dev/null
+++ b/samples/react-tabacordion/src/webparts/tabAccordion/components/CTab.tsx
@@ -0,0 +1,142 @@
+
+
+import * as React from 'react';
+import styles from './CTab.module.scss';
+import { ICTabProps } from './ICTabProps';
+import { SPComponentLoader } from '@microsoft/sp-loader';
+import { escape } from '@microsoft/sp-lodash-subset';
+import { DisplayMode, Version } from '@microsoft/sp-core-library';
+import { Editor } from '@tinymce/tinymce-react';
+import {
+ Pivot,
+ PivotItem,
+ PivotLinkFormat,
+ PivotLinkSize
+} from 'office-ui-fabric-react/lib/Pivot';
+
+
+import { Tabs, TabLink, TabContent } from './utilities/Tab/index';
+
+
+export default class CTab extends React.Component
+
+
+ {this.props.title}
+
+
+ {tab.Title}
+
+
+
+
+
+ );
+ }
+ else
+ {
+ return (
+
+
+
+ {this.props.title}
+
+
+ {
+ this.props.tabs.map((tab: any, tabindex: number) => {
+ return (
+ {tab.Title}
+ );
+ })
+ }
+
+
+ {
+ this.props.tabs.map((tab: any, tabindex: number) => {
+ return (
+
+
+ );
+ })
+ }
+
+
+
+
+
+ );
+ }
+ }
+ }
+
\ No newline at end of file
diff --git a/samples/react-tabacordion/src/webparts/tabAccordion/components/ICAccordionProps.ts b/samples/react-tabacordion/src/webparts/tabAccordion/components/ICAccordionProps.ts
new file mode 100644
index 000000000..427a9fd3e
--- /dev/null
+++ b/samples/react-tabacordion/src/webparts/tabAccordion/components/ICAccordionProps.ts
@@ -0,0 +1,9 @@
+import { DisplayMode } from "@microsoft/sp-core-library";
+
+export interface ICAccordionProps {
+ tabs: any[];
+ displayMode: DisplayMode;
+ guid: string;
+ title: string;
+ accordion:boolean;
+}
\ No newline at end of file
diff --git a/samples/react-tabacordion/src/webparts/tabAccordion/components/ICTabProps.ts b/samples/react-tabacordion/src/webparts/tabAccordion/components/ICTabProps.ts
new file mode 100644
index 000000000..2cfac4211
--- /dev/null
+++ b/samples/react-tabacordion/src/webparts/tabAccordion/components/ICTabProps.ts
@@ -0,0 +1,8 @@
+import { DisplayMode } from "@microsoft/sp-core-library";
+
+export interface ICTabProps {
+ tabs: any[];
+ displayMode: DisplayMode;
+ guid: string;
+ title:string;
+}
diff --git a/samples/react-tabacordion/src/webparts/tabAccordion/components/tinymcereact.d.ts b/samples/react-tabacordion/src/webparts/tabAccordion/components/tinymcereact.d.ts
new file mode 100644
index 000000000..1b8a63b46
--- /dev/null
+++ b/samples/react-tabacordion/src/webparts/tabAccordion/components/tinymcereact.d.ts
@@ -0,0 +1 @@
+declare module '@tinymce/tinymce-react';
\ No newline at end of file
diff --git a/samples/react-tabacordion/src/webparts/tabAccordion/components/utilities/Accordion/Accordion.tsx b/samples/react-tabacordion/src/webparts/tabAccordion/components/utilities/Accordion/Accordion.tsx
new file mode 100644
index 000000000..b43a60820
--- /dev/null
+++ b/samples/react-tabacordion/src/webparts/tabAccordion/components/utilities/Accordion/Accordion.tsx
@@ -0,0 +1,92 @@
+import * as React from 'react';
+
+export interface IAccordionProps {
+ accordion?: boolean;
+ children?: JSX.Element[]|object;
+ className?: string;
+ onChange?: (any) => void;
+}
+export interface IAccordionState {
+ activeItems: any [];
+ accordion: boolean;
+}
+
+export default class Accordion extends React.Component
+
+
+ {this.props.title}
+
+
+ {
+ this.props.tabs.map((tab: any, tabindex: number) => {
+ return (
+ {tab.Title}
+ );
+ })
+ }
+
+
+ {
+ this.props.tabs.map((tab: any, tabindex: number) => {
+ return (
+
+
+
+ );
+ })
+ }
+
+
+ {this.renderItems()}
+
+ );
+ }
+}
\ No newline at end of file
diff --git a/samples/react-tabacordion/src/webparts/tabAccordion/components/utilities/Accordion/AccordionItem.tsx b/samples/react-tabacordion/src/webparts/tabAccordion/components/utilities/Accordion/AccordionItem.tsx
new file mode 100644
index 000000000..b5a0cc183
--- /dev/null
+++ b/samples/react-tabacordion/src/webparts/tabAccordion/components/utilities/Accordion/AccordionItem.tsx
@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { IAccordionItemTitleProps } from './AccordionItemTitle';
+import { IAccordionItemBodyProps } from './AccordionItemBody';
+
+export interface IAccordionItemProps {
+ accordion?: boolean;
+ onClick?: () => void;
+ expanded?: boolean;
+ children?: JSX.Element[];
+ className?: string;
+ hideBodyClassName?: string;
+ id?:string;
+}
+
+
+export default class AccordionItem extends React.Component
+ {this.renderChildren()}
+
+ );
+
+ }
+}
\ No newline at end of file
diff --git a/samples/react-tabacordion/src/webparts/tabAccordion/components/utilities/Accordion/AccordionItemBody.tsx b/samples/react-tabacordion/src/webparts/tabAccordion/components/utilities/Accordion/AccordionItemBody.tsx
new file mode 100644
index 000000000..b0c58bb0c
--- /dev/null
+++ b/samples/react-tabacordion/src/webparts/tabAccordion/components/utilities/Accordion/AccordionItemBody.tsx
@@ -0,0 +1,59 @@
+import * as React from 'react';
+
+
+export interface IAccordionItemBodyProps {
+ id?: string;
+ expanded?: boolean;
+ ariaControls?: string;
+ children?: JSX.Element|JSX.Element[];
+ className?: string;
+ hideBodyClassName?: string;
+ role?: string;
+ key?: string;
+}
+
+export default class AccordionItemBody extends React.Component
+ {children}
+
+ );
+ }
+ else
+ {
+ return (
+
+ {children}
+
+ );
+ }
+
+ }
+}
\ No newline at end of file
diff --git a/samples/react-tabacordion/src/webparts/tabAccordion/components/utilities/Accordion/AccordionItemTitle.tsx b/samples/react-tabacordion/src/webparts/tabAccordion/components/utilities/Accordion/AccordionItemTitle.tsx
new file mode 100644
index 000000000..69f5e71e5
--- /dev/null
+++ b/samples/react-tabacordion/src/webparts/tabAccordion/components/utilities/Accordion/AccordionItemTitle.tsx
@@ -0,0 +1,56 @@
+import * as React from 'react';
+
+
+export interface IAccordionItemTitleProps {
+ id?: string;
+ expanded?: boolean;
+ onClick?: () => void;
+ ariaControls?: string;
+ children?: JSX.Element|JSX.Element[];
+ className?: string;
+ hideBodyClassName?: string;
+ role?: string;
+ key?: string;
+ accordionElementName?: string;
+}
+
+export default class AccordionItemTitle extends React.Component
+ {children}
+
+ );
+ }
+}
\ No newline at end of file
diff --git a/samples/react-tabacordion/src/webparts/tabAccordion/components/utilities/Accordion/index.tsx b/samples/react-tabacordion/src/webparts/tabAccordion/components/utilities/Accordion/index.tsx
new file mode 100644
index 000000000..0b44f64df
--- /dev/null
+++ b/samples/react-tabacordion/src/webparts/tabAccordion/components/utilities/Accordion/index.tsx
@@ -0,0 +1,11 @@
+import Accordion from './Accordion';
+import AccordionItem from './AccordionItem';
+import AccordionItemTitle from './AccordionItemTitle';
+import AccordionItemBody from './AccordionItemBody';
+
+export {
+ Accordion,
+ AccordionItem,
+ AccordionItemTitle,
+ AccordionItemBody,
+};
\ No newline at end of file
diff --git a/samples/react-tabacordion/src/webparts/tabAccordion/components/utilities/Tab/TabContent.tsx b/samples/react-tabacordion/src/webparts/tabAccordion/components/utilities/Tab/TabContent.tsx
new file mode 100644
index 000000000..2fd106ec2
--- /dev/null
+++ b/samples/react-tabacordion/src/webparts/tabAccordion/components/utilities/Tab/TabContent.tsx
@@ -0,0 +1,50 @@
+import * as React from 'react';
+
+export interface ITabContentProps {
+ for: string|number;
+ visibleStyle?: object;
+ isVisible?: boolean;
+ renderActiveTabContentOnly?: boolean;
+ disableInlineStyles?: boolean;
+ className?: string;
+ visibleClassName?: string;
+ style?: string;
+ displayName?: string;
+ itemKey?:string;
+}
+
+
+export const styles = {
+ hidden: {
+ display: 'none',
+ },
+};
+
+export default class TabContent extends React.Component
+ {this.canRenderChildren() && this.props.children}
+
+ );
+ }
+}
\ No newline at end of file
diff --git a/samples/react-tabacordion/src/webparts/tabAccordion/components/utilities/Tab/TabLink.tsx b/samples/react-tabacordion/src/webparts/tabAccordion/components/utilities/Tab/TabLink.tsx
new file mode 100644
index 000000000..bb4a781cd
--- /dev/null
+++ b/samples/react-tabacordion/src/webparts/tabAccordion/components/utilities/Tab/TabLink.tsx
@@ -0,0 +1,117 @@
+import * as React from 'react';
+
+export interface ITabLinkProps {
+ id?:string;
+ to: string|number;
+ handleSelect?: (to,namespace) => void;
+ isActive?: boolean;
+ namespace?: string;
+ activeStyle?: object;
+ disableInlineStyles?: boolean;
+ className?: string;
+ activeClassName?: string;
+ style?: object;
+ onClick?: (any) => void;
+ displayName?: string;
+
+}
+
+
+export const defaultActiveStyle = {
+ fontWeight: 'bold',
+};
+
+export default class TabLink extends React.Component
+ {this.props.children}
+
+ );
+ }
+ else
+ {
+ return (
+
+ {this.props.children}
+
+ );
+ }
+
+ }
+}
\ No newline at end of file
diff --git a/samples/react-tabacordion/src/webparts/tabAccordion/components/utilities/Tab/Tabs.tsx b/samples/react-tabacordion/src/webparts/tabAccordion/components/utilities/Tab/Tabs.tsx
new file mode 100644
index 000000000..58bae071b
--- /dev/null
+++ b/samples/react-tabacordion/src/webparts/tabAccordion/components/utilities/Tab/Tabs.tsx
@@ -0,0 +1,170 @@
+import * as React from 'react';
+
+export interface ITabsProps {
+ name?: string;
+ handleSelect?: (any) => void;
+ selectedTab?: string;
+ activeLinkStyle?: object;
+ visibleTabStyle?: object;
+ disableInlineStyles?: boolean;
+ renderActiveTabContentOnly?: boolean;
+ className?: string;
+ style?:object;
+ displayName?:string;
+}
+export interface ITabsState {
+ selectedTab: any;
+}
+
+export default class Tabs extends React.Component{children}
;
+ }
+}
\ No newline at end of file
diff --git a/samples/react-tabacordion/src/webparts/tabAccordion/components/utilities/Tab/index.tsx b/samples/react-tabacordion/src/webparts/tabAccordion/components/utilities/Tab/index.tsx
new file mode 100644
index 000000000..cf001599d
--- /dev/null
+++ b/samples/react-tabacordion/src/webparts/tabAccordion/components/utilities/Tab/index.tsx
@@ -0,0 +1,9 @@
+import Tabs from './Tabs';
+import TabLink from './TabLink';
+import TabContent from './TabContent';
+
+export {
+ Tabs,
+ TabLink,
+ TabContent
+};
\ No newline at end of file
diff --git a/samples/react-tabacordion/src/webparts/tabAccordion/loc/en-us.js b/samples/react-tabacordion/src/webparts/tabAccordion/loc/en-us.js
new file mode 100644
index 000000000..56f21c6e3
--- /dev/null
+++ b/samples/react-tabacordion/src/webparts/tabAccordion/loc/en-us.js
@@ -0,0 +1,10 @@
+define([], function() {
+ return {
+ "PropertyPaneDescription": "Customize your Tab Accordion",
+ "BasicGroupName": "Tabs",
+ "TitleFieldLabel": "Title",
+ "ManageAccordion": "Manage Tabs",
+ "Type": "Type",
+ "Tabs": "Tabs",
+ }
+});
\ No newline at end of file
diff --git a/samples/react-tabacordion/src/webparts/tabAccordion/loc/mystrings.d.ts b/samples/react-tabacordion/src/webparts/tabAccordion/loc/mystrings.d.ts
new file mode 100644
index 000000000..b986ae2ae
--- /dev/null
+++ b/samples/react-tabacordion/src/webparts/tabAccordion/loc/mystrings.d.ts
@@ -0,0 +1,13 @@
+declare interface ITabAccordionWebPartStrings {
+ PropertyPaneDescription: string;
+ BasicGroupName: string;
+ TitleFieldLabel: string;
+ ManageAccordion: string;
+ Accordion: string;
+ Type: string;
+}
+
+declare module 'TabAccordionWebPartStrings' {
+ const strings: ITabAccordionWebPartStrings;
+ export = strings;
+}
diff --git a/samples/react-tabacordion/teams/34cb4eea-9e5a-4d5b-94e7-a7df94bb417b_color.png b/samples/react-tabacordion/teams/34cb4eea-9e5a-4d5b-94e7-a7df94bb417b_color.png
new file mode 100644
index 000000000..0e1f764fa
Binary files /dev/null and b/samples/react-tabacordion/teams/34cb4eea-9e5a-4d5b-94e7-a7df94bb417b_color.png differ
diff --git a/samples/react-tabacordion/teams/34cb4eea-9e5a-4d5b-94e7-a7df94bb417b_outline.png b/samples/react-tabacordion/teams/34cb4eea-9e5a-4d5b-94e7-a7df94bb417b_outline.png
new file mode 100644
index 000000000..892868fab
Binary files /dev/null and b/samples/react-tabacordion/teams/34cb4eea-9e5a-4d5b-94e7-a7df94bb417b_outline.png differ
diff --git a/samples/react-tabacordion/tsconfig.json b/samples/react-tabacordion/tsconfig.json
new file mode 100644
index 000000000..f55dc0d5f
--- /dev/null
+++ b/samples/react-tabacordion/tsconfig.json
@@ -0,0 +1,35 @@
+{
+ "extends": "./node_modules/@microsoft/rush-stack-compiler-3.9/includes/tsconfig-web.json",
+ "compilerOptions": {
+ "target": "es5",
+ "forceConsistentCasingInFileNames": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "jsx": "react",
+ "declaration": true,
+ "sourceMap": true,
+ "experimentalDecorators": true,
+ "skipLibCheck": true,
+ "outDir": "lib",
+ "inlineSources": false,
+ "strictNullChecks": false,
+ "noUnusedLocals": false,
+ "typeRoots": [
+ "./node_modules/@types",
+ "./node_modules/@microsoft"
+ ],
+ "types": [
+ "webpack-env"
+ ],
+ "lib": [
+ "es5",
+ "dom",
+ "es2015.collection",
+ "es2015.promise"
+ ]
+ },
+ "include": [
+ "src/**/*.ts",
+ "src/**/*.tsx"
+ ]
+}
diff --git a/samples/react-tabacordion/tslint.json b/samples/react-tabacordion/tslint.json
new file mode 100644
index 000000000..6c3c92f28
--- /dev/null
+++ b/samples/react-tabacordion/tslint.json
@@ -0,0 +1,29 @@
+{
+ "extends": "./node_modules/@microsoft/sp-tslint-rules/base-tslint.json",
+ "rules": {
+ "class-name": false,
+ "export-name": false,
+ "forin": false,
+ "label-position": false,
+ "member-access": true,
+ "no-arg": false,
+ "no-console": false,
+ "no-construct": false,
+ "no-duplicate-variable": true,
+ "no-eval": false,
+ "no-function-expression": true,
+ "no-internal-module": true,
+ "no-shadowed-variable": true,
+ "no-switch-case-fall-through": true,
+ "no-unnecessary-semicolons": true,
+ "no-unused-expression": true,
+ "no-with-statement": true,
+ "semicolon": true,
+ "trailing-comma": false,
+ "typedef": false,
+ "typedef-whitespace": false,
+ "use-named-parameter": true,
+ "variable-name": false,
+ "whitespace": false
+ }
+}
\ No newline at end of file