docs: add transparent button to examples

CHANGELOG.md

@@ -34,6 +34,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### Documentation
 - Add `Provider` examples @levithomason ([#285](https://github.com/stardust-ui/react/pull/285))
+- Add transparent button to examples @levithomason ([#407](https://github.com/stardust-ui/react/pull/407))
 
 ### Documentation
 - Add component descriptions and fix accessibility errors @levithomason ([#387](https://github.com/stardust-ui/react/pull/387))

docs/src/components/ComponentDoc/ComponentControls/ComponentControls.tsx

@@ -7,6 +7,7 @@ import ComponentControlsShowCode from './ComponentControlsShowCode'
 import ComponentControlsCopyLink from './ComponentControlsCopyLink'
 import ComponentControlsShowVariables from './ComponentControlsShowVariables'
 import ComponentControlsMaximize from './ComponentControlsMaximize'
+import ComponentControlsShowTransparent from './ComponentControlsShowTransparent'
 import ComponentControlsRtl from './ComponentControlsRtl'
 
 const ComponentControls: any = props => {
@@ -15,17 +16,20 @@ const ComponentControls: any = props => {
     examplePath,
     showCode,
     showRtl,
+    showTransparent,
     showVariables,
     onCopyLink,
     onShowCode,
     onShowRtl,
+    onShowTransparent,
     onShowVariables,
   } = props
 
   return (
     <Menu color="green" icon="labeled" size="tiny" compact text>
       <ComponentControlsShowCode active={showCode} onClick={onShowCode} />
       <ComponentControlsShowVariables active={showVariables} onClick={onShowVariables} />
+      <ComponentControlsShowTransparent active={showTransparent} onClick={onShowTransparent} />
       <ComponentControlsRtl active={showRtl} onClick={onShowRtl} />
       <ComponentControlsMaximize examplePath={examplePath} />
       <ComponentControlsCopyLink anchorName={anchorName} onClick={onCopyLink} />
@@ -39,13 +43,20 @@ ComponentControls.propTypes = {
   onCopyLink: PropTypes.func,
   onShowCode: PropTypes.func,
   onShowRtl: PropTypes.func,
+  onShowTransparent: PropTypes.func,
   onShowVariables: PropTypes.func,
   showCode: PropTypes.bool,
   showRtl: PropTypes.bool,
+  showTransparent: PropTypes.bool,
   showVariables: PropTypes.bool,
   visible: PropTypes.bool,
 }
 
-export default updateForKeys(['examplePath', 'showRtl', 'showCode', 'showVariables', 'visible'])(
-  ComponentControls,
-)
+export default updateForKeys([
+  'examplePath',
+  'showRtl',
+  'showCode',
+  'showTransparent',
+  'showVariables',
+  'visible',
+])(ComponentControls)

docs/src/components/ComponentDoc/ComponentControls/ComponentControlsMaximize.tsx

@@ -13,8 +13,8 @@ const ComponentControlsMaximize: any = ({ examplePath }) => (
     target="_blank"
     rel="noopener noreferrer"
   >
-    <Icon color="grey" fitted name="window maximize" size="large" />
-    Maximize
+    <Icon color="grey" fitted name="external alternate" size="large" />
+    Popout
   </Menu.Item>
 )
 

docs/src/components/ComponentDoc/ComponentControls/ComponentControlsShowTransparent.tsx

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types'
+import * as React from 'react'
+import { Icon, Menu } from 'semantic-ui-react'
+
+import { updateForKeys } from 'docs/src/hoc'
+
+const ComponentControlsShowTransparent: React.SFC = ({ active, onClick }: any) => (
+  <Menu.Item active={active} onClick={onClick}>
+    <Icon color={active ? 'green' : 'grey'} size="large" name="adjust" fitted />
+    Transparent
+  </Menu.Item>
+)
+
+ComponentControlsShowTransparent.propTypes = {
+  active: PropTypes.bool,
+  onClick: PropTypes.func,
+}
+
+export default updateForKeys(['active'])(ComponentControlsShowTransparent)

docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx

@@ -40,6 +40,7 @@ interface ComponentExampleState {
   showCode: boolean
   showHTML: boolean
   showRtl: boolean
+  showTransparent: boolean
   showVariables: boolean
   isHovering: boolean
   copiedCode: boolean
@@ -75,6 +76,7 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
     showCode: false,
     showHTML: false,
     showRtl: false,
+    showTransparent: false,
     showVariables: false,
     isHovering: false,
     copiedCode: false,
@@ -239,6 +241,14 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
     this.setState({ showVariables: !showVariables }, this.updateHash)
   }
 
+  private handleShowTransparentClick = e => {
+    e.preventDefault()
+
+    const { showTransparent } = this.state
+
+    this.setState({ showTransparent: !showTransparent })
+  }
+
   private handlePass = () => {
     const { title } = this.props
 
@@ -607,6 +617,7 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
       showCode,
       showHTML,
       showRtl,
+      showTransparent,
       showVariables,
     } = this.state
 
@@ -658,9 +669,11 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
                   onCopyLink={this.handleDirectLinkClick}
                   onShowRtl={this.handleShowRtlClick}
                   onShowVariables={this.handleShowVariablesClick}
+                  onShowTransparent={this.handleShowTransparentClick}
                   showCode={showCode}
                   showHTML={showHTML}
                   showRtl={showRtl}
+                  showTransparent={showTransparent}
                   showVariables={showVariables}
                   visible
                 />
@@ -684,8 +697,13 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
                   className={`rendered-example ${this.getKebabExamplePath()}`}
                   style={{
                     padding: '2rem',
-                    backgroundColor: siteVariables.bodyBackground,
                     color: siteVariables.bodyColor,
+                    backgroundColor: siteVariables.bodyBackground,
+                    ...(showTransparent && {
+                      backgroundImage:
+                        'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAKUlEQVQoU2NkYGAwZkAD////RxdiYBwKCv///4/hGUZGkNNRAeMQUAgAtxof+nLDzyUAAAAASUVORK5CYII=")',
+                      backgroundRepeat: 'repeat',
+                    }),
                   }}
                 >
                   {exampleElement}