From 6079116d5b5c4d230d10cd7f492b39c5c24208e0 Mon Sep 17 00:00:00 2001
From: inateeg <inateeg@microsoft.com>
Date: Tue, 13 Mar 2018 00:16:25 -0700
Subject: [PATCH 01/12] Add DocumentCardLogo

---
 common/last-install.flag                      |  0
 common/npm-local/last-install.flag            |  0
 common/npm-local/package.json                 |  9 +++++
 common/npmx-link.json                         |  7 ++++
 common/rush-link.json                         | 14 +++++++
 .../components/DocumentCard/DocumentCard.scss | 39 ++++++++++++++++++-
 .../DocumentCard/DocumentCard.types.ts        | 28 +++++++++++++
 .../DocumentCard/DocumentCardLogo.tsx         | 18 +++++++++
 .../DocumentCard/DocumentCardPreview.tsx      | 30 ++++++++++----
 .../DocumentCard/DocumentCardTitle.tsx        | 21 ++++++++--
 .../examples/DocumentCard.Compact.Example.tsx | 28 +++++++++++++
 .../DocumentCard.Complete.Example.tsx         | 32 ++++++++++++++-
 .../src/components/DocumentCard/index.ts      |  1 +
 13 files changed, 213 insertions(+), 14 deletions(-)
 create mode 100644 common/last-install.flag
 create mode 100644 common/npm-local/last-install.flag
 create mode 100644 common/npm-local/package.json
 create mode 100644 common/npmx-link.json
 create mode 100644 common/rush-link.json
 create mode 100644 packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLogo.tsx

diff --git a/common/last-install.flag b/common/last-install.flag
new file mode 100644
index 0000000000000..e69de29bb2d1d
diff --git a/common/npm-local/last-install.flag b/common/npm-local/last-install.flag
new file mode 100644
index 0000000000000..e69de29bb2d1d
diff --git a/common/npm-local/package.json b/common/npm-local/package.json
new file mode 100644
index 0000000000000..e8fae9137af67
--- /dev/null
+++ b/common/npm-local/package.json
@@ -0,0 +1,9 @@
+{
+  "dependencies": {
+    "npm": "3.10.9"
+  },
+  "description": "Temporary file generated by the Rush tool",
+  "name": "npm-local-install",
+  "private": true,
+  "version": "0.0.0"
+}
diff --git a/common/npmx-link.json b/common/npmx-link.json
new file mode 100644
index 0000000000000..ff31b3d6d42a5
--- /dev/null
+++ b/common/npmx-link.json
@@ -0,0 +1,7 @@
+{
+  "localLinks": {
+    "todo-app": [
+      "office-ui-fabric-react"
+    ]
+  }
+}
diff --git a/common/rush-link.json b/common/rush-link.json
new file mode 100644
index 0000000000000..3953f4e35568b
--- /dev/null
+++ b/common/rush-link.json
@@ -0,0 +1,14 @@
+{
+  "localLinks": {
+    "fabric-website": [
+      "@uifabric/utilities",
+      "office-ui-fabric-react"
+    ],
+    "office-ui-fabric-react": [
+      "@uifabric/utilities"
+    ],
+    "todo-app": [
+      "office-ui-fabric-react"
+    ]
+  }
+}
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss
index f04b8bc98f117..798984de2061b 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss
@@ -226,7 +226,21 @@ $ms-DocumentCardActivity-personaTextGutter: 8px;
 .previewIconContainer {
   display: flex;
   align-items: center;
-  justify-content: center
+  justify-content: center;
+}
+
+.previewTextContainer {
+  padding: 16px;
+  display: block;
+  @include ms-font-m-plus;
+}
+
+.logo {
+  @include ms-font-xxl;
+  color: $ms-color-themePrimary;
+  display: block;
+  padding-top: 16px;
+  @include ms-padding-left(16px);
 }
 
 .icon {
@@ -286,4 +300,25 @@ $DocumentCard-title-lineHeight: 21px;
   line-height: $DocumentCard-title-lineHeight;
   overflow: hidden;
   word-wrap: break-word;
-}
\ No newline at end of file
+}
+
+.titleIcon {
+  padding: 8px 8px 8px 14px;
+  display: block;
+  @include ms-font-l;
+  color: $ms-color-neutralPrimary;
+  height: 38px; // Two lines of text, making sure the third line is hidden
+  line-height: $DocumentCard-title-lineHeight;
+  float: left;
+}
+
+.titleTitle {
+  padding-top: 8px;
+  display: block;
+  @include ms-font-l;
+  color: $ms-color-neutralPrimary;
+  height: 38px; // Two lines of text, making sure the third line is hidden
+  line-height: $DocumentCard-title-lineHeight;
+  overflow: hidden;
+  word-wrap: break-word;
+}
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.types.ts b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.types.ts
index 8c6cc15d49aa1..10073b737752b 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.types.ts
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.types.ts
@@ -5,6 +5,7 @@ import { DocumentCardPreview } from './DocumentCardPreview';
 import { DocumentCardLocation } from './DocumentCardLocation';
 import { DocumentCardActivity } from './DocumentCardActivity';
 import { DocumentCardActions } from './DocumentCardActions';
+import { DocumentCardLogo } from './DocumentCardLogo';
 import { PersonaInitialsColor } from '../../Persona';
 import { ImageFit } from '../../Image';
 import { IButtonProps } from '../../Button';
@@ -144,6 +145,12 @@ export interface IDocumentCardPreviewImage {
    * If provided, icon will be rendered instead of image.
    */
   previewIconProps?: IIconProps;
+
+  /**
+  * The props for the preview text.
+  * If provided, text will be rendered instead of image.
+  */
+  previewTextProps?: string;
 }
 
 export interface IDocumentCardTitleProps extends React.Props<DocumentCardTitle> {
@@ -162,6 +169,11 @@ export interface IDocumentCardTitleProps extends React.Props<DocumentCardTitle>
    * @defaultvalue true
    */
   shouldTruncate?: boolean;
+
+  /**
+   * Icon before title, opiontal. If the card represents conversation, icon could prepresent if there is attachment such as pin icon".
+   */
+  titleIcon?: string;
 }
 
 export interface IDocumentCardLocationProps extends React.Props<DocumentCardLocation> {
@@ -247,3 +259,19 @@ export interface IDocumentCardActionsProps extends React.Props<DocumentCardActio
    */
   views?: Number;
 }
+
+export interface IDocumentCardLogoProps extends React.Props<DocumentCardLogo> {
+  /**
+   * Gets the component ref.
+   */
+  componentRef?: () => void;
+  /**
+   * Describes DocumentCard Logo badge.
+   */
+  logoIcon: string;
+
+  /**
+   * Describe Logo name, optional.
+   */
+  logoName?: string;
+}
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLogo.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLogo.tsx
new file mode 100644
index 0000000000000..2824683bcd295
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLogo.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { BaseComponent, css } from '../../Utilities';
+import { IDocumentCardLogoProps } from './DocumentCard.types';
+import { Icon } from '../../Icon';
+import * as stylesImport from './DocumentCard.scss';
+const styles: any = stylesImport;
+
+export class DocumentCardLogo extends BaseComponent<IDocumentCardLogoProps, any> {
+  public render() {
+    const { logoIcon } = this.props;
+
+    return (
+      <div className={ css('ms-DocumentCardLogo', styles.logo) }>
+        <Icon iconName={ logoIcon } />
+      </div>
+    );
+  }
+}
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx
index 36e1c3dd3214d..0493c3e1dc20c 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx
@@ -22,14 +22,18 @@ export class DocumentCardPreview extends BaseComponent<IDocumentCardPreviewProps
       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
