From fb26b91346191bf2c5a073c7c0276516f40c47ab Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Fri, 6 Apr 2018 14:31:30 -0700
Subject: [PATCH 01/67] base chiclet page

---
 .../src/components/App/AppState.tsx           |   6 +
 .../pages/Components/ChicletComponentPage.tsx |  38 ++++++
 .../office-ui-fabric-react/src/Chiclet.ts     |   1 +
 .../src/components/Chiclet/Chiclet.base.tsx   |   6 +
 .../src/components/Chiclet/Chiclet.scss       |   0
 .../src/components/Chiclet/Chiclet.styles.ts  |   0
 .../src/components/Chiclet/Chiclet.tsx        |  30 +++++
 .../src/components/Chiclet/Chiclet.types.ts   |  54 ++++++++
 .../src/components/Chiclet/ChicletPage.tsx    |  57 +++++++++
 .../src/components/Chiclet/ChicletPreview.tsx | 121 ++++++++++++++++++
 .../examples/Chiclet.Basic.Example.tsx        |  37 ++++++
 .../src/components/Chiclet/index.ts           |   3 +
 .../src/demo/AppDefinition.tsx                |   6 +
 packages/office-ui-fabric-react/src/index.ts  |   1 +
 14 files changed, 360 insertions(+)
 create mode 100644 apps/fabric-website/src/pages/Components/ChicletComponentPage.tsx
 create mode 100644 packages/office-ui-fabric-react/src/Chiclet.ts
 create mode 100644 packages/office-ui-fabric-react/src/components/Chiclet/Chiclet.base.tsx
 create mode 100644 packages/office-ui-fabric-react/src/components/Chiclet/Chiclet.scss
 create mode 100644 packages/office-ui-fabric-react/src/components/Chiclet/Chiclet.styles.ts
 create mode 100644 packages/office-ui-fabric-react/src/components/Chiclet/Chiclet.tsx
 create mode 100644 packages/office-ui-fabric-react/src/components/Chiclet/Chiclet.types.ts
 create mode 100644 packages/office-ui-fabric-react/src/components/Chiclet/ChicletPage.tsx
 create mode 100644 packages/office-ui-fabric-react/src/components/Chiclet/ChicletPreview.tsx
 create mode 100644 packages/office-ui-fabric-react/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
 create mode 100644 packages/office-ui-fabric-react/src/components/Chiclet/index.ts

diff --git a/apps/fabric-website/src/components/App/AppState.tsx b/apps/fabric-website/src/components/App/AppState.tsx
index e27d0c9e6c9bc..6ca7bf6d5e553 100644
--- a/apps/fabric-website/src/components/App/AppState.tsx
+++ b/apps/fabric-website/src/components/App/AppState.tsx
@@ -159,6 +159,12 @@ export const AppState: IAppState = {
           component: () => <LoadingComponent title='Coachmark' />,
           getComponent: cb => require.ensure([], (require) => cb(require<any>('../../pages/Components/CoachmarkComponentPage').CoachmarkComponentPage))
         },
+        {
+          title: 'Chiclet',
+          url: '#/components/chiclet',
+          component: () => <LoadingComponent title='Chiclet' />,
+          getComponent: cb => require.ensure([], (require) => cb(require<any>('../../pages/Components/ChicletComponentPage').ChicletComponentPage))
+        },
         {
           title: 'ChoiceGroup',
           url: '#/components/choicegroup',
diff --git a/apps/fabric-website/src/pages/Components/ChicletComponentPage.tsx b/apps/fabric-website/src/pages/Components/ChicletComponentPage.tsx
new file mode 100644
index 0000000000000..45d6c8c03cba4
--- /dev/null
+++ b/apps/fabric-website/src/pages/Components/ChicletComponentPage.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { ChicletPage } from 'office-ui-fabric-react/lib/components/Chiclet/ChicletPage';
+import { PageHeader } from '../../components/PageHeader/PageHeader';
+import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
+const pageStyles: any = require('../PageStyles.module.scss');
+
+export class ChicletComponentPage extends React.Component<any, any> {
+  public render() {
+    return (
+      <div ref='pageElement' className={ pageStyles.basePage }>
+        <ComponentPage>
+          <PageHeader pageTitle='Chiclet' backgroundColor='#038387'
+            links={
+              [
+                {
+                  'text': 'Overview',
+                  'location': 'Overview'
+                },
+                {
+                  'text': 'Best Practices',
+                  'location': 'BestPractices'
+                },
+                {
+                  'text': 'Variants',
+                  'location': 'Variants'
+                },
+                {
+                  'text': 'Implementation',
+                  'location': 'Implementation'
+                }
+              ]
+            } />
+          <ChicletPage isHeaderVisible={ false } />
+        </ComponentPage>
+      </div>
+    );
+  }
+}
diff --git a/packages/office-ui-fabric-react/src/Chiclet.ts b/packages/office-ui-fabric-react/src/Chiclet.ts
new file mode 100644
index 0000000000000..bb147afc0b1b6
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/Chiclet.ts
@@ -0,0 +1 @@
+export * from './components/Chiclet/index';
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Chiclet/Chiclet.base.tsx b/packages/office-ui-fabric-react/src/components/Chiclet/Chiclet.base.tsx
new file mode 100644
index 0000000000000..b6d76749a0a81
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Chiclet/Chiclet.base.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import {
+  BaseComponent,
+  classNamesFunction,
+  customizable,
+} from '../../Utilities';
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Chiclet/Chiclet.scss b/packages/office-ui-fabric-react/src/components/Chiclet/Chiclet.scss
new file mode 100644
index 0000000000000..e69de29bb2d1d
diff --git a/packages/office-ui-fabric-react/src/components/Chiclet/Chiclet.styles.ts b/packages/office-ui-fabric-react/src/components/Chiclet/Chiclet.styles.ts
new file mode 100644
index 0000000000000..e69de29bb2d1d
diff --git a/packages/office-ui-fabric-react/src/components/Chiclet/Chiclet.tsx b/packages/office-ui-fabric-react/src/components/Chiclet/Chiclet.tsx
new file mode 100644
index 0000000000000..e48c5d0e0c43d
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Chiclet/Chiclet.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { IChicletProps } from './Chiclet.types';
+import {
+  BaseComponent,
+  KeyCodes,
+  css,
+  styled
+} from '../../Utilities';
+import * as stylesImport from './Chiclet.scss';
+const styles: any = stylesImport;
+
+export class Chiclet extends BaseComponent<IChicletProps, any> {
+  public static defaultProps: IChicletProps = {};
+
+  constructor(props: IChicletProps) {
+    super(props);
+  }
+
+  public render() {
+    const { children } = this.props;
+
+    return (
+      <div>
+        <p>hello!!!</p>
+        { children }
+      </div>
+    );
+  }
+
+}
diff --git a/packages/office-ui-fabric-react/src/components/Chiclet/Chiclet.types.ts b/packages/office-ui-fabric-react/src/components/Chiclet/Chiclet.types.ts
new file mode 100644
index 0000000000000..3968355cf65a3
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Chiclet/Chiclet.types.ts
@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { Chiclet } from './Chiclet';
+import { ChicletPreview } from './ChicletPreview';
+import { IStyle, ITheme } from '../../Styling';
+import { IStyleFunction } from '../../Utilities';
+import { ImageFit } from '../../Image';
+import { IIconProps } from '../../Icon';
+import { IDocumentCardPreviewProps, IDocumentCardPreviewImage } from '../DocumentCard/DocumentCard.types';
+
+export interface IChiclet {
+
+}
+
+export interface IChicletStyles {
+  /**
+   * Style for the root element.
+   */
+  root: IStyle;
+}
+
+export interface IChicletProps extends React.Props<Chiclet> {
+  /**
+   * Optional callback to access the IChiclet interface. Use this instead of ref for accessing
+   * the public methods and properties of the component.
+   */
+  componentRef?: (component: IChiclet | null) => void;
+
+  /**
+   * Optional class for chiclet.
+   */
+  className?: string;
+}
+
+export interface IChicletPreviewProps extends React.Props<ChicletPreview> {
+  /**
+   * Gets the component ref.
+   */
+  componentRef?: () => void;
+
+  /**
+   * One or more preview images to display.
+   */
+  previewImages: IDocumentCardPreviewImage[];
+
+  /**
+   * The function return string that will describe the number of overflow documents.
+   * such as  (overflowCount: number) => `+${ overflowCount } more`,
+   */
+  getOverflowDocumentCountText?: (overflowCount: number) => string;
+}
+
+export interface IChicletPreviewImage extends IDocumentCardPreviewImage {
+
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Chiclet/ChicletPage.tsx b/packages/office-ui-fabric-react/src/components/Chiclet/ChicletPage.tsx
new file mode 100644
index 0000000000000..756bfa136b851
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Chiclet/ChicletPage.tsx
@@ -0,0 +1,57 @@
+import * as React from 'react';
+import {
+  ExampleCard,
+  IComponentDemoPageProps,
+  ComponentPage,
+  PropertiesTableSet
+} from '@uifabric/example-app-base';
+import { ChicletBasicExample } from './examples/Chiclet.Basic.Example';
+
+const ChicletBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx') as string;
+
+export class ChicletPage extends React.Component<IComponentDemoPageProps, {}> {
+  public render() {
+    return (
+      <ComponentPage
+        title='Chiclet'
+        componentName='ChicletExample'
+        exampleCards={
+          <div>
+            <ExampleCard title='Default Chiclet' code={ ChicletBasicExampleCode }>
+              <ChicletBasicExample />
+            </ExampleCard>
+          </div>
+        }
+        propertiesTables={
+          <PropertiesTableSet
+            sources={ [
+              require<string>('!raw-loader!office-ui-fabric-react/src/components/Chiclet/Chiclet.types.ts')
+            ] }
+          />
+        }
+        overview={
+          <div>
+            <p>
+              Chiclet
+            </p>
+          </div>
+        }
+        bestPractices={
+          <div />
+        }
+        dos={
+          <div>
+            <ul />
+          </div>
+        }
+        donts={
+          <div>
+            <ul />
+          </div>
+        }
+        isHeaderVisible={ this.props.isHeaderVisible }
+      />
+    );
+  }
+
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Chiclet/ChicletPreview.tsx b/packages/office-ui-fabric-react/src/components/Chiclet/ChicletPreview.tsx
new file mode 100644
index 0000000000000..6b958d70b0d99
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Chiclet/ChicletPreview.tsx
@@ -0,0 +1,121 @@
+import * as React from 'react';
+import { IChicletPreviewProps, IChicletPreviewImage } from './Chiclet.types';
+import { Image } from '../../Image';
+import { Icon } from '../../Icon';
+import {
+  BaseComponent,
+  css
+} from '../../Utilities';
+import * as stylesImport from './Chiclet.scss';
+const styles: any = stylesImport;
+
+const LIST_ITEM_COUNT = 3;
+
+export class ChicletPreview extends BaseComponent<IChicletPreviewProps, any> {
+  public render() {
+    const { previewImages } = this.props;
+    let style, preview;
+    let isFileList = false;
+
+    if (previewImages.length > 1) {
+      // Render a list of files
+      preview = this._renderPreviewList(previewImages);
+      isFileList = true;
+    } else if (previewImages.length === 1) {
+      // Render a single preview
+      preview = this._renderPreviewImage(previewImages[0]);
+
+      // Override the border color if an accent color was provided
+      if (previewImages[0].accentColor) {
+        style = {
+          borderBottomColor: previewImages[0].accentColor
+        };
+      }
+    }
+
+    return (
+      <div
+        className={ css('ms-DocumentCardPreview', styles.preview, isFileList && ('is-fileList ' + styles.previewIsFileList)) }
+        style={ style }
+      >
+        { preview }
+      </div>
+    );
+  }
+
+  private _renderPreviewImage(previewImage: IChicletPreviewImage): React.ReactElement<React.HTMLAttributes<HTMLDivElement>> {
+    const { width, height, imageFit, previewIconProps, previewIconContainerClass } = previewImage;
+    const iconContainerClass = previewIconContainerClass ? previewIconContainerClass : 'ms-DocumentCardPreview-iconContainer';
+
+    if (previewIconProps) {
+      return (
+        <div className={ css(iconContainerClass, styles.previewIconContainer) } style={ { width: width, height: height } } >
+          <Icon { ...previewIconProps } />
+        </div>
+      );
+    }
+
+    const image = (
+      <Image
+        width={ width }
+        height={ height }
+        imageFit={ imageFit }
+        src={ previewImage.previewImageSrc }
+        role='presentation'
+        alt=''
+      />
+    );
+
+    let icon;
+    if (previewImage.iconSrc) {
+      icon = <Image className={ css('ms-DocumentCardPreview-icon', styles.icon) } src={ previewImage.iconSrc } role='presentation' alt='' />;
+    }
+
+    return (
+      <div>
+        { image }
+        { icon }
+      </div>
+    );
+  }
+
+  private _renderPreviewList = (previewImages: IChicletPreviewImage[]): React.ReactElement<React.HTMLAttributes<HTMLDivElement>> => {
+    const { getOverflowDocumentCountText } = this.props;
+
+    // Determine how many documents we won't be showing
+    const overflowDocumentCount = previewImages.length - LIST_ITEM_COUNT;
+
+    // Determine the overflow text that will be rendered after the preview list.
+    const overflowText = overflowDocumentCount ?
+      (getOverflowDocumentCountText ?
+        getOverflowDocumentCountText(overflowDocumentCount) :
+        '+' + overflowDocumentCount) : null;
+
+    // Create list items for the documents to be shown
+    const fileListItems = previewImages.slice(0, LIST_ITEM_COUNT).map((file, fileIndex) => (
+      <li key={ fileIndex }>
+        <Image
+          className={ css('ms-DocumentCardPreview-fileListIcon', styles.fileListIcon) }
+          src={ file.iconSrc }
+          role='presentation'
+          alt=''
+          width='16px'
+          height='16px'
+        />
+        <a href={ file.url }>{ file.name }</a>
+      </li>
+    ));
+
+    return (
+      <div>
+        <ul className={ css('ms-DocumentCardPreview-fileList', styles.fileList) }>
+          { fileListItems }
+        </ul>
+        { overflowText &&
+          <span className={ css('ms-DocumentCardPreview-fileListMore', styles.fileListMore) }>{ overflowText }</span>
+        }
+      </div>
+    );
+  }
+
+}
diff --git a/packages/office-ui-fabric-react/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
new file mode 100644
index 0000000000000..ca57f6d0442cc
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import {
+  Chiclet,
+  ChicletPreview,
+  IChicletPreviewProps
+} from 'office-ui-fabric-react/lib/Chiclet';
+import { ImageFit } from 'office-ui-fabric-react/lib/Image';
+import { TestImages } from '../../../common/TestImages';
+
+export class ChicletBasicExample extends React.Component<any, any> {
+  public render() {
+    const previewProps: IChicletPreviewProps = {
+      previewImages: [
+        {
+          name: 'Foo bar',
+          url: 'https://bing.com',
+          previewImageSrc: TestImages.documentPreview,
+          iconSrc: TestImages.iconPpt,
+          imageFit: ImageFit.cover,
+          width: 318,
+          height: 196
+        }
+      ]
+    };
+
+    return (
+      <div>
+        <meta property="og:title" content="My title" />
+        <p>Hello, this is a chiclet!</p>
+        <Chiclet>
+          <ChicletPreview { ...previewProps } />
+        </Chiclet>
+      </div>
+    );
+  }
+
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Chiclet/index.ts b/packages/office-ui-fabric-react/src/components/Chiclet/index.ts
new file mode 100644
index 0000000000000..65bee525d543f
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Chiclet/index.ts
@@ -0,0 +1,3 @@
+export * from './Chiclet';
+export * from './Chiclet.types';
+export * from './ChicletPreview';
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/demo/AppDefinition.tsx b/packages/office-ui-fabric-react/src/demo/AppDefinition.tsx
index c4d075aaf7ad8..df32686f7239f 100644
--- a/packages/office-ui-fabric-react/src/demo/AppDefinition.tsx
+++ b/packages/office-ui-fabric-react/src/demo/AppDefinition.tsx
@@ -52,6 +52,12 @@ export const AppDefinition: IAppDefinition = {
           name: 'Checkbox',
           url: '#/examples/checkbox'
         },
+        {
+          component: require<any>('../components/Chiclet/ChicletPage').ChicletPage,
+          key: 'Chiclet',
+          name: 'Chiclet',
+          url: '#/examples/chiclet'
+        },
         {
           component: require<any>('../components/Coachmark/CoachmarkPage').CoachmarkPage,
           key: 'Coachmark',
diff --git a/packages/office-ui-fabric-react/src/index.ts b/packages/office-ui-fabric-react/src/index.ts
index 5968b80aea6bf..e5c518db267c5 100644
--- a/packages/office-ui-fabric-react/src/index.ts
+++ b/packages/office-ui-fabric-react/src/index.ts
@@ -10,6 +10,7 @@ export * from './Calendar';
 export * from './Callout';
 export * from './Check';
 export * from './Checkbox';
+export * from './Chiclet';
 export * from './ChoiceGroup';
 export * from './ColorPicker';
 export * from './ComboBox';

From ad9499760020cc36d96894b8ff1e6cced5704f38 Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Mon, 16 Apr 2018 09:49:30 -0700
Subject: [PATCH 02/67] moving Chiclet to experiments

---
 .../src/components/Chiclet/Chiclet.scss       |   0
 .../src/components/Chiclet/Chiclet.tsx        | 104 ++++++++++++++++++
 .../src/components/Chiclet/Chiclet.types.ts   |  92 ++++++++++++++++
 .../src/components/Chiclet/ChicletCard.tsx    |  23 ++++
 .../src/components/Chiclet/ChicletPage.tsx    |  51 +++++++++
 .../examples/Chiclet.Basic.Example.tsx        |  25 +++++
 6 files changed, 295 insertions(+)
 create mode 100644 packages/experiments/src/components/Chiclet/Chiclet.scss
 create mode 100644 packages/experiments/src/components/Chiclet/Chiclet.tsx
 create mode 100644 packages/experiments/src/components/Chiclet/Chiclet.types.ts
 create mode 100644 packages/experiments/src/components/Chiclet/ChicletCard.tsx
 create mode 100644 packages/experiments/src/components/Chiclet/ChicletPage.tsx
 create mode 100644 packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx

diff --git a/packages/experiments/src/components/Chiclet/Chiclet.scss b/packages/experiments/src/components/Chiclet/Chiclet.scss
new file mode 100644
index 0000000000000..e69de29bb2d1d
diff --git a/packages/experiments/src/components/Chiclet/Chiclet.tsx b/packages/experiments/src/components/Chiclet/Chiclet.tsx
new file mode 100644
index 0000000000000..0bc3ba6dd99b1
--- /dev/null
+++ b/packages/experiments/src/components/Chiclet/Chiclet.tsx
@@ -0,0 +1,104 @@
+import * as React from 'react';
+import * as Cheerio from 'cheerio';
+import * as HtmlParser from 'htmlparser2';
+import {
+  BaseComponent
+} from '../../Utilities';
+import { IChicletProps, IChicletCardProps } from './Chiclet.types';
+//import * as stylesImport from './Chiclet.scss';
+
+//var fieldMap: { [property: string]: string; } = {};
+
+export class Chiclet extends BaseComponent<IChicletProps, any> {
+  public render() {
+    const { /*type, className, title, description, image, imageUrl, imageSecureUrl,
+      imageWidth, imageHeight, imageType, url,*/ children, url } = this.props;
+
+    var fieldMap: { [property: string]: string } =
+      {
+        "og:title": "title",
+        "og:type": "type",
+        "og:image": "image",
+        "og:image:url": "image", // og:image and og:image:url are identical
+        "og:image:secure_url": "imageSecureUrl",
+        "og:image:width": "imageWidth",
+        "og:image:height": "imageHeight",
+        "og:description": "description",
+        "og:url": "url"
+      };
+
+    // const html: string = `
+    //   <!-- This is my comment! -->
+    //   <head>
+    //     <meta charset=\"utf-8\" />
+    //     <link rel=\"ferde\" href=\"https://wsjeiocfn.com">
+    //     <meta property=\"og:title\" content=\"The Rock\" >
+    //     <meta property=\"og:type\" content=\"video.movie\" >
+    //     <meta property=\"og:url\" content=\"http://www.imdb.com/title/tt0117500/\" >
+    //     <meta name=\"og:title\" content=\"The Rock\" >
+    //     <meta name=\"og:type\" content=\"video.movie\" >
+    //     <meta name=\"og:url\" content=\"http://www.imdb.com/title/tt0117500/\" >
+    //   </head>
+    //   <body>
+    //     <html>
+
+    //     </html>
+    //   </body>`;
+
+    let openGraphObject = this.extractMetaTags(url, fieldMap);
+
+    return (
+      <div>
+        <div>
+          {/* { openGraphObject.title ? (<div>{ "Title: " + openGraphObject.title }</div>) : (null) }
+          { openGraphObject.url ? (<div>{ "Url: " + openGraphObject.url }</div>) : (null) }
+          { openGraphObject.image ? (<div>{ "Image: " + openGraphObject.image }</div>) : (null) }
+          { openGraphObject.description ? (<div>{ "Description: " + openGraphObject.description }</div>) : (null) }
+          { openGraphObject.type ? (<div>{ "Type: " + openGraphObject.type }</div>) : (null) } */}
+        </div>
+        { children }
+      </div>
+    );
+  }
+
+  public extractMetaTags(html: string, fieldMap: { [property: string]: string }) {
+    var quickExpr = /^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/;
+    var str = "<head><meta property=\"og:title\" content=\"La La Land\"><meta property=\"og:title\" content=\"La La Land\"><meta property=\"og:title\" content=\"La La Land\"></head>";
+    if (str.charAt(0) === '<' && str.charAt(str.length - 1) === '>' && str.length >= 3) {
+      //isHtml
+    }
+    var match = quickExpr.exec(str);
+    if (!!(match && match[1])) {
+      //isHtml
+    }
+    // var i = 0;
+    // var metaTags: { [property: string]: string } = {};
+    // while(i < html.length) {
+    //   var c = html.charAt(i);
+    //   if (c === "<"){
+    //     if()
+    //   }
+    // }
+
+    const $ = Cheerio.load(html);
+    const meta = $('meta');
+    let openGraphObject: IChicletCardProps = {}; //{ [property: string]: string } = {};
+
+    for (let key in meta) {
+      if (!(meta[key].attribs && (meta[key].attribs.property || meta[key].attribs.name))) {
+        break;
+      }
+
+      const property = meta[key].attribs.property || meta[key].attribs.name;
+      const content = meta[key].attribs.content || meta[key].attribs.value;
+
+      if (property in fieldMap) {
+        let name: string = fieldMap[property];
+        // openGraphObject["title"] = content;
+      }
+    }
+
+    return openGraphObject;
+  }
+
+}
diff --git a/packages/experiments/src/components/Chiclet/Chiclet.types.ts b/packages/experiments/src/components/Chiclet/Chiclet.types.ts
new file mode 100644
index 0000000000000..5ba2723d4a301
--- /dev/null
+++ b/packages/experiments/src/components/Chiclet/Chiclet.types.ts
@@ -0,0 +1,92 @@
+import * as React from 'react';
+import { Chiclet } from './Chiclet';
+import { ChicletCard } from './ChicletCard';
+import { IStyle } from '../../Styling';
+//import { IStyleFunction } from '../../Utilities';
+//import { ImageFit } from '../../../office-ui-fabric-react/src/components/Image';
+//import { IIconProps } from '../../Icon';
+
+export interface IChiclet {
+
+}
+
+export interface IChicletStyles {
+  /**
+   * Style for the root element.
+   */
+  root: IStyle;
+}
+
+export interface IChicletProps extends React.Props<Chiclet> {
+  /**
+   * Optional callback to access the IChiclet interface. Use this instead of ref for accessing
+   * the public methods and properties of the component.
+   */
+  componentRef?: (component: IChiclet | null) => void;
+
+  /**
+   * Optional class for chiclet.
+   */
+  className?: string;
+
+  /**
+   * Sharing link
+   */
+  url: string;
+
+}
+
+export interface IChicletCardProps extends React.Props<ChicletCard> {
+  /**
+   * Optional callback to access the IChiclet interface. Use this instead of ref for accessing
+   * the public methods and properties of the component.
+   */
+  componentRef?: (component: IChiclet | null) => void;
+
+  /**
+  * The type of DocumentCard to display.
+  * @default Chiclet.anonymous
+  */
+  type?: ChicletType;
+
+  /**
+   * Optional class for chiclet.
+   */
+  className?: string;
+
+  /**
+   * OpenGraph props.
+   */
+  title?: string;
+  description?: string;
+  image?: string;
+  imageSecureUrl?: string;
+  imageWidth?: string;
+  imageHeight?: string;
+  imageType?: string;
+  url?: string;
+}
+
+export enum ChicletType {
+  /**
+   * Standard Chiclet for anonymous sharing links.
+   */
+  anonymous = 0,
+
+  /**
+   * Chiclet for authenticated users.
+   */
+  authenticated = 1,
+}
+
+// export interface OpenGraphObject {
+//   title?: string,
+//   type?: string,
+//   image?: string,
+//   imageUrl?: string,
+//   imageSecureUrl?: string,
+//   imageWidth?: string,
+//   imageHeight?: string,
+//   url?: string,
+//   description?: string
+// }
\ No newline at end of file
diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.tsx b/packages/experiments/src/components/Chiclet/ChicletCard.tsx
new file mode 100644
index 0000000000000..67e0e65ba7d0d
--- /dev/null
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import {
+  BaseComponent
+} from '../../Utilities';
+import { IChicletCardProps } from './Chiclet.types';
+
+export class ChicletCard extends BaseComponent<IChicletCardProps, any> {
+  public render() {
+    const { title, description, image, imageType, url } = this.props;
+
+    return (
+      <div> // style these
+        { title ? (<div>{ title }</div>) : (null) }
+        { image ? (<div>{ image }</div>) : (null) }
+        { imageType ? (<div>{ imageType }</div>) : (null) }
+        { url ? (<div>{ url }</div>) : (null) }
+        { description ? (<div>{ description }</div>) : (null) }
+        ...
+    </div >
+    );
+  }
+
+}
\ No newline at end of file
diff --git a/packages/experiments/src/components/Chiclet/ChicletPage.tsx b/packages/experiments/src/components/Chiclet/ChicletPage.tsx
new file mode 100644
index 0000000000000..e7d0001b7d02c
--- /dev/null
+++ b/packages/experiments/src/components/Chiclet/ChicletPage.tsx
@@ -0,0 +1,51 @@
+import * as React from 'react';
+import {
+  ExampleCard,
+  IComponentDemoPageProps,
+  ComponentPage
+} from '@uifabric/example-app-base';
+
+import { ChicletBasicExample } from './examples/Chiclet.Basic.Example';
+const ChicletBasicExampleCode = require('!raw-loader!experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx') as string;
+
+export class ChicletPage extends React.Component<IComponentDemoPageProps, {}> {
+  public render(): JSX.Element {
+    return (
+      <ComponentPage
+        title='Chiclet'
+        componentName='Chiclet'
+        exampleCards={
+          <div>
+            <ExampleCard title='Chiclet' isOptIn={ true } code={ ChicletBasicExampleCode }>
+              <ChicletBasicExample />
+            </ExampleCard>
+          </div>
+        }
+        propertiesTables={
+          <div />
+        }
+        overview={
+          <div />
+        }
+        bestPractices={
+          <div />
+        }
+        dos={
+          <div>
+            <ul>
+              <li>Use them to represent a large collection of items visually.</li>
+            </ul>
+          </div>
+        }
+        donts={
+          <div>
+            <ul>
+              <li>Use them for general layout of components that are not part of the same set.</li>
+            </ul>
+          </div>
+        }
+        isHeaderVisible={ this.props.isHeaderVisible }
+      />
+    );
+  }
+}
diff --git a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
new file mode 100644
index 0000000000000..5bcdeaf56053b
--- /dev/null
+++ b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import {
+  Chiclet
+} from '../Chiclet';
+
+export class ChicletBasicExample extends React.Component<any, any> {
+  constructor(props: {}) {
+    super(props);
+  }
+
+  public render() {
+    var styles = {
+      "border": "solid",
+    }
+
+    return (
+      <div style={ styles }>
+        <p>Hello, this is a chiclet!</p>
+        <Chiclet url="https://bing.com">
+        </Chiclet>
+      </div>
+    );
+  }
+
+}
\ No newline at end of file

From 542fcf800db47eeea30786507b4270baabbac22b Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Mon, 16 Apr 2018 09:50:31 -0700
Subject: [PATCH 03/67] other changes to old chiclet

---
 package.json                                  |  6 ++
 .../experiments/src/demo/AppDefinition.tsx    |  6 ++
 .../src/components/Chiclet/Chiclet.tsx        | 74 +++++++++++++++++--
 .../src/components/Chiclet/Chiclet.types.ts   | 71 +++++++++++++++++-
 .../examples/Chiclet.Basic.Example.tsx        | 12 ++-
 .../src/components/Chiclet/index.ts           |  3 +-
 6 files changed, 162 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 7ce5f0b04aa3b..e1920ad1ac022 100644
--- a/package.json
+++ b/package.json
@@ -29,5 +29,11 @@
   "license": "MIT",
   "devDependencies": {
     "@microsoft/rush": "4.3.0"
+  },
+  "dependencies": {
+    "@types/cheerio": "^0.22.7",
+    "@types/htmlparser2": "^3.7.31",
+    "htmlparser": "^1.7.7",
+    "htmlparser2": "^3.9.2"
   }
 }
diff --git a/packages/experiments/src/demo/AppDefinition.tsx b/packages/experiments/src/demo/AppDefinition.tsx
index 4452a2655f980..7de9f34f86ab2 100644
--- a/packages/experiments/src/demo/AppDefinition.tsx
+++ b/packages/experiments/src/demo/AppDefinition.tsx
@@ -16,6 +16,12 @@ export const AppDefinition: IAppDefinition = {
           name: 'CommandBar',
           url: '#/examples/commandbar'
         },
+        {
+          component: require<any>('../components/Chiclet/ChicletPage').ChicletPage,
+          key: 'Chiclet',
+          name: 'Chiclet',
+          url: '#/examples/chiclet'
+        },
         {
           component: require<any>('../components/FolderCover/FolderCoverPage').FolderCoverPage,
           key: 'FolderCover',
diff --git a/packages/office-ui-fabric-react/src/components/Chiclet/Chiclet.tsx b/packages/office-ui-fabric-react/src/components/Chiclet/Chiclet.tsx
index e48c5d0e0c43d..680dc66eba294 100644
--- a/packages/office-ui-fabric-react/src/components/Chiclet/Chiclet.tsx
+++ b/packages/office-ui-fabric-react/src/components/Chiclet/Chiclet.tsx
@@ -1,5 +1,7 @@
 import * as React from 'react';
-import { IChicletProps } from './Chiclet.types';
+import * as Cheerio from 'cheerio';
+import { IChicletProps, ChicletType } from './Chiclet.types';
+import { ChicletTitle } from './ChicletTitle';
 import {
   BaseComponent,
   KeyCodes,
@@ -9,22 +11,84 @@ import {
 import * as stylesImport from './Chiclet.scss';
 const styles: any = stylesImport;
 
-export class Chiclet extends BaseComponent<IChicletProps, any> {
-  public static defaultProps: IChicletProps = {};
+var fieldMap: { [property: string]: string; } = {};
 
+export class Chiclet extends BaseComponent<IChicletProps, any> {
   constructor(props: IChicletProps) {
     super(props);
   }
 
   public render() {
-    const { children } = this.props;
+    const { type, className, title, description, image, imageUrl, imageSecureUrl,
+      imageWidth, imageHeight, imageType, url, children } = this.props;
+
+    var fieldMap: { [property: string]: string } =
+      {
+        "og:title": "title",
+        "og:type": "type",
+        "og:image": "image",
+        "og:image:url": "image", // og:image and og:image:url are identical
+        "og:image:secure_url": "imageSecureUrl",
+        "og:image:width": "imageWidth",
+        "og:image:height": "imageHeight",
+        "og:description": "description",
+        "og:url": "url"
+      };
+
+    const html: string = `
+      <!-- This is my comment! -->
+      <head>
+        <meta charset=\"utf-8\" />
+        <link rel=\"ferde\" href=\"https://wsjeiocfn.com">
+        <meta property=\"og:title\" content=\"The Rock\" >
+        <meta property=\"og:type\" content=\"video.movie\" >
+        <meta property=\"og:url\" content=\"http://www.imdb.com/title/tt0117500/\" >
+        <meta name=\"og:title\" content=\"The Rock\" >
+        <meta name=\"og:type\" content=\"video.movie\" >
+        <meta name=\"og:url\" content=\"http://www.imdb.com/title/tt0117500/\" >
+      </head>
+      <body>
+        <html>
+
+        </html>
+      </body>`;
+
+    let openGraphObject = this.extractMetaTags(html, fieldMap);
 
     return (
       <div>
-        <p>hello!!!</p>
+        <div>
+          { openGraphObject.title ? (<div>{ "Title: " + openGraphObject.title }</div>) : (null) }
+          { openGraphObject.url ? (<div>{ "Url: " + openGraphObject.url }</div>) : (null) }
+          { openGraphObject.image ? (<div>{ "Image: " + openGraphObject.image }</div>) : (null) }
+          { openGraphObject.description ? (<div>{ "Description: " + openGraphObject.description }</div>) : (null) }
+          { openGraphObject.type ? (<div>{ "Type: " + openGraphObject.type }</div>) : (null) }
+        </div>
         { children }
       </div>
     );
   }
 
+  public extractMetaTags(html: string, fieldMap: { [property: string]: string }) {
+    const $ = Cheerio.load(html);
+    const meta = $('meta');
+    let openGraphObject: IChicletProps = {}; //{ [property: string]: string } = {};
+
+    for (let key in meta) {
+      if (!(meta[key].attribs && (meta[key].attribs.property || meta[key].attribs.name))) {
+        break;
+      }
+
+      const property = meta[key].attribs.property || meta[key].attribs.name;
+      const content = meta[key].attribs.content || meta[key].attribs.value;
+
+      if (property in fieldMap) {
+        let name: string = fieldMap[property];
+        openGraphObject[name] = content;
+      }
+    }
+
+    return openGraphObject;
+  }
+
 }
diff --git a/packages/office-ui-fabric-react/src/components/Chiclet/Chiclet.types.ts b/packages/office-ui-fabric-react/src/components/Chiclet/Chiclet.types.ts
index 3968355cf65a3..9ddb6223e788c 100644
--- a/packages/office-ui-fabric-react/src/components/Chiclet/Chiclet.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Chiclet/Chiclet.types.ts
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Chiclet } from './Chiclet';
 import { ChicletPreview } from './ChicletPreview';
+import { ChicletTitle } from './ChicletTitle';
 import { IStyle, ITheme } from '../../Styling';
 import { IStyleFunction } from '../../Utilities';
 import { ImageFit } from '../../Image';
@@ -25,10 +26,42 @@ export interface IChicletProps extends React.Props<Chiclet> {
    */
   componentRef?: (component: IChiclet | null) => void;
 
+  /**
+  * The type of DocumentCard to display.
+  * @default Chiclet.anonymous
+  */
+  type?: ChicletType;
+
   /**
    * Optional class for chiclet.
    */
   className?: string;
+
+  /**
+   * OpenGraph props.
+   */
+  title?: string;
+  description?: string;
+  image?: string;
+  imageUrl?: string;
+  imageSecureUrl?: string;
+  imageWidth?: string;
+  imageHeight?: string;
+  imageType?: string;
+  url?: string;
+  [key: string]: any;
+}
+
+export enum ChicletType {
+  /**
+   * Standard Chiclet for anonymous sharing links.
+   */
+  anonymous = 0,
+
+  /**
+   * Chiclet for authenticated users.
+   */
+  authenticated = 1,
 }
 
 export interface IChicletPreviewProps extends React.Props<ChicletPreview> {
@@ -48,7 +81,43 @@ export interface IChicletPreviewProps extends React.Props<ChicletPreview> {
    */
   getOverflowDocumentCountText?: (overflowCount: number) => string;
 }
+export interface IChicletTitleProps extends React.Props<ChicletTitle> {
+  /**
+   * Gets the component ref.
+   */
+  componentRef?: () => void;
+
+  /**
+   * Title text. If the card represents more than one document, this should be the title of one document and a "+X" string. For example, a collection of four documents would have a string of "Document.docx +3".
+   */
+  title: string;
+
+  /**
+   * Whether we truncate the title to fit within the box. May have a performance impact.
+   * @defaultvalue true
+   */
+  shouldTruncate?: boolean;
+
+  /**
+   * Whether show as title as secondary title style such as smaller font and lighter color.
+   * @defaultvalue false
+   */
+  showAsSecondaryTitle?: boolean;
+}
+
 
 export interface IChicletPreviewImage extends IDocumentCardPreviewImage {
 
-}
\ No newline at end of file
+}
+
+// export interface OpenGraphObject {
+//   title?: string,
+//   type?: string,
+//   image?: string,
+//   imageUrl?: string,
+//   imageSecureUrl?: string,
+//   imageWidth?: string,
+//   imageHeight?: string,
+//   url?: string,
+//   description?: string
+// }
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
index ca57f6d0442cc..c23d5e4054e5e 100644
--- a/packages/office-ui-fabric-react/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
@@ -2,7 +2,9 @@ import * as React from 'react';
 import {
   Chiclet,
   ChicletPreview,
-  IChicletPreviewProps
+  ChicletTitle,
+  IChicletPreviewProps,
+  IChicletTitleProps
 } from 'office-ui-fabric-react/lib/Chiclet';
 import { ImageFit } from 'office-ui-fabric-react/lib/Image';
 import { TestImages } from '../../../common/TestImages';
@@ -23,12 +25,16 @@ export class ChicletBasicExample extends React.Component<any, any> {
       ]
     };
 
+    var styles = {
+      "border": "solid",
+    }
+
     return (
-      <div>
-        <meta property="og:title" content="My title" />
+      <div style={ styles }>
         <p>Hello, this is a chiclet!</p>
         <Chiclet>
           <ChicletPreview { ...previewProps } />
+          <ChicletTitle title='6 files were uploaded' />
         </Chiclet>
       </div>
     );
diff --git a/packages/office-ui-fabric-react/src/components/Chiclet/index.ts b/packages/office-ui-fabric-react/src/components/Chiclet/index.ts
index 65bee525d543f..1656a6730b8b9 100644
--- a/packages/office-ui-fabric-react/src/components/Chiclet/index.ts
+++ b/packages/office-ui-fabric-react/src/components/Chiclet/index.ts
@@ -1,3 +1,4 @@
 export * from './Chiclet';
 export * from './Chiclet.types';
-export * from './ChicletPreview';
\ No newline at end of file
+export * from './ChicletPreview';
+export * from './ChicletTitle';
\ No newline at end of file

From c6f0aab329c1027e482df24130aba7e29224a023 Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Thu, 19 Apr 2018 10:24:21 -0700
Subject: [PATCH 04/67] basic chiclet moved to experiments

---
 .../src/components/Chiclet/Chiclet.scss       | 104 +++++++++++++
 .../src/components/Chiclet/Chiclet.tsx        | 140 ++++++++----------
 .../src/components/Chiclet/Chiclet.types.ts   |  12 ++
 .../src/components/Chiclet/ChicletCard.tsx    |  99 +++++++++++--
 .../examples/Chiclet.Basic.Example.tsx        |  11 +-
 .../Suggestions/Suggestions.tsx               |   2 +-
 .../src/components/Chiclet/Chiclet.base.tsx   |   6 -
 .../src/components/Chiclet/Chiclet.scss       |   0
 .../src/components/Chiclet/Chiclet.styles.ts  |   0
 .../src/components/Chiclet/Chiclet.tsx        |  94 ------------
 .../src/components/Chiclet/Chiclet.types.ts   | 123 ---------------
 .../src/components/Chiclet/ChicletPage.tsx    |  57 -------
 .../src/components/Chiclet/ChicletPreview.tsx | 121 ---------------
 .../examples/Chiclet.Basic.Example.tsx        |  43 ------
 .../src/components/Chiclet/index.ts           |   4 -
 15 files changed, 274 insertions(+), 542 deletions(-)
 delete mode 100644 packages/office-ui-fabric-react/src/components/Chiclet/Chiclet.base.tsx
 delete mode 100644 packages/office-ui-fabric-react/src/components/Chiclet/Chiclet.scss
 delete mode 100644 packages/office-ui-fabric-react/src/components/Chiclet/Chiclet.styles.ts
 delete mode 100644 packages/office-ui-fabric-react/src/components/Chiclet/Chiclet.tsx
 delete mode 100644 packages/office-ui-fabric-react/src/components/Chiclet/Chiclet.types.ts
 delete mode 100644 packages/office-ui-fabric-react/src/components/Chiclet/ChicletPage.tsx
 delete mode 100644 packages/office-ui-fabric-react/src/components/Chiclet/ChicletPreview.tsx
 delete mode 100644 packages/office-ui-fabric-react/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
 delete mode 100644 packages/office-ui-fabric-react/src/components/Chiclet/index.ts

diff --git a/packages/experiments/src/components/Chiclet/Chiclet.scss b/packages/experiments/src/components/Chiclet/Chiclet.scss
index e69de29bb2d1d..a716e999fc495 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.scss
+++ b/packages/experiments/src/components/Chiclet/Chiclet.scss
@@ -0,0 +1,104 @@
+@import '~office-ui-fabric-react/src/common/common';
+
+.root {
+  -webkit-font-smoothing: antialiased;
+  background-color: $ms-color-white;
+  border: 1px solid $ms-color-neutralLight;
+  //box-sizing: border-box;
+  max-width: 320px;
+  min-width: 206px;
+  //user-select: none;
+  //position: relative;
+}
+
+.root {
+  //display: flex;
+  max-width: 480px;
+  height: 109px;
+  // :global(.ms-DocumentCard-details) {
+  //   display: flex;
+  //   flex-direction: column;
+  //   flex: 1;
+  //   justify-content: space-between;
+  //   overflow: hidden;
+  // }
+}
+
+/* Preview */
+.preview {
+  float: left;
+  border-right: 1px, solid, $ms-color-neutralLight;
+  border-bottom: none;
+  max-height: 100px;
+  max-width: 144px;
+  position: relative;
+  overflow: hidden; // need to fix
+  background-color: $ms-color-neutralLighterAlt;
+}
+
+.previewIconContainer {
+  height: 100%;
+  // display: flex;
+  // align-items: center;
+  // justify-content: center
+}
+
+/* Info */
+.info {
+  display: block;
+  height: 100%;
+  line-height: 21px;
+  overflow: hidden;
+  word-wrap: break-word;
+}
+
+/* Title */
+$ChicletCard-title-lineHeight: 21px;
+.title {
+  padding: 8px 16px 0px;
+  @include ms-font-l;
+  color: $ms-color-neutralPrimary;
+  height: 42px; // Two lines of text, making sure the third line is hidden
+  line-height: $ChicletCard-title-lineHeight;
+  overflow: hidden;
+  word-wrap: break-word;
+}
+
+/* Link */
+.link {
+  padding: 2px 16px 0px;
+  @include ms-font-l;
+  font-size: 8pt;
+  color: $ms-color-neutralPrimary;
+}
+
+/* Actions */
+$ms-ChicletCardActions-actionSize: 34px;
+$ms-ChicletCardActions-horizontalPadding: 12px;
+$ms-ChicletCardActions-verticalPadding: 2px;
+
+.actions {
+  height: $ms-ChicletCardActions-actionSize;
+  padding: $ms-ChicletCardActions-verticalPadding $ms-ChicletCardActions-horizontalPadding;
+  position: relative;
+}
+
+.action {
+  float: right;
+  @include ms-margin-left(4px);
+  cursor: pointer;
+
+  :global(.ms-Button) {
+    font-size: 16px;
+    height: $ms-ChicletCardActions-actionSize;
+    width: $ms-ChicletCardActions-actionSize;
+    color: #166EBE;
+  }
+
+  :global(.ms-Button:hover) {
+    :global(.ms-Button-icon) {
+      color: $buttonTextColor;
+      cursor: pointer;
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/experiments/src/components/Chiclet/Chiclet.tsx b/packages/experiments/src/components/Chiclet/Chiclet.tsx
index 0bc3ba6dd99b1..a2fec882771a1 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.tsx
+++ b/packages/experiments/src/components/Chiclet/Chiclet.tsx
@@ -1,11 +1,12 @@
 import * as React from 'react';
-import * as Cheerio from 'cheerio';
-import * as HtmlParser from 'htmlparser2';
 import {
-  BaseComponent
+  BaseComponent,
+  css
 } from '../../Utilities';
+import { ChicletCard } from './ChicletCard';
 import { IChicletProps, IChicletCardProps } from './Chiclet.types';
-//import * as stylesImport from './Chiclet.scss';
+import * as stylesImport from './Chiclet.scss';
+const styles: any = stylesImport;
 
 //var fieldMap: { [property: string]: string; } = {};
 
@@ -14,91 +15,80 @@ export class Chiclet extends BaseComponent<IChicletProps, any> {
     const { /*type, className, title, description, image, imageUrl, imageSecureUrl,
       imageWidth, imageHeight, imageType, url,*/ children, url } = this.props;
 
-    var fieldMap: { [property: string]: string } =
-      {
-        "og:title": "title",
-        "og:type": "type",
-        "og:image": "image",
-        "og:image:url": "image", // og:image and og:image:url are identical
-        "og:image:secure_url": "imageSecureUrl",
-        "og:image:width": "imageWidth",
-        "og:image:height": "imageHeight",
-        "og:description": "description",
-        "og:url": "url"
-      };
+    const html: string = `<html>
+        <!-- This is my comment! -->
+        <head>
+          <meta charset=\"utf-8\" >
+          <link rel=\"ferde\" href=\"https://wsjeiocfn.com">
+          <meta property=\"og:title\" content=\"The Rock\" >
+          <meta property=\"og:type\" content=\"video.movie\" >
+          <meta property=\"og:url\" content=\"http://www.imdb.com/title/tt0117500/\" >
+          <meta name=\"og:title\" content=\"The Rock\" >
+          <meta name=\"og:type\" content=\"video.movie\" >
+          <meta name=\"og:url\" content=\"http://www.imdb.com/title/tt0117500/\" >
+        </head>
+        <body>
+        </body>
+      </html>`;
 
-    // const html: string = `
-    //   <!-- This is my comment! -->
-    //   <head>
-    //     <meta charset=\"utf-8\" />
-    //     <link rel=\"ferde\" href=\"https://wsjeiocfn.com">
-    //     <meta property=\"og:title\" content=\"The Rock\" >
-    //     <meta property=\"og:type\" content=\"video.movie\" >
-    //     <meta property=\"og:url\" content=\"http://www.imdb.com/title/tt0117500/\" >
-    //     <meta name=\"og:title\" content=\"The Rock\" >
-    //     <meta name=\"og:type\" content=\"video.movie\" >
-    //     <meta name=\"og:url\" content=\"http://www.imdb.com/title/tt0117500/\" >
-    //   </head>
-    //   <body>
-    //     <html>
-
-    //     </html>
-    //   </body>`;
-
-    let openGraphObject = this.extractMetaTags(url, fieldMap);
+    let openGraphObject = this.extractMetaTags(html);
 
     return (
-      <div>
-        <div>
-          {/* { openGraphObject.title ? (<div>{ "Title: " + openGraphObject.title }</div>) : (null) }
-          { openGraphObject.url ? (<div>{ "Url: " + openGraphObject.url }</div>) : (null) }
-          { openGraphObject.image ? (<div>{ "Image: " + openGraphObject.image }</div>) : (null) }
-          { openGraphObject.description ? (<div>{ "Description: " + openGraphObject.description }</div>) : (null) }
-          { openGraphObject.type ? (<div>{ "Type: " + openGraphObject.type }</div>) : (null) } */}
-        </div>
+      <div className={ css(styles.root) }>
+        <ChicletCard
+          title={ openGraphObject.title }
+          description={ openGraphObject.description }
+          url={ openGraphObject.url }
+          image={ openGraphObject.image }
+          imageType={ openGraphObject.imageType }
+        />
         { children }
       </div>
     );
   }
 
-  public extractMetaTags(html: string, fieldMap: { [property: string]: string }) {
-    var quickExpr = /^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/;
-    var str = "<head><meta property=\"og:title\" content=\"La La Land\"><meta property=\"og:title\" content=\"La La Land\"><meta property=\"og:title\" content=\"La La Land\"></head>";
-    if (str.charAt(0) === '<' && str.charAt(str.length - 1) === '>' && str.length >= 3) {
-      //isHtml
-    }
-    var match = quickExpr.exec(str);
-    if (!!(match && match[1])) {
-      //isHtml
-    }
-    // var i = 0;
-    // var metaTags: { [property: string]: string } = {};
-    // while(i < html.length) {
-    //   var c = html.charAt(i);
-    //   if (c === "<"){
-    //     if()
-    //   }
-    // }
+  public extractMetaTags(html: string) {
+    var attributes: IChicletCardProps = {};
 
-    const $ = Cheerio.load(html);
-    const meta = $('meta');
-    let openGraphObject: IChicletCardProps = {}; //{ [property: string]: string } = {};
+    var xmlHttp = new XMLHttpRequest();
+    xmlHttp.open("GET", "http://localhost:4322", false);
+    xmlHttp.overrideMimeType('text/xml');
+    xmlHttp.send(null);
+    // var xmlDocument = xmlHttp.responseXML;
+    // var responseString = xmlHttp.responseText;
 
-    for (let key in meta) {
-      if (!(meta[key].attribs && (meta[key].attribs.property || meta[key].attribs.name))) {
-        break;
-      }
+    var metaElements = document.getElementsByTagName("meta");
+    for (var i = 0; i < metaElements.length; i++) {
+      console.log("Content of meta tag: " + metaElements[i].content);
+    }
 
-      const property = meta[key].attribs.property || meta[key].attribs.name;
-      const content = meta[key].attribs.content || meta[key].attribs.value;
+    let openGraphObject = this._getChildren(metaElements, attributes);
 
-      if (property in fieldMap) {
-        let name: string = fieldMap[property];
-        // openGraphObject["title"] = content;
+    return openGraphObject;
+  }
+
+  public _getChildren(metaElements: NodeListOf<HTMLMetaElement>, attributes: IChicletCardProps): IChicletCardProps {
+    for (var i = 0; i < metaElements.length; i++) {
+      switch (metaElements[i].name) {
+        case "og:title":
+          attributes.title = metaElements[i].content;
+          break;
+        case "og:type":
+          attributes.ogType = metaElements[i].content;
+          break;
+        case "og:image":
+        case "og:image:url":
+          attributes.image = metaElements[i].content;
+          break;
+        case "og:description":
+          attributes.description = metaElements[i].content;
+          break;
+        case "og:url":
+          attributes.url = metaElements[i].content;
+          break;
       }
     }
-
-    return openGraphObject;
+    return attributes;
   }
 
 }
diff --git a/packages/experiments/src/components/Chiclet/Chiclet.types.ts b/packages/experiments/src/components/Chiclet/Chiclet.types.ts
index 5ba2723d4a301..a0d1c5f2ca170 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.types.ts
+++ b/packages/experiments/src/components/Chiclet/Chiclet.types.ts
@@ -54,10 +54,22 @@ export interface IChicletCardProps extends React.Props<ChicletCard> {
    */
   className?: string;
 
+  /**
+   * Function to call when the card is clicked or keyboard Enter/Space is pushed.
+   */
+  onClick?: (ev?: React.SyntheticEvent<HTMLElement>) => void;
+
+  /**
+   * A URL to navigate to when the card is clicked. If a function has also been provided,
+   * it will be used instead of the URL.
+   */
+  onClickHref?: string;
+
   /**
    * OpenGraph props.
    */
   title?: string;
+  ogType?: string;
   description?: string;
   image?: string;
   imageSecureUrl?: string;
diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.tsx b/packages/experiments/src/components/Chiclet/ChicletCard.tsx
index 67e0e65ba7d0d..e74f7c9d2ad24 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.tsx
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.tsx
@@ -1,23 +1,102 @@
 import * as React from 'react';
 import {
-  BaseComponent
+  BaseComponent,
+  KeyCodes,
+  css
 } from '../../Utilities';
 import { IChicletCardProps } from './Chiclet.types';
+import { Icon } from 'office-ui-fabric-react/lib/Icon';
+import { IconButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
+import { Image } from 'office-ui-fabric-react/lib/Image';
+import { TestImages } from 'office-ui-fabric-react/src/common/TestImages';
+import { FocusZone } from 'office-ui-fabric-react/lib/FocusZone';
+import * as stylesImport from './Chiclet.scss';
+const styles: any = stylesImport;
 
 export class ChicletCard extends BaseComponent<IChicletCardProps, any> {
   public render() {
-    const { title, description, image, imageType, url } = this.props;
+    const { title, description, image, imageType, imageWidth, imageHeight, url, onClick, onClickHref } = this.props;
+    const actionable = (onClick || onClickHref) ? true : false;
+
+    var actions: IButtonProps[] = [
+      { iconProps: { iconName: 'Breadcrumb' } },
+      { iconProps: { iconName: 'Save' } },
+      { iconProps: { iconName: 'Share' } }
+    ];
 
     return (
-      <div> // style these
-        { title ? (<div>{ title }</div>) : (null) }
-        { image ? (<div>{ image }</div>) : (null) }
-        { imageType ? (<div>{ imageType }</div>) : (null) }
-        { url ? (<div>{ url }</div>) : (null) }
-        { description ? (<div>{ description }</div>) : (null) }
-        ...
-    </div >
+      <FocusZone data-is-focusable={ true } allowFocusRoot>
+        <div
+          onKeyDown={ actionable ? this._onKeyDown : undefined }
+          onClick={ actionable ? this._onClick : undefined }
+        >
+          <div
+            className={ css('ms-ChicletCardPreview', styles.preview) }
+          >
+            <div className={ css('ms-ChicletCardPreview-iconContainer', styles.previewIconContainer) } >
+              { image ?
+                (<div>{ image }</div>) :
+                (<Image
+                  src={ TestImages.documentPreviewTwo }
+                  role='presentation'
+                  alt=''
+                />)
+              }
+            </div>
+          </div>
+          <div
+            className={ css('ms-ChicletCardInfo', styles.info) }
+          >
+            <div
+              className={ css('ms-ChicletCardTitle', styles.title) }
+            >
+              { title ? title : "Title goes here and if it's really long it wraps around to the second line but does not make it to the third line" }
+            </div>
+            { imageType ? (<div>{ imageType }</div>) : (null) }
+            { imageWidth ? (<div>{ imageWidth }</div>) : (null) }
+            { imageHeight ? (<div>{ imageHeight }</div>) : (null) }
+            <div
+              className={ css('ms-ChicletCardLink', styles.link) }
+            >
+              { url ? url : "https://onedrive.com/files/v-lygi/39192908430" }
+            </div>
+            { description ? (<div>{ description }</div>) : (null) }
+            <div className={ css('ms-ChicletCardActions', styles.actions) }>
+              { actions && actions.map((action, index) => {
+                return (
+                  <div className={ css('ms-ChicletActions-action', styles.action) } key={ index }>
+                    <IconButton { ...action } />
+                  </div>
+                );
+              }) }
+            </div>
+          </div>
+        </div>
+      </FocusZone>
     );
   }
 
+  private _onClick = (ev: React.MouseEvent<HTMLElement>): void => {
+    this._onAction(ev);
+  }
+
+  private _onKeyDown = (ev: React.KeyboardEvent<HTMLElement>): void => {
+    if (ev.which === KeyCodes.enter || ev.which === KeyCodes.space) {
+      this._onAction(ev);
+    }
+  }
+
+  private _onAction = (ev: React.SyntheticEvent<HTMLElement>): void => {
+    const { onClick, onClickHref } = this.props;
+
+    if (onClick) {
+      onClick(ev);
+    } else if (!onClick && onClickHref) {
+      // If no onClick Function was provided and we do have an onClickHref, redirect to the onClickHref
+      window.location.href = onClickHref;
+      ev.preventDefault();
+      ev.stopPropagation();
+    }
+  }
+
 }
\ No newline at end of file
diff --git a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
index 5bcdeaf56053b..171734dcbca3a 100644
--- a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
+++ b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
@@ -9,15 +9,10 @@ export class ChicletBasicExample extends React.Component<any, any> {
   }
 
   public render() {
-    var styles = {
-      "border": "solid",
-    }
-
     return (
-      <div style={ styles }>
-        <p>Hello, this is a chiclet!</p>
-        <Chiclet url="https://bing.com">
-        </Chiclet>
+      <div>
+        <h2>Hello, this is a chiclet!</h2>
+        <Chiclet url="https://bing.com" />
       </div>
     );
   }
diff --git a/packages/experiments/src/components/FloatingPicker/Suggestions/Suggestions.tsx b/packages/experiments/src/components/FloatingPicker/Suggestions/Suggestions.tsx
index 1eabdcf4a433d..0f29542fd8a14 100644
--- a/packages/experiments/src/components/FloatingPicker/Suggestions/Suggestions.tsx
+++ b/packages/experiments/src/components/FloatingPicker/Suggestions/Suggestions.tsx
@@ -18,7 +18,7 @@ export class Suggestions<T> extends BaseComponent<ISuggestionsProps<T>, {}> {
   public currentSuggestion: ISuggestionModel<T> | undefined;
   protected _selectedElement: HTMLDivElement;
   private SuggestionsItemOfProperType: new (props: ISuggestionItemProps<T>) => SuggestionsItem<T> =
-  SuggestionsItem as new (props: ISuggestionItemProps<T>) => SuggestionsItem<T>;
+    SuggestionsItem as new (props: ISuggestionItemProps<T>) => SuggestionsItem<T>;
 
   constructor(suggestionsProps: ISuggestionsProps<T>) {
     super(suggestionsProps);
diff --git a/packages/office-ui-fabric-react/src/components/Chiclet/Chiclet.base.tsx b/packages/office-ui-fabric-react/src/components/Chiclet/Chiclet.base.tsx
deleted file mode 100644
index b6d76749a0a81..0000000000000
--- a/packages/office-ui-fabric-react/src/components/Chiclet/Chiclet.base.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react';
-import {
-  BaseComponent,
-  classNamesFunction,
-  customizable,
-} from '../../Utilities';
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Chiclet/Chiclet.scss b/packages/office-ui-fabric-react/src/components/Chiclet/Chiclet.scss
deleted file mode 100644
index e69de29bb2d1d..0000000000000
diff --git a/packages/office-ui-fabric-react/src/components/Chiclet/Chiclet.styles.ts b/packages/office-ui-fabric-react/src/components/Chiclet/Chiclet.styles.ts
deleted file mode 100644
index e69de29bb2d1d..0000000000000
diff --git a/packages/office-ui-fabric-react/src/components/Chiclet/Chiclet.tsx b/packages/office-ui-fabric-react/src/components/Chiclet/Chiclet.tsx
deleted file mode 100644
index 680dc66eba294..0000000000000
--- a/packages/office-ui-fabric-react/src/components/Chiclet/Chiclet.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import * as React from 'react';
-import * as Cheerio from 'cheerio';
-import { IChicletProps, ChicletType } from './Chiclet.types';
-import { ChicletTitle } from './ChicletTitle';
-import {
-  BaseComponent,
-  KeyCodes,
-  css,
-  styled
-} from '../../Utilities';
-import * as stylesImport from './Chiclet.scss';
-const styles: any = stylesImport;
-
-var fieldMap: { [property: string]: string; } = {};
-
-export class Chiclet extends BaseComponent<IChicletProps, any> {
-  constructor(props: IChicletProps) {
-    super(props);
-  }
-
-  public render() {
-    const { type, className, title, description, image, imageUrl, imageSecureUrl,
-      imageWidth, imageHeight, imageType, url, children } = this.props;
-
-    var fieldMap: { [property: string]: string } =
-      {
-        "og:title": "title",
-        "og:type": "type",
-        "og:image": "image",
-        "og:image:url": "image", // og:image and og:image:url are identical
-        "og:image:secure_url": "imageSecureUrl",
-        "og:image:width": "imageWidth",
-        "og:image:height": "imageHeight",
-        "og:description": "description",
-        "og:url": "url"
-      };
-
-    const html: string = `
-      <!-- This is my comment! -->
-      <head>
-        <meta charset=\"utf-8\" />
-        <link rel=\"ferde\" href=\"https://wsjeiocfn.com">
-        <meta property=\"og:title\" content=\"The Rock\" >
-        <meta property=\"og:type\" content=\"video.movie\" >
-        <meta property=\"og:url\" content=\"http://www.imdb.com/title/tt0117500/\" >
-        <meta name=\"og:title\" content=\"The Rock\" >
-        <meta name=\"og:type\" content=\"video.movie\" >
-        <meta name=\"og:url\" content=\"http://www.imdb.com/title/tt0117500/\" >
-      </head>
-      <body>
-        <html>
-
-        </html>
-      </body>`;
-
-    let openGraphObject = this.extractMetaTags(html, fieldMap);
-
-    return (
-      <div>
-        <div>
-          { openGraphObject.title ? (<div>{ "Title: " + openGraphObject.title }</div>) : (null) }
-          { openGraphObject.url ? (<div>{ "Url: " + openGraphObject.url }</div>) : (null) }
-          { openGraphObject.image ? (<div>{ "Image: " + openGraphObject.image }</div>) : (null) }
-          { openGraphObject.description ? (<div>{ "Description: " + openGraphObject.description }</div>) : (null) }
-          { openGraphObject.type ? (<div>{ "Type: " + openGraphObject.type }</div>) : (null) }
-        </div>
-        { children }
-      </div>
-    );
-  }
-
-  public extractMetaTags(html: string, fieldMap: { [property: string]: string }) {
-    const $ = Cheerio.load(html);
-    const meta = $('meta');
-    let openGraphObject: IChicletProps = {}; //{ [property: string]: string } = {};
-
-    for (let key in meta) {
-      if (!(meta[key].attribs && (meta[key].attribs.property || meta[key].attribs.name))) {
-        break;
-      }
-
-      const property = meta[key].attribs.property || meta[key].attribs.name;
-      const content = meta[key].attribs.content || meta[key].attribs.value;
-
-      if (property in fieldMap) {
-        let name: string = fieldMap[property];
-        openGraphObject[name] = content;
-      }
-    }
-
-    return openGraphObject;
-  }
-
-}
diff --git a/packages/office-ui-fabric-react/src/components/Chiclet/Chiclet.types.ts b/packages/office-ui-fabric-react/src/components/Chiclet/Chiclet.types.ts
deleted file mode 100644
index 9ddb6223e788c..0000000000000
--- a/packages/office-ui-fabric-react/src/components/Chiclet/Chiclet.types.ts
+++ /dev/null
@@ -1,123 +0,0 @@
-import * as React from 'react';
-import { Chiclet } from './Chiclet';
-import { ChicletPreview } from './ChicletPreview';
-import { ChicletTitle } from './ChicletTitle';
-import { IStyle, ITheme } from '../../Styling';
-import { IStyleFunction } from '../../Utilities';
-import { ImageFit } from '../../Image';
-import { IIconProps } from '../../Icon';
-import { IDocumentCardPreviewProps, IDocumentCardPreviewImage } from '../DocumentCard/DocumentCard.types';
-
-export interface IChiclet {
-
-}
-
-export interface IChicletStyles {
-  /**
-   * Style for the root element.
-   */
-  root: IStyle;
-}
-
-export interface IChicletProps extends React.Props<Chiclet> {
-  /**
-   * Optional callback to access the IChiclet interface. Use this instead of ref for accessing
-   * the public methods and properties of the component.
-   */
-  componentRef?: (component: IChiclet | null) => void;
-
-  /**
-  * The type of DocumentCard to display.
-  * @default Chiclet.anonymous
-  */
-  type?: ChicletType;
-
-  /**
-   * Optional class for chiclet.
-   */
-  className?: string;
-
-  /**
-   * OpenGraph props.
-   */
-  title?: string;
-  description?: string;
-  image?: string;
-  imageUrl?: string;
-  imageSecureUrl?: string;
-  imageWidth?: string;
-  imageHeight?: string;
-  imageType?: string;
-  url?: string;
-  [key: string]: any;
-}
-
-export enum ChicletType {
-  /**
-   * Standard Chiclet for anonymous sharing links.
-   */
-  anonymous = 0,
-
-  /**
-   * Chiclet for authenticated users.
-   */
-  authenticated = 1,
-}
-
-export interface IChicletPreviewProps extends React.Props<ChicletPreview> {
-  /**
-   * Gets the component ref.
-   */
-  componentRef?: () => void;
-
-  /**
-   * One or more preview images to display.
-   */
-  previewImages: IDocumentCardPreviewImage[];
-
-  /**
-   * The function return string that will describe the number of overflow documents.
-   * such as  (overflowCount: number) => `+${ overflowCount } more`,
-   */
-  getOverflowDocumentCountText?: (overflowCount: number) => string;
-}
-export interface IChicletTitleProps extends React.Props<ChicletTitle> {
-  /**
-   * Gets the component ref.
-   */
-  componentRef?: () => void;
-
-  /**
-   * Title text. If the card represents more than one document, this should be the title of one document and a "+X" string. For example, a collection of four documents would have a string of "Document.docx +3".
-   */
-  title: string;
-
-  /**
-   * Whether we truncate the title to fit within the box. May have a performance impact.
-   * @defaultvalue true
-   */
-  shouldTruncate?: boolean;
-
-  /**
-   * Whether show as title as secondary title style such as smaller font and lighter color.
-   * @defaultvalue false
-   */
-  showAsSecondaryTitle?: boolean;
-}
-
-
-export interface IChicletPreviewImage extends IDocumentCardPreviewImage {
-
-}
-
-// export interface OpenGraphObject {
-//   title?: string,
-//   type?: string,
-//   image?: string,
-//   imageUrl?: string,
-//   imageSecureUrl?: string,
-//   imageWidth?: string,
-//   imageHeight?: string,
-//   url?: string,
-//   description?: string
-// }
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Chiclet/ChicletPage.tsx b/packages/office-ui-fabric-react/src/components/Chiclet/ChicletPage.tsx
deleted file mode 100644
index 756bfa136b851..0000000000000
--- a/packages/office-ui-fabric-react/src/components/Chiclet/ChicletPage.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import * as React from 'react';
-import {
-  ExampleCard,
-  IComponentDemoPageProps,
-  ComponentPage,
-  PropertiesTableSet
-} from '@uifabric/example-app-base';
-import { ChicletBasicExample } from './examples/Chiclet.Basic.Example';
-
-const ChicletBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx') as string;
-
-export class ChicletPage extends React.Component<IComponentDemoPageProps, {}> {
-  public render() {
-    return (
-      <ComponentPage
-        title='Chiclet'
-        componentName='ChicletExample'
-        exampleCards={
-          <div>
-            <ExampleCard title='Default Chiclet' code={ ChicletBasicExampleCode }>
-              <ChicletBasicExample />
-            </ExampleCard>
-          </div>
-        }
-        propertiesTables={
-          <PropertiesTableSet
-            sources={ [
-              require<string>('!raw-loader!office-ui-fabric-react/src/components/Chiclet/Chiclet.types.ts')
-            ] }
-          />
-        }
-        overview={
-          <div>
-            <p>
-              Chiclet
-            </p>
-          </div>
-        }
-        bestPractices={
-          <div />
-        }
-        dos={
-          <div>
-            <ul />
-          </div>
-        }
-        donts={
-          <div>
-            <ul />
-          </div>
-        }
-        isHeaderVisible={ this.props.isHeaderVisible }
-      />
-    );
-  }
-
-}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Chiclet/ChicletPreview.tsx b/packages/office-ui-fabric-react/src/components/Chiclet/ChicletPreview.tsx
deleted file mode 100644
index 6b958d70b0d99..0000000000000
--- a/packages/office-ui-fabric-react/src/components/Chiclet/ChicletPreview.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import * as React from 'react';
-import { IChicletPreviewProps, IChicletPreviewImage } from './Chiclet.types';
-import { Image } from '../../Image';
-import { Icon } from '../../Icon';
-import {
-  BaseComponent,
-  css
-} from '../../Utilities';
-import * as stylesImport from './Chiclet.scss';
-const styles: any = stylesImport;
-
-const LIST_ITEM_COUNT = 3;
-
-export class ChicletPreview extends BaseComponent<IChicletPreviewProps, any> {
-  public render() {
-    const { previewImages } = this.props;
-    let style, preview;
-    let isFileList = false;
-
-    if (previewImages.length > 1) {
-      // Render a list of files
-      preview = this._renderPreviewList(previewImages);
-      isFileList = true;
-    } else if (previewImages.length === 1) {
-      // Render a single preview
-      preview = this._renderPreviewImage(previewImages[0]);
-
-      // Override the border color if an accent color was provided
-      if (previewImages[0].accentColor) {
-        style = {
-          borderBottomColor: previewImages[0].accentColor
-        };
-      }
-    }
-
-    return (
-      <div
-        className={ css('ms-DocumentCardPreview', styles.preview, isFileList && ('is-fileList ' + styles.previewIsFileList)) }
-        style={ style }
-      >
-        { preview }
-      </div>
-    );
-  }
-
-  private _renderPreviewImage(previewImage: IChicletPreviewImage): React.ReactElement<React.HTMLAttributes<HTMLDivElement>> {
-    const { width, height, imageFit, previewIconProps, previewIconContainerClass } = previewImage;
-    const iconContainerClass = previewIconContainerClass ? previewIconContainerClass : 'ms-DocumentCardPreview-iconContainer';
-
-    if (previewIconProps) {
-      return (
-        <div className={ css(iconContainerClass, styles.previewIconContainer) } style={ { width: width, height: height } } >
-          <Icon { ...previewIconProps } />
-        </div>
-      );
-    }
-
-    const image = (
-      <Image
-        width={ width }
-        height={ height }
-        imageFit={ imageFit }
-        src={ previewImage.previewImageSrc }
-        role='presentation'
-        alt=''
-      />
-    );
-
-    let icon;
-    if (previewImage.iconSrc) {
-      icon = <Image className={ css('ms-DocumentCardPreview-icon', styles.icon) } src={ previewImage.iconSrc } role='presentation' alt='' />;
-    }
-
-    return (
-      <div>
-        { image }
-        { icon }
-      </div>
-    );
-  }
-
-  private _renderPreviewList = (previewImages: IChicletPreviewImage[]): React.ReactElement<React.HTMLAttributes<HTMLDivElement>> => {
-    const { getOverflowDocumentCountText } = this.props;
-
-    // Determine how many documents we won't be showing
-    const overflowDocumentCount = previewImages.length - LIST_ITEM_COUNT;
-
-    // Determine the overflow text that will be rendered after the preview list.
-    const overflowText = overflowDocumentCount ?
-      (getOverflowDocumentCountText ?
-        getOverflowDocumentCountText(overflowDocumentCount) :
-        '+' + overflowDocumentCount) : null;
-
-    // Create list items for the documents to be shown
-    const fileListItems = previewImages.slice(0, LIST_ITEM_COUNT).map((file, fileIndex) => (
-      <li key={ fileIndex }>
-        <Image
-          className={ css('ms-DocumentCardPreview-fileListIcon', styles.fileListIcon) }
-          src={ file.iconSrc }
-          role='presentation'
-          alt=''
-          width='16px'
-          height='16px'
-        />
-        <a href={ file.url }>{ file.name }</a>
-      </li>
-    ));
-
-    return (
-      <div>
-        <ul className={ css('ms-DocumentCardPreview-fileList', styles.fileList) }>
-          { fileListItems }
-        </ul>
-        { overflowText &&
-          <span className={ css('ms-DocumentCardPreview-fileListMore', styles.fileListMore) }>{ overflowText }</span>
-        }
-      </div>
-    );
-  }
-
-}
diff --git a/packages/office-ui-fabric-react/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
deleted file mode 100644
index c23d5e4054e5e..0000000000000
--- a/packages/office-ui-fabric-react/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import * as React from 'react';
-import {
-  Chiclet,
-  ChicletPreview,
-  ChicletTitle,
-  IChicletPreviewProps,
-  IChicletTitleProps
-} from 'office-ui-fabric-react/lib/Chiclet';
-import { ImageFit } from 'office-ui-fabric-react/lib/Image';
-import { TestImages } from '../../../common/TestImages';
-
-export class ChicletBasicExample extends React.Component<any, any> {
-  public render() {
-    const previewProps: IChicletPreviewProps = {
-      previewImages: [
-        {
-          name: 'Foo bar',
-          url: 'https://bing.com',
-          previewImageSrc: TestImages.documentPreview,
-          iconSrc: TestImages.iconPpt,
-          imageFit: ImageFit.cover,
-          width: 318,
-          height: 196
-        }
-      ]
-    };
-
-    var styles = {
-      "border": "solid",
-    }
-
-    return (
-      <div style={ styles }>
-        <p>Hello, this is a chiclet!</p>
-        <Chiclet>
-          <ChicletPreview { ...previewProps } />
-          <ChicletTitle title='6 files were uploaded' />
-        </Chiclet>
-      </div>
-    );
-  }
-
-}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Chiclet/index.ts b/packages/office-ui-fabric-react/src/components/Chiclet/index.ts
deleted file mode 100644
index 1656a6730b8b9..0000000000000
--- a/packages/office-ui-fabric-react/src/components/Chiclet/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './Chiclet';
-export * from './Chiclet.types';
-export * from './ChicletPreview';
-export * from './ChicletTitle';
\ No newline at end of file

From 5d7f668d0c831b64f910ee6e06382137ac80ff8e Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Thu, 19 Apr 2018 10:39:08 -0700
Subject: [PATCH 05/67] get rid of chiclet references in old directory

---
 packages/office-ui-fabric-react/src/Chiclet.ts             | 1 -
 packages/office-ui-fabric-react/src/demo/AppDefinition.tsx | 6 ------
 2 files changed, 7 deletions(-)
 delete mode 100644 packages/office-ui-fabric-react/src/Chiclet.ts

diff --git a/packages/office-ui-fabric-react/src/Chiclet.ts b/packages/office-ui-fabric-react/src/Chiclet.ts
deleted file mode 100644
index bb147afc0b1b6..0000000000000
--- a/packages/office-ui-fabric-react/src/Chiclet.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/Chiclet/index';
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/demo/AppDefinition.tsx b/packages/office-ui-fabric-react/src/demo/AppDefinition.tsx
index df32686f7239f..c4d075aaf7ad8 100644
--- a/packages/office-ui-fabric-react/src/demo/AppDefinition.tsx
+++ b/packages/office-ui-fabric-react/src/demo/AppDefinition.tsx
@@ -52,12 +52,6 @@ export const AppDefinition: IAppDefinition = {
           name: 'Checkbox',
           url: '#/examples/checkbox'
         },
-        {
-          component: require<any>('../components/Chiclet/ChicletPage').ChicletPage,
-          key: 'Chiclet',
-          name: 'Chiclet',
-          url: '#/examples/chiclet'
-        },
         {
           component: require<any>('../components/Coachmark/CoachmarkPage').CoachmarkPage,
           key: 'Coachmark',

From 56f52c91cf42668fda5464e96cfdb295787c9cb2 Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Thu, 19 Apr 2018 10:42:18 -0700
Subject: [PATCH 06/67] get rid of last Chiclet reference in wrong directory

---
 packages/office-ui-fabric-react/src/index.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/office-ui-fabric-react/src/index.ts b/packages/office-ui-fabric-react/src/index.ts
index e5c518db267c5..5968b80aea6bf 100644
--- a/packages/office-ui-fabric-react/src/index.ts
+++ b/packages/office-ui-fabric-react/src/index.ts
@@ -10,7 +10,6 @@ export * from './Calendar';
 export * from './Callout';
 export * from './Check';
 export * from './Checkbox';
-export * from './Chiclet';
 export * from './ChoiceGroup';
 export * from './ColorPicker';
 export * from './ComboBox';

From 15ccf730f8f698770e9ad6afe492f67bf19f9420 Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Thu, 19 Apr 2018 14:12:40 -0700
Subject: [PATCH 07/67] added icons and started cleaning up

---
 packages/experiments/index.html               |   5 +
 packages/experiments/src/common/TestImages.ts |   5 +
 .../src/components/Chiclet/Chiclet.scss       |  41 ++++--
 .../src/components/Chiclet/Chiclet.tsx        |  96 ++++++--------
 .../src/components/Chiclet/Chiclet.types.ts   |  32 +++--
 .../src/components/Chiclet/ChicletCard.tsx    | 124 ++++++++++++------
 .../examples/Chiclet.Basic.Example.tsx        |   3 +-
 7 files changed, 185 insertions(+), 121 deletions(-)
 create mode 100644 packages/experiments/src/common/TestImages.ts

diff --git a/packages/experiments/index.html b/packages/experiments/index.html
index 8f5cb70e7cb08..5941f3d43f343 100644
--- a/packages/experiments/index.html
+++ b/packages/experiments/index.html
@@ -5,6 +5,11 @@
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" user-scalable="no" />
+  <meta property="og:title" content="WordTest with a really long title that will wrap around to the second line but not the third line">
+  <meta property="og:type" content="word">
+  <meta property="og:description" content="This is a test Word document for our Chiclet">
+  <meta property="og:url" content="https://1drv.ms/w/s!AuT_wMavg6p-gSs6utwJnX-Thtbpvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv">
+  <meta property="og:image" content="https://i.ytimg.com/vi/MmKlaGpmYig/maxresdefault.jpg">
 
   <title>Office UI Fabric React Examples</title>
 
diff --git a/packages/experiments/src/common/TestImages.ts b/packages/experiments/src/common/TestImages.ts
new file mode 100644
index 0000000000000..c540486a4090e
--- /dev/null
+++ b/packages/experiments/src/common/TestImages.ts
@@ -0,0 +1,5 @@
+const baseProductionCdnUrl = 'https://az742526.vo.msecnd.net/files/odsp-next-release-odc_2018-04-13_20180418.001/odsp-media/images/apps/';
+
+export const ChicletTestImages = {
+  iconWordDoc: baseProductionCdnUrl + 'word_16x1.svg';
+};
\ No newline at end of file
diff --git a/packages/experiments/src/components/Chiclet/Chiclet.scss b/packages/experiments/src/components/Chiclet/Chiclet.scss
index a716e999fc495..41770f8daf4b9 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.scss
+++ b/packages/experiments/src/components/Chiclet/Chiclet.scss
@@ -4,7 +4,7 @@
   -webkit-font-smoothing: antialiased;
   background-color: $ms-color-white;
   border: 1px solid $ms-color-neutralLight;
-  //box-sizing: border-box;
+  box-sizing: border-box;
   max-width: 320px;
   min-width: 206px;
   //user-select: none;
@@ -15,13 +15,30 @@
   //display: flex;
   max-width: 480px;
   height: 109px;
-  // :global(.ms-DocumentCard-details) {
-  //   display: flex;
-  //   flex-direction: column;
-  //   flex: 1;
-  //   justify-content: space-between;
-  //   overflow: hidden;
-  // }
+}
+
+.icon {
+  @include ms-left(10px);
+  bottom: 10px;
+  position: absolute;
+  color: blue;
+}
+
+.rootIsActionable:hover {
+  cursor: pointer;
+  border-color: $ms-color-neutralTertiaryAlt;
+
+  // Place a heavier border within the document card
+  &:after {
+    content: 'hello!';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border: 1px solid $ms-color-neutralTertiaryAlt;
+    pointer-events: none;
+  }
 }
 
 /* Preview */
@@ -62,14 +79,20 @@ $ChicletCard-title-lineHeight: 21px;
   line-height: $ChicletCard-title-lineHeight;
   overflow: hidden;
   word-wrap: break-word;
+  font-weight: 400;
 }
 
 /* Link */
 .link {
-  padding: 2px 16px 0px;
+  padding: 4px 16px 0px;
   @include ms-font-l;
   font-size: 8pt;
   color: $ms-color-neutralPrimary;
+  line-height: 14px;
+  height: 14px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 /* Actions */
diff --git a/packages/experiments/src/components/Chiclet/Chiclet.tsx b/packages/experiments/src/components/Chiclet/Chiclet.tsx
index a2fec882771a1..b7a3856fae8eb 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.tsx
+++ b/packages/experiments/src/components/Chiclet/Chiclet.tsx
@@ -12,83 +12,73 @@ const styles: any = stylesImport;
 
 export class Chiclet extends BaseComponent<IChicletProps, any> {
   public render() {
-    const { /*type, className, title, description, image, imageUrl, imageSecureUrl,
-      imageWidth, imageHeight, imageType, url,*/ children, url } = this.props;
+    const { url } = this.props;
 
-    const html: string = `<html>
-        <!-- This is my comment! -->
-        <head>
-          <meta charset=\"utf-8\" >
-          <link rel=\"ferde\" href=\"https://wsjeiocfn.com">
-          <meta property=\"og:title\" content=\"The Rock\" >
-          <meta property=\"og:type\" content=\"video.movie\" >
-          <meta property=\"og:url\" content=\"http://www.imdb.com/title/tt0117500/\" >
-          <meta name=\"og:title\" content=\"The Rock\" >
-          <meta name=\"og:type\" content=\"video.movie\" >
-          <meta name=\"og:url\" content=\"http://www.imdb.com/title/tt0117500/\" >
-        </head>
-        <body>
-        </body>
-      </html>`;
-
-    let openGraphObject = this.extractMetaTags(html);
+    let chicletCardProps = this.extractMetaTags(url);
 
     return (
-      <div className={ css(styles.root) }>
+      <div
+        className={ css(styles.root) }
+      >
         <ChicletCard
-          title={ openGraphObject.title }
-          description={ openGraphObject.description }
-          url={ openGraphObject.url }
-          image={ openGraphObject.image }
-          imageType={ openGraphObject.imageType }
+          { ...chicletCardProps }
+          onClick={ this._onClick }
         />
-        { children }
       </div>
     );
   }
 
-  public extractMetaTags(html: string) {
+  public extractMetaTags(url: string) {
     var attributes: IChicletCardProps = {};
 
     var xmlHttp = new XMLHttpRequest();
-    xmlHttp.open("GET", "http://localhost:4322", false);
+    xmlHttp.open("GET", url, false);
     xmlHttp.overrideMimeType('text/xml');
     xmlHttp.send(null);
-    // var xmlDocument = xmlHttp.responseXML;
-    // var responseString = xmlHttp.responseText;
 
     var metaElements = document.getElementsByTagName("meta");
-    for (var i = 0; i < metaElements.length; i++) {
-      console.log("Content of meta tag: " + metaElements[i].content);
-    }
-
-    let openGraphObject = this._getChildren(metaElements, attributes);
+    let openGraphObject = this._getOpenGraphValues(metaElements, attributes);
 
     return openGraphObject;
   }
 
-  public _getChildren(metaElements: NodeListOf<HTMLMetaElement>, attributes: IChicletCardProps): IChicletCardProps {
+  public _getOpenGraphValues(metaElements: NodeListOf<HTMLMetaElement>, attributes: IChicletCardProps): IChicletCardProps {
     for (var i = 0; i < metaElements.length; i++) {
-      switch (metaElements[i].name) {
-        case "og:title":
-          attributes.title = metaElements[i].content;
-          break;
-        case "og:type":
-          attributes.ogType = metaElements[i].content;
-          break;
-        case "og:image":
-        case "og:image:url":
-          attributes.image = metaElements[i].content;
-          break;
-        case "og:description":
-          attributes.description = metaElements[i].content;
-          break;
-        case "og:url":
-          attributes.url = metaElements[i].content;
-          break;
+      if (metaElements[i].attributes != null && metaElements[i].attributes.length >= 2) {
+        switch (metaElements[i].attributes[0].nodeValue) {
+          case "og:title":
+            attributes.title = metaElements[i].content;
+            break;
+          case "og:type":
+            attributes.ogType = metaElements[i].content;
+            break;
+          case "og:image":
+          case "og:image:url":
+            attributes.image = metaElements[i].content;
+            break;
+          case "og:image:type":
+            attributes.imageType = metaElements[i].content;
+            break;
+          case "og:image:width":
+            attributes.imageWidth = metaElements[i].content;
+            break;
+          case "og:image:height":
+            attributes.imageHeight = metaElements[i].content;
+            break;
+          case "og:description":
+            attributes.description = metaElements[i].content;
+            break;
+          case "og:url":
+            attributes.url = metaElements[i].content;
+            break;
+        }
       }
     }
     return attributes;
   }
 
+  private _onClick(): void {
+    console.log("You clicked the Chiclet");
+  }
+
 }
diff --git a/packages/experiments/src/components/Chiclet/Chiclet.types.ts b/packages/experiments/src/components/Chiclet/Chiclet.types.ts
index a0d1c5f2ca170..3b678c0a81052 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.types.ts
+++ b/packages/experiments/src/components/Chiclet/Chiclet.types.ts
@@ -44,7 +44,7 @@ export interface IChicletCardProps extends React.Props<ChicletCard> {
   componentRef?: (component: IChiclet | null) => void;
 
   /**
-  * The type of DocumentCard to display.
+  * The type of Chiclet to display.
   * @default Chiclet.anonymous
   */
   type?: ChicletType;
@@ -81,24 +81,22 @@ export interface IChicletCardProps extends React.Props<ChicletCard> {
 
 export enum ChicletType {
   /**
-   * Standard Chiclet for anonymous sharing links.
+   * X-Small Chiclet
    */
-  anonymous = 0,
+  xsmall = 0,
 
   /**
-   * Chiclet for authenticated users.
+   * Small Chiclet
    */
-  authenticated = 1,
-}
+  small = 1,
+
+  /**
+   * Medium Chiclet
+   */
+  medium = 2,
 
-// export interface OpenGraphObject {
-//   title?: string,
-//   type?: string,
-//   image?: string,
-//   imageUrl?: string,
-//   imageSecureUrl?: string,
-//   imageWidth?: string,
-//   imageHeight?: string,
-//   url?: string,
-//   description?: string
-// }
\ No newline at end of file
+  /**
+   * Large Chiclet
+   */
+  large = 3
+}
\ No newline at end of file
diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.tsx b/packages/experiments/src/components/Chiclet/ChicletCard.tsx
index e74f7c9d2ad24..5ba6240603e03 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.tsx
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.tsx
@@ -10,69 +10,113 @@ import { IconButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
 import { Image } from 'office-ui-fabric-react/lib/Image';
 import { TestImages } from 'office-ui-fabric-react/src/common/TestImages';
 import { FocusZone } from 'office-ui-fabric-react/lib/FocusZone';
+import { ChicletTestImages } from '../../common/TestImages';
 import * as stylesImport from './Chiclet.scss';
 const styles: any = stylesImport;
 
 export class ChicletCard extends BaseComponent<IChicletCardProps, any> {
   public render() {
-    const { title, description, image, imageType, imageWidth, imageHeight, url, onClick, onClickHref } = this.props;
+    const { title, ogType, description, image, imageType, imageWidth, imageHeight, url, onClick, onClickHref } = this.props;
     const actionable = (onClick || onClickHref) ? true : false;
 
+    // if this element is actionable it should have an aria role
+    const role = actionable ? (onClick ? 'button' : 'link') : undefined;
+    const tabIndex = actionable ? 0 : undefined;
+
     var actions: IButtonProps[] = [
       { iconProps: { iconName: 'Breadcrumb' } },
       { iconProps: { iconName: 'Save' } },
       { iconProps: { iconName: 'Share' } }
     ];
 
+    var preview = this._renderPreviewImage(image, imageHeight, imageWidth, ogType);
+
     return (
-      <FocusZone data-is-focusable={ true } allowFocusRoot>
+      <div
+        tabIndex={ tabIndex }
+        role={ role }
+        onKeyDown={ actionable ? this._onKeyDown : undefined }
+        onClick={ actionable ? this._onClick : undefined }
+        className={
+          css(
+            'ms-ChicletCard',
+            { ['ms-DocumentCard--actionable ' + styles.rootIsActionable]: actionable }
+          )
+        }
+      >
+        <div
+          className={ css('ms-ChicletCardPreview', styles.preview) }
+        >
+          <div className={ css('ms-ChicletCardPreview-iconContainer', styles.previewIconContainer) } >
+            { image ?
+              preview :
+              (<Image
+                src={ TestImages.documentPreviewTwo }
+                role='presentation'
+                alt=''
+              />)
+            }
+          </div>
+        </div>
         <div
-          onKeyDown={ actionable ? this._onKeyDown : undefined }
-          onClick={ actionable ? this._onClick : undefined }
+          className={ css('ms-ChicletCardInfo', styles.info) }
         >
           <div
-            className={ css('ms-ChicletCardPreview', styles.preview) }
+            className={ css('ms-ChicletCardTitle', styles.title) }
           >
-            <div className={ css('ms-ChicletCardPreview-iconContainer', styles.previewIconContainer) } >
-              { image ?
-                (<div>{ image }</div>) :
-                (<Image
-                  src={ TestImages.documentPreviewTwo }
-                  role='presentation'
-                  alt=''
-                />)
-              }
-            </div>
+            { title ? title : "Title goes here and if it's really long it wraps around to the second line but does not make it to the third line" }
           </div>
+          { imageType ? (<div>{ imageType }</div>) : (null) }
+          { imageWidth ? (<div>{ imageWidth }</div>) : (null) }
+          { imageHeight ? (<div>{ imageHeight }</div>) : (null) }
           <div
-            className={ css('ms-ChicletCardInfo', styles.info) }
+            className={ css('ms-ChicletCardLink', styles.link) }
           >
-            <div
-              className={ css('ms-ChicletCardTitle', styles.title) }
-            >
-              { title ? title : "Title goes here and if it's really long it wraps around to the second line but does not make it to the third line" }
-            </div>
-            { imageType ? (<div>{ imageType }</div>) : (null) }
-            { imageWidth ? (<div>{ imageWidth }</div>) : (null) }
-            { imageHeight ? (<div>{ imageHeight }</div>) : (null) }
-            <div
-              className={ css('ms-ChicletCardLink', styles.link) }
-            >
-              { url ? url : "https://onedrive.com/files/v-lygi/39192908430" }
-            </div>
-            { description ? (<div>{ description }</div>) : (null) }
-            <div className={ css('ms-ChicletCardActions', styles.actions) }>
-              { actions && actions.map((action, index) => {
-                return (
-                  <div className={ css('ms-ChicletActions-action', styles.action) } key={ index }>
-                    <IconButton { ...action } />
-                  </div>
-                );
-              }) }
-            </div>
+            { url ? url : "https://onedrive.com/files/v-lygi/39192908430" }
+          </div>
+          <div className={ css('ms-ChicletCardActions', styles.actions) }>
+            { actions && actions.map((action, index) => {
+              return (
+                <div className={ css('ms-ChicletActions-action', styles.action) } key={ index }>
+                  <IconButton { ...action } />
+                </div>
+              );
+            }) }
           </div>
         </div>
-      </FocusZone>
+      </div>
+    );
+  }
+
+  private _renderPreviewImage(imageUrl?: string, imageHeight?: string, imageWidth?: string, ogType?: string): React.ReactElement<React.HTMLAttributes<HTMLDivElement>> {
+    const image = (
+      <Image
+        width={ imageWidth }
+        height={ imageHeight }
+        src={ TestImages.documentPreview }
+        role='presentation'
+        alt=''
+      />
+    );
+
+    let icon;
+    switch (ogType) {
+      case "word":
+        icon = <Icon className={ css('ms-DocumentCardPreview-icon', styles.icon) } iconName='WordDocument' />;
+        break;
+      case "powerpoint":
+        icon = <Icon className={ css('ms-DocumentCardPreview-icon', styles.icon) } iconName='PowerPointDocument' />;
+        break;
+      case "excel":
+        icon = <Icon className={ css('ms-DocumentCardPreview-icon', styles.icon) } iconName='ExcelDocument' />;
+        break;
+    }
+
+    return (
+      <div>
+        { image }
+        { icon }
+      </div>
     );
   }
 
diff --git a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
index 171734dcbca3a..859a5858cf53d 100644
--- a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
+++ b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
@@ -11,8 +11,7 @@ export class ChicletBasicExample extends React.Component<any, any> {
   public render() {
     return (
       <div>
-        <h2>Hello, this is a chiclet!</h2>
-        <Chiclet url="https://bing.com" />
+        <Chiclet url="http://localhost:4322" />
       </div>
     );
   }

From 1012e4c91871ba4f4b9f576312096c0101635d0d Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Thu, 19 Apr 2018 15:30:18 -0700
Subject: [PATCH 08/67] almost fixed hover border

---
 packages/experiments/src/common/TestImages.ts |  2 +-
 .../src/components/Chiclet/Chiclet.scss       | 25 +++++++++----------
 .../src/components/Chiclet/ChicletCard.tsx    | 24 +++++++-----------
 3 files changed, 22 insertions(+), 29 deletions(-)

diff --git a/packages/experiments/src/common/TestImages.ts b/packages/experiments/src/common/TestImages.ts
index c540486a4090e..c7de1f611a9c8 100644
--- a/packages/experiments/src/common/TestImages.ts
+++ b/packages/experiments/src/common/TestImages.ts
@@ -1,5 +1,5 @@
 const baseProductionCdnUrl = 'https://az742526.vo.msecnd.net/files/odsp-next-release-odc_2018-04-13_20180418.001/odsp-media/images/apps/';
 
 export const ChicletTestImages = {
-  iconWordDoc: baseProductionCdnUrl + 'word_16x1.svg';
+  iconWordDoc: baseProductionCdnUrl + 'word_16x1.svg',
 };
\ No newline at end of file
diff --git a/packages/experiments/src/components/Chiclet/Chiclet.scss b/packages/experiments/src/components/Chiclet/Chiclet.scss
index 41770f8daf4b9..f897619b271d9 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.scss
+++ b/packages/experiments/src/components/Chiclet/Chiclet.scss
@@ -7,8 +7,8 @@
   box-sizing: border-box;
   max-width: 320px;
   min-width: 206px;
-  //user-select: none;
-  //position: relative;
+  user-select: none;
+  position: relative;
 }
 
 .root {
@@ -24,19 +24,23 @@
   color: blue;
 }
 
-.rootIsActionable:hover {
+.chicletIsActionable {
+  position: relative;
+}
+
+.chicletIsActionable:hover {
   cursor: pointer;
   border-color: $ms-color-neutralTertiaryAlt;
 
-  // Place a heavier border within the document card
+  // Place a heavier border within the chiclet card
   &:after {
-    content: 'hello!';
+    content: '';
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
-    border: 1px solid $ms-color-neutralTertiaryAlt;
+    border: 2px solid $ms-color-neutralTertiaryAlt;
     pointer-events: none;
   }
 }
@@ -53,15 +57,10 @@
   background-color: $ms-color-neutralLighterAlt;
 }
 
-.previewIconContainer {
-  height: 100%;
-  // display: flex;
-  // align-items: center;
-  // justify-content: center
-}
-
 /* Info */
 .info {
+  //float: right;
+  position: relative;
   display: block;
   height: 100%;
   line-height: 21px;
diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.tsx b/packages/experiments/src/components/Chiclet/ChicletCard.tsx
index 5ba6240603e03..b31c857051c24 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.tsx
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.tsx
@@ -38,25 +38,19 @@ export class ChicletCard extends BaseComponent<IChicletCardProps, any> {
         onKeyDown={ actionable ? this._onKeyDown : undefined }
         onClick={ actionable ? this._onClick : undefined }
         className={
-          css(
-            'ms-ChicletCard',
-            { ['ms-DocumentCard--actionable ' + styles.rootIsActionable]: actionable }
-          )
-        }
+          css('ms-ChicletCard', styles.chicletIsActionable) }
       >
         <div
           className={ css('ms-ChicletCardPreview', styles.preview) }
         >
-          <div className={ css('ms-ChicletCardPreview-iconContainer', styles.previewIconContainer) } >
-            { image ?
-              preview :
-              (<Image
-                src={ TestImages.documentPreviewTwo }
-                role='presentation'
-                alt=''
-              />)
-            }
-          </div>
+          { image ?
+            preview :
+            (<Image
+              src={ TestImages.documentPreviewTwo }
+              role='presentation'
+              alt=''
+            />)
+          }
         </div>
         <div
           className={ css('ms-ChicletCardInfo', styles.info) }

From ee82f293bd4565b6ad74909c80ccc133ba7a1b3a Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Thu, 19 Apr 2018 16:54:09 -0700
Subject: [PATCH 09/67] can choose chiclet size to render and cleanup

---
 .../src/components/Chiclet/Chiclet.scss       | 12 +++--
 .../src/components/Chiclet/Chiclet.tsx        | 48 ++++++++++++++-----
 .../src/components/Chiclet/Chiclet.types.ts   |  4 ++
 .../src/components/Chiclet/ChicletCard.tsx    | 29 ++++++-----
 .../examples/Chiclet.Basic.Example.tsx        |  2 +-
 5 files changed, 65 insertions(+), 30 deletions(-)

diff --git a/packages/experiments/src/components/Chiclet/Chiclet.scss b/packages/experiments/src/components/Chiclet/Chiclet.scss
index f897619b271d9..a601d5150f878 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.scss
+++ b/packages/experiments/src/components/Chiclet/Chiclet.scss
@@ -13,7 +13,7 @@
 
 .root {
   //display: flex;
-  max-width: 480px;
+  max-width: 540px;
   height: 109px;
 }
 
@@ -21,11 +21,12 @@
   @include ms-left(10px);
   bottom: 10px;
   position: absolute;
-  color: blue;
+  color: #166EBE;
 }
 
 .chicletIsActionable {
   position: relative;
+  display: block;
 }
 
 .chicletIsActionable:hover {
@@ -40,7 +41,7 @@
     right: 0;
     bottom: 0;
     left: 0;
-    border: 2px solid $ms-color-neutralTertiaryAlt;
+    border: 1px solid $ms-color-neutralTertiaryAlt;
     pointer-events: none;
   }
 }
@@ -50,11 +51,12 @@
   float: left;
   border-right: 1px, solid, $ms-color-neutralLight;
   border-bottom: none;
-  max-height: 100px;
-  max-width: 144px;
+  max-height: 107px;
+  max-width: 160px;
   position: relative;
   overflow: hidden; // need to fix
   background-color: $ms-color-neutralLighterAlt;
+  display: block;
 }
 
 /* Info */
diff --git a/packages/experiments/src/components/Chiclet/Chiclet.tsx b/packages/experiments/src/components/Chiclet/Chiclet.tsx
index b7a3856fae8eb..471dab97030a8 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.tsx
+++ b/packages/experiments/src/components/Chiclet/Chiclet.tsx
@@ -12,20 +12,46 @@ const styles: any = stylesImport;
 
 export class Chiclet extends BaseComponent<IChicletProps, any> {
   public render() {
-    const { url } = this.props;
+    const { url, size } = this.props;
 
     let chicletCardProps = this.extractMetaTags(url);
 
-    return (
-      <div
-        className={ css(styles.root) }
-      >
-        <ChicletCard
-          { ...chicletCardProps }
-          onClick={ this._onClick }
-        />
-      </div>
-    );
+    switch (size) {
+      case "xsmall":
+        return (
+          <div
+            className={ css(styles.root) }
+          >
+            <ChicletCard {...chicletCardProps} onClick={ this._onClick } />
+          </div>
+        );
+      case "small":
+        return (
+          <div
+            className={ css(styles.root) }
+          >
+            <ChicletCard {...chicletCardProps} onClick={ this._onClick } />
+          </div>
+        );
+      case "medium":
+      case "large":
+      case "xlarge":
+        return (
+          <div
+            className={ css(styles.root) }
+          >
+            <ChicletCard {...chicletCardProps} onClick={ this._onClick } />
+          </div>
+        );
+      default:
+        return (
+          <div
+            className={ css(styles.root) }
+          >
+            <ChicletCard {...chicletCardProps} onClick={ this._onClick } />
+          </div>
+        );
+    }
   }
 
   public extractMetaTags(url: string) {
diff --git a/packages/experiments/src/components/Chiclet/Chiclet.types.ts b/packages/experiments/src/components/Chiclet/Chiclet.types.ts
index 3b678c0a81052..dfb3bb6a504e9 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.types.ts
+++ b/packages/experiments/src/components/Chiclet/Chiclet.types.ts
@@ -34,6 +34,10 @@ export interface IChicletProps extends React.Props<Chiclet> {
    */
   url: string;
 
+  /**
+   * Chiclet size to render
+   */
+  size?: string;
 }
 
 export interface IChicletCardProps extends React.Props<ChicletCard> {
diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.tsx b/packages/experiments/src/components/Chiclet/ChicletCard.tsx
index b31c857051c24..bdc62dbb2561b 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.tsx
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.tsx
@@ -58,25 +58,14 @@ export class ChicletCard extends BaseComponent<IChicletCardProps, any> {
           <div
             className={ css('ms-ChicletCardTitle', styles.title) }
           >
-            { title ? title : "Title goes here and if it's really long it wraps around to the second line but does not make it to the third line" }
+            { title ? title : "Placeholder" }
           </div>
-          { imageType ? (<div>{ imageType }</div>) : (null) }
-          { imageWidth ? (<div>{ imageWidth }</div>) : (null) }
-          { imageHeight ? (<div>{ imageHeight }</div>) : (null) }
           <div
             className={ css('ms-ChicletCardLink', styles.link) }
           >
             { url ? url : "https://onedrive.com/files/v-lygi/39192908430" }
           </div>
-          <div className={ css('ms-ChicletCardActions', styles.actions) }>
-            { actions && actions.map((action, index) => {
-              return (
-                <div className={ css('ms-ChicletActions-action', styles.action) } key={ index }>
-                  <IconButton { ...action } />
-                </div>
-              );
-            }) }
-          </div>
+          { this._renderActions(actions) }
         </div>
       </div>
     );
@@ -114,6 +103,20 @@ export class ChicletCard extends BaseComponent<IChicletCardProps, any> {
     );
   }
 
+  private _renderActions(actions: IButtonProps[]): React.ReactElement<React.HTMLAttributes<HTMLDivElement>> {
+    return (
+      <div className={ css('ms-ChicletCardActions', styles.actions) }>
+        { actions && actions.map((action, index) => {
+          return (
+            <div className={ css('ms-ChicletActions-action', styles.action) } key={ index }>
+              <IconButton { ...action } />
+            </div>
+          );
+        }) }
+      </div>
+    );
+  }
+
   private _onClick = (ev: React.MouseEvent<HTMLElement>): void => {
     this._onAction(ev);
   }
diff --git a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
index 859a5858cf53d..f7f797af45cb9 100644
--- a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
+++ b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
@@ -11,7 +11,7 @@ export class ChicletBasicExample extends React.Component<any, any> {
   public render() {
     return (
       <div>
-        <Chiclet url="http://localhost:4322" />
+        <Chiclet url="http://localhost:4322" size="medium" />
       </div>
     );
   }

From fd42f494a151f5e6d3e5ad6b1741810dd811f6e6 Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Fri, 20 Apr 2018 10:15:13 -0700
Subject: [PATCH 10/67] three layers of the Chiclet

---
 .../src/components/Chiclet/Chiclet.scss       | 38 +++------------
 .../src/components/Chiclet/Chiclet.tsx        | 48 +++----------------
 .../src/components/Chiclet/Chiclet.types.ts   | 32 +++++++++++--
 .../src/components/Chiclet/ChicletCard.tsx    | 23 ++++-----
 .../src/components/Chiclet/ChicletPicker.tsx  | 39 +++++++++++++++
 .../examples/Chiclet.Basic.Example.tsx        | 10 ++--
 6 files changed, 99 insertions(+), 91 deletions(-)
 create mode 100644 packages/experiments/src/components/Chiclet/ChicletPicker.tsx

diff --git a/packages/experiments/src/components/Chiclet/Chiclet.scss b/packages/experiments/src/components/Chiclet/Chiclet.scss
index a601d5150f878..f206678ae6240 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.scss
+++ b/packages/experiments/src/components/Chiclet/Chiclet.scss
@@ -6,15 +6,14 @@
   border: 1px solid $ms-color-neutralLight;
   box-sizing: border-box;
   max-width: 320px;
-  min-width: 206px;
+  min-width: 540px;
+  height: 109px;
   user-select: none;
   position: relative;
-}
-
-.root {
-  //display: flex;
-  max-width: 540px;
-  height: 109px;
+  &:hover {
+    cursor: pointer;
+    border: 1px solid $ms-color-neutralTertiaryAlt;
+  }
 }
 
 .icon {
@@ -24,33 +23,9 @@
   color: #166EBE;
 }
 
-.chicletIsActionable {
-  position: relative;
-  display: block;
-}
-
-.chicletIsActionable:hover {
-  cursor: pointer;
-  border-color: $ms-color-neutralTertiaryAlt;
-
-  // Place a heavier border within the chiclet card
-  &:after {
-    content: '';
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    border: 1px solid $ms-color-neutralTertiaryAlt;
-    pointer-events: none;
-  }
-}
-
 /* Preview */
 .preview {
   float: left;
-  border-right: 1px, solid, $ms-color-neutralLight;
-  border-bottom: none;
   max-height: 107px;
   max-width: 160px;
   position: relative;
@@ -61,7 +36,6 @@
 
 /* Info */
 .info {
-  //float: right;
   position: relative;
   display: block;
   height: 100%;
diff --git a/packages/experiments/src/components/Chiclet/Chiclet.tsx b/packages/experiments/src/components/Chiclet/Chiclet.tsx
index 471dab97030a8..f88b39adcd366 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.tsx
+++ b/packages/experiments/src/components/Chiclet/Chiclet.tsx
@@ -4,7 +4,9 @@ import {
   css
 } from '../../Utilities';
 import { ChicletCard } from './ChicletCard';
+import { ChicletPicker } from './ChicletPicker';
 import { IChicletProps, IChicletCardProps } from './Chiclet.types';
+import { IconButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
 import * as stylesImport from './Chiclet.scss';
 const styles: any = stylesImport;
 
@@ -12,46 +14,13 @@ const styles: any = stylesImport;
 
 export class Chiclet extends BaseComponent<IChicletProps, any> {
   public render() {
-    const { url, size } = this.props;
+    const { url, size, actions } = this.props;
 
     let chicletCardProps = this.extractMetaTags(url);
 
-    switch (size) {
-      case "xsmall":
-        return (
-          <div
-            className={ css(styles.root) }
-          >
-            <ChicletCard {...chicletCardProps} onClick={ this._onClick } />
-          </div>
-        );
-      case "small":
-        return (
-          <div
-            className={ css(styles.root) }
-          >
-            <ChicletCard {...chicletCardProps} onClick={ this._onClick } />
-          </div>
-        );
-      case "medium":
-      case "large":
-      case "xlarge":
-        return (
-          <div
-            className={ css(styles.root) }
-          >
-            <ChicletCard {...chicletCardProps} onClick={ this._onClick } />
-          </div>
-        );
-      default:
-        return (
-          <div
-            className={ css(styles.root) }
-          >
-            <ChicletCard {...chicletCardProps} onClick={ this._onClick } />
-          </div>
-        );
-    }
+    return (
+      <ChicletPicker chicletCardProps={ chicletCardProps } size={ size ? size : "medium" } actions={ actions } />
+    );
   }
 
   public extractMetaTags(url: string) {
@@ -102,9 +71,4 @@ export class Chiclet extends BaseComponent<IChicletProps, any> {
     }
     return attributes;
   }
-
-  private _onClick(): void {
-    console.log("You clicked the Chiclet");
-  }
-
 }
diff --git a/packages/experiments/src/components/Chiclet/Chiclet.types.ts b/packages/experiments/src/components/Chiclet/Chiclet.types.ts
index dfb3bb6a504e9..cdf47c42aa0fc 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.types.ts
+++ b/packages/experiments/src/components/Chiclet/Chiclet.types.ts
@@ -1,10 +1,9 @@
 import * as React from 'react';
 import { Chiclet } from './Chiclet';
 import { ChicletCard } from './ChicletCard';
+import { ChicletPicker } from './ChicletPicker';
 import { IStyle } from '../../Styling';
-//import { IStyleFunction } from '../../Utilities';
-//import { ImageFit } from '../../../office-ui-fabric-react/src/components/Image';
-//import { IIconProps } from '../../Icon';
+import { IButtonProps } from 'office-ui-fabric-react/lib/Button';
 
 export interface IChiclet {
 
@@ -38,6 +37,28 @@ export interface IChicletProps extends React.Props<Chiclet> {
    * Chiclet size to render
    */
   size?: string;
+
+  /**
+   * Action icon buttons to render.
+   */
+  actions?: IButtonProps[];
+}
+
+export interface IChicletPickerProps extends React.Props<ChicletPicker> {
+  /**
+   * Props to render in the chosen ChicletCard
+   */
+  chicletCardProps?: IChicletCardProps | undefined;
+
+  /**
+   * Chiclet size to render
+   */
+  size?: string;
+
+  /**
+   * Action icon buttons to render.
+   */
+  actions?: IButtonProps[];
 }
 
 export interface IChicletCardProps extends React.Props<ChicletCard> {
@@ -69,6 +90,11 @@ export interface IChicletCardProps extends React.Props<ChicletCard> {
    */
   onClickHref?: string;
 
+  /**
+   * Action icon buttons to render.
+   */
+  actions?: IButtonProps[] | undefined;
+
   /**
    * OpenGraph props.
    */
diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.tsx b/packages/experiments/src/components/Chiclet/ChicletCard.tsx
index bdc62dbb2561b..a540792882443 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.tsx
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.tsx
@@ -16,18 +16,19 @@ const styles: any = stylesImport;
 
 export class ChicletCard extends BaseComponent<IChicletCardProps, any> {
   public render() {
-    const { title, ogType, description, image, imageType, imageWidth, imageHeight, url, onClick, onClickHref } = this.props;
+    const { title, ogType, description, image, imageType, imageWidth, imageHeight, url, onClick, onClickHref, className, actions } = this.props;
     const actionable = (onClick || onClickHref) ? true : false;
 
     // if this element is actionable it should have an aria role
     const role = actionable ? (onClick ? 'button' : 'link') : undefined;
     const tabIndex = actionable ? 0 : undefined;
 
-    var actions: IButtonProps[] = [
-      { iconProps: { iconName: 'Breadcrumb' } },
-      { iconProps: { iconName: 'Save' } },
-      { iconProps: { iconName: 'Share' } }
-    ];
+    // actions should be based off of what's passed in
+    // var actions: IButtonProps[] = [
+    //   { iconProps: { iconName: 'Breadcrumb' } },
+    //   { iconProps: { iconName: 'Save' } },
+    //   { iconProps: { iconName: 'Share' } }
+    // ];
 
     var preview = this._renderPreviewImage(image, imageHeight, imageWidth, ogType);
 
@@ -38,7 +39,7 @@ export class ChicletCard extends BaseComponent<IChicletCardProps, any> {
         onKeyDown={ actionable ? this._onKeyDown : undefined }
         onClick={ actionable ? this._onClick : undefined }
         className={
-          css('ms-ChicletCard', styles.chicletIsActionable) }
+          css('ms-ChicletCard', className) }
       >
         <div
           className={ css('ms-ChicletCardPreview', styles.preview) }
@@ -65,7 +66,7 @@ export class ChicletCard extends BaseComponent<IChicletCardProps, any> {
           >
             { url ? url : "https://onedrive.com/files/v-lygi/39192908430" }
           </div>
-          { this._renderActions(actions) }
+          { actions ? this._renderFooter(actions) : (null) }
         </div>
       </div>
     );
@@ -103,12 +104,12 @@ export class ChicletCard extends BaseComponent<IChicletCardProps, any> {
     );
   }
 
-  private _renderActions(actions: IButtonProps[]): React.ReactElement<React.HTMLAttributes<HTMLDivElement>> {
+  private _renderFooter(actions: IButtonProps[]): React.ReactElement<React.HTMLAttributes<HTMLDivElement>> {
     return (
-      <div className={ css('ms-ChicletCardActions', styles.actions) }>
+      <div className={ css('ms-ChicletCardFooter', styles.actions) }>
         { actions && actions.map((action, index) => {
           return (
-            <div className={ css('ms-ChicletActions-action', styles.action) } key={ index }>
+            <div className={ css('ms-ChicletFooter-action', styles.action) } key={ index }>
               <IconButton { ...action } />
             </div>
           );
diff --git a/packages/experiments/src/components/Chiclet/ChicletPicker.tsx b/packages/experiments/src/components/Chiclet/ChicletPicker.tsx
new file mode 100644
index 0000000000000..4b44ccb202d37
--- /dev/null
+++ b/packages/experiments/src/components/Chiclet/ChicletPicker.tsx
@@ -0,0 +1,39 @@
+import * as React from 'react';
+import {
+  css
+} from '../../Utilities';
+import { IChicletPickerProps, IChicletCardProps } from './Chiclet.types';
+import { ChicletCard } from './ChicletCard';
+import * as stylesImport from './Chiclet.scss';
+const styles: any = stylesImport;
+
+export class ChicletPicker extends React.Component<IChicletPickerProps, IChicletCardProps> {
+  public render() {
+    const { chicletCardProps, size, actions } = this.props;
+
+    switch (size) {
+      case "xsmall":
+        return (
+          <ChicletCard {...chicletCardProps} className={ css(styles.root) } onClick={ this._onClick } actions={ actions } />
+        );
+      case "small":
+        return (
+          <ChicletCard {...chicletCardProps} className={ css(styles.root) } onClick={ this._onClick } actions={ actions } />
+        );
+      case "medium":
+      case "large":
+      case "xlarge":
+        return (
+          <ChicletCard {...chicletCardProps} className={ css(styles.root) } onClick={ this._onClick } actions={ actions } />
+        );
+      default:
+        return (
+          <ChicletCard {...chicletCardProps} className={ css(styles.root) } onClick={ this._onClick } actions={ actions } />
+        );
+    }
+  }
+
+  private _onClick(): void {
+    console.log("You clicked the Chiclet");
+  }
+}
\ No newline at end of file
diff --git a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
index f7f797af45cb9..58334ca2f0888 100644
--- a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
+++ b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
@@ -10,9 +10,13 @@ export class ChicletBasicExample extends React.Component<any, any> {
 
   public render() {
     return (
-      <div>
-        <Chiclet url="http://localhost:4322" size="medium" />
-      </div>
+      <Chiclet url="http://localhost:4322" size="medium"
+        actions={ [
+          { iconProps: { iconName: 'Breadcrumb' } },
+          { iconProps: { iconName: 'Save' } },
+          { iconProps: { iconName: 'Share' } }
+        ] }
+      />
     );
   }
 

From fc90f501155cfdbda6d277bcb68ff0ea73044ef0 Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Fri, 20 Apr 2018 10:48:49 -0700
Subject: [PATCH 11/67] actions can now be passed in as strings

---
 .../src/components/Chiclet/Chiclet.types.ts   |  4 +--
 .../src/components/Chiclet/ChicletCard.tsx    |  7 -----
 .../src/components/Chiclet/ChicletPicker.tsx  | 28 ++++++++++++++++---
 .../examples/Chiclet.Basic.Example.tsx        | 14 ++++++----
 4 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/packages/experiments/src/components/Chiclet/Chiclet.types.ts b/packages/experiments/src/components/Chiclet/Chiclet.types.ts
index cdf47c42aa0fc..6a93d2d3ccf7f 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.types.ts
+++ b/packages/experiments/src/components/Chiclet/Chiclet.types.ts
@@ -41,7 +41,7 @@ export interface IChicletProps extends React.Props<Chiclet> {
   /**
    * Action icon buttons to render.
    */
-  actions?: IButtonProps[];
+  actions?: string[];
 }
 
 export interface IChicletPickerProps extends React.Props<ChicletPicker> {
@@ -58,7 +58,7 @@ export interface IChicletPickerProps extends React.Props<ChicletPicker> {
   /**
    * Action icon buttons to render.
    */
-  actions?: IButtonProps[];
+  actions?: string[];
 }
 
 export interface IChicletCardProps extends React.Props<ChicletCard> {
diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.tsx b/packages/experiments/src/components/Chiclet/ChicletCard.tsx
index a540792882443..222f1aa11204a 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.tsx
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.tsx
@@ -23,13 +23,6 @@ export class ChicletCard extends BaseComponent<IChicletCardProps, any> {
     const role = actionable ? (onClick ? 'button' : 'link') : undefined;
     const tabIndex = actionable ? 0 : undefined;
 
-    // actions should be based off of what's passed in
-    // var actions: IButtonProps[] = [
-    //   { iconProps: { iconName: 'Breadcrumb' } },
-    //   { iconProps: { iconName: 'Save' } },
-    //   { iconProps: { iconName: 'Share' } }
-    // ];
-
     var preview = this._renderPreviewImage(image, imageHeight, imageWidth, ogType);
 
     return (
diff --git a/packages/experiments/src/components/Chiclet/ChicletPicker.tsx b/packages/experiments/src/components/Chiclet/ChicletPicker.tsx
index 4b44ccb202d37..11d0d27d33881 100644
--- a/packages/experiments/src/components/Chiclet/ChicletPicker.tsx
+++ b/packages/experiments/src/components/Chiclet/ChicletPicker.tsx
@@ -4,6 +4,7 @@ import {
 } from '../../Utilities';
 import { IChicletPickerProps, IChicletCardProps } from './Chiclet.types';
 import { ChicletCard } from './ChicletCard';
+import { IButtonProps } from 'office-ui-fabric-react/lib/Button';
 import * as stylesImport from './Chiclet.scss';
 const styles: any = stylesImport;
 
@@ -11,24 +12,43 @@ export class ChicletPicker extends React.Component<IChicletPickerProps, IChiclet
   public render() {
     const { chicletCardProps, size, actions } = this.props;
 
+    var actionsToIButtonProps: IButtonProps[] = [];
+    if (actions != null) {
+      actions.forEach(function (string) {
+        switch (string) {
+          case "Breadcrumb":
+            actionsToIButtonProps.push({ iconProps: { iconName: 'Breadcrumb' } });
+            break;
+          case "Save":
+            actionsToIButtonProps.push({ iconProps: { iconName: 'Save' } });
+            break;
+          case "Share":
+            actionsToIButtonProps.push({ iconProps: { iconName: 'Share' } });
+            break;
+          default:
+            break;
+        }
+      });
+    }
+
     switch (size) {
       case "xsmall":
         return (
-          <ChicletCard {...chicletCardProps} className={ css(styles.root) } onClick={ this._onClick } actions={ actions } />
+          <ChicletCard {...chicletCardProps} className={ css(styles.root) } onClick={ this._onClick } actions={ actionsToIButtonProps } />
         );
       case "small":
         return (
-          <ChicletCard {...chicletCardProps} className={ css(styles.root) } onClick={ this._onClick } actions={ actions } />
+          <ChicletCard {...chicletCardProps} className={ css(styles.root) } onClick={ this._onClick } actions={ actionsToIButtonProps } />
         );
       case "medium":
       case "large":
       case "xlarge":
         return (
-          <ChicletCard {...chicletCardProps} className={ css(styles.root) } onClick={ this._onClick } actions={ actions } />
+          <ChicletCard {...chicletCardProps} className={ css(styles.root) } onClick={ this._onClick } actions={ actionsToIButtonProps } />
         );
       default:
         return (
-          <ChicletCard {...chicletCardProps} className={ css(styles.root) } onClick={ this._onClick } actions={ actions } />
+          <ChicletCard {...chicletCardProps} className={ css(styles.root) } onClick={ this._onClick } actions={ actionsToIButtonProps } />
         );
     }
   }
diff --git a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
index 58334ca2f0888..43af81a10224b 100644
--- a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
+++ b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
@@ -11,13 +11,15 @@ export class ChicletBasicExample extends React.Component<any, any> {
   public render() {
     return (
       <Chiclet url="http://localhost:4322" size="medium"
-        actions={ [
-          { iconProps: { iconName: 'Breadcrumb' } },
-          { iconProps: { iconName: 'Save' } },
-          { iconProps: { iconName: 'Share' } }
-        ] }
+        actions={ ["Breadcrumb", "Save", "Share"] }
       />
     );
   }
 
-}
\ No newline at end of file
+}
+
+// actions={ [
+//   { iconProps: { iconName: 'Breadcrumb' } },
+//   { iconProps: { iconName: 'Save' } },
+//   { iconProps: { iconName: 'Share' } }
+// ] }
\ No newline at end of file

From 3fa9d9e2716ab9a5d1c48c7c84defb932a8871e0 Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Fri, 20 Apr 2018 14:47:59 -0700
Subject: [PATCH 12/67] Chiclet -> BaseChiclet, ChicletPicker -> Chiclet

---
 .../src/components/Chiclet/BaseChiclet.tsx    | 74 ++++++++++++++
 .../src/components/Chiclet/Chiclet.tsx        | 99 ++++++++-----------
 .../src/components/Chiclet/Chiclet.types.ts   |  2 +-
 .../src/components/Chiclet/ChicletPicker.tsx  | 59 -----------
 .../examples/Chiclet.Basic.Example.tsx        |  6 +-
 5 files changed, 120 insertions(+), 120 deletions(-)
 create mode 100644 packages/experiments/src/components/Chiclet/BaseChiclet.tsx
 delete mode 100644 packages/experiments/src/components/Chiclet/ChicletPicker.tsx

diff --git a/packages/experiments/src/components/Chiclet/BaseChiclet.tsx b/packages/experiments/src/components/Chiclet/BaseChiclet.tsx
new file mode 100644
index 0000000000000..f0882dd5f51ec
--- /dev/null
+++ b/packages/experiments/src/components/Chiclet/BaseChiclet.tsx
@@ -0,0 +1,74 @@
+import * as React from 'react';
+import {
+  BaseComponent,
+  css
+} from '../../Utilities';
+import { ChicletCard } from './ChicletCard';
+import { Chiclet } from './Chiclet';
+import { IBaseChicletProps, IChicletCardProps } from './Chiclet.types';
+import { IconButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
+import * as stylesImport from './Chiclet.scss';
+const styles: any = stylesImport;
+
+//var fieldMap: { [property: string]: string; } = {};
+
+export class BaseChiclet extends BaseComponent<IBaseChicletProps, any> {
+  public render() {
+    const { url, size, actions } = this.props;
+
+    let chicletCardProps = this.extractMetaTags(url);
+
+    return (
+      <Chiclet chicletCardProps={ chicletCardProps } size={ size ? size : "medium" } actions={ actions } />
+    );
+  }
+
+  public extractMetaTags(url: string) {
+    var attributes: IChicletCardProps = {};
+
+    var xmlHttp = new XMLHttpRequest();
+    xmlHttp.open("GET", url, false);
+    xmlHttp.overrideMimeType('text/xml');
+    xmlHttp.send(null);
+
+    var metaElements = document.getElementsByTagName("meta");
+    let openGraphObject = this._getOpenGraphValues(metaElements, attributes);
+
+    return openGraphObject;
+  }
+
+  public _getOpenGraphValues(metaElements: NodeListOf<HTMLMetaElement>, attributes: IChicletCardProps): IChicletCardProps {
+    for (var i = 0; i < metaElements.length; i++) {
+      if (metaElements[i].attributes != null && metaElements[i].attributes.length >= 2) {
+        switch (metaElements[i].attributes[0].nodeValue) {
+          case "og:title":
+            attributes.title = metaElements[i].content;
+            break;
+          case "og:type":
+            attributes.ogType = metaElements[i].content;
+            break;
+          case "og:image":
+          case "og:image:url":
+            attributes.image = metaElements[i].content;
+            break;
+          case "og:image:type":
+            attributes.imageType = metaElements[i].content;
+            break;
+          case "og:image:width":
+            attributes.imageWidth = metaElements[i].content;
+            break;
+          case "og:image:height":
+            attributes.imageHeight = metaElements[i].content;
+            break;
+          case "og:description":
+            attributes.description = metaElements[i].content;
+            break;
+          case "og:url":
+            attributes.url = metaElements[i].content;
+            break;
+        }
+      }
+    }
+    return attributes;
+  }
+}
diff --git a/packages/experiments/src/components/Chiclet/Chiclet.tsx b/packages/experiments/src/components/Chiclet/Chiclet.tsx
index f88b39adcd366..8424cc6725e3c 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.tsx
+++ b/packages/experiments/src/components/Chiclet/Chiclet.tsx
@@ -1,74 +1,59 @@
 import * as React from 'react';
 import {
-  BaseComponent,
   css
 } from '../../Utilities';
-import { ChicletCard } from './ChicletCard';
-import { ChicletPicker } from './ChicletPicker';
 import { IChicletProps, IChicletCardProps } from './Chiclet.types';
-import { IconButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
+import { ChicletCard } from './ChicletCard';
+import { IButtonProps } from 'office-ui-fabric-react/lib/Button';
 import * as stylesImport from './Chiclet.scss';
 const styles: any = stylesImport;
 
-//var fieldMap: { [property: string]: string; } = {};
-
-export class Chiclet extends BaseComponent<IChicletProps, any> {
+export class Chiclet extends React.Component<IChicletProps, IChicletCardProps> {
   public render() {
-    const { url, size, actions } = this.props;
-
-    let chicletCardProps = this.extractMetaTags(url);
-
-    return (
-      <ChicletPicker chicletCardProps={ chicletCardProps } size={ size ? size : "medium" } actions={ actions } />
-    );
-  }
-
-  public extractMetaTags(url: string) {
-    var attributes: IChicletCardProps = {};
-
-    var xmlHttp = new XMLHttpRequest();
-    xmlHttp.open("GET", url, false);
-    xmlHttp.overrideMimeType('text/xml');
-    xmlHttp.send(null);
+    const { chicletCardProps, size, actions } = this.props;
 
-    var metaElements = document.getElementsByTagName("meta");
-    let openGraphObject = this._getOpenGraphValues(metaElements, attributes);
-
-    return openGraphObject;
-  }
-
-  public _getOpenGraphValues(metaElements: NodeListOf<HTMLMetaElement>, attributes: IChicletCardProps): IChicletCardProps {
-    for (var i = 0; i < metaElements.length; i++) {
-      if (metaElements[i].attributes != null && metaElements[i].attributes.length >= 2) {
-        switch (metaElements[i].attributes[0].nodeValue) {
-          case "og:title":
-            attributes.title = metaElements[i].content;
-            break;
-          case "og:type":
-            attributes.ogType = metaElements[i].content;
-            break;
-          case "og:image":
-          case "og:image:url":
-            attributes.image = metaElements[i].content;
-            break;
-          case "og:image:type":
-            attributes.imageType = metaElements[i].content;
-            break;
-          case "og:image:width":
-            attributes.imageWidth = metaElements[i].content;
+    var actionsToIButtonProps: IButtonProps[] = [];
+    if (actions != null) {
+      actions.forEach(function (string) {
+        switch (string) {
+          case "Breadcrumb":
+            actionsToIButtonProps.push({ iconProps: { iconName: 'Breadcrumb' } });
             break;
-          case "og:image:height":
-            attributes.imageHeight = metaElements[i].content;
+          case "Save":
+            actionsToIButtonProps.push({ iconProps: { iconName: 'Save' } });
             break;
-          case "og:description":
-            attributes.description = metaElements[i].content;
+          case "Share":
+            actionsToIButtonProps.push({ iconProps: { iconName: 'Share' } });
             break;
-          case "og:url":
-            attributes.url = metaElements[i].content;
+          default:
             break;
         }
-      }
+      });
     }
-    return attributes;
+
+    switch (size) {
+      case "xsmall":
+        return (
+          <ChicletCard {...chicletCardProps} className={ css(styles.root) } onClick={ this._onClick } actions={ actionsToIButtonProps } />
+        );
+      case "small":
+        return (
+          <ChicletCard {...chicletCardProps} className={ css(styles.root) } onClick={ this._onClick } actions={ actionsToIButtonProps } />
+        );
+      case "medium":
+      case "large":
+      case "xlarge":
+        return (
+          <ChicletCard {...chicletCardProps} className={ css(styles.root) } onClick={ this._onClick } actions={ actionsToIButtonProps } />
+        );
+      default:
+        return (
+          <ChicletCard {...chicletCardProps} className={ css(styles.root) } onClick={ this._onClick } actions={ actionsToIButtonProps } />
+        );
+    }
+  }
+
+  private _onClick(): void {
+    console.log("You clicked the Chiclet");
   }
-}
+}
\ No newline at end of file
diff --git a/packages/experiments/src/components/Chiclet/Chiclet.types.ts b/packages/experiments/src/components/Chiclet/Chiclet.types.ts
index 6a93d2d3ccf7f..8e14959b61a6d 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.types.ts
+++ b/packages/experiments/src/components/Chiclet/Chiclet.types.ts
@@ -16,7 +16,7 @@ export interface IChicletStyles {
   root: IStyle;
 }
 
-export interface IChicletProps extends React.Props<Chiclet> {
+export interface IBaseChicletProps extends React.Props<BaseChiclet> {
   /**
    * Optional callback to access the IChiclet interface. Use this instead of ref for accessing
    * the public methods and properties of the component.
diff --git a/packages/experiments/src/components/Chiclet/ChicletPicker.tsx b/packages/experiments/src/components/Chiclet/ChicletPicker.tsx
deleted file mode 100644
index 11d0d27d33881..0000000000000
--- a/packages/experiments/src/components/Chiclet/ChicletPicker.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import * as React from 'react';
-import {
-  css
-} from '../../Utilities';
-import { IChicletPickerProps, IChicletCardProps } from './Chiclet.types';
-import { ChicletCard } from './ChicletCard';
-import { IButtonProps } from 'office-ui-fabric-react/lib/Button';
-import * as stylesImport from './Chiclet.scss';
-const styles: any = stylesImport;
-
-export class ChicletPicker extends React.Component<IChicletPickerProps, IChicletCardProps> {
-  public render() {
-    const { chicletCardProps, size, actions } = this.props;
-
-    var actionsToIButtonProps: IButtonProps[] = [];
-    if (actions != null) {
-      actions.forEach(function (string) {
-        switch (string) {
-          case "Breadcrumb":
-            actionsToIButtonProps.push({ iconProps: { iconName: 'Breadcrumb' } });
-            break;
-          case "Save":
-            actionsToIButtonProps.push({ iconProps: { iconName: 'Save' } });
-            break;
-          case "Share":
-            actionsToIButtonProps.push({ iconProps: { iconName: 'Share' } });
-            break;
-          default:
-            break;
-        }
-      });
-    }
-
-    switch (size) {
-      case "xsmall":
-        return (
-          <ChicletCard {...chicletCardProps} className={ css(styles.root) } onClick={ this._onClick } actions={ actionsToIButtonProps } />
-        );
-      case "small":
-        return (
-          <ChicletCard {...chicletCardProps} className={ css(styles.root) } onClick={ this._onClick } actions={ actionsToIButtonProps } />
-        );
-      case "medium":
-      case "large":
-      case "xlarge":
-        return (
-          <ChicletCard {...chicletCardProps} className={ css(styles.root) } onClick={ this._onClick } actions={ actionsToIButtonProps } />
-        );
-      default:
-        return (
-          <ChicletCard {...chicletCardProps} className={ css(styles.root) } onClick={ this._onClick } actions={ actionsToIButtonProps } />
-        );
-    }
-  }
-
-  private _onClick(): void {
-    console.log("You clicked the Chiclet");
-  }
-}
\ No newline at end of file
diff --git a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
index 43af81a10224b..ec92b2ded0fa2 100644
--- a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
+++ b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {
-  Chiclet
-} from '../Chiclet';
+  BaseChiclet
+} from '../BaseChiclet';
 
 export class ChicletBasicExample extends React.Component<any, any> {
   constructor(props: {}) {
@@ -10,7 +10,7 @@ export class ChicletBasicExample extends React.Component<any, any> {
 
   public render() {
     return (
-      <Chiclet url="http://localhost:4322" size="medium"
+      <BaseChiclet url="http://localhost:4322" size="medium"
         actions={ ["Breadcrumb", "Save", "Share"] }
       />
     );

From 3df9860a3ebb630b283b7ab8b913e61988d234d2 Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Mon, 23 Apr 2018 13:46:17 -0700
Subject: [PATCH 13/67] ChicletPicker to Chiclet

---
 .../experiments/src/components/Chiclet/Chiclet.types.ts     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/experiments/src/components/Chiclet/Chiclet.types.ts b/packages/experiments/src/components/Chiclet/Chiclet.types.ts
index 8e14959b61a6d..d4ac6deaea1bd 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.types.ts
+++ b/packages/experiments/src/components/Chiclet/Chiclet.types.ts
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { Chiclet } from './Chiclet';
+import { BaseChiclet } from './BaseChiclet';
 import { ChicletCard } from './ChicletCard';
-import { ChicletPicker } from './ChicletPicker';
+import { Chiclet } from './Chiclet';
 import { IStyle } from '../../Styling';
 import { IButtonProps } from 'office-ui-fabric-react/lib/Button';
 
@@ -44,7 +44,7 @@ export interface IBaseChicletProps extends React.Props<BaseChiclet> {
   actions?: string[];
 }
 
-export interface IChicletPickerProps extends React.Props<ChicletPicker> {
+export interface IChicletProps extends React.Props<Chiclet> {
   /**
    * Props to render in the chosen ChicletCard
    */

From a2b0fa5f5b5b1c942d81cffd04bcbd2cf25f90e9 Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Mon, 23 Apr 2018 17:43:05 -0700
Subject: [PATCH 14/67] styles sheet working

---
 packages/experiments/src/Chiclet.ts           |   1 +
 .../src/components/Chiclet/BaseChiclet.tsx    |   3 +
 .../src/components/Chiclet/Chiclet.styles.ts  | 111 ++++++++++++++++++
 .../src/components/Chiclet/Chiclet.types.ts   |  59 ++++++++--
 .../src/components/Chiclet/ChicletCard.tsx    |  39 ++++--
 .../src/components/Chiclet/XSmallChiclet.tsx  |   0
 .../src/components/Chiclet/index.ts           |   4 +
 7 files changed, 195 insertions(+), 22 deletions(-)
 create mode 100644 packages/experiments/src/Chiclet.ts
 create mode 100644 packages/experiments/src/components/Chiclet/Chiclet.styles.ts
 create mode 100644 packages/experiments/src/components/Chiclet/XSmallChiclet.tsx
 create mode 100644 packages/experiments/src/components/Chiclet/index.ts

diff --git a/packages/experiments/src/Chiclet.ts b/packages/experiments/src/Chiclet.ts
new file mode 100644
index 0000000000000..bb147afc0b1b6
--- /dev/null
+++ b/packages/experiments/src/Chiclet.ts
@@ -0,0 +1 @@
+export * from './components/Chiclet/index';
\ No newline at end of file
diff --git a/packages/experiments/src/components/Chiclet/BaseChiclet.tsx b/packages/experiments/src/components/Chiclet/BaseChiclet.tsx
index f0882dd5f51ec..f417b191a3875 100644
--- a/packages/experiments/src/components/Chiclet/BaseChiclet.tsx
+++ b/packages/experiments/src/components/Chiclet/BaseChiclet.tsx
@@ -51,6 +51,9 @@ export class BaseChiclet extends BaseComponent<IBaseChicletProps, any> {
           case "og:image:url":
             attributes.image = metaElements[i].content;
             break;
+          case "og:image:secure_url":
+            attributes.imageSecureUrl = metaElements[i].content;
+            break;
           case "og:image:type":
             attributes.imageType = metaElements[i].content;
             break;
diff --git a/packages/experiments/src/components/Chiclet/Chiclet.styles.ts b/packages/experiments/src/components/Chiclet/Chiclet.styles.ts
new file mode 100644
index 0000000000000..55801bef02218
--- /dev/null
+++ b/packages/experiments/src/components/Chiclet/Chiclet.styles.ts
@@ -0,0 +1,111 @@
+import { memoizeFunction } from '../../Utilities';
+import { 
+  mergeStyleSets, 
+  IStyle, 
+  ITheme,
+  concatStyleSets 
+} from '../../Styling';
+import { IChicletStyles } from './Chiclet.types';
+
+const msColorNeutralLighterAlt = 'white';
+const msColorNeutralPrimary = '#333333';
+const ChicletCardTitleLineHeight = '21px';
+
+/* Actions */
+const msChicletCardActionsActionSize = '34px';
+const msChicletCardActionsHorizontalPadding = '12px';
+const msChicletCardActionsVerticalPadding = '2px';
+
+export const getClassNames = memoizeFunction((
+  theme: ITheme,
+  customStyles?: IChicletStyles
+): IChicletStyles => {
+  const styles: IChicletStyles = {
+    root: {
+      //-webkit-font-smoothing: 'antialiased';
+      backgroundColor: 'white',
+      //border: 1px solid $ms-color-neutralLight;
+      boxSizing: 'border-box',
+      maxWidth: '320px',
+      minWidth: '540px',
+      height: '109px',
+      userSelect: 'none',
+      position: 'relative',
+      //&:hover {
+      //  cursor: pointer;
+      //  border: 1px solid $ms-color-neutralTertiaryAlt;
+      //}
+    },
+    icon: {
+      //@include ms-left(10px);
+      bottom: '10px',
+      position: 'absolute',
+      color: '#166EBE'
+    },
+    preview: {
+      float: 'left',
+      maxHeight: '107px',
+      maxWidth: '160px',
+      position: 'relative',
+      overflow: 'hidden', // need to fix
+      backgroundColor: msColorNeutralLighterAlt,
+      display: 'block'
+    },
+    info: {
+      position: 'relative',
+      display: 'block',
+      height: '100%',
+      lineHeight: '21px',
+      overflow: 'hidden',
+      wordWrap: 'break-word'
+    },
+    title: {
+      padding: '8px 16px 0px',
+      //@include ms-font-l;
+      color: msColorNeutralPrimary,
+      height: '42px', // Two lines of text, making sure the third line is hidden
+      lineHeight: ChicletCardTitleLineHeight,
+      overflow: 'hidden',
+      wordWrap: 'break-word',
+      fontWeight: '400'
+    },
+    link: {
+      padding: '4px 16px 0px',
+      //@include ms-font-l;
+      fontSize: '8pt',
+      color: msColorNeutralPrimary,
+      lineHeight: '14px',
+      height: '14px',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis'
+    },
+    actions: {
+      height: msChicletCardActionsActionSize,
+      padding: msChicletCardActionsVerticalPadding, //msChicletCardActionsHorizontalPadding,
+      position: 'relative'
+    },
+    action: {
+      float: 'right',
+      //@include ms - margin - left(4px);
+      cursor: 'pointer'
+
+      // : global(.ms - Button) {
+      //   font - size: 16px;
+      //   height: $ms - ChicletCardActions - actionSize;
+      //   width: $ms - ChicletCardActions - actionSize;
+      //   color: #166EBE;
+      // }
+
+      // : global(.ms - Button: hover) {
+      //   : global(.ms - Button - icon) {
+      //     color: $buttonTextColor;
+      //     cursor: pointer;
+      //   }
+      // }
+    }
+  };
+
+  return concatStyleSets(styles, customStyles)!;
+
+});
\ No newline at end of file
diff --git a/packages/experiments/src/components/Chiclet/Chiclet.types.ts b/packages/experiments/src/components/Chiclet/Chiclet.types.ts
index d4ac6deaea1bd..ba1474c4042cf 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.types.ts
+++ b/packages/experiments/src/components/Chiclet/Chiclet.types.ts
@@ -2,8 +2,9 @@ import * as React from 'react';
 import { BaseChiclet } from './BaseChiclet';
 import { ChicletCard } from './ChicletCard';
 import { Chiclet } from './Chiclet';
-import { IStyle } from '../../Styling';
+import { IStyle, ITheme } from '../../Styling';
 import { IButtonProps } from 'office-ui-fabric-react/lib/Button';
+import { IStyleFunction } from '../../Utilities';
 
 export interface IChiclet {
 
@@ -13,7 +14,46 @@ export interface IChicletStyles {
   /**
    * Style for the root element.
    */
-  root: IStyle;
+  root?: IStyle;
+
+  /**
+   * Style for the icon that overlays the file preview image.
+   */
+  icon?: IStyle;
+
+  /**
+   * Style for the file preview image.
+   */
+  preview?: IStyle;
+
+  /**
+   * Style for preview information about the file, such as title and link.
+   */
+  info?: IStyle;
+
+  /**
+   * Style for the title of the file.
+   */
+  title?: IStyle;
+
+  /**
+   * Style for the link to the file.
+   */
+  link?: IStyle;
+
+  /**
+   * Style for the collective actions in the lower right of the component.
+   */
+  actions?: IStyle;
+
+  /**
+   * Style for the individual actions in the lower right of the component.
+   */
+  action?: IStyle;
+}
+
+export interface IChicletStyleProps {
+
 }
 
 export interface IBaseChicletProps extends React.Props<BaseChiclet> {
@@ -69,13 +109,7 @@ export interface IChicletCardProps extends React.Props<ChicletCard> {
   componentRef?: (component: IChiclet | null) => void;
 
   /**
-  * The type of Chiclet to display.
-  * @default Chiclet.anonymous
-  */
-  type?: ChicletType;
-
-  /**
-   * Optional class for chiclet.
+   * Optional class for ChicletCard.
    */
   className?: string;
 
@@ -95,6 +129,13 @@ export interface IChicletCardProps extends React.Props<ChicletCard> {
    */
   actions?: IButtonProps[] | undefined;
 
+  /**
+   * Styling for the ChicletCard.
+   */
+  styles?: IChicletStyles;
+
+  theme?: ITheme;
+
   /**
    * OpenGraph props.
    */
diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.tsx b/packages/experiments/src/components/Chiclet/ChicletCard.tsx
index 222f1aa11204a..f1621ebe4e4b1 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.tsx
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.tsx
@@ -2,9 +2,18 @@ import * as React from 'react';
 import {
   BaseComponent,
   KeyCodes,
-  css
+  css,
+  classNamesFunction
 } from '../../Utilities';
-import { IChicletCardProps } from './Chiclet.types';
+import {
+  IChicletCardProps,
+  IChicletStyles,
+  IChicletStyleProps
+} from './Chiclet.types';
+import { mergeStyles } from '../../Styling';
+import {
+  getClassNames
+} from './Chiclet.styles';
 import { Icon } from 'office-ui-fabric-react/lib/Icon';
 import { IconButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
 import { Image } from 'office-ui-fabric-react/lib/Image';
@@ -12,13 +21,17 @@ import { TestImages } from 'office-ui-fabric-react/src/common/TestImages';
 import { FocusZone } from 'office-ui-fabric-react/lib/FocusZone';
 import { ChicletTestImages } from '../../common/TestImages';
 import * as stylesImport from './Chiclet.scss';
-const styles: any = stylesImport;
+const oldstyles: any = stylesImport;
 
 export class ChicletCard extends BaseComponent<IChicletCardProps, any> {
+  private _classNames: IChicletStyles = {};
+
   public render() {
-    const { title, ogType, description, image, imageType, imageWidth, imageHeight, url, onClick, onClickHref, className, actions } = this.props;
+    const { styles: customStyles, title, ogType, description, image, imageType, imageWidth, imageHeight, url, onClick, onClickHref, className, actions, theme } = this.props;
     const actionable = (onClick || onClickHref) ? true : false;
 
+    this._classNames = getClassNames(theme!, customStyles);
+
     // if this element is actionable it should have an aria role
     const role = actionable ? (onClick ? 'button' : 'link') : undefined;
     const tabIndex = actionable ? 0 : undefined;
@@ -35,7 +48,7 @@ export class ChicletCard extends BaseComponent<IChicletCardProps, any> {
           css('ms-ChicletCard', className) }
       >
         <div
-          className={ css('ms-ChicletCardPreview', styles.preview) }
+          className={ css('ms-ChicletCardPreview', oldstyles.preview) }
         >
           { image ?
             preview :
@@ -47,15 +60,15 @@ export class ChicletCard extends BaseComponent<IChicletCardProps, any> {
           }
         </div>
         <div
-          className={ css('ms-ChicletCardInfo', styles.info) }
+          className={ css('ms-ChicletCardInfo', oldstyles.info) }
         >
           <div
-            className={ css('ms-ChicletCardTitle', styles.title) }
+            className={ css('ms-ChicletCardTitle', oldstyles.title) }
           >
             { title ? title : "Placeholder" }
           </div>
           <div
-            className={ css('ms-ChicletCardLink', styles.link) }
+            className={ css('ms-ChicletCardLink', oldstyles.link) }
           >
             { url ? url : "https://onedrive.com/files/v-lygi/39192908430" }
           </div>
@@ -79,13 +92,13 @@ export class ChicletCard extends BaseComponent<IChicletCardProps, any> {
     let icon;
     switch (ogType) {
       case "word":
-        icon = <Icon className={ css('ms-DocumentCardPreview-icon', styles.icon) } iconName='WordDocument' />;
+        icon = <Icon className={ css('ms-DocumentCardPreview-icon', oldstyles.icon) } iconName='WordDocument' />;
         break;
       case "powerpoint":
-        icon = <Icon className={ css('ms-DocumentCardPreview-icon', styles.icon) } iconName='PowerPointDocument' />;
+        icon = <Icon className={ css('ms-DocumentCardPreview-icon', oldstyles.icon) } iconName='PowerPointDocument' />;
         break;
       case "excel":
-        icon = <Icon className={ css('ms-DocumentCardPreview-icon', styles.icon) } iconName='ExcelDocument' />;
+        icon = <Icon className={ css('ms-DocumentCardPreview-icon', oldstyles.icon) } iconName='ExcelDocument' />;
         break;
     }
 
@@ -99,10 +112,10 @@ export class ChicletCard extends BaseComponent<IChicletCardProps, any> {
 
   private _renderFooter(actions: IButtonProps[]): React.ReactElement<React.HTMLAttributes<HTMLDivElement>> {
     return (
-      <div className={ css('ms-ChicletCardFooter', styles.actions) }>
+      <div className={ mergeStyles(this._classNames.actions) }>
         { actions && actions.map((action, index) => {
           return (
-            <div className={ css('ms-ChicletFooter-action', styles.action) } key={ index }>
+            <div className={ css('ms-ChicletFooter-action', oldstyles.action) } key={ index }>
               <IconButton { ...action } />
             </div>
           );
diff --git a/packages/experiments/src/components/Chiclet/XSmallChiclet.tsx b/packages/experiments/src/components/Chiclet/XSmallChiclet.tsx
new file mode 100644
index 0000000000000..e69de29bb2d1d
diff --git a/packages/experiments/src/components/Chiclet/index.ts b/packages/experiments/src/components/Chiclet/index.ts
new file mode 100644
index 0000000000000..a072e64fba33b
--- /dev/null
+++ b/packages/experiments/src/components/Chiclet/index.ts
@@ -0,0 +1,4 @@
+export * from './BaseChiclet';
+export * from './Chiclet';
+export * from './ChicletCard';
+export * from './Chiclet.types';
\ No newline at end of file

From 2e5978d052c1079ae480e764b88a4a3d727e8d5d Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Tue, 24 Apr 2018 11:47:50 -0700
Subject: [PATCH 15/67] styling moved to styles sheet

---
 .../src/components/Chiclet/Chiclet.styles.ts  | 169 +++++++++---------
 .../src/components/Chiclet/Chiclet.tsx        |  19 +-
 .../src/components/Chiclet/Chiclet.types.ts   |   7 +
 .../src/components/Chiclet/ChicletCard.tsx    |  16 +-
 4 files changed, 116 insertions(+), 95 deletions(-)

diff --git a/packages/experiments/src/components/Chiclet/Chiclet.styles.ts b/packages/experiments/src/components/Chiclet/Chiclet.styles.ts
index 55801bef02218..ca890bd2ee51b 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.styles.ts
+++ b/packages/experiments/src/components/Chiclet/Chiclet.styles.ts
@@ -1,14 +1,13 @@
 import { memoizeFunction } from '../../Utilities';
-import { 
-  mergeStyleSets, 
-  IStyle, 
+import {
+  mergeStyleSets,
+  IStyle,
   ITheme,
-  concatStyleSets 
+  concatStyleSets,
+  getTheme
 } from '../../Styling';
 import { IChicletStyles } from './Chiclet.types';
 
-const msColorNeutralLighterAlt = 'white';
-const msColorNeutralPrimary = '#333333';
 const ChicletCardTitleLineHeight = '21px';
 
 /* Actions */
@@ -17,93 +16,101 @@ const msChicletCardActionsHorizontalPadding = '12px';
 const msChicletCardActionsVerticalPadding = '2px';
 
 export const getClassNames = memoizeFunction((
-  theme: ITheme,
+  theme: ITheme = getTheme(),
   customStyles?: IChicletStyles
 ): IChicletStyles => {
   const styles: IChicletStyles = {
     root: {
-      //-webkit-font-smoothing: 'antialiased';
+      WebkitFontSmoothing: 'antialiased',
       backgroundColor: 'white',
-      //border: 1px solid $ms-color-neutralLight;
+      border: `1px solid ${theme.palette.neutralLight}`,
       boxSizing: 'border-box',
       maxWidth: '320px',
       minWidth: '540px',
       height: '109px',
       userSelect: 'none',
       position: 'relative',
-      //&:hover {
-      //  cursor: pointer;
-      //  border: 1px solid $ms-color-neutralTertiaryAlt;
-      //}
+      selectors: {
+        ':hover': {
+          cursor: 'pointer',
+          border: `1px solid ${theme.palette.neutralTertiaryAlt}`
+        }
+      }
     },
-    icon: {
-      //@include ms-left(10px);
-      bottom: '10px',
-      position: 'absolute',
-      color: '#166EBE'
-    },
-    preview: {
-      float: 'left',
-      maxHeight: '107px',
-      maxWidth: '160px',
-      position: 'relative',
-      overflow: 'hidden', // need to fix
-      backgroundColor: msColorNeutralLighterAlt,
-      display: 'block'
-    },
-    info: {
-      position: 'relative',
-      display: 'block',
-      height: '100%',
-      lineHeight: '21px',
-      overflow: 'hidden',
-      wordWrap: 'break-word'
-    },
-    title: {
-      padding: '8px 16px 0px',
-      //@include ms-font-l;
-      color: msColorNeutralPrimary,
-      height: '42px', // Two lines of text, making sure the third line is hidden
-      lineHeight: ChicletCardTitleLineHeight,
-      overflow: 'hidden',
-      wordWrap: 'break-word',
-      fontWeight: '400'
-    },
-    link: {
-      padding: '4px 16px 0px',
-      //@include ms-font-l;
-      fontSize: '8pt',
-      color: msColorNeutralPrimary,
-      lineHeight: '14px',
-      height: '14px',
-      overflow: 'hidden',
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis'
-    },
-    actions: {
-      height: msChicletCardActionsActionSize,
-      padding: msChicletCardActionsVerticalPadding, //msChicletCardActionsHorizontalPadding,
-      position: 'relative'
-    },
-    action: {
-      float: 'right',
-      //@include ms - margin - left(4px);
-      cursor: 'pointer'
-
-      // : global(.ms - Button) {
-      //   font - size: 16px;
-      //   height: $ms - ChicletCardActions - actionSize;
-      //   width: $ms - ChicletCardActions - actionSize;
-      //   color: #166EBE;
-      // }
-
-      // : global(.ms - Button: hover) {
-      //   : global(.ms - Button - icon) {
-      //     color: $buttonTextColor;
-      //     cursor: pointer;
-      //   }
-      // }
-    }
+    icon: [
+      'ms-DocumentCardPreview-icon',
+      {
+        marginLeft: '10px',
+        bottom: '10px',
+        position: 'absolute',
+        color: '#166EBE'
+      }
+    ],
+    preview: [
+      'ms-ChicletCardPreview',
+      {
+        float: 'left',
+        maxHeight: '107px',
+        maxWidth: '160px',
+        position: 'relative',
+        overflow: 'hidden', // need to fix
+        backgroundColor: theme.palette.neutralLighterAlt,
+        display: 'block'
+      }
+    ],
+    info: [
+      'ms-ChicletCardInfo',
+      {
+        position: 'relative',
+        display: 'block',
+        height: '100%',
+        lineHeight: '21px',
+        overflow: 'hidden',
+        wordWrap: 'break-word'
+      }
+    ],
+    title: [
+      'ms-ChicletCardTitle',
+      {
+        padding: '8px 16px 0px',
+        font: theme.fonts.large,
+        color: theme.palette.neutralPrimary,
+        height: '42px', // Two lines of text, making sure the third line is hidden
+        lineHeight: ChicletCardTitleLineHeight,
+        overflow: 'hidden',
+        wordWrap: 'break-word',
+        fontWeight: '400'
+      }
+    ],
+    link: [
+      'ms-ChicletCardLink',
+      {
+        padding: '4px 16px 0px',
+        fontSize: '8pt',
+        color: theme.palette.neutralTertiaryAlt,
+        lineHeight: '14px',
+        height: '14px',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis'
+      }
+    ],
+    actions: [
+      'ms-ChicletFooter',
+      {
+        height: msChicletCardActionsActionSize,
+        padding: `${msChicletCardActionsVerticalPadding} ${msChicletCardActionsHorizontalPadding}`,
+        position: 'relative'
+      }
+    ],
+    action: [
+      'ms-ChicletFooter-action',
+      {
+        float: 'right',
+        marginLeft: '4px',
+        cursor: 'pointer'
+      }
+    ]
   };
 
   return concatStyleSets(styles, customStyles)!;
diff --git a/packages/experiments/src/components/Chiclet/Chiclet.tsx b/packages/experiments/src/components/Chiclet/Chiclet.tsx
index 8424cc6725e3c..f63822b67b57d 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.tsx
+++ b/packages/experiments/src/components/Chiclet/Chiclet.tsx
@@ -2,15 +2,22 @@ import * as React from 'react';
 import {
   css
 } from '../../Utilities';
-import { IChicletProps, IChicletCardProps } from './Chiclet.types';
+import {
+  getClassNames
+} from './Chiclet.styles';
+import { IChicletProps, IChicletCardProps, IChicletStyles } from './Chiclet.types';
+import { mergeStyles } from '../../Styling';
 import { ChicletCard } from './ChicletCard';
 import { IButtonProps } from 'office-ui-fabric-react/lib/Button';
 import * as stylesImport from './Chiclet.scss';
 const styles: any = stylesImport;
 
 export class Chiclet extends React.Component<IChicletProps, IChicletCardProps> {
+  private _classNames: IChicletStyles = {};
+
   public render() {
-    const { chicletCardProps, size, actions } = this.props;
+    const { styles: customStyles, chicletCardProps, size, actions, theme } = this.props;
+    this._classNames = getClassNames(theme!, customStyles);
 
     var actionsToIButtonProps: IButtonProps[] = [];
     if (actions != null) {
@@ -34,21 +41,21 @@ export class Chiclet extends React.Component<IChicletProps, IChicletCardProps> {
     switch (size) {
       case "xsmall":
         return (
-          <ChicletCard {...chicletCardProps} className={ css(styles.root) } onClick={ this._onClick } actions={ actionsToIButtonProps } />
+          <ChicletCard {...chicletCardProps} className={ mergeStyles(this._classNames.root) } onClick={ this._onClick } actions={ actionsToIButtonProps } />
         );
       case "small":
         return (
-          <ChicletCard {...chicletCardProps} className={ css(styles.root) } onClick={ this._onClick } actions={ actionsToIButtonProps } />
+          <ChicletCard {...chicletCardProps} className={ mergeStyles(this._classNames.root) } onClick={ this._onClick } actions={ actionsToIButtonProps } />
         );
       case "medium":
       case "large":
       case "xlarge":
         return (
-          <ChicletCard {...chicletCardProps} className={ css(styles.root) } onClick={ this._onClick } actions={ actionsToIButtonProps } />
+          <ChicletCard {...chicletCardProps} className={ mergeStyles(this._classNames.root) } onClick={ this._onClick } actions={ actionsToIButtonProps } />
         );
       default:
         return (
-          <ChicletCard {...chicletCardProps} className={ css(styles.root) } onClick={ this._onClick } actions={ actionsToIButtonProps } />
+          <ChicletCard {...chicletCardProps} className={ mergeStyles(this._classNames.root) } onClick={ this._onClick } actions={ actionsToIButtonProps } />
         );
     }
   }
diff --git a/packages/experiments/src/components/Chiclet/Chiclet.types.ts b/packages/experiments/src/components/Chiclet/Chiclet.types.ts
index ba1474c4042cf..89fab814c7cdf 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.types.ts
+++ b/packages/experiments/src/components/Chiclet/Chiclet.types.ts
@@ -99,6 +99,13 @@ export interface IChicletProps extends React.Props<Chiclet> {
    * Action icon buttons to render.
    */
   actions?: string[];
+
+  /**
+   * Styling for the Chiclet.
+   */
+  styles?: IChicletStyles;
+
+  theme?: ITheme;
 }
 
 export interface IChicletCardProps extends React.Props<ChicletCard> {
diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.tsx b/packages/experiments/src/components/Chiclet/ChicletCard.tsx
index f1621ebe4e4b1..f63e2a91630eb 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.tsx
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.tsx
@@ -48,7 +48,7 @@ export class ChicletCard extends BaseComponent<IChicletCardProps, any> {
           css('ms-ChicletCard', className) }
       >
         <div
-          className={ css('ms-ChicletCardPreview', oldstyles.preview) }
+          className={ mergeStyles(this._classNames.preview) }
         >
           { image ?
             preview :
@@ -60,15 +60,15 @@ export class ChicletCard extends BaseComponent<IChicletCardProps, any> {
           }
         </div>
         <div
-          className={ css('ms-ChicletCardInfo', oldstyles.info) }
+          className={ mergeStyles(this._classNames.info) }
         >
           <div
-            className={ css('ms-ChicletCardTitle', oldstyles.title) }
+            className={ mergeStyles(this._classNames.title) }
           >
             { title ? title : "Placeholder" }
           </div>
           <div
-            className={ css('ms-ChicletCardLink', oldstyles.link) }
+            className={ mergeStyles(this._classNames.link) }
           >
             { url ? url : "https://onedrive.com/files/v-lygi/39192908430" }
           </div>
@@ -92,13 +92,13 @@ export class ChicletCard extends BaseComponent<IChicletCardProps, any> {
     let icon;
     switch (ogType) {
       case "word":
-        icon = <Icon className={ css('ms-DocumentCardPreview-icon', oldstyles.icon) } iconName='WordDocument' />;
+        icon = <Icon className={ mergeStyles(this._classNames.icon) } iconName='WordDocument' />;
         break;
       case "powerpoint":
-        icon = <Icon className={ css('ms-DocumentCardPreview-icon', oldstyles.icon) } iconName='PowerPointDocument' />;
+        icon = <Icon className={ mergeStyles(this._classNames.icon) } iconName='PowerPointDocument' />;
         break;
       case "excel":
-        icon = <Icon className={ css('ms-DocumentCardPreview-icon', oldstyles.icon) } iconName='ExcelDocument' />;
+        icon = <Icon className={ mergeStyles(this._classNames.icon) } iconName='ExcelDocument' />;
         break;
     }
 
@@ -115,7 +115,7 @@ export class ChicletCard extends BaseComponent<IChicletCardProps, any> {
       <div className={ mergeStyles(this._classNames.actions) }>
         { actions && actions.map((action, index) => {
           return (
-            <div className={ css('ms-ChicletFooter-action', oldstyles.action) } key={ index }>
+            <div className={ mergeStyles(this._classNames.action) } key={ index }>
               <IconButton { ...action } />
             </div>
           );

From e4973233d00e7e0d66ea8eb9f9c5f1bbc175e24b Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Tue, 24 Apr 2018 13:02:32 -0700
Subject: [PATCH 16/67] remove references to scss file

---
 .../experiments/src/components/Chiclet/BaseChiclet.tsx    | 4 ----
 packages/experiments/src/components/Chiclet/Chiclet.tsx   | 2 --
 .../experiments/src/components/Chiclet/ChicletCard.tsx    | 2 --
 .../components/Chiclet/examples/Chiclet.Basic.Example.tsx | 8 +-------
 4 files changed, 1 insertion(+), 15 deletions(-)

diff --git a/packages/experiments/src/components/Chiclet/BaseChiclet.tsx b/packages/experiments/src/components/Chiclet/BaseChiclet.tsx
index f417b191a3875..9b3f1efcd8231 100644
--- a/packages/experiments/src/components/Chiclet/BaseChiclet.tsx
+++ b/packages/experiments/src/components/Chiclet/BaseChiclet.tsx
@@ -7,10 +7,6 @@ import { ChicletCard } from './ChicletCard';
 import { Chiclet } from './Chiclet';
 import { IBaseChicletProps, IChicletCardProps } from './Chiclet.types';
 import { IconButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
-import * as stylesImport from './Chiclet.scss';
-const styles: any = stylesImport;
-
-//var fieldMap: { [property: string]: string; } = {};
 
 export class BaseChiclet extends BaseComponent<IBaseChicletProps, any> {
   public render() {
diff --git a/packages/experiments/src/components/Chiclet/Chiclet.tsx b/packages/experiments/src/components/Chiclet/Chiclet.tsx
index f63822b67b57d..76f8b6d456b76 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.tsx
+++ b/packages/experiments/src/components/Chiclet/Chiclet.tsx
@@ -9,8 +9,6 @@ import { IChicletProps, IChicletCardProps, IChicletStyles } from './Chiclet.type
 import { mergeStyles } from '../../Styling';
 import { ChicletCard } from './ChicletCard';
 import { IButtonProps } from 'office-ui-fabric-react/lib/Button';
-import * as stylesImport from './Chiclet.scss';
-const styles: any = stylesImport;
 
 export class Chiclet extends React.Component<IChicletProps, IChicletCardProps> {
   private _classNames: IChicletStyles = {};
diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.tsx b/packages/experiments/src/components/Chiclet/ChicletCard.tsx
index f63e2a91630eb..1ac3687aa7194 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.tsx
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.tsx
@@ -20,8 +20,6 @@ import { Image } from 'office-ui-fabric-react/lib/Image';
 import { TestImages } from 'office-ui-fabric-react/src/common/TestImages';
 import { FocusZone } from 'office-ui-fabric-react/lib/FocusZone';
 import { ChicletTestImages } from '../../common/TestImages';
-import * as stylesImport from './Chiclet.scss';
-const oldstyles: any = stylesImport;
 
 export class ChicletCard extends BaseComponent<IChicletCardProps, any> {
   private _classNames: IChicletStyles = {};
diff --git a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
index ec92b2ded0fa2..24fcbe2c71c62 100644
--- a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
+++ b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
@@ -16,10 +16,4 @@ export class ChicletBasicExample extends React.Component<any, any> {
     );
   }
 
-}
-
-// actions={ [
-//   { iconProps: { iconName: 'Breadcrumb' } },
-//   { iconProps: { iconName: 'Save' } },
-//   { iconProps: { iconName: 'Share' } }
-// ] }
\ No newline at end of file
+}
\ No newline at end of file

From d0b31a245dad7410b9e2e18dd6f836f79ebd1006 Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Wed, 25 Apr 2018 11:55:14 -0700
Subject: [PATCH 17/67] remove Chiclet.scss and XSmall

---
 .../src/components/Chiclet/Chiclet.scss       | 102 ------------------
 .../src/components/Chiclet/XSmallChiclet.tsx  |   0
 2 files changed, 102 deletions(-)
 delete mode 100644 packages/experiments/src/components/Chiclet/Chiclet.scss
 delete mode 100644 packages/experiments/src/components/Chiclet/XSmallChiclet.tsx

diff --git a/packages/experiments/src/components/Chiclet/Chiclet.scss b/packages/experiments/src/components/Chiclet/Chiclet.scss
deleted file mode 100644
index f206678ae6240..0000000000000
--- a/packages/experiments/src/components/Chiclet/Chiclet.scss
+++ /dev/null
@@ -1,102 +0,0 @@
-@import '~office-ui-fabric-react/src/common/common';
-
-.root {
-  -webkit-font-smoothing: antialiased;
-  background-color: $ms-color-white;
-  border: 1px solid $ms-color-neutralLight;
-  box-sizing: border-box;
-  max-width: 320px;
-  min-width: 540px;
-  height: 109px;
-  user-select: none;
-  position: relative;
-  &:hover {
-    cursor: pointer;
-    border: 1px solid $ms-color-neutralTertiaryAlt;
-  }
-}
-
-.icon {
-  @include ms-left(10px);
-  bottom: 10px;
-  position: absolute;
-  color: #166EBE;
-}
-
-/* Preview */
-.preview {
-  float: left;
-  max-height: 107px;
-  max-width: 160px;
-  position: relative;
-  overflow: hidden; // need to fix
-  background-color: $ms-color-neutralLighterAlt;
-  display: block;
-}
-
-/* Info */
-.info {
-  position: relative;
-  display: block;
-  height: 100%;
-  line-height: 21px;
-  overflow: hidden;
-  word-wrap: break-word;
-}
-
-/* Title */
-$ChicletCard-title-lineHeight: 21px;
-.title {
-  padding: 8px 16px 0px;
-  @include ms-font-l;
-  color: $ms-color-neutralPrimary;
-  height: 42px; // Two lines of text, making sure the third line is hidden
-  line-height: $ChicletCard-title-lineHeight;
-  overflow: hidden;
-  word-wrap: break-word;
-  font-weight: 400;
-}
-
-/* Link */
-.link {
-  padding: 4px 16px 0px;
-  @include ms-font-l;
-  font-size: 8pt;
-  color: $ms-color-neutralPrimary;
-  line-height: 14px;
-  height: 14px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-/* Actions */
-$ms-ChicletCardActions-actionSize: 34px;
-$ms-ChicletCardActions-horizontalPadding: 12px;
-$ms-ChicletCardActions-verticalPadding: 2px;
-
-.actions {
-  height: $ms-ChicletCardActions-actionSize;
-  padding: $ms-ChicletCardActions-verticalPadding $ms-ChicletCardActions-horizontalPadding;
-  position: relative;
-}
-
-.action {
-  float: right;
-  @include ms-margin-left(4px);
-  cursor: pointer;
-
-  :global(.ms-Button) {
-    font-size: 16px;
-    height: $ms-ChicletCardActions-actionSize;
-    width: $ms-ChicletCardActions-actionSize;
-    color: #166EBE;
-  }
-
-  :global(.ms-Button:hover) {
-    :global(.ms-Button-icon) {
-      color: $buttonTextColor;
-      cursor: pointer;
-    }
-  }
-}
\ No newline at end of file
diff --git a/packages/experiments/src/components/Chiclet/XSmallChiclet.tsx b/packages/experiments/src/components/Chiclet/XSmallChiclet.tsx
deleted file mode 100644
index e69de29bb2d1d..0000000000000

From d3a9f0d654a24aa6ee64920bca8b99a8493af7cb Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Wed, 25 Apr 2018 13:38:28 -0700
Subject: [PATCH 18/67] use ChicletType for type safety

---
 .../experiments/src/components/Chiclet/Chiclet.tsx    | 11 +++++------
 .../src/components/Chiclet/Chiclet.types.ts           |  4 ++--
 .../Chiclet/examples/Chiclet.Basic.Example.tsx        |  2 +-
 3 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/packages/experiments/src/components/Chiclet/Chiclet.tsx b/packages/experiments/src/components/Chiclet/Chiclet.tsx
index 76f8b6d456b76..11a2e5ffd10a9 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.tsx
+++ b/packages/experiments/src/components/Chiclet/Chiclet.tsx
@@ -5,7 +5,7 @@ import {
 import {
   getClassNames
 } from './Chiclet.styles';
-import { IChicletProps, IChicletCardProps, IChicletStyles } from './Chiclet.types';
+import { IChicletProps, IChicletCardProps, IChicletStyles, ChicletType } from './Chiclet.types';
 import { mergeStyles } from '../../Styling';
 import { ChicletCard } from './ChicletCard';
 import { IButtonProps } from 'office-ui-fabric-react/lib/Button';
@@ -37,17 +37,16 @@ export class Chiclet extends React.Component<IChicletProps, IChicletCardProps> {
     }
 
     switch (size) {
-      case "xsmall":
+      case ChicletType.xsmall:
         return (
           <ChicletCard {...chicletCardProps} className={ mergeStyles(this._classNames.root) } onClick={ this._onClick } actions={ actionsToIButtonProps } />
         );
-      case "small":
+      case ChicletType.small:
         return (
           <ChicletCard {...chicletCardProps} className={ mergeStyles(this._classNames.root) } onClick={ this._onClick } actions={ actionsToIButtonProps } />
         );
-      case "medium":
-      case "large":
-      case "xlarge":
+      case ChicletType.medium:
+      case ChicletType.large:
         return (
           <ChicletCard {...chicletCardProps} className={ mergeStyles(this._classNames.root) } onClick={ this._onClick } actions={ actionsToIButtonProps } />
         );
diff --git a/packages/experiments/src/components/Chiclet/Chiclet.types.ts b/packages/experiments/src/components/Chiclet/Chiclet.types.ts
index 89fab814c7cdf..1fac45b662292 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.types.ts
+++ b/packages/experiments/src/components/Chiclet/Chiclet.types.ts
@@ -76,7 +76,7 @@ export interface IBaseChicletProps extends React.Props<BaseChiclet> {
   /**
    * Chiclet size to render
    */
-  size?: string;
+  size?: ChicletType;
 
   /**
    * Action icon buttons to render.
@@ -93,7 +93,7 @@ export interface IChicletProps extends React.Props<Chiclet> {
   /**
    * Chiclet size to render
    */
-  size?: string;
+  size?: ChicletType;
 
   /**
    * Action icon buttons to render.
diff --git a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
index 24fcbe2c71c62..ffe4076ce684f 100644
--- a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
+++ b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
@@ -10,7 +10,7 @@ export class ChicletBasicExample extends React.Component<any, any> {
 
   public render() {
     return (
-      <BaseChiclet url="http://localhost:4322" size="medium"
+      <BaseChiclet url="http://localhost:4322" size={ 2 }
         actions={ ["Breadcrumb", "Save", "Share"] }
       />
     );

From acbcbc24ea3dd9f84888daa773fe8ded68b151ec Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Wed, 25 Apr 2018 14:26:35 -0700
Subject: [PATCH 19/67] imageAlt

---
 .../experiments/src/components/Chiclet/Chiclet.types.ts     | 1 +
 packages/experiments/src/components/Chiclet/ChicletCard.tsx | 6 +++---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/experiments/src/components/Chiclet/Chiclet.types.ts b/packages/experiments/src/components/Chiclet/Chiclet.types.ts
index 1fac45b662292..2eca56d1ea770 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.types.ts
+++ b/packages/experiments/src/components/Chiclet/Chiclet.types.ts
@@ -154,6 +154,7 @@ export interface IChicletCardProps extends React.Props<ChicletCard> {
   imageWidth?: string;
   imageHeight?: string;
   imageType?: string;
+  imageAlt?: string;
   url?: string;
 }
 
diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.tsx b/packages/experiments/src/components/Chiclet/ChicletCard.tsx
index 1ac3687aa7194..4a2410e169efa 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.tsx
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.tsx
@@ -25,7 +25,7 @@ export class ChicletCard extends BaseComponent<IChicletCardProps, any> {
   private _classNames: IChicletStyles = {};
 
   public render() {
-    const { styles: customStyles, title, ogType, description, image, imageType, imageWidth, imageHeight, url, onClick, onClickHref, className, actions, theme } = this.props;
+    const { styles: customStyles, title, ogType, description, image, imageType, imageWidth, imageHeight, imageAlt, url, onClick, onClickHref, className, actions, theme } = this.props;
     const actionable = (onClick || onClickHref) ? true : false;
 
     this._classNames = getClassNames(theme!, customStyles);
@@ -76,14 +76,14 @@ export class ChicletCard extends BaseComponent<IChicletCardProps, any> {
     );
   }
 
-  private _renderPreviewImage(imageUrl?: string, imageHeight?: string, imageWidth?: string, ogType?: string): React.ReactElement<React.HTMLAttributes<HTMLDivElement>> {
+  private _renderPreviewImage(imageUrl?: string, imageHeight?: string, imageWidth?: string, ogType?: string, imageAlt?: string): React.ReactElement<React.HTMLAttributes<HTMLDivElement>> {
     const image = (
       <Image
         width={ imageWidth }
         height={ imageHeight }
         src={ TestImages.documentPreview }
         role='presentation'
-        alt=''
+        alt={ imageAlt ? imageAlt : "Preview image for the file" }
       />
     );
 

From 26cb7d0e36b0aaddeb4270db4407751eb04cc5b5 Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Wed, 25 Apr 2018 14:30:38 -0700
Subject: [PATCH 20/67] added imageAlt to getOpenGraphValues

---
 packages/experiments/src/components/Chiclet/BaseChiclet.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/experiments/src/components/Chiclet/BaseChiclet.tsx b/packages/experiments/src/components/Chiclet/BaseChiclet.tsx
index 9b3f1efcd8231..91e69e3390f15 100644
--- a/packages/experiments/src/components/Chiclet/BaseChiclet.tsx
+++ b/packages/experiments/src/components/Chiclet/BaseChiclet.tsx
@@ -15,7 +15,7 @@ export class BaseChiclet extends BaseComponent<IBaseChicletProps, any> {
     let chicletCardProps = this.extractMetaTags(url);
 
     return (
-      <Chiclet chicletCardProps={ chicletCardProps } size={ size ? size : "medium" } actions={ actions } />
+      <Chiclet chicletCardProps={ chicletCardProps } size={ size ? size : 2 } actions={ actions } />
     );
   }
 
@@ -59,6 +59,9 @@ export class BaseChiclet extends BaseComponent<IBaseChicletProps, any> {
           case "og:image:height":
             attributes.imageHeight = metaElements[i].content;
             break;
+          case "og:image:alt":
+            attributes.imageAlt = metaElements[i].content;
+            break;
           case "og:description":
             attributes.description = metaElements[i].content;
             break;

From bbacc493d11583d0ce6786f69cf0c74e091dfc0c Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Wed, 25 Apr 2018 14:42:24 -0700
Subject: [PATCH 21/67] change onKeyDown to only handle enter, as space is
 handled by onClick

---
 packages/experiments/src/components/Chiclet/ChicletCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.tsx b/packages/experiments/src/components/Chiclet/ChicletCard.tsx
index 4a2410e169efa..ac3b756b5fd44 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.tsx
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.tsx
@@ -127,7 +127,7 @@ export class ChicletCard extends BaseComponent<IChicletCardProps, any> {
   }
 
   private _onKeyDown = (ev: React.KeyboardEvent<HTMLElement>): void => {
-    if (ev.which === KeyCodes.enter || ev.which === KeyCodes.space) {
+    if (ev.which === KeyCodes.enter) {
       this._onAction(ev);
     }
   }

From 600e4c8310a896b2ad7b3c2b7eeb343246b298ad Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Thu, 26 Apr 2018 16:08:25 -0700
Subject: [PATCH 22/67] separated types file out and other small fixes

---
 .../src/components/Chiclet/BaseChiclet.tsx    |   3 +-
 .../components/Chiclet/BaseChiclet.types.ts   |  35 ++++++
 .../src/components/Chiclet/Chiclet.tsx        |  13 +--
 .../src/components/Chiclet/Chiclet.types.ts   |  83 +-------------
 .../src/components/Chiclet/ChicletCard.tsx    |   2 +-
 .../components/Chiclet/ChicletCard.types.ts   | 103 ++++++++++++++++++
 .../src/components/Chiclet/ChicletPage.tsx    |   4 +-
 7 files changed, 147 insertions(+), 96 deletions(-)
 create mode 100644 packages/experiments/src/components/Chiclet/BaseChiclet.types.ts
 create mode 100644 packages/experiments/src/components/Chiclet/ChicletCard.types.ts

diff --git a/packages/experiments/src/components/Chiclet/BaseChiclet.tsx b/packages/experiments/src/components/Chiclet/BaseChiclet.tsx
index 91e69e3390f15..b7a9d2fa40184 100644
--- a/packages/experiments/src/components/Chiclet/BaseChiclet.tsx
+++ b/packages/experiments/src/components/Chiclet/BaseChiclet.tsx
@@ -5,7 +5,8 @@ import {
 } from '../../Utilities';
 import { ChicletCard } from './ChicletCard';
 import { Chiclet } from './Chiclet';
-import { IBaseChicletProps, IChicletCardProps } from './Chiclet.types';
+import { IBaseChicletProps } from './Chiclet.types';
+import { IChicletCardProps } from './ChicletCard.types';
 import { IconButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
 
 export class BaseChiclet extends BaseComponent<IBaseChicletProps, any> {
diff --git a/packages/experiments/src/components/Chiclet/BaseChiclet.types.ts b/packages/experiments/src/components/Chiclet/BaseChiclet.types.ts
new file mode 100644
index 0000000000000..b06640910b98d
--- /dev/null
+++ b/packages/experiments/src/components/Chiclet/BaseChiclet.types.ts
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { BaseChiclet } from './BaseChiclet';
+import { ChicletType } from './Chiclet.types';
+
+export interface IBaseChiclet {
+
+}
+
+export interface IBaseChicletProps extends React.Props<BaseChiclet> {
+  /**
+   * Optional callback to access the IChiclet interface. Use this instead of ref for accessing
+   * the public methods and properties of the component.
+   */
+  componentRef?: (component: IBaseChiclet | null) => void;
+
+  /**
+   * Optional class for chiclet.
+   */
+  className?: string;
+
+  /**
+   * Sharing link
+   */
+  url: string;
+
+  /**
+   * Chiclet size to render
+   */
+  size?: ChicletType;
+
+  /**
+   * Action icon buttons to render.
+   */
+  actions?: string[];
+}
\ No newline at end of file
diff --git a/packages/experiments/src/components/Chiclet/Chiclet.tsx b/packages/experiments/src/components/Chiclet/Chiclet.tsx
index 11a2e5ffd10a9..e1550f0c2c003 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.tsx
+++ b/packages/experiments/src/components/Chiclet/Chiclet.tsx
@@ -5,7 +5,8 @@ import {
 import {
   getClassNames
 } from './Chiclet.styles';
-import { IChicletProps, IChicletCardProps, IChicletStyles, ChicletType } from './Chiclet.types';
+import { IChicletProps, IChicletStyles, ChicletType } from './Chiclet.types';
+import { IChicletCardProps } from './ChicletCard.types';
 import { mergeStyles } from '../../Styling';
 import { ChicletCard } from './ChicletCard';
 import { IButtonProps } from 'office-ui-fabric-react/lib/Button';
@@ -37,19 +38,11 @@ export class Chiclet extends React.Component<IChicletProps, IChicletCardProps> {
     }
 
     switch (size) {
-      case ChicletType.xsmall:
-        return (
-          <ChicletCard {...chicletCardProps} className={ mergeStyles(this._classNames.root) } onClick={ this._onClick } actions={ actionsToIButtonProps } />
-        );
-      case ChicletType.small:
-        return (
-          <ChicletCard {...chicletCardProps} className={ mergeStyles(this._classNames.root) } onClick={ this._onClick } actions={ actionsToIButtonProps } />
-        );
       case ChicletType.medium:
-      case ChicletType.large:
         return (
           <ChicletCard {...chicletCardProps} className={ mergeStyles(this._classNames.root) } onClick={ this._onClick } actions={ actionsToIButtonProps } />
         );
+      // @todo: handle other types of chiclets
       default:
         return (
           <ChicletCard {...chicletCardProps} className={ mergeStyles(this._classNames.root) } onClick={ this._onClick } actions={ actionsToIButtonProps } />
diff --git a/packages/experiments/src/components/Chiclet/Chiclet.types.ts b/packages/experiments/src/components/Chiclet/Chiclet.types.ts
index 2eca56d1ea770..905ef4805dd84 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.types.ts
+++ b/packages/experiments/src/components/Chiclet/Chiclet.types.ts
@@ -1,10 +1,7 @@
 import * as React from 'react';
-import { BaseChiclet } from './BaseChiclet';
-import { ChicletCard } from './ChicletCard';
 import { Chiclet } from './Chiclet';
+import { IChicletCardProps } from './ChicletCard.types';
 import { IStyle, ITheme } from '../../Styling';
-import { IButtonProps } from 'office-ui-fabric-react/lib/Button';
-import { IStyleFunction } from '../../Utilities';
 
 export interface IChiclet {
 
@@ -56,34 +53,6 @@ export interface IChicletStyleProps {
 
 }
 
-export interface IBaseChicletProps extends React.Props<BaseChiclet> {
-  /**
-   * Optional callback to access the IChiclet interface. Use this instead of ref for accessing
-   * the public methods and properties of the component.
-   */
-  componentRef?: (component: IChiclet | null) => void;
-
-  /**
-   * Optional class for chiclet.
-   */
-  className?: string;
-
-  /**
-   * Sharing link
-   */
-  url: string;
-
-  /**
-   * Chiclet size to render
-   */
-  size?: ChicletType;
-
-  /**
-   * Action icon buttons to render.
-   */
-  actions?: string[];
-}
-
 export interface IChicletProps extends React.Props<Chiclet> {
   /**
    * Props to render in the chosen ChicletCard
@@ -108,56 +77,6 @@ export interface IChicletProps extends React.Props<Chiclet> {
   theme?: ITheme;
 }
 
-export interface IChicletCardProps extends React.Props<ChicletCard> {
-  /**
-   * Optional callback to access the IChiclet interface. Use this instead of ref for accessing
-   * the public methods and properties of the component.
-   */
-  componentRef?: (component: IChiclet | null) => void;
-
-  /**
-   * Optional class for ChicletCard.
-   */
-  className?: string;
-
-  /**
-   * Function to call when the card is clicked or keyboard Enter/Space is pushed.
-   */
-  onClick?: (ev?: React.SyntheticEvent<HTMLElement>) => void;
-
-  /**
-   * A URL to navigate to when the card is clicked. If a function has also been provided,
-   * it will be used instead of the URL.
-   */
-  onClickHref?: string;
-
-  /**
-   * Action icon buttons to render.
-   */
-  actions?: IButtonProps[] | undefined;
-
-  /**
-   * Styling for the ChicletCard.
-   */
-  styles?: IChicletStyles;
-
-  theme?: ITheme;
-
-  /**
-   * OpenGraph props.
-   */
-  title?: string;
-  ogType?: string;
-  description?: string;
-  image?: string;
-  imageSecureUrl?: string;
-  imageWidth?: string;
-  imageHeight?: string;
-  imageType?: string;
-  imageAlt?: string;
-  url?: string;
-}
-
 export enum ChicletType {
   /**
    * X-Small Chiclet
diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.tsx b/packages/experiments/src/components/Chiclet/ChicletCard.tsx
index ac3b756b5fd44..52f5373af3e9b 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.tsx
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.tsx
@@ -6,10 +6,10 @@ import {
   classNamesFunction
 } from '../../Utilities';
 import {
-  IChicletCardProps,
   IChicletStyles,
   IChicletStyleProps
 } from './Chiclet.types';
+import { IChicletCardProps } from './ChicletCard.types';
 import { mergeStyles } from '../../Styling';
 import {
   getClassNames
diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.types.ts b/packages/experiments/src/components/Chiclet/ChicletCard.types.ts
new file mode 100644
index 0000000000000..b3a7acb88be4f
--- /dev/null
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.types.ts
@@ -0,0 +1,103 @@
+import * as React from 'react';
+import { ChicletCard } from './ChicletCard';
+import { ITheme, IStyle } from '../../Styling';
+import { IButtonProps } from 'office-ui-fabric-react/lib/Button';
+
+export interface IChicletCard {
+
+}
+
+export interface IChicletCardStyles {
+  /**
+   * Style for the root element.
+   */
+  root?: IStyle;
+
+  /**
+   * Style for the icon that overlays the file preview image.
+   */
+  icon?: IStyle;
+
+  /**
+   * Style for the file preview image.
+   */
+  preview?: IStyle;
+
+  /**
+   * Style for preview information about the file, such as title and link.
+   */
+  info?: IStyle;
+
+  /**
+   * Style for the title of the file.
+   */
+  title?: IStyle;
+
+  /**
+   * Style for the link to the file.
+   */
+  link?: IStyle;
+
+  /**
+   * Style for the collective actions in the lower right of the component.
+   */
+  actions?: IStyle;
+
+  /**
+   * Style for the individual actions in the lower right of the component.
+   */
+  action?: IStyle;
+}
+
+export interface IChicletCardProps extends React.Props<ChicletCard> {
+  /**
+   * Optional callback to access the IChiclet interface. Use this instead of ref for accessing
+   * the public methods and properties of the component.
+   */
+  componentRef?: (component: IChicletCard | null) => void;
+
+  /**
+   * Optional class for ChicletCard.
+   */
+  className?: string;
+
+  /**
+   * Function to call when the card is clicked or keyboard Enter/Space is pushed.
+   */
+  onClick?: (ev?: React.SyntheticEvent<HTMLElement>) => void;
+
+  /**
+   * A URL to navigate to when the card is clicked. If a function has also been provided,
+   * it will be used instead of the URL.
+   */
+  onClickHref?: string;
+
+  /**
+   * Action icon buttons to render.
+   */
+  actions?: IButtonProps[] | undefined;
+
+  /**
+   * Styling for the ChicletCard.
+   */
+  styles?: IChicletCardStyles;
+
+  /**
+   * Theme for the component.
+   */
+  theme?: ITheme;
+
+  /**
+   * OpenGraph props.
+   */
+  title?: string;
+  ogType?: string;
+  description?: string;
+  image?: string;
+  imageSecureUrl?: string;
+  imageWidth?: string;
+  imageHeight?: string;
+  imageType?: string;
+  imageAlt?: string;
+  url?: string;
+}
\ No newline at end of file
diff --git a/packages/experiments/src/components/Chiclet/ChicletPage.tsx b/packages/experiments/src/components/Chiclet/ChicletPage.tsx
index e7d0001b7d02c..2217c4ab1ab42 100644
--- a/packages/experiments/src/components/Chiclet/ChicletPage.tsx
+++ b/packages/experiments/src/components/Chiclet/ChicletPage.tsx
@@ -33,14 +33,14 @@ export class ChicletPage extends React.Component<IComponentDemoPageProps, {}> {
         dos={
           <div>
             <ul>
-              <li>Use them to represent a large collection of items visually.</li>
+              <li>Use them to represent an item in a card with relevant metadata.</li>
             </ul>
           </div>
         }
         donts={
           <div>
             <ul>
-              <li>Use them for general layout of components that are not part of the same set.</li>
+              <li></li>
             </ul>
           </div>
         }

From 7742c47fd542c3c02cd3110cd23ceb43fe5fcbc5 Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Thu, 26 Apr 2018 16:23:26 -0700
Subject: [PATCH 23/67] styling cleanup (IChicletCardStyles)

---
 .../src/components/Chiclet/BaseChiclet.tsx    |  7 +--
 .../src/components/Chiclet/Chiclet.styles.ts  | 10 ++--
 .../src/components/Chiclet/Chiclet.tsx        | 18 ++-----
 .../src/components/Chiclet/Chiclet.types.ts   | 54 -------------------
 .../src/components/Chiclet/ChicletCard.tsx    | 14 ++---
 5 files changed, 15 insertions(+), 88 deletions(-)

diff --git a/packages/experiments/src/components/Chiclet/BaseChiclet.tsx b/packages/experiments/src/components/Chiclet/BaseChiclet.tsx
index b7a9d2fa40184..6188fc02b641c 100644
--- a/packages/experiments/src/components/Chiclet/BaseChiclet.tsx
+++ b/packages/experiments/src/components/Chiclet/BaseChiclet.tsx
@@ -1,13 +1,10 @@
 import * as React from 'react';
 import {
-  BaseComponent,
-  css
+  BaseComponent
 } from '../../Utilities';
-import { ChicletCard } from './ChicletCard';
 import { Chiclet } from './Chiclet';
-import { IBaseChicletProps } from './Chiclet.types';
+import { IBaseChicletProps } from './BaseChiclet.types';
 import { IChicletCardProps } from './ChicletCard.types';
-import { IconButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
 
 export class BaseChiclet extends BaseComponent<IBaseChicletProps, any> {
   public render() {
diff --git a/packages/experiments/src/components/Chiclet/Chiclet.styles.ts b/packages/experiments/src/components/Chiclet/Chiclet.styles.ts
index ca890bd2ee51b..0570779f42da4 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.styles.ts
+++ b/packages/experiments/src/components/Chiclet/Chiclet.styles.ts
@@ -1,12 +1,10 @@
 import { memoizeFunction } from '../../Utilities';
 import {
-  mergeStyleSets,
-  IStyle,
   ITheme,
   concatStyleSets,
   getTheme
 } from '../../Styling';
-import { IChicletStyles } from './Chiclet.types';
+import { IChicletCardStyles } from './ChicletCard.types';
 
 const ChicletCardTitleLineHeight = '21px';
 
@@ -17,9 +15,9 @@ const msChicletCardActionsVerticalPadding = '2px';
 
 export const getClassNames = memoizeFunction((
   theme: ITheme = getTheme(),
-  customStyles?: IChicletStyles
-): IChicletStyles => {
-  const styles: IChicletStyles = {
+  customStyles?: IChicletCardStyles
+): IChicletCardStyles => {
+  const styles: IChicletCardStyles = {
     root: {
       WebkitFontSmoothing: 'antialiased',
       backgroundColor: 'white',
diff --git a/packages/experiments/src/components/Chiclet/Chiclet.tsx b/packages/experiments/src/components/Chiclet/Chiclet.tsx
index e1550f0c2c003..d2f5ee880cb21 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.tsx
+++ b/packages/experiments/src/components/Chiclet/Chiclet.tsx
@@ -1,22 +1,12 @@
 import * as React from 'react';
-import {
-  css
-} from '../../Utilities';
-import {
-  getClassNames
-} from './Chiclet.styles';
-import { IChicletProps, IChicletStyles, ChicletType } from './Chiclet.types';
+import { IChicletProps, ChicletType } from './Chiclet.types';
 import { IChicletCardProps } from './ChicletCard.types';
-import { mergeStyles } from '../../Styling';
 import { ChicletCard } from './ChicletCard';
 import { IButtonProps } from 'office-ui-fabric-react/lib/Button';
 
 export class Chiclet extends React.Component<IChicletProps, IChicletCardProps> {
-  private _classNames: IChicletStyles = {};
-
   public render() {
-    const { styles: customStyles, chicletCardProps, size, actions, theme } = this.props;
-    this._classNames = getClassNames(theme!, customStyles);
+    const { chicletCardProps, size, actions } = this.props;
 
     var actionsToIButtonProps: IButtonProps[] = [];
     if (actions != null) {
@@ -40,12 +30,12 @@ export class Chiclet extends React.Component<IChicletProps, IChicletCardProps> {
     switch (size) {
       case ChicletType.medium:
         return (
-          <ChicletCard {...chicletCardProps} className={ mergeStyles(this._classNames.root) } onClick={ this._onClick } actions={ actionsToIButtonProps } />
+          <ChicletCard {...chicletCardProps} onClick={ this._onClick } actions={ actionsToIButtonProps } />
         );
       // @todo: handle other types of chiclets
       default:
         return (
-          <ChicletCard {...chicletCardProps} className={ mergeStyles(this._classNames.root) } onClick={ this._onClick } actions={ actionsToIButtonProps } />
+          <ChicletCard {...chicletCardProps} onClick={ this._onClick } actions={ actionsToIButtonProps } />
         );
     }
   }
diff --git a/packages/experiments/src/components/Chiclet/Chiclet.types.ts b/packages/experiments/src/components/Chiclet/Chiclet.types.ts
index 905ef4805dd84..85b0e4f44d416 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.types.ts
+++ b/packages/experiments/src/components/Chiclet/Chiclet.types.ts
@@ -1,58 +1,11 @@
 import * as React from 'react';
 import { Chiclet } from './Chiclet';
 import { IChicletCardProps } from './ChicletCard.types';
-import { IStyle, ITheme } from '../../Styling';
 
 export interface IChiclet {
 
 }
 
-export interface IChicletStyles {
-  /**
-   * Style for the root element.
-   */
-  root?: IStyle;
-
-  /**
-   * Style for the icon that overlays the file preview image.
-   */
-  icon?: IStyle;
-
-  /**
-   * Style for the file preview image.
-   */
-  preview?: IStyle;
-
-  /**
-   * Style for preview information about the file, such as title and link.
-   */
-  info?: IStyle;
-
-  /**
-   * Style for the title of the file.
-   */
-  title?: IStyle;
-
-  /**
-   * Style for the link to the file.
-   */
-  link?: IStyle;
-
-  /**
-   * Style for the collective actions in the lower right of the component.
-   */
-  actions?: IStyle;
-
-  /**
-   * Style for the individual actions in the lower right of the component.
-   */
-  action?: IStyle;
-}
-
-export interface IChicletStyleProps {
-
-}
-
 export interface IChicletProps extends React.Props<Chiclet> {
   /**
    * Props to render in the chosen ChicletCard
@@ -68,13 +21,6 @@ export interface IChicletProps extends React.Props<Chiclet> {
    * Action icon buttons to render.
    */
   actions?: string[];
-
-  /**
-   * Styling for the Chiclet.
-   */
-  styles?: IChicletStyles;
-
-  theme?: ITheme;
 }
 
 export enum ChicletType {
diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.tsx b/packages/experiments/src/components/Chiclet/ChicletCard.tsx
index 52f5373af3e9b..a3e9c61b577ea 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.tsx
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.tsx
@@ -2,13 +2,11 @@ import * as React from 'react';
 import {
   BaseComponent,
   KeyCodes,
-  css,
-  classNamesFunction
+  css
 } from '../../Utilities';
 import {
-  IChicletStyles,
-  IChicletStyleProps
-} from './Chiclet.types';
+  IChicletCardStyles
+} from './ChicletCard.types';
 import { IChicletCardProps } from './ChicletCard.types';
 import { mergeStyles } from '../../Styling';
 import {
@@ -18,11 +16,9 @@ import { Icon } from 'office-ui-fabric-react/lib/Icon';
 import { IconButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
 import { Image } from 'office-ui-fabric-react/lib/Image';
 import { TestImages } from 'office-ui-fabric-react/src/common/TestImages';
-import { FocusZone } from 'office-ui-fabric-react/lib/FocusZone';
-import { ChicletTestImages } from '../../common/TestImages';
 
 export class ChicletCard extends BaseComponent<IChicletCardProps, any> {
-  private _classNames: IChicletStyles = {};
+  private _classNames: IChicletCardStyles = {};
 
   public render() {
     const { styles: customStyles, title, ogType, description, image, imageType, imageWidth, imageHeight, imageAlt, url, onClick, onClickHref, className, actions, theme } = this.props;
@@ -43,7 +39,7 @@ export class ChicletCard extends BaseComponent<IChicletCardProps, any> {
         onKeyDown={ actionable ? this._onKeyDown : undefined }
         onClick={ actionable ? this._onClick : undefined }
         className={
-          css('ms-ChicletCard', className) }
+          css('ms-ChicletCard', className, mergeStyles(this._classNames.root)) }
       >
         <div
           className={ mergeStyles(this._classNames.preview) }

From 2f3ca5b9ba9e40462ad559acc2dd215a08a921bd Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Fri, 27 Apr 2018 09:54:25 -0700
Subject: [PATCH 24/67] remove Chiclet from fabric site, only needs to be in
 experiments

---
 apps/fabric-website/src/components/App/AppState.tsx | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/apps/fabric-website/src/components/App/AppState.tsx b/apps/fabric-website/src/components/App/AppState.tsx
index 6ca7bf6d5e553..e27d0c9e6c9bc 100644
--- a/apps/fabric-website/src/components/App/AppState.tsx
+++ b/apps/fabric-website/src/components/App/AppState.tsx
@@ -159,12 +159,6 @@ export const AppState: IAppState = {
           component: () => <LoadingComponent title='Coachmark' />,
           getComponent: cb => require.ensure([], (require) => cb(require<any>('../../pages/Components/CoachmarkComponentPage').CoachmarkComponentPage))
         },
-        {
-          title: 'Chiclet',
-          url: '#/components/chiclet',
-          component: () => <LoadingComponent title='Chiclet' />,
-          getComponent: cb => require.ensure([], (require) => cb(require<any>('../../pages/Components/ChicletComponentPage').ChicletComponentPage))
-        },
         {
           title: 'ChoiceGroup',
           url: '#/components/choicegroup',

From 4e448527c9b2d6290aa3e05eadc5276157bbd1af Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Fri, 27 Apr 2018 09:55:13 -0700
Subject: [PATCH 25/67] get rid of unnecessary dependencies

---
 package.json | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/package.json b/package.json
index e1920ad1ac022..17e858076748b 100644
--- a/package.json
+++ b/package.json
@@ -29,11 +29,5 @@
   "license": "MIT",
   "devDependencies": {
     "@microsoft/rush": "4.3.0"
-  },
-  "dependencies": {
-    "@types/cheerio": "^0.22.7",
-    "@types/htmlparser2": "^3.7.31",
-    "htmlparser": "^1.7.7",
-    "htmlparser2": "^3.9.2"
   }
-}
+}
\ No newline at end of file

From 64af2e72d32730635ae7378ef463a3dfd7729c20 Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Fri, 27 Apr 2018 09:58:15 -0700
Subject: [PATCH 26/67] do not need ChicletComponentPage on main site

---
 .../pages/Components/ChicletComponentPage.tsx | 38 -------------------
 1 file changed, 38 deletions(-)
 delete mode 100644 apps/fabric-website/src/pages/Components/ChicletComponentPage.tsx

diff --git a/apps/fabric-website/src/pages/Components/ChicletComponentPage.tsx b/apps/fabric-website/src/pages/Components/ChicletComponentPage.tsx
deleted file mode 100644
index 45d6c8c03cba4..0000000000000
--- a/apps/fabric-website/src/pages/Components/ChicletComponentPage.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import * as React from 'react';
-import { ChicletPage } from 'office-ui-fabric-react/lib/components/Chiclet/ChicletPage';
-import { PageHeader } from '../../components/PageHeader/PageHeader';
-import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
-const pageStyles: any = require('../PageStyles.module.scss');
-
-export class ChicletComponentPage extends React.Component<any, any> {
-  public render() {
-    return (
-      <div ref='pageElement' className={ pageStyles.basePage }>
-        <ComponentPage>
-          <PageHeader pageTitle='Chiclet' backgroundColor='#038387'
-            links={
-              [
-                {
-                  'text': 'Overview',
-                  'location': 'Overview'
-                },
-                {
-                  'text': 'Best Practices',
-                  'location': 'BestPractices'
-                },
-                {
-                  'text': 'Variants',
-                  'location': 'Variants'
-                },
-                {
-                  'text': 'Implementation',
-                  'location': 'Implementation'
-                }
-              ]
-            } />
-          <ChicletPage isHeaderVisible={ false } />
-        </ComponentPage>
-      </div>
-    );
-  }
-}

From 5b4d21d8d2d144815aab437fa756277fdcc141aa Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Fri, 27 Apr 2018 11:42:27 -0700
Subject: [PATCH 27/67] more cleanup with onClick and ChicletSize

---
 .../components/Chiclet/BaseChiclet.types.ts   |  4 ++--
 .../src/components/Chiclet/Chiclet.tsx        |  6 ++---
 .../src/components/Chiclet/Chiclet.types.ts   |  4 ++--
 .../src/components/Chiclet/ChicletCard.tsx    | 24 ++++---------------
 .../components/Chiclet/ChicletCard.types.ts   |  8 +------
 .../src/components/Chiclet/ChicletPage.tsx    |  2 +-
 .../examples/Chiclet.Basic.Example.tsx        |  3 ++-
 7 files changed, 15 insertions(+), 36 deletions(-)

diff --git a/packages/experiments/src/components/Chiclet/BaseChiclet.types.ts b/packages/experiments/src/components/Chiclet/BaseChiclet.types.ts
index b06640910b98d..4e4167bd53343 100644
--- a/packages/experiments/src/components/Chiclet/BaseChiclet.types.ts
+++ b/packages/experiments/src/components/Chiclet/BaseChiclet.types.ts
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BaseChiclet } from './BaseChiclet';
-import { ChicletType } from './Chiclet.types';
+import { ChicletSize } from './Chiclet.types';
 
 export interface IBaseChiclet {
 
@@ -26,7 +26,7 @@ export interface IBaseChicletProps extends React.Props<BaseChiclet> {
   /**
    * Chiclet size to render
    */
-  size?: ChicletType;
+  size?: ChicletSize;
 
   /**
    * Action icon buttons to render.
diff --git a/packages/experiments/src/components/Chiclet/Chiclet.tsx b/packages/experiments/src/components/Chiclet/Chiclet.tsx
index d2f5ee880cb21..f05c61233fdd2 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.tsx
+++ b/packages/experiments/src/components/Chiclet/Chiclet.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { IChicletProps, ChicletType } from './Chiclet.types';
+import { IChicletProps, ChicletSize } from './Chiclet.types';
 import { IChicletCardProps } from './ChicletCard.types';
 import { ChicletCard } from './ChicletCard';
 import { IButtonProps } from 'office-ui-fabric-react/lib/Button';
@@ -28,7 +28,7 @@ export class Chiclet extends React.Component<IChicletProps, IChicletCardProps> {
     }
 
     switch (size) {
-      case ChicletType.medium:
+      case ChicletSize.medium:
         return (
           <ChicletCard {...chicletCardProps} onClick={ this._onClick } actions={ actionsToIButtonProps } />
         );
@@ -40,7 +40,7 @@ export class Chiclet extends React.Component<IChicletProps, IChicletCardProps> {
     }
   }
 
-  private _onClick(): void {
+  private _onClick(): void { // @todo: default click handler
     console.log("You clicked the Chiclet");
   }
 }
\ No newline at end of file
diff --git a/packages/experiments/src/components/Chiclet/Chiclet.types.ts b/packages/experiments/src/components/Chiclet/Chiclet.types.ts
index 85b0e4f44d416..a3dc881c291e3 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.types.ts
+++ b/packages/experiments/src/components/Chiclet/Chiclet.types.ts
@@ -15,7 +15,7 @@ export interface IChicletProps extends React.Props<Chiclet> {
   /**
    * Chiclet size to render
    */
-  size?: ChicletType;
+  size?: ChicletSize;
 
   /**
    * Action icon buttons to render.
@@ -23,7 +23,7 @@ export interface IChicletProps extends React.Props<Chiclet> {
   actions?: string[];
 }
 
-export enum ChicletType {
+export enum ChicletSize {
   /**
    * X-Small Chiclet
    */
diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.tsx b/packages/experiments/src/components/Chiclet/ChicletCard.tsx
index a3e9c61b577ea..ca4e67f4ef732 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.tsx
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.tsx
@@ -21,8 +21,8 @@ export class ChicletCard extends BaseComponent<IChicletCardProps, any> {
   private _classNames: IChicletCardStyles = {};
 
   public render() {
-    const { styles: customStyles, title, ogType, description, image, imageType, imageWidth, imageHeight, imageAlt, url, onClick, onClickHref, className, actions, theme } = this.props;
-    const actionable = (onClick || onClickHref) ? true : false;
+    const { styles: customStyles, title, ogType, description, image, imageType, imageWidth, imageHeight, imageAlt, url, onClick, className, actions, theme } = this.props;
+    const actionable = (onClick) ? true : false;
 
     this._classNames = getClassNames(theme!, customStyles);
 
@@ -79,7 +79,7 @@ export class ChicletCard extends BaseComponent<IChicletCardProps, any> {
         height={ imageHeight }
         src={ TestImages.documentPreview }
         role='presentation'
-        alt={ imageAlt ? imageAlt : "Preview image for the file" }
+        alt={ imageAlt ? imageAlt : undefined }
       />
     );
 
@@ -119,25 +119,9 @@ export class ChicletCard extends BaseComponent<IChicletCardProps, any> {
   }
 
   private _onClick = (ev: React.MouseEvent<HTMLElement>): void => {
-    this._onAction(ev);
-  }
-
-  private _onKeyDown = (ev: React.KeyboardEvent<HTMLElement>): void => {
-    if (ev.which === KeyCodes.enter) {
-      this._onAction(ev);
-    }
-  }
-
-  private _onAction = (ev: React.SyntheticEvent<HTMLElement>): void => {
-    const { onClick, onClickHref } = this.props;
-
+    const { onClick } = this.props;
     if (onClick) {
       onClick(ev);
-    } else if (!onClick && onClickHref) {
-      // If no onClick Function was provided and we do have an onClickHref, redirect to the onClickHref
-      window.location.href = onClickHref;
-      ev.preventDefault();
-      ev.stopPropagation();
     }
   }
 
diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.types.ts b/packages/experiments/src/components/Chiclet/ChicletCard.types.ts
index b3a7acb88be4f..5ce1830179299 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.types.ts
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.types.ts
@@ -64,13 +64,7 @@ export interface IChicletCardProps extends React.Props<ChicletCard> {
   /**
    * Function to call when the card is clicked or keyboard Enter/Space is pushed.
    */
-  onClick?: (ev?: React.SyntheticEvent<HTMLElement>) => void;
-
-  /**
-   * A URL to navigate to when the card is clicked. If a function has also been provided,
-   * it will be used instead of the URL.
-   */
-  onClickHref?: string;
+  onClick?: (ev?: React.MouseEvent<HTMLElement>) => void;
 
   /**
    * Action icon buttons to render.
diff --git a/packages/experiments/src/components/Chiclet/ChicletPage.tsx b/packages/experiments/src/components/Chiclet/ChicletPage.tsx
index 2217c4ab1ab42..782e0a3019786 100644
--- a/packages/experiments/src/components/Chiclet/ChicletPage.tsx
+++ b/packages/experiments/src/components/Chiclet/ChicletPage.tsx
@@ -37,7 +37,7 @@ export class ChicletPage extends React.Component<IComponentDemoPageProps, {}> {
             </ul>
           </div>
         }
-        donts={
+        donts={ // @todo: fill in description
           <div>
             <ul>
               <li></li>
diff --git a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
index ffe4076ce684f..85853722dc5d4 100644
--- a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
+++ b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import {
   BaseChiclet
 } from '../BaseChiclet';
+import { ChicletSize } from '../Chiclet.types';
 
 export class ChicletBasicExample extends React.Component<any, any> {
   constructor(props: {}) {
@@ -10,7 +11,7 @@ export class ChicletBasicExample extends React.Component<any, any> {
 
   public render() {
     return (
-      <BaseChiclet url="http://localhost:4322" size={ 2 }
+      <BaseChiclet url="http://localhost:4322" size={ ChicletSize.medium }
         actions={ ["Breadcrumb", "Save", "Share"] }
       />
     );

From 4e878784fed14ea10e05187cbecad2cd143ab58f Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Fri, 27 Apr 2018 15:25:43 -0700
Subject: [PATCH 28/67] separate out opengraph functions

---
 .../src/components/Chiclet/BaseChiclet.tsx    |  72 +++--------
 .../src/components/Chiclet/OpenGraph.ts       | 112 ++++++++++++++++++
 .../src/components/Chiclet/index.ts           |   3 +-
 3 files changed, 129 insertions(+), 58 deletions(-)
 create mode 100644 packages/experiments/src/components/Chiclet/OpenGraph.ts

diff --git a/packages/experiments/src/components/Chiclet/BaseChiclet.tsx b/packages/experiments/src/components/Chiclet/BaseChiclet.tsx
index 6188fc02b641c..54161ce8fdc40 100644
--- a/packages/experiments/src/components/Chiclet/BaseChiclet.tsx
+++ b/packages/experiments/src/components/Chiclet/BaseChiclet.tsx
@@ -3,72 +3,30 @@ import {
   BaseComponent
 } from '../../Utilities';
 import { Chiclet } from './Chiclet';
+import { ChicletSize } from './Chiclet.types';
+import { OpenGraphUtilities } from './OpenGraph';
 import { IBaseChicletProps } from './BaseChiclet.types';
-import { IChicletCardProps } from './ChicletCard.types';
 
 export class BaseChiclet extends BaseComponent<IBaseChicletProps, any> {
-  public render() {
-    const { url, size, actions } = this.props;
-
-    let chicletCardProps = this.extractMetaTags(url);
+  constructor(props: IBaseChicletProps) {
+    super(props);
 
-    return (
-      <Chiclet chicletCardProps={ chicletCardProps } size={ size ? size : 2 } actions={ actions } />
-    );
+    let chicletCardProps = OpenGraphUtilities.extractMetaTags(this.props.url);
+    this.state = { chicletCardProps: chicletCardProps };
   }
 
-  public extractMetaTags(url: string) {
-    var attributes: IChicletCardProps = {};
-
-    var xmlHttp = new XMLHttpRequest();
-    xmlHttp.open("GET", url, false);
-    xmlHttp.overrideMimeType('text/xml');
-    xmlHttp.send(null);
-
-    var metaElements = document.getElementsByTagName("meta");
-    let openGraphObject = this._getOpenGraphValues(metaElements, attributes);
+  public render() {
+    const { size, actions } = this.props;
+    const { chicletCardProps } = this.state;
 
-    return openGraphObject;
+    return (
+      <Chiclet chicletCardProps={ chicletCardProps } size={ size ? size : ChicletSize.medium } actions={ actions } />
+    );
   }
 
-  public _getOpenGraphValues(metaElements: NodeListOf<HTMLMetaElement>, attributes: IChicletCardProps): IChicletCardProps {
-    for (var i = 0; i < metaElements.length; i++) {
-      if (metaElements[i].attributes != null && metaElements[i].attributes.length >= 2) {
-        switch (metaElements[i].attributes[0].nodeValue) {
-          case "og:title":
-            attributes.title = metaElements[i].content;
-            break;
-          case "og:type":
-            attributes.ogType = metaElements[i].content;
-            break;
-          case "og:image":
-          case "og:image:url":
-            attributes.image = metaElements[i].content;
-            break;
-          case "og:image:secure_url":
-            attributes.imageSecureUrl = metaElements[i].content;
-            break;
-          case "og:image:type":
-            attributes.imageType = metaElements[i].content;
-            break;
-          case "og:image:width":
-            attributes.imageWidth = metaElements[i].content;
-            break;
-          case "og:image:height":
-            attributes.imageHeight = metaElements[i].content;
-            break;
-          case "og:image:alt":
-            attributes.imageAlt = metaElements[i].content;
-            break;
-          case "og:description":
-            attributes.description = metaElements[i].content;
-            break;
-          case "og:url":
-            attributes.url = metaElements[i].content;
-            break;
-        }
-      }
+  public componentWillReceiveProps(nextProps: any) {
+    if (this.props.url != nextProps.url) {
+      this.setState({ chicletCardProps: OpenGraphUtilities.extractMetaTags(this.props.url) });
     }
-    return attributes;
   }
 }
diff --git a/packages/experiments/src/components/Chiclet/OpenGraph.ts b/packages/experiments/src/components/Chiclet/OpenGraph.ts
new file mode 100644
index 0000000000000..623f1796abb79
--- /dev/null
+++ b/packages/experiments/src/components/Chiclet/OpenGraph.ts
@@ -0,0 +1,112 @@
+import { IChicletCardProps } from './ChicletCard.types';
+
+export class OpenGraphUtilities {
+  public static extractMetaTags(url: string) {
+    var attributes: IChicletCardProps = {};
+
+    var xmlHttp = new XMLHttpRequest();
+    xmlHttp.open("GET", url, false);
+    xmlHttp.overrideMimeType('text/xml');
+    xmlHttp.send(null);
+
+    var metaElements = document.getElementsByTagName("meta");
+    let openGraphObject = this._getOpenGraphValues(metaElements, attributes);
+
+    return openGraphObject;
+  }
+
+  public static _getOpenGraphValues(metaElements: NodeListOf<HTMLMetaElement>, attributes: IChicletCardProps): IChicletCardProps {
+    for (var i = 0; i < metaElements.length; i++) {
+      if (metaElements[i].attributes != null && metaElements[i].attributes.length >= 2) {
+        switch (metaElements[i].attributes[0].nodeValue) {
+          case "og:title":
+            attributes.title = metaElements[i].content;
+            break;
+          case "og:type":
+            attributes.ogType = metaElements[i].content;
+            break;
+          case "og:image":
+          case "og:image:url":
+            attributes.image = metaElements[i].content;
+            break;
+          case "og:image:secure_url":
+            attributes.imageSecureUrl = metaElements[i].content;
+            break;
+          case "og:image:type":
+            attributes.imageType = metaElements[i].content;
+            break;
+          case "og:image:width":
+            attributes.imageWidth = metaElements[i].content;
+            break;
+          case "og:image:height":
+            attributes.imageHeight = metaElements[i].content;
+            break;
+          case "og:image:alt":
+            attributes.imageAlt = metaElements[i].content;
+            break;
+          case "og:description":
+            attributes.description = metaElements[i].content;
+            break;
+          case "og:url":
+            attributes.url = metaElements[i].content;
+            break;
+        }
+      }
+    }
+    return attributes;
+  }
+}
+// export function extractMetaTags(url: string) {
+//   var attributes: IChicletCardProps = {};
+
+//   var xmlHttp = new XMLHttpRequest();
+//   xmlHttp.open("GET", url, false);
+//   xmlHttp.overrideMimeType('text/xml');
+//   xmlHttp.send(null);
+
+//   var metaElements = document.getElementsByTagName("meta");
+//   let openGraphObject = _getOpenGraphValues(metaElements, attributes);
+
+//   return openGraphObject;
+// }
+
+// export function _getOpenGraphValues(metaElements: NodeListOf<HTMLMetaElement>, attributes: IChicletCardProps): IChicletCardProps {
+//   for (var i = 0; i < metaElements.length; i++) {
+//     if (metaElements[i].attributes != null && metaElements[i].attributes.length >= 2) {
+//       switch (metaElements[i].attributes[0].nodeValue) {
+//         case "og:title":
+//           attributes.title = metaElements[i].content;
+//           break;
+//         case "og:type":
+//           attributes.ogType = metaElements[i].content;
+//           break;
+//         case "og:image":
+//         case "og:image:url":
+//           attributes.image = metaElements[i].content;
+//           break;
+//         case "og:image:secure_url":
+//           attributes.imageSecureUrl = metaElements[i].content;
+//           break;
+//         case "og:image:type":
+//           attributes.imageType = metaElements[i].content;
+//           break;
+//         case "og:image:width":
+//           attributes.imageWidth = metaElements[i].content;
+//           break;
+//         case "og:image:height":
+//           attributes.imageHeight = metaElements[i].content;
+//           break;
+//         case "og:image:alt":
+//           attributes.imageAlt = metaElements[i].content;
+//           break;
+//         case "og:description":
+//           attributes.description = metaElements[i].content;
+//           break;
+//         case "og:url":
+//           attributes.url = metaElements[i].content;
+//           break;
+//       }
+//     }
+//   }
+//   return attributes;
+// }
\ No newline at end of file
diff --git a/packages/experiments/src/components/Chiclet/index.ts b/packages/experiments/src/components/Chiclet/index.ts
index a072e64fba33b..0c2a703961193 100644
--- a/packages/experiments/src/components/Chiclet/index.ts
+++ b/packages/experiments/src/components/Chiclet/index.ts
@@ -1,4 +1,5 @@
 export * from './BaseChiclet';
 export * from './Chiclet';
 export * from './ChicletCard';
-export * from './Chiclet.types';
\ No newline at end of file
+export * from './Chiclet.types';
+export * from './OpenGraph';
\ No newline at end of file

From b9581b7880fdc939edecef208c8174cdca85880d Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Fri, 27 Apr 2018 15:54:51 -0700
Subject: [PATCH 29/67] created IChicletAction

---
 .../src/components/Chiclet/Chiclet.tsx          | 15 +++++++--------
 .../src/components/Chiclet/ChicletCard.tsx      |  8 +++-----
 .../src/components/Chiclet/ChicletCard.types.ts | 17 +++++++++++++++--
 3 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/packages/experiments/src/components/Chiclet/Chiclet.tsx b/packages/experiments/src/components/Chiclet/Chiclet.tsx
index f05c61233fdd2..1220f89c1879a 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.tsx
+++ b/packages/experiments/src/components/Chiclet/Chiclet.tsx
@@ -1,25 +1,24 @@
 import * as React from 'react';
 import { IChicletProps, ChicletSize } from './Chiclet.types';
-import { IChicletCardProps } from './ChicletCard.types';
+import { IChicletCardProps, IChicletAction } from './ChicletCard.types';
 import { ChicletCard } from './ChicletCard';
-import { IButtonProps } from 'office-ui-fabric-react/lib/Button';
 
 export class Chiclet extends React.Component<IChicletProps, IChicletCardProps> {
   public render() {
     const { chicletCardProps, size, actions } = this.props;
 
-    var actionsToIButtonProps: IButtonProps[] = [];
+    var actionsToIChicletActionProps: IChicletAction[] = [];
     if (actions != null) {
       actions.forEach(function (string) {
         switch (string) {
           case "Breadcrumb":
-            actionsToIButtonProps.push({ iconProps: { iconName: 'Breadcrumb' } });
+            actionsToIChicletActionProps.push({ buttonProps: { iconProps: { iconName: 'Breadcrumb' } } });
             break;
           case "Save":
-            actionsToIButtonProps.push({ iconProps: { iconName: 'Save' } });
+            actionsToIChicletActionProps.push({ buttonProps: { iconProps: { iconName: 'Save' } } });
             break;
           case "Share":
-            actionsToIButtonProps.push({ iconProps: { iconName: 'Share' } });
+            actionsToIChicletActionProps.push({ buttonProps: { iconProps: { iconName: 'Share' } } });
             break;
           default:
             break;
@@ -30,12 +29,12 @@ export class Chiclet extends React.Component<IChicletProps, IChicletCardProps> {
     switch (size) {
       case ChicletSize.medium:
         return (
-          <ChicletCard {...chicletCardProps} onClick={ this._onClick } actions={ actionsToIButtonProps } />
+          <ChicletCard {...chicletCardProps} onClick={ this._onClick } actions={ actionsToIChicletActionProps } />
         );
       // @todo: handle other types of chiclets
       default:
         return (
-          <ChicletCard {...chicletCardProps} onClick={ this._onClick } actions={ actionsToIButtonProps } />
+          <ChicletCard {...chicletCardProps} onClick={ this._onClick } actions={ actionsToIChicletActionProps } />
         );
     }
   }
diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.tsx b/packages/experiments/src/components/Chiclet/ChicletCard.tsx
index ca4e67f4ef732..8071d9e3141e7 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.tsx
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.tsx
@@ -1,13 +1,12 @@
 import * as React from 'react';
 import {
   BaseComponent,
-  KeyCodes,
   css
 } from '../../Utilities';
 import {
   IChicletCardStyles
 } from './ChicletCard.types';
-import { IChicletCardProps } from './ChicletCard.types';
+import { IChicletCardProps, IChicletAction } from './ChicletCard.types';
 import { mergeStyles } from '../../Styling';
 import {
   getClassNames
@@ -36,7 +35,6 @@ export class ChicletCard extends BaseComponent<IChicletCardProps, any> {
       <div
         tabIndex={ tabIndex }
         role={ role }
-        onKeyDown={ actionable ? this._onKeyDown : undefined }
         onClick={ actionable ? this._onClick : undefined }
         className={
           css('ms-ChicletCard', className, mergeStyles(this._classNames.root)) }
@@ -104,13 +102,13 @@ export class ChicletCard extends BaseComponent<IChicletCardProps, any> {
     );
   }
 
-  private _renderFooter(actions: IButtonProps[]): React.ReactElement<React.HTMLAttributes<HTMLDivElement>> {
+  private _renderFooter(actions: IChicletAction[]): React.ReactElement<React.HTMLAttributes<HTMLDivElement>> {
     return (
       <div className={ mergeStyles(this._classNames.actions) }>
         { actions && actions.map((action, index) => {
           return (
             <div className={ mergeStyles(this._classNames.action) } key={ index }>
-              <IconButton { ...action } />
+              <IconButton { ...action.buttonProps } />
             </div>
           );
         }) }
diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.types.ts b/packages/experiments/src/components/Chiclet/ChicletCard.types.ts
index 5ce1830179299..baaa169b94f5c 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.types.ts
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.types.ts
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { ChicletCard } from './ChicletCard';
 import { ITheme, IStyle } from '../../Styling';
 import { IButtonProps } from 'office-ui-fabric-react/lib/Button';
+import { IChicletAction } from './'
 
 export interface IChicletCard {
 
@@ -67,9 +68,9 @@ export interface IChicletCardProps extends React.Props<ChicletCard> {
   onClick?: (ev?: React.MouseEvent<HTMLElement>) => void;
 
   /**
-   * Action icon buttons to render.
+   * Actions to render
    */
-  actions?: IButtonProps[] | undefined;
+  actions?: IChicletAction[] | undefined;
 
   /**
    * Styling for the ChicletCard.
@@ -94,4 +95,16 @@ export interface IChicletCardProps extends React.Props<ChicletCard> {
   imageType?: string;
   imageAlt?: string;
   url?: string;
+}
+
+export interface IChicletAction {
+  /**
+   * Icon to render
+   */
+  buttonProps: IButtonProps;
+
+  /**
+   * Function to call when the action is clicked.
+   */
+  onClick?: (ev?: any) => void;
 }
\ No newline at end of file

From 3719108f6458810a7c71627dfd1aeb814914020b Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Fri, 27 Apr 2018 16:58:03 -0700
Subject: [PATCH 30/67] cleanup

---
 .../experiments/src/components/Chiclet/BaseChiclet.types.ts  | 2 +-
 .../experiments/src/components/Chiclet/ChicletCard.types.ts  | 5 ++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/experiments/src/components/Chiclet/BaseChiclet.types.ts b/packages/experiments/src/components/Chiclet/BaseChiclet.types.ts
index 4e4167bd53343..5422ca6aa2cf2 100644
--- a/packages/experiments/src/components/Chiclet/BaseChiclet.types.ts
+++ b/packages/experiments/src/components/Chiclet/BaseChiclet.types.ts
@@ -8,7 +8,7 @@ export interface IBaseChiclet {
 
 export interface IBaseChicletProps extends React.Props<BaseChiclet> {
   /**
-   * Optional callback to access the IChiclet interface. Use this instead of ref for accessing
+   * Optional callback to access the IBaseChiclet interface. Use this instead of ref for accessing
    * the public methods and properties of the component.
    */
   componentRef?: (component: IBaseChiclet | null) => void;
diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.types.ts b/packages/experiments/src/components/Chiclet/ChicletCard.types.ts
index baaa169b94f5c..98c474693c1eb 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.types.ts
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.types.ts
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { ChicletCard } from './ChicletCard';
 import { ITheme, IStyle } from '../../Styling';
 import { IButtonProps } from 'office-ui-fabric-react/lib/Button';
-import { IChicletAction } from './'
 
 export interface IChicletCard {
 
@@ -52,7 +51,7 @@ export interface IChicletCardStyles {
 
 export interface IChicletCardProps extends React.Props<ChicletCard> {
   /**
-   * Optional callback to access the IChiclet interface. Use this instead of ref for accessing
+   * Optional callback to access the IChicletCard interface. Use this instead of ref for accessing
    * the public methods and properties of the component.
    */
   componentRef?: (component: IChicletCard | null) => void;
@@ -63,7 +62,7 @@ export interface IChicletCardProps extends React.Props<ChicletCard> {
   className?: string;
 
   /**
-   * Function to call when the card is clicked or keyboard Enter/Space is pushed.
+   * Function to call when the card is clicked.
    */
   onClick?: (ev?: React.MouseEvent<HTMLElement>) => void;
 

From 7d1104d0b6eba3a24b7970f9c8c0a829db6891a3 Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Mon, 30 Apr 2018 13:40:16 -0700
Subject: [PATCH 31/67] styling fixes

---
 .../src/components/Chiclet/Chiclet.styles.ts  | 78 +++++++++++--------
 1 file changed, 47 insertions(+), 31 deletions(-)

diff --git a/packages/experiments/src/components/Chiclet/Chiclet.styles.ts b/packages/experiments/src/components/Chiclet/Chiclet.styles.ts
index 0570779f42da4..d7854dcd4c914 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.styles.ts
+++ b/packages/experiments/src/components/Chiclet/Chiclet.styles.ts
@@ -20,26 +20,24 @@ export const getClassNames = memoizeFunction((
   const styles: IChicletCardStyles = {
     root: {
       WebkitFontSmoothing: 'antialiased',
-      backgroundColor: 'white',
-      border: `1px solid ${theme.palette.neutralLight}`,
-      boxSizing: 'border-box',
-      maxWidth: '320px',
-      minWidth: '540px',
-      height: '109px',
+      backgroundColor: theme.palette.white,
+      borderRadius: '2px',
+      boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.3)',
+      width: '600px',
+      height: '126px',
       userSelect: 'none',
       position: 'relative',
       selectors: {
         ':hover': {
-          cursor: 'pointer',
-          border: `1px solid ${theme.palette.neutralTertiaryAlt}`
+          cursor: 'pointer'
         }
       }
     },
     icon: [
       'ms-DocumentCardPreview-icon',
       {
-        marginLeft: '10px',
-        bottom: '10px',
+        padding: '10px 166px 8px 8px',
+        //bottom: '10px',
         position: 'absolute',
         color: '#166EBE'
       }
@@ -48,12 +46,14 @@ export const getClassNames = memoizeFunction((
       'ms-ChicletCardPreview',
       {
         float: 'left',
-        maxHeight: '107px',
-        maxWidth: '160px',
+        height: '122px',
+        width: '198px',
         position: 'relative',
+        //opacity: '0.02',
         overflow: 'hidden', // need to fix
-        backgroundColor: theme.palette.neutralLighterAlt,
-        display: 'block'
+        backgroundColor: theme.palette.white,
+        display: 'block',
+        padding: '2px 0px 2px 2px',
       }
     ],
     info: [
@@ -62,32 +62,45 @@ export const getClassNames = memoizeFunction((
         position: 'relative',
         display: 'block',
         height: '100%',
-        lineHeight: '21px',
+        //lineHeight: '21px',
         overflow: 'hidden',
-        wordWrap: 'break-word'
+        wordWrap: 'break-word',
+        weight: '400px'
       }
     ],
     title: [
       'ms-ChicletCardTitle',
       {
-        padding: '8px 16px 0px',
-        font: theme.fonts.large,
+        padding: '9px 26px 5px 11px',
+        //font: theme.fonts.large,
+        fontSize: '16px',
+        fontWeight: 'normal',
+        fontStyle: 'normal',
+        fontStretch: 'normal',
         color: theme.palette.neutralPrimary,
-        height: '42px', // Two lines of text, making sure the third line is hidden
-        lineHeight: ChicletCardTitleLineHeight,
+        letterSpacing: 'normal',
+        textAlign: 'left',
+        height: '41px', // Two lines of text, making sure the third line is hidden
+        width: '363px',
+        lineHeight: '1.25',
         overflow: 'hidden',
-        wordWrap: 'break-word',
-        fontWeight: '400'
+        wordWrap: 'break-word'
       }
     ],
     link: [
       'ms-ChicletCardLink',
       {
-        padding: '4px 16px 0px',
-        fontSize: '8pt',
-        color: theme.palette.neutralTertiaryAlt,
-        lineHeight: '14px',
-        height: '14px',
+        padding: '0px 16px 25px 11px',
+        fontSize: '12px',
+        fontWeight: 'normal',
+        fontStyle: 'normal',
+        fontStretch: 'normal',
+        lineHeight: '1.33',
+        letterSpacing: 'normal',
+        textAlign: 'left',
+        color: '#797671',
+        width: '248px',
+        height: '16px',
         overflow: 'hidden',
         whiteSpace: 'nowrap',
         textOverflow: 'ellipsis'
@@ -96,8 +109,8 @@ export const getClassNames = memoizeFunction((
     actions: [
       'ms-ChicletFooter',
       {
-        height: msChicletCardActionsActionSize,
-        padding: `${msChicletCardActionsVerticalPadding} ${msChicletCardActionsHorizontalPadding}`,
+        paddingRight: '6px',
+        height: '24px',
         position: 'relative'
       }
     ],
@@ -105,8 +118,11 @@ export const getClassNames = memoizeFunction((
       'ms-ChicletFooter-action',
       {
         float: 'right',
-        marginLeft: '4px',
-        cursor: 'pointer'
+        cursor: 'pointer',
+        width: '32px',
+        height: '32px',
+        backgroundColor: theme.palette.white,
+        color: '#0078D7'
       }
     ]
   };

From 5020b320c5e942c7bfd97468e086237bc0de0bbb Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Tue, 1 May 2018 17:25:41 -0700
Subject: [PATCH 32/67] base files added for BaseChiclet and ChicletCard

---
 .../components/Chiclet/BaseChiclet.base.tsx   |  41 ++++++
 .../components/Chiclet/BaseChiclet.styles.ts  |  11 ++
 .../src/components/Chiclet/BaseChiclet.tsx    |  43 ++----
 .../components/Chiclet/BaseChiclet.types.ts   |  28 +++-
 .../src/components/Chiclet/Chiclet.base.tsx   |   0
 .../components/Chiclet/ChicletCard.base.tsx   | 125 +++++++++++++++++
 ...hiclet.styles.ts => ChicletCard.styles.ts} |  76 +++++-----
 .../src/components/Chiclet/ChicletCard.tsx    | 131 ++----------------
 .../components/Chiclet/ChicletCard.types.ts   |  20 ++-
 .../src/components/Chiclet/ChicletPage.tsx    |   2 +-
 .../src/components/Chiclet/index.ts           |   2 +
 11 files changed, 280 insertions(+), 199 deletions(-)
 create mode 100644 packages/experiments/src/components/Chiclet/BaseChiclet.base.tsx
 create mode 100644 packages/experiments/src/components/Chiclet/BaseChiclet.styles.ts
 create mode 100644 packages/experiments/src/components/Chiclet/Chiclet.base.tsx
 create mode 100644 packages/experiments/src/components/Chiclet/ChicletCard.base.tsx
 rename packages/experiments/src/components/Chiclet/{Chiclet.styles.ts => ChicletCard.styles.ts} (63%)

diff --git a/packages/experiments/src/components/Chiclet/BaseChiclet.base.tsx b/packages/experiments/src/components/Chiclet/BaseChiclet.base.tsx
new file mode 100644
index 0000000000000..cc4d6b871f189
--- /dev/null
+++ b/packages/experiments/src/components/Chiclet/BaseChiclet.base.tsx
@@ -0,0 +1,41 @@
+import * as React from 'react';
+import {
+  BaseComponent,
+  customizable,
+  classNamesFunction
+} from '../../Utilities';
+import { Chiclet } from './Chiclet';
+import { ChicletSize } from './Chiclet.types';
+import { OpenGraphUtilities } from './OpenGraph';
+import { IBaseChicletProps, IBaseChicletStyles, IBaseChicletStyleProps } from './BaseChiclet.types';
+
+const getClassNames = classNamesFunction<IBaseChicletStyleProps, IBaseChicletStyles>();
+
+@customizable('BaseChicletBase', ['theme'])
+export class BaseChicletBase extends BaseComponent<IBaseChicletProps, any> {
+  private _classNames: {[key in keyof IBaseChicletStyles]: string};
+
+  constructor(props: IBaseChicletProps) {
+    super(props);
+
+    let chicletCardProps = OpenGraphUtilities.extractMetaTags(this.props.url);
+    this.state = { chicletCardProps: chicletCardProps };
+  }
+
+  public render() {
+    const { size, actions, getStyles, theme } = this.props;
+    const { chicletCardProps } = this.state;
+
+    this._classNames = getClassNames(getStyles, { theme: theme! });
+
+    return (
+      <Chiclet chicletCardProps={ chicletCardProps } size={ size ? size : ChicletSize.medium } actions={ actions } />
+    );
+  }
+
+  public componentWillReceiveProps(nextProps: any) {
+    if (this.props.url != nextProps.url) {
+      this.setState({ chicletCardProps: OpenGraphUtilities.extractMetaTags(this.props.url) });
+    }
+  }
+}
diff --git a/packages/experiments/src/components/Chiclet/BaseChiclet.styles.ts b/packages/experiments/src/components/Chiclet/BaseChiclet.styles.ts
new file mode 100644
index 0000000000000..37513f9561ec7
--- /dev/null
+++ b/packages/experiments/src/components/Chiclet/BaseChiclet.styles.ts
@@ -0,0 +1,11 @@
+import { IBaseChicletStyleProps, IBaseChicletStyles } from './BaseChiclet.types';
+
+export const getStyles = (
+  props: IBaseChicletStyleProps
+): IBaseChicletStyles => {
+  const { theme } = props;
+
+  return ({
+    root: {}
+  });
+}
\ No newline at end of file
diff --git a/packages/experiments/src/components/Chiclet/BaseChiclet.tsx b/packages/experiments/src/components/Chiclet/BaseChiclet.tsx
index 54161ce8fdc40..cee0fe29c6914 100644
--- a/packages/experiments/src/components/Chiclet/BaseChiclet.tsx
+++ b/packages/experiments/src/components/Chiclet/BaseChiclet.tsx
@@ -1,32 +1,13 @@
-import * as React from 'react';
+import { styled } from '../../Utilities';
 import {
-  BaseComponent
-} from '../../Utilities';
-import { Chiclet } from './Chiclet';
-import { ChicletSize } from './Chiclet.types';
-import { OpenGraphUtilities } from './OpenGraph';
-import { IBaseChicletProps } from './BaseChiclet.types';
-
-export class BaseChiclet extends BaseComponent<IBaseChicletProps, any> {
-  constructor(props: IBaseChicletProps) {
-    super(props);
-
-    let chicletCardProps = OpenGraphUtilities.extractMetaTags(this.props.url);
-    this.state = { chicletCardProps: chicletCardProps };
-  }
-
-  public render() {
-    const { size, actions } = this.props;
-    const { chicletCardProps } = this.state;
-
-    return (
-      <Chiclet chicletCardProps={ chicletCardProps } size={ size ? size : ChicletSize.medium } actions={ actions } />
-    );
-  }
-
-  public componentWillReceiveProps(nextProps: any) {
-    if (this.props.url != nextProps.url) {
-      this.setState({ chicletCardProps: OpenGraphUtilities.extractMetaTags(this.props.url) });
-    }
-  }
-}
+  IBaseChicletProps,
+  IBaseChicletStyleProps,
+  IBaseChicletStyles
+} from './BaseChiclet.types';
+import { getStyles } from './BaseChiclet.styles';
+import { BaseChicletBase } from './BaseChiclet.base';
+
+export const BaseChiclet = styled<IBaseChicletProps, IBaseChicletStyleProps, IBaseChicletStyles>(
+  BaseChicletBase,
+  getStyles
+);
\ No newline at end of file
diff --git a/packages/experiments/src/components/Chiclet/BaseChiclet.types.ts b/packages/experiments/src/components/Chiclet/BaseChiclet.types.ts
index 5422ca6aa2cf2..33cfa45d9bade 100644
--- a/packages/experiments/src/components/Chiclet/BaseChiclet.types.ts
+++ b/packages/experiments/src/components/Chiclet/BaseChiclet.types.ts
@@ -1,18 +1,26 @@
 import * as React from 'react';
-import { BaseChiclet } from './BaseChiclet';
+import { BaseChicletBase } from './BaseChiclet.base';
 import { ChicletSize } from './Chiclet.types';
+import { IStyleFunction } from '../../Utilities';
+import {
+  IStyle,
+  ITheme
+} from '../../Styling';
 
 export interface IBaseChiclet {
 
 }
 
-export interface IBaseChicletProps extends React.Props<BaseChiclet> {
+export interface IBaseChicletProps extends React.Props<BaseChicletBase> {
   /**
    * Optional callback to access the IBaseChiclet interface. Use this instead of ref for accessing
    * the public methods and properties of the component.
    */
   componentRef?: (component: IBaseChiclet | null) => void;
 
+  /** @todo: description */
+  getStyles?: IStyleFunction<IBaseChicletStyleProps, IBaseChicletStyles>;
+
   /**
    * Optional class for chiclet.
    */
@@ -32,4 +40,20 @@ export interface IBaseChicletProps extends React.Props<BaseChiclet> {
    * Action icon buttons to render.
    */
   actions?: string[];
+
+  /**
+   * Theme for the component.
+   */
+  theme?: ITheme;
+}
+
+export interface IBaseChicletStyleProps {
+  /**
+   * Theme for the component.
+   */
+  theme?: ITheme;
+}
+
+export interface IBaseChicletStyles {
+  root?: IStyle;
 }
\ No newline at end of file
diff --git a/packages/experiments/src/components/Chiclet/Chiclet.base.tsx b/packages/experiments/src/components/Chiclet/Chiclet.base.tsx
new file mode 100644
index 0000000000000..e69de29bb2d1d
diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx b/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx
new file mode 100644
index 0000000000000..56c706d0a0fb1
--- /dev/null
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx
@@ -0,0 +1,125 @@
+import * as React from 'react';
+import {
+  BaseComponent,
+  css,
+  customizable,
+  classNamesFunction
+} from '../../Utilities';
+import { IChicletCardStyles, IChicletCardStyleProps, IChicletCardProps, IChicletAction } from './ChicletCard.types';
+import { mergeStyles } from '../../Styling';
+import { Icon } from 'office-ui-fabric-react/lib/Icon';
+import { IconButton } from 'office-ui-fabric-react/lib/Button';
+import { Image } from 'office-ui-fabric-react/lib/Image';
+import { TestImages } from 'office-ui-fabric-react/src/common/TestImages';
+
+const getClassNames = classNamesFunction<IChicletCardStyleProps, IChicletCardStyles>();
+
+@customizable('ChicletCardBase', ['theme'])
+export class ChicletCardBase extends BaseComponent<IChicletCardProps, any> {
+  private _classNames: {[key in keyof IChicletCardStyles]: string};
+
+  public render() {
+    const { styles: customStyles, title, ogType, description, image, imageType, imageWidth, imageHeight, imageAlt, url, onClick, className, actions, theme, getStyles } = this.props;
+    const actionable = (onClick) ? true : false;
+
+    this._classNames = getClassNames(getStyles, { theme: theme! });
+
+    // if this element is actionable it should have an aria role
+    const role = actionable ? (onClick ? 'button' : 'link') : undefined;
+    const tabIndex = actionable ? 0 : undefined;
+
+    var preview = this._renderPreviewImage(image, imageHeight, imageWidth, ogType);
+
+    return (
+      <div
+        tabIndex={ tabIndex }
+        role={ role }
+        onClick={ actionable ? this._onClick : undefined }
+        className={
+          css('ms-ChicletCard', className, mergeStyles(this._classNames.root)) }
+      >
+        <div
+          className={ mergeStyles(this._classNames.preview) }
+        >
+          { image ?
+            preview :
+            (<Image
+              src={ TestImages.documentPreviewTwo }
+              role='presentation'
+              alt=''
+            />)
+          }
+        </div>
+        <div
+          className={ mergeStyles(this._classNames.info) }
+        >
+          <div
+            className={ mergeStyles(this._classNames.title) }
+          >
+            { title ? title : "Placeholder" }
+          </div>
+          <div
+            className={ mergeStyles(this._classNames.link) }
+          >
+            { url ? url : "https://onedrive.com/files/v-lygi/39192908430" }
+          </div>
+          { actions ? this._renderFooter(actions) : (null) }
+        </div>
+      </div>
+    );
+  }
+
+  private _renderPreviewImage(imageUrl?: string, imageHeight?: string, imageWidth?: string, ogType?: string, imageAlt?: string): React.ReactElement<React.HTMLAttributes<HTMLDivElement>> {
+    const image = (
+      <Image
+        width={ imageWidth }
+        height={ imageHeight }
+        src={ TestImages.documentPreview }
+        role='presentation'
+        alt={ imageAlt ? imageAlt : undefined }
+      />
+    );
+
+    let icon;
+    switch (ogType) {
+      case "word":
+        icon = <Icon className={ mergeStyles(this._classNames.icon) } iconName='WordDocument' />;
+        break;
+      case "powerpoint":
+        icon = <Icon className={ mergeStyles(this._classNames.icon) } iconName='PowerPointDocument' />;
+        break;
+      case "excel":
+        icon = <Icon className={ mergeStyles(this._classNames.icon) } iconName='ExcelDocument' />;
+        break;
+    }
+
+    return (
+      <div>
+        { image }
+        { icon }
+      </div>
+    );
+  }
+
+  private _renderFooter(actions: IChicletAction[]): React.ReactElement<React.HTMLAttributes<HTMLDivElement>> {
+    return (
+      <div className={ mergeStyles(this._classNames.actions) }>
+        { actions && actions.map((action, index) => {
+          return (
+            <div className={ mergeStyles(this._classNames.action) } key={ index }>
+              <IconButton { ...action.buttonProps } />
+            </div>
+          );
+        }) }
+      </div>
+    );
+  }
+
+  private _onClick = (ev: React.MouseEvent<HTMLElement>): void => {
+    const { onClick } = this.props;
+    if (onClick) {
+      onClick(ev);
+    }
+  }
+
+}
\ No newline at end of file
diff --git a/packages/experiments/src/components/Chiclet/Chiclet.styles.ts b/packages/experiments/src/components/Chiclet/ChicletCard.styles.ts
similarity index 63%
rename from packages/experiments/src/components/Chiclet/Chiclet.styles.ts
rename to packages/experiments/src/components/Chiclet/ChicletCard.styles.ts
index d7854dcd4c914..8636bd1062733 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.styles.ts
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.styles.ts
@@ -1,43 +1,40 @@
-import { memoizeFunction } from '../../Utilities';
 import {
-  ITheme,
-  concatStyleSets,
-  getTheme
+  normalize
 } from '../../Styling';
-import { IChicletCardStyles } from './ChicletCard.types';
+import { IChicletCardStyleProps, IChicletCardStyles } from './ChicletCard.types';
 
-const ChicletCardTitleLineHeight = '21px';
-
-/* Actions */
-const msChicletCardActionsActionSize = '34px';
-const msChicletCardActionsHorizontalPadding = '12px';
-const msChicletCardActionsVerticalPadding = '2px';
-
-export const getClassNames = memoizeFunction((
-  theme: ITheme = getTheme(),
-  customStyles?: IChicletCardStyles
+export const getStyles = (
+  props: IChicletCardStyleProps
 ): IChicletCardStyles => {
-  const styles: IChicletCardStyles = {
-    root: {
-      WebkitFontSmoothing: 'antialiased',
-      backgroundColor: theme.palette.white,
-      borderRadius: '2px',
-      boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.3)',
-      width: '600px',
-      height: '126px',
-      userSelect: 'none',
-      position: 'relative',
-      selectors: {
-        ':hover': {
-          cursor: 'pointer'
+  const { theme } = props;
+  const { palette } = theme;
+
+  return ({
+    root: [
+      'ms-Chiclet',
+      normalize,
+      {
+        WebkitFontSmoothing: 'antialiased',
+        backgroundColor: palette.white,
+        borderRadius: '2px',
+        boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.3)',
+        width: '600px',
+        height: '126px',
+        userSelect: 'none',
+        position: 'relative',
+        selectors: {
+          ':hover': {
+            cursor: 'pointer'
+          }
         }
       }
-    },
+    ],
     icon: [
-      'ms-DocumentCardPreview-icon',
+      'ms-ChicletCardPreview-icon',
       {
-        padding: '10px 166px 8px 8px',
-        //bottom: '10px',
+        //padding: '10px 166px 8px 8px',
+        left: '10px',
+        bottom: '10px',
         position: 'absolute',
         color: '#166EBE'
       }
@@ -51,7 +48,7 @@ export const getClassNames = memoizeFunction((
         position: 'relative',
         //opacity: '0.02',
         overflow: 'hidden', // need to fix
-        backgroundColor: theme.palette.white,
+        backgroundColor: palette.white,
         display: 'block',
         padding: '2px 0px 2px 2px',
       }
@@ -65,7 +62,7 @@ export const getClassNames = memoizeFunction((
         //lineHeight: '21px',
         overflow: 'hidden',
         wordWrap: 'break-word',
-        weight: '400px'
+        width: '400px'
       }
     ],
     title: [
@@ -77,7 +74,7 @@ export const getClassNames = memoizeFunction((
         fontWeight: 'normal',
         fontStyle: 'normal',
         fontStretch: 'normal',
-        color: theme.palette.neutralPrimary,
+        color: palette.neutralPrimary,
         letterSpacing: 'normal',
         textAlign: 'left',
         height: '41px', // Two lines of text, making sure the third line is hidden
@@ -121,12 +118,9 @@ export const getClassNames = memoizeFunction((
         cursor: 'pointer',
         width: '32px',
         height: '32px',
-        backgroundColor: theme.palette.white,
+        backgroundColor: palette.white,
         color: '#0078D7'
       }
     ]
-  };
-
-  return concatStyleSets(styles, customStyles)!;
-
-});
\ No newline at end of file
+  });
+};
\ No newline at end of file
diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.tsx b/packages/experiments/src/components/Chiclet/ChicletCard.tsx
index 8071d9e3141e7..1537c02a8f079 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.tsx
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.tsx
@@ -1,126 +1,13 @@
-import * as React from 'react';
-import {
-  BaseComponent,
-  css
-} from '../../Utilities';
+import { styled } from '../../Utilities';
 import {
+  IChicletCardProps,
+  IChicletCardStyleProps,
   IChicletCardStyles
 } from './ChicletCard.types';
-import { IChicletCardProps, IChicletAction } from './ChicletCard.types';
-import { mergeStyles } from '../../Styling';
-import {
-  getClassNames
-} from './Chiclet.styles';
-import { Icon } from 'office-ui-fabric-react/lib/Icon';
-import { IconButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
-import { Image } from 'office-ui-fabric-react/lib/Image';
-import { TestImages } from 'office-ui-fabric-react/src/common/TestImages';
-
-export class ChicletCard extends BaseComponent<IChicletCardProps, any> {
-  private _classNames: IChicletCardStyles = {};
-
-  public render() {
-    const { styles: customStyles, title, ogType, description, image, imageType, imageWidth, imageHeight, imageAlt, url, onClick, className, actions, theme } = this.props;
-    const actionable = (onClick) ? true : false;
-
-    this._classNames = getClassNames(theme!, customStyles);
-
-    // if this element is actionable it should have an aria role
-    const role = actionable ? (onClick ? 'button' : 'link') : undefined;
-    const tabIndex = actionable ? 0 : undefined;
-
-    var preview = this._renderPreviewImage(image, imageHeight, imageWidth, ogType);
-
-    return (
-      <div
-        tabIndex={ tabIndex }
-        role={ role }
-        onClick={ actionable ? this._onClick : undefined }
-        className={
-          css('ms-ChicletCard', className, mergeStyles(this._classNames.root)) }
-      >
-        <div
-          className={ mergeStyles(this._classNames.preview) }
-        >
-          { image ?
-            preview :
-            (<Image
-              src={ TestImages.documentPreviewTwo }
-              role='presentation'
-              alt=''
-            />)
-          }
-        </div>
-        <div
-          className={ mergeStyles(this._classNames.info) }
-        >
-          <div
-            className={ mergeStyles(this._classNames.title) }
-          >
-            { title ? title : "Placeholder" }
-          </div>
-          <div
-            className={ mergeStyles(this._classNames.link) }
-          >
-            { url ? url : "https://onedrive.com/files/v-lygi/39192908430" }
-          </div>
-          { actions ? this._renderFooter(actions) : (null) }
-        </div>
-      </div>
-    );
-  }
-
-  private _renderPreviewImage(imageUrl?: string, imageHeight?: string, imageWidth?: string, ogType?: string, imageAlt?: string): React.ReactElement<React.HTMLAttributes<HTMLDivElement>> {
-    const image = (
-      <Image
-        width={ imageWidth }
-        height={ imageHeight }
-        src={ TestImages.documentPreview }
-        role='presentation'
-        alt={ imageAlt ? imageAlt : undefined }
-      />
-    );
-
-    let icon;
-    switch (ogType) {
-      case "word":
-        icon = <Icon className={ mergeStyles(this._classNames.icon) } iconName='WordDocument' />;
-        break;
-      case "powerpoint":
-        icon = <Icon className={ mergeStyles(this._classNames.icon) } iconName='PowerPointDocument' />;
-        break;
-      case "excel":
-        icon = <Icon className={ mergeStyles(this._classNames.icon) } iconName='ExcelDocument' />;
-        break;
-    }
-
-    return (
-      <div>
-        { image }
-        { icon }
-      </div>
-    );
-  }
-
-  private _renderFooter(actions: IChicletAction[]): React.ReactElement<React.HTMLAttributes<HTMLDivElement>> {
-    return (
-      <div className={ mergeStyles(this._classNames.actions) }>
-        { actions && actions.map((action, index) => {
-          return (
-            <div className={ mergeStyles(this._classNames.action) } key={ index }>
-              <IconButton { ...action.buttonProps } />
-            </div>
-          );
-        }) }
-      </div>
-    );
-  }
-
-  private _onClick = (ev: React.MouseEvent<HTMLElement>): void => {
-    const { onClick } = this.props;
-    if (onClick) {
-      onClick(ev);
-    }
-  }
+import { getStyles } from './ChicletCard.styles';
+import { ChicletCardBase } from './ChicletCard.base';
 
-}
\ No newline at end of file
+export const ChicletCard = styled<IChicletCardProps, IChicletCardStyleProps, IChicletCardStyles>(
+  ChicletCardBase,
+  getStyles
+);
\ No newline at end of file
diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.types.ts b/packages/experiments/src/components/Chiclet/ChicletCard.types.ts
index 98c474693c1eb..95aa015d8c372 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.types.ts
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.types.ts
@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { ChicletCard } from './ChicletCard';
+import { ChicletCardBase } from './ChicletCard.base';
 import { ITheme, IStyle } from '../../Styling';
 import { IButtonProps } from 'office-ui-fabric-react/lib/Button';
+import { IStyleFunction } from '../../Utilities';
 
 export interface IChicletCard {
 
@@ -49,13 +50,16 @@ export interface IChicletCardStyles {
   action?: IStyle;
 }
 
-export interface IChicletCardProps extends React.Props<ChicletCard> {
+export interface IChicletCardProps extends React.Props<ChicletCardBase> {
   /**
    * Optional callback to access the IChicletCard interface. Use this instead of ref for accessing
    * the public methods and properties of the component.
    */
   componentRef?: (component: IChicletCard | null) => void;
 
+  /** @todo: description */
+  getStyles?: IStyleFunction<IChicletCardStyleProps, IChicletCardStyles>;
+
   /**
    * Optional class for ChicletCard.
    */
@@ -96,6 +100,18 @@ export interface IChicletCardProps extends React.Props<ChicletCard> {
   url?: string;
 }
 
+export interface IChicletCardStyleProps {
+  /**
+   * Accept theme prop.
+   */
+  theme?: ITheme;
+
+  /**
+   * Accept custom classNames
+   */
+  className?: string;
+}
+
 export interface IChicletAction {
   /**
    * Icon to render
diff --git a/packages/experiments/src/components/Chiclet/ChicletPage.tsx b/packages/experiments/src/components/Chiclet/ChicletPage.tsx
index 782e0a3019786..c13707654ad06 100644
--- a/packages/experiments/src/components/Chiclet/ChicletPage.tsx
+++ b/packages/experiments/src/components/Chiclet/ChicletPage.tsx
@@ -6,7 +6,7 @@ import {
 } from '@uifabric/example-app-base';
 
 import { ChicletBasicExample } from './examples/Chiclet.Basic.Example';
-const ChicletBasicExampleCode = require('!raw-loader!experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx') as string;
+const ChicletBasicExampleCode = require('!raw-loader!@uifabric/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx') as string;
 
 export class ChicletPage extends React.Component<IComponentDemoPageProps, {}> {
   public render(): JSX.Element {
diff --git a/packages/experiments/src/components/Chiclet/index.ts b/packages/experiments/src/components/Chiclet/index.ts
index 0c2a703961193..671dd8ccb3e63 100644
--- a/packages/experiments/src/components/Chiclet/index.ts
+++ b/packages/experiments/src/components/Chiclet/index.ts
@@ -1,5 +1,7 @@
+export * from './BaseChiclet.base';
 export * from './BaseChiclet';
 export * from './Chiclet';
+export * from './ChicletCard.base';
 export * from './ChicletCard';
 export * from './Chiclet.types';
 export * from './OpenGraph';
\ No newline at end of file

From eb3b9593c253569c1f58d7d7a0d63dcb5dc4b9dd Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Wed, 2 May 2018 10:21:54 -0700
Subject: [PATCH 33/67] added Chiclet.base

---
 .../src/components/Chiclet/Chiclet.base.tsx   | 45 ++++++++++++++
 .../src/components/Chiclet/Chiclet.styles.ts  | 11 ++++
 .../src/components/Chiclet/Chiclet.tsx        | 58 +++++--------------
 .../src/components/Chiclet/Chiclet.types.ts   | 25 +++++++-
 4 files changed, 93 insertions(+), 46 deletions(-)
 create mode 100644 packages/experiments/src/components/Chiclet/Chiclet.styles.ts

diff --git a/packages/experiments/src/components/Chiclet/Chiclet.base.tsx b/packages/experiments/src/components/Chiclet/Chiclet.base.tsx
index e69de29bb2d1d..b0ce744208088 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.base.tsx
+++ b/packages/experiments/src/components/Chiclet/Chiclet.base.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { IChicletProps, ChicletSize } from './Chiclet.types';
+import { IChicletCardProps, IChicletAction } from './ChicletCard.types';
+import { ChicletCard } from './ChicletCard';
+
+export class ChicletBase extends React.Component<IChicletProps, IChicletCardProps> {
+  public render() {
+    const { chicletCardProps, size, actions } = this.props;
+
+    var actionsToIChicletActionProps: IChicletAction[] = [];
+    if (actions != null) {
+      actions.forEach(function (string) {
+        switch (string) {
+          case "Breadcrumb":
+            actionsToIChicletActionProps.push({ buttonProps: { iconProps: { iconName: 'Breadcrumb' } } });
+            break;
+          case "Save":
+            actionsToIChicletActionProps.push({ buttonProps: { iconProps: { iconName: 'Save' } } });
+            break;
+          case "Share":
+            actionsToIChicletActionProps.push({ buttonProps: { iconProps: { iconName: 'Share' } } });
+            break;
+          default:
+            break;
+        }
+      });
+    }
+
+    switch (size) {
+      case ChicletSize.medium:
+        return (
+          <ChicletCard {...chicletCardProps} onClick={ this._onClick } actions={ actionsToIChicletActionProps } />
+        );
+      // @todo: handle other types of chiclets
+      default:
+        return (
+          <ChicletCard {...chicletCardProps} onClick={ this._onClick } actions={ actionsToIChicletActionProps } />
+        );
+    }
+  }
+
+  private _onClick(): void { // @todo: default click handler
+    console.log("You clicked the Chiclet");
+  }
+}
\ No newline at end of file
diff --git a/packages/experiments/src/components/Chiclet/Chiclet.styles.ts b/packages/experiments/src/components/Chiclet/Chiclet.styles.ts
new file mode 100644
index 0000000000000..d1f5b34cb960b
--- /dev/null
+++ b/packages/experiments/src/components/Chiclet/Chiclet.styles.ts
@@ -0,0 +1,11 @@
+import { IChicletStyleProps, IChicletStyles } from './Chiclet.types';
+
+export const getStyles = (
+  props: IChicletStyleProps
+): IChicletStyles => {
+  const { theme } = props;
+
+  return ({
+    root: {}
+  });
+}
\ No newline at end of file
diff --git a/packages/experiments/src/components/Chiclet/Chiclet.tsx b/packages/experiments/src/components/Chiclet/Chiclet.tsx
index 1220f89c1879a..e9910fc917c9c 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.tsx
+++ b/packages/experiments/src/components/Chiclet/Chiclet.tsx
@@ -1,45 +1,13 @@
-import * as React from 'react';
-import { IChicletProps, ChicletSize } from './Chiclet.types';
-import { IChicletCardProps, IChicletAction } from './ChicletCard.types';
-import { ChicletCard } from './ChicletCard';
-
-export class Chiclet extends React.Component<IChicletProps, IChicletCardProps> {
-  public render() {
-    const { chicletCardProps, size, actions } = this.props;
-
-    var actionsToIChicletActionProps: IChicletAction[] = [];
-    if (actions != null) {
-      actions.forEach(function (string) {
-        switch (string) {
-          case "Breadcrumb":
-            actionsToIChicletActionProps.push({ buttonProps: { iconProps: { iconName: 'Breadcrumb' } } });
-            break;
-          case "Save":
-            actionsToIChicletActionProps.push({ buttonProps: { iconProps: { iconName: 'Save' } } });
-            break;
-          case "Share":
-            actionsToIChicletActionProps.push({ buttonProps: { iconProps: { iconName: 'Share' } } });
-            break;
-          default:
-            break;
-        }
-      });
-    }
-
-    switch (size) {
-      case ChicletSize.medium:
-        return (
-          <ChicletCard {...chicletCardProps} onClick={ this._onClick } actions={ actionsToIChicletActionProps } />
-        );
-      // @todo: handle other types of chiclets
-      default:
-        return (
-          <ChicletCard {...chicletCardProps} onClick={ this._onClick } actions={ actionsToIChicletActionProps } />
-        );
-    }
-  }
-
-  private _onClick(): void { // @todo: default click handler
-    console.log("You clicked the Chiclet");
-  }
-}
\ No newline at end of file
+import { styled } from '../../Utilities';
+import {
+  IChicletProps,
+  IChicletStyleProps,
+  IChicletStyles
+} from './Chiclet.types';
+import { getStyles } from './Chiclet.styles';
+import { ChicletBase } from './Chiclet.base';
+
+export const Chiclet = styled<IChicletProps, IChicletStyleProps, IChicletStyles>(
+  ChicletBase,
+  getStyles
+);
\ No newline at end of file
diff --git a/packages/experiments/src/components/Chiclet/Chiclet.types.ts b/packages/experiments/src/components/Chiclet/Chiclet.types.ts
index a3dc881c291e3..811ec6f64c479 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.types.ts
+++ b/packages/experiments/src/components/Chiclet/Chiclet.types.ts
@@ -1,6 +1,15 @@
 import * as React from 'react';
 import { Chiclet } from './Chiclet';
-import { IChicletCardProps } from './ChicletCard.types';
+import {
+  IChicletCardProps,
+  IChicletCardStyleProps,
+  IChicletCardStyles
+} from './ChicletCard.types';
+import {
+  IStyle,
+  ITheme
+} from '../../Styling';
+import { IStyleFunction } from '../../Utilities';
 
 export interface IChiclet {
 
@@ -12,6 +21,9 @@ export interface IChicletProps extends React.Props<Chiclet> {
    */
   chicletCardProps?: IChicletCardProps | undefined;
 
+  /** @todo: description */
+  getStyles?: IStyleFunction<IChicletCardStyleProps, IChicletCardStyles>;
+
   /**
    * Chiclet size to render
    */
@@ -43,4 +55,15 @@ export enum ChicletSize {
    * Large Chiclet
    */
   large = 3
+}
+
+export interface IChicletStyleProps {
+  /**
+   * Theme for the component.
+   */
+  theme?: ITheme;
+}
+
+export interface IChicletStyles {
+  root?: IStyle;
 }
\ No newline at end of file

From a44db3bf7efc46c095ab2c140d76c7c36430ad8e Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Wed, 9 May 2018 15:29:44 -0700
Subject: [PATCH 34/67] extract actions from Chiclet and just show a footer

---
 .../components/Chiclet/BaseChiclet.base.tsx   |  12 +-
 .../components/Chiclet/BaseChiclet.types.ts   |   4 +-
 .../src/components/Chiclet/Chiclet.base.tsx   |  27 +---
 .../src/components/Chiclet/Chiclet.types.ts   |   4 +-
 .../components/Chiclet/ChicletCard.base.tsx   |  23 +--
 .../components/Chiclet/ChicletCard.styles.ts  |  19 ---
 .../components/Chiclet/ChicletCard.types.ts   |  22 +--
 .../src/components/Chiclet/OpenGraph.ts       | 150 ++++++------------
 .../examples/Chiclet.Basic.Example.scss       |  16 ++
 .../examples/Chiclet.Basic.Example.tsx        |  38 ++++-
 10 files changed, 118 insertions(+), 197 deletions(-)
 create mode 100644 packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.scss

diff --git a/packages/experiments/src/components/Chiclet/BaseChiclet.base.tsx b/packages/experiments/src/components/Chiclet/BaseChiclet.base.tsx
index cc4d6b871f189..caf7a38b1aeaa 100644
--- a/packages/experiments/src/components/Chiclet/BaseChiclet.base.tsx
+++ b/packages/experiments/src/components/Chiclet/BaseChiclet.base.tsx
@@ -6,36 +6,36 @@ import {
 } from '../../Utilities';
 import { Chiclet } from './Chiclet';
 import { ChicletSize } from './Chiclet.types';
-import { OpenGraphUtilities } from './OpenGraph';
+import { extractMetaTags } from './OpenGraph';
 import { IBaseChicletProps, IBaseChicletStyles, IBaseChicletStyleProps } from './BaseChiclet.types';
 
 const getClassNames = classNamesFunction<IBaseChicletStyleProps, IBaseChicletStyles>();
 
 @customizable('BaseChicletBase', ['theme'])
 export class BaseChicletBase extends BaseComponent<IBaseChicletProps, any> {
-  private _classNames: {[key in keyof IBaseChicletStyles]: string};
+  private _classNames: { [key in keyof IBaseChicletStyles]: string };
 
   constructor(props: IBaseChicletProps) {
     super(props);
 
-    let chicletCardProps = OpenGraphUtilities.extractMetaTags(this.props.url);
+    let chicletCardProps = extractMetaTags(this.props.url);
     this.state = { chicletCardProps: chicletCardProps };
   }
 
   public render() {
-    const { size, actions, getStyles, theme } = this.props;
+    const { size, footer, getStyles, theme } = this.props;
     const { chicletCardProps } = this.state;
 
     this._classNames = getClassNames(getStyles, { theme: theme! });
 
     return (
-      <Chiclet chicletCardProps={ chicletCardProps } size={ size ? size : ChicletSize.medium } actions={ actions } />
+      <Chiclet chicletCardProps={ chicletCardProps } size={ size ? size : ChicletSize.medium } footer={ footer } />
     );
   }
 
   public componentWillReceiveProps(nextProps: any) {
     if (this.props.url != nextProps.url) {
-      this.setState({ chicletCardProps: OpenGraphUtilities.extractMetaTags(this.props.url) });
+      this.setState({ chicletCardProps: extractMetaTags(this.props.url) });
     }
   }
 }
diff --git a/packages/experiments/src/components/Chiclet/BaseChiclet.types.ts b/packages/experiments/src/components/Chiclet/BaseChiclet.types.ts
index 33cfa45d9bade..253d1150fa659 100644
--- a/packages/experiments/src/components/Chiclet/BaseChiclet.types.ts
+++ b/packages/experiments/src/components/Chiclet/BaseChiclet.types.ts
@@ -37,9 +37,9 @@ export interface IBaseChicletProps extends React.Props<BaseChicletBase> {
   size?: ChicletSize;
 
   /**
-   * Action icon buttons to render.
+   * Footer to render for the component.
    */
-  actions?: string[];
+  footer?: React.ReactElement<any>
 
   /**
    * Theme for the component.
diff --git a/packages/experiments/src/components/Chiclet/Chiclet.base.tsx b/packages/experiments/src/components/Chiclet/Chiclet.base.tsx
index b0ce744208088..2cab776841627 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.base.tsx
+++ b/packages/experiments/src/components/Chiclet/Chiclet.base.tsx
@@ -1,40 +1,21 @@
 import * as React from 'react';
 import { IChicletProps, ChicletSize } from './Chiclet.types';
-import { IChicletCardProps, IChicletAction } from './ChicletCard.types';
+import { IChicletCardProps } from './ChicletCard.types';
 import { ChicletCard } from './ChicletCard';
 
 export class ChicletBase extends React.Component<IChicletProps, IChicletCardProps> {
   public render() {
-    const { chicletCardProps, size, actions } = this.props;
-
-    var actionsToIChicletActionProps: IChicletAction[] = [];
-    if (actions != null) {
-      actions.forEach(function (string) {
-        switch (string) {
-          case "Breadcrumb":
-            actionsToIChicletActionProps.push({ buttonProps: { iconProps: { iconName: 'Breadcrumb' } } });
-            break;
-          case "Save":
-            actionsToIChicletActionProps.push({ buttonProps: { iconProps: { iconName: 'Save' } } });
-            break;
-          case "Share":
-            actionsToIChicletActionProps.push({ buttonProps: { iconProps: { iconName: 'Share' } } });
-            break;
-          default:
-            break;
-        }
-      });
-    }
+    const { chicletCardProps, size, footer } = this.props;
 
     switch (size) {
       case ChicletSize.medium:
         return (
-          <ChicletCard {...chicletCardProps} onClick={ this._onClick } actions={ actionsToIChicletActionProps } />
+          <ChicletCard { ...chicletCardProps } onClick={ this._onClick } footer={ footer } />
         );
       // @todo: handle other types of chiclets
       default:
         return (
-          <ChicletCard {...chicletCardProps} onClick={ this._onClick } actions={ actionsToIChicletActionProps } />
+          <ChicletCard { ...chicletCardProps } onClick={ this._onClick } footer={ footer } />
         );
     }
   }
diff --git a/packages/experiments/src/components/Chiclet/Chiclet.types.ts b/packages/experiments/src/components/Chiclet/Chiclet.types.ts
index 811ec6f64c479..b85ca74d56a6d 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.types.ts
+++ b/packages/experiments/src/components/Chiclet/Chiclet.types.ts
@@ -30,9 +30,9 @@ export interface IChicletProps extends React.Props<Chiclet> {
   size?: ChicletSize;
 
   /**
-   * Action icon buttons to render.
+   * Footer to render for the component.
    */
-  actions?: string[];
+  footer?: React.ReactElement<any>;
 }
 
 export enum ChicletSize {
diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx b/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx
index 56c706d0a0fb1..bb1fe0e0677ef 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx
@@ -5,10 +5,9 @@ import {
   customizable,
   classNamesFunction
 } from '../../Utilities';
-import { IChicletCardStyles, IChicletCardStyleProps, IChicletCardProps, IChicletAction } from './ChicletCard.types';
+import { IChicletCardStyles, IChicletCardStyleProps, IChicletCardProps } from './ChicletCard.types';
 import { mergeStyles } from '../../Styling';
 import { Icon } from 'office-ui-fabric-react/lib/Icon';
-import { IconButton } from 'office-ui-fabric-react/lib/Button';
 import { Image } from 'office-ui-fabric-react/lib/Image';
 import { TestImages } from 'office-ui-fabric-react/src/common/TestImages';
 
@@ -16,10 +15,10 @@ const getClassNames = classNamesFunction<IChicletCardStyleProps, IChicletCardSty
 
 @customizable('ChicletCardBase', ['theme'])
 export class ChicletCardBase extends BaseComponent<IChicletCardProps, any> {
-  private _classNames: {[key in keyof IChicletCardStyles]: string};
+  private _classNames: { [key in keyof IChicletCardStyles]: string };
 
   public render() {
-    const { styles: customStyles, title, ogType, description, image, imageType, imageWidth, imageHeight, imageAlt, url, onClick, className, actions, theme, getStyles } = this.props;
+    const { title, ogType, description, image, imageType, imageWidth, imageHeight, imageAlt, url, onClick, className, footer, theme, getStyles } = this.props;
     const actionable = (onClick) ? true : false;
 
     this._classNames = getClassNames(getStyles, { theme: theme! });
@@ -63,7 +62,7 @@ export class ChicletCardBase extends BaseComponent<IChicletCardProps, any> {
           >
             { url ? url : "https://onedrive.com/files/v-lygi/39192908430" }
           </div>
-          { actions ? this._renderFooter(actions) : (null) }
+          { footer }
         </div>
       </div>
     );
@@ -101,20 +100,6 @@ export class ChicletCardBase extends BaseComponent<IChicletCardProps, any> {
     );
   }
 
-  private _renderFooter(actions: IChicletAction[]): React.ReactElement<React.HTMLAttributes<HTMLDivElement>> {
-    return (
-      <div className={ mergeStyles(this._classNames.actions) }>
-        { actions && actions.map((action, index) => {
-          return (
-            <div className={ mergeStyles(this._classNames.action) } key={ index }>
-              <IconButton { ...action.buttonProps } />
-            </div>
-          );
-        }) }
-      </div>
-    );
-  }
-
   private _onClick = (ev: React.MouseEvent<HTMLElement>): void => {
     const { onClick } = this.props;
     if (onClick) {
diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.styles.ts b/packages/experiments/src/components/Chiclet/ChicletCard.styles.ts
index 8636bd1062733..0ec6d06ca6e2d 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.styles.ts
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.styles.ts
@@ -102,25 +102,6 @@ export const getStyles = (
         whiteSpace: 'nowrap',
         textOverflow: 'ellipsis'
       }
-    ],
-    actions: [
-      'ms-ChicletFooter',
-      {
-        paddingRight: '6px',
-        height: '24px',
-        position: 'relative'
-      }
-    ],
-    action: [
-      'ms-ChicletFooter-action',
-      {
-        float: 'right',
-        cursor: 'pointer',
-        width: '32px',
-        height: '32px',
-        backgroundColor: palette.white,
-        color: '#0078D7'
-      }
     ]
   });
 };
\ No newline at end of file
diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.types.ts b/packages/experiments/src/components/Chiclet/ChicletCard.types.ts
index 95aa015d8c372..374bd4073bda3 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.types.ts
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.types.ts
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { ChicletCardBase } from './ChicletCard.base';
 import { ITheme, IStyle } from '../../Styling';
-import { IButtonProps } from 'office-ui-fabric-react/lib/Button';
 import { IStyleFunction } from '../../Utilities';
 
 export interface IChicletCard {
@@ -71,14 +70,9 @@ export interface IChicletCardProps extends React.Props<ChicletCardBase> {
   onClick?: (ev?: React.MouseEvent<HTMLElement>) => void;
 
   /**
-   * Actions to render
+   * Footer to render for the component.
    */
-  actions?: IChicletAction[] | undefined;
-
-  /**
-   * Styling for the ChicletCard.
-   */
-  styles?: IChicletCardStyles;
+  footer?: React.ReactElement<any>;
 
   /**
    * Theme for the component.
@@ -110,16 +104,4 @@ export interface IChicletCardStyleProps {
    * Accept custom classNames
    */
   className?: string;
-}
-
-export interface IChicletAction {
-  /**
-   * Icon to render
-   */
-  buttonProps: IButtonProps;
-
-  /**
-   * Function to call when the action is clicked.
-   */
-  onClick?: (ev?: any) => void;
 }
\ No newline at end of file
diff --git a/packages/experiments/src/components/Chiclet/OpenGraph.ts b/packages/experiments/src/components/Chiclet/OpenGraph.ts
index 623f1796abb79..911ad25cb69c9 100644
--- a/packages/experiments/src/components/Chiclet/OpenGraph.ts
+++ b/packages/experiments/src/components/Chiclet/OpenGraph.ts
@@ -1,112 +1,56 @@
 import { IChicletCardProps } from './ChicletCard.types';
 
-export class OpenGraphUtilities {
-  public static extractMetaTags(url: string) {
-    var attributes: IChicletCardProps = {};
+export function extractMetaTags(url: string) {
+  var attributes: IChicletCardProps = {};
 
-    var xmlHttp = new XMLHttpRequest();
-    xmlHttp.open("GET", url, false);
-    xmlHttp.overrideMimeType('text/xml');
-    xmlHttp.send(null);
+  var xmlHttp = new XMLHttpRequest();
+  xmlHttp.open("GET", url, false);
+  xmlHttp.overrideMimeType('text/xml');
+  xmlHttp.send(null);
 
-    var metaElements = document.getElementsByTagName("meta");
-    let openGraphObject = this._getOpenGraphValues(metaElements, attributes);
+  var metaElements = document.getElementsByTagName("meta");
+  let openGraphObject = _getOpenGraphValues(metaElements, attributes);
 
-    return openGraphObject;
-  }
+  return openGraphObject;
+}
 
-  public static _getOpenGraphValues(metaElements: NodeListOf<HTMLMetaElement>, attributes: IChicletCardProps): IChicletCardProps {
-    for (var i = 0; i < metaElements.length; i++) {
-      if (metaElements[i].attributes != null && metaElements[i].attributes.length >= 2) {
-        switch (metaElements[i].attributes[0].nodeValue) {
-          case "og:title":
-            attributes.title = metaElements[i].content;
-            break;
-          case "og:type":
-            attributes.ogType = metaElements[i].content;
-            break;
-          case "og:image":
-          case "og:image:url":
-            attributes.image = metaElements[i].content;
-            break;
-          case "og:image:secure_url":
-            attributes.imageSecureUrl = metaElements[i].content;
-            break;
-          case "og:image:type":
-            attributes.imageType = metaElements[i].content;
-            break;
-          case "og:image:width":
-            attributes.imageWidth = metaElements[i].content;
-            break;
-          case "og:image:height":
-            attributes.imageHeight = metaElements[i].content;
-            break;
-          case "og:image:alt":
-            attributes.imageAlt = metaElements[i].content;
-            break;
-          case "og:description":
-            attributes.description = metaElements[i].content;
-            break;
-          case "og:url":
-            attributes.url = metaElements[i].content;
-            break;
-        }
+function _getOpenGraphValues(metaElements: NodeListOf<HTMLMetaElement>, attributes: IChicletCardProps): IChicletCardProps {
+  for (var i = 0; i < metaElements.length; i++) {
+    if (metaElements[i].attributes != null && metaElements[i].attributes.length >= 2) {
+      switch (metaElements[i].attributes[0].nodeValue) {
+        case "og:title":
+          attributes.title = metaElements[i].content;
+          break;
+        case "og:type":
+          attributes.ogType = metaElements[i].content;
+          break;
+        case "og:image":
+        case "og:image:url":
+          attributes.image = metaElements[i].content;
+          break;
+        case "og:image:secure_url":
+          attributes.imageSecureUrl = metaElements[i].content;
+          break;
+        case "og:image:type":
+          attributes.imageType = metaElements[i].content;
+          break;
+        case "og:image:width":
+          attributes.imageWidth = metaElements[i].content;
+          break;
+        case "og:image:height":
+          attributes.imageHeight = metaElements[i].content;
+          break;
+        case "og:image:alt":
+          attributes.imageAlt = metaElements[i].content;
+          break;
+        case "og:description":
+          attributes.description = metaElements[i].content;
+          break;
+        case "og:url":
+          attributes.url = metaElements[i].content;
+          break;
       }
     }
-    return attributes;
   }
-}
-// export function extractMetaTags(url: string) {
-//   var attributes: IChicletCardProps = {};
-
-//   var xmlHttp = new XMLHttpRequest();
-//   xmlHttp.open("GET", url, false);
-//   xmlHttp.overrideMimeType('text/xml');
-//   xmlHttp.send(null);
-
-//   var metaElements = document.getElementsByTagName("meta");
-//   let openGraphObject = _getOpenGraphValues(metaElements, attributes);
-
-//   return openGraphObject;
-// }
-
-// export function _getOpenGraphValues(metaElements: NodeListOf<HTMLMetaElement>, attributes: IChicletCardProps): IChicletCardProps {
-//   for (var i = 0; i < metaElements.length; i++) {
-//     if (metaElements[i].attributes != null && metaElements[i].attributes.length >= 2) {
-//       switch (metaElements[i].attributes[0].nodeValue) {
-//         case "og:title":
-//           attributes.title = metaElements[i].content;
-//           break;
-//         case "og:type":
-//           attributes.ogType = metaElements[i].content;
-//           break;
-//         case "og:image":
-//         case "og:image:url":
-//           attributes.image = metaElements[i].content;
-//           break;
-//         case "og:image:secure_url":
-//           attributes.imageSecureUrl = metaElements[i].content;
-//           break;
-//         case "og:image:type":
-//           attributes.imageType = metaElements[i].content;
-//           break;
-//         case "og:image:width":
-//           attributes.imageWidth = metaElements[i].content;
-//           break;
-//         case "og:image:height":
-//           attributes.imageHeight = metaElements[i].content;
-//           break;
-//         case "og:image:alt":
-//           attributes.imageAlt = metaElements[i].content;
-//           break;
-//         case "og:description":
-//           attributes.description = metaElements[i].content;
-//           break;
-//         case "og:url":
-//           attributes.url = metaElements[i].content;
-//           break;
-//       }
-//     }
-//   }
-//   return attributes;
-// }
\ No newline at end of file
+  return attributes;
+}
\ No newline at end of file
diff --git a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.scss b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.scss
new file mode 100644
index 0000000000000..c5ea690b7596e
--- /dev/null
+++ b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.scss
@@ -0,0 +1,16 @@
+@import '~office-ui-fabric-react/src/common/common';
+
+.footer {
+  padding-right: 6px;
+  height: 24px;
+  position: relative;
+}
+
+.action {
+  float: right;
+  cursor: pointer;
+  width: 32px;
+  height: 32px;
+  background-color: white;
+  color: #0078D7;
+}
\ No newline at end of file
diff --git a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
index 85853722dc5d4..3029d471e597f 100644
--- a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
+++ b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
@@ -3,6 +3,9 @@ import {
   BaseChiclet
 } from '../BaseChiclet';
 import { ChicletSize } from '../Chiclet.types';
+import { IButtonProps } from 'office-ui-fabric-react/lib/Button';
+import * as exampleStyles from './Chiclet.Basic.Example.scss';
+import { IconButton } from 'office-ui-fabric-react/lib/Button';
 
 export class ChicletBasicExample extends React.Component<any, any> {
   constructor(props: {}) {
@@ -10,11 +13,40 @@ export class ChicletBasicExample extends React.Component<any, any> {
   }
 
   public render() {
+    var footerButtonProps: IButtonProps[] = [{ iconProps: { iconName: 'Breadcrumb' } }, { iconProps: { iconName: 'Save' } }, { iconProps: { iconName: 'Share' } }];
+    var footer = <FooterComponent buttonProps={ footerButtonProps } />
     return (
-      <BaseChiclet url="http://localhost:4322" size={ ChicletSize.medium }
-        actions={ ["Breadcrumb", "Save", "Share"] }
+      <BaseChiclet url="http://localhost:4322" size={ ChicletSize.medium } footer={ footer }
       />
     );
   }
 
-}
\ No newline at end of file
+}
+
+export class FooterComponent extends React.Component<any, any> {
+  constructor(props: {}) {
+    super(props);
+  }
+
+  public render() {
+    const { buttonProps } = this.props;
+
+    return _renderFooter(buttonProps);
+  }
+}
+
+export interface IFooterComponent extends React.Props<FooterComponent> {
+  buttonProps: IButtonProps[];
+}
+
+function _renderFooter(buttonProps: IButtonProps[]): React.ReactElement<any> {
+  return (<div className={ exampleStyles.footer }>
+    { buttonProps && buttonProps.map((buttonProp, index) => {
+      return (
+        <div className={ exampleStyles.action } key={ index }>
+          <IconButton { ...buttonProp } />
+        </div>
+      );
+    }) }
+  </div>);
+}

From 4ba39248836904fb0954367bbe932f3199445099 Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Thu, 10 May 2018 13:30:08 -0700
Subject: [PATCH 35/67] small fixes: added comments, changed enum, removed
 placeholders

---
 .../src/components/Chiclet/BaseChiclet.base.tsx      |  2 +-
 .../src/components/Chiclet/BaseChiclet.types.ts      |  4 +++-
 .../src/components/Chiclet/Chiclet.base.tsx          |  2 +-
 .../src/components/Chiclet/Chiclet.types.ts          | 12 +++++++-----
 .../src/components/Chiclet/ChicletCard.base.tsx      |  4 ++--
 .../src/components/Chiclet/ChicletCard.types.ts      |  4 +++-
 .../Chiclet/examples/Chiclet.Basic.Example.tsx       |  2 +-
 7 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/packages/experiments/src/components/Chiclet/BaseChiclet.base.tsx b/packages/experiments/src/components/Chiclet/BaseChiclet.base.tsx
index caf7a38b1aeaa..50594c3d8cf3e 100644
--- a/packages/experiments/src/components/Chiclet/BaseChiclet.base.tsx
+++ b/packages/experiments/src/components/Chiclet/BaseChiclet.base.tsx
@@ -29,7 +29,7 @@ export class BaseChicletBase extends BaseComponent<IBaseChicletProps, any> {
     this._classNames = getClassNames(getStyles, { theme: theme! });
 
     return (
-      <Chiclet chicletCardProps={ chicletCardProps } size={ size ? size : ChicletSize.medium } footer={ footer } />
+      <Chiclet chicletCardProps={ chicletCardProps } size={ size ? size : ChicletSize.Medium } footer={ footer } />
     );
   }
 
diff --git a/packages/experiments/src/components/Chiclet/BaseChiclet.types.ts b/packages/experiments/src/components/Chiclet/BaseChiclet.types.ts
index 253d1150fa659..50560dbdf8e5c 100644
--- a/packages/experiments/src/components/Chiclet/BaseChiclet.types.ts
+++ b/packages/experiments/src/components/Chiclet/BaseChiclet.types.ts
@@ -18,7 +18,9 @@ export interface IBaseChicletProps extends React.Props<BaseChicletBase> {
    */
   componentRef?: (component: IBaseChiclet | null) => void;
 
-  /** @todo: description */
+  /**
+   * Call to provide customized styling that will layer on top of the variant rules.
+   */
   getStyles?: IStyleFunction<IBaseChicletStyleProps, IBaseChicletStyles>;
 
   /**
diff --git a/packages/experiments/src/components/Chiclet/Chiclet.base.tsx b/packages/experiments/src/components/Chiclet/Chiclet.base.tsx
index 2cab776841627..b0fdc8096b054 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.base.tsx
+++ b/packages/experiments/src/components/Chiclet/Chiclet.base.tsx
@@ -8,7 +8,7 @@ export class ChicletBase extends React.Component<IChicletProps, IChicletCardProp
     const { chicletCardProps, size, footer } = this.props;
 
     switch (size) {
-      case ChicletSize.medium:
+      case ChicletSize.Medium:
         return (
           <ChicletCard { ...chicletCardProps } onClick={ this._onClick } footer={ footer } />
         );
diff --git a/packages/experiments/src/components/Chiclet/Chiclet.types.ts b/packages/experiments/src/components/Chiclet/Chiclet.types.ts
index b85ca74d56a6d..bc97b48b9effb 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.types.ts
+++ b/packages/experiments/src/components/Chiclet/Chiclet.types.ts
@@ -21,7 +21,9 @@ export interface IChicletProps extends React.Props<Chiclet> {
    */
   chicletCardProps?: IChicletCardProps | undefined;
 
-  /** @todo: description */
+  /**
+   * Call to provide customized styling that will layer on top of the variant rules.
+   */
   getStyles?: IStyleFunction<IChicletCardStyleProps, IChicletCardStyles>;
 
   /**
@@ -39,22 +41,22 @@ export enum ChicletSize {
   /**
    * X-Small Chiclet
    */
-  xsmall = 0,
+  XSmall = 0,
 
   /**
    * Small Chiclet
    */
-  small = 1,
+  Small = 1,
 
   /**
    * Medium Chiclet
    */
-  medium = 2,
+  Medium = 2,
 
   /**
    * Large Chiclet
    */
-  large = 3
+  Large = 3
 }
 
 export interface IChicletStyleProps {
diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx b/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx
index bb1fe0e0677ef..f72929bb8c054 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx
@@ -55,12 +55,12 @@ export class ChicletCardBase extends BaseComponent<IChicletCardProps, any> {
           <div
             className={ mergeStyles(this._classNames.title) }
           >
-            { title ? title : "Placeholder" }
+            { title ? title : (null) }
           </div>
           <div
             className={ mergeStyles(this._classNames.link) }
           >
-            { url ? url : "https://onedrive.com/files/v-lygi/39192908430" }
+            { url ? url : (null) }
           </div>
           { footer }
         </div>
diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.types.ts b/packages/experiments/src/components/Chiclet/ChicletCard.types.ts
index 374bd4073bda3..b303adc7050aa 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.types.ts
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.types.ts
@@ -56,7 +56,9 @@ export interface IChicletCardProps extends React.Props<ChicletCardBase> {
    */
   componentRef?: (component: IChicletCard | null) => void;
 
-  /** @todo: description */
+  /**
+   * Call to provide customized styling that will layer on top of the variant rules.
+   */
   getStyles?: IStyleFunction<IChicletCardStyleProps, IChicletCardStyles>;
 
   /**
diff --git a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
index 3029d471e597f..18dcdca7d72e7 100644
--- a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
+++ b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
@@ -16,7 +16,7 @@ export class ChicletBasicExample extends React.Component<any, any> {
     var footerButtonProps: IButtonProps[] = [{ iconProps: { iconName: 'Breadcrumb' } }, { iconProps: { iconName: 'Save' } }, { iconProps: { iconName: 'Share' } }];
     var footer = <FooterComponent buttonProps={ footerButtonProps } />
     return (
-      <BaseChiclet url="http://localhost:4322" size={ ChicletSize.medium } footer={ footer }
+      <BaseChiclet url="http://localhost:4322" size={ ChicletSize.Medium } footer={ footer }
       />
     );
   }

From 65fba986941e7e0848eb6e92c7426dff579dd3c0 Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Thu, 10 May 2018 15:24:12 -0700
Subject: [PATCH 36/67] change breadcrumb to more icon in example

---
 .../src/components/Chiclet/examples/Chiclet.Basic.Example.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
index 18dcdca7d72e7..d451b100c85e5 100644
--- a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
+++ b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
@@ -13,7 +13,7 @@ export class ChicletBasicExample extends React.Component<any, any> {
   }
 
   public render() {
-    var footerButtonProps: IButtonProps[] = [{ iconProps: { iconName: 'Breadcrumb' } }, { iconProps: { iconName: 'Save' } }, { iconProps: { iconName: 'Share' } }];
+    var footerButtonProps: IButtonProps[] = [{ iconProps: { iconName: 'More' } }, { iconProps: { iconName: 'Save' } }, { iconProps: { iconName: 'Share' } }];
     var footer = <FooterComponent buttonProps={ footerButtonProps } />
     return (
       <BaseChiclet url="http://localhost:4322" size={ ChicletSize.Medium } footer={ footer }

From 2b657279b7326d0e8d4370838c47b5855d7df47c Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Thu, 10 May 2018 16:43:14 -0700
Subject: [PATCH 37/67] fixed parser and other small fixes

---
 .../src/components/Chiclet/ChicletCard.styles.ts         | 8 +-------
 .../src/components/Chiclet/ChicletCard.types.ts          | 2 +-
 packages/experiments/src/components/Chiclet/OpenGraph.ts | 9 ++++++---
 3 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.styles.ts b/packages/experiments/src/components/Chiclet/ChicletCard.styles.ts
index 0ec6d06ca6e2d..622fb79b09c05 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.styles.ts
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.styles.ts
@@ -32,11 +32,9 @@ export const getStyles = (
     icon: [
       'ms-ChicletCardPreview-icon',
       {
-        //padding: '10px 166px 8px 8px',
         left: '10px',
         bottom: '10px',
-        position: 'absolute',
-        color: '#166EBE'
+        position: 'absolute'
       }
     ],
     preview: [
@@ -46,8 +44,6 @@ export const getStyles = (
         height: '122px',
         width: '198px',
         position: 'relative',
-        //opacity: '0.02',
-        overflow: 'hidden', // need to fix
         backgroundColor: palette.white,
         display: 'block',
         padding: '2px 0px 2px 2px',
@@ -59,7 +55,6 @@ export const getStyles = (
         position: 'relative',
         display: 'block',
         height: '100%',
-        //lineHeight: '21px',
         overflow: 'hidden',
         wordWrap: 'break-word',
         width: '400px'
@@ -69,7 +64,6 @@ export const getStyles = (
       'ms-ChicletCardTitle',
       {
         padding: '9px 26px 5px 11px',
-        //font: theme.fonts.large,
         fontSize: '16px',
         fontWeight: 'normal',
         fontStyle: 'normal',
diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.types.ts b/packages/experiments/src/components/Chiclet/ChicletCard.types.ts
index b303adc7050aa..68bc44d09ab24 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.types.ts
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.types.ts
@@ -85,7 +85,7 @@ export interface IChicletCardProps extends React.Props<ChicletCardBase> {
    * OpenGraph props.
    */
   title?: string;
-  ogType?: string;
+  openGraphType?: string;
   description?: string;
   image?: string;
   imageSecureUrl?: string;
diff --git a/packages/experiments/src/components/Chiclet/OpenGraph.ts b/packages/experiments/src/components/Chiclet/OpenGraph.ts
index 911ad25cb69c9..74db725698e9d 100644
--- a/packages/experiments/src/components/Chiclet/OpenGraph.ts
+++ b/packages/experiments/src/components/Chiclet/OpenGraph.ts
@@ -5,10 +5,13 @@ export function extractMetaTags(url: string) {
 
   var xmlHttp = new XMLHttpRequest();
   xmlHttp.open("GET", url, false);
-  xmlHttp.overrideMimeType('text/xml');
+  xmlHttp.overrideMimeType('application/xml');
   xmlHttp.send(null);
 
-  var metaElements = document.getElementsByTagName("meta");
+  var parser = new DOMParser();
+  var doc = parser.parseFromString(xmlHttp.responseText, "text/html");
+
+  var metaElements = doc.getElementsByTagName("meta");
   let openGraphObject = _getOpenGraphValues(metaElements, attributes);
 
   return openGraphObject;
@@ -22,7 +25,7 @@ function _getOpenGraphValues(metaElements: NodeListOf<HTMLMetaElement>, attribut
           attributes.title = metaElements[i].content;
           break;
         case "og:type":
-          attributes.ogType = metaElements[i].content;
+          attributes.openGraphType = metaElements[i].content;
           break;
         case "og:image":
         case "og:image:url":

From 3965f9adf697c0b3cccdb543ef85b6fd06370e01 Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Thu, 10 May 2018 16:48:00 -0700
Subject: [PATCH 38/67] ogType to openGraphType

---
 .../src/components/Chiclet/ChicletCard.base.tsx           | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx b/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx
index f72929bb8c054..bdb213524518e 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx
@@ -18,7 +18,7 @@ export class ChicletCardBase extends BaseComponent<IChicletCardProps, any> {
   private _classNames: { [key in keyof IChicletCardStyles]: string };
 
   public render() {
-    const { title, ogType, description, image, imageType, imageWidth, imageHeight, imageAlt, url, onClick, className, footer, theme, getStyles } = this.props;
+    const { title, openGraphType, description, image, imageType, imageWidth, imageHeight, imageAlt, url, onClick, className, footer, theme, getStyles } = this.props;
     const actionable = (onClick) ? true : false;
 
     this._classNames = getClassNames(getStyles, { theme: theme! });
@@ -27,7 +27,7 @@ export class ChicletCardBase extends BaseComponent<IChicletCardProps, any> {
     const role = actionable ? (onClick ? 'button' : 'link') : undefined;
     const tabIndex = actionable ? 0 : undefined;
 
-    var preview = this._renderPreviewImage(image, imageHeight, imageWidth, ogType);
+    var preview = this._renderPreviewImage(image, imageHeight, imageWidth, openGraphType);
 
     return (
       <div
@@ -68,7 +68,7 @@ export class ChicletCardBase extends BaseComponent<IChicletCardProps, any> {
     );
   }
 
-  private _renderPreviewImage(imageUrl?: string, imageHeight?: string, imageWidth?: string, ogType?: string, imageAlt?: string): React.ReactElement<React.HTMLAttributes<HTMLDivElement>> {
+  private _renderPreviewImage(imageUrl?: string, imageHeight?: string, imageWidth?: string, openGraphType?: string, imageAlt?: string): React.ReactElement<React.HTMLAttributes<HTMLDivElement>> {
     const image = (
       <Image
         width={ imageWidth }
@@ -80,7 +80,7 @@ export class ChicletCardBase extends BaseComponent<IChicletCardProps, any> {
     );
 
     let icon;
-    switch (ogType) {
+    switch (openGraphType) {
       case "word":
         icon = <Icon className={ mergeStyles(this._classNames.icon) } iconName='WordDocument' />;
         break;

From c91dfe3075e95eec511b3428f92bc9b1d620d503 Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Fri, 11 May 2018 09:46:28 -0700
Subject: [PATCH 39/67] example with activities

---
 .../examples/Chiclet.Basic.Example.scss       | 18 +++++++++++-
 .../examples/Chiclet.Basic.Example.tsx        | 28 +++++++++++--------
 2 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.scss b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.scss
index c5ea690b7596e..e9e52029169ab 100644
--- a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.scss
+++ b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.scss
@@ -1,8 +1,24 @@
 @import '~office-ui-fabric-react/src/common/common';
 
 .footer {
-  padding-right: 6px;
   height: 24px;
+  padding-left: 11px;
+}
+
+.activities {
+  width: 184px;
+  height: 16px;
+  font-size: 12px;
+  font-weight: normal;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: 1.83;
+  letter-spacing: normal;
+  float: left;
+}
+
+.actions {
+  padding-right: 6px;
   position: relative;
 }
 
diff --git a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
index d451b100c85e5..bf57104bfc406 100644
--- a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
+++ b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
@@ -14,7 +14,7 @@ export class ChicletBasicExample extends React.Component<any, any> {
 
   public render() {
     var footerButtonProps: IButtonProps[] = [{ iconProps: { iconName: 'More' } }, { iconProps: { iconName: 'Save' } }, { iconProps: { iconName: 'Share' } }];
-    var footer = <FooterComponent buttonProps={ footerButtonProps } />
+    var footer = <FooterComponent buttonProps={ footerButtonProps } activities="10 Comments  16 Shares  87 Views" />
     return (
       <BaseChiclet url="http://localhost:4322" size={ ChicletSize.Medium } footer={ footer }
       />
@@ -29,24 +29,30 @@ export class FooterComponent extends React.Component<any, any> {
   }
 
   public render() {
-    const { buttonProps } = this.props;
+    const { buttonProps, activities } = this.props;
 
-    return _renderFooter(buttonProps);
+    return _renderFooter(buttonProps, activities);
   }
 }
 
 export interface IFooterComponent extends React.Props<FooterComponent> {
   buttonProps: IButtonProps[];
+  activities: string;
 }
 
-function _renderFooter(buttonProps: IButtonProps[]): React.ReactElement<any> {
+function _renderFooter(buttonProps: IButtonProps[], activities: string): React.ReactElement<any> {
   return (<div className={ exampleStyles.footer }>
-    { buttonProps && buttonProps.map((buttonProp, index) => {
-      return (
-        <div className={ exampleStyles.action } key={ index }>
-          <IconButton { ...buttonProp } />
-        </div>
-      );
-    }) }
+    <div className={ exampleStyles.activities }>
+      { activities ? activities : (null) }
+    </div>
+    <div className={ exampleStyles.actions }>
+      { buttonProps && buttonProps.map((buttonProp, index) => {
+        return (
+          <div className={ exampleStyles.action } key={ index }>
+            <IconButton { ...buttonProp } />
+          </div>
+        );
+      }) }
+    </div>
   </div>);
 }

From 806aff10ede0d0c345ababccac951eb858ceaf86 Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Fri, 11 May 2018 10:56:43 -0700
Subject: [PATCH 40/67] add Chiclet to index

---
 packages/experiments/src/index.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/experiments/src/index.ts b/packages/experiments/src/index.ts
index d5163bf4ed8cb..cbeed19048e38 100644
--- a/packages/experiments/src/index.ts
+++ b/packages/experiments/src/index.ts
@@ -9,4 +9,5 @@ export { SelectedPeopleList } from './SelectedItemsList';
 export { ExtendedPeoplePicker } from './ExtendedPicker';
 export { Keytip } from './Keytip';
 export { KeytipLayer } from './KeytipLayer';
-export { Shimmer } from './Shimmer';
\ No newline at end of file
+export { Shimmer } from './Shimmer';
+export { Chiclet } from './Chiclet';
\ No newline at end of file

From cbe9c0ffeb7d5bef2643b738fa174f43620b6272 Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Fri, 11 May 2018 11:15:52 -0700
Subject: [PATCH 41/67] small styling fixes

---
 .../src/components/Chiclet/ChicletCard.styles.ts       |  2 +-
 .../src/components/Chiclet/ChicletCard.types.ts        | 10 ----------
 .../Chiclet/examples/Chiclet.Basic.Example.scss        |  6 ++++--
 3 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.styles.ts b/packages/experiments/src/components/Chiclet/ChicletCard.styles.ts
index 622fb79b09c05..1baed8c35b8c0 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.styles.ts
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.styles.ts
@@ -81,7 +81,7 @@ export const getStyles = (
     link: [
       'ms-ChicletCardLink',
       {
-        padding: '0px 16px 25px 11px',
+        padding: '0px 16px 17px 11px',
         fontSize: '12px',
         fontWeight: 'normal',
         fontStyle: 'normal',
diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.types.ts b/packages/experiments/src/components/Chiclet/ChicletCard.types.ts
index 68bc44d09ab24..2ec540a6afbff 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.types.ts
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.types.ts
@@ -37,16 +37,6 @@ export interface IChicletCardStyles {
    * Style for the link to the file.
    */
   link?: IStyle;
-
-  /**
-   * Style for the collective actions in the lower right of the component.
-   */
-  actions?: IStyle;
-
-  /**
-   * Style for the individual actions in the lower right of the component.
-   */
-  action?: IStyle;
 }
 
 export interface IChicletCardProps extends React.Props<ChicletCardBase> {
diff --git a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.scss b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.scss
index e9e52029169ab..dd3ca31471d8b 100644
--- a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.scss
+++ b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.scss
@@ -1,7 +1,7 @@
 @import '~office-ui-fabric-react/src/common/common';
 
 .footer {
-  height: 24px;
+  height: 36px;
   padding-left: 11px;
 }
 
@@ -15,6 +15,8 @@
   line-height: 1.83;
   letter-spacing: normal;
   float: left;
+  padding-top: 8px;
+  padding-bottom: 12px;
 }
 
 .actions {
@@ -26,7 +28,7 @@
   float: right;
   cursor: pointer;
   width: 32px;
-  height: 32px;
+  height: 36px;
   background-color: white;
   color: #0078D7;
 }
\ No newline at end of file

From eba218561031036940ce3aea362cbfac006dad5f Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Mon, 14 May 2018 17:21:11 -0700
Subject: [PATCH 42/67] Breadcrumb description example

---
 .../components/Chiclet/BaseChiclet.base.tsx   |  4 +-
 .../components/Chiclet/BaseChiclet.types.ts   |  5 ++
 .../src/components/Chiclet/Chiclet.base.tsx   |  6 +-
 .../src/components/Chiclet/Chiclet.types.ts   |  5 ++
 .../components/Chiclet/ChicletCard.base.tsx   |  4 +-
 .../components/Chiclet/ChicletCard.styles.ts  |  2 +-
 .../components/Chiclet/ChicletCard.types.ts   | 10 ++-
 .../examples/Chiclet.Basic.Example.scss       | 24 ++++++++
 .../examples/Chiclet.Basic.Example.tsx        | 61 ++++++++++++++++++-
 9 files changed, 108 insertions(+), 13 deletions(-)

diff --git a/packages/experiments/src/components/Chiclet/BaseChiclet.base.tsx b/packages/experiments/src/components/Chiclet/BaseChiclet.base.tsx
index 50594c3d8cf3e..aa46f848c4b09 100644
--- a/packages/experiments/src/components/Chiclet/BaseChiclet.base.tsx
+++ b/packages/experiments/src/components/Chiclet/BaseChiclet.base.tsx
@@ -23,13 +23,13 @@ export class BaseChicletBase extends BaseComponent<IBaseChicletProps, any> {
   }
 
   public render() {
-    const { size, footer, getStyles, theme } = this.props;
+    const { size, footer, getStyles, theme, description } = this.props;
     const { chicletCardProps } = this.state;
 
     this._classNames = getClassNames(getStyles, { theme: theme! });
 
     return (
-      <Chiclet chicletCardProps={ chicletCardProps } size={ size ? size : ChicletSize.Medium } footer={ footer } />
+      <Chiclet chicletCardProps={ chicletCardProps } size={ size ? size : ChicletSize.Medium } footer={ footer } description={ description } />
     );
   }
 
diff --git a/packages/experiments/src/components/Chiclet/BaseChiclet.types.ts b/packages/experiments/src/components/Chiclet/BaseChiclet.types.ts
index 50560dbdf8e5c..251a561c73c6b 100644
--- a/packages/experiments/src/components/Chiclet/BaseChiclet.types.ts
+++ b/packages/experiments/src/components/Chiclet/BaseChiclet.types.ts
@@ -38,6 +38,11 @@ export interface IBaseChicletProps extends React.Props<BaseChicletBase> {
    */
   size?: ChicletSize;
 
+  /**
+   * Description to render for the component.
+   */
+  description?: React.ReactElement<any>
+
   /**
    * Footer to render for the component.
    */
diff --git a/packages/experiments/src/components/Chiclet/Chiclet.base.tsx b/packages/experiments/src/components/Chiclet/Chiclet.base.tsx
index b0fdc8096b054..f91b8a5be58f1 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.base.tsx
+++ b/packages/experiments/src/components/Chiclet/Chiclet.base.tsx
@@ -5,17 +5,17 @@ import { ChicletCard } from './ChicletCard';
 
 export class ChicletBase extends React.Component<IChicletProps, IChicletCardProps> {
   public render() {
-    const { chicletCardProps, size, footer } = this.props;
+    const { chicletCardProps, size, footer, description } = this.props;
 
     switch (size) {
       case ChicletSize.Medium:
         return (
-          <ChicletCard { ...chicletCardProps } onClick={ this._onClick } footer={ footer } />
+          <ChicletCard { ...chicletCardProps } onClick={ this._onClick } footer={ footer } description={ description } />
         );
       // @todo: handle other types of chiclets
       default:
         return (
-          <ChicletCard { ...chicletCardProps } onClick={ this._onClick } footer={ footer } />
+          <ChicletCard { ...chicletCardProps } onClick={ this._onClick } footer={ footer } description={ description } />
         );
     }
   }
diff --git a/packages/experiments/src/components/Chiclet/Chiclet.types.ts b/packages/experiments/src/components/Chiclet/Chiclet.types.ts
index bc97b48b9effb..942039fe11f1c 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.types.ts
+++ b/packages/experiments/src/components/Chiclet/Chiclet.types.ts
@@ -31,6 +31,11 @@ export interface IChicletProps extends React.Props<Chiclet> {
    */
   size?: ChicletSize;
 
+  /**
+   * Description to render for the component.
+   */
+  description?: React.ReactElement<any>;
+
   /**
    * Footer to render for the component.
    */
diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx b/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx
index bdb213524518e..91e18754bee56 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx
@@ -58,9 +58,9 @@ export class ChicletCardBase extends BaseComponent<IChicletCardProps, any> {
             { title ? title : (null) }
           </div>
           <div
-            className={ mergeStyles(this._classNames.link) }
+            className={ mergeStyles(this._classNames.description) }
           >
-            { url ? url : (null) }
+            { description ? description : url }
           </div>
           { footer }
         </div>
diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.styles.ts b/packages/experiments/src/components/Chiclet/ChicletCard.styles.ts
index 1baed8c35b8c0..41f5f9d42a2b7 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.styles.ts
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.styles.ts
@@ -78,7 +78,7 @@ export const getStyles = (
         wordWrap: 'break-word'
       }
     ],
-    link: [
+    description: [
       'ms-ChicletCardLink',
       {
         padding: '0px 16px 17px 11px',
diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.types.ts b/packages/experiments/src/components/Chiclet/ChicletCard.types.ts
index 2ec540a6afbff..62a3f8f47ef9f 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.types.ts
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.types.ts
@@ -34,9 +34,9 @@ export interface IChicletCardStyles {
   title?: IStyle;
 
   /**
-   * Style for the link to the file.
+   * Style for the dile description, which could be a link, description, etc.
    */
-  link?: IStyle;
+  description?: IStyle;
 }
 
 export interface IChicletCardProps extends React.Props<ChicletCardBase> {
@@ -61,6 +61,11 @@ export interface IChicletCardProps extends React.Props<ChicletCardBase> {
    */
   onClick?: (ev?: React.MouseEvent<HTMLElement>) => void;
 
+  /**
+   * Description to render for the component.
+   */
+  description?: React.ReactElement<any>;
+
   /**
    * Footer to render for the component.
    */
@@ -76,7 +81,6 @@ export interface IChicletCardProps extends React.Props<ChicletCardBase> {
    */
   title?: string;
   openGraphType?: string;
-  description?: string;
   image?: string;
   imageSecureUrl?: string;
   imageWidth?: string;
diff --git a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.scss b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.scss
index dd3ca31471d8b..8ae6bbb54ae18 100644
--- a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.scss
+++ b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.scss
@@ -31,4 +31,28 @@
   height: 36px;
   background-color: white;
   color: #0078D7;
+}
+
+.description {
+  //padding: 0px 16px 17px 11px;
+  font-size: 12px;
+  font-weight: normal;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: 1.33;
+  letter-spacing: normal;
+  text-align: left;
+  color: #797671;
+  width: 248px;
+  height: 16px;
+  //overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  margin-top: 0px !important;
+}
+
+.chevron {
+  font-size: 8px;
+  padding-left: 3px;
+  padding-right: 3px;
 }
\ No newline at end of file
diff --git a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
index bf57104bfc406..de5410ad5d6ab 100644
--- a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
+++ b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
@@ -6,6 +6,10 @@ import { ChicletSize } from '../Chiclet.types';
 import { IButtonProps } from 'office-ui-fabric-react/lib/Button';
 import * as exampleStyles from './Chiclet.Basic.Example.scss';
 import { IconButton } from 'office-ui-fabric-react/lib/Button';
+import { Icon } from 'office-ui-fabric-react/lib/Icon';
+import { TooltipHost, TooltipOverflowMode } from 'office-ui-fabric-react/lib/Tooltip';
+import { Breadcrumb, IBreadcrumbProps, IBreadcrumbItem, IDividerAsProps, Divider } from 'office-ui-fabric-react/lib/Breadcrumb';
+import { IRenderFunction, IComponentAs, getRTL } from '../../../Utilities';
 
 export class ChicletBasicExample extends React.Component<any, any> {
   constructor(props: {}) {
@@ -14,13 +18,35 @@ export class ChicletBasicExample extends React.Component<any, any> {
 
   public render() {
     var footerButtonProps: IButtonProps[] = [{ iconProps: { iconName: 'More' } }, { iconProps: { iconName: 'Save' } }, { iconProps: { iconName: 'Share' } }];
-    var footer = <FooterComponent buttonProps={ footerButtonProps } activities="10 Comments  16 Shares  87 Views" />
+    var footer = <FooterComponent buttonProps={ footerButtonProps } activities="10 Comments  16 Shares  87 Views" />;
+    var breadcrumb: IBreadcrumbProps = {
+      items: [
+        { text: 'Files', 'key': 'Files' },
+        { text: 'OneDrive Design', 'key': 'OneDrive Design' },
+        { text: 'Emails', 'key': 'Emails' },
+        { text: 'Campaigns', 'key': 'Campaigns' },
+      ]
+    };
+    var divider = () => <Icon iconName={ getRTL() ? 'ChevronLeft' : 'ChevronRightSmall' } className={ exampleStyles.chevron } />;
+    var description =
+      <DescriptionComponent breadcrumb={ breadcrumb } onRenderItem={ this._onRenderItem } dividerAs={ divider } />
     return (
-      <BaseChiclet url="http://localhost:4322" size={ ChicletSize.Medium } footer={ footer }
+      <BaseChiclet url="http://localhost:4322" size={ ChicletSize.Medium } footer={ footer } description={ description }
       />
     );
   }
 
+  private _onRenderItem(item: IBreadcrumbItem) {
+    return (
+      <TooltipHost
+        content={ item.text }
+        overflowMode={ TooltipOverflowMode.Parent }
+        className={ exampleStyles.description }
+      >
+        { item.text }
+      </TooltipHost>
+    );
+  }
 }
 
 export class FooterComponent extends React.Component<any, any> {
@@ -56,3 +82,34 @@ function _renderFooter(buttonProps: IButtonProps[], activities: string): React.R
     </div>
   </div>);
 }
+
+export class DescriptionComponent extends React.Component<any, any> {
+  constructor(props: {}) {
+    super(props);
+  }
+
+  public render() {
+    const { description, breadcrumb, onRenderItem, dividerAs } = this.props;
+
+    return _renderDescription(description, breadcrumb, onRenderItem, dividerAs);
+  }
+}
+
+export interface IDescriptionComponent extends React.Props<DescriptionComponent> {
+  description?: string;
+  breadcrumb?: IBreadcrumbProps;
+  onRenderItem?: IRenderFunction<IBreadcrumbItem>;
+}
+
+function _renderDescription(description: string, breadcrumb: IBreadcrumbProps, onRenderItem: IRenderFunction<IBreadcrumbItem>, dividerAs: IComponentAs<IDividerAsProps>): React.ReactElement<any> {
+  return (
+    <div>
+      <Breadcrumb
+        items={ breadcrumb.items }
+        className={ exampleStyles.description }
+        onRenderItem={ onRenderItem }
+        dividerAs={ dividerAs }
+      />
+    </div>
+  );
+}
\ No newline at end of file

From 00c9ca39dbf46e14671a4f6c3e5eff9c8ce1a708 Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Tue, 15 May 2018 13:29:56 -0700
Subject: [PATCH 43/67] separate out examples

---
 .../components/Chiclet/ChicletCard.styles.ts  |   1 +
 .../src/components/Chiclet/ChicletPage.tsx    |   7 +-
 .../examples/Chiclet.Basic.Example.tsx        |  32 +----
 .../examples/Chiclet.Breadcrumb.Example.tsx   | 115 ++++++++++++++++++
 4 files changed, 126 insertions(+), 29 deletions(-)
 create mode 100644 packages/experiments/src/components/Chiclet/examples/Chiclet.Breadcrumb.Example.tsx

diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.styles.ts b/packages/experiments/src/components/Chiclet/ChicletCard.styles.ts
index 41f5f9d42a2b7..4f09c42c9036e 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.styles.ts
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.styles.ts
@@ -32,6 +32,7 @@ export const getStyles = (
     icon: [
       'ms-ChicletCardPreview-icon',
       {
+        height: '24px',
         left: '10px',
         bottom: '10px',
         position: 'absolute'
diff --git a/packages/experiments/src/components/Chiclet/ChicletPage.tsx b/packages/experiments/src/components/Chiclet/ChicletPage.tsx
index c13707654ad06..0351f15136294 100644
--- a/packages/experiments/src/components/Chiclet/ChicletPage.tsx
+++ b/packages/experiments/src/components/Chiclet/ChicletPage.tsx
@@ -7,6 +7,8 @@ import {
 
 import { ChicletBasicExample } from './examples/Chiclet.Basic.Example';
 const ChicletBasicExampleCode = require('!raw-loader!@uifabric/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx') as string;
+import { ChicletBreadcrumbExample } from './examples/Chiclet.Breadcrumb.Example';
+const ChicletBreadcrumbExampleCode = require('!raw-loader!@uifabric/experiments/src/components/Chiclet/examples/Chiclet.Breadcrumb.Example.tsx') as string;
 
 export class ChicletPage extends React.Component<IComponentDemoPageProps, {}> {
   public render(): JSX.Element {
@@ -16,9 +18,12 @@ export class ChicletPage extends React.Component<IComponentDemoPageProps, {}> {
         componentName='Chiclet'
         exampleCards={
           <div>
-            <ExampleCard title='Chiclet' isOptIn={ true } code={ ChicletBasicExampleCode }>
+            <ExampleCard title='Basic Medium-sized Chiclet' isOptIn={ true } code={ ChicletBasicExampleCode }>
               <ChicletBasicExample />
             </ExampleCard>
+            <ExampleCard title='Medium-sized Chiclet with Breadcrumb' isOptIn={ true } code={ ChicletBreadcrumbExampleCode }>
+              <ChicletBreadcrumbExample />
+            </ExampleCard>
           </div>
         }
         propertiesTables={
diff --git a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
index de5410ad5d6ab..90af019d191ac 100644
--- a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
+++ b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
@@ -6,10 +6,8 @@ import { ChicletSize } from '../Chiclet.types';
 import { IButtonProps } from 'office-ui-fabric-react/lib/Button';
 import * as exampleStyles from './Chiclet.Basic.Example.scss';
 import { IconButton } from 'office-ui-fabric-react/lib/Button';
-import { Icon } from 'office-ui-fabric-react/lib/Icon';
-import { TooltipHost, TooltipOverflowMode } from 'office-ui-fabric-react/lib/Tooltip';
-import { Breadcrumb, IBreadcrumbProps, IBreadcrumbItem, IDividerAsProps, Divider } from 'office-ui-fabric-react/lib/Breadcrumb';
-import { IRenderFunction, IComponentAs, getRTL } from '../../../Utilities';
+import { Breadcrumb, IBreadcrumbProps, IBreadcrumbItem, IDividerAsProps } from 'office-ui-fabric-react/lib/Breadcrumb';
+import { IRenderFunction, IComponentAs } from '../../../Utilities';
 
 export class ChicletBasicExample extends React.Component<any, any> {
   constructor(props: {}) {
@@ -19,32 +17,10 @@ export class ChicletBasicExample extends React.Component<any, any> {
   public render() {
     var footerButtonProps: IButtonProps[] = [{ iconProps: { iconName: 'More' } }, { iconProps: { iconName: 'Save' } }, { iconProps: { iconName: 'Share' } }];
     var footer = <FooterComponent buttonProps={ footerButtonProps } activities="10 Comments  16 Shares  87 Views" />;
-    var breadcrumb: IBreadcrumbProps = {
-      items: [
-        { text: 'Files', 'key': 'Files' },
-        { text: 'OneDrive Design', 'key': 'OneDrive Design' },
-        { text: 'Emails', 'key': 'Emails' },
-        { text: 'Campaigns', 'key': 'Campaigns' },
-      ]
-    };
-    var divider = () => <Icon iconName={ getRTL() ? 'ChevronLeft' : 'ChevronRightSmall' } className={ exampleStyles.chevron } />;
-    var description =
-      <DescriptionComponent breadcrumb={ breadcrumb } onRenderItem={ this._onRenderItem } dividerAs={ divider } />
-    return (
-      <BaseChiclet url="http://localhost:4322" size={ ChicletSize.Medium } footer={ footer } description={ description }
-      />
-    );
-  }
 
-  private _onRenderItem(item: IBreadcrumbItem) {
     return (
-      <TooltipHost
-        content={ item.text }
-        overflowMode={ TooltipOverflowMode.Parent }
-        className={ exampleStyles.description }
-      >
-        { item.text }
-      </TooltipHost>
+      <BaseChiclet url="http://localhost:4322" size={ ChicletSize.Medium } footer={ footer }
+      />
     );
   }
 }
diff --git a/packages/experiments/src/components/Chiclet/examples/Chiclet.Breadcrumb.Example.tsx b/packages/experiments/src/components/Chiclet/examples/Chiclet.Breadcrumb.Example.tsx
new file mode 100644
index 0000000000000..8fe59a0c22cf1
--- /dev/null
+++ b/packages/experiments/src/components/Chiclet/examples/Chiclet.Breadcrumb.Example.tsx
@@ -0,0 +1,115 @@
+import * as React from 'react';
+import {
+  BaseChiclet
+} from '../BaseChiclet';
+import { ChicletSize } from '../Chiclet.types';
+import { IButtonProps } from 'office-ui-fabric-react/lib/Button';
+import * as exampleStyles from './Chiclet.Basic.Example.scss';
+import { IconButton } from 'office-ui-fabric-react/lib/Button';
+import { Icon } from 'office-ui-fabric-react/lib/Icon';
+import { TooltipHost, TooltipOverflowMode } from 'office-ui-fabric-react/lib/Tooltip';
+import { Breadcrumb, IBreadcrumbProps, IBreadcrumbItem, IDividerAsProps } from 'office-ui-fabric-react/lib/Breadcrumb';
+import { IRenderFunction, IComponentAs, getRTL } from '../../../Utilities';
+
+export class ChicletBreadcrumbExample extends React.Component<any, any> {
+  constructor(props: {}) {
+    super(props);
+  }
+
+  public render() {
+    var footerButtonProps: IButtonProps[] = [{ iconProps: { iconName: 'More' } }, { iconProps: { iconName: 'Save' } }, { iconProps: { iconName: 'Share' } }];
+    var footer = <FooterComponent buttonProps={ footerButtonProps } activities="10 Comments  16 Shares  87 Views" />;
+    var breadcrumb: IBreadcrumbProps = {
+      items: [
+        { text: 'Files', 'key': 'Files' },
+        { text: 'OneDrive Design', 'key': 'OneDrive Design' },
+        { text: 'Emails', 'key': 'Emails' },
+        { text: 'Campaigns', 'key': 'Campaigns' },
+      ]
+    };
+    var divider = () => <Icon iconName={ getRTL() ? 'ChevronLeft' : 'ChevronRightSmall' } className={ exampleStyles.chevron } />;
+    var description =
+      <DescriptionComponent breadcrumb={ breadcrumb } onRenderItem={ this._onRenderItem } dividerAs={ divider } />
+    return (
+      <BaseChiclet url="http://localhost:4322" size={ ChicletSize.Medium } footer={ footer } description={ description }
+      />
+    );
+  }
+
+  private _onRenderItem(item: IBreadcrumbItem) {
+    return (
+      <TooltipHost
+        content={ item.text }
+        overflowMode={ TooltipOverflowMode.Parent }
+        className={ exampleStyles.description }
+      >
+        { item.text }
+      </TooltipHost>
+    );
+  }
+}
+
+export class FooterComponent extends React.Component<any, any> {
+  constructor(props: {}) {
+    super(props);
+  }
+
+  public render() {
+    const { buttonProps, activities } = this.props;
+
+    return _renderFooter(buttonProps, activities);
+  }
+}
+
+export interface IFooterComponent extends React.Props<FooterComponent> {
+  buttonProps: IButtonProps[];
+  activities: string;
+}
+
+function _renderFooter(buttonProps: IButtonProps[], activities: string): React.ReactElement<any> {
+  return (<div className={ exampleStyles.footer }>
+    <div className={ exampleStyles.activities }>
+      { activities ? activities : (null) }
+    </div>
+    <div className={ exampleStyles.actions }>
+      { buttonProps && buttonProps.map((buttonProp, index) => {
+        return (
+          <div className={ exampleStyles.action } key={ index }>
+            <IconButton { ...buttonProp } />
+          </div>
+        );
+      }) }
+    </div>
+  </div>);
+}
+
+export class DescriptionComponent extends React.Component<any, any> {
+  constructor(props: {}) {
+    super(props);
+  }
+
+  public render() {
+    const { description, breadcrumb, onRenderItem, dividerAs } = this.props;
+
+    return _renderDescription(description, breadcrumb, onRenderItem, dividerAs);
+  }
+}
+
+export interface IDescriptionComponent extends React.Props<DescriptionComponent> {
+  description?: string;
+  breadcrumb?: IBreadcrumbProps;
+  onRenderItem?: IRenderFunction<IBreadcrumbItem>;
+}
+
+function _renderDescription(description: string, breadcrumb: IBreadcrumbProps, onRenderItem: IRenderFunction<IBreadcrumbItem>, dividerAs: IComponentAs<IDividerAsProps>): React.ReactElement<any> {
+  return (
+    <div>
+      <Breadcrumb
+        items={ breadcrumb.items }
+        className={ exampleStyles.description }
+        onRenderItem={ onRenderItem }
+        dividerAs={ dividerAs }
+      />
+    </div>
+  );
+}
\ No newline at end of file

From 6d762d2d3b7715d53d79fc82c70f8ee1f2778e88 Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Tue, 15 May 2018 14:40:51 -0700
Subject: [PATCH 44/67] nicer icons and defaultProps for file preview image

---
 .../components/Chiclet/BaseChiclet.types.ts   |  3 +++
 .../components/Chiclet/ChicletCard.base.tsx   | 24 ++++++++++++++-----
 .../components/Chiclet/ChicletCard.types.ts   | 11 +++++++++
 3 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/packages/experiments/src/components/Chiclet/BaseChiclet.types.ts b/packages/experiments/src/components/Chiclet/BaseChiclet.types.ts
index 251a561c73c6b..e7607883f42c4 100644
--- a/packages/experiments/src/components/Chiclet/BaseChiclet.types.ts
+++ b/packages/experiments/src/components/Chiclet/BaseChiclet.types.ts
@@ -62,5 +62,8 @@ export interface IBaseChicletStyleProps {
 }
 
 export interface IBaseChicletStyles {
+  /**
+   * Style for the root element when fixed.
+   */
   root?: IStyle;
 }
\ No newline at end of file
diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx b/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx
index 91e18754bee56..de42cac6ec500 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx
@@ -7,14 +7,20 @@ import {
 } from '../../Utilities';
 import { IChicletCardStyles, IChicletCardStyleProps, IChicletCardProps } from './ChicletCard.types';
 import { mergeStyles } from '../../Styling';
-import { Icon } from 'office-ui-fabric-react/lib/Icon';
 import { Image } from 'office-ui-fabric-react/lib/Image';
 import { TestImages } from 'office-ui-fabric-react/src/common/TestImages';
 
 const getClassNames = classNamesFunction<IChicletCardStyleProps, IChicletCardStyles>();
 
+const ASSET_CDN_BASE_URL = 'https://static2.sharepointonline.com/files/fabric/assets';
+
 @customizable('ChicletCardBase', ['theme'])
 export class ChicletCardBase extends BaseComponent<IChicletCardProps, any> {
+  public static defaultProps: IChicletCardProps = {
+    imageWidth: '198px',
+    imageHeight: '122px'
+  };
+
   private _classNames: { [key in keyof IChicletCardStyles]: string };
 
   public render() {
@@ -79,16 +85,22 @@ export class ChicletCardBase extends BaseComponent<IChicletCardProps, any> {
       />
     );
 
-    let icon;
-    switch (openGraphType) {
+    let src;
+    if (openGraphType != null) {
+      src = `${ASSET_CDN_BASE_URL}/brand-icons/product/svg/` + openGraphType + `_16x1_5.svg`;
+    }
+    let icon = <img className={ mergeStyles(this._classNames.icon) } src={ src } />;
+    switch (openGraphType) { // for "hero" apps, we'll use the app icons
       case "word":
-        icon = <Icon className={ mergeStyles(this._classNames.icon) } iconName='WordDocument' />;
+      case "docx":
+        icon = <img className={ mergeStyles(this._classNames.icon) } src={ `${ASSET_CDN_BASE_URL}/brand-icons/product/svg/word_16x1_5.svg` } />;
         break;
       case "powerpoint":
-        icon = <Icon className={ mergeStyles(this._classNames.icon) } iconName='PowerPointDocument' />;
+      case "pptx":
+        icon = <img className={ mergeStyles(this._classNames.icon) } src={ `${ASSET_CDN_BASE_URL}/brand-icons/product/svg/powerpoint_16x1_5.svg` } />;
         break;
       case "excel":
-        icon = <Icon className={ mergeStyles(this._classNames.icon) } iconName='ExcelDocument' />;
+        icon = <img className={ mergeStyles(this._classNames.icon) } src={ `${ASSET_CDN_BASE_URL}/brand-icons/product/svg/excel_16x1_5.svg` } />;
         break;
     }
 
diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.types.ts b/packages/experiments/src/components/Chiclet/ChicletCard.types.ts
index 62a3f8f47ef9f..cf293a2861b2e 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.types.ts
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.types.ts
@@ -83,8 +83,19 @@ export interface IChicletCardProps extends React.Props<ChicletCardBase> {
   openGraphType?: string;
   image?: string;
   imageSecureUrl?: string;
+
+  /**
+   * The width of the image.
+   * @default '198px'
+   */
   imageWidth?: string;
+
+  /**
+   * The height of the image.
+   * @default '122px'
+   */
   imageHeight?: string;
+
   imageType?: string;
   imageAlt?: string;
   url?: string;

From 7a356197223b9c69326da802d5409613a35f32b8 Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Tue, 15 May 2018 14:41:21 -0700
Subject: [PATCH 45/67] added properties table

---
 .../experiments/src/components/Chiclet/ChicletPage.tsx   | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/experiments/src/components/Chiclet/ChicletPage.tsx b/packages/experiments/src/components/Chiclet/ChicletPage.tsx
index 0351f15136294..b55fc01dbc0a5 100644
--- a/packages/experiments/src/components/Chiclet/ChicletPage.tsx
+++ b/packages/experiments/src/components/Chiclet/ChicletPage.tsx
@@ -2,7 +2,8 @@ import * as React from 'react';
 import {
   ExampleCard,
   IComponentDemoPageProps,
-  ComponentPage
+  ComponentPage,
+  PropertiesTableSet
 } from '@uifabric/example-app-base';
 
 import { ChicletBasicExample } from './examples/Chiclet.Basic.Example';
@@ -27,7 +28,11 @@ export class ChicletPage extends React.Component<IComponentDemoPageProps, {}> {
           </div>
         }
         propertiesTables={
-          <div />
+          <PropertiesTableSet
+            sources={ [
+              require<string>('!raw-loader!@uifabric/experiments/src/components/Chiclet/Chiclet.types.ts')
+            ] }
+          />
         }
         overview={
           <div />

From db18be7d369cf570e4edc4b18b890dab7aaab989 Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Tue, 15 May 2018 16:51:49 -0700
Subject: [PATCH 46/67] fixed preview image

---
 .../components/Chiclet/ChicletCard.base.tsx   | 48 +++++++++++--------
 .../components/Chiclet/ChicletCard.types.ts   |  4 +-
 2 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx b/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx
index de42cac6ec500..4e68634ad4226 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx
@@ -14,11 +14,14 @@ const getClassNames = classNamesFunction<IChicletCardStyleProps, IChicletCardSty
 
 const ASSET_CDN_BASE_URL = 'https://static2.sharepointonline.com/files/fabric/assets';
 
+const PREVIEW_IMAGE_WIDTH = '198px';
+const PREVIEW_IMAGE_HEIGHT = '122px';
+
 @customizable('ChicletCardBase', ['theme'])
 export class ChicletCardBase extends BaseComponent<IChicletCardProps, any> {
   public static defaultProps: IChicletCardProps = {
-    imageWidth: '198px',
-    imageHeight: '122px'
+    imageWidth: PREVIEW_IMAGE_WIDTH,
+    imageHeight: PREVIEW_IMAGE_HEIGHT
   };
 
   private _classNames: { [key in keyof IChicletCardStyles]: string };
@@ -46,14 +49,7 @@ export class ChicletCardBase extends BaseComponent<IChicletCardProps, any> {
         <div
           className={ mergeStyles(this._classNames.preview) }
         >
-          { image ?
-            preview :
-            (<Image
-              src={ TestImages.documentPreviewTwo }
-              role='presentation'
-              alt=''
-            />)
-          }
+          { preview }
         </div>
         <div
           className={ mergeStyles(this._classNames.info) }
@@ -75,15 +71,29 @@ export class ChicletCardBase extends BaseComponent<IChicletCardProps, any> {
   }
 
   private _renderPreviewImage(imageUrl?: string, imageHeight?: string, imageWidth?: string, openGraphType?: string, imageAlt?: string): React.ReactElement<React.HTMLAttributes<HTMLDivElement>> {
-    const image = (
-      <Image
-        width={ imageWidth }
-        height={ imageHeight }
-        src={ TestImages.documentPreview }
-        role='presentation'
-        alt={ imageAlt ? imageAlt : undefined }
-      />
-    );
+    let image;
+    if (imageUrl != null) {
+      image = (
+        <Image
+          width={ imageWidth }
+          height={ imageHeight }
+          src={ imageUrl }
+          role='presentation'
+          alt={ imageAlt ? imageAlt : undefined }
+        />
+      );
+    }
+    else {
+      image = (
+        <Image
+          width={ PREVIEW_IMAGE_WIDTH }
+          height={ PREVIEW_IMAGE_HEIGHT }
+          src={ openGraphType ? `${ASSET_CDN_BASE_URL}/brand-icons/document/svg/` + openGraphType + `_48x1.svg` : TestImages.documentPreview /* @todo: this will be replaced by something built by the design team */ }
+          role='presentation'
+          alt={ imageAlt ? imageAlt : undefined }
+        />
+      );
+    }
 
     let src;
     if (openGraphType != null) {
diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.types.ts b/packages/experiments/src/components/Chiclet/ChicletCard.types.ts
index cf293a2861b2e..f6955d1286c67 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.types.ts
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.types.ts
@@ -85,13 +85,13 @@ export interface IChicletCardProps extends React.Props<ChicletCardBase> {
   imageSecureUrl?: string;
 
   /**
-   * The width of the image.
+   * The width of the preview image.
    * @default '198px'
    */
   imageWidth?: string;
 
   /**
-   * The height of the image.
+   * The height of the preview image.
    * @default '122px'
    */
   imageHeight?: string;

From 02849e33666b62747e45c38d0e499f0353e97553 Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Tue, 15 May 2018 17:13:45 -0700
Subject: [PATCH 47/67] change file

---
 .../experiments/chiclet_2018-05-16-00-12.json         | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 common/changes/@uifabric/experiments/chiclet_2018-05-16-00-12.json

diff --git a/common/changes/@uifabric/experiments/chiclet_2018-05-16-00-12.json b/common/changes/@uifabric/experiments/chiclet_2018-05-16-00-12.json
new file mode 100644
index 0000000000000..c86fde920bb8a
--- /dev/null
+++ b/common/changes/@uifabric/experiments/chiclet_2018-05-16-00-12.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/experiments",
+      "comment": "Implementation of the Chiclet component",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/experiments",
+  "email": "naethell@microsoft.com"
+}
\ No newline at end of file

From ada5ffe3abe2dbb82c8f8442ed7f7b395b9b1fcc Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Wed, 16 May 2018 12:34:46 -0700
Subject: [PATCH 48/67] just pass in a Breadcrumb component and breadcrumb
 styling fixes

---
 .../examples/Chiclet.Basic.Example.scss       |  7 ++-
 .../examples/Chiclet.Breadcrumb.Example.tsx   | 54 +++++--------------
 2 files changed, 19 insertions(+), 42 deletions(-)

diff --git a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.scss b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.scss
index 8ae6bbb54ae18..e1faff3f2d842 100644
--- a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.scss
+++ b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.scss
@@ -48,11 +48,16 @@
   //overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  margin-top: 0px !important;
 }
 
 .chevron {
   font-size: 8px;
   padding-left: 3px;
   padding-right: 3px;
+}
+
+:global {
+  .ms-ChicletCard .ms-Breadcrumb {
+    margin-top: 0px;
+  }
 }
\ No newline at end of file
diff --git a/packages/experiments/src/components/Chiclet/examples/Chiclet.Breadcrumb.Example.tsx b/packages/experiments/src/components/Chiclet/examples/Chiclet.Breadcrumb.Example.tsx
index 8fe59a0c22cf1..269878c907603 100644
--- a/packages/experiments/src/components/Chiclet/examples/Chiclet.Breadcrumb.Example.tsx
+++ b/packages/experiments/src/components/Chiclet/examples/Chiclet.Breadcrumb.Example.tsx
@@ -8,8 +8,8 @@ import * as exampleStyles from './Chiclet.Basic.Example.scss';
 import { IconButton } from 'office-ui-fabric-react/lib/Button';
 import { Icon } from 'office-ui-fabric-react/lib/Icon';
 import { TooltipHost, TooltipOverflowMode } from 'office-ui-fabric-react/lib/Tooltip';
-import { Breadcrumb, IBreadcrumbProps, IBreadcrumbItem, IDividerAsProps } from 'office-ui-fabric-react/lib/Breadcrumb';
-import { IRenderFunction, IComponentAs, getRTL } from '../../../Utilities';
+import { Breadcrumb, IBreadcrumbItem } from 'office-ui-fabric-react/lib/Breadcrumb';
+import { getRTL } from '../../../Utilities';
 
 export class ChicletBreadcrumbExample extends React.Component<any, any> {
   constructor(props: {}) {
@@ -19,19 +19,22 @@ export class ChicletBreadcrumbExample extends React.Component<any, any> {
   public render() {
     var footerButtonProps: IButtonProps[] = [{ iconProps: { iconName: 'More' } }, { iconProps: { iconName: 'Save' } }, { iconProps: { iconName: 'Share' } }];
     var footer = <FooterComponent buttonProps={ footerButtonProps } activities="10 Comments  16 Shares  87 Views" />;
-    var breadcrumb: IBreadcrumbProps = {
-      items: [
+
+    var divider = () => <Icon iconName={ getRTL() ? 'ChevronLeft' : 'ChevronRightSmall' } className={ exampleStyles.chevron } />;
+    var breadcrumb = <Breadcrumb
+      items={ [
         { text: 'Files', 'key': 'Files' },
         { text: 'OneDrive Design', 'key': 'OneDrive Design' },
         { text: 'Emails', 'key': 'Emails' },
         { text: 'Campaigns', 'key': 'Campaigns' },
-      ]
-    };
-    var divider = () => <Icon iconName={ getRTL() ? 'ChevronLeft' : 'ChevronRightSmall' } className={ exampleStyles.chevron } />;
-    var description =
-      <DescriptionComponent breadcrumb={ breadcrumb } onRenderItem={ this._onRenderItem } dividerAs={ divider } />
+      ] }
+      className={ exampleStyles.description }
+      onRenderItem={ this._onRenderItem }
+      dividerAs={ divider }
+    />;
+
     return (
-      <BaseChiclet url="http://localhost:4322" size={ ChicletSize.Medium } footer={ footer } description={ description }
+      <BaseChiclet url="http://localhost:4322" size={ ChicletSize.Medium } footer={ footer } description={ breadcrumb }
       />
     );
   }
@@ -82,34 +85,3 @@ function _renderFooter(buttonProps: IButtonProps[], activities: string): React.R
     </div>
   </div>);
 }
-
-export class DescriptionComponent extends React.Component<any, any> {
-  constructor(props: {}) {
-    super(props);
-  }
-
-  public render() {
-    const { description, breadcrumb, onRenderItem, dividerAs } = this.props;
-
-    return _renderDescription(description, breadcrumb, onRenderItem, dividerAs);
-  }
-}
-
-export interface IDescriptionComponent extends React.Props<DescriptionComponent> {
-  description?: string;
-  breadcrumb?: IBreadcrumbProps;
-  onRenderItem?: IRenderFunction<IBreadcrumbItem>;
-}
-
-function _renderDescription(description: string, breadcrumb: IBreadcrumbProps, onRenderItem: IRenderFunction<IBreadcrumbItem>, dividerAs: IComponentAs<IDividerAsProps>): React.ReactElement<any> {
-  return (
-    <div>
-      <Breadcrumb
-        items={ breadcrumb.items }
-        className={ exampleStyles.description }
-        onRenderItem={ onRenderItem }
-        dividerAs={ dividerAs }
-      />
-    </div>
-  );
-}
\ No newline at end of file

From 9a1b9c6c7d9f2c2fef7a1d6b3838be6c547a34eb Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Wed, 16 May 2018 12:44:46 -0700
Subject: [PATCH 49/67] openGraphType to itemType, remove old comments, and
 other cleanup

---
 .../src/components/Chiclet/Chiclet.base.tsx   |  1 -
 .../components/Chiclet/ChicletCard.base.tsx   | 14 ++++----
 .../components/Chiclet/ChicletCard.types.ts   |  4 +--
 .../src/components/Chiclet/OpenGraph.ts       |  5 +--
 .../examples/Chiclet.Basic.Example.scss       |  2 --
 .../examples/Chiclet.Basic.Example.tsx        | 33 -------------------
 6 files changed, 10 insertions(+), 49 deletions(-)

diff --git a/packages/experiments/src/components/Chiclet/Chiclet.base.tsx b/packages/experiments/src/components/Chiclet/Chiclet.base.tsx
index f91b8a5be58f1..33d575a37754f 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.base.tsx
+++ b/packages/experiments/src/components/Chiclet/Chiclet.base.tsx
@@ -21,6 +21,5 @@ export class ChicletBase extends React.Component<IChicletProps, IChicletCardProp
   }
 
   private _onClick(): void { // @todo: default click handler
-    console.log("You clicked the Chiclet");
   }
 }
\ No newline at end of file
diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx b/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx
index 4e68634ad4226..03182184472e7 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx
@@ -27,7 +27,7 @@ export class ChicletCardBase extends BaseComponent<IChicletCardProps, any> {
   private _classNames: { [key in keyof IChicletCardStyles]: string };
 
   public render() {
-    const { title, openGraphType, description, image, imageType, imageWidth, imageHeight, imageAlt, url, onClick, className, footer, theme, getStyles } = this.props;
+    const { title, itemType, description, image, imageType, imageWidth, imageHeight, imageAlt, url, onClick, className, footer, theme, getStyles } = this.props;
     const actionable = (onClick) ? true : false;
 
     this._classNames = getClassNames(getStyles, { theme: theme! });
@@ -36,7 +36,7 @@ export class ChicletCardBase extends BaseComponent<IChicletCardProps, any> {
     const role = actionable ? (onClick ? 'button' : 'link') : undefined;
     const tabIndex = actionable ? 0 : undefined;
 
-    var preview = this._renderPreviewImage(image, imageHeight, imageWidth, openGraphType);
+    var preview = this._renderPreviewImage(image, imageHeight, imageWidth, itemType);
 
     return (
       <div
@@ -70,7 +70,7 @@ export class ChicletCardBase extends BaseComponent<IChicletCardProps, any> {
     );
   }
 
-  private _renderPreviewImage(imageUrl?: string, imageHeight?: string, imageWidth?: string, openGraphType?: string, imageAlt?: string): React.ReactElement<React.HTMLAttributes<HTMLDivElement>> {
+  private _renderPreviewImage(imageUrl?: string, imageHeight?: string, imageWidth?: string, itemType?: string, imageAlt?: string): React.ReactElement<React.HTMLAttributes<HTMLDivElement>> {
     let image;
     if (imageUrl != null) {
       image = (
@@ -88,7 +88,7 @@ export class ChicletCardBase extends BaseComponent<IChicletCardProps, any> {
         <Image
           width={ PREVIEW_IMAGE_WIDTH }
           height={ PREVIEW_IMAGE_HEIGHT }
-          src={ openGraphType ? `${ASSET_CDN_BASE_URL}/brand-icons/document/svg/` + openGraphType + `_48x1.svg` : TestImages.documentPreview /* @todo: this will be replaced by something built by the design team */ }
+          src={ itemType ? `${ASSET_CDN_BASE_URL}/brand-icons/document/svg/` + itemType + `_48x1.svg` : TestImages.documentPreview /* @todo: this will be replaced by something built by the design team */ }
           role='presentation'
           alt={ imageAlt ? imageAlt : undefined }
         />
@@ -96,11 +96,11 @@ export class ChicletCardBase extends BaseComponent<IChicletCardProps, any> {
     }
 
     let src;
-    if (openGraphType != null) {
-      src = `${ASSET_CDN_BASE_URL}/brand-icons/product/svg/` + openGraphType + `_16x1_5.svg`;
+    if (itemType != null) {
+      src = `${ASSET_CDN_BASE_URL}/brand-icons/product/svg/` + itemType + `_16x1_5.svg`;
     }
     let icon = <img className={ mergeStyles(this._classNames.icon) } src={ src } />;
-    switch (openGraphType) { // for "hero" apps, we'll use the app icons
+    switch (itemType) { // for "hero" apps, we'll use the app icons
       case "word":
       case "docx":
         icon = <img className={ mergeStyles(this._classNames.icon) } src={ `${ASSET_CDN_BASE_URL}/brand-icons/product/svg/word_16x1_5.svg` } />;
diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.types.ts b/packages/experiments/src/components/Chiclet/ChicletCard.types.ts
index f6955d1286c67..eb07745a8f6a9 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.types.ts
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.types.ts
@@ -77,10 +77,10 @@ export interface IChicletCardProps extends React.Props<ChicletCardBase> {
   theme?: ITheme;
 
   /**
-   * OpenGraph props.
+   * Item metadata.
    */
   title?: string;
-  openGraphType?: string;
+  itemType?: string;
   image?: string;
   imageSecureUrl?: string;
 
diff --git a/packages/experiments/src/components/Chiclet/OpenGraph.ts b/packages/experiments/src/components/Chiclet/OpenGraph.ts
index 74db725698e9d..b087cf3c28840 100644
--- a/packages/experiments/src/components/Chiclet/OpenGraph.ts
+++ b/packages/experiments/src/components/Chiclet/OpenGraph.ts
@@ -25,7 +25,7 @@ function _getOpenGraphValues(metaElements: NodeListOf<HTMLMetaElement>, attribut
           attributes.title = metaElements[i].content;
           break;
         case "og:type":
-          attributes.openGraphType = metaElements[i].content;
+          attributes.itemType = metaElements[i].content;
           break;
         case "og:image":
         case "og:image:url":
@@ -46,9 +46,6 @@ function _getOpenGraphValues(metaElements: NodeListOf<HTMLMetaElement>, attribut
         case "og:image:alt":
           attributes.imageAlt = metaElements[i].content;
           break;
-        case "og:description":
-          attributes.description = metaElements[i].content;
-          break;
         case "og:url":
           attributes.url = metaElements[i].content;
           break;
diff --git a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.scss b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.scss
index e1faff3f2d842..06401e435074c 100644
--- a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.scss
+++ b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.scss
@@ -34,7 +34,6 @@
 }
 
 .description {
-  //padding: 0px 16px 17px 11px;
   font-size: 12px;
   font-weight: normal;
   font-style: normal;
@@ -45,7 +44,6 @@
   color: #797671;
   width: 248px;
   height: 16px;
-  //overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
diff --git a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
index 90af019d191ac..22f68ca430cc6 100644
--- a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
+++ b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
@@ -6,8 +6,6 @@ import { ChicletSize } from '../Chiclet.types';
 import { IButtonProps } from 'office-ui-fabric-react/lib/Button';
 import * as exampleStyles from './Chiclet.Basic.Example.scss';
 import { IconButton } from 'office-ui-fabric-react/lib/Button';
-import { Breadcrumb, IBreadcrumbProps, IBreadcrumbItem, IDividerAsProps } from 'office-ui-fabric-react/lib/Breadcrumb';
-import { IRenderFunction, IComponentAs } from '../../../Utilities';
 
 export class ChicletBasicExample extends React.Component<any, any> {
   constructor(props: {}) {
@@ -57,35 +55,4 @@ function _renderFooter(buttonProps: IButtonProps[], activities: string): React.R
       }) }
     </div>
   </div>);
-}
-
-export class DescriptionComponent extends React.Component<any, any> {
-  constructor(props: {}) {
-    super(props);
-  }
-
-  public render() {
-    const { description, breadcrumb, onRenderItem, dividerAs } = this.props;
-
-    return _renderDescription(description, breadcrumb, onRenderItem, dividerAs);
-  }
-}
-
-export interface IDescriptionComponent extends React.Props<DescriptionComponent> {
-  description?: string;
-  breadcrumb?: IBreadcrumbProps;
-  onRenderItem?: IRenderFunction<IBreadcrumbItem>;
-}
-
-function _renderDescription(description: string, breadcrumb: IBreadcrumbProps, onRenderItem: IRenderFunction<IBreadcrumbItem>, dividerAs: IComponentAs<IDividerAsProps>): React.ReactElement<any> {
-  return (
-    <div>
-      <Breadcrumb
-        items={ breadcrumb.items }
-        className={ exampleStyles.description }
-        onRenderItem={ onRenderItem }
-        dividerAs={ dividerAs }
-      />
-    </div>
-  );
 }
\ No newline at end of file

From 4756ed05975ded0212a10fdbc081a2f025619f11 Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Wed, 16 May 2018 13:00:38 -0700
Subject: [PATCH 50/67] rename Chiclet

---
 .../components/Chiclet/BaseChiclet.base.tsx   | 41 -----------
 .../components/Chiclet/BaseChiclet.styles.ts  | 11 ---
 .../src/components/Chiclet/BaseChiclet.tsx    | 13 ----
 .../components/Chiclet/BaseChiclet.types.ts   | 69 ------------------
 .../src/components/Chiclet/Chiclet.base.tsx   | 39 +++++++++--
 .../src/components/Chiclet/Chiclet.types.ts   | 70 +++++++++++--------
 .../examples/Chiclet.Basic.Example.tsx        |  6 +-
 .../examples/Chiclet.Breadcrumb.Example.tsx   |  6 +-
 .../src/components/Chiclet/index.ts           |  4 +-
 9 files changed, 82 insertions(+), 177 deletions(-)
 delete mode 100644 packages/experiments/src/components/Chiclet/BaseChiclet.base.tsx
 delete mode 100644 packages/experiments/src/components/Chiclet/BaseChiclet.styles.ts
 delete mode 100644 packages/experiments/src/components/Chiclet/BaseChiclet.tsx
 delete mode 100644 packages/experiments/src/components/Chiclet/BaseChiclet.types.ts

diff --git a/packages/experiments/src/components/Chiclet/BaseChiclet.base.tsx b/packages/experiments/src/components/Chiclet/BaseChiclet.base.tsx
deleted file mode 100644
index aa46f848c4b09..0000000000000
--- a/packages/experiments/src/components/Chiclet/BaseChiclet.base.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import * as React from 'react';
-import {
-  BaseComponent,
-  customizable,
-  classNamesFunction
-} from '../../Utilities';
-import { Chiclet } from './Chiclet';
-import { ChicletSize } from './Chiclet.types';
-import { extractMetaTags } from './OpenGraph';
-import { IBaseChicletProps, IBaseChicletStyles, IBaseChicletStyleProps } from './BaseChiclet.types';
-
-const getClassNames = classNamesFunction<IBaseChicletStyleProps, IBaseChicletStyles>();
-
-@customizable('BaseChicletBase', ['theme'])
-export class BaseChicletBase extends BaseComponent<IBaseChicletProps, any> {
-  private _classNames: { [key in keyof IBaseChicletStyles]: string };
-
-  constructor(props: IBaseChicletProps) {
-    super(props);
-
-    let chicletCardProps = extractMetaTags(this.props.url);
-    this.state = { chicletCardProps: chicletCardProps };
-  }
-
-  public render() {
-    const { size, footer, getStyles, theme, description } = this.props;
-    const { chicletCardProps } = this.state;
-
-    this._classNames = getClassNames(getStyles, { theme: theme! });
-
-    return (
-      <Chiclet chicletCardProps={ chicletCardProps } size={ size ? size : ChicletSize.Medium } footer={ footer } description={ description } />
-    );
-  }
-
-  public componentWillReceiveProps(nextProps: any) {
-    if (this.props.url != nextProps.url) {
-      this.setState({ chicletCardProps: extractMetaTags(this.props.url) });
-    }
-  }
-}
diff --git a/packages/experiments/src/components/Chiclet/BaseChiclet.styles.ts b/packages/experiments/src/components/Chiclet/BaseChiclet.styles.ts
deleted file mode 100644
index 37513f9561ec7..0000000000000
--- a/packages/experiments/src/components/Chiclet/BaseChiclet.styles.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { IBaseChicletStyleProps, IBaseChicletStyles } from './BaseChiclet.types';
-
-export const getStyles = (
-  props: IBaseChicletStyleProps
-): IBaseChicletStyles => {
-  const { theme } = props;
-
-  return ({
-    root: {}
-  });
-}
\ No newline at end of file
diff --git a/packages/experiments/src/components/Chiclet/BaseChiclet.tsx b/packages/experiments/src/components/Chiclet/BaseChiclet.tsx
deleted file mode 100644
index cee0fe29c6914..0000000000000
--- a/packages/experiments/src/components/Chiclet/BaseChiclet.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { styled } from '../../Utilities';
-import {
-  IBaseChicletProps,
-  IBaseChicletStyleProps,
-  IBaseChicletStyles
-} from './BaseChiclet.types';
-import { getStyles } from './BaseChiclet.styles';
-import { BaseChicletBase } from './BaseChiclet.base';
-
-export const BaseChiclet = styled<IBaseChicletProps, IBaseChicletStyleProps, IBaseChicletStyles>(
-  BaseChicletBase,
-  getStyles
-);
\ No newline at end of file
diff --git a/packages/experiments/src/components/Chiclet/BaseChiclet.types.ts b/packages/experiments/src/components/Chiclet/BaseChiclet.types.ts
deleted file mode 100644
index e7607883f42c4..0000000000000
--- a/packages/experiments/src/components/Chiclet/BaseChiclet.types.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import * as React from 'react';
-import { BaseChicletBase } from './BaseChiclet.base';
-import { ChicletSize } from './Chiclet.types';
-import { IStyleFunction } from '../../Utilities';
-import {
-  IStyle,
-  ITheme
-} from '../../Styling';
-
-export interface IBaseChiclet {
-
-}
-
-export interface IBaseChicletProps extends React.Props<BaseChicletBase> {
-  /**
-   * Optional callback to access the IBaseChiclet interface. Use this instead of ref for accessing
-   * the public methods and properties of the component.
-   */
-  componentRef?: (component: IBaseChiclet | null) => void;
-
-  /**
-   * Call to provide customized styling that will layer on top of the variant rules.
-   */
-  getStyles?: IStyleFunction<IBaseChicletStyleProps, IBaseChicletStyles>;
-
-  /**
-   * Optional class for chiclet.
-   */
-  className?: string;
-
-  /**
-   * Sharing link
-   */
-  url: string;
-
-  /**
-   * Chiclet size to render
-   */
-  size?: ChicletSize;
-
-  /**
-   * Description to render for the component.
-   */
-  description?: React.ReactElement<any>
-
-  /**
-   * Footer to render for the component.
-   */
-  footer?: React.ReactElement<any>
-
-  /**
-   * Theme for the component.
-   */
-  theme?: ITheme;
-}
-
-export interface IBaseChicletStyleProps {
-  /**
-   * Theme for the component.
-   */
-  theme?: ITheme;
-}
-
-export interface IBaseChicletStyles {
-  /**
-   * Style for the root element when fixed.
-   */
-  root?: IStyle;
-}
\ No newline at end of file
diff --git a/packages/experiments/src/components/Chiclet/Chiclet.base.tsx b/packages/experiments/src/components/Chiclet/Chiclet.base.tsx
index 33d575a37754f..97a32c3b8be65 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.base.tsx
+++ b/packages/experiments/src/components/Chiclet/Chiclet.base.tsx
@@ -1,14 +1,34 @@
 import * as React from 'react';
-import { IChicletProps, ChicletSize } from './Chiclet.types';
-import { IChicletCardProps } from './ChicletCard.types';
+import {
+  BaseComponent,
+  customizable,
+  classNamesFunction
+} from '../../Utilities';
 import { ChicletCard } from './ChicletCard';
+import { extractMetaTags } from './OpenGraph';
+import { IChicletProps, IChicletStyles, IChicletStyleProps, ChicletSize } from './Chiclet.types';
+
+const getClassNames = classNamesFunction<IChicletStyleProps, IChicletStyles>();
+
+@customizable('ChicletBase', ['theme'])
+export class ChicletBase extends BaseComponent<IChicletProps, any> {
+  private _classNames: { [key in keyof IChicletStyles]: string };
+
+  constructor(props: IChicletProps) {
+    super(props);
+
+    let chicletCardProps = extractMetaTags(this.props.url);
+    this.state = { chicletCardProps: chicletCardProps };
+  }
 
-export class ChicletBase extends React.Component<IChicletProps, IChicletCardProps> {
   public render() {
-    const { chicletCardProps, size, footer, description } = this.props;
+    const { size, footer, getStyles, theme, description } = this.props;
+    const { chicletCardProps } = this.state;
+
+    this._classNames = getClassNames(getStyles, { theme: theme! });
 
     switch (size) {
-      case ChicletSize.Medium:
+      case ChicletSize.medium:
         return (
           <ChicletCard { ...chicletCardProps } onClick={ this._onClick } footer={ footer } description={ description } />
         );
@@ -20,6 +40,13 @@ export class ChicletBase extends React.Component<IChicletProps, IChicletCardProp
     }
   }
 
+  public componentWillReceiveProps(nextProps: any) {
+    if (this.props.url != nextProps.url) {
+      this.setState({ chicletCardProps: extractMetaTags(this.props.url) });
+    }
+  }
+
   private _onClick(): void { // @todo: default click handler
   }
-}
\ No newline at end of file
+
+}
diff --git a/packages/experiments/src/components/Chiclet/Chiclet.types.ts b/packages/experiments/src/components/Chiclet/Chiclet.types.ts
index 942039fe11f1c..5286bfbdcfc38 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.types.ts
+++ b/packages/experiments/src/components/Chiclet/Chiclet.types.ts
@@ -1,30 +1,36 @@
 import * as React from 'react';
-import { Chiclet } from './Chiclet';
-import {
-  IChicletCardProps,
-  IChicletCardStyleProps,
-  IChicletCardStyles
-} from './ChicletCard.types';
+import { ChicletBase } from './Chiclet.base';
+import { IStyleFunction } from '../../Utilities';
 import {
   IStyle,
   ITheme
 } from '../../Styling';
-import { IStyleFunction } from '../../Utilities';
 
 export interface IChiclet {
 
 }
 
-export interface IChicletProps extends React.Props<Chiclet> {
+export interface IChicletProps extends React.Props<ChicletBase> {
   /**
-   * Props to render in the chosen ChicletCard
+   * Optional callback to access the IChiclet interface. Use this instead of ref for accessing
+   * the public methods and properties of the component.
    */
-  chicletCardProps?: IChicletCardProps | undefined;
+  componentRef?: (component: IChiclet | null) => void;
 
   /**
    * Call to provide customized styling that will layer on top of the variant rules.
    */
-  getStyles?: IStyleFunction<IChicletCardStyleProps, IChicletCardStyles>;
+  getStyles?: IStyleFunction<IChicletStyleProps, IChicletStyles>;
+
+  /**
+   * Optional class for chiclet.
+   */
+  className?: string;
+
+  /**
+   * Sharing link
+   */
+  url: string;
 
   /**
    * Chiclet size to render
@@ -34,43 +40,51 @@ export interface IChicletProps extends React.Props<Chiclet> {
   /**
    * Description to render for the component.
    */
-  description?: React.ReactElement<any>;
+  description?: React.ReactElement<any>
 
   /**
    * Footer to render for the component.
    */
-  footer?: React.ReactElement<any>;
+  footer?: React.ReactElement<any>
+
+  /**
+   * Theme for the component.
+   */
+  theme?: ITheme;
+}
+
+export interface IChicletStyleProps {
+  /**
+   * Theme for the component.
+   */
+  theme?: ITheme;
+}
+
+export interface IChicletStyles {
+  /**
+   * Style for the root element when fixed.
+   */
+  root?: IStyle;
 }
 
 export enum ChicletSize {
   /**
    * X-Small Chiclet
    */
-  XSmall = 0,
+  xSmall = 0,
 
   /**
    * Small Chiclet
    */
-  Small = 1,
+  small = 1,
 
   /**
    * Medium Chiclet
    */
-  Medium = 2,
+  medium = 2,
 
   /**
    * Large Chiclet
    */
-  Large = 3
-}
-
-export interface IChicletStyleProps {
-  /**
-   * Theme for the component.
-   */
-  theme?: ITheme;
-}
-
-export interface IChicletStyles {
-  root?: IStyle;
+  large = 3
 }
\ No newline at end of file
diff --git a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
index 22f68ca430cc6..73d9c6fde49be 100644
--- a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
+++ b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {
-  BaseChiclet
-} from '../BaseChiclet';
+  Chiclet
+} from '../Chiclet';
 import { ChicletSize } from '../Chiclet.types';
 import { IButtonProps } from 'office-ui-fabric-react/lib/Button';
 import * as exampleStyles from './Chiclet.Basic.Example.scss';
@@ -17,7 +17,7 @@ export class ChicletBasicExample extends React.Component<any, any> {
     var footer = <FooterComponent buttonProps={ footerButtonProps } activities="10 Comments  16 Shares  87 Views" />;
 
     return (
-      <BaseChiclet url="http://localhost:4322" size={ ChicletSize.Medium } footer={ footer }
+      <Chiclet url="http://localhost:4322" size={ ChicletSize.medium } footer={ footer }
       />
     );
   }
diff --git a/packages/experiments/src/components/Chiclet/examples/Chiclet.Breadcrumb.Example.tsx b/packages/experiments/src/components/Chiclet/examples/Chiclet.Breadcrumb.Example.tsx
index 269878c907603..7fe20bcc9e9a2 100644
--- a/packages/experiments/src/components/Chiclet/examples/Chiclet.Breadcrumb.Example.tsx
+++ b/packages/experiments/src/components/Chiclet/examples/Chiclet.Breadcrumb.Example.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {
-  BaseChiclet
-} from '../BaseChiclet';
+  Chiclet
+} from '../Chiclet';
 import { ChicletSize } from '../Chiclet.types';
 import { IButtonProps } from 'office-ui-fabric-react/lib/Button';
 import * as exampleStyles from './Chiclet.Basic.Example.scss';
@@ -34,7 +34,7 @@ export class ChicletBreadcrumbExample extends React.Component<any, any> {
     />;
 
     return (
-      <BaseChiclet url="http://localhost:4322" size={ ChicletSize.Medium } footer={ footer } description={ breadcrumb }
+      <Chiclet url="http://localhost:4322" size={ ChicletSize.medium } footer={ footer } description={ breadcrumb }
       />
     );
   }
diff --git a/packages/experiments/src/components/Chiclet/index.ts b/packages/experiments/src/components/Chiclet/index.ts
index 671dd8ccb3e63..da098a2bbe68a 100644
--- a/packages/experiments/src/components/Chiclet/index.ts
+++ b/packages/experiments/src/components/Chiclet/index.ts
@@ -1,7 +1,5 @@
-export * from './BaseChiclet.base';
-export * from './BaseChiclet';
+export * from './Chiclet.base';
 export * from './Chiclet';
 export * from './ChicletCard.base';
 export * from './ChicletCard';
-export * from './Chiclet.types';
 export * from './OpenGraph';
\ No newline at end of file

From 68b9102c2db9dfb0ce71109932882ae05b6d190e Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Wed, 16 May 2018 13:50:18 -0700
Subject: [PATCH 51/67] remove unnecessary newline

---
 packages/experiments/src/index.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/experiments/src/index.ts b/packages/experiments/src/index.ts
index 453d492d664f5..cbeed19048e38 100644
--- a/packages/experiments/src/index.ts
+++ b/packages/experiments/src/index.ts
@@ -10,5 +10,4 @@ export { ExtendedPeoplePicker } from './ExtendedPicker';
 export { Keytip } from './Keytip';
 export { KeytipLayer } from './KeytipLayer';
 export { Shimmer } from './Shimmer';
-export { Chiclet } from './Chiclet';
-
+export { Chiclet } from './Chiclet';
\ No newline at end of file

From 1abe186a3a6cda70191f408e91cc92a1d2bf234b Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Thu, 17 May 2018 10:49:44 -0700
Subject: [PATCH 52/67] actually fix merge conflicts

---
 packages/experiments/src/index.ts | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/experiments/src/index.ts b/packages/experiments/src/index.ts
index cbeed19048e38..3cbf22e1a37ea 100644
--- a/packages/experiments/src/index.ts
+++ b/packages/experiments/src/index.ts
@@ -4,10 +4,5 @@ export { FolderCover } from './FolderCover';
 export { Tile } from './Tile';
 export { TilesList } from './TilesList';
 export { CommandBar as ExperimentCommandBar } from './CommandBar';
-export { FloatingPeoplePicker } from './FloatingPicker';
-export { SelectedPeopleList } from './SelectedItemsList';
-export { ExtendedPeoplePicker } from './ExtendedPicker';
-export { Keytip } from './Keytip';
-export { KeytipLayer } from './KeytipLayer';
 export { Shimmer } from './Shimmer';
 export { Chiclet } from './Chiclet';
\ No newline at end of file

From d353ed78b59b8d83a1e0912d38266492bc239f69 Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Thu, 17 May 2018 11:20:33 -0700
Subject: [PATCH 53/67] extractMetaTags to getOpenGraphProperties

---
 .../src/components/Chiclet/Chiclet.base.tsx   |  6 ++--
 .../src/components/Chiclet/OpenGraph.ts       | 33 +++++++++----------
 2 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/packages/experiments/src/components/Chiclet/Chiclet.base.tsx b/packages/experiments/src/components/Chiclet/Chiclet.base.tsx
index 97a32c3b8be65..7641e65800adc 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.base.tsx
+++ b/packages/experiments/src/components/Chiclet/Chiclet.base.tsx
@@ -5,7 +5,7 @@ import {
   classNamesFunction
 } from '../../Utilities';
 import { ChicletCard } from './ChicletCard';
-import { extractMetaTags } from './OpenGraph';
+import { getOpenGraphProperties } from './OpenGraph';
 import { IChicletProps, IChicletStyles, IChicletStyleProps, ChicletSize } from './Chiclet.types';
 
 const getClassNames = classNamesFunction<IChicletStyleProps, IChicletStyles>();
@@ -17,7 +17,7 @@ export class ChicletBase extends BaseComponent<IChicletProps, any> {
   constructor(props: IChicletProps) {
     super(props);
 
-    let chicletCardProps = extractMetaTags(this.props.url);
+    let chicletCardProps = getOpenGraphProperties(this.props.url);
     this.state = { chicletCardProps: chicletCardProps };
   }
 
@@ -42,7 +42,7 @@ export class ChicletBase extends BaseComponent<IChicletProps, any> {
 
   public componentWillReceiveProps(nextProps: any) {
     if (this.props.url != nextProps.url) {
-      this.setState({ chicletCardProps: extractMetaTags(this.props.url) });
+      this.setState({ chicletCardProps: getOpenGraphProperties(this.props.url) });
     }
   }
 
diff --git a/packages/experiments/src/components/Chiclet/OpenGraph.ts b/packages/experiments/src/components/Chiclet/OpenGraph.ts
index b087cf3c28840..65fc0b15b523b 100644
--- a/packages/experiments/src/components/Chiclet/OpenGraph.ts
+++ b/packages/experiments/src/components/Chiclet/OpenGraph.ts
@@ -1,23 +1,9 @@
 import { IChicletCardProps } from './ChicletCard.types';
 
-export function extractMetaTags(url: string) {
+export function getOpenGraphProperties(url: string) {
   var attributes: IChicletCardProps = {};
+  var metaElements = extractMetaTags(url);
 
-  var xmlHttp = new XMLHttpRequest();
-  xmlHttp.open("GET", url, false);
-  xmlHttp.overrideMimeType('application/xml');
-  xmlHttp.send(null);
-
-  var parser = new DOMParser();
-  var doc = parser.parseFromString(xmlHttp.responseText, "text/html");
-
-  var metaElements = doc.getElementsByTagName("meta");
-  let openGraphObject = _getOpenGraphValues(metaElements, attributes);
-
-  return openGraphObject;
-}
-
-function _getOpenGraphValues(metaElements: NodeListOf<HTMLMetaElement>, attributes: IChicletCardProps): IChicletCardProps {
   for (var i = 0; i < metaElements.length; i++) {
     if (metaElements[i].attributes != null && metaElements[i].attributes.length >= 2) {
       switch (metaElements[i].attributes[0].nodeValue) {
@@ -53,4 +39,17 @@ function _getOpenGraphValues(metaElements: NodeListOf<HTMLMetaElement>, attribut
     }
   }
   return attributes;
-}
\ No newline at end of file
+}
+
+function extractMetaTags(url: string) {
+  var xmlHttp = new XMLHttpRequest();
+  xmlHttp.open("GET", url, false);
+  xmlHttp.overrideMimeType('application/xml');
+  xmlHttp.send(null);
+
+  var parser = new DOMParser();
+  var doc = parser.parseFromString(xmlHttp.responseText, "text/html");
+
+  var metaElements = doc.getElementsByTagName("meta");
+  return metaElements;
+}

From 6bad6f0a624322fd4c7d3be5981309cb3fade3ff Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Thu, 17 May 2018 11:29:46 -0700
Subject: [PATCH 54/67] add return type to getOpenGraphProperties

---
 packages/experiments/src/components/Chiclet/OpenGraph.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/experiments/src/components/Chiclet/OpenGraph.ts b/packages/experiments/src/components/Chiclet/OpenGraph.ts
index 65fc0b15b523b..ee71276a0de7a 100644
--- a/packages/experiments/src/components/Chiclet/OpenGraph.ts
+++ b/packages/experiments/src/components/Chiclet/OpenGraph.ts
@@ -1,6 +1,6 @@
 import { IChicletCardProps } from './ChicletCard.types';
 
-export function getOpenGraphProperties(url: string) {
+export function getOpenGraphProperties(url: string): IChicletCardProps {
   var attributes: IChicletCardProps = {};
   var metaElements = extractMetaTags(url);
 

From 972d37d3582bcee27525ba0d8bb404a007f8d1a0 Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Thu, 17 May 2018 17:05:40 -0700
Subject: [PATCH 55/67] fixed errors from npm run build

---
 .../src/components/Chiclet/Chiclet.base.tsx   |  8 +-
 .../src/components/Chiclet/Chiclet.styles.ts  |  2 +-
 .../src/components/Chiclet/Chiclet.types.ts   |  4 +-
 .../components/Chiclet/ChicletCard.base.tsx   | 66 ++++++++++++-----
 .../src/components/Chiclet/ChicletPage.tsx    |  6 +-
 .../src/components/Chiclet/OpenGraph.ts       | 40 +++++-----
 .../examples/Chiclet.Basic.Example.tsx        | 41 ++++++-----
 .../examples/Chiclet.Breadcrumb.Example.tsx   | 73 +++++++++++--------
 8 files changed, 144 insertions(+), 96 deletions(-)

diff --git a/packages/experiments/src/components/Chiclet/Chiclet.base.tsx b/packages/experiments/src/components/Chiclet/Chiclet.base.tsx
index 7641e65800adc..8d8d416ede335 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.base.tsx
+++ b/packages/experiments/src/components/Chiclet/Chiclet.base.tsx
@@ -17,11 +17,11 @@ export class ChicletBase extends BaseComponent<IChicletProps, any> {
   constructor(props: IChicletProps) {
     super(props);
 
-    let chicletCardProps = getOpenGraphProperties(this.props.url);
+    const chicletCardProps = getOpenGraphProperties(this.props.url);
     this.state = { chicletCardProps: chicletCardProps };
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { size, footer, getStyles, theme, description } = this.props;
     const { chicletCardProps } = this.state;
 
@@ -40,8 +40,8 @@ export class ChicletBase extends BaseComponent<IChicletProps, any> {
     }
   }
 
-  public componentWillReceiveProps(nextProps: any) {
-    if (this.props.url != nextProps.url) {
+  public componentWillReceiveProps(nextProps: any): void {
+    if (this.props.url !== nextProps.url) {
       this.setState({ chicletCardProps: getOpenGraphProperties(this.props.url) });
     }
   }
diff --git a/packages/experiments/src/components/Chiclet/Chiclet.styles.ts b/packages/experiments/src/components/Chiclet/Chiclet.styles.ts
index d1f5b34cb960b..74c2815d3f146 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.styles.ts
+++ b/packages/experiments/src/components/Chiclet/Chiclet.styles.ts
@@ -8,4 +8,4 @@ export const getStyles = (
   return ({
     root: {}
   });
-}
\ No newline at end of file
+};
\ No newline at end of file
diff --git a/packages/experiments/src/components/Chiclet/Chiclet.types.ts b/packages/experiments/src/components/Chiclet/Chiclet.types.ts
index 5286bfbdcfc38..b9d89640ef4cb 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.types.ts
+++ b/packages/experiments/src/components/Chiclet/Chiclet.types.ts
@@ -40,12 +40,12 @@ export interface IChicletProps extends React.Props<ChicletBase> {
   /**
    * Description to render for the component.
    */
-  description?: React.ReactElement<any>
+  description?: React.ReactElement<any>;
 
   /**
    * Footer to render for the component.
    */
-  footer?: React.ReactElement<any>
+  footer?: React.ReactElement<any>;
 
   /**
    * Theme for the component.
diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx b/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx
index 03182184472e7..eac2a6a530902 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx
@@ -26,8 +26,23 @@ export class ChicletCardBase extends BaseComponent<IChicletCardProps, any> {
 
   private _classNames: { [key in keyof IChicletCardStyles]: string };
 
-  public render() {
-    const { title, itemType, description, image, imageType, imageWidth, imageHeight, imageAlt, url, onClick, className, footer, theme, getStyles } = this.props;
+  public render(): JSX.Element {
+    const {
+      title,
+      itemType,
+      description,
+      image,
+      imageType,
+      imageWidth,
+      imageHeight,
+      imageAlt,
+      url,
+      onClick,
+      className,
+      footer,
+      theme,
+      getStyles
+    } = this.props;
     const actionable = (onClick) ? true : false;
 
     this._classNames = getClassNames(getStyles, { theme: theme! });
@@ -36,7 +51,7 @@ export class ChicletCardBase extends BaseComponent<IChicletCardProps, any> {
     const role = actionable ? (onClick ? 'button' : 'link') : undefined;
     const tabIndex = actionable ? 0 : undefined;
 
-    var preview = this._renderPreviewImage(image, imageHeight, imageWidth, itemType);
+    const preview = this._renderPreviewImage(image, imageHeight, imageWidth, itemType);
 
     return (
       <div
@@ -70,9 +85,10 @@ export class ChicletCardBase extends BaseComponent<IChicletCardProps, any> {
     );
   }
 
-  private _renderPreviewImage(imageUrl?: string, imageHeight?: string, imageWidth?: string, itemType?: string, imageAlt?: string): React.ReactElement<React.HTMLAttributes<HTMLDivElement>> {
+  private _renderPreviewImage(imageUrl?: string, imageHeight?: string, imageWidth?: string, itemType?: string, imageAlt?: string)
+    : React.ReactElement<React.HTMLAttributes<HTMLDivElement>> {
     let image;
-    if (imageUrl != null) {
+    if (imageUrl !== null) {
       image = (
         <Image
           width={ imageWidth }
@@ -82,13 +98,14 @@ export class ChicletCardBase extends BaseComponent<IChicletCardProps, any> {
           alt={ imageAlt ? imageAlt : undefined }
         />
       );
-    }
-    else {
+    } else {
       image = (
         <Image
           width={ PREVIEW_IMAGE_WIDTH }
           height={ PREVIEW_IMAGE_HEIGHT }
-          src={ itemType ? `${ASSET_CDN_BASE_URL}/brand-icons/document/svg/` + itemType + `_48x1.svg` : TestImages.documentPreview /* @todo: this will be replaced by something built by the design team */ }
+          src={ itemType
+            ? `${ASSET_CDN_BASE_URL}/brand-icons/document/svg/` + itemType + `_48x1.svg`
+            : TestImages.documentPreview /* @todo: this will be replaced by something built by the design team */ }
           role='presentation'
           alt={ imageAlt ? imageAlt : undefined }
         />
@@ -96,21 +113,36 @@ export class ChicletCardBase extends BaseComponent<IChicletCardProps, any> {
     }
 
     let src;
-    if (itemType != null) {
+    if (itemType !== null) {
       src = `${ASSET_CDN_BASE_URL}/brand-icons/product/svg/` + itemType + `_16x1_5.svg`;
     }
     let icon = <img className={ mergeStyles(this._classNames.icon) } src={ src } />;
     switch (itemType) { // for "hero" apps, we'll use the app icons
-      case "word":
-      case "docx":
-        icon = <img className={ mergeStyles(this._classNames.icon) } src={ `${ASSET_CDN_BASE_URL}/brand-icons/product/svg/word_16x1_5.svg` } />;
+      case 'word':
+      case 'docx':
+        icon = (
+          <img
+            className={ mergeStyles(this._classNames.icon) }
+            src={ `${ASSET_CDN_BASE_URL}/brand-icons/product/svg/word_16x1_5.svg` }
+          />
+        );
         break;
-      case "powerpoint":
-      case "pptx":
-        icon = <img className={ mergeStyles(this._classNames.icon) } src={ `${ASSET_CDN_BASE_URL}/brand-icons/product/svg/powerpoint_16x1_5.svg` } />;
+      case 'powerpoint':
+      case 'pptx':
+        icon = (
+          <img
+            className={ mergeStyles(this._classNames.icon) }
+            src={ `${ASSET_CDN_BASE_URL}/brand-icons/product/svg/powerpoint_16x1_5.svg` }
+          />
+        );
         break;
-      case "excel":
-        icon = <img className={ mergeStyles(this._classNames.icon) } src={ `${ASSET_CDN_BASE_URL}/brand-icons/product/svg/excel_16x1_5.svg` } />;
+      case 'excel':
+        icon = (
+          <img
+            className={ mergeStyles(this._classNames.icon) }
+            src={ `${ASSET_CDN_BASE_URL}/brand-icons/product/svg/excel_16x1_5.svg` }
+          />
+        );
         break;
     }
 
diff --git a/packages/experiments/src/components/Chiclet/ChicletPage.tsx b/packages/experiments/src/components/Chiclet/ChicletPage.tsx
index b55fc01dbc0a5..c56698522cbbd 100644
--- a/packages/experiments/src/components/Chiclet/ChicletPage.tsx
+++ b/packages/experiments/src/components/Chiclet/ChicletPage.tsx
@@ -7,9 +7,11 @@ import {
 } from '@uifabric/example-app-base';
 
 import { ChicletBasicExample } from './examples/Chiclet.Basic.Example';
-const ChicletBasicExampleCode = require('!raw-loader!@uifabric/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx') as string;
+const ChicletBasicExampleCode =
+  require('!raw-loader!@uifabric/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx') as string;
 import { ChicletBreadcrumbExample } from './examples/Chiclet.Breadcrumb.Example';
-const ChicletBreadcrumbExampleCode = require('!raw-loader!@uifabric/experiments/src/components/Chiclet/examples/Chiclet.Breadcrumb.Example.tsx') as string;
+const ChicletBreadcrumbExampleCode =
+  require('!raw-loader!@uifabric/experiments/src/components/Chiclet/examples/Chiclet.Breadcrumb.Example.tsx') as string;
 
 export class ChicletPage extends React.Component<IComponentDemoPageProps, {}> {
   public render(): JSX.Element {
diff --git a/packages/experiments/src/components/Chiclet/OpenGraph.ts b/packages/experiments/src/components/Chiclet/OpenGraph.ts
index ee71276a0de7a..73adadbc51eaf 100644
--- a/packages/experiments/src/components/Chiclet/OpenGraph.ts
+++ b/packages/experiments/src/components/Chiclet/OpenGraph.ts
@@ -1,38 +1,38 @@
 import { IChicletCardProps } from './ChicletCard.types';
 
 export function getOpenGraphProperties(url: string): IChicletCardProps {
-  var attributes: IChicletCardProps = {};
-  var metaElements = extractMetaTags(url);
+  let attributes: IChicletCardProps = {};
+  const metaElements = extractMetaTags(url);
 
-  for (var i = 0; i < metaElements.length; i++) {
-    if (metaElements[i].attributes != null && metaElements[i].attributes.length >= 2) {
+  for (let i = 0; i < metaElements.length; i++) {
+    if (metaElements[i].attributes !== null && metaElements[i].attributes.length >= 2) {
       switch (metaElements[i].attributes[0].nodeValue) {
-        case "og:title":
+        case 'og:title':
           attributes.title = metaElements[i].content;
           break;
-        case "og:type":
+        case 'og:type':
           attributes.itemType = metaElements[i].content;
           break;
-        case "og:image":
-        case "og:image:url":
+        case 'og:image':
+        case 'og:image:url':
           attributes.image = metaElements[i].content;
           break;
-        case "og:image:secure_url":
+        case 'og:image:secure_url':
           attributes.imageSecureUrl = metaElements[i].content;
           break;
-        case "og:image:type":
+        case 'og:image:type':
           attributes.imageType = metaElements[i].content;
           break;
-        case "og:image:width":
+        case 'og:image:width':
           attributes.imageWidth = metaElements[i].content;
           break;
-        case "og:image:height":
+        case 'og:image:height':
           attributes.imageHeight = metaElements[i].content;
           break;
-        case "og:image:alt":
+        case 'og:image:alt':
           attributes.imageAlt = metaElements[i].content;
           break;
-        case "og:url":
+        case 'og:url':
           attributes.url = metaElements[i].content;
           break;
       }
@@ -41,15 +41,15 @@ export function getOpenGraphProperties(url: string): IChicletCardProps {
   return attributes;
 }
 
-function extractMetaTags(url: string) {
-  var xmlHttp = new XMLHttpRequest();
-  xmlHttp.open("GET", url, false);
+function extractMetaTags(url: string): NodeListOf<HTMLMetaElement> {
+  let xmlHttp = new XMLHttpRequest();
+  xmlHttp.open('GET', url, false);
   xmlHttp.overrideMimeType('application/xml');
   xmlHttp.send(null);
 
-  var parser = new DOMParser();
-  var doc = parser.parseFromString(xmlHttp.responseText, "text/html");
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(xmlHttp.responseText, 'text/html');
 
-  var metaElements = doc.getElementsByTagName("meta");
+  const metaElements = doc.getElementsByTagName('meta');
   return metaElements;
 }
diff --git a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
index 73d9c6fde49be..4f1e0a0018db4 100644
--- a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
+++ b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
@@ -12,13 +12,14 @@ export class ChicletBasicExample extends React.Component<any, any> {
     super(props);
   }
 
-  public render() {
-    var footerButtonProps: IButtonProps[] = [{ iconProps: { iconName: 'More' } }, { iconProps: { iconName: 'Save' } }, { iconProps: { iconName: 'Share' } }];
-    var footer = <FooterComponent buttonProps={ footerButtonProps } activities="10 Comments  16 Shares  87 Views" />;
+  public render(): JSX.Element {
+    const footerButtonProps: IButtonProps[] = [
+      { iconProps: { iconName: 'More' } }, { iconProps: { iconName: 'Save' } }, { iconProps: { iconName: 'Share' } }
+    ];
+    const footer = <FooterComponent buttonProps={ footerButtonProps } activities='10 Comments  16 Shares  87 Views' />;
 
     return (
-      <Chiclet url="http://localhost:4322" size={ ChicletSize.medium } footer={ footer }
-      />
+      <Chiclet url='http://localhost:4322' size={ ChicletSize.medium } footer={ footer } />
     );
   }
 }
@@ -28,7 +29,7 @@ export class FooterComponent extends React.Component<any, any> {
     super(props);
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { buttonProps, activities } = this.props;
 
     return _renderFooter(buttonProps, activities);
@@ -41,18 +42,20 @@ export interface IFooterComponent extends React.Props<FooterComponent> {
 }
 
 function _renderFooter(buttonProps: IButtonProps[], activities: string): React.ReactElement<any> {
-  return (<div className={ exampleStyles.footer }>
-    <div className={ exampleStyles.activities }>
-      { activities ? activities : (null) }
+  return (
+    <div className={ exampleStyles.footer }>
+      <div className={ exampleStyles.activities }>
+        { activities ? activities : (null) }
+      </div>
+      <div className={ exampleStyles.actions }>
+        { buttonProps && buttonProps.map((buttonProp: IButtonProps, index: number) => {
+          return (
+            <div className={ exampleStyles.action } key={ index }>
+              <IconButton { ...buttonProp } />
+            </div>
+          );
+        }) }
+      </div>
     </div>
-    <div className={ exampleStyles.actions }>
-      { buttonProps && buttonProps.map((buttonProp, index) => {
-        return (
-          <div className={ exampleStyles.action } key={ index }>
-            <IconButton { ...buttonProp } />
-          </div>
-        );
-      }) }
-    </div>
-  </div>);
+  );
 }
\ No newline at end of file
diff --git a/packages/experiments/src/components/Chiclet/examples/Chiclet.Breadcrumb.Example.tsx b/packages/experiments/src/components/Chiclet/examples/Chiclet.Breadcrumb.Example.tsx
index 7fe20bcc9e9a2..da31d2ee69b77 100644
--- a/packages/experiments/src/components/Chiclet/examples/Chiclet.Breadcrumb.Example.tsx
+++ b/packages/experiments/src/components/Chiclet/examples/Chiclet.Breadcrumb.Example.tsx
@@ -16,30 +16,39 @@ export class ChicletBreadcrumbExample extends React.Component<any, any> {
     super(props);
   }
 
-  public render() {
-    var footerButtonProps: IButtonProps[] = [{ iconProps: { iconName: 'More' } }, { iconProps: { iconName: 'Save' } }, { iconProps: { iconName: 'Share' } }];
-    var footer = <FooterComponent buttonProps={ footerButtonProps } activities="10 Comments  16 Shares  87 Views" />;
+  public render(): JSX.Element {
+    const footerButtonProps: IButtonProps[] = [
+      { iconProps: { iconName: 'More' } }, { iconProps: { iconName: 'Save' } }, { iconProps: { iconName: 'Share' } }
+    ];
+    const footer =
+      <FooterComponent buttonProps={ footerButtonProps } activities='10 Comments  16 Shares  87 Views' />;
 
-    var divider = () => <Icon iconName={ getRTL() ? 'ChevronLeft' : 'ChevronRightSmall' } className={ exampleStyles.chevron } />;
-    var breadcrumb = <Breadcrumb
-      items={ [
-        { text: 'Files', 'key': 'Files' },
-        { text: 'OneDrive Design', 'key': 'OneDrive Design' },
-        { text: 'Emails', 'key': 'Emails' },
-        { text: 'Campaigns', 'key': 'Campaigns' },
-      ] }
-      className={ exampleStyles.description }
-      onRenderItem={ this._onRenderItem }
-      dividerAs={ divider }
-    />;
+    const divider = () => <Icon iconName={ getRTL() ? 'ChevronLeft' : 'ChevronRightSmall' } className={ exampleStyles.chevron } />;
+    const breadcrumb = (
+      <Breadcrumb
+        items={ [
+          { text: 'Files', 'key': 'Files' },
+          { text: 'OneDrive Design', 'key': 'OneDrive Design' },
+          { text: 'Emails', 'key': 'Emails' },
+          { text: 'Campaigns', 'key': 'Campaigns' },
+        ] }
+        className={ exampleStyles.description }
+        onRenderItem={ this._onRenderItem }
+        dividerAs={ divider }
+      />
+    );
 
     return (
-      <Chiclet url="http://localhost:4322" size={ ChicletSize.medium } footer={ footer } description={ breadcrumb }
+      <Chiclet
+        url='http://localhost:4322'
+        size={ ChicletSize.medium }
+        footer={ footer }
+        description={ breadcrumb }
       />
     );
   }
 
-  private _onRenderItem(item: IBreadcrumbItem) {
+  private _onRenderItem(item: IBreadcrumbItem): JSX.Element {
     return (
       <TooltipHost
         content={ item.text }
@@ -57,7 +66,7 @@ export class FooterComponent extends React.Component<any, any> {
     super(props);
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { buttonProps, activities } = this.props;
 
     return _renderFooter(buttonProps, activities);
@@ -70,18 +79,20 @@ export interface IFooterComponent extends React.Props<FooterComponent> {
 }
 
 function _renderFooter(buttonProps: IButtonProps[], activities: string): React.ReactElement<any> {
-  return (<div className={ exampleStyles.footer }>
-    <div className={ exampleStyles.activities }>
-      { activities ? activities : (null) }
-    </div>
-    <div className={ exampleStyles.actions }>
-      { buttonProps && buttonProps.map((buttonProp, index) => {
-        return (
-          <div className={ exampleStyles.action } key={ index }>
-            <IconButton { ...buttonProp } />
-          </div>
-        );
-      }) }
+  return (
+    <div className={ exampleStyles.footer }>
+      <div className={ exampleStyles.activities }>
+        { activities ? activities : (null) }
+      </div>
+      <div className={ exampleStyles.actions }>
+        { buttonProps && buttonProps.map((buttonProp: IButtonProps, index: number) => {
+          return (
+            <div className={ exampleStyles.action } key={ index }>
+              <IconButton { ...buttonProp } />
+            </div>
+          );
+        }) }
+      </div>
     </div>
-  </div>);
+  );
 }

From 16156a869c2a8309689042ffbb6dbae3a1168c09 Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Fri, 18 May 2018 09:45:46 -0700
Subject: [PATCH 56/67] removed unnecessary whitespace change

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 17e858076748b..7ce5f0b04aa3b 100644
--- a/package.json
+++ b/package.json
@@ -30,4 +30,4 @@
   "devDependencies": {
     "@microsoft/rush": "4.3.0"
   }
-}
\ No newline at end of file
+}

From 275bbc27c452b948757694f844dede80204350da Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Fri, 18 May 2018 11:04:43 -0700
Subject: [PATCH 57/67] snapshot test

---
 .../src/components/Chiclet/Chiclet.base.tsx   |   4 +-
 .../components/Chiclet/ChicletCard.base.tsx   |   5 +-
 .../components/Chiclet/ChicletCard.test.tsx   |  18 ++
 .../__snapshots__/ChicletCard.test.tsx.snap   | 159 ++++++++++++++++++
 4 files changed, 181 insertions(+), 5 deletions(-)
 create mode 100644 packages/experiments/src/components/Chiclet/ChicletCard.test.tsx
 create mode 100644 packages/experiments/src/components/Chiclet/__snapshots__/ChicletCard.test.tsx.snap

diff --git a/packages/experiments/src/components/Chiclet/Chiclet.base.tsx b/packages/experiments/src/components/Chiclet/Chiclet.base.tsx
index 8d8d416ede335..b01d92e7dafab 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.base.tsx
+++ b/packages/experiments/src/components/Chiclet/Chiclet.base.tsx
@@ -11,7 +11,7 @@ import { IChicletProps, IChicletStyles, IChicletStyleProps, ChicletSize } from '
 const getClassNames = classNamesFunction<IChicletStyleProps, IChicletStyles>();
 
 @customizable('ChicletBase', ['theme'])
-export class ChicletBase extends BaseComponent<IChicletProps, any> {
+export class ChicletBase extends BaseComponent<IChicletProps, {}> {
   private _classNames: { [key in keyof IChicletStyles]: string };
 
   constructor(props: IChicletProps) {
@@ -40,7 +40,7 @@ export class ChicletBase extends BaseComponent<IChicletProps, any> {
     }
   }
 
-  public componentWillReceiveProps(nextProps: any): void {
+  public componentWillReceiveProps(nextProps: IChicletProps): void {
     if (this.props.url !== nextProps.url) {
       this.setState({ chicletCardProps: getOpenGraphProperties(this.props.url) });
     }
diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx b/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx
index eac2a6a530902..c9e05f2819250 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx
@@ -8,7 +8,6 @@ import {
 import { IChicletCardStyles, IChicletCardStyleProps, IChicletCardProps } from './ChicletCard.types';
 import { mergeStyles } from '../../Styling';
 import { Image } from 'office-ui-fabric-react/lib/Image';
-import { TestImages } from 'office-ui-fabric-react/src/common/TestImages';
 
 const getClassNames = classNamesFunction<IChicletCardStyleProps, IChicletCardStyles>();
 
@@ -18,7 +17,7 @@ const PREVIEW_IMAGE_WIDTH = '198px';
 const PREVIEW_IMAGE_HEIGHT = '122px';
 
 @customizable('ChicletCardBase', ['theme'])
-export class ChicletCardBase extends BaseComponent<IChicletCardProps, any> {
+export class ChicletCardBase extends BaseComponent<IChicletCardProps, {}> {
   public static defaultProps: IChicletCardProps = {
     imageWidth: PREVIEW_IMAGE_WIDTH,
     imageHeight: PREVIEW_IMAGE_HEIGHT
@@ -105,7 +104,7 @@ export class ChicletCardBase extends BaseComponent<IChicletCardProps, any> {
           height={ PREVIEW_IMAGE_HEIGHT }
           src={ itemType
             ? `${ASSET_CDN_BASE_URL}/brand-icons/document/svg/` + itemType + `_48x1.svg`
-            : TestImages.documentPreview /* @todo: this will be replaced by something built by the design team */ }
+            : (null) /* @todo: this will be replaced by something built by the design team */ }
           role='presentation'
           alt={ imageAlt ? imageAlt : undefined }
         />
diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.test.tsx b/packages/experiments/src/components/Chiclet/ChicletCard.test.tsx
new file mode 100644
index 0000000000000..7c3c8dc276466
--- /dev/null
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.test.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import * as renderer from 'react-test-renderer';
+
+import { ChicletCard } from './ChicletCard';
+import { IChicletCardProps } from './ChicletCard.types';
+
+describe('Dialog', () => {
+  it('renders chiclet with title and url', () => {
+    const chicletCardProps: IChicletCardProps = { title: 'My Daily Notes', itemType: 'docx', onClick: () => alert('test') };
+    const component = renderer.create(
+      <ChicletCard { ...chicletCardProps } url='https://onedrive.com' />
+    );
+
+    const tree = component.toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});
\ No newline at end of file
diff --git a/packages/experiments/src/components/Chiclet/__snapshots__/ChicletCard.test.tsx.snap b/packages/experiments/src/components/Chiclet/__snapshots__/ChicletCard.test.tsx.snap
new file mode 100644
index 0000000000000..8c0866bf3ceb0
--- /dev/null
+++ b/packages/experiments/src/components/Chiclet/__snapshots__/ChicletCard.test.tsx.snap
@@ -0,0 +1,159 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Dialog renders chiclet with title and url 1`] = `
+<div
+  className=
+      ms-ChicletCard
+      ms-Chiclet
+      {
+        -webkit-font-smoothing: antialiased;
+        background-color: #ffffff;
+        border-radius: 2px;
+        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
+        box-sizing: border-box;
+        height: 126px;
+        margin-bottom: 0px;
+        margin-left: 0px;
+        margin-right: 0px;
+        margin-top: 0px;
+        padding-bottom: 0px;
+        padding-left: 0px;
+        padding-right: 0px;
+        padding-top: 0px;
+        position: relative;
+        user-select: none;
+        width: 600px;
+      }
+      &:hover {
+        cursor: pointer;
+      }
+  onClick={[Function]}
+  role="button"
+  tabIndex={0}
+>
+  <div
+    className=
+        ms-ChicletCardPreview
+        {
+          background-color: #ffffff;
+          display: block;
+          float: left;
+          height: 122px;
+          padding-bottom: 2px;
+          padding-left: 2px;
+          padding-right: 0px;
+          padding-top: 2px;
+          position: relative;
+          width: 198px;
+        }
+  >
+    <div>
+      <div
+        className=
+            ms-Image
+            {
+              overflow: hidden;
+            }
+        style={
+          Object {
+            "height": "122px",
+            "width": "198px",
+          }
+        }
+      >
+        <img
+          alt={undefined}
+          className=
+              ms-Image-image
+              ms-Image-image--portrait
+              is-notLoaded
+              is-fadeIn
+              {
+                display: block;
+                height: 100%;
+                opacity: 0;
+                width: 100%;
+              }
+          onError={[Function]}
+          onLoad={[Function]}
+          role="presentation"
+          src={undefined}
+        />
+      </div>
+      <img
+        className=
+            ms-ChicletCardPreview-icon
+            {
+              bottom: 10px;
+              height: 24px;
+              left: 10px;
+              position: absolute;
+            }
+        src="https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/svg/word_16x1_5.svg"
+      />
+    </div>
+  </div>
+  <div
+    className=
+        ms-ChicletCardInfo
+        {
+          display: block;
+          height: 100%;
+          overflow: hidden;
+          position: relative;
+          width: 400px;
+          word-wrap: break-word;
+        }
+  >
+    <div
+      className=
+          ms-ChicletCardTitle
+          {
+            color: #333333;
+            font-size: 16px;
+            font-stretch: normal;
+            font-style: normal;
+            font-weight: normal;
+            height: 41px;
+            letter-spacing: normal;
+            line-height: 1.25;
+            overflow: hidden;
+            padding-bottom: 5px;
+            padding-left: 11px;
+            padding-right: 26px;
+            padding-top: 9px;
+            text-align: left;
+            width: 363px;
+            word-wrap: break-word;
+          }
+    >
+      My Daily Notes
+    </div>
+    <div
+      className=
+          ms-ChicletCardLink
+          {
+            color: #797671;
+            font-size: 12px;
+            font-stretch: normal;
+            font-style: normal;
+            font-weight: normal;
+            height: 16px;
+            letter-spacing: normal;
+            line-height: 1.33;
+            overflow: hidden;
+            padding-bottom: 17px;
+            padding-left: 11px;
+            padding-right: 16px;
+            padding-top: 0px;
+            text-align: left;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            width: 248px;
+          }
+    >
+      https://onedrive.com
+    </div>
+  </div>
+</div>
+`;

From db80bf270ecf036c183e64b72b01c3ec070af17c Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Fri, 18 May 2018 11:06:43 -0700
Subject: [PATCH 58/67] better description for snapshot test

---
 .../experiments/src/components/Chiclet/ChicletCard.test.tsx     | 2 +-
 .../components/Chiclet/__snapshots__/ChicletCard.test.tsx.snap  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.test.tsx b/packages/experiments/src/components/Chiclet/ChicletCard.test.tsx
index 7c3c8dc276466..6c1f0f4e9e262 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.test.tsx
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.test.tsx
@@ -5,7 +5,7 @@ import { ChicletCard } from './ChicletCard';
 import { IChicletCardProps } from './ChicletCard.types';
 
 describe('Dialog', () => {
-  it('renders chiclet with title and url', () => {
+  it('renders chiclet with title, icon, onClick, and url', () => {
     const chicletCardProps: IChicletCardProps = { title: 'My Daily Notes', itemType: 'docx', onClick: () => alert('test') };
     const component = renderer.create(
       <ChicletCard { ...chicletCardProps } url='https://onedrive.com' />
diff --git a/packages/experiments/src/components/Chiclet/__snapshots__/ChicletCard.test.tsx.snap b/packages/experiments/src/components/Chiclet/__snapshots__/ChicletCard.test.tsx.snap
index 8c0866bf3ceb0..0261a145273ab 100644
--- a/packages/experiments/src/components/Chiclet/__snapshots__/ChicletCard.test.tsx.snap
+++ b/packages/experiments/src/components/Chiclet/__snapshots__/ChicletCard.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Dialog renders chiclet with title and url 1`] = `
+exports[`Dialog renders chiclet with title, icon, onClick, and url 1`] = `
 <div
   className=
       ms-ChicletCard

From 70badd395fcb637204005fd899ce4fa15984f602 Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Fri, 18 May 2018 11:12:37 -0700
Subject: [PATCH 59/67] small fix for preview image

---
 .../experiments/src/components/Chiclet/ChicletCard.base.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx b/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx
index c9e05f2819250..7cbe577970587 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx
@@ -104,7 +104,7 @@ export class ChicletCardBase extends BaseComponent<IChicletCardProps, {}> {
           height={ PREVIEW_IMAGE_HEIGHT }
           src={ itemType
             ? `${ASSET_CDN_BASE_URL}/brand-icons/document/svg/` + itemType + `_48x1.svg`
-            : (null) /* @todo: this will be replaced by something built by the design team */ }
+            : (undefined) /* @todo: this will be replaced by something built by the design team */ }
           role='presentation'
           alt={ imageAlt ? imageAlt : undefined }
         />

From 5b381fb9bcda888828592fe5a3424c7235addb0e Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Fri, 18 May 2018 11:16:26 -0700
Subject: [PATCH 60/67] change preview image link to sharepoint link

---
 packages/experiments/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/experiments/index.html b/packages/experiments/index.html
index ae5e2a85a0d37..f38303fca4568 100644
--- a/packages/experiments/index.html
+++ b/packages/experiments/index.html
@@ -9,7 +9,7 @@
   <meta property="og:type" content="word">
   <meta property="og:description" content="This is a test Word document for our Chiclet">
   <meta property="og:url" content="https://1drv.ms/w/s!AuT_wMavg6p-gSs6utwJnX-Thtbpvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv">
-  <meta property="og:image" content="https://i.ytimg.com/vi/MmKlaGpmYig/maxresdefault.jpg">
+  <meta property="og:image" content="https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/svg/word_16x1_5.svg">
 
   <title>Office UI Fabric React Examples</title>
 

From 8f17013e389e53b18bba72c661687b3781955b32 Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Fri, 18 May 2018 12:26:27 -0700
Subject: [PATCH 61/67] change file for Chiclet

---
 .../chiclet_2018-05-18-19-25.json                     | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 common/changes/office-ui-fabric-react/chiclet_2018-05-18-19-25.json

diff --git a/common/changes/office-ui-fabric-react/chiclet_2018-05-18-19-25.json b/common/changes/office-ui-fabric-react/chiclet_2018-05-18-19-25.json
new file mode 100644
index 0000000000000..f83fc44d7e964
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/chiclet_2018-05-18-19-25.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Implementation of experimental chiclet component",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "naethell@microsoft.com"
+}
\ No newline at end of file

From 9a7d9e877be38b5bcb62e7baa014115179009493 Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Mon, 21 May 2018 10:02:21 -0700
Subject: [PATCH 62/67] fixed tslint errors and added state to Chiclet

---
 .../src/components/Chiclet/Chiclet.base.tsx   |  7 ++++-
 .../src/components/Chiclet/Chiclet.types.ts   |  4 +--
 .../components/Chiclet/ChicletCard.styles.ts  |  2 +-
 .../components/Chiclet/ChicletCard.types.ts   |  4 +--
 .../src/components/Chiclet/ChicletPage.tsx    |  2 +-
 .../src/components/Chiclet/OpenGraph.ts       |  4 +--
 .../examples/Chiclet.Basic.Example.scss       |  2 --
 .../examples/Chiclet.Basic.Example.tsx        | 26 ++++++++---------
 .../examples/Chiclet.Breadcrumb.Example.tsx   | 28 +++++++++----------
 9 files changed, 41 insertions(+), 38 deletions(-)

diff --git a/packages/experiments/src/components/Chiclet/Chiclet.base.tsx b/packages/experiments/src/components/Chiclet/Chiclet.base.tsx
index b01d92e7dafab..5e40e49b93b75 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.base.tsx
+++ b/packages/experiments/src/components/Chiclet/Chiclet.base.tsx
@@ -7,11 +7,16 @@ import {
 import { ChicletCard } from './ChicletCard';
 import { getOpenGraphProperties } from './OpenGraph';
 import { IChicletProps, IChicletStyles, IChicletStyleProps, ChicletSize } from './Chiclet.types';
+import { IChicletCardProps } from './ChicletCard.types';
 
 const getClassNames = classNamesFunction<IChicletStyleProps, IChicletStyles>();
 
+export interface IChicletState {
+  chicletCardProps?: IChicletCardProps;
+}
+
 @customizable('ChicletBase', ['theme'])
-export class ChicletBase extends BaseComponent<IChicletProps, {}> {
+export class ChicletBase extends BaseComponent<IChicletProps, IChicletState> {
   private _classNames: { [key in keyof IChicletStyles]: string };
 
   constructor(props: IChicletProps) {
diff --git a/packages/experiments/src/components/Chiclet/Chiclet.types.ts b/packages/experiments/src/components/Chiclet/Chiclet.types.ts
index b9d89640ef4cb..227901b5c2c3b 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.types.ts
+++ b/packages/experiments/src/components/Chiclet/Chiclet.types.ts
@@ -40,12 +40,12 @@ export interface IChicletProps extends React.Props<ChicletBase> {
   /**
    * Description to render for the component.
    */
-  description?: React.ReactElement<any>;
+  description?: React.ReactElement<{}>;
 
   /**
    * Footer to render for the component.
    */
-  footer?: React.ReactElement<any>;
+  footer?: React.ReactElement<HTMLDivElement>;
 
   /**
    * Theme for the component.
diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.styles.ts b/packages/experiments/src/components/Chiclet/ChicletCard.styles.ts
index 4f09c42c9036e..207d93669a051 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.styles.ts
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.styles.ts
@@ -90,7 +90,7 @@ export const getStyles = (
         lineHeight: '1.33',
         letterSpacing: 'normal',
         textAlign: 'left',
-        color: '#797671',
+        color: '#797671', // @todo: get theme from designers
         width: '248px',
         height: '16px',
         overflow: 'hidden',
diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.types.ts b/packages/experiments/src/components/Chiclet/ChicletCard.types.ts
index eb07745a8f6a9..f30baac787d3f 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.types.ts
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.types.ts
@@ -64,12 +64,12 @@ export interface IChicletCardProps extends React.Props<ChicletCardBase> {
   /**
    * Description to render for the component.
    */
-  description?: React.ReactElement<any>;
+  description?: React.ReactElement<{}>;
 
   /**
    * Footer to render for the component.
    */
-  footer?: React.ReactElement<any>;
+  footer?: React.ReactElement<HTMLDivElement>;
 
   /**
    * Theme for the component.
diff --git a/packages/experiments/src/components/Chiclet/ChicletPage.tsx b/packages/experiments/src/components/Chiclet/ChicletPage.tsx
index c56698522cbbd..ef1f8864343ba 100644
--- a/packages/experiments/src/components/Chiclet/ChicletPage.tsx
+++ b/packages/experiments/src/components/Chiclet/ChicletPage.tsx
@@ -52,7 +52,7 @@ export class ChicletPage extends React.Component<IComponentDemoPageProps, {}> {
         donts={ // @todo: fill in description
           <div>
             <ul>
-              <li></li>
+              <li />
             </ul>
           </div>
         }
diff --git a/packages/experiments/src/components/Chiclet/OpenGraph.ts b/packages/experiments/src/components/Chiclet/OpenGraph.ts
index 73adadbc51eaf..da5abe973ce07 100644
--- a/packages/experiments/src/components/Chiclet/OpenGraph.ts
+++ b/packages/experiments/src/components/Chiclet/OpenGraph.ts
@@ -1,7 +1,7 @@
 import { IChicletCardProps } from './ChicletCard.types';
 
 export function getOpenGraphProperties(url: string): IChicletCardProps {
-  let attributes: IChicletCardProps = {};
+  const attributes: IChicletCardProps = {};
   const metaElements = extractMetaTags(url);
 
   for (let i = 0; i < metaElements.length; i++) {
@@ -42,7 +42,7 @@ export function getOpenGraphProperties(url: string): IChicletCardProps {
 }
 
 function extractMetaTags(url: string): NodeListOf<HTMLMetaElement> {
-  let xmlHttp = new XMLHttpRequest();
+  const xmlHttp = new XMLHttpRequest();
   xmlHttp.open('GET', url, false);
   xmlHttp.overrideMimeType('application/xml');
   xmlHttp.send(null);
diff --git a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.scss b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.scss
index 06401e435074c..d04360275d4d3 100644
--- a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.scss
+++ b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.scss
@@ -1,5 +1,3 @@
-@import '~office-ui-fabric-react/src/common/common';
-
 .footer {
   height: 36px;
   padding-left: 11px;
diff --git a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
index 4f1e0a0018db4..9495dbfba237f 100644
--- a/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
+++ b/packages/experiments/src/components/Chiclet/examples/Chiclet.Basic.Example.tsx
@@ -7,32 +7,32 @@ import { IButtonProps } from 'office-ui-fabric-react/lib/Button';
 import * as exampleStyles from './Chiclet.Basic.Example.scss';
 import { IconButton } from 'office-ui-fabric-react/lib/Button';
 
-export class ChicletBasicExample extends React.Component<any, any> {
-  constructor(props: {}) {
+export class FooterComponent extends React.Component<IFooterComponent, {}> {
+  constructor(props: IFooterComponent) {
     super(props);
   }
 
   public render(): JSX.Element {
-    const footerButtonProps: IButtonProps[] = [
-      { iconProps: { iconName: 'More' } }, { iconProps: { iconName: 'Save' } }, { iconProps: { iconName: 'Share' } }
-    ];
-    const footer = <FooterComponent buttonProps={ footerButtonProps } activities='10 Comments  16 Shares  87 Views' />;
+    const { buttonProps, activities } = this.props;
 
-    return (
-      <Chiclet url='http://localhost:4322' size={ ChicletSize.medium } footer={ footer } />
-    );
+    return _renderFooter(buttonProps, activities);
   }
 }
 
-export class FooterComponent extends React.Component<any, any> {
+export class ChicletBasicExample extends React.Component<{}, {}> {
   constructor(props: {}) {
     super(props);
   }
 
   public render(): JSX.Element {
-    const { buttonProps, activities } = this.props;
+    const footerButtonProps: IButtonProps[] = [
+      { iconProps: { iconName: 'More' } }, { iconProps: { iconName: 'Save' } }, { iconProps: { iconName: 'Share' } }
+    ];
+    const footer = <FooterComponent buttonProps={ footerButtonProps } activities='10 Comments  16 Shares  87 Views' />;
 
-    return _renderFooter(buttonProps, activities);
+    return (
+      <Chiclet url='http://localhost:4322' size={ ChicletSize.medium } footer={ footer } />
+    );
   }
 }
 
@@ -41,7 +41,7 @@ export interface IFooterComponent extends React.Props<FooterComponent> {
   activities: string;
 }
 
-function _renderFooter(buttonProps: IButtonProps[], activities: string): React.ReactElement<any> {
+function _renderFooter(buttonProps: IButtonProps[], activities: string): React.ReactElement<HTMLDivElement> {
   return (
     <div className={ exampleStyles.footer }>
       <div className={ exampleStyles.activities }>
diff --git a/packages/experiments/src/components/Chiclet/examples/Chiclet.Breadcrumb.Example.tsx b/packages/experiments/src/components/Chiclet/examples/Chiclet.Breadcrumb.Example.tsx
index da31d2ee69b77..832db919841de 100644
--- a/packages/experiments/src/components/Chiclet/examples/Chiclet.Breadcrumb.Example.tsx
+++ b/packages/experiments/src/components/Chiclet/examples/Chiclet.Breadcrumb.Example.tsx
@@ -11,7 +11,19 @@ import { TooltipHost, TooltipOverflowMode } from 'office-ui-fabric-react/lib/Too
 import { Breadcrumb, IBreadcrumbItem } from 'office-ui-fabric-react/lib/Breadcrumb';
 import { getRTL } from '../../../Utilities';
 
-export class ChicletBreadcrumbExample extends React.Component<any, any> {
+export class FooterComponent extends React.Component<IFooterComponent, {}> {
+  constructor(props: IFooterComponent) {
+    super(props);
+  }
+
+  public render(): JSX.Element {
+    const { buttonProps, activities } = this.props;
+
+    return _renderFooter(buttonProps, activities);
+  }
+}
+
+export class ChicletBreadcrumbExample extends React.Component<{}, {}> {
   constructor(props: {}) {
     super(props);
   }
@@ -61,24 +73,12 @@ export class ChicletBreadcrumbExample extends React.Component<any, any> {
   }
 }
 
-export class FooterComponent extends React.Component<any, any> {
-  constructor(props: {}) {
-    super(props);
-  }
-
-  public render(): JSX.Element {
-    const { buttonProps, activities } = this.props;
-
-    return _renderFooter(buttonProps, activities);
-  }
-}
-
 export interface IFooterComponent extends React.Props<FooterComponent> {
   buttonProps: IButtonProps[];
   activities: string;
 }
 
-function _renderFooter(buttonProps: IButtonProps[], activities: string): React.ReactElement<any> {
+function _renderFooter(buttonProps: IButtonProps[], activities: string): React.ReactElement<HTMLDivElement> {
   return (
     <div className={ exampleStyles.footer }>
       <div className={ exampleStyles.activities }>

From be9118f6e98942e58c4040f7eb86ef61fb2df8fe Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Mon, 21 May 2018 10:26:50 -0700
Subject: [PATCH 63/67] small bug fix for image preview and change sample url

---
 packages/experiments/index.html                               | 4 ++--
 .../experiments/src/components/Chiclet/ChicletCard.base.tsx   | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/experiments/index.html b/packages/experiments/index.html
index f38303fca4568..dda8acdd7c6a6 100644
--- a/packages/experiments/index.html
+++ b/packages/experiments/index.html
@@ -6,10 +6,10 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" user-scalable="no" />
   <meta property="og:title" content="WordTest with a really long title that will wrap around to the second line but not the third line">
-  <meta property="og:type" content="word">
+  <meta property="og:type" content="docx">
   <meta property="og:description" content="This is a test Word document for our Chiclet">
   <meta property="og:url" content="https://1drv.ms/w/s!AuT_wMavg6p-gSs6utwJnX-Thtbpvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv">
-  <meta property="og:image" content="https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/svg/word_16x1_5.svg">
+  <meta property="og:image" content="https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/svg/docx_48x1.svg">
 
   <title>Office UI Fabric React Examples</title>
 
diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx b/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx
index 7cbe577970587..76c5614458d57 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx
@@ -50,7 +50,7 @@ export class ChicletCardBase extends BaseComponent<IChicletCardProps, {}> {
     const role = actionable ? (onClick ? 'button' : 'link') : undefined;
     const tabIndex = actionable ? 0 : undefined;
 
-    const preview = this._renderPreviewImage(image, imageHeight, imageWidth, itemType);
+    const preview = this._renderPreviewImage(image, imageHeight, imageWidth, itemType, imageAlt);
 
     return (
       <div
@@ -87,7 +87,7 @@ export class ChicletCardBase extends BaseComponent<IChicletCardProps, {}> {
   private _renderPreviewImage(imageUrl?: string, imageHeight?: string, imageWidth?: string, itemType?: string, imageAlt?: string)
     : React.ReactElement<React.HTMLAttributes<HTMLDivElement>> {
     let image;
-    if (imageUrl !== null) {
+    if (imageUrl) {
       image = (
         <Image
           width={ imageWidth }

From b33c5b8037c97730ede544e5cd843de5d15d80e5 Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Mon, 21 May 2018 10:46:43 -0700
Subject: [PATCH 64/67] numerical pixel values represented as numbers rather
 than strings

---
 .../components/Chiclet/ChicletCard.styles.ts  | 30 +++++++++----------
 .../components/Chiclet/ChicletCard.types.ts   |  2 +-
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.styles.ts b/packages/experiments/src/components/Chiclet/ChicletCard.styles.ts
index 207d93669a051..1d8ce39f85c93 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.styles.ts
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.styles.ts
@@ -16,10 +16,10 @@ export const getStyles = (
       {
         WebkitFontSmoothing: 'antialiased',
         backgroundColor: palette.white,
-        borderRadius: '2px',
+        borderRadius: 2,
         boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.3)',
-        width: '600px',
-        height: '126px',
+        width: 600,
+        height: 126,
         userSelect: 'none',
         position: 'relative',
         selectors: {
@@ -32,9 +32,9 @@ export const getStyles = (
     icon: [
       'ms-ChicletCardPreview-icon',
       {
-        height: '24px',
-        left: '10px',
-        bottom: '10px',
+        height: 24,
+        left: 10,
+        bottom: 10,
         position: 'absolute'
       }
     ],
@@ -42,8 +42,8 @@ export const getStyles = (
       'ms-ChicletCardPreview',
       {
         float: 'left',
-        height: '122px',
-        width: '198px',
+        height: 122,
+        width: 198,
         position: 'relative',
         backgroundColor: palette.white,
         display: 'block',
@@ -58,22 +58,22 @@ export const getStyles = (
         height: '100%',
         overflow: 'hidden',
         wordWrap: 'break-word',
-        width: '400px'
+        width: 400
       }
     ],
     title: [
       'ms-ChicletCardTitle',
       {
         padding: '9px 26px 5px 11px',
-        fontSize: '16px',
+        fontSize: 16,
         fontWeight: 'normal',
         fontStyle: 'normal',
         fontStretch: 'normal',
         color: palette.neutralPrimary,
         letterSpacing: 'normal',
         textAlign: 'left',
-        height: '41px', // Two lines of text, making sure the third line is hidden
-        width: '363px',
+        height: 41, // Two lines of text, making sure the third line is hidden
+        width: 363,
         lineHeight: '1.25',
         overflow: 'hidden',
         wordWrap: 'break-word'
@@ -83,7 +83,7 @@ export const getStyles = (
       'ms-ChicletCardLink',
       {
         padding: '0px 16px 17px 11px',
-        fontSize: '12px',
+        fontSize: 12,
         fontWeight: 'normal',
         fontStyle: 'normal',
         fontStretch: 'normal',
@@ -91,8 +91,8 @@ export const getStyles = (
         letterSpacing: 'normal',
         textAlign: 'left',
         color: '#797671', // @todo: get theme from designers
-        width: '248px',
-        height: '16px',
+        width: 248,
+        height: 16,
         overflow: 'hidden',
         whiteSpace: 'nowrap',
         textOverflow: 'ellipsis'
diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.types.ts b/packages/experiments/src/components/Chiclet/ChicletCard.types.ts
index f30baac787d3f..828fd44f0973e 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.types.ts
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.types.ts
@@ -105,7 +105,7 @@ export interface IChicletCardStyleProps {
   /**
    * Accept theme prop.
    */
-  theme?: ITheme;
+  theme: ITheme;
 
   /**
    * Accept custom classNames

From 51f1ba86b5bec3df139da8013aaab156a4b43325 Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Mon, 21 May 2018 10:49:17 -0700
Subject: [PATCH 65/67] removed unnecessary styling names

---
 .../src/components/Chiclet/ChicletCard.styles.ts            | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.styles.ts b/packages/experiments/src/components/Chiclet/ChicletCard.styles.ts
index 1d8ce39f85c93..003e39f941c81 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.styles.ts
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.styles.ts
@@ -11,7 +11,6 @@ export const getStyles = (
 
   return ({
     root: [
-      'ms-Chiclet',
       normalize,
       {
         WebkitFontSmoothing: 'antialiased',
@@ -30,7 +29,6 @@ export const getStyles = (
       }
     ],
     icon: [
-      'ms-ChicletCardPreview-icon',
       {
         height: 24,
         left: 10,
@@ -39,7 +37,6 @@ export const getStyles = (
       }
     ],
     preview: [
-      'ms-ChicletCardPreview',
       {
         float: 'left',
         height: 122,
@@ -51,7 +48,6 @@ export const getStyles = (
       }
     ],
     info: [
-      'ms-ChicletCardInfo',
       {
         position: 'relative',
         display: 'block',
@@ -62,7 +58,6 @@ export const getStyles = (
       }
     ],
     title: [
-      'ms-ChicletCardTitle',
       {
         padding: '9px 26px 5px 11px',
         fontSize: 16,
@@ -80,7 +75,6 @@ export const getStyles = (
       }
     ],
     description: [
-      'ms-ChicletCardLink',
       {
         padding: '0px 16px 17px 11px',
         fontSize: 12,

From 679e0a699f9e7aec0cf3f935260b1fbff8307cca Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Mon, 21 May 2018 11:44:19 -0700
Subject: [PATCH 66/67] description and footer now JSX.Elements

---
 packages/experiments/src/components/Chiclet/Chiclet.types.ts  | 4 ++--
 .../experiments/src/components/Chiclet/ChicletCard.types.ts   | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/experiments/src/components/Chiclet/Chiclet.types.ts b/packages/experiments/src/components/Chiclet/Chiclet.types.ts
index 227901b5c2c3b..910fa3c3d36a5 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.types.ts
+++ b/packages/experiments/src/components/Chiclet/Chiclet.types.ts
@@ -40,12 +40,12 @@ export interface IChicletProps extends React.Props<ChicletBase> {
   /**
    * Description to render for the component.
    */
-  description?: React.ReactElement<{}>;
+  description?: React.ReactElement<JSX.Element>;
 
   /**
    * Footer to render for the component.
    */
-  footer?: React.ReactElement<HTMLDivElement>;
+  footer?: React.ReactElement<JSX.Element>;
 
   /**
    * Theme for the component.
diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.types.ts b/packages/experiments/src/components/Chiclet/ChicletCard.types.ts
index 828fd44f0973e..cc1a38ab6a85d 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.types.ts
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.types.ts
@@ -64,12 +64,12 @@ export interface IChicletCardProps extends React.Props<ChicletCardBase> {
   /**
    * Description to render for the component.
    */
-  description?: React.ReactElement<{}>;
+  description?: React.ReactElement<JSX.Element>;
 
   /**
    * Footer to render for the component.
    */
-  footer?: React.ReactElement<HTMLDivElement>;
+  footer?: React.ReactElement<JSX.Element>;
 
   /**
    * Theme for the component.

From c404200d5b2a3d2daceac071340fb59172f03529 Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Mon, 21 May 2018 12:08:28 -0700
Subject: [PATCH 67/67] removed unnecessary styling from Chiclet and updated
 snapshot

---
 .../src/components/Chiclet/Chiclet.base.tsx         | 12 +++---------
 .../src/components/Chiclet/Chiclet.styles.ts        |  2 --
 .../src/components/Chiclet/ChicletCard.base.tsx     |  1 -
 .../Chiclet/__snapshots__/ChicletCard.test.tsx.snap | 13 ++++++-------
 4 files changed, 9 insertions(+), 19 deletions(-)

diff --git a/packages/experiments/src/components/Chiclet/Chiclet.base.tsx b/packages/experiments/src/components/Chiclet/Chiclet.base.tsx
index 5e40e49b93b75..67474b1ace12a 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.base.tsx
+++ b/packages/experiments/src/components/Chiclet/Chiclet.base.tsx
@@ -1,23 +1,19 @@
 import * as React from 'react';
 import {
   BaseComponent,
-  customizable,
-  classNamesFunction
+  customizable
 } from '../../Utilities';
 import { ChicletCard } from './ChicletCard';
 import { getOpenGraphProperties } from './OpenGraph';
-import { IChicletProps, IChicletStyles, IChicletStyleProps, ChicletSize } from './Chiclet.types';
+import { IChicletProps, ChicletSize } from './Chiclet.types';
 import { IChicletCardProps } from './ChicletCard.types';
 
-const getClassNames = classNamesFunction<IChicletStyleProps, IChicletStyles>();
-
 export interface IChicletState {
   chicletCardProps?: IChicletCardProps;
 }
 
 @customizable('ChicletBase', ['theme'])
 export class ChicletBase extends BaseComponent<IChicletProps, IChicletState> {
-  private _classNames: { [key in keyof IChicletStyles]: string };
 
   constructor(props: IChicletProps) {
     super(props);
@@ -27,11 +23,9 @@ export class ChicletBase extends BaseComponent<IChicletProps, IChicletState> {
   }
 
   public render(): JSX.Element {
-    const { size, footer, getStyles, theme, description } = this.props;
+    const { size, footer, description } = this.props;
     const { chicletCardProps } = this.state;
 
-    this._classNames = getClassNames(getStyles, { theme: theme! });
-
     switch (size) {
       case ChicletSize.medium:
         return (
diff --git a/packages/experiments/src/components/Chiclet/Chiclet.styles.ts b/packages/experiments/src/components/Chiclet/Chiclet.styles.ts
index 74c2815d3f146..140ebcead20c4 100644
--- a/packages/experiments/src/components/Chiclet/Chiclet.styles.ts
+++ b/packages/experiments/src/components/Chiclet/Chiclet.styles.ts
@@ -3,8 +3,6 @@ import { IChicletStyleProps, IChicletStyles } from './Chiclet.types';
 export const getStyles = (
   props: IChicletStyleProps
 ): IChicletStyles => {
-  const { theme } = props;
-
   return ({
     root: {}
   });
diff --git a/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx b/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx
index 76c5614458d57..fca9e9f5c37de 100644
--- a/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx
+++ b/packages/experiments/src/components/Chiclet/ChicletCard.base.tsx
@@ -31,7 +31,6 @@ export class ChicletCardBase extends BaseComponent<IChicletCardProps, {}> {
       itemType,
       description,
       image,
-      imageType,
       imageWidth,
       imageHeight,
       imageAlt,
diff --git a/packages/experiments/src/components/Chiclet/__snapshots__/ChicletCard.test.tsx.snap b/packages/experiments/src/components/Chiclet/__snapshots__/ChicletCard.test.tsx.snap
index 0261a145273ab..e689c98f394ea 100644
--- a/packages/experiments/src/components/Chiclet/__snapshots__/ChicletCard.test.tsx.snap
+++ b/packages/experiments/src/components/Chiclet/__snapshots__/ChicletCard.test.tsx.snap
@@ -4,7 +4,6 @@ exports[`Dialog renders chiclet with title, icon, onClick, and url 1`] = `
 <div
   className=
       ms-ChicletCard
-      ms-Chiclet
       {
         -webkit-font-smoothing: antialiased;
         background-color: #ffffff;
@@ -33,7 +32,7 @@ exports[`Dialog renders chiclet with title, icon, onClick, and url 1`] = `
 >
   <div
     className=
-        ms-ChicletCardPreview
+
         {
           background-color: #ffffff;
           display: block;
@@ -77,12 +76,12 @@ exports[`Dialog renders chiclet with title, icon, onClick, and url 1`] = `
           onError={[Function]}
           onLoad={[Function]}
           role="presentation"
-          src={undefined}
+          src="https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/svg/docx_48x1.svg"
         />
       </div>
       <img
         className=
-            ms-ChicletCardPreview-icon
+
             {
               bottom: 10px;
               height: 24px;
@@ -95,7 +94,7 @@ exports[`Dialog renders chiclet with title, icon, onClick, and url 1`] = `
   </div>
   <div
     className=
-        ms-ChicletCardInfo
+
         {
           display: block;
           height: 100%;
@@ -107,7 +106,7 @@ exports[`Dialog renders chiclet with title, icon, onClick, and url 1`] = `
   >
     <div
       className=
-          ms-ChicletCardTitle
+
           {
             color: #333333;
             font-size: 16px;
@@ -131,7 +130,7 @@ exports[`Dialog renders chiclet with title, icon, onClick, and url 1`] = `
     </div>
     <div
       className=
-          ms-ChicletCardLink
+
           {
             color: #797671;
             font-size: 12px;