docs: remove Usage tab (#1948)

* remove Usage tab

* update changelog

Author: lucivpav

CHANGELOG.md

@@ -32,6 +32,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add support for radio & checkbox groups to `Toolbar` component @layershifter ([#1920](https://github.com/stardust-ui/react/pull/1920))
 - Add support for `Popup` in `ToolbarMenu` @lucivpav ([#1927](https://github.com/stardust-ui/react/pull/1927))
 
+### Documentation
+- Remove Usage tab @lucivpav ([#1948](https://github.com/stardust-ui/react/pull/1948))
+
 <!--------------------------------[ v0.38.1 ]------------------------------- -->
 ## [v0.38.1](https://github.com/stardust-ui/react/tree/v0.38.1) (2019-09-13)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.38.0...v0.38.1)

docs/src/components/ComponentDoc/ComponentDoc.tsx

@@ -6,7 +6,6 @@ import { getFormattedHash } from 'docs/src/utils'
 import ComponentDocLinks from './ComponentDocLinks'
 import ComponentDocSee from './ComponentDocSee'
 import { ComponentExamples } from './ComponentExamples'
-import { ComponentUsage } from './ComponentUsage'
 import ComponentProps from './ComponentProps'
 import { ComponentDocAccessibility } from './ComponentDocAccessibility'
 import { ThemeContext } from 'docs/src/context/ThemeContext'
@@ -234,31 +233,6 @@ class ComponentDoc extends React.Component<ComponentDocProps, ComponentDocState>
           </>
         )}
 
-        {this.getCurrentTabTitle() === 'Usage' && (
-          <Grid columns="auto 300px" styles={{ justifyContent: 'normal', justifyItems: 'stretch' }}>
-            <div>
-              <ExampleContext.Provider
-                value={{
-                  activeAnchorName: activePath,
-                  onExamplePassed: this.handleExamplePassed,
-                }}
-              >
-                <ComponentUsage displayName={info.displayName} />
-              </ExampleContext.Provider>
-            </div>
-            {/* TODO: bring back the right floating menu
-            <Box styles={{ width: '25%', paddingLeft: '14px' }}>
-              <ComponentSidebar
-                activePath={activePath}
-                displayName={info.displayName}
-                examplesRef={examplesRef}
-                onItemClick={this.handleSidebarItemClick}
-              />
-            </Box>
-          */}
-          </Grid>
-        )}
-
         <div style={exampleEndStyle}>
           This is the bottom <Icon name="pointing down" />
         </div>

docs/src/components/ComponentDoc/ComponentUsage.tsx

@@ -5,7 +5,6 @@ import * as React from 'react'
 import ComponentDoc from '../components/ComponentDoc'
 import PageNotFound from '../views/PageNotFound'
 import componentInfoContext from '../utils/componentInfoContext'
-import { containsUsage } from './ComponentDoc/ComponentUsage'
 import { containsAccessibility } from './ComponentDoc/ComponentDocAccessibility'
 
 class DocsRoot extends React.Component<any, any> {
@@ -24,10 +23,6 @@ class DocsRoot extends React.Component<any, any> {
   getNonEmptyTabs(info) {
     const tabs = ['Definition']
 
-    if (containsUsage(info.displayName)) {
-      tabs.push('Usage')
-    }
-
     tabs.push('Props')
 
     if (containsAccessibility(info)) {

docs/src/components/DocsRoot.tsx

@@ -3,7 +3,7 @@ import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
 const Usage = () => (
-  <ExampleSection title="">
+  <ExampleSection title="Usage">
     <ComponentExample
       title="Custom panel title"
       description="Accordion panel's title can be customized."

docs/src/examples/components/Accordion/Usage/index.tsx

@@ -2,11 +2,13 @@ import * as React from 'react'
 
 import Rtl from './Rtl'
 import Types from './Types'
+import Usage from './Usage'
 
 const AccordionExamples = () => (
   <>
     <Types />
     <Rtl />
+    <Usage />
   </>
 )
 

docs/src/examples/components/Accordion/index.tsx

@@ -5,6 +5,7 @@ import Types from './Types'
 import Slots from './Slots'
 import State from './State'
 import Variations from './Variations'
+import Usage from './Usage'
 
 const AlertExamples = () => (
   <>
@@ -13,6 +14,7 @@ const AlertExamples = () => (
     <State />
     <Slots />
     <Rtl />
+    <Usage />
   </>
 )
 

docs/src/examples/components/Alert/index.tsx

@@ -3,7 +3,7 @@ import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
 const Usage = () => (
-  <ExampleSection title="">
+  <ExampleSection title="Usage">
     <ComponentExample
       title="Match Background Example"
       description="The status border for avatar should be set to match whatever background it is on."

docs/src/examples/components/Avatar/Usage/index.tsx

@@ -3,12 +3,14 @@ import * as React from 'react'
 import Rtl from './Rtl'
 import Types from './Types'
 import Variations from './Variations'
+import Usage from './Usage'
 
 const AvatarExamples = () => (
   <>
     <Types />
     <Variations />
     <Rtl />
+    <Usage />
   </>
 )
 

docs/src/examples/components/Avatar/index.tsx

@@ -4,7 +4,7 @@ import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
 const Usage = () => (
-  <ExampleSection title="">
+  <ExampleSection title="Usage">
     <ComponentExample
       title="Content and Icon"
       description="A button can have an icon in addition to content."