-        };
+      if (previewImages[0].previewTextProps) {
+        return this._renderPreviewText(previewImages[0].previewTextProps);
+      } else {
+        // 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
+          };
+        }
       }
     }
 
@@ -43,6 +47,16 @@ export class DocumentCardPreview extends BaseComponent<IDocumentCardPreviewProps
     );
   }
 
+  private _renderPreviewText(previewText?: string): React.ReactElement<React.HTMLAttributes<HTMLDivElement>> {
+    return (
+      <div>
+        { previewText &&
+          <div className={ css('ms-DocumentCardPreview', styles.previewTextContainer) }> { previewText } </div>
+        }
+      </div>
+    );
+  }
+
   private _renderPreviewImage(previewImage: IDocumentCardPreviewImage): React.ReactElement<React.HTMLAttributes<HTMLDivElement>> {
     const { width, height, imageFit, previewIconProps } = previewImage;
 
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx
index cdc913066fd40..11232f6a30b71 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx
@@ -9,6 +9,7 @@ import {
 } from '../../Utilities';
 import { IDocumentCardTitleProps } from './DocumentCard.types';
 import * as stylesImport from './DocumentCard.scss';
+import { Icon } from '../../Icon';
 const styles: any = stylesImport;
 
 export interface IDocumentCardTitleState {
@@ -65,20 +66,34 @@ export class DocumentCardTitle extends BaseComponent<IDocumentCardTitleProps, ID
   }
 
   public render() {
-    const { title, shouldTruncate } = this.props;
+    const { title, shouldTruncate, titleIcon } = this.props;
     const { truncatedTitleFirstPiece, truncatedTitleSecondPiece } = this.state;
 
     let documentCardTitle;
     if (shouldTruncate && this._isTruncated) {
       documentCardTitle = (
-        <div className={ css('ms-DocumentCardTitle', styles.title) } ref={ this._titleElement } title={ title }>{ truncatedTitleFirstPiece }&hellip;{ truncatedTitleSecondPiece }</div>
+        <div className={ css('ms-DocumentCardTitle', titleIcon ? styles.titleTitle : styles.title) } ref={ this._resolveRef('_titleElement') } title={ title }>
+          { truncatedTitleFirstPiece }&hellip;{ truncatedTitleSecondPiece }
+        </div>
       );
     } else {
       documentCardTitle = (
-        <div className={ css('ms-DocumentCardTitle', styles.title) } ref={ this._titleElement } title={ title }>{ title }</div>
+        <div className={ css('ms-DocumentCardTitle', titleIcon ? styles.titleTitle : styles.title) } ref={ this._resolveRef('_titleElement') } title={ title }>
+          { title }
+        </div>
       );
     }
 
+    if (titleIcon) {
+      return (
+        <div>
+          <div className={ css('ms-DocumentCardTitle', styles.titleIcon) } ref={ this._resolveRef('_titleWithIconElement') }>
+            { titleIcon && <Icon iconName={ titleIcon } /> }
+          </div>
+          { documentCardTitle }
+        </div>
+      );
+    }
     return documentCardTitle;
   }
 
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Compact.Example.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Compact.Example.tsx
index 2645db4b70d70..79658956d309a 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Compact.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Compact.Example.tsx
@@ -54,6 +54,15 @@ export class DocumentCardCompactExample extends React.Component<any, any> {
       ]
     };
 
+    const previewOutlookUsingIcon: IDocumentCardPreviewProps = {
+      previewImages: [
+        {
+          previewIconProps: { iconName: 'OutlookLogoInverse', styles: { root: { fontSize: 42, color: '#ffffff' } } },
+          width: 144
+        }
+      ]
+    };
+
     return (
       <div>
         <DocumentCard type={ DocumentCardType.compact } onClickHref='http://bing.com'>
@@ -109,6 +118,25 @@ export class DocumentCardCompactExample extends React.Component<any, any> {
             />
           </div>
         </DocumentCard>
+        <p />
+        <DocumentCard type={ DocumentCardType.compact } onClickHref='http://bing.com'>
+          <DocumentCardPreview { ...previewOutlookUsingIcon } />
+          <div className='ms-DocumentCard-details'>
+            <DocumentCardTitle
+              title='Conversation about anual report from SharePoint conference'
+              titleIcon='attach'
+              shouldTruncate={ true }
+            />
+            <DocumentCardActivity
+              activity='Sent a few minutes ago'
+              people={
+                [
+                  { name: 'Kat Larrson', profileImageSrc: TestImages.personaFemale }
+                ]
+              }
+            />
+          </div>
+        </DocumentCard>
       </div>
     );
   }
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Complete.Example.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Complete.Example.tsx
index 73b2356cb87f6..c53c584634216 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Complete.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Complete.Example.tsx
@@ -6,7 +6,9 @@ import {
   DocumentCardLocation,
   DocumentCardPreview,
   DocumentCardTitle,
-  IDocumentCardPreviewProps
+  DocumentCardLogo,
+  IDocumentCardPreviewProps,
+  IDocumentCardLogoProps
 } from 'office-ui-fabric-react/lib/DocumentCard';
 import { ImageFit } from 'office-ui-fabric-react/lib/Image';
 import { TestImages } from '../../../common/TestImages';
@@ -84,6 +86,18 @@ export class DocumentCardCompleteExample extends React.Component<any, any> {
       ]
     };
 
+    const previewTextProps: IDocumentCardPreviewProps = {
+      previewImages: [
+        {
+          previewTextProps: 'This is the email content preview, please feel free to give feedback. SharePoint Site Acitivity add conversation card!'
+        }
+      ]
+    }
+
+    const logoProps: IDocumentCardLogoProps = {
+      logoIcon: 'OutlookLogoInverse'
+    };
+
     return (
       <div>
         <DocumentCard
@@ -155,6 +169,22 @@ export class DocumentCardCompleteExample extends React.Component<any, any> {
             />
           </div>
         </DocumentCard>
+        <p />
+        <DocumentCard onClickHref='http://bing.com'>
+          <DocumentCardLogo { ...logoProps } />
+          <DocumentCardTitle title='Conversation about anual report a very long long name' titleIcon='attach' />
+          <DocumentCardPreview { ...previewTextProps } />
+          <DocumentCardActivity
+            activity='Sent March 13, 2018'
+            people={
+              [
+                { name: 'Annie Lindqvist', profileImageSrc: TestImages.personaFemale },
+                { name: 'Roko Kolar', profileImageSrc: '', initials: 'JH' },
+                { name: 'Greta Lundberg', profileImageSrc: TestImages.personaFemale }
+              ]
+            }
+          />
+        </DocumentCard>
       </div>
     );
   }
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/index.ts b/packages/office-ui-fabric-react/src/components/DocumentCard/index.ts
index c8b71737fb487..9354512b74bc5 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/index.ts
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/index.ts
@@ -5,3 +5,4 @@ export * from './DocumentCardActivity';
 export * from './DocumentCardLocation';
 export * from './DocumentCardPreview';
 export * from './DocumentCardTitle';
+export * from './DocumentCardLogo';

From f87d0ded6d2c699467ae6e492e9288e8b2244af9 Mon Sep 17 00:00:00 2001
From: inateeg <inateeg@microsoft.com>
Date: Thu, 15 Mar 2018 23:07:09 -0700
Subject: [PATCH 02/12] add changes file

