From 2e8e06687e3f5cf4ed85192be4dce2579a4927f1 Mon Sep 17 00:00:00 2001
From: Austin Sullivan <ausulliv@redhat.com>
Date: Wed, 22 Feb 2023 13:02:59 -0500
Subject: [PATCH] fix(docs): Convert example to fullscreen (#20)

---
 package.json                                     |   3 ++-
 .../react-console/examples/ReactConsole.md       |   2 +-
 .../generated/extensions/react-console/react.js  |  10 ++++++++--
 .../react-console/react/basic-usage.png          | Bin 0 -> 6113 bytes
 .../module/patternfly-docs/generated/index.js    |   2 +-
 5 files changed, 12 insertions(+), 5 deletions(-)
 create mode 100644 packages/module/patternfly-docs/generated/extensions/react-console/react/basic-usage.png

diff --git a/package.json b/package.json
index 5691503..6210075 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,8 @@
     "lint": "yarn lint:js && yarn lint:md",
     "test": "TZ=EST jest packages",
     "test:a11y": "yarn workspace @patternfly/react-console test:a11y",
-    "serve:a11y": "yarn workspace @patternfly/react-console serve:a11y"
+    "serve:a11y": "yarn workspace @patternfly/react-console serve:a11y",
+    "screenshots": "yarn workspace @patternfly/react-console docs:screenshots"
   },
   "devDependencies": {
     "@babel/core": "^7.19.6",
diff --git a/packages/module/patternfly-docs/content/extensions/react-console/examples/ReactConsole.md b/packages/module/patternfly-docs/content/extensions/react-console/examples/ReactConsole.md
index 2fe75a1..d1dc46a 100644
--- a/packages/module/patternfly-docs/content/extensions/react-console/examples/ReactConsole.md
+++ b/packages/module/patternfly-docs/content/extensions/react-console/examples/ReactConsole.md
@@ -23,7 +23,7 @@ import '@patternfly/react-styles/src/css/components/Consoles/xterm.css';
 ## Examples
 
 ### Basic Usage
-```js
+```js isFullscreen
 import React from 'react';
 import { AccessConsoles, SerialConsole, VncConsole, DesktopViewer } from '@patternfly/react-console';
 import { SerialConsoleCustom } from './SerialConsoleCustom.jsx';
diff --git a/packages/module/patternfly-docs/generated/extensions/react-console/react.js b/packages/module/patternfly-docs/generated/extensions/react-console/react.js
index 0e7e982..949b619 100644
--- a/packages/module/patternfly-docs/generated/extensions/react-console/react.js
+++ b/packages/module/patternfly-docs/generated/extensions/react-console/react.js
@@ -3,6 +3,12 @@ import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfl
 import { AccessConsoles, SerialConsole, VncConsole, DesktopViewer } from '@patternfly/react-console';
 import { SerialConsoleCustom } from '../../../content/extensions/react-console/examples/./SerialConsoleCustom.jsx';
 import { debounce } from '@patternfly/react-core';
+import '@patternfly/react-styles/src/css/components/Consoles/AccessConsoles.css';
+import '@patternfly/react-styles/src/css/components/Consoles/DesktopViewer.css';
+import '@patternfly/react-styles/src/css/components/Consoles/SerialConsole.css';
+import '@patternfly/react-styles/src/css/components/Consoles/VncConsole.css';
+import '@patternfly/react-styles/src/css/components/Consoles/xterm.css';
+import srcImportbasicusage from './react/basic-usage.png';
 const pageData = {
   "id": "React console",
   "section": "extensions",
@@ -339,7 +345,7 @@ const pageData = {
     }
   ],
   "beta": true,
-  "examples": [
+  "fullscreenExamples": [
     "Basic Usage"
   ]
 };
@@ -356,7 +362,7 @@ pageData.relativeImports = {
 };
 pageData.examples = {
   'Basic Usage': props => 
-    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { AccessConsoles, SerialConsole, VncConsole, DesktopViewer } from '@patternfly/react-console';\nimport { SerialConsoleCustom } from './SerialConsoleCustom.jsx';\nimport { debounce } from '@patternfly/react-core';\n\nAccessConsolesVariants = () => {\n  const [status, setStatus] = React.useState('disconnected');\n  const setConnected = React.useRef(debounce(() => setStatus('connected'), 3000)).current;\n  const onConnect = React.useCallback(() => {\n    setStatus('loading');\n    setConnected();\n  }, [setConnected])\n  const onDisconnect = React.useCallback(() => setStatus('disconnected'), [])\n  const ref = React.createRef();\n\n  return (\n    <AccessConsoles preselectedType=\"SerialConsole\">\n      <VncConsole host=\"localhost\" port=\"9090\" encrypt shared />\n      <SerialConsole\n        onConnect={onConnect}\n        status={status}\n        onDisconnect={onDisconnect}\n        onData={data => {\n          ref.current.onDataReceived(data);\n        }}\n        ref={ref}\n      />\n      <SerialConsoleCustom type='Serial Console pty2' />\n      <DesktopViewer spice={{ address: '127.0.0.1', port: '5900' }} vnc={{ address: '127.0.0.1', port: '5901' }} />\n    </AccessConsoles>\n  );\n};","title":"Basic Usage","lang":"js"}}>
+    <Example {...pageData} {...props} thumbnail={srcImportbasicusage} {...{"code":"import React from 'react';\nimport { AccessConsoles, SerialConsole, VncConsole, DesktopViewer } from '@patternfly/react-console';\nimport { SerialConsoleCustom } from './SerialConsoleCustom.jsx';\nimport { debounce } from '@patternfly/react-core';\n\nAccessConsolesVariants = () => {\n  const [status, setStatus] = React.useState('disconnected');\n  const setConnected = React.useRef(debounce(() => setStatus('connected'), 3000)).current;\n  const onConnect = React.useCallback(() => {\n    setStatus('loading');\n    setConnected();\n  }, [setConnected])\n  const onDisconnect = React.useCallback(() => setStatus('disconnected'), [])\n  const ref = React.createRef();\n\n  return (\n    <AccessConsoles preselectedType=\"SerialConsole\">\n      <VncConsole host=\"localhost\" port=\"9090\" encrypt shared />\n      <SerialConsole\n        onConnect={onConnect}\n        status={status}\n        onDisconnect={onDisconnect}\n        onData={data => {\n          ref.current.onDataReceived(data);\n        }}\n        ref={ref}\n      />\n      <SerialConsoleCustom type='Serial Console pty2' />\n      <DesktopViewer spice={{ address: '127.0.0.1', port: '5900' }} vnc={{ address: '127.0.0.1', port: '5901' }} />\n    </AccessConsoles>\n  );\n};","title":"Basic Usage","lang":"js","isFullscreen":true}}>
       
     </Example>
 };
diff --git a/packages/module/patternfly-docs/generated/extensions/react-console/react/basic-usage.png b/packages/module/patternfly-docs/generated/extensions/react-console/react/basic-usage.png
new file mode 100644
index 0000000000000000000000000000000000000000..4c6067bb5ea9cbe61e84d578ce5d3a59d64d431d
GIT binary patch
literal 6113
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

literal 0
HcmV?d00001

diff --git a/packages/module/patternfly-docs/generated/index.js b/packages/module/patternfly-docs/generated/index.js
index a47c061..2a1b166 100644
--- a/packages/module/patternfly-docs/generated/index.js
+++ b/packages/module/patternfly-docs/generated/index.js
@@ -3,7 +3,7 @@ module.exports = {
     id: "React console",
     title: "React console",
     toc: [[{"text":"Note"}],{"text":"Examples"},[{"text":"Basic Usage"}]],
-    examples: ["Basic Usage"],
+    fullscreenExamples: ["Basic Usage"],
     section: "extensions",
     subsection: "",
     source: "react",