fix(docs): images, anchors, show html (#1471)

* feat(ComponentExample): menu on hover, add HTML button

* refactor(ComponentExamples): make method plural

* refactor(ExampleSection): remove anchor-js anchors

* fix(docs): add missing images

docs/app/Components/ComponentDoc/ComponentExample.js

@@ -15,17 +15,6 @@ const babelConfig = {
   presets: ['es2015', 'react', 'stage-1'],
 }
 
-const showCodeStyle = {
-  position: 'absolute',
-  textAlign: 'right',
-  top: '1rem',
-  right: '1rem',
-}
-
-const codeIconStyle = {
-  fontWeight: 'bold',
-}
-
 const titleStyle = {
   margin: 0,
 }
@@ -40,25 +29,21 @@ const childrenStyle = {
   paddingTop: 0,
 }
 
-const renderedExampleStyle = {
-  paddingTop: 0,
-  paddingBottom: 0,
-}
-
 const errorStyle = {
   padding: '1em',
   fontSize: '0.9rem',
   color: '#a33',
   background: '#fff2f2',
 }
 
+const toolTipStyle = { width: 100, textAlign: 'center', padding: '0.5em' }
 const ToolTip = ({ children, content }) => (
   <Popup
     inverted
-    mouseEnterDelay={500}
+    mouseEnterDelay={800}
     position='top center'
     size='tiny'
-    style={{ width: 80, textAlign: 'center', padding: '0.5em' }}
+    style={toolTipStyle}
     trigger={children}
     content={content}
   />
@@ -133,6 +118,16 @@ class ComponentExample extends Component {
     else this.removeHash()
   }
 
+  handleShowHTMLClick = (e) => {
+    e.preventDefault()
+
+    const { showHTML } = this.state
+    this.setState({ showHTML: !showHTML })
+
+    if (!showHTML) this.setHashAndScroll()
+    else this.removeHash()
+  }
+
   copyJSX = () => {
     copyToClipboard(this.getOriginalSourceCode())
     this.setState({ copiedCode: true })
@@ -305,7 +300,7 @@ class ComponentExample extends Component {
 
     const color = error ? 'red' : 'black'
     return (
-      <Divider horizontal>
+      <Divider horizontal fitted>
         <Menu text>
           <Menu.Item
             active={copiedCode || !!error} // to show the color
@@ -352,7 +347,7 @@ class ComponentExample extends Component {
     }
 
     return (
-      <Grid.Column style={style}>
+      <div style={style}>
         {this.renderJSXControls()}
         <Editor
           id={`${this.getKebabExamplePath()}-jsx`}
@@ -362,13 +357,13 @@ class ComponentExample extends Component {
         {error && (
           <pre style={errorStyle}>{error}</pre>
         )}
-      </Grid.Column>
+      </div>
     )
   }
 
   renderHTML = () => {
-    const { showCode, markup } = this.state
-    if (!showCode) return
+    const { showHTML, markup } = this.state
+    if (!showHTML) return
 
     // add new lines between almost all adjacent elements
     // moves inline elements to their own line
@@ -384,60 +379,56 @@ class ComponentExample extends Component {
     })
 
     return (
-      <Grid.Column>
+      <div>
         <Divider horizontal>Rendered HTML</Divider>
         <Editor id={`${this.getKebabExamplePath()}-html`} mode='html' value={beautifiedHTML} readOnly />
-      </Grid.Column>
+      </div>
     )
   }
 
   render() {
     const { children, description, title } = this.props
-    const { copiedDirectLink, exampleElement, showCode } = this.state
-    const exampleStyle = { marginBottom: '2em', paddingBottom: '1em', transition: 'box-shadow 300ms' }
+    const { copiedDirectLink, exampleElement, showCode, showHTML } = this.state
+    const exampleStyle = {}
 
-    if (showCode || location.hash === `#${this.anchorName}`) {
+    if (showCode || showHTML || location.hash === `#${this.anchorName}`) {
       exampleStyle.boxShadow = '0 0 30px #ccc'
     }
 
     return (
-      <Grid style={exampleStyle} divided={showCode} columns='1' id={this.anchorName}>
+      <Grid className='docs-example' style={exampleStyle} divided={showCode} columns='1' id={this.anchorName}>
         <Grid.Column style={headerColumnStyle}>
-          {title && <Header as='h3' className='no-anchor' style={titleStyle}>{title}</Header>}
+          {title && <Header as='h3' className='no-anchor' style={titleStyle} content={title} />}
           {description && <p>{description}</p>}
-          <div style={showCodeStyle}>
-            <ToolTip content={copiedDirectLink ? 'Copied!' : 'Copy link'}>
-              <a href={`#${this.anchorName}`} onClick={this.handleDirectLinkClick}>
-                <Icon bordered link color='grey' name='linkify' />
-              </a>
+          <Menu compact text icon size='small' color='green' className='docs-example-menu'>
+            <ToolTip content={copiedDirectLink ? ' Copied Link!' : 'Direct link'}>
+              <Menu.Item href={`#${this.anchorName}`} onClick={this.handleDirectLinkClick}>
+                <Icon size='large' color='grey' name='linkify' fitted />
+              </Menu.Item>
+            </ToolTip>
+            <ToolTip content='Full Screen'>
+              <Menu.Item href={`/maximize/${this.anchorName}`} target='_blank'>
+                <Icon size='large' color='grey' name='window maximize' fitted />
+              </Menu.Item>
             </ToolTip>
-            <ToolTip content='Maximize'>
-              <a href={`/maximize/${this.anchorName}`} target='_blank'>
-                <Icon bordered link color='grey' name='window maximize' />
-              </a>
+            <ToolTip content='Show HTML'>
+              <Menu.Item active={showHTML} onClick={this.handleShowHTMLClick}>
+                <Icon size='large' color='grey' name='html5' fitted />
+              </Menu.Item>
             </ToolTip>
             <ToolTip content='Edit Code'>
-              <Icon
-                bordered
-                link
-                name='code'
-                inverted={showCode}
-                color={showCode ? 'green' : 'grey'}
-                onClick={this.handleShowCodeClick}
-                style={codeIconStyle}
-              />
+              <Menu.Item active={showCode} onClick={this.handleShowCodeClick}>
+                <Icon size='large' name='code' fitted />
+              </Menu.Item>
             </ToolTip>
-          </div>
+          </Menu>
         </Grid.Column>
         {children && (
           <Grid.Column style={childrenStyle}>
             {children}
           </Grid.Column>
         )}
-        <Grid.Column
-          className={`rendered-example ${this.getKebabExamplePath()}`}
-          style={renderedExampleStyle}
-        >
+        <Grid.Column className={`rendered-example ${this.getKebabExamplePath()}`}>
           {exampleElement}
         </Grid.Column>
         {this.renderJSX()}

docs/app/Components/ComponentDoc/ComponentExamples.js

@@ -10,7 +10,7 @@ export default class ComponentExamples extends Component {
     name: PropTypes.string,
   }
 
-  renderExample = () => {
+  renderExamples = () => {
     const { name } = this.props
 
     const examplePath = _.find(exampleContext.keys(), path => new RegExp(`${name}/index.js$`).test(path))
@@ -32,6 +32,6 @@ export default class ComponentExamples extends Component {
   }
 
   render() {
-    return this.renderExample() || this.renderMissingExamples()
+    return this.renderExamples() || this.renderMissingExamples()
   }
 }

docs/app/Components/ComponentDoc/ExampleSection.js

@@ -8,7 +8,7 @@ const sectionStyle = { background: '#fff', boxShadow: '0 2px 2px rgba(0, 0, 0, 0
 const ExampleSection = ({ title, children, ...rest }) => (
   <Grid padded style={sectionStyle} {...rest}>
     <Grid.Column>
-      <Header as='h2' style={headerStyle}>
+      <Header as='h2' style={headerStyle} className='no-anchor'>
         {title}
       </Header>
       {children}

docs/app/Examples/collections/Table/Types/TableExampleCollapsing.js

@@ -15,7 +15,7 @@ const TableExampleCollapsing = () => {
         <Table.Row>
           <Table.Cell>
             <Header as='h4' image>
-              <Image src='/assets/images/avatar2/small/lena.png' shape='rounded' size='mini' />
+              <Image src='/assets/images/avatar/small/lena.png' shape='rounded' size='mini' />
               <Header.Content>
                 Lena
                 <Header.Subheader>Human Resources</Header.Subheader>
@@ -29,7 +29,7 @@ const TableExampleCollapsing = () => {
         <Table.Row>
           <Table.Cell>
             <Header as='h4' image>
-              <Image src='/assets/images/avatar2/small/matthew.png' shape='rounded' size='mini' />
+              <Image src='/assets/images/avatar/small/matthew.png' shape='rounded' size='mini' />
               <Header.Content>
                 Matthew
                 <Header.Subheader>Fabric Design</Header.Subheader>
@@ -43,7 +43,7 @@ const TableExampleCollapsing = () => {
         <Table.Row>
           <Table.Cell>
             <Header as='h4' image>
-              <Image src='/assets/images/avatar2/small/lindsay.png' shape='rounded' size='mini' />
+              <Image src='/assets/images/avatar/small/lindsay.png' shape='rounded' size='mini' />
               <Header.Content>
                 Lindsay
                 <Header.Subheader>Entertainment</Header.Subheader>
@@ -57,7 +57,7 @@ const TableExampleCollapsing = () => {
         <Table.Row>
           <Table.Cell>
             <Header as='h4' image>
-              <Image src='/assets/images/avatar2/small/mark.png' shape='rounded' size='mini' />
+              <Image src='/assets/images/avatar/small/mark.png' shape='rounded' size='mini' />
               <Header.Content>
                 Mark
                 <Header.Subheader>Executive</Header.Subheader>

docs/app/Examples/elements/Header/Content/HeaderExampleImage.js

@@ -3,7 +3,7 @@ import { Header, Image } from 'semantic-ui-react'
 
 const HeaderExampleImage = () => (
   <Header as='h2'>
-    <Image shape='circular' src='/assets/images/avatar2/large/patrick.png' />
+    <Image shape='circular' src='/assets/images/avatar/large/patrick.png' />
     {' '}Patrick
   </Header>
 )

docs/app/Examples/elements/List/Content/ListExampleImage.js

@@ -4,21 +4,21 @@ import { List, Image } from 'semantic-ui-react'
 const ListExampleImage = () => (
   <List>
     <List.Item>
-      <Image avatar src='/assets/images/avatar2/small/rachel.png' />
+      <Image avatar src='/assets/images/avatar/small/rachel.png' />
       <List.Content>
         <List.Header as='a'>Rachel</List.Header>
         <List.Description>Last seen watching <a><b>Arrested Development</b></a> just now.</List.Description>
       </List.Content>
     </List.Item>
     <List.Item>
-      <Image avatar src='/assets/images/avatar2/small/lindsay.png' />
+      <Image avatar src='/assets/images/avatar/small/lindsay.png' />
       <List.Content>
         <List.Header as='a'>Lindsay</List.Header>
         <List.Description>Last seen watching <a><b>Bob's Burgers</b></a> 10 hours ago.</List.Description>
       </List.Content>
     </List.Item>
     <List.Item>
-      <Image avatar src='/assets/images/avatar2/small/matthew.png' />
+      <Image avatar src='/assets/images/avatar/small/matthew.png' />
       <List.Content>
         <List.Header as='a'>Matthew</List.Header>
         <List.Description>Last seen watching <a><b>The Godfather Part 2</b></a> yesterday.</List.Description>

docs/app/Examples/elements/List/ContentVariations/ListExampleFloated.js

@@ -7,7 +7,7 @@ const ListExampleFloated = () => (
       <List.Content floated='right'>
         <Button>Add</Button>
       </List.Content>
-      <Image avatar src='/assets/images/avatar2/small/lena.png' />
+      <Image avatar src='/assets/images/avatar/small/lena.png' />
       <List.Content>
         Lena
       </List.Content>
@@ -16,7 +16,7 @@ const ListExampleFloated = () => (
       <List.Content floated='right'>
         <Button>Add</Button>
       </List.Content>
-      <Image avatar src='/assets/images/avatar2/small/lindsay.png' />
+      <Image avatar src='/assets/images/avatar/small/lindsay.png' />
       <List.Content>
         Lindsay
       </List.Content>
@@ -25,7 +25,7 @@ const ListExampleFloated = () => (
       <List.Content floated='right'>
         <Button>Add</Button>
       </List.Content>
-      <Image avatar src='/assets/images/avatar2/small/mark.png' />
+      <Image avatar src='/assets/images/avatar/small/mark.png' />
       <List.Content>
         Mark
       </List.Content>
@@ -34,7 +34,7 @@ const ListExampleFloated = () => (
       <List.Content floated='right'>
         <Button>Add</Button>
       </List.Content>
-      <Image avatar src='/assets/images/avatar2/small/molly.png' />
+      <Image avatar src='/assets/images/avatar/small/molly.png' />
       <List.Content>
         Molly
       </List.Content>

docs/app/Examples/modules/Modal/Types/ModalExampleModal.js

@@ -5,7 +5,7 @@ const ModalModalExample = () => (
   <Modal trigger={<Button>Show Modal</Button>}>
     <Modal.Header>Select a Photo</Modal.Header>
     <Modal.Content image>
-      <Image wrapped size='medium' src='/assets/images/avatar2/large/rachel.png' />
+      <Image wrapped size='medium' src='/assets/images/avatar/large/rachel.png' />
       <Modal.Description>
         <Header>Default Profile Image</Header>
         <p>We've found the following gravatar image associated with your e-mail address.</p>

docs/app/Examples/modules/Modal/Variations/ModalExampleDimmer.js

@@ -28,7 +28,7 @@ class ModalExampleDimmer extends Component {
         <Modal dimmer={dimmer} open={open} onClose={this.close}>
           <Modal.Header>Select a Photo</Modal.Header>
           <Modal.Content image>
-            <Image wrapped size='medium' src='/assets/images/avatar2/large/rachel.png' />
+            <Image wrapped size='medium' src='/assets/images/avatar/large/rachel.png' />
             <Modal.Description>
               <Header>Default Profile Image</Header>
               <p>We've found the following gravatar image associated with your e-mail address.</p>

docs/app/Examples/views/Card/Content/CardExampleContentBlock.js

@@ -21,7 +21,7 @@ const CardExampleContentBlock = () => (
         </Feed.Event>
 
         <Feed.Event>
-          <Feed.Label image='/assets/images/avatar2/small/molly.png' />
+          <Feed.Label image='/assets/images/avatar/small/molly.png' />
           <Feed.Content>
             <Feed.Date content='3 days ago' />
             <Feed.Summary>

docs/app/Examples/views/Card/Types/CardExampleGroups.js

@@ -25,7 +25,7 @@ const CardExampleGroups = () => (
     </Card>
     <Card>
       <Card.Content>
-        <Image floated='right' size='mini' src='/assets/images/avatar2/large/molly.png' />
+        <Image floated='right' size='mini' src='/assets/images/avatar/large/molly.png' />
         <Card.Header>
           Molly Thomas
         </Card.Header>

docs/app/Examples/views/Card/Types/CardExampleIndividualCard.js

@@ -3,7 +3,7 @@ import { Card, Icon, Image } from 'semantic-ui-react'
 
 const CardExampleIndividualCard = () => (
   <Card>
-    <Image src='/assets/images/avatar2/large/matthew.png' />
+    <Image src='/assets/images/avatar/large/matthew.png' />
     <Card.Content>
       <Card.Header>
         Matthew

docs/app/index.ejs

@@ -135,6 +135,7 @@
     .docs-icon-set-column {
       cursor: pointer;
     }
+
     .docs-icon-set-column .icon {
       font-size: 2em;
       color: #555;
@@ -156,6 +157,26 @@
     .docs-icon-set-column:hover > .icon {
       transform: scale(1.5);
     }
+
+    /* Examples */
+
+    .docs-example-menu {
+      transition: opacity 200ms;
+      position: absolute;
+      top: 1rem;
+      right: 1rem;
+      opacity: 0;
+    }
+
+    .docs-example:hover .docs-example-menu {
+      opacity: 1;
+    }
+
+    .docs-example {
+      margin-bottom: 2em !important;
+      padding-bottom: 1em !important;
+      transition: box-shadow 300ms;
+    }
   </style>
 </body>
 </html>