---
 .../components/DocumentCard/DocumentCard.scss | 45 +++++++------------
 .../DocumentCard/DocumentCard.types.ts        | 28 +++++++++---
 .../DocumentCard/DocumentCardPreview.tsx      |  5 ++-
 .../DocumentCard/DocumentCardStatus.tsx       | 30 +++++++++++++
 .../DocumentCard/DocumentCardTitle.tsx        | 17 ++-----
 .../examples/DocumentCard.Compact.Example.tsx |  4 +-
 .../DocumentCard.Complete.Example.tsx         | 36 ++++++++-------
 .../examples/DocumentCard.Example.scss        |  4 ++
 .../src/components/DocumentCard/index.ts      |  1 +
 9 files changed, 101 insertions(+), 69 deletions(-)
 create mode 100644 packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardStatus.tsx

diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss
index 798984de2061b..1269b4fee950f 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss
@@ -226,21 +226,7 @@ $ms-DocumentCardActivity-personaTextGutter: 8px;
 .previewIconContainer {
   display: flex;
   align-items: center;
-  justify-content: center;
-}
-
-.previewTextContainer {
-  padding: 16px;
-  display: block;
-  @include ms-font-m-plus;
-}
-
-.logo {
-  @include ms-font-xxl;
-  color: $ms-color-themePrimary;
-  display: block;
-  padding-top: 16px;
-  @include ms-padding-left(16px);
+  justify-content: center
 }
 
 .icon {
@@ -302,23 +288,24 @@ $DocumentCard-title-lineHeight: 21px;
   word-wrap: break-word;
 }
 
