fix(docs): handle ComponentExample hash names

docs/app/Components/ComponentDoc/ComponentDoc.js

@@ -7,7 +7,7 @@ import { Grid, Icon } from 'semantic-ui-react'
 import withDocInfo from 'docs/app/HOC/withDocInfo'
 import {
   scrollToAnchor,
-  createComponentHash,
+  examplePathToHash,
   getHashString,
   getNewHash,
   isOldHash,
@@ -84,13 +84,13 @@ class ComponentDoc extends Component {
   }
 
   handleExamplePassed = (e, { examplePath }) =>
-    this.setState({ activePath: createComponentHash(examplePath) })
+    this.setState({ activePath: examplePathToHash(examplePath) })
 
   handleExamplesRef = examplesRef => this.setState({ examplesRef })
 
   handleSidebarItemClick = (e, { path }) => {
     const { history } = this.props
-    const aPath = createComponentHash(path)
+    const aPath = examplePathToHash(path)
 
     history.replace(`${location.pathname}#${aPath}`)
     // set active hash path

docs/app/Components/ComponentDoc/ComponentExample/ComponentExample.js

@@ -7,7 +7,13 @@ import { renderToStaticMarkup } from 'react-dom/server'
 import { html } from 'js-beautify'
 import copyToClipboard from 'copy-to-clipboard'
 
-import { exampleContext, repoURL, scrollToAnchor, createComponentHash } from 'docs/app/utils'
+import {
+  exampleContext,
+  repoURL,
+  scrollToAnchor,
+  examplePathToHash,
+  getHashString,
+} from 'docs/app/utils'
 import { Divider, Grid, Menu, Visibility } from 'src'
 import Editor from 'docs/app/Components/Editor/Editor'
 import ComponentControls from '../ComponentControls'
@@ -70,7 +76,7 @@ class ComponentExample extends PureComponent {
     const { examplePath } = this.props
     const sourceCode = this.getOriginalSourceCode()
 
-    this.anchorName = createComponentHash(examplePath)
+    this.anchorName = examplePathToHash(examplePath)
 
     const exampleElement = this.renderOriginalExample()
     const markup = renderToStaticMarkup(exampleElement)
@@ -91,7 +97,7 @@ class ComponentExample extends PureComponent {
     return showCode || showHTML
   }
 
-  isActiveHash = () => this.anchorName === this.props.location.hash.replace('#', '')
+  isActiveHash = () => this.anchorName === getHashString(this.props.location.hash)
 
   updateHash = () => {
     if (this.isActiveState()) this.setHashAndScroll()

docs/app/Components/ComponentDoc/ComponentSidebar/ComponentSidebarSection.js

@@ -2,7 +2,7 @@ import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import { Accordion, Icon, Menu } from 'semantic-ui-react'
-import { createComponentHash } from 'docs/app/utils'
+import { examplePathToHash } from 'docs/app/utils'
 import { pure } from 'docs/app/HOC'
 import ComponentSidebarItem from './ComponentSidebarItem'
 
@@ -43,9 +43,8 @@ class ComponentSidebarSection extends Component {
     this.setState(prevState => ({ isActiveByUser: !prevState.isActiveByUser }))
 
   isActiveAccordion = (props = this.props) =>
-    (props.examples || []).findIndex(
-      item => createComponentHash(item.path) === props.activePath,
-    ) !== -1
+    (props.examples || []).findIndex(item => examplePathToHash(item.path) === props.activePath) !==
+    -1
 
   render() {
     const { activePath, examples, name } = this.props
@@ -62,7 +61,7 @@ class ComponentSidebarSection extends Component {
         <Accordion.Content as={Menu.Menu} active={active}>
           {_.map(examples, ({ title, path }) => (
             <ComponentSidebarItem
-              active={activePath === createComponentHash(path)}
+              active={activePath === examplePathToHash(path)}
               key={path}
               onClick={this.handleItemClick}
               path={path}

docs/app/utils/examplePathToHash.js

@@ -0,0 +1,25 @@
+import _ from 'lodash/fp'
+
+/**
+ * Creates a short hash path from an example filename.
+ *
+ * Typical Hash structure   ${pathname}-${section}-${exampleName}
+ * shorten to new structure ${section} -          -${exampleName without "component-example"}
+ * @param {string} examplePath
+ */
+const examplePathToHash = (examplePath) => {
+  const hashParts = examplePath.split('/')
+
+  if (!hashParts.length) return examplePath
+
+  // eslint-disable-next-line no-unused-vars
+  const [type, componentName, section, exampleName] = hashParts
+
+  // ButtonExampleActive => Active
+  // PopupExample => Popup
+  const shortExampleName = exampleName.replace(`${componentName}Example`, '') || componentName
+
+  return _.kebabCase(`${section}-${shortExampleName}`)
+}
+
+export default examplePathToHash

docs/app/utils/getHashString.js

@@ -1,9 +1,7 @@
-import _ from 'lodash'
-
 /**
  * Retrieve hash string from location path
  * @param {string} hash
  */
-const getHashString = hash => _.last((hash || '').split('#'))
+const getHashString = hash => (hash || '').replace('#', '')
 
 export default getHashString

docs/app/utils/getNewHash.js

@@ -1,22 +1,23 @@
 import _ from 'lodash/fp'
 
 import exampleContext from './exampleContext'
-import createComponentHash from './createComponentHash'
+import examplePathToHash from './examplePathToHash'
+import isOldHash from './isOldHash'
 
 /**
  * get new hash using old
  * @param {string} hash
  */
 const getNewHash = (hash) => {
-  const isOldHash = true
-  if (isOldHash) {
+  if (isOldHash(hash)) {
     const fileName = _.startCase(hash).replace(/\s/g, '')
     const str = exampleContext.keys().find(item => item.indexOf(fileName) !== -1)
     // found old to new hash match
     if (str) {
-      return createComponentHash(str.replace(/((\.)(?:[\w]+))|(^\.\/)/g, ''))
+      return examplePathToHash(str.replace(/((\.)(?:[\w]+))|(^\.\/)/g, ''))
     }
   }
+
   return hash
 }
 

docs/app/utils/index.js

@@ -5,5 +5,5 @@ export getHashString from './getHashString'
 export getSeeItems from './getSeeItems'
 export isOldHash from './isOldHash'
 export scrollToAnchor from './scrollToAnchor'
-export createComponentHash from './createComponentHash'
+export examplePathToHash from './examplePathToHash'
 export parentComponents from './parentComponents'