docs(src): update to card look

docs/src/components/CarbonAd/CarbonAdNative.js

@@ -0,0 +1,115 @@
+import React, { Component } from 'react'
+
+import { Label } from 'semantic-ui-react'
+
+class CarbonAdNative extends Component {
+  state = {}
+
+  componentDidMount() {
+    this.getAd()
+
+    this.mounted = true
+  }
+
+  componentWillUpdate() {
+    if (Date.now() - this.timeOfLastAd > 10000) {
+      this.getAd()
+    }
+  }
+
+  componentWillUnmount() {
+    this.mounted = false
+    this.cleanup()
+  }
+
+  cleanup = () => {
+    if (!this.script) return
+
+    document.getElementsByTagName('head')[0].removeChild(this.script)
+    this.script = null
+  }
+
+  getAd = () => {
+    window._handleNativeJSON = this.handleNativeJSON
+    this.timeOfLastAd = Date.now()
+
+    this.cleanup()
+
+    this.script = document.createElement('script')
+    this.script.src = `https://srv.buysellads.com/ads/CK7DC2QW.json?${[
+      'segment=placement:reactsemanticuicom',
+      'callback=_handleNativeJSON',
+      `v=${Date.now()}`,
+    ].join('&')}`
+
+    document.getElementsByTagName('head')[0].appendChild(this.script)
+  }
+
+  handleNativeJSON = (json) => {
+    try {
+      const sanitized = json.ads
+        .filter(ad => Object.keys(ad).length > 0)
+        .filter(ad => !!ad.statlink)
+
+      if (this.mounted) {
+        this.setState({ ad: sanitized[0] })
+      } else {
+        this.cleanup()
+      }
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.error(err)
+    }
+  }
+
+  render() {
+    const { ad } = this.state
+
+    if (!ad) return null
+
+    const id = `carbon-native-${ad.timestamp}`
+
+    return (
+      <a id={id} href={ad.statlink} target='_blank' rel='noopener noreferrer'>
+        <img src={ad.image} width='20' style={{ verticalAlign: 'middle', marginRight: '0.5rem' }} />
+        <strong>{ad.company}</strong>
+        {' — '}
+        <span>{ad.description}</span>
+        <Label basic horizontal content='Ad' style={{ float: 'right' }} />
+
+        {/* Impression */}
+        <img src={`${ad.statimp}`} style={{ display: 'none' }} />
+
+        {/* Pixel */}
+        {ad.pixel &&
+          ad.pixel
+            .split('||')
+            .map((pixel, i) => (
+              <img
+                key={i}
+                src={`${pixel.replace('[timestamp]', ad.timestamp)}`}
+                style={{ display: 'none' }}
+              />
+            ))}
+
+        <style>{`
+          #${id} {
+            transition: background 0.2s;
+            display: block;
+            padding: 1rem;
+            width: 100%;
+            background: #fff;
+            border-top: 1px solid #ddd;
+            color: inherit;
+            cursor: pointer;
+          }
+          #${id}:hover {
+            background: whitesmoke;
+          }
+        `}</style>
+      </a>
+    )
+  }
+}
+
+export default CarbonAdNative

docs/src/components/ComponentDoc/ComponentDoc.js

@@ -13,7 +13,6 @@ import ComponentExamples from './ComponentExamples'
 import ComponentProps from './ComponentProps'
 import ComponentSidebar from './ComponentSidebar'
 
