Demo Page Refactor Part 1

common/changes/office-ui-fabric-react/demo_2018-06-02-05-12.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "",
+      "packageName": "office-ui-fabric-react",
+      "type": "none"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "kchau@microsoft.com"
+}

packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItemPage.tsx

@@ -1,74 +1,43 @@
 import * as React from 'react';
-import {
-  ExampleCard,
-  ComponentPage,
-  IComponentDemoPageProps,
-  PropertiesTableSet,
-  PageMarkdown
-} from '@uifabric/example-app-base';
-import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus';
 import { ActivityItemStatus } from './ActivityItem.checklist';
 import { ActivityItemBasicExample } from './examples/ActivityItem.Basic.Example';
 import { ActivityItemPersonaExample } from './examples/ActivityItem.Persona.Example';
 import { ActivityItemCompactExample } from './examples/ActivityItem.Compact.Example';
+import { IDemoPageProps } from '../../demo/components/DemoPage.types';
+import { DemoPage } from '../../demo/components/DemoPage';
 
 const ActivityItemBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Basic.Example.tsx') as string;
 const ActivityItemPersonaExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Persona.Example.tsx') as string;
 const ActivityItemCompactExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Compact.Example.tsx') as string;
 
-export class ActivityItemPage extends React.Component<IComponentDemoPageProps, {}> {
-  public render(): JSX.Element {
-    return (
-      <ComponentPage
-        title='ActivityItem'
-        componentName='ActivityItem'
-        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/ActivityItem'
-        exampleCards={
-          <div>
-            <ExampleCard title='Activity Items with Icons' code={ ActivityItemBasicExampleCode }>
-              <ActivityItemBasicExample />
-            </ExampleCard>
-            <ExampleCard title='Activity Items with Personas' code={ ActivityItemPersonaExampleCode }>
-              <ActivityItemPersonaExample />
-            </ExampleCard>
-            <ExampleCard title='Compact Activity Items' code={ ActivityItemCompactExampleCode }>
-              <ActivityItemCompactExample />
-            </ExampleCard>
-          </div>
-        }
-        propertiesTables={
-          <PropertiesTableSet
-            sources={ [
-              require<string>('!raw-loader!office-ui-fabric-react/src/components/ActivityItem/ActivityItem.types.ts')
-            ] }
-          />
-        }
-        overview={
-          <PageMarkdown>
-            { require<string>('!raw-loader!office-ui-fabric-react/src/components/ActivityItem/docs/ActivityItemOverview.md') }
-          </PageMarkdown>
-        }
-        bestPractices={
-          <div />
-        }
-        dos={
-          <PageMarkdown>
-            { require<string>('!raw-loader!office-ui-fabric-react/src/components/ActivityItem/docs/ActivityItemDos.md') }
-          </PageMarkdown>
-        }
-        donts={
-          <PageMarkdown>
-            { require<string>('!raw-loader!office-ui-fabric-react/src/components/ActivityItem/docs/ActivityItemDonts.md') }
-          </PageMarkdown>
-        }
-        isHeaderVisible={ this.props.isHeaderVisible }
-        componentStatus={
-          <ComponentStatus
-            { ...ActivityItemStatus }
-          />
-        }
-      />
-    );
-  }
+export const ActivityItemPageProps: IDemoPageProps = {
+  title: 'ActivityItem',
+  componentName: 'ActivityItem',
+  componentUrl: 'https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/ActivityItem',
+  componentStatus: ActivityItemStatus,
+  examples: [
+    {
+      title: 'Activity Items with Icons',
+      code: ActivityItemBasicExampleCode,
+      view: <ActivityItemBasicExample />
+    },
+    {
+      title: 'Activity Items with Personas',
+      code: ActivityItemPersonaExampleCode,
+      view: <ActivityItemPersonaExample />
+    },
+    {
+      title: 'Compact Activity Items',
+      code: ActivityItemCompactExampleCode,
+      view: <ActivityItemCompactExample />
+    }
+  ],
+  propertiesTablesSources: [require<string>('!raw-loader!office-ui-fabric-react/src/components/ActivityItem/ActivityItem.types.ts')],
+  overview: require<string>('!raw-loader!office-ui-fabric-react/src/components/ActivityItem/docs/ActivityItemOverview.md'),
+  bestPractices: '',
+  dos: require<string>('!raw-loader!office-ui-fabric-react/src/components/ActivityItem/docs/ActivityItemDos.md'),
+  donts: require<string>('!raw-loader!office-ui-fabric-react/src/components/ActivityItem/docs/ActivityItemDonts.md'),
+  isHeaderVisible: true,
+};
 
-}
+export const ActivityItemPage = (props: { isHeaderVisible: boolean }) => (<DemoPage { ...{ ...ActivityItemPageProps, ...props } } />);

