diff --git a/package-lock.json b/package-lock.json
index ab99a69fb..7063a9c54 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@pnp/spfx-controls-react",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -6690,8 +6690,7 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -7106,8 +7105,7 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -7163,7 +7161,6 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -7207,14 +7204,12 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         }
       }
     },
diff --git a/src/webparts/controlsTest/components/ControlsTest.tsx b/src/webparts/controlsTest/components/ControlsTest.tsx
index f3e9e3759..651a88f58 100644
--- a/src/webparts/controlsTest/components/ControlsTest.tsx
+++ b/src/webparts/controlsTest/components/ControlsTest.tsx
@@ -34,8 +34,65 @@ import { ListItemAttachments } from '../../../ListItemAttachments';
 import { RichText } from '../../../RichText';
 import { Link } from 'office-ui-fabric-react/lib/components/Link';
 import { Carousel, CarouselButtonsLocation, CarouselButtonsDisplay } from '../../../controls/carousel';
+import { GridLayout } from '../../../GridLayout';
+
+import { ISize } from 'office-ui-fabric-react/lib/Utilities';
+
+// Used to render document cards
+import {
+  DocumentCard,
+  DocumentCardActivity,
+  DocumentCardPreview,
+  //DocumentCardDetails,
+  DocumentCardTitle,
+  IDocumentCardPreviewProps,
+  DocumentCardLocation,
+  DocumentCardType
+} from 'office-ui-fabric-react/lib/DocumentCard';
+import { ImageFit } from 'office-ui-fabric-react/lib/Image';
 import { FilePicker, IFilePickerResult } from '../../../FilePicker';
 
+
+/**
+ * The sample data below was randomly generated (except for the title). It is used by the grid layout
+ */
+const sampleGridData: any[] = [{
+  thumbnail: "https://pixabay.com/get/57e9dd474952a414f1dc8460825668204022dfe05555754d742e7bd6/hot-air-balloons-1984308_640.jpg",
+  title: "Adventures in SPFx",
+  name: "Perry Losselyong",
+  profileImageSrc: "https://robohash.org/blanditiisadlabore.png?size=50x50&set=set1",
+  location: "SharePoint",
+  activity: "3/13/2019"
+}, {
+  thumbnail: "https://pixabay.com/get/55e8d5474a52ad14f1dc8460825668204022dfe05555754d742d79d0/autumn-3804001_640.jpg",
+  title: "The Wild, Untold Story of SharePoint!",
+  name: "Ebonee Gallyhaock",
+  profileImageSrc: "https://robohash.org/delectusetcorporis.bmp?size=50x50&set=set1",
+  location: "SharePoint",
+  activity: "6/29/2019"
+}, {
+  thumbnail: "https://pixabay.com/get/57e8dd454c50ac14f1dc8460825668204022dfe05555754d742c72d7/log-cabin-1886620_640.jpg",
+  title: "Low Code Solutions: PowerApps",
+  name: "Seward Keith",
+  profileImageSrc: "https://robohash.org/asperioresautquasi.jpg?size=50x50&set=set1",
+  location: "PowerApps",
+  activity: "12/31/2018"
+}, {
+  thumbnail: "https://pixabay.com/get/55e3d445495aa514f1dc8460825668204022dfe05555754d742b7dd5/portrait-3316389_640.jpg",
+  title: "Not Your Grandpa's SharePoint",
+  name: "Sharona Selkirk",
+  profileImageSrc: "https://robohash.org/velnammolestiae.png?size=50x50&set=set1",
+  location: "SharePoint",
+  activity: "11/20/2018"
+}, {
+  thumbnail: "https://pixabay.com/get/57e6dd474352ae14f1dc8460825668204022dfe05555754d742a7ed1/faucet-1684902_640.jpg",
+  title: "Get with the Flow",
+  name: "Boyce Batstone",
+  profileImageSrc: "https://robohash.org/nulladistinctiomollitia.jpg?size=50x50&set=set1",
+  location: "Flow",
+  activity: "5/26/2019"
+}];
+
 /**
  * Component that can be used to test out the React controls from this project
  */
