docs(props): put props on a single page, fix props links

CHANGELOG.md

@@ -39,6 +39,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### Documentation
 - Remove Usage tab @lucivpav ([#1948](https://github.com/stardust-ui/react/pull/1948))
+- Put props on a single page, fix props links @lucivpav ([#1892](https://github.com/stardust-ui/react/pull/1892))
 
 ### Documentation
 - Remove cancel button in a `Dialog` example with a close action @lucivpav ([#1949](https://github.com/stardust-ui/react/pull/1949))

docs/src/components/ComponentDoc/ComponentDoc.tsx

@@ -30,20 +30,19 @@ type ComponentDocProps = {
 type ComponentDocState = {
   activePath: string
   currentTabIndex: number
-  defaultPropComponent: string
 }
 
 class ComponentDoc extends React.Component<ComponentDocProps, ComponentDocState> {
   state = {
     activePath: '',
-    defaultPropComponent: '',
+    propComponent: '',
     currentTabIndex: 0,
   }
 
   tabRegex = new RegExp(/[^\/]*$/)
 
-  getTabIndexOrRedirectToDefault(tab: string) {
-    const lowercaseTabs = _.map(this.props.tabs, tab => tab.toLowerCase())
+  getTabIndexOrRedirectToDefault(tab: string, tabs) {
+    const lowercaseTabs = _.map(tabs, tab => tab.toLowerCase())
     const index = lowercaseTabs.indexOf(tab)
     if (index === -1) {
       const { history, location } = this.props
@@ -60,24 +59,22 @@ class ComponentDoc extends React.Component<ComponentDocProps, ComponentDocState>
   }
 
   componentWillMount() {
-    const { history, location } = this.props
+    const { history, location, tabs } = this.props
     const tab = location.pathname.match(this.tabRegex)[0]
-    const tabIndex = this.getTabIndexOrRedirectToDefault(tab)
+    const tabIndex = this.getTabIndexOrRedirectToDefault(tab, tabs)
     this.setState({ currentTabIndex: tabIndex })
 
     if (location.hash) {
       const activePath = getFormattedHash(location.hash)
       history.replace({ ...history.location, hash: activePath })
       this.setState({ activePath })
-      if (this.props.tabs[tabIndex] === 'Props') {
-        this.setState({ defaultPropComponent: activePath })
-      }
     }
   }
 
-  componentWillReceiveProps({ info, location }) {
+  componentWillReceiveProps({ info, location, tabs }) {
     const tab = location.pathname.match(this.tabRegex)[0]
-    this.setState({ currentTabIndex: this.getTabIndexOrRedirectToDefault(tab) })
+    const tabIndex = this.getTabIndexOrRedirectToDefault(tab, tabs)
+    this.setState({ currentTabIndex: tabIndex })
 
     if (info.displayName !== this.props.info.displayName) {
       this.setState({ activePath: undefined })
@@ -109,11 +106,6 @@ class ComponentDoc extends React.Component<ComponentDocProps, ComponentDocState>
     this.setState({ currentTabIndex: newIndex })
   }
 
-  onPropComponentSelected = (e, props) => {
-    const { history } = this.props
-    history.push({ ...history.location, hash: props.value })
-  }
-
   render() {
     const getA11ySelectionMessage = {
       onAdd: item => `${item} has been selected.`,
@@ -142,7 +134,7 @@ class ComponentDoc extends React.Component<ComponentDocProps, ComponentDocState>
     }
 
     const { info, tabs } = this.props
-    const { activePath, currentTabIndex, defaultPropComponent } = this.state
+    const { activePath, currentTabIndex } = this.state
 
     return (
       <div style={{ padding: '20px' }}>
@@ -197,12 +189,7 @@ class ComponentDoc extends React.Component<ComponentDocProps, ComponentDocState>
         {this.getCurrentTabTitle() === 'Accessibility' && <ComponentDocAccessibility info={info} />}
 
         {this.getCurrentTabTitle() === 'Props' && (
-          <ComponentProps
-            displayName={info.displayName}
-            props={info.props}
-            defaultComponentProp={defaultPropComponent}
-            onPropComponentSelected={this.onPropComponentSelected}
-          />
+          <ComponentProps displayName={info.displayName} props={info.props} />
         )}
 
         {this.getCurrentTabTitle() === 'Definition' && (

docs/src/components/ComponentDoc/ComponentProps/ComponentPropCard.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react'
+import ComponentTableProps from '../ComponentPropsTable'
+import { Divider, Segment } from '@stardust-ui/react/src'
+
+export const cardStyle: React.CSSProperties = {
+  boxShadow: '0 1px 2px rgba(0, 0, 0, 0.2)',
+}
+
+type ComponentPropCardProps = {
+  name: string
+  description: string
+}
+
+const ComponentPropCard: React.FC<ComponentPropCardProps> = ({ name, description }) => (
+  <Segment styles={cardStyle}>
+    <div>{description}</div>
+    <Divider />
+    <ComponentTableProps componentName={name} />
+  </Segment>
+)
+
+export default ComponentPropCard

docs/src/components/ComponentDoc/ComponentProps/ComponentProps.tsx

@@ -2,74 +2,56 @@ import * as _ from 'lodash'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
 
-import { getComponentGroup } from 'docs/src/utils'
-import ComponentTableProps from '../ComponentPropsTable'
-import ComponentPropsComponents from './ComponentPropsComponents'
-import ComponentPropsDescription from './ComponentPropsDescription'
-import { ICSSInJSStyle, Flex } from '@stardust-ui/react'
-
-const propsContainerStyle: ICSSInJSStyle = { overflowX: 'auto' }
+import { getComponentGroup, scrollToAnchor } from 'docs/src/utils'
+import ComponentPropsOutline from './ComponentPropsOutline'
+import { Flex, Header } from '@stardust-ui/react'
+import ComponentPropCard from './ComponentPropCard'
 
 export default class ComponentProps extends React.Component<any, any> {
   static propTypes = {
     displayName: PropTypes.string.isRequired,
     props: PropTypes.arrayOf(PropTypes.object).isRequired,
-    defaultComponentProp: PropTypes.string,
-    onPropComponentSelected: PropTypes.func,
   }
 
   componentWillMount() {
-    const { displayName, defaultComponentProp } = this.props
+    const { displayName } = this.props
 
     this.setState({
       componentGroup: getComponentGroup(displayName),
-      activeDisplayName: defaultComponentProp || displayName,
     })
+    scrollToAnchor()
   }
 
-  componentWillReceiveProps({ displayName: next }) {
-    const current = this.props.displayName
-
-    if (current !== next) {
-      this.setState({
-        activeDisplayName: null,
-        componentGroup: getComponentGroup(next),
-      })
-    }
-  }
+  componentWillReceiveProps(nextProps) {
+    const { displayName } = nextProps
 
-  handleSelectedChange = (e, props) => {
-    this.setState({ activeDisplayName: props.value })
-    _.invoke(this.props, 'onPropComponentSelected', e, props)
+    this.setState({
+      componentGroup: getComponentGroup(displayName),
+    })
+    scrollToAnchor()
   }
 
   render() {
-    const { displayName } = this.props
-    const { activeDisplayName, componentGroup } = this.state
+    const { componentGroup } = this.state
     const displayNames = _.keys(componentGroup)
-    const { docblock } = (componentGroup[activeDisplayName] || {}) as any
-    const description = _.get(docblock, 'description', [])
 
     return (
       <Flex column gap="gap.small">
         <Flex.Item styles={{ display: 'block', verticalAlign: 'middle' }}>
           <Flex gap="gap.medium">
-            <ComponentPropsComponents
-              activeDisplayName={activeDisplayName}
-              displayNames={displayNames}
-              onSelectedChange={this.handleSelectedChange}
-              parentDisplayName={displayName}
-            />
+            <ComponentPropsOutline displayNames={displayNames} />
           </Flex>
         </Flex.Item>
-        {activeDisplayName && (
-          <Flex.Item style={propsContainerStyle}>
+        {_.map(displayNames, displayName => {
+          const description = _.get(componentGroup, [displayName, 'docblock', 'description'], '')
+          const showHeader = displayNames.length > 1
+          return (
             <>
-              <ComponentPropsDescription description={description} />
-              <ComponentTableProps componentName={activeDisplayName} />
+              {showHeader && <Header content={displayName} id={_.kebabCase(displayName)} as="h2" />}
+              <ComponentPropCard name={displayName} description={description} />
             </>
-          </Flex.Item>
-        )}
+          )
+        })}
       </Flex>
     )
   }

docs/src/components/ComponentDoc/ComponentProps/ComponentPropsOutline.tsx

@@ -0,0 +1,22 @@
+import * as _ from 'lodash'
+import * as React from 'react'
+import { link } from 'docs/src/utils/helpers'
+
+const ComponentPropsOutline: any = (props: ComponentPropsOutlineProps) => {
+  const { displayNames } = props
+  if (displayNames.length < 2) return null
+
+  return (
+    <ul>
+      {_.map(displayNames, item => (
+        <li key={item}>{link(item, `#${_.kebabCase(item)}`)}</li>
+      ))}
+    </ul>
+  )
+}
+
+export interface ComponentPropsOutlineProps {
+  displayNames: string[]
+}
+
+export default ComponentPropsOutline

docs/src/components/ComponentDoc/ComponentPropsTable/ComponentPropsRow.tsx

@@ -5,6 +5,7 @@ import { Link } from 'react-router-dom'
 import { ComponentProp, ComponentPropType } from 'docs/src/types'
 import componentInfoContext from 'docs/src/utils/componentInfoContext'
 import ComponentPropName from '../ComponentProp/ComponentPropName'
+import { getComponentGroup } from 'docs/src/utils'
 
 const InlineMarkdown = React.lazy(() => import('../InlineMarkdown'))
 
@@ -23,11 +24,14 @@ const ComponentPropValue: React.FunctionComponent<ComponentPropType> = props =>
     const kindParam = parameters[1] && parameters[1].name !== 'never'
     const kindIsVisible = name === 'ShorthandCollection' && kindParam
 
+    const showHash = parentInfo.parentDisplayName || _.size(getComponentGroup(componentName)) > 1
+    const propsSection = showHash ? `#${_.kebabCase(componentName)}` : ''
+
     return (
       <span>
         {name}
         {`<`}
-        <Link to={`/components/${linkName}`}>{parameters[0].name}</Link>
+        <Link to={`/components/${linkName}/props${propsSection}`}>{parameters[0].name}</Link>
         {kindIsVisible && <span>, {parameters[1].name}</span>}
         {`>`}
       </span>

docs/src/components/ComponentDoc/ComponentPropsTable/ComponentPropsTable.tsx

@@ -7,6 +7,7 @@ import ComponentPropsRow from './ComponentPropsRow'
 const tableStyles: React.CSSProperties = {
   textAlign: 'left',
   borderCollapse: 'collapse',
+  width: '100%',
 }
 
 type ComponentPropsTable = {

docs/src/components/DocsLayout.tsx

@@ -59,7 +59,10 @@ class DocsLayout extends React.Component<any, any> {
     // Anchor links has issues with <base>
     // https://stackoverflow.com/questions/8108836/make-anchor-links-refer-to-the-current-page-when-using-base
     document.querySelectorAll('a.anchor-link').forEach(link => {
-      link.setAttribute('href', `${document.location.href}${link.getAttribute('href')}`)
+      const value = `${document.location.origin}${document.location.pathname}${link.getAttribute(
+        'href',
+      )}`
+      link.setAttribute('href', value)
     })
   }