Experimental Chiclet Component

common/changes/@uifabric/experiments/chiclet_2018-05-16-00-12.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/experiments",
+      "comment": "Implementation of the Chiclet component",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/experiments",
+  "email": "naethell@microsoft.com"
+}

common/changes/office-ui-fabric-react/chiclet_2018-05-18-19-25.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Implementation of experimental chiclet component",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "naethell@microsoft.com"
+}

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="docx">
+  <meta property="og:description" content="This is a test Word document for our Chiclet">
+  <meta property="og:url" content="https://1drv.ms/w/s!AuT_wMavg6p-gSs6utwJnX-Thtbpvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv">
+  <meta property="og:image" content="https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/svg/docx_48x1.svg">
 
   <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/Chiclet.base.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import {
+  BaseComponent,
+  customizable
+} from '../../Utilities';
+import { ChicletCard } from './ChicletCard';
+import { getOpenGraphProperties } from './OpenGraph';
+import { IChicletProps, ChicletSize } from './Chiclet.types';
+import { IChicletCardProps } from './ChicletCard.types';
+
+export interface IChicletState {
+  chicletCardProps?: IChicletCardProps;
+}
+
+@customizable('ChicletBase', ['theme'])
+export class ChicletBase extends BaseComponent<IChicletProps, IChicletState> {
+
+  constructor(props: IChicletProps) {
+    super(props);
+
+    const chicletCardProps = getOpenGraphProperties(this.props.url);
+    this.state = { chicletCardProps: chicletCardProps };
+  }
+
+  public render(): JSX.Element {
+    const { size, footer, description } = this.props;
+    const { chicletCardProps } = this.state;
+
+    switch (size) {
+      case ChicletSize.medium:
+        return (
+          <ChicletCard { ...chicletCardProps } onClick={ this._onClick } footer={ footer } description={ description } />
+        );
+      // @todo: handle other types of chiclets
+      default:
+        return (
+          <ChicletCard { ...chicletCardProps } onClick={ this._onClick } footer={ footer } description={ description } />
+        );
+    }
+  }
+
+  public componentWillReceiveProps(nextProps: IChicletProps): void {
+    if (this.props.url !== nextProps.url) {
+      this.setState({ chicletCardProps: getOpenGraphProperties(this.props.url) });
+    }
+  }
+
+  private _onClick(): void { // @todo: default click handler
+  }
+
+}

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

