feat(ComponentDoc): add virtual whitespace for sidebar (Semantic-Org#…

…2492) * fix(CompoentSidebar): fix propType warnings * feat(DocsRoot): render PageNotFound when not found * feat(ComponentDoc): add virtual whitespace for sidebar
Brantron · Mar 14, 2018 · c418c20 · c418c20
1 parent ed2386b
commit c418c20
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 7 deletions.
diff --git a/docs/app/Components/ComponentDoc/ComponentDoc.js b/docs/app/Components/ComponentDoc/ComponentDoc.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import DocumentTitle from 'react-document-title'
 import { withRouter } from 'react-router'
-import { Grid } from 'semantic-ui-react'
+import { Grid, Icon } from 'semantic-ui-react'
 
 import withDocInfo from 'docs/app/HOC/withDocInfo'
 import { scrollToAnchor } from 'docs/app/utils'
@@ -14,8 +14,12 @@ import ComponentExamples from './ComponentExamples'
 import ComponentProps from './ComponentProps'
 import ComponentSidebar from './ComponentSidebar'
 
-const gridStyle = { paddingBottom: '10em' }
 const topRowStyle = { margin: '1em' }
+const exampleEndStyle = {
+  textAlign: 'center',
+  opacity: 0.5,
+  paddingTop: '50vh',
+}
 
 class ComponentDoc extends Component {
   static childContextTypes = {
@@ -76,7 +80,7 @@ class ComponentDoc extends Component {
 
     return (
       <DocumentTitle title={`${componentName} | Semantic UI React`}>
-        <Grid style={gridStyle}>
+        <Grid>
           <Grid.Row columns='equal' style={topRowStyle}>
             <Grid.Column>
               <ComponentDocHeader componentName={componentName} description={description} />
@@ -97,6 +101,9 @@ class ComponentDoc extends Component {
               <div ref={this.handleExamplesRef}>
                 <ComponentExamples componentName={componentName} />
               </div>
+              <div style={exampleEndStyle}>
+                This is the bottom <Icon name='pointing down' />
+              </div>
             </Grid.Column>
             <Grid.Column computer={5} largeScreen={4} widescreen={4}>
               <ComponentSidebar

diff --git a/docs/app/Components/ComponentDoc/ComponentSidebar/ComponentSidebar.js b/docs/app/Components/ComponentDoc/ComponentSidebar/ComponentSidebar.js
@@ -18,7 +18,7 @@ class ComponentSidebar extends Component {
   static propTypes = {
     activePath: PropTypes.string,
     componentName: PropTypes.string,
-    examplesRef: PropTypes.func,
+    examplesRef: PropTypes.object,
     onItemClick: PropTypes.func,
   }
 

diff --git a/docs/app/Components/ComponentDoc/ComponentSidebar/ComponentSidebarSection.js b/docs/app/Components/ComponentDoc/ComponentSidebar/ComponentSidebarSection.js
@@ -9,7 +9,10 @@ import ComponentSidebarItem from './ComponentSidebarItem'
 class ComponentSidebarSection extends Component {
   static propTypes = {
     activePath: PropTypes.string,
-    examples: PropTypes.object,
+    examples: PropTypes.arrayOf(PropTypes.shape({
+      title: PropTypes.string,
+      path: PropTypes.string,
+    })),
     name: PropTypes.string,
     onItemClick: PropTypes.func,
     onTitleClick: PropTypes.func,
@@ -19,7 +22,7 @@ class ComponentSidebarSection extends Component {
 
   componentWillReceiveProps(nextProps) {
     const { activePath, examples } = nextProps
-    const isActiveByProps = _.find(examples, { path: activePath })
+    const isActiveByProps = !!_.find(examples, { path: activePath })
 
     const didCloseByProps = this.state.isActiveByProps && !isActiveByProps
 

diff --git a/docs/app/Components/DocsRoot.js b/docs/app/Components/DocsRoot.js
@@ -5,13 +5,15 @@ import React from 'react'
 import { META } from 'src/lib'
 import * as semanticUIReact from 'src'
 import ComponentDoc from '../Components/ComponentDoc'
+import PageNotFound from '../Views/PageNotFound'
 
 const DocsRoot = (props) => {
   const { name } = props.match.params
   const componentName = _.startCase(name).replace(/ /g, '')
   const component = semanticUIReact[componentName]
 
-  if (!component || !component._meta || !META.isParent(component)) return null
+  if (!component || !component._meta || !META.isParent(component)) return <PageNotFound />
+
   return (
     <ComponentDoc
       name={component._meta.name}