From 993dfa824d4a4eb801fa664f611060294ee4d23d Mon Sep 17 00:00:00 2001 From: jbadan Date: Thu, 31 Jan 2019 15:02:43 -0800 Subject: [PATCH 1/5] updating with home page and new nav --- .eslintignore | 1 + .gitignore | 3 + README.md | 31 +- scripts/build.js | 4 + scripts/start.js | 4 + src/_playground/App.js | 2 +- src/_playground/App.scss | 39 +- src/_playground/Routes.js | 418 ++++++++++++------ src/_playground/documentation/Home/Home.js | 13 + .../Markdown/MarkdownImporter.js | 25 ++ 10 files changed, 369 insertions(+), 171 deletions(-) create mode 100644 src/_playground/documentation/Home/Home.js create mode 100644 src/_playground/documentation/Markdown/MarkdownImporter.js diff --git a/.eslintignore b/.eslintignore index f0d8d0402..eb321a336 100644 --- a/.eslintignore +++ b/.eslintignore @@ -5,4 +5,5 @@ *.snap *.svg *.sh +*.md node_modules/** \ No newline at end of file diff --git a/.gitignore b/.gitignore index 2b40b7e6f..c08789f8d 100644 --- a/.gitignore +++ b/.gitignore @@ -10,6 +10,9 @@ /build /lib +# Readme copy for github pages site +/src/_playground/documentation/Home/README.md + # misc .DS_Store .env.local diff --git a/README.md b/README.md index 12030f87b..19c03f565 100644 --- a/README.md +++ b/README.md @@ -19,7 +19,7 @@ You will need to install [Node and Node Package Manager](https://www.npmjs.com/g ## Getting Started -For an existing react application, follow the steps bellow: +For an existing react application, follow the steps below: 1. Install fundamental-react @@ -34,29 +34,22 @@ For an existing react application, follow the steps bellow: ``` 1. Import components as needed. See [Component Documentation](https://sap.github.io/fundamental-react/) for examples and API details. -```javascript -import { Alert } from 'fundamental-react/lib/Alert/Alert'; -``` - -or - -```javascript -import { Alert } from 'fundamental-react'; -``` - + ```javascript + import { Alert } from 'fundamental-react/lib/Alert/Alert'; + ``` + or + ```javascript + import { Alert } from 'fundamental-react'; + ``` -note: Importing from `lib` -```javascript -import { Alert } from 'fundamental-react/lib/Alert/Alert;' -``` -is recommended. Doing so will bring in only the component you are using instead of the whole library, which will reduce your bundle size significantly. + > **NOTE:** Importing from `lib` is recommended. Doing so will bring in only the component you are using instead of the whole library, which will reduce your bundle size significantly. ## Versioning -The `fundamental-react` library follows [Semantic Versioning](https://semver.org/). These components strictly adhere to the [MAJOR].[MINOR].[PATCH] numbering system (also known as [BREAKING].[FEATURE].[FIX]). +The `fundamental-react` library follows [Semantic Versioning](https://semver.org/). These components strictly adhere to the `[MAJOR].[MINOR].[PATCH]` numbering system (also known as `[BREAKING].[FEATURE].[FIX]`). -Merges to the `master` branch will be published as a prerelease. Prereleases will include an **rc** version (_e.g._ [MAJOR].[MINOR].[PATCH]-rc.[RC]). +Merges to the `master` branch will be published as a prerelease. Prereleases will include an **rc** version (_e.g._ `[MAJOR].[MINOR].[PATCH]-rc.[RC]`). ## Known Issues @@ -68,7 +61,7 @@ If you encounter an issue or want to request a feature, you can [create an issue ## Contributing -If you want to contribute, please check the [Contribution Guidelines](./.github/CONTRIBUTING.md). Also see our [Developer Guide to Getting Started](https://github.com/SAP/fundamental-react/wiki/Developer-Guide). +If you want to contribute, please check the [Contribution Guidelines](https://github.com/SAP/fundamental-react/blob/master/.github/CONTRIBUTING.md). Also see our [Developer Guide to Getting Started](https://github.com/SAP/fundamental-react/wiki/Developer-Guide). ## License diff --git a/scripts/build.js b/scripts/build.js index a86a79189..1bb436d92 100644 --- a/scripts/build.js +++ b/scripts/build.js @@ -47,6 +47,10 @@ if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) { process.exit(1); } +fs.copyFile('README.md', 'src/_playground/documentation/Home/README.md', (err) => { + if (err) throw err; +}); + // Process CLI arguments const argv = process.argv.slice(2); const writeStatsJson = argv.indexOf('--stats') !== -1; diff --git a/scripts/start.js b/scripts/start.js index 8f9ba15ad..fbb330465 100644 --- a/scripts/start.js +++ b/scripts/start.js @@ -42,6 +42,10 @@ if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) { process.exit(1); } +fs.copyFile('README.md', 'src/_playground/documentation/Home/README.md', (err) => { + if (err) throw err; +}); + // Tools like Cloud9 rely on this. const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000; const HOST = process.env.HOST || '0.0.0.0'; diff --git a/src/_playground/App.js b/src/_playground/App.js index f1d4844d5..b93f3ee7c 100644 --- a/src/_playground/App.js +++ b/src/_playground/App.js @@ -1,6 +1,6 @@ import './App.scss'; import '@babel/polyfill'; -import Routes from './Routes'; +import { Routes } from './Routes'; import React, { Component } from 'react'; class App extends Component { diff --git a/src/_playground/App.scss b/src/_playground/App.scss index 82efe1378..33703ce2d 100644 --- a/src/_playground/App.scss +++ b/src/_playground/App.scss @@ -40,12 +40,14 @@ $fd-fonts-path: '../../node_modules/fiori-fundamentals/dist/fonts/'; color: #424e5a; padding: 15px 20px; display: block; + font-weight: 700; + font-size: 1.25rem; } .frDocs-Nav__item { display: block; color: #21262c; - font-size: 0.875rem; + font-size: 1rem; position: relative; padding: 13px 40px; } @@ -69,17 +71,17 @@ $fd-fonts-path: '../../node_modules/fiori-fundamentals/dist/fonts/'; padding-bottom: 2rem; background-color: white; margin-right: auto; - margin-left: auto; + margin-left: 12px; padding-left: 1rem; padding-right: 1rem; - .frDocs-Content__header { + .frDocs-Content__header, h1 { margin: 12px 0; margin-top: 2rem; font-size: 2.2rem; } - .frDocs-Content__description { + .frDocs-Content__description, p { margin-bottom: 1.5rem; font-size: 1rem; font-weight: 300; @@ -108,6 +110,35 @@ $fd-fonts-path: '../../node_modules/fiori-fundamentals/dist/fonts/'; transition: background-color .25s; } + .frDocs-markdown { + + ol, ul { + margin-left: 12px; + } + + pre { + margin: 25px 0px; + background-color: #fff !important; + white-space: pre-wrap; + white-space: -moz-pre-wrap; + white-space: -pre-wrap; + white-space: -o-pre-wrap; + word-wrap: break-word; + display: flex; + padding: 1rem; + font-size: 13px; + line-height: 1.42857143; + color: #333; + word-break: break-all; + border: 1px solid #ccc; + border-radius: 4px; + + code { + display: block; + } + } + } + .frDocs-Content__separator { display: block; margin: 2rem 0; diff --git a/src/_playground/Routes.js b/src/_playground/Routes.js index 9daa7d47c..88631949c 100644 --- a/src/_playground/Routes.js +++ b/src/_playground/Routes.js @@ -9,6 +9,7 @@ import { ContextualMenuComponent } from '../ContextualMenu/ContextualMenu.Compon import { DatePickerComponent } from '../DatePicker/DatePicker.Component'; import { DropdownComponent } from '../Dropdown/Dropdown.Component'; import { FormsComponent } from '../Forms/Forms.Component'; +import { Home } from './documentation/Home/Home'; import { IconComponent } from '../Icon/Icon.Component'; import { IdentifierComponent } from '../Identifier/Identifier.Component'; import { ImageComponent } from '../Image/Image.Component'; @@ -22,9 +23,11 @@ import { MultiInputComponent } from '../MultiInput/MultiInput.Component'; import { PaginationComponent } from '../Pagination/Pagination.Component'; import { PanelComponent } from '../Panel/Panel.Component'; import { PopoverComponent } from '../Popover/Popover.Component'; +import React from 'react'; import { SearchInputComponent } from '../SearchInput/SearchInput.Component'; import { ShellbarComponent } from '../Shellbar/Shellbar.Component'; import { SideNavigationComponent } from '../SideNavigation/SideNavigation.Component'; +import sortBy from 'sort-by'; import { TableComponent } from '../Table/Table.Component'; import { TabsComponent } from '../Tabs/Tabs.Component'; import { TileComponent } from '../Tile/Tile.Component'; @@ -34,158 +37,279 @@ import { ToggleComponent } from '../Toggle/Toggle.Component'; import { TokenComponent } from '../Token/Token.Component'; import { TreeComponent } from '../Tree/Tree.Component'; import { BrowserRouter, NavLink, Redirect, Route, Switch } from 'react-router-dom'; -import React, { Component } from 'react'; -export default class Routes extends Component { - constructor(props) { - super(props); - this.state = { - routes: [ - { - url: '/actionBar', - name: 'Action Bar', - component: ActionBarComponent - }, - { url: '/alert', name: 'Alert', component: AlertComponent }, - { - url: '/breadcrumb', - name: 'Breadcrumb', - component: BreadcrumbComponent - }, - { url: '/button', name: 'Button', component: ButtonComponent }, - { url: '/calendar', name: 'Calendar', component: CalendarComponent }, - { - url: '/comboboxInput', - name: 'Combobox Input', - component: ComboboxInputComponent - }, - { - url: '/contextualMenu', - name: 'Contextual Menu', - component: ContextualMenuComponent - }, - { - url: '/datepicker', - name: 'Date Picker', - component: DatePickerComponent - }, - { url: '/dropdown', name: 'Dropdown', component: DropdownComponent }, - { url: '/forms', name: 'Forms', component: FormsComponent }, - { url: '/icon', name: 'Icon', component: IconComponent }, - { - url: '/identifier', - name: 'Identifier', - component: IdentifierComponent - }, - { url: '/image', name: 'Image', component: ImageComponent }, - { - url: '/inlineHelp', - name: 'Inline Help', - component: InlineHelpComponent - }, - { - url: '/inputGroup', - name: 'Input Group', - component: InputGroupComponent - }, - { - url: '/listGroup', - name: 'List Group', - component: ListGroupComponent - }, - { - url: '/localizationEditor', - name: 'Localization Editor', - component: LocalizationEditorComponent - }, - { url: '/menu', name: 'Menu', component: MenuComponent }, - { url: '/modal', name: 'Modal', component: ModalComponent }, - { - url: '/multiInput', - name: 'Multi Input', - component: MultiInputComponent - }, - { - url: '/pagination', - name: 'Pagination', - component: PaginationComponent - }, - { url: '/panel', name: 'Panel', component: PanelComponent }, - { url: '/popover', name: 'Popover', component: PopoverComponent }, - { - url: '/searchInput', - name: 'Search Input', - component: SearchInputComponent - }, - { - url: '/shellbar', - name: 'Shellbar', - component: ShellbarComponent - }, - { - url: '/sideNavigation', - name: 'Side Navigation', - component: SideNavigationComponent - }, - { - url: '/statusIndicators', - name: 'Status Indicators', - component: BadgeComponent - }, - { url: '/table', name: 'Table', component: TableComponent }, - { url: '/tabs', name: 'Tabs', component: TabsComponent }, - { url: '/tile', name: 'Tile', component: TileComponent }, - { url: '/time', name: 'Time', component: TimeComponent }, - { - url: '/timepicker', - name: 'TimePicker', - component: TimePickerComponent - }, - { url: '/toggle', name: 'Toggle', component: ToggleComponent }, - { url: '/token', name: 'Token', component: TokenComponent }, - { url: '/tree', name: 'Tree', component: TreeComponent } - ] - }; +const routes = [ + { + url: '/home', + name: 'Home', + component: Home, + section: 'Getting Started' + }, + { + url: '/actionBar', + name: 'Action Bar', + component: ActionBarComponent, + section: 'Components' + }, + { + url: '/alert', + name: 'Alert', + component: AlertComponent, + section: 'Components' + }, + { + url: '/breadcrumb', + name: 'Breadcrumb', + component: BreadcrumbComponent, + section: 'Components' + }, + { + url: '/button', + name: 'Button', + component: ButtonComponent, + section: 'Components' + }, + { + url: '/calendar', + name: 'Calendar', + component: CalendarComponent, + section: 'Components' + }, + { + url: '/comboboxInput', + name: 'Combobox Input', + component: ComboboxInputComponent, + section: 'Components' + }, + { + url: '/contextualMenu', + name: 'Contextual Menu', + component: ContextualMenuComponent, + section: 'Components' + }, + { + url: '/datepicker', + name: 'Date Picker', + component: DatePickerComponent, + section: 'Components' + }, + { + url: '/dropdown', + name: 'Dropdown', + component: DropdownComponent, + section: 'Components' + }, + { + url: '/forms', + name: 'Forms', + component: FormsComponent, + section: 'Components' + }, + { + url: '/icon', + name: 'Icon', + component: IconComponent, + section: 'Components' + }, + { + url: '/identifier', + name: 'Identifier', + component: IdentifierComponent, + section: 'Components' + }, + { + url: '/image', + name: 'Image', + component: ImageComponent, + section: 'Components' + }, + { + url: '/inlineHelp', + name: 'Inline Help', + component: InlineHelpComponent, + section: 'Components' + }, + { + url: '/inputGroup', + name: 'Input Group', + component: InputGroupComponent, + section: 'Components' + }, + { + url: '/listGroup', + name: 'List Group', + component: ListGroupComponent, + section: 'Components' + }, + { + url: '/localizationEditor', + name: 'Localization Editor', + component: LocalizationEditorComponent, + section: 'Components' + }, + { + url: '/menu', + name: 'Menu', + component: MenuComponent, + section: 'Components' + }, + { + url: '/modal', + name: 'Modal', + component: ModalComponent, + section: 'Components' + }, + { + url: '/multiInput', + name: 'Multi Input', + component: MultiInputComponent, + section: 'Components' + }, + { + url: '/pagination', + name: 'Pagination', + component: PaginationComponent, + section: 'Components' + }, + { + url: '/panel', + name: 'Panel', + component: PanelComponent, + section: 'Components' + }, + { + url: '/popover', + name: 'Popover', + component: + PopoverComponent, + section: 'Components' + }, + { + url: '/searchInput', + name: 'Search Input', + component: SearchInputComponent, + section: 'Components' + }, + { + url: '/shellbar', + name: 'Shellbar', + component: ShellbarComponent, + section: 'Components' + }, + { + url: '/sideNavigation', + name: 'Side Navigation', + component: SideNavigationComponent, + section: 'Components' + }, + { + url: '/statusIndicators', + name: 'Status Indicators', + component: BadgeComponent, + section: 'Components' + }, + { + url: '/table', + name: 'Table', + component: TableComponent, + section: 'Components' + }, + { + url: '/tabs', + name: 'Tabs', + component: TabsComponent, + section: 'Components' + }, + { + url: '/tile', + name: 'Tile', + component: TileComponent, + section: 'Components' + }, + { + url: '/time', + name: 'Time', + component: TimeComponent, + section: 'Components' + }, + { + url: '/timepicker', + name: 'TimePicker', + component: TimePickerComponent, + section: 'Components' + }, + { + url: '/toggle', + name: 'Toggle', + component: ToggleComponent, + section: 'Components' + }, + { + url: '/token', + name: 'Token', + component: TokenComponent, + section: 'Components' + }, + { + url: '/tree', + name: 'Tree', + component: TreeComponent, + section: 'Components' } +]; - render() { - return ( - -
-
-

FUNDAMENTAL REACT

-
    -
  • Components
    • - {this.state.routes.map(route => { - return ( +export const Routes = () => { + let sectionName = '', + navItems = []; + + routes.sort(sortBy('-section', 'name')).map(route => { + if (route.section !== sectionName) { + sectionName = route.section; + navItems.push( +
      +
    • {route.section}
      • + {routes.sort(sortBy('-section', 'name')).map(routeItem => { + if (routeItem.section === sectionName) { + return ( +
    • - {route.name} + key={routeItem.url} + to={{ pathname: routeItem.url }}> + {routeItem.name} - ); - })} -
    -
-
- - {this.state.routes.map(route => { - return ( - - ); - })} - - -
+ + ); + } + })} + + ); + } + }); + return ( + +
+
+

FUNDAMENTAL REACT

+
- - ); - } -} +
+ + {routes.map(route => { + return ( + + ); + })} + + +
+
+ + ); +}; diff --git a/src/_playground/documentation/Home/Home.js b/src/_playground/documentation/Home/Home.js new file mode 100644 index 000000000..863eadf5a --- /dev/null +++ b/src/_playground/documentation/Home/Home.js @@ -0,0 +1,13 @@ +import { MarkdownImporter } from '../Markdown/MarkdownImporter'; +import React from 'react'; +import Readme from './README.md'; + +export const Home = () => { + + return ( + +

Fundamental React

+ + + ); +}; diff --git a/src/_playground/documentation/Markdown/MarkdownImporter.js b/src/_playground/documentation/Markdown/MarkdownImporter.js new file mode 100644 index 000000000..5837500c5 --- /dev/null +++ b/src/_playground/documentation/Markdown/MarkdownImporter.js @@ -0,0 +1,25 @@ +/* eslint-disable compat/compat */ +import PropTypes from 'prop-types'; +import React from 'react'; +import ReactMarkdown from 'react-markdown'; + +export class MarkdownImporter extends React.Component { + constructor(props) { + super(props); + this.state = { markdown: '' }; + } + + componentWillMount() { + // Get the contents from the Markdown file and put them in the React state, so we can reference it in render() below. + fetch(this.props.source).then(res => res.text()).then(text => this.setState({ markdown: text })); + } + + render() { + const { markdown } = this.state; + return (); + } +} + +MarkdownImporter.propTypes = { + source: PropTypes.string +}; From f5654db942f7271acb57bc475dff5acf0b83064a Mon Sep 17 00:00:00 2001 From: bullman Date: Thu, 31 Jan 2019 15:35:42 -0800 Subject: [PATCH 2/5] move title to readme --- README.md | 2 ++ src/_playground/documentation/Home/Home.js | 1 - 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 19c03f565..a8fc8e610 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,5 @@ +# Fundamental React + [![npm version](https://badge.fury.io/js/fundamental-react.svg)](//www.npmjs.com/package/fundamental-react) [![Build Status](https://travis-ci.org/SAP/fundamental-react.svg?branch=master)](https://travis-ci.org/SAP/fundamental-react) [![Coverage Status](https://coveralls.io/repos/github/SAP/fundamental-react/badge.svg?branch=master)](https://coveralls.io/github/SAP/fundamental-react?branch=master) diff --git a/src/_playground/documentation/Home/Home.js b/src/_playground/documentation/Home/Home.js index 863eadf5a..84eef32fd 100644 --- a/src/_playground/documentation/Home/Home.js +++ b/src/_playground/documentation/Home/Home.js @@ -6,7 +6,6 @@ export const Home = () => { return ( -

Fundamental React

 ); From 83987293bcd49c4c6560ba2003cd2c09c84f61d9 Mon Sep 17 00:00:00 2001 From: bullman Date: Thu, 31 Jan 2019 15:44:08 -0800 Subject: [PATCH 3/5] cleanup list hang a bit more --- src/_playground/App.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/_playground/App.scss b/src/_playground/App.scss index 33703ce2d..d831bdbb5 100644 --- a/src/_playground/App.scss +++ b/src/_playground/App.scss @@ -113,7 +113,7 @@ $fd-fonts-path: '../../node_modules/fiori-fundamentals/dist/fonts/'; .frDocs-markdown { ol, ul { - margin-left: 12px; + padding-left: 2rem; } pre { From def36bd0f17a977fc9ec30f43a629d4facd305a9 Mon Sep 17 00:00:00 2001 From: Greg Smith Date: Thu, 31 Jan 2019 20:40:41 -0600 Subject: [PATCH 4/5] Fixed left nav scrolling issue --- src/_playground/App.scss | 5 ++++- src/_playground/Routes.js | 6 ++++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/_playground/App.scss b/src/_playground/App.scss index d831bdbb5..aef809b90 100644 --- a/src/_playground/App.scss +++ b/src/_playground/App.scss @@ -31,11 +31,14 @@ $fd-fonts-path: '../../node_modules/fiori-fundamentals/dist/fonts/'; } .frDocs-Nav { - list-style: none; border-top: 2px solid #dbe7f3; height: 90%; overflow: auto; + .frDocs-Nav__list { + list-style: none; + } + .frDocs-Nav__headers { color: #424e5a; padding: 15px 20px; diff --git a/src/_playground/Routes.js b/src/_playground/Routes.js index 88631949c..c2d673a9f 100644 --- a/src/_playground/Routes.js +++ b/src/_playground/Routes.js @@ -266,7 +266,7 @@ export const Routes = () => { if (route.section !== sectionName) { sectionName = route.section; navItems.push( -
    +
    • {route.section}
      • {routes.sort(sortBy('-section', 'name')).map(routeItem => { if (routeItem.section === sectionName) { @@ -292,7 +292,9 @@ export const Routes = () => {

      FUNDAMENTAL REACT

      - +
      From fde00bcc06ec811528679a96fb11b7319d00da3e Mon Sep 17 00:00:00 2001 From: Greg Smith Date: Thu, 31 Jan 2019 21:27:10 -0600 Subject: [PATCH 5/5] Refactored the left nav to group and sort nav items --- package-lock.json | 67 +++++++++++++++++++++++++++++++++++++++ package.json | 1 + src/_playground/Routes.js | 67 +++++++++++++++++++++++---------------- 3 files changed, 107 insertions(+), 28 deletions(-) diff --git a/package-lock.json b/package-lock.json index 95c8cc003..667340bb7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7080,6 +7080,73 @@ "integrity": "sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA==", "dev": true }, + "group-array": { + "version": "0.3.3", + "resolved": "https://registry.npmjs.org/group-array/-/group-array-0.3.3.tgz", + "integrity": "sha1-u9nS9xjfS+M/D7kEMqrxtDYOSY8=", + "dev": true, + "requires": { + "arr-flatten": "^1.0.1", + "for-own": "^0.1.4", + "get-value": "^2.0.6", + "kind-of": "^3.1.0", + "split-string": "^1.0.1", + "union-value": "^0.2.3" + }, + "dependencies": { + "extend-shallow": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", + "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", + "dev": true, + "requires": { + "is-extendable": "^0.1.0" + } + }, + "kind-of": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", + "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", + "dev": true, + "requires": { + "is-buffer": "^1.1.5" + } + }, + "set-value": { + "version": "0.4.3", + "resolved": "https://registry.npmjs.org/set-value/-/set-value-0.4.3.tgz", + "integrity": "sha1-fbCPnT0i3H945Trzw79GZuzfzPE=", + "dev": true, + "requires": { + "extend-shallow": "^2.0.1", + "is-extendable": "^0.1.1", + "is-plain-object": "^2.0.1", + "to-object-path": "^0.3.0" + } + }, + "split-string": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/split-string/-/split-string-1.0.1.tgz", + "integrity": "sha1-vLqz9BUqzuOg1qskecDSh5w9s84=", + "dev": true, + "requires": { + "extend-shallow": "^2.0.1" + } + }, + "union-value": { + "version": "0.2.4", + "resolved": "https://registry.npmjs.org/union-value/-/union-value-0.2.4.tgz", + "integrity": "sha1-c3UVJ4ZnkFfns3qmdug0aPwCdPA=", + "dev": true, + "requires": { + "arr-union": "^3.1.0", + "get-value": "^2.0.6", + "is-extendable": "^0.1.1", + "set-value": "^0.4.3" + } + } + } + }, "growl": { "version": "1.10.5", "resolved": "https://registry.npmjs.org/growl/-/growl-1.10.5.tgz", diff --git a/package.json b/package.json index 80e11df03..8fae20a12 100644 --- a/package.json +++ b/package.json @@ -88,6 +88,7 @@ "fs-extra": "7.0.0", "gh-pages": "^2.0.1", "github-api": "^3.0.0", + "group-array": "^0.3.3", "html-webpack-plugin": "4.0.0-alpha.2", "identity-obj-proxy": "3.0.0", "jest": "23.6.0", diff --git a/src/_playground/Routes.js b/src/_playground/Routes.js index c2d673a9f..c0e974ce8 100644 --- a/src/_playground/Routes.js +++ b/src/_playground/Routes.js @@ -9,6 +9,7 @@ import { ContextualMenuComponent } from '../ContextualMenu/ContextualMenu.Compon import { DatePickerComponent } from '../DatePicker/DatePicker.Component'; import { DropdownComponent } from '../Dropdown/Dropdown.Component'; import { FormsComponent } from '../Forms/Forms.Component'; +import groupArray from 'group-array'; import { Home } from './documentation/Home/Home'; import { IconComponent } from '../Icon/Icon.Component'; import { IdentifierComponent } from '../Identifier/Identifier.Component'; @@ -38,12 +39,24 @@ import { TokenComponent } from '../Token/Token.Component'; import { TreeComponent } from '../Tree/Tree.Component'; import { BrowserRouter, NavLink, Redirect, Route, Switch } from 'react-router-dom'; +const sections = [ + { + name: 'Getting Started', + sortOrder: 1 + }, + { + name: 'Components', + sortOrder: 2 + } +]; + const routes = [ { url: '/home', name: 'Home', component: Home, - section: 'Getting Started' + section: 'Getting Started', + sortOrder: 1 // this one should always come first }, { url: '/actionBar', @@ -180,8 +193,7 @@ const routes = [ { url: '/popover', name: 'Popover', - component: - PopoverComponent, + component: PopoverComponent, section: 'Components' }, { @@ -259,34 +271,33 @@ const routes = [ ]; export const Routes = () => { - let sectionName = '', - navItems = []; + let sectionRoutes; + const groupedRoutes = groupArray(routes, 'section'); - routes.sort(sortBy('-section', 'name')).map(route => { - if (route.section !== sectionName) { - sectionName = route.section; - navItems.push( -
        -
      • {route.section}
        • - {routes.sort(sortBy('-section', 'name')).map(routeItem => { - if (routeItem.section === sectionName) { - return ( -
      • - - {routeItem.name} - -
        • - ); - } - })} -
      - ); + const navItems = sections.sort(sortBy('sortOrder', 'name')).map(section => { + if (!groupedRoutes[section.name]) { + return; } + + sectionRoutes = groupedRoutes[section.name].sort(sortBy('sortOrder', 'name')); + return ( +
        +
      • {section.name}
        • + {sectionRoutes.map(route => ( +
      • + + {route.name} + +
        • + ))} +
      + ); }); + return (