From 7382b77426bdb9f6fa1690c61457cd2e5d2747a9 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Fri, 30 Mar 2018 16:20:17 -0700 Subject: [PATCH 01/32] Add edit buttons and some APIs to ComponentPage. Enable them on ActivityItemPage. --- .../ComponentPage/ComponentPage.scss | 40 ++++++++---- .../ComponentPage/ComponentPage.tsx | 63 +++++++++++++++++-- .../ActivityItem/ActivityItemPage.tsx | 12 ++-- 3 files changed, 93 insertions(+), 22 deletions(-) diff --git a/packages/example-app-base/src/components/ComponentPage/ComponentPage.scss b/packages/example-app-base/src/components/ComponentPage/ComponentPage.scss index 9e4557531f4f9..9a32ac398477a 100644 --- a/packages/example-app-base/src/components/ComponentPage/ComponentPage.scss +++ b/packages/example-app-base/src/components/ComponentPage/ComponentPage.scss @@ -78,6 +78,13 @@ $dontColor: #A61E22; } } + .ComponentPage-overviewSectionHeader, + .ComponentPage-doSectionHeader { + display: flex; + justify-content: space-between; + align-items: baseline; + } + .ComponentPage-related { min-width: 200px; @@ -141,17 +148,7 @@ $dontColor: #A61E22; margin-bottom: 20px; h3 { - margin: 16px 0 40px 0; @include ms-font-xl; - - &::after { - background-color: #a4cf0c; - border-radius: 3px; - content: ''; - display: block; - height: 8px; - margin: 12px 0; - } } ul { @@ -171,12 +168,33 @@ $dontColor: #A61E22; &:first-child { @include ms-margin-right(120px); } + + .ComponentPage-doSectionHeader { + margin: 16px 0 0 0; + + h3 { + margin: 0; + } + } + + .ComponentPage-doSectionHr { + background-color: #a4cf0c; + border-radius: 3px; + display: block; + height: 8px; + margin: 12px 0 40px; + border: 0; + } } - .ComponentPage-doSection--dont h3::after { + .ComponentPage-doSection--dont .ComponentPage-doSectionHr { background-color: #e74856; } + .ComponentPage-editButton { + color: $ms-color-neutralSecondary; + } + @media screen and (min-width: $uhf-screen-min-mobile) { .ComponentPage-doSection { margin-bottom: -10px; // Trim last list item diff --git a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx index 133752d29f0fd..6aac3bdd0e00b 100644 --- a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx +++ b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx @@ -6,7 +6,9 @@ import { import { Link } from 'office-ui-fabric-react/lib/Link'; +import { IconButton } from 'office-ui-fabric-react/lib/Button'; import { MessageBar } from 'office-ui-fabric-react/lib/MessageBar'; +import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip'; import './ComponentPage.scss'; export interface IComponentPageSection { @@ -17,6 +19,8 @@ export interface IComponentPageSection { export interface IComponentPageProps { title: string; componentName: string; + /** Github link to the Component */ + componentUrl?: string; exampleCards?: JSX.Element; implementationExampleCards?: JSX.Element; propertiesTables?: JSX.Element; @@ -24,6 +28,9 @@ export interface IComponentPageProps { dos?: JSX.Element; donts?: JSX.Element; overview: JSX.Element; + editDosUrl?: string; + editDontsUrl?: string; + editOverview?: string; related?: JSX.Element; isHeaderVisible?: boolean; areBadgesVisible?: boolean; @@ -63,7 +70,10 @@ export class ComponentPage extends React.Component {
{ this._getComponentStatusBadges() }
-

Overview

+
+

Overview

