Experimental Chiclet Component

package.json

@@ -30,4 +30,4 @@
   "devDependencies": {
     "@microsoft/rush": "4.3.0"
   }
-}
+}

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,32 @@
+import * as React from 'react';
+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) });
+    }
+  }
+}

packages/experiments/src/components/Chiclet/BaseChiclet.types.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { BaseChiclet } from './BaseChiclet';
+import { ChicletSize } from './Chiclet.types';
+
+export interface IBaseChiclet {
+
+}
+
+export interface IBaseChicletProps extends React.Props<BaseChiclet> {
+  /**
+   * 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;
+
+  /**
+   * Optional class for chiclet.
+   */
+  className?: string;
+
+  /**
+   * Sharing link
+   */
+  url: string;
+
+  /**
+   * Chiclet size to render
+   */
+  size?: ChicletSize;
+
+  /**
+   * Action icon buttons to render.
+   */
+  actions?: string[];
+}

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

@@ -0,0 +1,132 @@
+import { memoizeFunction } from '../../Utilities';
+import {
+  ITheme,
+  concatStyleSets,
+  getTheme
+} from '../../Styling';
+import { 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
+): 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'
+        }
+      }
+    },
+    icon: [
+      'ms-DocumentCardPreview-icon',
+      {
+        padding: '10px 166px 8px 8px',
+        //bottom: '10px',
+        position: 'absolute',
+        color: '#166EBE'
+      }
+    ],
+    preview: [
+      'ms-ChicletCardPreview',
+      {
+        float: 'left',
+        height: '122px',
+        width: '198px',
+        position: 'relative',
+        //opacity: '0.02',
+        overflow: 'hidden', // need to fix
+        backgroundColor: theme.palette.white,
+        display: 'block',
+        padding: '2px 0px 2px 2px',
+      }
+    ],
+    info: [
+      'ms-ChicletCardInfo',
+      {
+        position: 'relative',
+        display: 'block',
+        height: '100%',
+        //lineHeight: '21px',
+        overflow: 'hidden',
+        wordWrap: 'break-word',
+        weight: '400px'
+      }
+    ],
+    title: [
+      'ms-ChicletCardTitle',
+      {
+        padding: '9px 26px 5px 11px',
+        //font: theme.fonts.large,
+        fontSize: '16px',
+        fontWeight: 'normal',
+        fontStyle: 'normal',
+        fontStretch: 'normal',
+        color: theme.palette.neutralPrimary,
+        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'
+      }
+    ],
+    link: [
+      'ms-ChicletCardLink',
+      {
+        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'
+      }
+    ],
+    actions: [
+      'ms-ChicletFooter',
+      {
+        paddingRight: '6px',
+        height: '24px',
+        position: 'relative'
+      }
+    ],
+    action: [
+      'ms-ChicletFooter-action',
+      {
+        float: 'right',
+        cursor: 'pointer',
+        width: '32px',
+        height: '32px',
+        backgroundColor: theme.palette.white,
+        color: '#0078D7'
+      }
+    ]
+  };
+
+  return concatStyleSets(styles, customStyles)!;
+
+});

packages/experiments/src/components/Chiclet/Chiclet.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 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");
+  }
+}

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

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { Chiclet } from './Chiclet';
+import { IChicletCardProps } from './ChicletCard.types';
+
+export interface IChiclet {
+
+}
+
+export interface IChicletProps extends React.Props<Chiclet> {
+  /**
+   * Props to render in the chosen ChicletCard
+   */
+  chicletCardProps?: IChicletCardProps | undefined;
+
+  /**
+   * Chiclet size to render
+   */
+  size?: ChicletSize;
+
+  /**
+   * Action icon buttons to render.
+   */
+  actions?: string[];
+}
+
+export enum ChicletSize {
+  /**
+   * X-Small Chiclet
+   */
+  xsmall = 0,
+
+  /**
+   * Small Chiclet
+   */
+  small = 1,
+
+  /**
+   * Medium Chiclet
+   */
+  medium = 2,
+
+  /**
+   * Large Chiclet
+   */
+  large = 3
+}