-.titleIcon {
-  padding: 8px 8px 8px 14px;
+.logo {
+  font-size: 32px;
+  color: $ms-color-themePrimary;
   display: block;
-  @include ms-font-l;
-  color: $ms-color-neutralPrimary;
-  height: 38px; // Two lines of text, making sure the third line is hidden
-  line-height: $DocumentCard-title-lineHeight;
-  float: left;
+  @include ms-padding(16px, 16px, 0, 16px);
 }
 
-.titleTitle {
-  padding-top: 8px;
+
+.previewTextContainer {
+  @include ms-padding(8px, 16px, 8px, 16px);
   display: block;
-  @include ms-font-l;
+  @include ms-font-m;
+  color: $ms-color-neutralSecondary;
+}
+
+.status {
+  @include ms-margin(0,16px, 8px, 16px);
+  @include ms-font-m;
   color: $ms-color-neutralPrimary;
-  height: 38px; // Two lines of text, making sure the third line is hidden
-  line-height: $DocumentCard-title-lineHeight;
-  overflow: hidden;
-  word-wrap: break-word;
+  background-color: $ms-color-neutralLighter;
 }
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.types.ts b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.types.ts
index 10073b737752b..e3441b387ded1 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.types.ts
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.types.ts
@@ -6,6 +6,7 @@ import { DocumentCardLocation } from './DocumentCardLocation';
 import { DocumentCardActivity } from './DocumentCardActivity';
 import { DocumentCardActions } from './DocumentCardActions';
 import { DocumentCardLogo } from './DocumentCardLogo';
+import { DocumentCardStatus } from './DocumentCardStatus';
 import { PersonaInitialsColor } from '../../Persona';
 import { ImageFit } from '../../Image';
 import { IButtonProps } from '../../Button';
@@ -151,6 +152,12 @@ export interface IDocumentCardPreviewImage {
   * If provided, text will be rendered instead of image.
   */
   previewTextProps?: string;
+
+  /**
+   * The props for the preview icon container classname.
+   * If provided, icon container classname will be used..
+   */
+  previewIconContainerClass?: string;
 }
 
 export interface IDocumentCardTitleProps extends React.Props<DocumentCardTitle> {
@@ -169,11 +176,6 @@ export interface IDocumentCardTitleProps extends React.Props<DocumentCardTitle>
    * @defaultvalue true
    */
   shouldTruncate?: boolean;
-
-  /**
-   * Icon before title, opiontal. If the card represents conversation, icon could prepresent if there is attachment such as pin icon".
-   */
-  titleIcon?: string;
 }
 
 export interface IDocumentCardLocationProps extends React.Props<DocumentCardLocation> {
@@ -275,3 +277,19 @@ export interface IDocumentCardLogoProps extends React.Props<DocumentCardLogo> {
    */
   logoName?: string;
 }
+
+export interface IDocumentCardStatusProps extends React.Props<DocumentCardStatus> {
+  /**
+   * Gets the component ref.
+   */
+  componentRef?: () => void;
+  /**
+   * Describes DocumentCard status icon.
+   */
+  statusIcon?: string;
+
+  /**
+   * Describe status information. Required field.
+   */
+  status: string;
+}
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx
index 0493c3e1dc20c..e70ad133f0ba1 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx
@@ -58,11 +58,12 @@ export class DocumentCardPreview extends BaseComponent<IDocumentCardPreviewProps
   }
 
   private _renderPreviewImage(previewImage: IDocumentCardPreviewImage): React.ReactElement<React.HTMLAttributes<HTMLDivElement>> {
-    const { width, height, imageFit, previewIconProps } = previewImage;
+    const { width, height, imageFit, previewIconProps, previewIconContainerClass } = previewImage;
+    let iconContainerClass = previewIconContainerClass ? previewIconContainerClass : 'ms-DocumentCardPreview-iconContainer';
 
     if (previewIconProps) {
       return (
-        <div className={ css('ms-DocumentCardPreview-iconContainer', styles.previewIconContainer) } style={ { width: width, height: height } } >
+        <div className={ css(iconContainerClass, styles.previewIconContainer) } style={ { width: width, height: height } } >
           <Icon { ...previewIconProps } />
         </div>
       );
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardStatus.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardStatus.tsx
new file mode 100644
index 0000000000000..8bfa66de80ce0
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardStatus.tsx
@@ -0,0 +1,30 @@
+/* tslint:disable:no-unused-variable */
+import * as React from 'react';
+/* tslint:enable:no-unused-variable */
+
+import {
+  BaseComponent,
+  autobind,
+  css
+} from '../../Utilities';
+import { IDocumentCardStatusProps } from './DocumentCard.types';
+import * as stylesImport from './DocumentCard.scss';
+import { Icon } from '../../Icon';
+const styles: any = stylesImport;
+
+export class DocumentCardStatus extends BaseComponent<IDocumentCardStatusProps, any> {
+  constructor(props: IDocumentCardStatusProps) {
+    super(props);
+  }
+
+  public render() {
+    const { statusIcon, status } = this.props;
+
+    return (
+      <div className={ css('ms-DocumentCardStatus', styles.status) }>
+        { statusIcon && <Icon iconName={ statusIcon } /> }
+        { status }
+      </div>
+    );
+  }
+}
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx
index 11232f6a30b71..51f05a499252e 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx
@@ -66,34 +66,23 @@ export class DocumentCardTitle extends BaseComponent<IDocumentCardTitleProps, ID
   }
 
   public render() {
-    const { title, shouldTruncate, titleIcon } = this.props;
+    const { title, shouldTruncate } = this.props;
     const { truncatedTitleFirstPiece, truncatedTitleSecondPiece } = this.state;
 
     let documentCardTitle;
     if (shouldTruncate && this._isTruncated) {
       documentCardTitle = (
-        <div className={ css('ms-DocumentCardTitle', titleIcon ? styles.titleTitle : styles.title) } ref={ this._resolveRef('_titleElement') } title={ title }>
+        <div className={ css('ms-DocumentCardTitle', styles.title) } ref={ this._resolveRef('_titleElement') } title={ title }>
           { truncatedTitleFirstPiece }&hellip;{ truncatedTitleSecondPiece }
         </div>
       );
     } else {
       documentCardTitle = (
-        <div className={ css('ms-DocumentCardTitle', titleIcon ? styles.titleTitle : styles.title) } ref={ this._resolveRef('_titleElement') } title={ title }>
+        <div className={ css('ms-DocumentCardTitle', styles.title) } ref={ this._resolveRef('_titleElement') } title={ title }>
           { title }
         </div>
       );
     }
-
-    if (titleIcon) {
-      return (
-        <div>
-          <div className={ css('ms-DocumentCardTitle', styles.titleIcon) } ref={ this._resolveRef('_titleWithIconElement') }>
-            { titleIcon && <Icon iconName={ titleIcon } /> }
-          </div>
-          { documentCardTitle }
-        </div>
-      );
-    }
     return documentCardTitle;
   }
 
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Compact.Example.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Compact.Example.tsx
index 79658956d309a..bddd669c14dd1 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Compact.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Compact.Example.tsx
@@ -57,7 +57,8 @@ export class DocumentCardCompactExample extends React.Component<any, any> {
     const previewOutlookUsingIcon: IDocumentCardPreviewProps = {
       previewImages: [
         {
-          previewIconProps: { iconName: 'OutlookLogoInverse', styles: { root: { fontSize: 42, color: '#ffffff' } } },
+          previewIconProps: { iconName: 'OutlookLogoInverse', styles: { root: { fontSize: 42, color: '#0078d7' } } },
+          previewIconContainerClass: 'ms-DocumentCardPreview-iconContainer2',
           width: 144
         }
       ]
@@ -124,7 +125,6 @@ export class DocumentCardCompactExample extends React.Component<any, any> {
           <div className='ms-DocumentCard-details'>
             <DocumentCardTitle
               title='Conversation about anual report from SharePoint conference'
-              titleIcon='attach'
               shouldTruncate={ true }
             />
             <DocumentCardActivity
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Complete.Example.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Complete.Example.tsx
index c53c584634216..3601f994df68c 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Complete.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Complete.Example.tsx
@@ -7,6 +7,7 @@ import {
   DocumentCardPreview,
   DocumentCardTitle,
   DocumentCardLogo,
+  DocumentCardStatus,
   IDocumentCardPreviewProps,
   IDocumentCardLogoProps
 } from 'office-ui-fabric-react/lib/DocumentCard';
@@ -92,7 +93,7 @@ export class DocumentCardCompleteExample extends React.Component<any, any> {
           previewTextProps: 'This is the email content preview, please feel free to give feedback. SharePoint Site Acitivity add conversation card!'
         }
       ]
-    }
+    };
 
     const logoProps: IDocumentCardLogoProps = {
       logoIcon: 'OutlookLogoInverse'
@@ -152,6 +153,23 @@ export class DocumentCardCompleteExample extends React.Component<any, any> {
           />
         </DocumentCard>
         <p />
+        <DocumentCard onClickHref='http://bing.com'>
+          <DocumentCardLogo { ...logoProps } />
+          <DocumentCardTitle title='Conversation about anual report a very long long name' />
+          <DocumentCardPreview { ...previewTextProps } />
+          <DocumentCardStatus statusIcon='attach' status=' 3 Attachments' />
+          <DocumentCardActivity
+            activity='Sent March 13, 2018'
+            people={
+              [
+                { name: 'Annie Lindqvist', profileImageSrc: TestImages.personaFemale },
+                { name: 'Roko Kolar', profileImageSrc: '', initials: 'JH' },
+                { name: 'Greta Lundberg', profileImageSrc: TestImages.personaFemale }
+              ]
+            }
+          />
+        </DocumentCard>
+        <p />
         <DocumentCard onClickHref='http://bing.com'>
           <DocumentCardPreview { ...previewPropsUsingIcon } />
           <div className='ms-DocumentCard-details'>
@@ -169,22 +187,6 @@ export class DocumentCardCompleteExample extends React.Component<any, any> {
             />
           </div>
         </DocumentCard>
-        <p />
-        <DocumentCard onClickHref='http://bing.com'>
-          <DocumentCardLogo { ...logoProps } />
-          <DocumentCardTitle title='Conversation about anual report a very long long name' titleIcon='attach' />
-          <DocumentCardPreview { ...previewTextProps } />
-          <DocumentCardActivity
-            activity='Sent March 13, 2018'
-            people={
-              [
-                { name: 'Annie Lindqvist', profileImageSrc: TestImages.personaFemale },
-                { name: 'Roko Kolar', profileImageSrc: '', initials: 'JH' },
-                { name: 'Greta Lundberg', profileImageSrc: TestImages.personaFemale }
-              ]
-            }
-          />
-        </DocumentCard>
       </div>
     );
   }
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Example.scss b/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Example.scss
index f150ec2e88415..18cf9c99a5224 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Example.scss
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Example.scss
@@ -4,4 +4,8 @@
   .ms-DocumentCardPreview-iconContainer {
     background-color: $ms-color-themePrimary;
   }
+
+  .ms-DocumentCardPreview-iconContainer2 {
+    background-color: $ms-color-neutralLighterAlt;
+  }
 }
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/index.ts b/packages/office-ui-fabric-react/src/components/DocumentCard/index.ts
index 9354512b74bc5..88e75b458727e 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/index.ts
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/index.ts
@@ -6,3 +6,4 @@ export * from './DocumentCardLocation';
 export * from './DocumentCardPreview';
 export * from './DocumentCardTitle';
 export * from './DocumentCardLogo';
+export * from './DocumentCardStatus';

From bf5004c93558537e1b6382c1afc5d0cd46780bb8 Mon Sep 17 00:00:00 2001
From: inateeg <inateeg@microsoft.com>
Date: Thu, 15 Mar 2018 23:07:33 -0700
Subject: [PATCH 03/12] add changes file

---
 .../inateeg-0302card_2018-03-16-06-06.json            | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 common/changes/office-ui-fabric-react/inateeg-0302card_2018-03-16-06-06.json

diff --git a/common/changes/office-ui-fabric-react/inateeg-0302card_2018-03-16-06-06.json b/common/changes/office-ui-fabric-react/inateeg-0302card_2018-03-16-06-06.json
new file mode 100644
index 0000000000000..05b966dc9c343
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/inateeg-0302card_2018-03-16-06-06.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Add DocumentCardLogo and DoucmentCardStatus for Conversation card",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "inateeg@microsoft.com"
+}
\ No newline at end of file

From 53277163e2c1dc9fc89cb9ca6099d48daac9abd4 Mon Sep 17 00:00:00 2001
From: inateeg <inateeg@microsoft.com>
Date: Fri, 16 Mar 2018 13:02:25 -0700
Subject: [PATCH 04/12] update

---
 .../src/components/DocumentCard/DocumentCard.scss         | 3 ++-
 .../src/components/DocumentCard/DocumentCardStatus.tsx    | 8 ++++++--
 .../examples/DocumentCard.Compact.Example.tsx             | 2 +-
 .../examples/DocumentCard.Complete.Example.tsx            | 2 +-
 4 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss
index 1269b4fee950f..51f0e713b8118 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss
@@ -304,8 +304,9 @@ $DocumentCard-title-lineHeight: 21px;
 }
 
 .status {
-  @include ms-margin(0,16px, 8px, 16px);
+  @include ms-margin(0, 16px, 8px, 16px);
   @include ms-font-m;
   color: $ms-color-neutralPrimary;
   background-color: $ms-color-neutralLighter;
+  height: 32px;
 }
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardStatus.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardStatus.tsx
index 8bfa66de80ce0..127222419f41f 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardStatus.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardStatus.tsx
@@ -19,10 +19,14 @@ export class DocumentCardStatus extends BaseComponent<IDocumentCardStatusProps,
 
   public render() {
     const { statusIcon, status } = this.props;
-
+    const iconProps = {
+      iconName: statusIcon, styles: {
+        root: { padding: '8px' }
+      }
+    };
     return (
       <div className={ css('ms-DocumentCardStatus', styles.status) }>
-        { statusIcon && <Icon iconName={ statusIcon } /> }
+        { statusIcon && <Icon { ...iconProps } /> }
         { status }
       </div>
     );
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Compact.Example.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Compact.Example.tsx
index bddd669c14dd1..dd04ff54c3fac 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Compact.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Compact.Example.tsx
@@ -57,7 +57,7 @@ export class DocumentCardCompactExample extends React.Component<any, any> {
     const previewOutlookUsingIcon: IDocumentCardPreviewProps = {
       previewImages: [
         {
-          previewIconProps: { iconName: 'OutlookLogoInverse', styles: { root: { fontSize: 42, color: '#0078d7' } } },
+          previewIconProps: { iconName: 'OutlookLogo', styles: { root: { fontSize: 42, color: '#0078d7' } } },
           previewIconContainerClass: 'ms-DocumentCardPreview-iconContainer2',
           width: 144
         }
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Complete.Example.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Complete.Example.tsx
index 3601f994df68c..e5f7e3e7d27db 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Complete.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Complete.Example.tsx
@@ -96,7 +96,7 @@ export class DocumentCardCompleteExample extends React.Component<any, any> {
     };
 
     const logoProps: IDocumentCardLogoProps = {
-      logoIcon: 'OutlookLogoInverse'
+      logoIcon: 'OutlookLogo'
     };
 
     return (

From bc46ee46062ba80942889d778a470100a6c1b9f5 Mon Sep 17 00:00:00 2001
From: inateeg <inateeg@microsoft.com>
Date: Tue, 20 Mar 2018 17:30:58 -0700
Subject: [PATCH 05/12] update on title to support secondary title used as text
 preview

---
 .../components/DocumentCard/DocumentCard.scss | 12 ++++-
 .../DocumentCard/DocumentCard.types.ts        |  6 +++
 .../DocumentCard/DocumentCardPage.tsx         |  5 ++-
 .../DocumentCard/DocumentCardPreview.tsx      | 22 ++++-----
 .../DocumentCard/DocumentCardTitle.tsx        | 28 +++++++-----
 .../DocumentCard.Complete.Example.tsx         | 45 ++++++++++++++-----
 6 files changed, 83 insertions(+), 35 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss
index 51f0e713b8118..ef756ab3323df 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss
@@ -274,7 +274,6 @@ $ms-DocumentCardActivity-personaTextGutter: 8px;
   font-size: $ms-font-size-s;
 }
 
-
 /** Title **/
 $DocumentCard-title-lineHeight: 21px;
 .title {
@@ -288,6 +287,17 @@ $DocumentCard-title-lineHeight: 21px;
   word-wrap: break-word;
 }
 
+.secondaryTitle {
+  padding: 8px 16px;
+  display: block;
+  @include ms-font-m;
+  color: $ms-color-neutralSecondary;
+  line-height: 18px;
+  overflow: hidden;
+  word-wrap: break-word;
+  height: 59px;
+}
+
 .logo {
   font-size: 32px;
   color: $ms-color-themePrimary;
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.types.ts b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.types.ts
index e3441b387ded1..cf881b6e585f1 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.types.ts
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.types.ts
@@ -176,6 +176,12 @@ export interface IDocumentCardTitleProps extends React.Props<DocumentCardTitle>
    * @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 IDocumentCardLocationProps extends React.Props<DocumentCardLocation> {
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPage.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPage.tsx
index 0a875ffa7f05e..11dd49b7b1862 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPage.tsx
@@ -33,6 +33,9 @@ export class DocumentCardPage extends React.Component<IComponentDemoPageProps, {
               <p>
                 This example shows a couple of optional abilities, including being able to have a card represent multiple items, being able to expose up to three relevant commands, and showing the number of views in the bottom right corner.
               </p>
+              <p>
+                Also show a card with Logo, text preview and status that is used for Conversation card.
+              </p>
               <DocumentCardCompleteExample />
             </ExampleCard>
             <ExampleCard title='DocumentCard with compact layout ' code={ DocumentCardCompactExampleCode }>
@@ -80,7 +83,7 @@ export class DocumentCardPage extends React.Component<IComponentDemoPageProps, {
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
           <ComponentStatus
-            {...DocumentCardStatus}
+            { ...DocumentCardStatus }
           />
         }
       />
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx
index e70ad133f0ba1..a836c31d3a261 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx
@@ -22,18 +22,14 @@ export class DocumentCardPreview extends BaseComponent<IDocumentCardPreviewProps
       preview = this._renderPreviewList(previewImages);
       isFileList = true;
     } else if (previewImages.length === 1) {
-      if (previewImages[0].previewTextProps) {
-        return this._renderPreviewText(previewImages[0].previewTextProps);
-      } else {
-        // 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
-          };
-        }
+      // 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
+        };
       }
     }
 
@@ -59,7 +55,7 @@ export class DocumentCardPreview extends BaseComponent<IDocumentCardPreviewProps
 
   private _renderPreviewImage(previewImage: IDocumentCardPreviewImage): React.ReactElement<React.HTMLAttributes<HTMLDivElement>> {
     const { width, height, imageFit, previewIconProps, previewIconContainerClass } = previewImage;
-    let iconContainerClass = previewIconContainerClass ? previewIconContainerClass : 'ms-DocumentCardPreview-iconContainer';
+    const iconContainerClass = previewIconContainerClass ? previewIconContainerClass : 'ms-DocumentCardPreview-iconContainer';
 
     if (previewIconProps) {
       return (
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx
index 51f05a499252e..c7e94cf01a88a 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx
@@ -20,6 +20,10 @@ export interface IDocumentCardTitleState {
 const TRUNCATION_SEPARATOR = '&hellip;';
 const TRUNCATION_MINIMUM_LENGTH = 40; // This is the length we know can fit into the min width of DocumentCard.
 const TRUNCATION_MAXIMUM_LENGTH = 90 - TRUNCATION_SEPARATOR.length;
+
+// This is the length we know can fit into the min width 2 lines of DocumentCard.
+const TRUNCATION_MINI_LENGTH_SECONDARY = 80;
+const TRUNCATION_MAX_LENGTH_SECONDARY = 130 - TRUNCATION_SEPARATOR.length;
 const TRUNCATION_FIRST_PIECE_LONGER_BY = 10;
 const TRUNCATION_VERTICAL_OVERFLOW_THRESHOLD = 5;
 
@@ -39,8 +43,9 @@ export class DocumentCardTitle extends BaseComponent<IDocumentCardTitleProps, ID
   }
 
   public componentDidMount() {
-    const { title, shouldTruncate } = this.props;
-    if (shouldTruncate && title && title.length > TRUNCATION_MINIMUM_LENGTH) {
+    const { title, shouldTruncate, showAsSecondaryTitle } = this.props;
+    const miniLength = showAsSecondaryTitle ? TRUNCATION_MINI_LENGTH_SECONDARY : TRUNCATION_MINIMUM_LENGTH;
+    if (shouldTruncate && title && title.length > miniLength) {
       if (this._doesTitleOverflow()) {
         this._startTruncation(this.props);
       }
@@ -52,7 +57,8 @@ export class DocumentCardTitle extends BaseComponent<IDocumentCardTitleProps, ID
     this._events.off(window, 'resize');
     this._isTruncated = false;
 
-    if (newProps.shouldTruncate && newProps.title && newProps.title.length > TRUNCATION_MINIMUM_LENGTH) {
+    const miniLength = newProps.showAsSecondaryTitle ? TRUNCATION_MINI_LENGTH_SECONDARY : TRUNCATION_MINIMUM_LENGTH;
+    if (newProps.shouldTruncate && newProps.title && newProps.title.length > miniLength) {
       this._startTruncation(newProps);
       this._events.on(window, 'resize', this._updateTruncation);
     }
@@ -66,19 +72,19 @@ export class DocumentCardTitle extends BaseComponent<IDocumentCardTitleProps, ID
   }
 
   public render() {
-    const { title, shouldTruncate } = this.props;
+    const { title, shouldTruncate, showAsSecondaryTitle } = this.props;
     const { truncatedTitleFirstPiece, truncatedTitleSecondPiece } = this.state;
 
     let documentCardTitle;
     if (shouldTruncate && this._isTruncated) {
       documentCardTitle = (
-        <div className={ css('ms-DocumentCardTitle', styles.title) } ref={ this._resolveRef('_titleElement') } title={ title }>
+        <div className={ css('ms-DocumentCardTitle', showAsSecondaryTitle ? styles.secondaryTitle : styles.title) } ref={ this._resolveRef('_titleElement') } title={ title }>
           { truncatedTitleFirstPiece }&hellip;{ truncatedTitleSecondPiece }
         </div>
       );
     } else {
       documentCardTitle = (
-        <div className={ css('ms-DocumentCardTitle', styles.title) } ref={ this._resolveRef('_titleElement') } title={ title }>
+        <div className={ css('ms-DocumentCardTitle', showAsSecondaryTitle ? styles.secondaryTitle : styles.title) } ref={ this._resolveRef('_titleElement') } title={ title }>
           { title }
         </div>
       );
@@ -89,17 +95,19 @@ export class DocumentCardTitle extends BaseComponent<IDocumentCardTitleProps, ID
   private _startTruncation = (props: IDocumentCardTitleProps): void => {
     const originalTitle = props.title;
     this._isTruncated = false;
+    const miniLength = props.showAsSecondaryTitle ? TRUNCATION_MINI_LENGTH_SECONDARY : TRUNCATION_MINIMUM_LENGTH;
+    const maxLength = props.showAsSecondaryTitle ? TRUNCATION_MAX_LENGTH_SECONDARY : TRUNCATION_MAXIMUM_LENGTH;
 
     // If the title is really short, there's no need to truncate it
-    if (originalTitle && originalTitle.length >= TRUNCATION_MINIMUM_LENGTH) {
+    if (originalTitle && originalTitle.length >= miniLength) {
 
       // Break the text into two pieces for assembly later
-      if (originalTitle.length > TRUNCATION_MAXIMUM_LENGTH) {
+      if (originalTitle.length > maxLength) {
         // The text is really long, so we can take a chunk out of the middle so the two pieces combine for the maximum length
         this._isTruncated = true;
         this.setState({
-          truncatedTitleFirstPiece: originalTitle.slice(0, TRUNCATION_MAXIMUM_LENGTH / 2 + TRUNCATION_FIRST_PIECE_LONGER_BY),
-          truncatedTitleSecondPiece: originalTitle.slice(originalTitle.length - (TRUNCATION_MAXIMUM_LENGTH / 2 - TRUNCATION_FIRST_PIECE_LONGER_BY))
+          truncatedTitleFirstPiece: originalTitle.slice(0, maxLength / 2 + TRUNCATION_FIRST_PIECE_LONGER_BY),
+          truncatedTitleSecondPiece: originalTitle.slice(originalTitle.length - (maxLength / 2 - TRUNCATION_FIRST_PIECE_LONGER_BY))
         });
       } else {
         // The text is not so long, so we'll just break it into two pieces
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Complete.Example.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Complete.Example.tsx
index e5f7e3e7d27db..74abe8978ee81 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Complete.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Complete.Example.tsx
@@ -87,14 +87,6 @@ export class DocumentCardCompleteExample extends React.Component<any, any> {
       ]
     };
 
-    const previewTextProps: IDocumentCardPreviewProps = {
-      previewImages: [
-        {
-          previewTextProps: 'This is the email content preview, please feel free to give feedback. SharePoint Site Acitivity add conversation card!'
-        }
-      ]
-    };
-
     const logoProps: IDocumentCardLogoProps = {
       logoIcon: 'OutlookLogo'
     };
@@ -152,11 +144,28 @@ export class DocumentCardCompleteExample extends React.Component<any, any> {
             views={ 432 }
           />
         </DocumentCard>
+        <p />Card Logo, Text Preview CardStatus are used on below examples.<p />
+        <DocumentCard onClickHref='http://bing.com'>
+          <DocumentCardLogo { ...logoProps } />
+          <DocumentCardTitle title='Conversation about anual report a very long long name, Title should be truncated on the long name.' shouldTruncate={ true } />
+          <DocumentCardTitle title='This is the email content preview, please feel free to give feedback. SharePoint Site Acitivity add conversation card! This is the last sentences.  Do you still go on more than 4 lines.' shouldTruncate={ true } showAsSecondaryTitle={ true } />
+          <DocumentCardStatus statusIcon='attach' status=' 3 Attachments' />
+          <DocumentCardActivity
+            activity='Sent March 13, 2018'
+            people={
+              [
+                { name: 'Annie Lindqvist', profileImageSrc: TestImages.personaFemale },
+                { name: 'Roko Kolar', profileImageSrc: '', initials: 'JH' },
+                { name: 'Greta Lundberg', profileImageSrc: TestImages.personaFemale }
+              ]
+            }
+          />
+        </DocumentCard>
         <p />
         <DocumentCard onClickHref='http://bing.com'>
           <DocumentCardLogo { ...logoProps } />
-          <DocumentCardTitle title='Conversation about anual report a very long long name' />
-          <DocumentCardPreview { ...previewTextProps } />
+          <DocumentCardTitle title='Conversation about anual Report' />
+          <DocumentCardTitle title='This is the email content preview, help.' showAsSecondaryTitle={ true } />
           <DocumentCardStatus statusIcon='attach' status=' 3 Attachments' />
           <DocumentCardActivity
             activity='Sent March 13, 2018'
@@ -170,6 +179,22 @@ export class DocumentCardCompleteExample extends React.Component<any, any> {
           />
         </DocumentCard>
         <p />
+        <DocumentCard onClickHref='http://bing.com'>
+          <DocumentCardLogo { ...logoProps } />
+          <DocumentCardTitle title='Conversation about anual report' shouldTruncate={ true } />
+          <DocumentCardTitle title='This is the email content preview, please feel free to give!' shouldTruncate={ true } showAsSecondaryTitle={ true } />
+          <DocumentCardActivity
+            activity='Sent March 13, 2018'
+            people={
+              [
+                { name: 'Annie Lindqvist', profileImageSrc: TestImages.personaFemale },
+                { name: 'Roko Kolar', profileImageSrc: '', initials: 'JH' },
+                { name: 'Greta Lundberg', profileImageSrc: TestImages.personaFemale }
+              ]
+            }
+          />
+        </DocumentCard>
+        <p />
         <DocumentCard onClickHref='http://bing.com'>
           <DocumentCardPreview { ...previewPropsUsingIcon } />
           <div className='ms-DocumentCard-details'>

From 8378fbaa7311306f44b3e09667907c907c872837 Mon Sep 17 00:00:00 2001
From: inateeg <inateeg@microsoft.com>
Date: Tue, 20 Mar 2018 20:41:57 -0700
Subject: [PATCH 06/12] update

---
 .../components/DocumentCard/DocumentCard.scss |  8 -------
 .../DocumentCard/DocumentCard.types.ts        |  6 -----
 .../DocumentCard/DocumentCardPreview.tsx      | 10 ---------
 .../DocumentCard/DocumentCardTitle.tsx        |  2 +-
 .../DocumentCard.Complete.Example.tsx         | 22 ++++++++++++-------
 .../examples/DocumentCard.Example.scss        |  4 ++++
 6 files changed, 19 insertions(+), 33 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss
index ef756ab3323df..644dd2fb6d7ea 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss
@@ -305,14 +305,6 @@ $DocumentCard-title-lineHeight: 21px;
   @include ms-padding(16px, 16px, 0, 16px);
 }
 
-
-.previewTextContainer {
-  @include ms-padding(8px, 16px, 8px, 16px);
-  display: block;
-  @include ms-font-m;
-  color: $ms-color-neutralSecondary;
-}
-
 .status {
   @include ms-margin(0, 16px, 8px, 16px);
   @include ms-font-m;
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.types.ts b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.types.ts
index cf881b6e585f1..3aaa585623568 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.types.ts
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.types.ts
@@ -147,12 +147,6 @@ export interface IDocumentCardPreviewImage {
    */
   previewIconProps?: IIconProps;
 
-  /**
-  * The props for the preview text.
-  * If provided, text will be rendered instead of image.
-  */
-  previewTextProps?: string;
-
   /**
    * The props for the preview icon container classname.
    * If provided, icon container classname will be used..
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx
index a836c31d3a261..704d3fed94dd9 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx
@@ -43,16 +43,6 @@ export class DocumentCardPreview extends BaseComponent<IDocumentCardPreviewProps
     );
   }
 
-  private _renderPreviewText(previewText?: string): React.ReactElement<React.HTMLAttributes<HTMLDivElement>> {
-    return (
-      <div>
-        { previewText &&
-          <div className={ css('ms-DocumentCardPreview', styles.previewTextContainer) }> { previewText } </div>
-        }
-      </div>
-    );
-  }
-
   private _renderPreviewImage(previewImage: IDocumentCardPreviewImage): React.ReactElement<React.HTMLAttributes<HTMLDivElement>> {
     const { width, height, imageFit, previewIconProps, previewIconContainerClass } = previewImage;
     const iconContainerClass = previewIconContainerClass ? previewIconContainerClass : 'ms-DocumentCardPreview-iconContainer';
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx
index c7e94cf01a88a..05891cd4f58a5 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx
@@ -9,7 +9,7 @@ import {
 } from '../../Utilities';
 import { IDocumentCardTitleProps } from './DocumentCard.types';
 import * as stylesImport from './DocumentCard.scss';
-import { Icon } from '../../Icon';
+
 const styles: any = stylesImport;
 
 export interface IDocumentCardTitleState {
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Complete.Example.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Complete.Example.tsx
index 74abe8978ee81..a786171724163 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Complete.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Complete.Example.tsx
@@ -147,9 +147,11 @@ export class DocumentCardCompleteExample extends React.Component<any, any> {
         <p />Card Logo, Text Preview CardStatus are used on below examples.<p />
         <DocumentCard onClickHref='http://bing.com'>
           <DocumentCardLogo { ...logoProps } />
-          <DocumentCardTitle title='Conversation about anual report a very long long name, Title should be truncated on the long name.' shouldTruncate={ true } />
-          <DocumentCardTitle title='This is the email content preview, please feel free to give feedback. SharePoint Site Acitivity add conversation card! This is the last sentences.  Do you still go on more than 4 lines.' shouldTruncate={ true } showAsSecondaryTitle={ true } />
-          <DocumentCardStatus statusIcon='attach' status=' 3 Attachments' />
+          <div className='ms-ConversationTile-TitlePreviewArea' >
+            <DocumentCardTitle title='Conversation about anual report a very long long name, Title should be truncated on the long name.' shouldTruncate={ true } />
+            <DocumentCardTitle title='This is the email content preview, please feel free to give feedback. SharePoint Site Acitivity add conversation card! This is the last sentences.  Do you still go on more than 4 lines.' shouldTruncate={ true } showAsSecondaryTitle={ true } />
+            <DocumentCardStatus statusIcon='attach' status=' 3 Attachments' />
+          </div>
           <DocumentCardActivity
             activity='Sent March 13, 2018'
             people={
@@ -164,9 +166,11 @@ export class DocumentCardCompleteExample extends React.Component<any, any> {
         <p />
         <DocumentCard onClickHref='http://bing.com'>
           <DocumentCardLogo { ...logoProps } />
-          <DocumentCardTitle title='Conversation about anual Report' />
-          <DocumentCardTitle title='This is the email content preview, help.' showAsSecondaryTitle={ true } />
-          <DocumentCardStatus statusIcon='attach' status=' 3 Attachments' />
+          <div className='ms-ConversationTile-TitlePreviewArea' >
+            <DocumentCardTitle title='Conversation about anual Report' />
+            <DocumentCardTitle title='This is the email content preview, help.' showAsSecondaryTitle={ true } />
+            <DocumentCardStatus statusIcon='attach' status=' 3 Attachments' />
+          </div>
           <DocumentCardActivity
             activity='Sent March 13, 2018'
             people={
@@ -181,8 +185,10 @@ export class DocumentCardCompleteExample extends React.Component<any, any> {
         <p />
         <DocumentCard onClickHref='http://bing.com'>
           <DocumentCardLogo { ...logoProps } />
-          <DocumentCardTitle title='Conversation about anual report' shouldTruncate={ true } />
-          <DocumentCardTitle title='This is the email content preview, please feel free to give!' shouldTruncate={ true } showAsSecondaryTitle={ true } />
+          <div className='ms-ConversationTile-TitlePreviewArea' >
+            <DocumentCardTitle title='Conversation about anual report' shouldTruncate={ true } />
+            <DocumentCardTitle title='This is the email content preview, please feel free to give!' shouldTruncate={ true } showAsSecondaryTitle={ true } />
+          </div>
           <DocumentCardActivity
             activity='Sent March 13, 2018'
             people={
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Example.scss b/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Example.scss
index 18cf9c99a5224..8e7118a890d0a 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Example.scss
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Example.scss
@@ -8,4 +8,8 @@
   .ms-DocumentCardPreview-iconContainer2 {
     background-color: $ms-color-neutralLighterAlt;
   }
+
+  .ms-ConversationTile-TitlePreviewArea {
+    height: 182px;
+  }
 }

From 3436091b1607bdabffb43b47bad0dafca162908e Mon Sep 17 00:00:00 2001
From: inateeg <inateeg@microsoft.com>
Date: Tue, 20 Mar 2018 21:35:29 -0700
Subject: [PATCH 07/12] update

---
 .../src/components/DocumentCard/DocumentCard.scss             | 4 ++--
 .../DocumentCard/examples/DocumentCard.Complete.Example.tsx   | 2 +-
 .../src/components/FocusZone/FocusZone.tsx                    | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss
index 644dd2fb6d7ea..95bbc0ffaa5e8 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss
@@ -295,7 +295,7 @@ $DocumentCard-title-lineHeight: 21px;
   line-height: 18px;
   overflow: hidden;
   word-wrap: break-word;
-  height: 59px;
+  height: 54px;
 }
 
 .logo {
@@ -306,7 +306,7 @@ $DocumentCard-title-lineHeight: 21px;
 }
 
 .status {
-  @include ms-margin(0, 16px, 8px, 16px);
+  @include ms-margin(8px, 16px, 8px, 16px);
   @include ms-font-m;
   color: $ms-color-neutralPrimary;
   background-color: $ms-color-neutralLighter;
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Complete.Example.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Complete.Example.tsx
index a786171724163..494caa0a604a9 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Complete.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Complete.Example.tsx
@@ -149,7 +149,7 @@ export class DocumentCardCompleteExample extends React.Component<any, any> {
           <DocumentCardLogo { ...logoProps } />
           <div className='ms-ConversationTile-TitlePreviewArea' >
             <DocumentCardTitle title='Conversation about anual report a very long long name, Title should be truncated on the long name.' shouldTruncate={ true } />
-            <DocumentCardTitle title='This is the email content preview, please feel free to give feedback. SharePoint Site Acitivity add conversation card! This is the last sentences.  Do you still go on more than 4 lines.' shouldTruncate={ true } showAsSecondaryTitle={ true } />
+            <DocumentCardTitle title='This is the email content preview, please feel free to give feedback. SharePoint Site Acitivity add conversation card! This is the last.' shouldTruncate={ true } showAsSecondaryTitle={ true } />
             <DocumentCardStatus statusIcon='attach' status=' 3 Attachments' />
           </div>
           <DocumentCardActivity
diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx
index 87258f4196e0d..f791bc28cf73b 100644
--- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx
+++ b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx
@@ -54,7 +54,7 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
     direction: FocusZoneDirection.bidirectional
   };
 
-  private _root = createRef<HTMLElement>();
+  private _root = createRef<HTMLDivElement>();
   private _id: string;
   /** The most recently focused child element. */
   private _activeElement: HTMLElement | null;

From cc16494c2bde5ea59d4303dbc200437fea4a3e23 Mon Sep 17 00:00:00 2001
From: inateeg <inateeg@microsoft.com>
Date: Wed, 21 Mar 2018 12:23:36 -0700
Subject: [PATCH 08/12] remove focusZone fix that is not relevant to this
 change

---
 .../src/components/DocumentCard/DocumentCard.scss               | 2 +-
 .../src/components/FocusZone/FocusZone.tsx                      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss
index 95bbc0ffaa5e8..67bc5368b99ca 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss
@@ -295,7 +295,7 @@ $DocumentCard-title-lineHeight: 21px;
   line-height: 18px;
   overflow: hidden;
   word-wrap: break-word;
-  height: 54px;
+  height: 45px;
 }
 
 .logo {
diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx
index f791bc28cf73b..87258f4196e0d 100644
--- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx
+++ b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx
@@ -54,7 +54,7 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
     direction: FocusZoneDirection.bidirectional
   };
 
-  private _root = createRef<HTMLDivElement>();
+  private _root = createRef<HTMLElement>();
   private _id: string;
   /** The most recently focused child element. */
   private _activeElement: HTMLElement | null;

From b42aac00a545401037fb49e64054b6d8fa115792 Mon Sep 17 00:00:00 2001
From: inateeg <inateeg@microsoft.com>
Date: Wed, 21 Mar 2018 12:49:14 -0700
Subject: [PATCH 09/12] removed unintentional changed files

---
 common/npm-local/package.json |  9 ---------
 common/npmx-link.json         |  7 -------
 common/rush-link.json         | 14 --------------
 3 files changed, 30 deletions(-)
 delete mode 100644 common/npm-local/package.json
 delete mode 100644 common/npmx-link.json
 delete mode 100644 common/rush-link.json

diff --git a/common/npm-local/package.json b/common/npm-local/package.json
deleted file mode 100644
index e8fae9137af67..0000000000000
--- a/common/npm-local/package.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "dependencies": {
-    "npm": "3.10.9"
-  },
-  "description": "Temporary file generated by the Rush tool",
-  "name": "npm-local-install",
-  "private": true,
-  "version": "0.0.0"
-}
diff --git a/common/npmx-link.json b/common/npmx-link.json
deleted file mode 100644
index ff31b3d6d42a5..0000000000000
--- a/common/npmx-link.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "localLinks": {
-    "todo-app": [
-      "office-ui-fabric-react"
-    ]
-  }
-}
diff --git a/common/rush-link.json b/common/rush-link.json
deleted file mode 100644
index 3953f4e35568b..0000000000000
--- a/common/rush-link.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "localLinks": {
-    "fabric-website": [
-      "@uifabric/utilities",
-      "office-ui-fabric-react"
-    ],
-    "office-ui-fabric-react": [
-      "@uifabric/utilities"
-    ],
-    "todo-app": [
-      "office-ui-fabric-react"
-    ]
-  }
-}

From 23969cb43c9660f17ec36759ce50c3b8f67b7c10 Mon Sep 17 00:00:00 2001
From: inateeg <inateeg@microsoft.com>
Date: Wed, 21 Mar 2018 13:43:14 -0700
Subject: [PATCH 10/12] update

---
 ...3-16-06-06.json => inateeg-0302card_2018-03-21-20-41.json} | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)
 rename common/changes/office-ui-fabric-react/{inateeg-0302card_2018-03-16-06-06.json => inateeg-0302card_2018-03-21-20-41.json} (59%)

diff --git a/common/changes/office-ui-fabric-react/inateeg-0302card_2018-03-16-06-06.json b/common/changes/office-ui-fabric-react/inateeg-0302card_2018-03-21-20-41.json
similarity index 59%
rename from common/changes/office-ui-fabric-react/inateeg-0302card_2018-03-16-06-06.json
rename to common/changes/office-ui-fabric-react/inateeg-0302card_2018-03-21-20-41.json
index 05b966dc9c343..e387df4a664e0 100644
--- a/common/changes/office-ui-fabric-react/inateeg-0302card_2018-03-16-06-06.json
+++ b/common/changes/office-ui-fabric-react/inateeg-0302card_2018-03-21-20-41.json
@@ -1,9 +1,9 @@
 {
   "changes": [
     {
+      "comment": "",
       "packageName": "office-ui-fabric-react",
-      "comment": "Add DocumentCardLogo and DoucmentCardStatus for Conversation card",
-      "type": "patch"
+      "type": "none"
     }
   ],
   "packageName": "office-ui-fabric-react",

From 84f60c835573dc8b08633d53520774eb7a737683 Mon Sep 17 00:00:00 2001
From: inateeg <inateeg@microsoft.com>
Date: Wed, 21 Mar 2018 13:56:45 -0700
Subject: [PATCH 11/12] change file

---
 .../inateeg-0302card_2018-03-21-20-56.json            | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 common/changes/office-ui-fabric-react/inateeg-0302card_2018-03-21-20-56.json

diff --git a/common/changes/office-ui-fabric-react/inateeg-0302card_2018-03-21-20-56.json b/common/changes/office-ui-fabric-react/inateeg-0302card_2018-03-21-20-56.json
new file mode 100644
index 0000000000000..c5587144f9f9f
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/inateeg-0302card_2018-03-21-20-56.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": ",",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "inateeg@microsoft.com"
+}
\ No newline at end of file

From 601168580e745708804f8ca1f3c1e34ccbaeaedd Mon Sep 17 00:00:00 2001
From: inateeg <inateeg@microsoft.com>
Date: Wed, 21 Mar 2018 14:44:37 -0700
Subject: [PATCH 12/12] update

---
 .../inateeg-0302card_2018-03-21-20-41.json            | 11 -----------
 1 file changed, 11 deletions(-)
 delete mode 100644 common/changes/office-ui-fabric-react/inateeg-0302card_2018-03-21-20-41.json

diff --git a/common/changes/office-ui-fabric-react/inateeg-0302card_2018-03-21-20-41.json b/common/changes/office-ui-fabric-react/inateeg-0302card_2018-03-21-20-41.json
deleted file mode 100644
index e387df4a664e0..0000000000000
--- a/common/changes/office-ui-fabric-react/inateeg-0302card_2018-03-21-20-41.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "comment": "",
-      "packageName": "office-ui-fabric-react",
-      "type": "none"
-    }
-  ],
-  "packageName": "office-ui-fabric-react",
-  "email": "inateeg@microsoft.com"
-}
\ No newline at end of file