+ { this._editButton('Overview', this.props.editOverview) } +
{ overview } @@ -100,7 +110,8 @@ export class ComponentPage extends React.Component { let { bestPractices, dos, - donts + donts, + componentUrl, } = this.props; if (bestPractices && dos && donts) { @@ -126,6 +137,9 @@ export class ComponentPage extends React.Component { { this.props.propertiesTables &&
Implementation
} + { componentUrl &&
+ View On Github +
} { this.props.otherSections && this.props.otherSections.map((componentPageSection: IComponentPageSection, index: number) => { return
{ ); } + private _editButton(section: 'Overview' | 'Dos' | 'Donts', url?: string): JSX.Element | undefined { + let mdUrl: string | undefined = undefined; + if (this.props.componentUrl) { + mdUrl = `${this.props.componentUrl}/docs/${this.props.componentName}${section}.md`; + } + + // Allow generated URL fallback. + const editUrl: string | undefined = url || mdUrl || undefined; + + if (editUrl) { + return ( + + + + ); + } + + return undefined; + } + private _getRelatedComponents(): JSX.Element | undefined { if (this.props.related) { return ( @@ -210,11 +257,19 @@ export class ComponentPage extends React.Component { dosAndDonts.push(
-

Do

+
+

Do

+ { this._editButton('Dos', this.props.editDosUrl) } +
+
{ this.props.dos }
-

Don’t

+
+

Don’t

+ { this._editButton('Donts', this.props.editDontsUrl) } +
+
{ this.props.donts }
diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItemPage.tsx b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItemPage.tsx index 99638c9cefbe2..4d1946f44af8e 100644 --- a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItemPage.tsx +++ b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItemPage.tsx @@ -12,10 +12,6 @@ import { ActivityItemBasicExample } from './examples/ActivityItem.Basic.Example' import { ActivityItemPersonaExample } from './examples/ActivityItem.Persona.Example'; import { ActivityItemCompactExample } from './examples/ActivityItem.Compact.Example'; -const ActivityItemOverview = require('!raw-loader!office-ui-fabric-react/src/components/ActivityItem/docs/ActivityItemOverview.md'); -const ActivityItemDos = require('!raw-loader!office-ui-fabric-react/src/components/ActivityItem/docs/ActivityItemDos.md'); -const ActivityItemDonts = require('!raw-loader!office-ui-fabric-react/src/components/ActivityItem/docs/ActivityItemDonts.md'); - 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; @@ -26,6 +22,7 @@ export class ActivityItemPage extends React.Component @@ -48,7 +45,7 @@ export class ActivityItemPage extends React.Component - { ActivityItemOverview } + { require('!raw-loader!office-ui-fabric-react/src/components/ActivityItem/docs/ActivityItemOverview.md') } } bestPractices={ @@ -56,14 +53,15 @@ export class ActivityItemPage extends React.Component - { ActivityItemDos } + { require('!raw-loader!office-ui-fabric-react/src/components/ActivityItem/docs/ActivityItemDos.md') } } donts={ - { ActivityItemDonts } + { require('!raw-loader!office-ui-fabric-react/src/components/ActivityItem/docs/ActivityItemDonts.md') } } + editDontsUrl='https://google.com' isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ Date: Fri, 30 Mar 2018 17:17:24 -0700 Subject: [PATCH 02/32] Remove duplicate export --- packages/example-app-base/src/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/example-app-base/src/index.ts b/packages/example-app-base/src/index.ts index 5b271b3fd2947..d011ca86b9402 100644 --- a/packages/example-app-base/src/index.ts +++ b/packages/example-app-base/src/index.ts @@ -1,6 +1,5 @@ export * from './components/App/App'; export * from './components/ComponentPage/ComponentPage'; -export * from './components/ComponentPage/ComponentPage'; export * from './components/ComponentPage/IComponentDemoPageProps'; export * from './components/ExampleCard/ExampleCard'; export * from './components/Header/Header'; From e39b91673f8826f6ab5e9b3284feb161c254f2de Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Fri, 30 Mar 2018 17:17:42 -0700 Subject: [PATCH 03/32] Remove test url --- .../src/components/ActivityItem/ActivityItemPage.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItemPage.tsx b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItemPage.tsx index 4d1946f44af8e..ad31ba2318ad1 100644 --- a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItemPage.tsx +++ b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItemPage.tsx @@ -61,7 +61,6 @@ export class ActivityItemPage extends React.Component('!raw-loader!office-ui-fabric-react/src/components/ActivityItem/docs/ActivityItemDonts.md') } } - editDontsUrl='https://google.com' isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ Date: Fri, 30 Mar 2018 17:20:19 -0700 Subject: [PATCH 04/32] More documentation, better type safety, and more a11y. --- .../ComponentPage/ComponentPage.tsx | 61 +++++++++++++++---- 1 file changed, 48 insertions(+), 13 deletions(-) diff --git a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx index 6aac3bdd0e00b..e908b67382cc0 100644 --- a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx +++ b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx @@ -19,8 +19,6 @@ export interface IComponentPageSection { export interface IComponentPageProps { title: string; componentName: string; - /** Github link to the Component */ - componentUrl?: string; exampleCards?: JSX.Element; implementationExampleCards?: JSX.Element; propertiesTables?: JSX.Element; @@ -28,9 +26,6 @@ export interface IComponentPageProps { dos?: JSX.Element; donts?: JSX.Element; overview: JSX.Element; - editDosUrl?: string; - editDontsUrl?: string; - editOverview?: string; related?: JSX.Element; isHeaderVisible?: boolean; areBadgesVisible?: boolean; @@ -39,6 +34,38 @@ export interface IComponentPageProps { otherSections?: IComponentPageSection[]; allowNativeProps?: boolean | string; nativePropsElement?: string | string[] | undefined; + + /** Link to the Component on GitHub. + * Enables 'View On GitHub' and all 'Edit' buttons. + */ + componentUrl?: string; + + /** + * Link to the Donts markdown file on GitHub. + * Enables the 'Edit Donts' button. + * Overrides URL from componentUrl. + */ + editDontsUrl?: string; + + /** + * Link to the Dos markdown file on GitHub. + * Enables the 'Edit Dos' button. + * Overrides URL from componentUrl. + */ + editDosUrl?: string; + + /** + * Link to the Overview markdown file on GitHub. + * Enables the 'Edit Overview' button. + * Overrides URL from componentUrl. + */ + editOverview?: string; +} + +export enum ComponentPageSection { + Dos = 0, + Donts = 1, + Overview = 2, } export class ComponentPage extends React.Component { @@ -72,7 +99,7 @@ export class ComponentPage extends React.Component {

Overview

- { this._editButton('Overview', this.props.editOverview) } + { this._editButton(ComponentPageSection.Overview, this.props.editOverview) }
@@ -111,7 +138,6 @@ export class ComponentPage extends React.Component { bestPractices, dos, donts, - componentUrl, } = this.props; if (bestPractices && dos && donts) { @@ -137,8 +163,8 @@ export class ComponentPage extends React.Component { { this.props.propertiesTables &&
Implementation
} - { componentUrl &&
- View On Github + { this.props.componentUrl &&
+ View On Github
} { this.props.otherSections && this.props.otherSections.map((componentPageSection: IComponentPageSection, index: number) => { return
@@ -154,7 +180,11 @@ export class ComponentPage extends React.Component { ); } - private _editButton(section: 'Overview' | 'Dos' | 'Donts', url?: string): JSX.Element | undefined { + private _editButton(sectionIndex: ComponentPageSection, url?: string): JSX.Element | undefined { + // Get section string for URLs and IDs. + const section = ComponentPageSection[sectionIndex]; + + // Generate edit URL from componentURL let mdUrl: string | undefined = undefined; if (this.props.componentUrl) { mdUrl = `${this.props.componentUrl}/docs/${this.props.componentName}${section}.md`; @@ -164,9 +194,14 @@ export class ComponentPage extends React.Component { const editUrl: string | undefined = url || mdUrl || undefined; if (editUrl) { + // Get make section readable for tooltip. Add apostrophe to Don't + let readableSection = section; + if (sectionIndex === ComponentPageSection.Donts) { + readableSection = 'Don\'ts'; + } return ( {

Do

- { this._editButton('Dos', this.props.editDosUrl) } + { this._editButton(ComponentPageSection.Dos, this.props.editDosUrl) }
{ this.props.dos } @@ -267,7 +302,7 @@ export class ComponentPage extends React.Component {

Don’t

- { this._editButton('Donts', this.props.editDontsUrl) } + { this._editButton(ComponentPageSection.Donts, this.props.editDontsUrl) }
{ this.props.donts } From bedff9872b7be03cfe185d487c8818e99866eb15 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Fri, 30 Mar 2018 17:22:29 -0700 Subject: [PATCH 05/32] Fix editOverviewUrl prop. --- .../src/components/ComponentPage/ComponentPage.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx index e908b67382cc0..577784517cda0 100644 --- a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx +++ b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx @@ -35,14 +35,15 @@ export interface IComponentPageProps { allowNativeProps?: boolean | string; nativePropsElement?: string | string[] | undefined; - /** Link to the Component on GitHub. + /** + * Link to the Component on GitHub. * Enables 'View On GitHub' and all 'Edit' buttons. */ componentUrl?: string; /** * Link to the Donts markdown file on GitHub. - * Enables the 'Edit Donts' button. + * Enables the 'Edit Don'ts' button. * Overrides URL from componentUrl. */ editDontsUrl?: string; @@ -59,7 +60,7 @@ export interface IComponentPageProps { * Enables the 'Edit Overview' button. * Overrides URL from componentUrl. */ - editOverview?: string; + editOverviewUrl?: string; } export enum ComponentPageSection { @@ -99,7 +100,7 @@ export class ComponentPage extends React.Component {

Overview

- { this._editButton(ComponentPageSection.Overview, this.props.editOverview) } + { this._editButton(ComponentPageSection.Overview, this.props.editOverviewUrl) }
From 39677791d41fbdd7dca860552392486e77724d5f Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Fri, 30 Mar 2018 17:27:43 -0700 Subject: [PATCH 06/32] npm run changes output --- .../edit-docs-buttons_2018-03-31-00-27.json | 11 +++++++++++ .../edit-docs-buttons_2018-03-31-00-27.json | 11 +++++++++++ 2 files changed, 22 insertions(+) create mode 100644 common/changes/@uifabric/example-app-base/edit-docs-buttons_2018-03-31-00-27.json create mode 100644 common/changes/office-ui-fabric-react/edit-docs-buttons_2018-03-31-00-27.json diff --git a/common/changes/@uifabric/example-app-base/edit-docs-buttons_2018-03-31-00-27.json b/common/changes/@uifabric/example-app-base/edit-docs-buttons_2018-03-31-00-27.json new file mode 100644 index 0000000000000..df66dfe34204b --- /dev/null +++ b/common/changes/@uifabric/example-app-base/edit-docs-buttons_2018-03-31-00-27.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/example-app-base", + "comment": "Add new APIs for editing sections on GitHub.", + "type": "minor" + } + ], + "packageName": "@uifabric/example-app-base", + "email": "v-jojanz@microsoft.com" +} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/edit-docs-buttons_2018-03-31-00-27.json b/common/changes/office-ui-fabric-react/edit-docs-buttons_2018-03-31-00-27.json new file mode 100644 index 0000000000000..4f81ceaabfd17 --- /dev/null +++ b/common/changes/office-ui-fabric-react/edit-docs-buttons_2018-03-31-00-27.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Add new component page prop for editing on GitHub.", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "v-jojanz@microsoft.com" +} \ No newline at end of file From 484d3760fdbf5ee7a071ac3956ff9467377950bc Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Tue, 3 Apr 2018 12:07:46 -0700 Subject: [PATCH 07/32] Make edit buttons go directly to GitHub editor. --- .../src/components/ComponentPage/ComponentPage.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx index 577784517cda0..86ff2b0f360f4 100644 --- a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx +++ b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx @@ -195,6 +195,14 @@ export class ComponentPage extends React.Component { const editUrl: string | undefined = url || mdUrl || undefined; if (editUrl) { + // Replace /tree/ or /blob/ with /edit/ to get straight to GitHub editor. + if (editUrl.includes('/tree/')) { + editUrl.replace('/tree/', '/edit/'); + } + if (editUrl.includes('/blob/')) { + editUrl.replace('/blob/', '/edit/'); + } + // Get make section readable for tooltip. Add apostrophe to Don't let readableSection = section; if (sectionIndex === ComponentPageSection.Donts) { From 05fb3c48468407b5fb22c235d4d8f3cee7e80ba1 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Tue, 3 Apr 2018 12:14:37 -0700 Subject: [PATCH 08/32] change to let for string replacement --- .../src/components/ComponentPage/ComponentPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx index 86ff2b0f360f4..a57e6ea1b136b 100644 --- a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx +++ b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx @@ -192,7 +192,7 @@ export class ComponentPage extends React.Component { } // Allow generated URL fallback. - const editUrl: string | undefined = url || mdUrl || undefined; + let editUrl: string | undefined = url || mdUrl || undefined; if (editUrl) { // Replace /tree/ or /blob/ with /edit/ to get straight to GitHub editor. From f4712b8eb4cd6109a6ba29e04f6f0afeab01fab7 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Mon, 9 Apr 2018 17:47:42 -0700 Subject: [PATCH 09/32] Fix edit url changer --- .../src/components/ComponentPage/ComponentPage.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx index a57e6ea1b136b..ea7217746d6f0 100644 --- a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx +++ b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx @@ -192,15 +192,14 @@ export class ComponentPage extends React.Component { } // Allow generated URL fallback. - let editUrl: string | undefined = url || mdUrl || undefined; + let editUrl = url || mdUrl; if (editUrl) { // Replace /tree/ or /blob/ with /edit/ to get straight to GitHub editor. if (editUrl.includes('/tree/')) { - editUrl.replace('/tree/', '/edit/'); - } - if (editUrl.includes('/blob/')) { - editUrl.replace('/blob/', '/edit/'); + editUrl = editUrl.replace('/tree/', '/edit/'); + } else if (editUrl.includes('/blob/')) { + editUrl = editUrl.replace('/blob/', '/edit/'); } // Get make section readable for tooltip. Add apostrophe to Don't From 76280897a4458cc4c19a029b5fcc31def42953d6 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Mon, 9 Apr 2018 17:48:51 -0700 Subject: [PATCH 10/32] Remove className from edit buttons --- .../src/components/ComponentPage/ComponentPage.scss | 4 ---- .../src/components/ComponentPage/ComponentPage.tsx | 1 - 2 files changed, 5 deletions(-) diff --git a/packages/example-app-base/src/components/ComponentPage/ComponentPage.scss b/packages/example-app-base/src/components/ComponentPage/ComponentPage.scss index 9a32ac398477a..518c0eb8ed7a4 100644 --- a/packages/example-app-base/src/components/ComponentPage/ComponentPage.scss +++ b/packages/example-app-base/src/components/ComponentPage/ComponentPage.scss @@ -191,10 +191,6 @@ $dontColor: #A61E22; background-color: #e74856; } - .ComponentPage-editButton { - color: $ms-color-neutralSecondary; - } - @media screen and (min-width: $uhf-screen-min-mobile) { .ComponentPage-doSection { margin-bottom: -10px; // Trim last list item diff --git a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx index ea7217746d6f0..85503ac8dc168 100644 --- a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx +++ b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx @@ -215,7 +215,6 @@ export class ComponentPage extends React.Component { Date: Mon, 9 Apr 2018 17:49:16 -0700 Subject: [PATCH 11/32] Remove View on Github from Pivot --- .../src/components/ComponentPage/ComponentPage.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx index 85503ac8dc168..9d5cb1b3ce6cb 100644 --- a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx +++ b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx @@ -164,9 +164,6 @@ export class ComponentPage extends React.Component { { this.props.propertiesTables &&
Implementation
} - { this.props.componentUrl &&
- View On Github -
} { this.props.otherSections && this.props.otherSections.map((componentPageSection: IComponentPageSection, index: number) => { return
Date: Tue, 10 Apr 2018 12:49:07 -0700 Subject: [PATCH 12/32] return undefined if no url before computing urls --- .../src/components/ComponentPage/ComponentPage.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx index 9d5cb1b3ce6cb..45ed2cc1598d3 100644 --- a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx +++ b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx @@ -179,6 +179,10 @@ export class ComponentPage extends React.Component { } private _editButton(sectionIndex: ComponentPageSection, url?: string): JSX.Element | undefined { + if (!url && !this.props.componentUrl) { + return undefined; + } + // Get section string for URLs and IDs. const section = ComponentPageSection[sectionIndex]; @@ -222,8 +226,6 @@ export class ComponentPage extends React.Component { ); } - - return undefined; } private _getRelatedComponents(): JSX.Element | undefined { From de00933e9fdb540032924a6a6fbf89a4df9c538b Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Tue, 10 Apr 2018 12:49:33 -0700 Subject: [PATCH 13/32] Compute URL only if generated --- .../src/components/ComponentPage/ComponentPage.tsx | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx index 45ed2cc1598d3..4310abfac05a2 100644 --- a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx +++ b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx @@ -190,19 +190,18 @@ export class ComponentPage extends React.Component { let mdUrl: string | undefined = undefined; if (this.props.componentUrl) { mdUrl = `${this.props.componentUrl}/docs/${this.props.componentName}${section}.md`; + // Replace /tree/ or /blob/ with /edit/ to get straight to GitHub editor. + if (mdUrl.includes('/tree/')) { + mdUrl = mdUrl.replace('/tree/', '/edit/'); + } else if (mdUrl.includes('/blob/')) { + mdUrl = mdUrl.replace('/blob/', '/edit/'); + } } // Allow generated URL fallback. let editUrl = url || mdUrl; if (editUrl) { - // Replace /tree/ or /blob/ with /edit/ to get straight to GitHub editor. - if (editUrl.includes('/tree/')) { - editUrl = editUrl.replace('/tree/', '/edit/'); - } else if (editUrl.includes('/blob/')) { - editUrl = editUrl.replace('/blob/', '/edit/'); - } - // Get make section readable for tooltip. Add apostrophe to Don't let readableSection = section; if (sectionIndex === ComponentPageSection.Donts) { From 6a3269e1c37feeb8367b05548c1c0afc3f6b1e92 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Tue, 10 Apr 2018 13:54:13 -0700 Subject: [PATCH 14/32] Add github link method --- .../ComponentPage/ComponentPage.tsx | 113 ++++++++++-------- 1 file changed, 64 insertions(+), 49 deletions(-) diff --git a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx index 4310abfac05a2..e29b5a0f9e8d3 100644 --- a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx +++ b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx @@ -176,57 +176,8 @@ export class ComponentPage extends React.Component { }) }
); - } - - private _editButton(sectionIndex: ComponentPageSection, url?: string): JSX.Element | undefined { - if (!url && !this.props.componentUrl) { - return undefined; - } - - // Get section string for URLs and IDs. - const section = ComponentPageSection[sectionIndex]; - - // Generate edit URL from componentURL - let mdUrl: string | undefined = undefined; - if (this.props.componentUrl) { - mdUrl = `${this.props.componentUrl}/docs/${this.props.componentName}${section}.md`; - // Replace /tree/ or /blob/ with /edit/ to get straight to GitHub editor. - if (mdUrl.includes('/tree/')) { - mdUrl = mdUrl.replace('/tree/', '/edit/'); - } else if (mdUrl.includes('/blob/')) { - mdUrl = mdUrl.replace('/blob/', '/edit/'); - } } - // Allow generated URL fallback. - let editUrl = url || mdUrl; - - if (editUrl) { - // Get make section readable for tooltip. Add apostrophe to Don't - let readableSection = section; - if (sectionIndex === ComponentPageSection.Donts) { - readableSection = 'Don\'ts'; - } - return ( - - - - ); - } - } - private _getRelatedComponents(): JSX.Element | undefined { if (this.props.related) { return ( @@ -382,4 +333,68 @@ export class ComponentPage extends React.Component { return undefined; } + + private _editButton(sectionIndex: ComponentPageSection, url?: string): JSX.Element | undefined { + if (!url && !this.props.componentUrl) { + return undefined; + } + + // Get section string for URLs and IDs. + const section = ComponentPageSection[sectionIndex]; + + // Generate edit URL from componentURL + let mdUrl: string | undefined = undefined; + if (this.props.componentUrl) { + mdUrl = `${this.props.componentUrl}/docs/${this.props.componentName}${section}.md`; + // Replace /tree/ or /blob/ with /edit/ to get straight to GitHub editor. + if (mdUrl.includes('/tree/')) { + mdUrl = mdUrl.replace('/tree/', '/edit/'); + } else if (mdUrl.includes('/blob/')) { + mdUrl = mdUrl.replace('/blob/', '/edit/'); + } + } + + // Allow generated URL fallback. + let editUrl = url || mdUrl; + + if (editUrl) { + // Get make section readable for tooltip. Add apostrophe to Don't + let readableSection = section; + if (sectionIndex === ComponentPageSection.Donts) { + readableSection = 'Don\'ts'; + } + return ( + + + + ); + } + } + + private _getViewLink(): JSX.Element | undefined { + if (!this.props.componentUrl) { + return undefined; + } + return ( + + { `View ${this.props.componentName} On GitHub` } + + ); + } } From 5983aed55e10f9180fa029836d111054ff1d9282 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Tue, 10 Apr 2018 13:55:43 -0700 Subject: [PATCH 15/32] Add link below overview --- .../src/components/ComponentPage/ComponentPage.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx index e29b5a0f9e8d3..3c915f4211a4c 100644 --- a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx +++ b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx @@ -105,6 +105,7 @@ export class ComponentPage extends React.Component {
{ overview } + { this.props.componentUrl &&

{ this._getViewLink() }

}
{ this._getRelatedComponents() }
@@ -176,7 +177,7 @@ export class ComponentPage extends React.Component { }) }
); - } + } private _getRelatedComponents(): JSX.Element | undefined { if (this.props.related) { From 3a9c52d3ebe3021af87072ed7a40a617024b8672 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Tue, 10 Apr 2018 14:19:37 -0700 Subject: [PATCH 16/32] Remove view button --- .../components/ComponentPage/ComponentPage.tsx | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx index 3c915f4211a4c..93c6ed68c37b5 100644 --- a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx +++ b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx @@ -105,7 +105,6 @@ export class ComponentPage extends React.Component {
{ overview } - { this.props.componentUrl &&

{ this._getViewLink() }

}
{ this._getRelatedComponents() }
@@ -383,19 +382,4 @@ export class ComponentPage extends React.Component { ); } } - - private _getViewLink(): JSX.Element | undefined { - if (!this.props.componentUrl) { - return undefined; - } - return ( - - { `View ${this.props.componentName} On GitHub` } - - ); - } } From 4c25b8e2b8bc413a7905dfa6723c471b2378554e Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Tue, 10 Apr 2018 16:31:15 -0700 Subject: [PATCH 17/32] Switch from `componentName` to `title` --- .../src/components/ComponentPage/ComponentPage.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx index 93c6ed68c37b5..4c2f8b73737cb 100644 --- a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx +++ b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx @@ -345,7 +345,7 @@ export class ComponentPage extends React.Component { // Generate edit URL from componentURL let mdUrl: string | undefined = undefined; if (this.props.componentUrl) { - mdUrl = `${this.props.componentUrl}/docs/${this.props.componentName}${section}.md`; + mdUrl = `${this.props.componentUrl}/docs/${this.props.title}${section}.md`; // Replace /tree/ or /blob/ with /edit/ to get straight to GitHub editor. if (mdUrl.includes('/tree/')) { mdUrl = mdUrl.replace('/tree/', '/edit/'); @@ -365,12 +365,12 @@ export class ComponentPage extends React.Component { } return ( Date: Tue, 10 Apr 2018 18:47:45 -0700 Subject: [PATCH 18/32] eod --- .../ComponentPage/ComponentPage.tsx | 44 ++++++++++++++++--- .../ActivityItem/ActivityItemPage.tsx | 4 +- 2 files changed, 42 insertions(+), 6 deletions(-) diff --git a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx index 4c2f8b73737cb..ed1e4c8fc1118 100644 --- a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx +++ b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx @@ -41,6 +41,13 @@ export interface IComponentPageProps { */ componentUrl?: string; + /** + * Link to the BestPractices markdown file on GitHub. + * Enables the 'Edit Best Practices' button. + * Overrides URL from componentUrl. + */ + editBestPracticesUrl?: string; + /** * Link to the Donts markdown file on GitHub. * Enables the 'Edit Don'ts' button. @@ -65,8 +72,9 @@ export interface IComponentPageProps { export enum ComponentPageSection { Dos = 0, - Donts = 1, - Overview = 2, + BestPractices = 1, + Donts = 2, + Overview = 3, } export class ComponentPage extends React.Component { @@ -234,11 +242,14 @@ export class ComponentPage extends React.Component { private _getDosAndDonts(): JSX.Element | undefined { let dosAndDonts: Array = []; - + console.log(this.props.bestPractices!.type); if (this.props.bestPractices) { dosAndDonts.push(
-

Best Practices

+
+

Best Practices

+ { this._editButton(ComponentPageSection.BestPractices, this.props.editBestPracticesUrl) } +
{ this.props.bestPractices }
); @@ -339,8 +350,31 @@ export class ComponentPage extends React.Component { return undefined; } - // Get section string for URLs and IDs. + const { + bestPractices, + dos, + donts, + overview, + } = this.props; + + const foo = this.props.bestPractices!.type.name; + + // // const showEditButton = this.props.bestPractices!.type!.name === 'PageMarkdown'; + + // // Get section string for URLs and IDs. const section = ComponentPageSection[sectionIndex]; + const bpType = bestPractices!.type(); + const doType = dos!.type(); + const dontType = donts!.type(); + const overviewType = overview!.type(); + let sectionIsMarkdown = false; + // let foo; + + switch (section) { + case 'BestPractices': + sectionIsMarkdown = bestPractices!.props.children.length >= 0 ? true : false; + // foo = bpType.name; + } // Generate edit URL from componentURL let mdUrl: string | undefined = undefined; diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItemPage.tsx b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItemPage.tsx index ad31ba2318ad1..978a289f06db0 100644 --- a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItemPage.tsx +++ b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItemPage.tsx @@ -49,7 +49,9 @@ export class ActivityItemPage extends React.Component } bestPractices={ -
+ + { require('!raw-loader!office-ui-fabric-react/src/components/ActivityItem/docs/ActivityItemDos.md') } + } dos={ From 03c4ca155853845afeb2bbd55a6345f18daf3d44 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Tue, 10 Apr 2018 19:35:23 -0700 Subject: [PATCH 19/32] Add Edit button to Best Practices --- .../src/components/ComponentPage/ComponentPage.scss | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/example-app-base/src/components/ComponentPage/ComponentPage.scss b/packages/example-app-base/src/components/ComponentPage/ComponentPage.scss index 518c0eb8ed7a4..f6a49848ecee7 100644 --- a/packages/example-app-base/src/components/ComponentPage/ComponentPage.scss +++ b/packages/example-app-base/src/components/ComponentPage/ComponentPage.scss @@ -78,11 +78,21 @@ $dontColor: #A61E22; } } + .ComponentPage-usageHeader, .ComponentPage-overviewSectionHeader, .ComponentPage-doSectionHeader { display: flex; justify-content: space-between; - align-items: baseline; + align-items: center; + } + + .ComponentPage-usageHeader { + margin-top: 10px; + margin-bottom: $componentSubHeadMargin; + + .ComponentPage-subHeading { + margin: 0; + } } .ComponentPage-related { From 29f905d4c6b16aa337f3c675adb8578aa2ec5497 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Tue, 10 Apr 2018 19:35:43 -0700 Subject: [PATCH 20/32] Only render edit button if section has PageMarkdown --- .../ComponentPage/ComponentPage.tsx | 55 ++++++++++--------- 1 file changed, 29 insertions(+), 26 deletions(-) diff --git a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx index ed1e4c8fc1118..3bed6e1985fed 100644 --- a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx +++ b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx @@ -350,30 +350,38 @@ export class ComponentPage extends React.Component { return undefined; } - const { - bestPractices, - dos, - donts, - overview, - } = this.props; - - const foo = this.props.bestPractices!.type.name; - - // // const showEditButton = this.props.bestPractices!.type!.name === 'PageMarkdown'; - - // // Get section string for URLs and IDs. + // Get section string for URLs and IDs. const section = ComponentPageSection[sectionIndex]; - const bpType = bestPractices!.type(); - const doType = dos!.type(); - const dontType = donts!.type(); - const overviewType = overview!.type(); - let sectionIsMarkdown = false; - // let foo; - switch (section) { + // Check if the section contains a function (using PageMarkdown) + const isMarkdown = { + BestPractices: typeof this.props.bestPractices!.type === 'function', + Dos: typeof this.props.dos!.type === 'function', + Donts: typeof this.props.donts!.type === 'function', + Overview: typeof this.props.overview!.type === 'function', + }; + let sectionIsMarkdown = false; + let readableSection = section; + switch (readableSection) { case 'BestPractices': - sectionIsMarkdown = bestPractices!.props.children.length >= 0 ? true : false; - // foo = bpType.name; + sectionIsMarkdown = isMarkdown.BestPractices; + break; + case 'Dos': + sectionIsMarkdown = isMarkdown.Dos; + break; + case 'Donts': + sectionIsMarkdown = isMarkdown.Donts; + readableSection = 'Don\'ts'; + break; + case 'Overview': + sectionIsMarkdown = isMarkdown.Overview; + break; + default: + sectionIsMarkdown = false; + readableSection = section; + } + if (sectionIsMarkdown === false) { + return undefined; } // Generate edit URL from componentURL @@ -392,11 +400,6 @@ export class ComponentPage extends React.Component { let editUrl = url || mdUrl; if (editUrl) { - // Get make section readable for tooltip. Add apostrophe to Don't - let readableSection = section; - if (sectionIndex === ComponentPageSection.Donts) { - readableSection = 'Don\'ts'; - } return ( Date: Tue, 10 Apr 2018 19:36:57 -0700 Subject: [PATCH 21/32] No best practices --- .../src/components/ActivityItem/ActivityItemPage.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItemPage.tsx b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItemPage.tsx index 978a289f06db0..ad31ba2318ad1 100644 --- a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItemPage.tsx +++ b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItemPage.tsx @@ -49,9 +49,7 @@ export class ActivityItemPage extends React.Component } bestPractices={ - - { require('!raw-loader!office-ui-fabric-react/src/components/ActivityItem/docs/ActivityItemDos.md') } - +
} dos={ From 5f8739c7c23b48452e9f3fa049eb4e7b67654884 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Tue, 10 Apr 2018 19:38:37 -0700 Subject: [PATCH 22/32] Remove console log --- .../src/components/ComponentPage/ComponentPage.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx index 3bed6e1985fed..e711bb54339fc 100644 --- a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx +++ b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx @@ -242,7 +242,6 @@ export class ComponentPage extends React.Component { private _getDosAndDonts(): JSX.Element | undefined { let dosAndDonts: Array = []; - console.log(this.props.bestPractices!.type); if (this.props.bestPractices) { dosAndDonts.push(
From c4fcb7d8a1d2fc51f8d3bfd362c23c6acb0dbed2 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Wed, 11 Apr 2018 10:52:38 -0700 Subject: [PATCH 23/32] Better switch type safety. --- .../src/components/ComponentPage/ComponentPage.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx index e711bb54339fc..a7b74bf12e34a 100644 --- a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx +++ b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx @@ -36,7 +36,7 @@ export interface IComponentPageProps { nativePropsElement?: string | string[] | undefined; /** - * Link to the Component on GitHub. + * Link to the Component root folder on GitHub. * Enables 'View On GitHub' and all 'Edit' buttons. */ componentUrl?: string; @@ -351,6 +351,7 @@ export class ComponentPage extends React.Component { // Get section string for URLs and IDs. const section = ComponentPageSection[sectionIndex]; + let readableSection = section; // Check if the section contains a function (using PageMarkdown) const isMarkdown = { @@ -360,19 +361,18 @@ export class ComponentPage extends React.Component { Overview: typeof this.props.overview!.type === 'function', }; let sectionIsMarkdown = false; - let readableSection = section; - switch (readableSection) { - case 'BestPractices': + switch (sectionIndex) { + case ComponentPageSection.BestPractices: sectionIsMarkdown = isMarkdown.BestPractices; break; - case 'Dos': + case ComponentPageSection.Dos: sectionIsMarkdown = isMarkdown.Dos; break; - case 'Donts': + case ComponentPageSection.Donts: sectionIsMarkdown = isMarkdown.Donts; readableSection = 'Don\'ts'; break; - case 'Overview': + case ComponentPageSection.Overview: sectionIsMarkdown = isMarkdown.Overview; break; default: From 61afbd7633c78b57f60cda3f95fe44bf582ac769 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Wed, 11 Apr 2018 10:56:57 -0700 Subject: [PATCH 24/32] Remove spaces from component name. --- .../src/components/ComponentPage/ComponentPage.tsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx index a7b74bf12e34a..1b39c03becf30 100644 --- a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx +++ b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx @@ -352,6 +352,8 @@ export class ComponentPage extends React.Component { // Get section string for URLs and IDs. const section = ComponentPageSection[sectionIndex]; let readableSection = section; + let componentName = this.props.title || this.props.componentName; + componentName = componentName.replace(/\s/g, ''); // Check if the section contains a function (using PageMarkdown) const isMarkdown = { @@ -364,6 +366,7 @@ export class ComponentPage extends React.Component { switch (sectionIndex) { case ComponentPageSection.BestPractices: sectionIsMarkdown = isMarkdown.BestPractices; + readableSection = 'Best Practices'; break; case ComponentPageSection.Dos: sectionIsMarkdown = isMarkdown.Dos; @@ -386,7 +389,7 @@ export class ComponentPage extends React.Component { // Generate edit URL from componentURL let mdUrl: string | undefined = undefined; if (this.props.componentUrl) { - mdUrl = `${this.props.componentUrl}/docs/${this.props.title}${section}.md`; + mdUrl = `${this.props.componentUrl}/docs/${componentName}${section}.md`; // Replace /tree/ or /blob/ with /edit/ to get straight to GitHub editor. if (mdUrl.includes('/tree/')) { mdUrl = mdUrl.replace('/tree/', '/edit/'); @@ -401,12 +404,12 @@ export class ComponentPage extends React.Component { if (editUrl) { return ( Date: Wed, 11 Apr 2018 11:00:44 -0700 Subject: [PATCH 25/32] nit --- .../src/components/ComponentPage/ComponentPage.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx index 1b39c03becf30..3edc508035904 100644 --- a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx +++ b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx @@ -352,8 +352,7 @@ export class ComponentPage extends React.Component { // Get section string for URLs and IDs. const section = ComponentPageSection[sectionIndex]; let readableSection = section; - let componentName = this.props.title || this.props.componentName; - componentName = componentName.replace(/\s/g, ''); + const componentName = (this.props.title || this.props.componentName).replace(/\s/g, ''); // Check if the section contains a function (using PageMarkdown) const isMarkdown = { From 9cc735b7d904ec79cf5a0537c03e3d309ccf9d05 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Wed, 11 Apr 2018 12:50:12 -0700 Subject: [PATCH 26/32] Fix type error when props are undefined. --- .../ComponentPage/ComponentPage.tsx | 66 ++++++++++--------- 1 file changed, 36 insertions(+), 30 deletions(-) diff --git a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx index 3edc508035904..b587934d2f546 100644 --- a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx +++ b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx @@ -199,8 +199,8 @@ export class ComponentPage extends React.Component { private _getNativePropsInfo(): JSX.Element | undefined { if (this.props.allowNativeProps) { - let elementString: string | string[] | JSX.Element = this.props.nativePropsElement || 'div', - componentString: JSX.Element | undefined; + let elementString: string | string[] | JSX.Element = this.props.nativePropsElement || 'div'; + let componentString: JSX.Element | undefined; if (typeof elementString === 'object' && elementString.length > 1) { const elementArr = elementString.slice(); for (let _i = 0; _i < elementArr.length; _i++) { @@ -345,6 +345,7 @@ export class ComponentPage extends React.Component { } private _editButton(sectionIndex: ComponentPageSection, url?: string): JSX.Element | undefined { + // return undefined; if (!url && !this.props.componentUrl) { return undefined; } @@ -355,11 +356,17 @@ export class ComponentPage extends React.Component { const componentName = (this.props.title || this.props.componentName).replace(/\s/g, ''); // Check if the section contains a function (using PageMarkdown) + const { + bestPractices, + dos, + donts, + overview, + } = this.props; const isMarkdown = { - BestPractices: typeof this.props.bestPractices!.type === 'function', - Dos: typeof this.props.dos!.type === 'function', - Donts: typeof this.props.donts!.type === 'function', - Overview: typeof this.props.overview!.type === 'function', + BestPractices: bestPractices ? typeof bestPractices.type === 'function' : false, + Dos: dos ? typeof dos.type === 'function' : false, + Donts: donts ? typeof donts.type === 'function' : false, + Overview: overview ? typeof overview.type === 'function' : false, }; let sectionIsMarkdown = false; switch (sectionIndex) { @@ -390,34 +397,33 @@ export class ComponentPage extends React.Component { if (this.props.componentUrl) { mdUrl = `${this.props.componentUrl}/docs/${componentName}${section}.md`; // Replace /tree/ or /blob/ with /edit/ to get straight to GitHub editor. - if (mdUrl.includes('/tree/')) { - mdUrl = mdUrl.replace('/tree/', '/edit/'); - } else if (mdUrl.includes('/blob/')) { - mdUrl = mdUrl.replace('/blob/', '/edit/'); + if (mdUrl!.includes('/tree/')) { + mdUrl = mdUrl!.replace('/tree/', '/edit/'); + } else if (mdUrl!.includes('/blob/')) { + mdUrl = mdUrl!.replace('/blob/', '/edit/'); } } // Allow generated URL fallback. - let editUrl = url || mdUrl; - - if (editUrl) { - return ( - - - - ); + const editUrl = url || mdUrl; + if (!editUrl) { + return undefined; } + + return ( + + + + ); } } From 05a68705ccc45cd5eaeae74bc0e8526927bee9ae Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Wed, 11 Apr 2018 17:07:07 -0700 Subject: [PATCH 27/32] removed commented code --- .../src/components/ComponentPage/ComponentPage.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx index b587934d2f546..c65e2c9d419e1 100644 --- a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx +++ b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx @@ -345,7 +345,6 @@ export class ComponentPage extends React.Component { } private _editButton(sectionIndex: ComponentPageSection, url?: string): JSX.Element | undefined { - // return undefined; if (!url && !this.props.componentUrl) { return undefined; } From 0445d25f89db87662fe970e4b0e56f62daeac866 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Thu, 12 Apr 2018 10:12:53 -0700 Subject: [PATCH 28/32] Alphebetize enum --- .../src/components/ComponentPage/ComponentPage.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx index c65e2c9d419e1..b39cc483bc9b6 100644 --- a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx +++ b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx @@ -71,9 +71,9 @@ export interface IComponentPageProps { } export enum ComponentPageSection { - Dos = 0, - BestPractices = 1, - Donts = 2, + BestPractices = 0, + Donts = 1, + Dos = 2, Overview = 3, } From 0de2372f107325e44cc9a83544d0f63707e70415 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Thu, 12 Apr 2018 10:57:53 -0700 Subject: [PATCH 29/32] Rename class --- .../src/components/ComponentPage/ComponentPage.scss | 4 ++-- .../src/components/ComponentPage/ComponentPage.tsx | 12 ++++++------ 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/example-app-base/src/components/ComponentPage/ComponentPage.scss b/packages/example-app-base/src/components/ComponentPage/ComponentPage.scss index f6a49848ecee7..4089033969d1f 100644 --- a/packages/example-app-base/src/components/ComponentPage/ComponentPage.scss +++ b/packages/example-app-base/src/components/ComponentPage/ComponentPage.scss @@ -187,7 +187,7 @@ $dontColor: #A61E22; } } - .ComponentPage-doSectionHr { + .ComponentPage-doSectionLine { background-color: #a4cf0c; border-radius: 3px; display: block; @@ -197,7 +197,7 @@ $dontColor: #A61E22; } } - .ComponentPage-doSection--dont .ComponentPage-doSectionHr { + .ComponentPage-doSection--dont .ComponentPage-doSectionLine { background-color: #e74856; } diff --git a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx index b39cc483bc9b6..d68c29dcd5095 100644 --- a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx +++ b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx @@ -71,10 +71,10 @@ export interface IComponentPageProps { } export enum ComponentPageSection { - BestPractices = 0, - Donts = 1, - Dos = 2, - Overview = 3, + BestPractices, + Donts, + Dos, + Overview, } export class ComponentPage extends React.Component { @@ -262,7 +262,7 @@ export class ComponentPage extends React.Component {

Do

{ this._editButton(ComponentPageSection.Dos, this.props.editDosUrl) }
-
+
{ this.props.dos }
@@ -270,7 +270,7 @@ export class ComponentPage extends React.Component {

Don’t

{ this._editButton(ComponentPageSection.Donts, this.props.editDontsUrl) }
-
+
{ this.props.donts }
From 5e55da4d6905f45c542bcab033f0458f2291fb3c Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Thu, 12 Apr 2018 12:00:03 -0700 Subject: [PATCH 30/32] Fix screen reader label --- .../src/components/ComponentPage/ComponentPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx index d68c29dcd5095..47f36f4571f5d 100644 --- a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx +++ b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx @@ -416,7 +416,7 @@ export class ComponentPage extends React.Component { id={ `${componentName}-${section}-editButtonHost` } > Date: Thu, 12 Apr 2018 18:32:38 -0700 Subject: [PATCH 31/32] Split button off into subcomponent --- .../ComponentPage/ComponentPage.tsx | 114 +++++------------- .../components/EditSection/EditSection.tsx | 65 ++++++++++ .../EditSection/EditSection.types.ts | 47 ++++++++ .../src/components/EditSection/index.ts | 2 + packages/example-app-base/src/index.ts | 1 + 5 files changed, 148 insertions(+), 81 deletions(-) create mode 100644 packages/example-app-base/src/components/EditSection/EditSection.tsx create mode 100644 packages/example-app-base/src/components/EditSection/EditSection.types.ts create mode 100644 packages/example-app-base/src/components/EditSection/index.ts diff --git a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx index 47f36f4571f5d..30729325bb244 100644 --- a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx +++ b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx @@ -6,9 +6,11 @@ import { import { Link } from 'office-ui-fabric-react/lib/Link'; -import { IconButton } from 'office-ui-fabric-react/lib/Button'; import { MessageBar } from 'office-ui-fabric-react/lib/MessageBar'; -import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip'; +import { + EditSection, + ComponentPageSection, +} from '../EditSection'; import './ComponentPage.scss'; export interface IComponentPageSection { @@ -70,13 +72,6 @@ export interface IComponentPageProps { editOverviewUrl?: string; } -export enum ComponentPageSection { - BestPractices, - Donts, - Dos, - Overview, -} - export class ComponentPage extends React.Component { public static defaultProps: Partial = { isHeaderVisible: true, @@ -108,7 +103,12 @@ export class ComponentPage extends React.Component {

Overview

- { this._editButton(ComponentPageSection.Overview, this.props.editOverviewUrl) } +
@@ -247,7 +247,12 @@ export class ComponentPage extends React.Component {

Best Practices

- { this._editButton(ComponentPageSection.BestPractices, this.props.editBestPracticesUrl) } +
{ this.props.bestPractices }
@@ -260,7 +265,12 @@ export class ComponentPage extends React.Component {

Do

- { this._editButton(ComponentPageSection.Dos, this.props.editDosUrl) } +
{ this.props.dos } @@ -268,7 +278,12 @@ export class ComponentPage extends React.Component {

Don’t

- { this._editButton(ComponentPageSection.Donts, this.props.editDontsUrl) } +
{ this.props.donts } @@ -344,55 +359,13 @@ export class ComponentPage extends React.Component { return undefined; } - private _editButton(sectionIndex: ComponentPageSection, url?: string): JSX.Element | undefined { - if (!url && !this.props.componentUrl) { - return undefined; + private _getURL(section: string, url?: string): string { + if (url) { + return url; } - - // Get section string for URLs and IDs. - const section = ComponentPageSection[sectionIndex]; - let readableSection = section; const componentName = (this.props.title || this.props.componentName).replace(/\s/g, ''); - - // Check if the section contains a function (using PageMarkdown) - const { - bestPractices, - dos, - donts, - overview, - } = this.props; - const isMarkdown = { - BestPractices: bestPractices ? typeof bestPractices.type === 'function' : false, - Dos: dos ? typeof dos.type === 'function' : false, - Donts: donts ? typeof donts.type === 'function' : false, - Overview: overview ? typeof overview.type === 'function' : false, - }; - let sectionIsMarkdown = false; - switch (sectionIndex) { - case ComponentPageSection.BestPractices: - sectionIsMarkdown = isMarkdown.BestPractices; - readableSection = 'Best Practices'; - break; - case ComponentPageSection.Dos: - sectionIsMarkdown = isMarkdown.Dos; - break; - case ComponentPageSection.Donts: - sectionIsMarkdown = isMarkdown.Donts; - readableSection = 'Don\'ts'; - break; - case ComponentPageSection.Overview: - sectionIsMarkdown = isMarkdown.Overview; - break; - default: - sectionIsMarkdown = false; - readableSection = section; - } - if (sectionIsMarkdown === false) { - return undefined; - } - // Generate edit URL from componentURL - let mdUrl: string | undefined = undefined; + let mdUrl; if (this.props.componentUrl) { mdUrl = `${this.props.componentUrl}/docs/${componentName}${section}.md`; // Replace /tree/ or /blob/ with /edit/ to get straight to GitHub editor. @@ -402,27 +375,6 @@ export class ComponentPage extends React.Component { mdUrl = mdUrl!.replace('/blob/', '/edit/'); } } - - // Allow generated URL fallback. - const editUrl = url || mdUrl; - if (!editUrl) { - return undefined; - } - - return ( - - - - ); + return mdUrl; } } diff --git a/packages/example-app-base/src/components/EditSection/EditSection.tsx b/packages/example-app-base/src/components/EditSection/EditSection.tsx new file mode 100644 index 0000000000000..bb7546d9afbe3 --- /dev/null +++ b/packages/example-app-base/src/components/EditSection/EditSection.tsx @@ -0,0 +1,65 @@ +import * as React from 'react'; +import { + IEditSectionProps, + ComponentPageSection, +} from './EditSection.types'; +import { IconButton } from 'office-ui-fabric-react/lib/Button'; +import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip'; + +export class EditSection extends React.Component { + public render(): JSX.Element | null { + const { sectionContent } = this.props; + const isMarkdown = sectionContent ? typeof sectionContent.type === 'function' : false; + if (isMarkdown === false) { + return null; + } + + const { + title, + section: sectionIndex, + url, + } = this.props; + const section = ComponentPageSection[sectionIndex!]; + const readableSection = this._getReadableSection(); + + return ( + + + + ); + } + + private _getReadableSection(): string { + const { + section: sectionIndex, + readableSection: readableSectionProp, + } = this.props; + if (readableSectionProp) { + return readableSectionProp; + } + + const section = ComponentPageSection[sectionIndex!]; + let readableSection = section; + switch (sectionIndex) { + case ComponentPageSection.BestPractices: + readableSection = 'Best Practices'; + break; + case ComponentPageSection.Donts: + readableSection = 'Don\'ts'; + break; + default: + readableSection = section; + } + return readableSection; + } +} \ No newline at end of file diff --git a/packages/example-app-base/src/components/EditSection/EditSection.types.ts b/packages/example-app-base/src/components/EditSection/EditSection.types.ts new file mode 100644 index 0000000000000..93e426651dd71 --- /dev/null +++ b/packages/example-app-base/src/components/EditSection/EditSection.types.ts @@ -0,0 +1,47 @@ +import { EditSection } from './EditSection'; + +export enum ComponentPageSection { + BestPractices, + Donts, + Dos, + Overview, +} + +export interface IEditSection { + +} + +export interface IEditSectionProps extends React.HTMLAttributes { + /** + * Optional callback to access the IPersona interface. Use this instead of ref for accessing + * the public methods and properties of the component. + */ + componentRef?: (component: IEditSection | null) => void; + + /** + * The name of the Component + */ + title: string; + + /** + * The section of the page. + */ + section: ComponentPageSection; + + /** + * Pass the prop that has the content of the section. + * This checks if the content is a function before showing + * the EditSection button. + */ + sectionContent: JSX.Element; + + /** + * Override for section name. + */ + readableSection?: string; + + /** + * Url for the edit button. + */ + url: string; +} \ No newline at end of file diff --git a/packages/example-app-base/src/components/EditSection/index.ts b/packages/example-app-base/src/components/EditSection/index.ts new file mode 100644 index 0000000000000..0b132dae270cc --- /dev/null +++ b/packages/example-app-base/src/components/EditSection/index.ts @@ -0,0 +1,2 @@ +export * from './EditSection'; +export * from './EditSection.types'; \ No newline at end of file diff --git a/packages/example-app-base/src/index.ts b/packages/example-app-base/src/index.ts index d011ca86b9402..7df71a1e047fc 100644 --- a/packages/example-app-base/src/index.ts +++ b/packages/example-app-base/src/index.ts @@ -1,6 +1,7 @@ export * from './components/App/App'; export * from './components/ComponentPage/ComponentPage'; export * from './components/ComponentPage/IComponentDemoPageProps'; +export * from './components/EditMarkdown'; export * from './components/ExampleCard/ExampleCard'; export * from './components/Header/Header'; export * from './components/Highlight/Highlight'; From b43c08d9cd352aa351059358029133695c93e498 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Thu, 12 Apr 2018 20:43:21 -0700 Subject: [PATCH 32/32] fix export --- packages/example-app-base/src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/example-app-base/src/index.ts b/packages/example-app-base/src/index.ts index 7df71a1e047fc..12d6abe83f820 100644 --- a/packages/example-app-base/src/index.ts +++ b/packages/example-app-base/src/index.ts @@ -1,7 +1,7 @@ export * from './components/App/App'; export * from './components/ComponentPage/ComponentPage'; export * from './components/ComponentPage/IComponentDemoPageProps'; -export * from './components/EditMarkdown'; +export * from './components/EditSection'; export * from './components/ExampleCard/ExampleCard'; export * from './components/Header/Header'; export * from './components/Highlight/Highlight';