Skip to content

Commit

Permalink
docs: Site layout, Page templates, TOC (#452)
Browse files Browse the repository at this point in the history 
* Added tocbot and react-element-to-jsx-string packages

* Added page templates and table of contents

* Externalized list of icons

* Updated component pages to use ComponentPage template

* Changed the page framework to use a top menu bar

* Removed background color on search div

* Added responsive styles for TOC

* Flatten the documentation CSS classes

* Added styling to keep anchors in view with fixed header

* Updates to support responsiveness and other styling

* Bug fixes after merge

* PR feedback

* Remove H1 from markdown pages if title is used
  • Loading branch information
@greg-a-smith
greg-a-smith authored Mar 4, 2019
1 parent 04ac874 commit c142ee8
Show file tree
Hide file tree
Showing 58 changed files with 2,986 additions and 9,201 deletions.
35 changes: 35 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,7 @@
"react": "^16.6.3",
"react-dev-utils": "^6.1.1",
"react-dom": "^16.6.3",
"react-element-to-jsx-string": "^14.0.2",
"react-markdown": "^4.0.6",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
Expand All @@ -126,6 +127,7 @@
"standard-version": "^4.4.0",
"style-loader": "0.23.0",
"terser-webpack-plugin": "1.1.0",
"tocbot": "^4.5.0",
"url-loader": "1.1.1",
"webpack": "4.19.1",
"webpack-dev-server": "^3.1.11",
Expand Down
2 changes: 1 addition & 1 deletion public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React Fundamental</title>
<title>Fundamental React</title>
</head>
<body>
<noscript>
Expand Down
153 changes: 25 additions & 128 deletions src/ActionBar/ActionBar.Component.js
View file
Original file line number Diff line number Diff line change
@@ -1,110 +1,21 @@
import path from 'path';
import React from 'react';
import { ActionBar, Button, Menu, Popover } from '../';
import { Description, DocsText, DocsTile, Header, Import, Properties, Separator } from '../_playground';
import { ComponentPage, Example } from '../_playground';

export const ActionBarComponent = () => {
const actionBarBackBtnCode = `<ActionBar>
<ActionBar.Back onClick={clickBackBtn}/>
<ActionBar.Header title={'Page Title'} description={'Action Bar Description'} />
<ActionBar.Actions>
<Button>Button</Button>
<Button option="emphasized">Button</Button>
</ActionBar.Actions>
</ActionBar>
const clickBackBtn = () => {
alert("You clicked me!");
}`;

const actionBarNoBackBtnCode = `<ActionBar>
<ActionBar.Header title={'Page Title'} description={'Action Bar Description'} />
<ActionBar.Actions>
<Button>Button</Button>
<Button option="emphasized">Button</Button>
</ActionBar.Actions>
</ActionBar>`;

const actionBarContextualCode = `<ActionBar>
<ActionBar.Header title={'Page Title'} description={'Action Bar Description'} />
<ActionBar.Actions>
<Popover
control={<Button option="light" glyph="vertical-grip" />}
body={
<Menu>
<Menu.List>
<Menu.Item url="/">Option 1</Menu.Item>
<Menu.Item url="/">Option 2</Menu.Item>
<Menu.Item url="/">Option 3</Menu.Item>
<Menu.Item url="/">Option 4</Menu.Item>
</Menu.List>
</Menu>
}
/>
</ActionBar.Actions>
</ActionBar>`;

const mobileActionBarCode = `<ActionBar mobile={true}>
<ActionBar.Back />
<ActionBar.Header title={'Action Bar with description and back button'} />
<ActionBar.Actions>
<Popover
control={<Button option="light" glyph="vertical-grip" />}
body={
<Menu>
<Menu.List>
<Menu.Item url="/">Option 1</Menu.Item>
<Menu.Item url="/">Option 2</Menu.Item>
<Menu.Item url="/">Option 3</Menu.Item>
<Menu.Item url="/">Option 4</Menu.Item>
</Menu.List>
</Menu>
}
/>
</ActionBar.Actions>
</ActionBar>`;

const mobileCustomWidthActionBarCode = `<ActionBar mobile={true} width="768px">
<ActionBar.Back />
<ActionBar.Header title={'Action Bar with description and back button'} />
<ActionBar.Actions>
<Popover
control={<Button type="secondary" glyph="vertical-grip" />}
body={
<Menu>
<Menu.List>
<Menu.Item url="/">Option 1</Menu.Item>
<Menu.Item url="/">Option 2</Menu.Item>
<Menu.Item url="/">Option 3</Menu.Item>
<Menu.Item url="/">Option 4</Menu.Item>
</Menu.List>
</Menu>
}
/>
</ActionBar.Actions>
</ActionBar>`;

const clickBackBtn = () => {
alert('You clicked me!');
};

return (
<div>
<Header>Action Bar</Header>
<Description>
The **Action Bar** is located at the top of the page and is used for page title and main actions for the
page.
</Description>
<Import sourceModulePath={path.join(__dirname, './ActionBar')} />

<Separator />
<ComponentPage
description='The **Action Bar** is located at the top of the page and is used for page title and main actions for the page.'
sourceModulePath={path.join(__dirname, './ActionBar')}
title='Action Bar'>

<Properties sourceModulePath={path.join(__dirname, './ActionBar')} />

<Separator />

<h2>Action bar with back button, description and action buttons.</h2>
<DocsTile>
<Example
title='Action bar with back button, description and action buttons'>
<ActionBar>
<ActionBar.Back onClick={clickBackBtn} />
<ActionBar.Header description={'Action Bar Description'} title={'Page Title'} />
Expand All @@ -113,32 +24,24 @@ const clickBackBtn = () => {
<Button option='emphasized'>Button</Button>
</ActionBar.Actions>
</ActionBar>
</DocsTile>
<DocsText>{actionBarBackBtnCode}</DocsText>
</Example>

<Separator />

<h2>Action bar with no Back button</h2>
<DocsTile>
<Example
title='Action bar with no Back button'>
<ActionBar>
<ActionBar.Header description={'Action Bar Description'} title={'Page Title'} />
<ActionBar.Actions>
<Button>Button</Button>
<Button option='emphasized'>Button</Button>
</ActionBar.Actions>
</ActionBar>
</DocsTile>
<DocsText>{actionBarNoBackBtnCode}</DocsText>

<Separator />
</Example>

<h2>Several Main Actions in a Contextual Menu</h2>
<Description>
When there are several main actions for a page, consider displaying them under a contextual menu. This
allows the user to look in the same position they are used to but avoids cluttering the action bar with
more than 3-4 actions. This also works well for a responsive/adaptive application.
</Description>
<DocsTile>
<Example
description={`When there are several main actions for a page, consider displaying them under a contextual menu. This
allows the user to look in the same position they are used to but avoids cluttering the action bar with
more than 3-4 actions. This also works well for a responsive/adaptive application.`}
title='Several Main Actions in a Contextual Menu'>
<ActionBar>
<ActionBar.Header description={'Action Bar Description'} title={'Page Title'} />
<ActionBar.Actions>
Expand All @@ -156,13 +59,10 @@ const clickBackBtn = () => {
control={<Button glyph='vertical-grip' option='light' />} />
</ActionBar.Actions>
</ActionBar>
</DocsTile>
<DocsText>{actionBarContextualCode}</DocsText>
</Example>

<Separator />

<h2>Action bar mobile view</h2>
<DocsTile>
<Example
title='Action bar mobile view'>
<ActionBar mobile>
<ActionBar.Back />
<ActionBar.Header
Expand All @@ -183,13 +83,10 @@ const clickBackBtn = () => {
control={<Button glyph='vertical-grip' option='light' />} />
</ActionBar.Actions>
</ActionBar>
</DocsTile>
<DocsText>{mobileActionBarCode}</DocsText>

<Separator />
</Example>

<h2>Action bar mobile view with custom width</h2>
<DocsTile>
<Example
title='Action bar mobile view with custom width'>
<ActionBar mobile width='768px'>
<ActionBar.Back />
<ActionBar.Header
Expand All @@ -210,8 +107,8 @@ const clickBackBtn = () => {
control={<Button glyph='vertical-grip' option='light' />} />
</ActionBar.Actions>
</ActionBar>
</DocsTile>
<DocsText>{mobileCustomWidthActionBarCode}</DocsText>
</div>
</Example>

</ComponentPage>
);
};
Loading

0 comments on commit c142ee8

Please sign in to comment.