@@ -338,24 +395,489 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
 
     return (
       <div className={styles.controlsTest}>
-        <FilePicker
-          bingAPIKey="<BING API KEY>"
-          accepts= ".gif,.jpg,.jpeg,.bmp,.dib,.tif,.tiff,.ico,.png,.jxr,.svg"
-          buttonIcon="FileImage"
-          onSave={(filePickerResult: IFilePickerResult) => { this.setState({filePickerResult }) }}
-          onChanged={(filePickerResult: IFilePickerResult) => { this.setState({filePickerResult }) }}
-          webPartContext={this.props.context}
+        <WebPartTitle displayMode={this.props.displayMode}
+          title={this.props.title}
+          updateProperty={this.props.updateProperty}
+          moreLink={
+            <Link href="https://sharepoint.github.io/sp-dev-fx-controls-react/">See all</Link>
+          } />
+
+        <DateTimePicker label="DateTime Picker (unspecified = date and time)" isMonthPickerVisible={false} showSeconds={false} onChange={(value) => console.log("DateTimePicker value:", value)} />
+        <DateTimePicker label="DateTime Picker (unspecified = date and time)" showSeconds={true} onChange={(value) => console.log("DateTimePicker value:", value)} />
+        <DateTimePicker label="DateTime Picker (unspecified = date and time)" timeConvention={TimeConvention.Hours24} onChange={(value) => console.log("DateTimePicker value:", value)} />
+        <DateTimePicker label="DateTime Picker (unspecified = date and time)" value={new Date()} onChange={(value) => console.log("DateTimePicker value:", value)} />
+        <DateTimePicker label="DateTime Picker (unspecified = date and time)" timeConvention={TimeConvention.Hours24} value={new Date()} onChange={(value) => console.log("DateTimePicker value:", value)} />
+
+        {/* <RichText isEditMode={this.props.displayMode === DisplayMode.Edit} onChange={value => { this.richTextValue = value; return value; }} /> */}
+        <RichText isEditMode={this.props.displayMode === DisplayMode.Edit} onChange={value => { this.setState({ richTextValue: value }); return value; }} />
+
+        {/* <ListItemAttachments listId='0ffa51d7-4ad1-4f04-8cfe-98209905d6da'
+          itemId={1}
+          context={this.props.context}
+          disabled={false} /> */}
+
+        <Placeholder iconName='Edit'
+          iconText='Configure your web part'
+          description='Please configure the web part.'
+          buttonLabel='Configure'
+          hideButton={this.props.displayMode === DisplayMode.Read}
+          onConfigure={this._onConfigure} />
+
+        <PeoplePicker context={this.props.context}
+          titleText="People Picker (Group not found)"
+          webAbsoluteUrl={this.props.context.pageContext.site.absoluteUrl}
+          groupName="Team Site Visitors 123"
+          ensureUser={true}
+          principalTypes={[PrincipalType.User, PrincipalType.SharePointGroup, PrincipalType.SecurityGroup, PrincipalType.DistributionList]}
+          defaultSelectedUsers={["admin@tenant.onmicrosoft.com", "test@tenant.onmicrosoft.com"]}
+          selectedItems={this._getPeoplePickerItems} />
+
+        <PeoplePicker context={this.props.context}
+          titleText="People Picker (search for group)"
+          groupName="Team Site Visitors"
+          principalTypes={[PrincipalType.User, PrincipalType.SharePointGroup, PrincipalType.SecurityGroup, PrincipalType.DistributionList]}
+          defaultSelectedUsers={["admin@tenant.onmicrosoft.com", "test@tenant.onmicrosoft.com"]}
+          selectedItems={this._getPeoplePickerItems} />
+
+        <PeoplePicker context={this.props.context}
+          titleText="People Picker (pre-set global users)"
+          principalTypes={[PrincipalType.User, PrincipalType.SharePointGroup, PrincipalType.SecurityGroup, PrincipalType.DistributionList]}
+          defaultSelectedUsers={["admin@tenant.onmicrosoft.com", "test@tenant.onmicrosoft.com"]}
+          selectedItems={this._getPeoplePickerItems}
+          personSelectionLimit={2}
+          ensureUser={true} />
+
+        <PeoplePicker context={this.props.context}
+          titleText="People Picker (pre-set local users)"
+          webAbsoluteUrl={this.props.context.pageContext.site.absoluteUrl}
+          principalTypes={[PrincipalType.User, PrincipalType.SharePointGroup, PrincipalType.SecurityGroup, PrincipalType.DistributionList]}
+          defaultSelectedUsers={["admin@tenant.onmicrosoft.com", "test@tenant.onmicrosoft.com"]}
+          selectedItems={this._getPeoplePickerItems} />
+
+        <PeoplePicker context={this.props.context}
+          titleText="People Picker (tenant scoped)"
+          personSelectionLimit={5}
+          // groupName={"Team Site Owners"}
+          showtooltip={true}
+          isRequired={true}
+          //defaultSelectedUsers={["tenantUser@domain.onmicrosoft.com", "test@user.com"]}
+          //defaultSelectedUsers={this.state.authorEmails}
+          selectedItems={this._getPeoplePickerItems}
+          showHiddenInUI={false}
+          principalTypes={[PrincipalType.User, PrincipalType.SharePointGroup, PrincipalType.SecurityGroup, PrincipalType.DistributionList]}
+          suggestionsLimit={2}
+          resolveDelay={200} />
+
+        <PeoplePicker context={this.props.context}
+          titleText="People Picker (local scoped)"
+          webAbsoluteUrl={this.props.context.pageContext.site.absoluteUrl}
+          personSelectionLimit={5}
+          // groupName={"Team Site Owners"}
+          showtooltip={true}
+          isRequired={true}
+          //defaultSelectedUsers={["tenantUser@domain.onmicrosoft.com", "test@user.com"]}
+          //defaultSelectedUsers={this.state.authorEmails}
+          selectedItems={this._getPeoplePickerItems}
+          showHiddenInUI={false}
+          principalTypes={[PrincipalType.User, PrincipalType.SharePointGroup, PrincipalType.SecurityGroup, PrincipalType.DistributionList]}
+          suggestionsLimit={2}
+          resolveDelay={200} />
+
+        <PeoplePicker context={this.props.context}
+          titleText="People Picker (disabled)"
+          disabled={true}
+          showtooltip={true} />
+
+        <DateTimePicker label="DateTime Picker (unspecified = date and time)" />
+
+        <DateTimePicker label="DateTime Picker (unspecified = date and time, no seconds)" />
+
+        <DateTimePicker
+          label="DateTime Picker (date and time - default time = 12h)"
+          dateConvention={DateConvention.DateTime}
+          showSeconds={true}
         />
-        {
-          this.state.filePickerResult &&
-          <div>
-            FileName: {this.state.filePickerResult.fileName}
+
+        <DateTimePicker
+          label="DateTime Picker (date and time - 12h)"
+          dateConvention={DateConvention.DateTime}
+          timeConvention={TimeConvention.Hours12}
+          showSeconds={false}
+        />
+
+        <DateTimePicker
+          label="DateTime Picker (date and time - 24h)"
+          dateConvention={DateConvention.DateTime}
+          timeConvention={TimeConvention.Hours24}
+          firstDayOfWeek={DayOfWeek.Monday}
+          showSeconds={true}
+        />
+
+        <DateTimePicker
+          label="DateTime Picker (Controlled)"
+          formatDate={d => `${d.getFullYear()} - ${d.getMonth() + 1} - ${d.getDate()}`}
+          dateConvention={DateConvention.DateTime}
+          timeConvention={TimeConvention.Hours24}
+          firstDayOfWeek={DayOfWeek.Monday}
+          value={this.state.dateTimeValue}
+          onChange={this._onDateTimePickerChange}
+          isMonthPickerVisible={false}
+          showMonthPickerAsOverlay={true}
+          showWeekNumbers={true}
+          showSeconds={true}
+        />
+
+        <DateTimePicker
+          label="DateTime Picker (date only)"
+          dateConvention={DateConvention.Date}
+        />
+
+        <DateTimePicker label="DateTime Picker (disabled)" disabled={true} />
+
+        <ListView items={this.state.items}
+          viewFields={viewFields}
+          iconFieldName='ServerRelativeUrl'
+          groupByFields={groupByFields}
+          compact={true}
+          selectionMode={SelectionMode.single}
+          selection={this._getSelection}
+          showFilter={true}
+        // defaultFilter="Team"
+        />
+
+
+        <ChartControl type={ChartType.Bar}
+          data={{
+            labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
+            datasets: [{
+              label: '# of Votes',
+              data: [12, 19, 3, 5, 2, 3],
+              backgroundColor: [
+                'rgba(255, 99, 132, 0.2)',
+                'rgba(54, 162, 235, 0.2)',
+                'rgba(255, 206, 86, 0.2)',
+                'rgba(75, 192, 192, 0.2)',
+                'rgba(153, 102, 255, 0.2)',
+                'rgba(255, 159, 64, 0.2)'
+              ],
+              borderColor: [
+                'rgba(255,99,132,1)',
+                'rgba(54, 162, 235, 1)',
+                'rgba(255, 206, 86, 1)',
+                'rgba(75, 192, 192, 1)',
+                'rgba(153, 102, 255, 1)',
+                'rgba(255, 159, 64, 1)'
+              ],
+              borderWidth: 1
+            }]
+          }}
+          options={{
+            scales: {
+              yAxes: [{
+                ticks: {
+                  beginAtZero: true
+                }
+              }]
+            }
+          }} />
+
+        <Map titleText="New map control"
+          coordinates={{ latitude: 51.507351, longitude: -0.127758 }}
+          enableSearch={true}
+          mapType={MapType.normal}
+          onUpdateCoordinates={(coordinates) => console.log("Updated location:", coordinates)}
+        //  zoom={15}
+        //mapType={MapType.cycle}
+        //width="50"
+        //height={150}
+        //loadingMessage="Loading maps"
+        //errorMessage="Hmmm, we do not have maps for Mars yet. Working on it..."
+        />
+
+        <div className={styles.container}>
+          <div className={`ms-Grid-row ms-bgColor-neutralLight ms-fontColor-neutralDark ${styles.row}`}>
+            <div className="ms-Grid-col ms-lg10 ms-xl8 ms-xlPush2 ms-lgPush1">
+              <span className="ms-font-xl">Controls testing</span>
+
+              <SecurityTrimmedControl context={this.props.context} level={PermissionLevel.currentWeb} permissions={[SPPermission.viewListItems]} className={"TestingClass"}>
+                <p>You have permissions to view list items.</p>
+              </SecurityTrimmedControl>
+
+              <p className="ms-font-l">
+                File type icon control
+              </p>
+              <div className="ms-font-m">
+                Font icons:&nbsp;
+                <FileTypeIcon type={IconType.font} path="https://contoso.sharepoint.com/documents/filename.docx" />&nbsp;
+                <FileTypeIcon type={IconType.font} path="https://contoso.sharepoint.com/documents/filename.unknown" />&nbsp;
+                <FileTypeIcon type={IconType.font} path="https://contoso.sharepoint.com/documents/filename.doc" />&nbsp;
+                <FileTypeIcon type={IconType.font} application={ApplicationType.HTML} />&nbsp;
+                <FileTypeIcon type={IconType.font} application={ApplicationType.Mail} />&nbsp;
+                <FileTypeIcon type={IconType.font} application={ApplicationType.SASS} />
+              </div>
+              <div className="ms-font-m">
+                Image icons:&nbsp;
+                <FileTypeIcon type={IconType.image} path="https://contoso.sharepoint.com/documents/filename.docx" />&nbsp;
+                <FileTypeIcon type={IconType.image} path="https://contoso.sharepoint.com/documents/filename.unknown" />&nbsp;
+                <FileTypeIcon type={IconType.image} path="https://contoso.sharepoint.com/documents/filename.pptx?querystring='prop1'&amp;prop2='test'" /> &nbsp;
+                <FileTypeIcon type={IconType.image} application={ApplicationType.Word} />&nbsp;
+                <FileTypeIcon type={IconType.image} application={ApplicationType.PDF} />&nbsp;
+                <FileTypeIcon type={IconType.image} path="https://contoso.sharepoint.com/documents/filename.pdf" />
+              </div>
+              <div className="ms-font-m">Icon size tester:
+                <Dropdown options={sizeOptions} onChanged={this._onIconSizeChange} />
+                <FileTypeIcon type={IconType.image} size={this.state.imgSize} application={ApplicationType.Excel} />
+                <FileTypeIcon type={IconType.image} size={this.state.imgSize} application={ApplicationType.PDF} />
+                <FileTypeIcon type={IconType.image} size={this.state.imgSize} />
+              </div>
+
+              <div className="ms-font-m">List picker tester:
+                <ListPicker context={this.props.context}
+                  label="Select your list(s)"
+                  placeHolder="Select your list(s)"
+                  baseTemplate={100}
+                  includeHidden={false}
+                  multiSelect={true}
+                  // filter="Title eq 'Test List'"
+                  onSelectionChanged={this.onListPickerChange} />
+              </div>
+
+              <div className="ms-font-m">Field picker list data tester:
+                <ListItemPicker listId={this.state.selectedList}
+                  columnInternalName="Title"
+                  itemLimit={5}
+                  context={this.props.context}
+                  onSelectedItem={this.listItemPickerDataSelected} />
+              </div>
+
+              <div className="ms-font-m">Services tester:
+                <TaxonomyPicker
+                  allowMultipleSelections={true}
+                  termsetNameOrID="61837936-29c5-46de-982c-d1adb6664b32" // id to termset that has a custom sort
+                  panelTitle="Select Sorted Term"
+                  label="Service Picker with custom actions"
+                  context={this.props.context}
+                  onChange={this.onServicePickerChange}
+                  isTermSetSelectable={false}
+                  termActions={{
+                    actions: [{
+                      title: "Get term labels",
+                      iconName: "LocaleLanguage",
+                      id: "test",
+                      invokeActionOnRender: true,
+                      hidden: true,
+                      actionCallback: async (taxService: SPTermStorePickerService, term: ITerm) => {
+                        // const labels = await taxService.getTermLabels(term.Id);
+                        // if (labels) {
+                        //   let termLabel: string = labels.join(" ; ");
+                        //   const updateAction = {
+                        //     updateActionType: UpdateType.updateTermLabel,
+                        //     value: `${termLabel} (updated)`
+                        //   };
+                        //   return updateAction;
+                        // }
+                        const updateAction = {
+                          updateActionType: UpdateType.updateTermLabel,
+                          value: `${term.Name} (updated)`
+                        };
+                        return updateAction;
+                      },
+                      applyToTerm: (term: ITerm) => (term && term.Name && term.Name.toLowerCase() === "about us")
+                    },
+                      // new TermLabelAction("Get Labels")
+                    ],
+                    termActionsDisplayMode: TermActionsDisplayMode.buttons,
+                    termActionsDisplayStyle: TermActionsDisplayStyle.textAndIcon
+                  }}
+                />
+
+                <TaxonomyPicker
+                  allowMultipleSelections={true}
+                  termsetNameOrID="e813224c-bb1b-4086-b828-3d71434ddcd7" // id to termset that has a default sort
+                  panelTitle="Select Default Sorted Term"
+                  label="Service Picker"
+                  context={this.props.context}
+                  onChange={this.onServicePickerChange}
+                  isTermSetSelectable={false}
+                />
+
+                <TaxonomyPicker
+                  initialValues={this.state.initialValues}
+                  allowMultipleSelections={true}
+                  termsetNameOrID="b3e9b754-2593-4ae6-abc2-35345402e186"
+                  // anchorId="0ec2f948-3978-499e-9d3f-e51c4494d44c"
+                  // disabledTermIds={["943fd9f0-3d7c-415c-9192-93c0e54573fb", "0e415292-cce5-44ac-87c7-ef99dd1f01f4"]}
+                  // disabledTermIds={["943fd9f0-3d7c-415c-9192-93c0e54573fb", "73d18756-20af-41de-808c-2a1e21851e44", "0e415292-cce5-44ac-87c7-ef99dd1f01f4"]}
+                  // disabledTermIds={["cd6f6d3c-672d-4244-9320-c1e64cc0626f", "0e415292-cce5-44ac-87c7-ef99dd1f01f4"]}
+                  // disableChildrenOfDisabledParents={true}
+                  panelTitle="Select Term"
+                  label="Taxonomy Picker"
+                  context={this.props.context}
+                  onChange={this._onTaxPickerChange}
+                  isTermSetSelectable={false} />
+
+                <DefaultButton text="Add" onClick={() => {
+                  this.setState({
+                    initialValues: [{
+                      key: "ab703558-2546-4b23-b8b8-2bcb2c0086f5",
+                      name: "HR",
+                      path: "HR",
+                      termSet: "b3e9b754-2593-4ae6-abc2-35345402e186"
+                    }]
+                  });
+                }} />
+              </div>
+              <div className="ms-font-m">iframe dialog tester:
+                <PrimaryButton
+                  text="Open iframe Dialog"
+                  onClick={() => { this.setState({ iFrameDialogOpened: true }); }} />
+                <IFrameDialog
+                  url={iframeUrl}
+                  iframeOnLoad={(iframe: any) => { console.log('iframe loaded'); }}
+                  hidden={!this.state.iFrameDialogOpened}
+                  onDismiss={() => { this.setState({ iFrameDialogOpened: false }); }}
+                  modalProps={{
+                    isBlocking: true
+                  }}
+                  dialogContentProps={{
+                    type: DialogType.close,
+                    showCloseButton: true
+                  }}
+                  width={'570px'}
+                  height={'315px'} />
+              </div>
+              <div className="ms-font-m">iframe Panel tester:
+                <PrimaryButton
+                  text="Open iframe Panel"
+                  onClick={() => { this.setState({ iFramePanelOpened: true }); }} />
+                <IFramePanel
+                  url={iframeUrl}
+                  type={PanelType.medium}
+                  //  height="300px"
+                  headerText="iframe panel title"
+                  closeButtonAriaLabel="Close"
+                  isOpen={this.state.iFramePanelOpened}
+                  onDismiss={() => { this.setState({ iFramePanelOpened: false }); }}
+                  iframeOnLoad={(iframe: any) => { console.log('iframe loaded'); }}
+                />
+              </div>
+            </div>
           </div>
-        }
+        </div>
+
+        <div>
+          <h3>Carousel with fixed elements:</h3>
+          <Carousel
+            buttonsLocation={CarouselButtonsLocation.top}
+            buttonsDisplay={CarouselButtonsDisplay.block}
+
+            contentContainerStyles={styles.carouselContent}
+            containerButtonsStyles={styles.carouselButtonsContainer}
+
+            isInfinite={true}
+
+            element={this.carouselElements}
+            onMoveNextClicked={(index: number) => { console.log(`Next button clicked: ${index}`); }}
+            onMovePrevClicked={(index: number) => { console.log(`Prev button clicked: ${index}`); }}
+          />
+        </div>
+
+        <div>
+          <h3>Carousel with triggerPageElement:</h3>
+          <Carousel
+            buttonsLocation={CarouselButtonsLocation.bottom}
+            buttonsDisplay={CarouselButtonsDisplay.buttonsOnly}
+
+            contentContainerStyles={styles.carouselContent}
+
+            canMoveNext={this.state.canMoveNext}
+            canMovePrev={this.state.canMovePrev}
+            triggerPageEvent={this.triggerNextElement}
+            element={this.state.currentCarouselElement}
+          />
+        </div>
+
+        <div className={styles.siteBreadcrumb}>
+          <SiteBreadcrumb context={this.props.context} />
+        </div>
+
+        <div>
+          <FilePicker
+            bingAPIKey="<BING API KEY>"
+            accepts=".gif,.jpg,.jpeg,.bmp,.dib,.tif,.tiff,.ico,.png,.jxr,.svg"
+            buttonIcon="FileImage"
+            onSave={(filePickerResult: IFilePickerResult) => { this.setState({ filePickerResult }); }}
+            onChanged={(filePickerResult: IFilePickerResult) => { this.setState({ filePickerResult }); }}
+            webPartContext={this.props.context}
+          />
+          {
+            this.state.filePickerResult &&
+            <div>
+              FileName: {this.state.filePickerResult.fileName}
+            </div>
+          }
+        </div>
+
+        <p><a href="javascript:;" onClick={this.deleteItem}>Deletes second item</a></p>
+        <div>
+          <Progress title={'Progress Test'}
+            showOverallProgress={true}
+            showIndeterminateOverallProgress={false}
+            hideNotStartedActions={false}
+            actions={this.state.progressActions}
+            currentActionIndex={this.state.currentProgressActionIndex}
+            longRunningText={'This operation takes longer than expected'}
+            longRunningTextDisplayDelay={7000}
+            height={'350px'}
+            inProgressIconName={'ChromeBackMirrored'} />
+          <PrimaryButton text={'Start Progress'} onClick={this._startProgress} />
+        </div>
+
+        <div className="ms-font-l">Grid Layout</div>
+        <GridLayout
+          ariaLabel={"List of content, use right and left arrow keys to navigate, arrow down to access details."}
+          items={sampleGridData}
+          onRenderGridItem={(item: any, finalSize: ISize, isCompact: boolean) => this._onRenderGridItem(item, finalSize, isCompact)}
+        />
       </div>
-
     );
   }
 
+  private _onRenderGridItem = (item: any, _finalSize: ISize, isCompact: boolean): JSX.Element => {
+    const previewProps: IDocumentCardPreviewProps = {
+      previewImages: [
+        {
+          previewImageSrc: item.thumbnail,
+          imageFit: ImageFit.cover,
+          height: 130
+        }
+      ]
+    };
 
+    return <div
+      //className={styles.documentTile}
+      data-is-focusable={true}
+      role="listitem"
+      aria-label={item.title}
+    >
+      <DocumentCard
+        type={isCompact ? DocumentCardType.compact : DocumentCardType.normal}
+        onClick={(ev: React.SyntheticEvent<HTMLElement>) => alert("You clicked on a grid item")}
+
+      >
+        <DocumentCardPreview {...previewProps} />
+        {!isCompact && <DocumentCardLocation location={item.location} />}
+        <div>
+          <DocumentCardTitle
+            title={item.title}
+            shouldTruncate={true}
+          />
+          <DocumentCardActivity
+            activity={item.activity}
+            people={[{ name: item.name, profileImageSrc: item.profileImageSrc }]}
+          />
+        </div>
+      </DocumentCard>
+    </div>;
+  }
 }