packages/office-ui-fabric-react/src/demo/components/DemoPage.tsx

@@ -0,0 +1,54 @@
+import { IDemoPageProps } from './DemoPage.types';
+import { ComponentPage, ExampleCard, PropertiesTableSet, PageMarkdown } from '@uifabric/example-app-base';
+import * as React from 'react';
+import { ComponentStatus } from '../ComponentStatus/ComponentStatus';
+
+export const DemoPage: React.StatelessComponent<IDemoPageProps> = (componentPageProps) => {
+  return (
+    <ComponentPage
+      title={ componentPageProps.title }
+      componentName={ componentPageProps.componentName }
+      componentUrl={ componentPageProps.componentUrl }
+      exampleCards={
+        <div>
+          { componentPageProps.examples.map(example => (
+            <ExampleCard title={ example.title } code={ example.code } key={ example.title }>
+              { example.view }
+            </ExampleCard>
+          )) }
+        </div>
+      }
+      propertiesTables={
+        <PropertiesTableSet
+          sources={ componentPageProps.propertiesTablesSources }
+        />
+      }
+      overview={
+        <PageMarkdown>
+          { componentPageProps.overview }
+        </PageMarkdown>
+      }
+      bestPractices={
+        <PageMarkdown>
+          { componentPageProps.bestPractices }
+        </PageMarkdown>
+      }
+      dos={
+        <PageMarkdown>
+          { componentPageProps.dos }
+        </PageMarkdown>
+      }
+      donts={
+        <PageMarkdown>
+          { componentPageProps.donts }
+        </PageMarkdown>
+      }
+      isHeaderVisible={ componentPageProps.isHeaderVisible }
+      componentStatus={
+        <ComponentStatus
+          { ...componentPageProps.componentStatus }
+        />
+      }
+    />
+  );
+};

packages/office-ui-fabric-react/src/demo/components/DemoPage.types.ts

@@ -0,0 +1,45 @@
+import { IComponentStatusProps } from '../ComponentStatus/ComponentStatus.types';
+
+export interface IDemoPageProps {
+  /** Title that goes into the header */
+  title: string;
+
+  /** Name of the component being documented */
+  componentName: string;
+
+  /** URL of the checked in component, should be somewhere on github.com */
+  componentUrl: string;
+
+  /** Status of the component; e.g. keyboard accessible */
+  componentStatus: IComponentStatusProps;
+
+  /** Array of examples, displayed in the order defined */
+  examples: {
+    /** Title of the example */
+    title: string;
+
+    /** Raw source code of the example */
+    code: string;
+
+    /** Working example of the example */
+    view: JSX.Element;
+  }[];
+
+  /** Properties table(s) as markdown string */
+  propertiesTablesSources: string[];
+
+  /** Overview of the component as markdown string */
+  overview: string;
+
+  /** DO's blurb as markdown string */
+  dos: string;
+
+  /** DON'Ts blurb as markdown string */
+  donts: string;
+
+  /** Best practice as markdown string */
+  bestPractices: string;
+
+  /** Passed through header visibility flag from the demo component page component */
+  isHeaderVisible: boolean;
+}