@@ -0,0 +1,9 @@
+import { IChicletStyleProps, IChicletStyles } from './Chiclet.types';
+
+export const getStyles = (
+  props: IChicletStyleProps
+): IChicletStyles => {
+  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,90 @@
+import * as React from 'react';
+import { ChicletBase } from './Chiclet.base';
+import { IStyleFunction } from '../../Utilities';
+import {
+  IStyle,
+  ITheme
+} from '../../Styling';
+
+export interface IChiclet {
+
+}
+
+export interface IChicletProps extends React.Props<ChicletBase> {
+  /**
+   * Optional callback to access the IChiclet interface. Use this instead of ref for accessing
+   * the public methods and properties of the component.
+   */
+  componentRef?: (component: IChiclet | null) => void;
+
+  /**
+   * Call to provide customized styling that will layer on top of the variant rules.
+   */
+  getStyles?: IStyleFunction<IChicletStyleProps, IChicletStyles>;
+
+  /**
+   * Optional class for chiclet.
+   */
+  className?: string;
+
+  /**
+   * Sharing link
+   */
+  url: string;
+
+  /**
+   * Chiclet size to render
+   */
+  size?: ChicletSize;
+
+  /**
+   * Description to render for the component.
+   */
+  description?: React.ReactElement<JSX.Element>;
+
+  /**
+   * Footer to render for the component.
+   */
+  footer?: React.ReactElement<JSX.Element>;
+
+  /**
+   * Theme for the component.
+   */
+  theme?: ITheme;
+}
+
+export interface IChicletStyleProps {
+  /**
+   * Theme for the component.
+   */
+  theme?: ITheme;
+}
+
+export interface IChicletStyles {
+  /**
+   * Style for the root element when fixed.
+   */
+  root?: IStyle;
+}
+
+export enum ChicletSize {
+  /**
+   * X-Small Chiclet
+   */
+  xSmall = 0,
+
+  /**
+   * Small Chiclet
+   */
+  small = 1,
+
+  /**
+   * Medium Chiclet
+   */
+  medium = 2,
+
+  /**
+   * Large Chiclet
+   */
+  large = 3
+}

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

@@ -0,0 +1,162 @@
+import * as React from 'react';
+import {
+  BaseComponent,
+  css,
+  customizable,
+  classNamesFunction
+} from '../../Utilities';
+import { IChicletCardStyles, IChicletCardStyleProps, IChicletCardProps } from './ChicletCard.types';
+import { mergeStyles } from '../../Styling';
+import { Image } from 'office-ui-fabric-react/lib/Image';
+
+const getClassNames = classNamesFunction<IChicletCardStyleProps, IChicletCardStyles>();
+
+const ASSET_CDN_BASE_URL = 'https://static2.sharepointonline.com/files/fabric/assets';
+
+const PREVIEW_IMAGE_WIDTH = '198px';
+const PREVIEW_IMAGE_HEIGHT = '122px';
+
+@customizable('ChicletCardBase', ['theme'])
+export class ChicletCardBase extends BaseComponent<IChicletCardProps, {}> {
+  public static defaultProps: IChicletCardProps = {
+    imageWidth: PREVIEW_IMAGE_WIDTH,
+    imageHeight: PREVIEW_IMAGE_HEIGHT
+  };
+
+  private _classNames: { [key in keyof IChicletCardStyles]: string };
+
+  public render(): JSX.Element {
+    const {
+      title,
+      itemType,
+      description,
+      image,
+      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;
+
+    const preview = this._renderPreviewImage(image, imageHeight, imageWidth, itemType, imageAlt);
+
+    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) }
+        >
+          { preview }
+        </div>
+        <div
+          className={ mergeStyles(this._classNames.info) }
+        >
+          <div
+            className={ mergeStyles(this._classNames.title) }
+          >
+            { title ? title : (null) }
+          </div>
+          <div
+            className={ mergeStyles(this._classNames.description) }
+          >
+            { description ? description : url }
+          </div>
+          { footer }
+        </div>
+      </div>
+    );
+  }
+
+  private _renderPreviewImage(imageUrl?: string, imageHeight?: string, imageWidth?: string, itemType?: string, imageAlt?: string)
+    : React.ReactElement<React.HTMLAttributes<HTMLDivElement>> {
+    let image;
+    if (imageUrl) {
+      image = (
+        <Image
+          width={ imageWidth }
+          height={ imageHeight }
+          src={ imageUrl }
+          role='presentation'
+          alt={ imageAlt ? imageAlt : undefined }
+        />
+      );
+    } else {
+      image = (
+        <Image
+          width={ PREVIEW_IMAGE_WIDTH }
+          height={ PREVIEW_IMAGE_HEIGHT }
+          src={ itemType
+            ? `${ASSET_CDN_BASE_URL}/brand-icons/document/svg/` + itemType + `_48x1.svg`
+            : (undefined) /* @todo: this will be replaced by something built by the design team */ }
+          role='presentation'
+          alt={ imageAlt ? imageAlt : undefined }
+        />
+      );
+    }
+
+    let src;
+    if (itemType !== null) {
+      src = `${ASSET_CDN_BASE_URL}/brand-icons/product/svg/` + itemType + `_16x1_5.svg`;
+    }
+    let icon = <img className={ mergeStyles(this._classNames.icon) } src={ src } />;
+    switch (itemType) { // for "hero" apps, we'll use the app icons
+      case 'word':
+      case 'docx':
+        icon = (
+          <img
+            className={ mergeStyles(this._classNames.icon) }
+            src={ `${ASSET_CDN_BASE_URL}/brand-icons/product/svg/word_16x1_5.svg` }
+          />
+        );
+        break;
+      case 'powerpoint':
+      case 'pptx':
+        icon = (
+          <img
+            className={ mergeStyles(this._classNames.icon) }
+            src={ `${ASSET_CDN_BASE_URL}/brand-icons/product/svg/powerpoint_16x1_5.svg` }
+          />
+        );
+        break;
+      case 'excel':
+        icon = (
+          <img
+            className={ mergeStyles(this._classNames.icon) }
+            src={ `${ASSET_CDN_BASE_URL}/brand-icons/product/svg/excel_16x1_5.svg` }
+          />
+        );
+        break;
+    }
+
+    return (
+      <div>
+        { image }
+        { icon }
+      </div>
+    );
+  }
+
+  private _onClick = (ev: React.MouseEvent<HTMLElement>): void => {
+    const { onClick } = this.props;
+    if (onClick) {
+      onClick(ev);
+    }
+  }
+
+}