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.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 { 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 } = this.props;
+    const { chicletCardProps } = this.state;
+
+    this._classNames = getClassNames(getStyles, { theme: theme! });
+
+    return (
+      <Chiclet chicletCardProps={ chicletCardProps } size={ size ? size : ChicletSize.medium } footer={ footer } />
+    );
+  }
+
+  public componentWillReceiveProps(nextProps: any) {
+    if (this.props.url != nextProps.url) {
+      this.setState({ chicletCardProps: extractMetaTags(this.props.url) });
+    }
+  }
+}

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

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

@@ -0,0 +1,13 @@
+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
+);

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

@@ -0,0 +1,59 @@
+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;
+
+  /** @todo: description */
+  getStyles?: IStyleFunction<IBaseChicletStyleProps, IBaseChicletStyles>;
+
+  /**
+   * Optional class for chiclet.
+   */
+  className?: string;
+
+  /**
+   * Sharing link
+   */
+  url: string;
+
+  /**
+   * Chiclet size to render
+   */
+  size?: ChicletSize;
+
+  /**
+   * 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 {
+  root?: IStyle;
+}

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

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { IChicletProps, ChicletSize } from './Chiclet.types';
+import { IChicletCardProps } from './ChicletCard.types';
+import { ChicletCard } from './ChicletCard';
+
+export class ChicletBase extends React.Component<IChicletProps, IChicletCardProps> {
+  public render() {
+    const { chicletCardProps, size, footer } = this.props;
+
+    switch (size) {
+      case ChicletSize.medium:
+        return (
+          <ChicletCard { ...chicletCardProps } onClick={ this._onClick } footer={ footer } />
+        );
+      // @todo: handle other types of chiclets
+      default:
+        return (
+          <ChicletCard { ...chicletCardProps } onClick={ this._onClick } footer={ footer } />
+        );
+    }
+  }
+
+  private _onClick(): void { // @todo: default click handler
+    console.log("You clicked the Chiclet");
+  }
+}

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

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

@@ -0,0 +1,13 @@
+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
+);

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

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { Chiclet } from './Chiclet';
+import {
+  IChicletCardProps,
+  IChicletCardStyleProps,
+  IChicletCardStyles
+} from './ChicletCard.types';
+import {
+  IStyle,
+  ITheme
+} from '../../Styling';
+import { IStyleFunction } from '../../Utilities';
+
+export interface IChiclet {
+
+}
+
+export interface IChicletProps extends React.Props<Chiclet> {
+  /**
+   * Props to render in the chosen ChicletCard
+   */
+  chicletCardProps?: IChicletCardProps | undefined;
+
+  /** @todo: description */
+  getStyles?: IStyleFunction<IChicletCardStyleProps, IChicletCardStyles>;
+
+  /**
+   * Chiclet size to render
+   */
+  size?: ChicletSize;
+
+  /**
+   * Footer to render for the component.
+   */
+  footer?: React.ReactElement<any>;
+}
+
+export enum ChicletSize {
+  /**
+   * X-Small Chiclet
+   */
+  xsmall = 0,
+
+  /**
+   * Small Chiclet
+   */
+  small = 1,
+
+  /**
+   * Medium Chiclet
+   */
+  medium = 2,
+
+  /**
+   * Large Chiclet
+   */
+  large = 3
+}
+
+export interface IChicletStyleProps {
+  /**
+   * Theme for the component.
+   */
+  theme?: ITheme;
+}
+
+export interface IChicletStyles {
+  root?: IStyle;
+}

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

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import {
+  BaseComponent,
+  css,
+  customizable,
+  classNamesFunction
+} 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>();
+
+@customizable('ChicletCardBase', ['theme'])
+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 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>
+          { footer }
+        </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 _onClick = (ev: React.MouseEvent<HTMLElement>): void => {
+    const { onClick } = this.props;
+    if (onClick) {
+      onClick(ev);
+    }
+  }
+
+}