-const topRowStyle = { margin: '1em' }
 const exampleEndStyle = {
   textAlign: 'center',
   opacity: 0.5,
@@ -75,8 +74,8 @@ class ComponentDoc extends Component {
 
     return (
       <DocumentTitle title={`${info.displayName} | Semantic UI React`}>
-        <Grid>
-          <Grid.Row style={topRowStyle}>
+        <Grid padded>
+          <Grid.Row>
             <Grid.Column>
               <Header
                 as='h1'

docs/src/components/ComponentDoc/ComponentExample/ComponentExample.js

@@ -18,6 +18,7 @@ import {
 import Editor from 'docs/src/components/Editor/Editor'
 import ComponentControls from '../ComponentControls'
 import ComponentExampleTitle from './ComponentExampleTitle'
+import CarbonAdNative from '../../CarbonAd/CarbonAdNative'
 
 const babelConfig = {
   presets: [
@@ -433,25 +434,29 @@ class ComponentExample extends PureComponent {
 
     const exampleStyle = {
       position: 'relative',
-      transition: 'box-shadow 200ms, background 200ms',
+      background: '#fff',
+      boxShadow: '0 1px 2px #ccc',
       ...(isActive
         ? {
-          background: '#fff',
-          boxShadow: '0 0 30px #ccc',
+          boxShadow: '0 8px 32px #aaa',
         }
         : isHovering && {
-          background: '#fff',
-          boxShadow: '0 0 10px #ccc',
-          zIndex: 1,
+          boxShadow: '0 2px 8px #bbb',
         }),
     }
 
     return (
-      <Visibility once={false} onTopPassed={this.handlePass} onTopPassedReverse={this.handlePass}>
+      <Visibility
+        once={false}
+        onTopPassed={this.handlePass}
+        onTopPassedReverse={this.handlePass}
+        style={{ margin: '2rem 0' }}
+      >
+        {/* Ensure anchor links don't occlude card shadow effect */}
+        <div id={this.anchorName} style={{ position: 'relative', bottom: '1rem' }} />
         <Grid
           className='docs-example'
           padded='vertically'
-          id={this.anchorName}
           onMouseLeave={handleMouseLeave}
           onMouseMove={handleMouseMove}
           style={exampleStyle}
@@ -493,6 +498,7 @@ class ComponentExample extends PureComponent {
               {this.renderHTML()}
             </Grid.Column>
           </Grid.Row>
+          {isActive && <CarbonAdNative />}
         </Grid>
       </Visibility>
     )

docs/src/components/ComponentDoc/ExampleSection.js

@@ -2,15 +2,15 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import { Grid, Header } from 'semantic-ui-react'
 
-const headerStyle = { marginBottom: '1.5em' }
-const sectionStyle = {
-  background: '#fff',
-  boxShadow: '0 2px 2px rgba(0, 0, 0, 0.1)',
-  paddingBottom: '5em',
+const headerStyle = {
+  marginBottom: '1.5em',
+  textAlign: 'center',
+  textTransform: 'uppercase',
+  opacity: 0.5,
 }
 
 const ExampleSection = ({ title, children, ...rest }) => (
-  <Grid padded style={sectionStyle} {...rest}>
+  <Grid padded {...rest}>
     <Grid.Column>
       <Header as='h2' style={headerStyle} className='no-anchor'>
         {title}

docs/src/components/IconSearch/IconSearch.js

@@ -191,9 +191,6 @@ export default class IconSearch extends Component {
     return (
       <Grid columns={1} padded style={gridStyle}>
         <Grid.Column>
-          <Header as='h2'>Icon Set</Header>
-          <p>An icon set contains an arbitrary number of glyphs.</p>
-
           <Form>
             <Form.Group inline>
               <Form.Input

docs/src/examples/elements/Icon/index.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Menu } from 'semantic-ui-react'
+import { Divider, Menu } from 'semantic-ui-react'
 
 import IconSearch from 'docs/src/components/IconSearch/IconSearch'
 import States from './States'
@@ -14,11 +14,7 @@ class IconExamples extends Component {
   handleMenuItemClick = (e, { index }) => this.setState({ activeIndex: index })
   renderActiveTab = () =>
     ({
-      0: (
-        <div>
-          <IconSearch />
-        </div>
-      ),
+      0: <IconSearch />,
       1: (
         <div>
           <States />
@@ -33,12 +29,14 @@ class IconExamples extends Component {
       <div>
         <Menu
           widths={2}
-          tabular
+          pointing
+          color='teal'
           defaultActiveIndex={0}
           items={tabs}
           onItemClick={this.handleMenuItemClick}
           style={{ marginBottom: 0 }}
         />
+        <Divider hidden />
         {this.renderActiveTab()}
       </div>
     )