[docs] Improve demo source discoverability (#14635)

* [docs] Cleanup Demo code related to iframe

* [docs] Improve demo source discoverability

* [docs] Show "Show Source" tooltip before first interaction

* Use max-age instead of expires for cookie

Co-Authored-By: eps1lon <[email protected]>

* [docs] knowsAboutShowSource -> sourceHintSeen

Author: eps1lon

docs/src/modules/components/Demo.js

@@ -19,6 +19,7 @@ import DemoFrame from 'docs/src/modules/components/DemoFrame';
 import DemoLanguages from 'docs/src/modules/components/DemoLanguages';
 import getDemoConfig from 'docs/src/modules/utils/getDemoConfig';
 import compose from 'docs/src/modules/utils/compose';
+import { getCookie } from 'docs/src/modules/utils/helpers';
 import { ACTION_TYPES, CODE_VARIANTS } from 'docs/src/modules/constants';
 
 function compress(object) {
@@ -95,8 +96,14 @@ class Demo extends React.Component {
   state = {
     anchorEl: null,
     codeOpen: false,
+    demoHovered: false,
+    sourceHintSeen: false,
   };
 
+  componentDidMount() {
+    this.setState({ sourceHintSeen: getCookie('sourceHintSeen') });
+  }
+
   handleClickMore = event => {
     this.setState({ anchorEl: event.currentTarget });
   };
@@ -183,11 +190,17 @@ class Demo extends React.Component {
   };
 
   handleClickCodeOpen = () => {
+    document.cookie = `sourceHintSeen=true;path=/;max-age=31536000`;
     this.setState(state => ({
       codeOpen: !state.codeOpen,
+      sourceHintSeen: true,
     }));
   };
 
+  handleDemoHover = event => {
+    this.setState({ demoHovered: event.type === 'mouseenter' });
+  };
+
   getDemoData = () => {
     const { codeVariant, demo, githubLocation } = this.props;
     if (codeVariant === CODE_VARIANTS.HOOK && demo.rawHooks) {
@@ -217,11 +230,13 @@ class Demo extends React.Component {
 
   render() {
     const { classes, codeVariant, demo, demoOptions } = this.props;
-    const { anchorEl, codeOpen } = this.state;
+    const { anchorEl, codeOpen, demoHovered, sourceHintSeen } = this.state;
+    const showSourceHint = demoHovered && !sourceHintSeen;
     const category = demoOptions.demo;
     const demoData = this.getDemoData();
     const DemoComponent = demoData.js;
     const sourceLanguage = demoData.codeVariant === CODE_VARIANTS.TS ? 'tsx' : 'jsx';
+    const Frame = demoOptions.iframe ? DemoFrame : React.Fragment;
 
     return (
       <div className={classes.root}>
@@ -236,12 +251,18 @@ class Demo extends React.Component {
                 onLanguageClick={this.handleCodeLanguageClick}
               />
               <div>
-                <Tooltip title={codeOpen ? 'Hide the source' : 'Show the source'} placement="top">
+                <Tooltip
+                  key={showSourceHint}
+                  open={showSourceHint ? true : undefined}
+                  title={codeOpen ? 'Hide the source' : 'Show the source'}
+                  placement="top"
+                >
                   <IconButton
                     data-ga-event-category={category}
                     data-ga-event-action="expand"
                     onClick={this.handleClickCodeOpen}
                     aria-label={codeOpen ? 'Hide the source' : 'Show the source'}
+                    color={demoHovered ? 'primary' : 'default'}
                   >
                     <CodeIcon />
                   </IconButton>
@@ -324,14 +345,12 @@ class Demo extends React.Component {
           className={clsx(classes.demo, {
             [classes.demoHiddenHeader]: demoOptions.hideHeader,
           })}
+          onMouseEnter={this.handleDemoHover}
+          onMouseLeave={this.handleDemoHover}
         >
-          {demoOptions.iframe ? (
-            <DemoFrame>
-              <DemoComponent />
-            </DemoFrame>
-          ) : (
+          <Frame>
             <DemoComponent />
-          )}
+          </Frame>
         </div>
       </div>
     );