Experimental Chiclet Component

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',

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>
+    );
+  }
+}

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"
   }
 }

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>
 

packages/experiments/src/Chiclet.ts

@@ -0,0 +1 @@
+export * from './components/Chiclet/index';

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',
+};

packages/experiments/src/components/Chiclet/BaseChiclet.tsx

@@ -0,0 +1,73 @@
+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';
+
+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: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:description":
+            attributes.description = metaElements[i].content;
+            break;
+          case "og:url":
+            attributes.url = metaElements[i].content;
+            break;
+        }
+      }
+    }
+    return attributes;
+  }
+}

packages/experiments/src/components/Chiclet/Chiclet.styles.ts

@@ -0,0 +1,118 @@
+import { memoizeFunction } from '../../Utilities';
+import {
+  mergeStyleSets,
+  IStyle,
+  ITheme,
+  concatStyleSets,
+  getTheme
+} from '../../Styling';
+import { IChicletStyles } from './Chiclet.types';
+
+const ChicletCardTitleLineHeight = '21px';
+
+/* Actions */
+const msChicletCardActionsActionSize = '34px';
+const msChicletCardActionsHorizontalPadding = '12px';
+const msChicletCardActionsVerticalPadding = '2px';
+
+export const getClassNames = memoizeFunction((
+  theme: ITheme = getTheme(),
+  customStyles?: IChicletStyles
+): IChicletStyles => {
+  const styles: IChicletStyles = {
+    root: {
+      WebkitFontSmoothing: 'antialiased',
+      backgroundColor: 'white',
+      border: `1px solid ${theme.palette.neutralLight}`,
+      boxSizing: 'border-box',
+      maxWidth: '320px',
+      minWidth: '540px',
+      height: '109px',
+      userSelect: 'none',
+      position: 'relative',
+      selectors: {
+        ':hover': {
+          cursor: 'pointer',
+          border: `1px solid ${theme.palette.neutralTertiaryAlt}`
+        }
+      }
+    },
+    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)!;
+
+});

packages/experiments/src/components/Chiclet/Chiclet.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import {
+  css
+} from '../../Utilities';
+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';
+
+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);
+
+    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={ mergeStyles(this._classNames.root) } onClick={ this._onClick } actions={ actionsToIButtonProps } />
+        );
+      case "small":
+        return (
+          <ChicletCard {...chicletCardProps} className={ mergeStyles(this._classNames.root) } onClick={ this._onClick } actions={ actionsToIButtonProps } />
+        );
+      case "medium":
+      case "large":
+      case "xlarge":
+        return (
+          <ChicletCard {...chicletCardProps} className={ mergeStyles(this._classNames.root) } onClick={ this._onClick } actions={ actionsToIButtonProps } />
+        );
+      default:
+        return (
+          <ChicletCard {...chicletCardProps} className={ mergeStyles(this._classNames.root) } onClick={ this._onClick } actions={ actionsToIButtonProps } />
+        );
+    }
+  }
+
+  private _onClick(): void {
+    console.log("You clicked the Chiclet");
+  }
+}