feat(demo): add option to enable fedramp

webex · Mar 29, 2022 · 0c5f5e3 · 0c5f5e3
1 parent 66d2cea
commit 0c5f5e3
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 14 deletions.
diff --git a/demo/App.jsx b/demo/App.jsx
@@ -1,6 +1,6 @@
 import React, {useState} from 'react';
 import ReactDOM from 'react-dom';
-import {Button, Input, Sidebar, SidebarBody, SidebarNav, SidebarNavItem} from '@momentum-ui/react';
+import {Button, Input, Sidebar, SidebarBody, SidebarNav, SidebarNavItem, Checkbox} from '@momentum-ui/react';
 
 import WebexMeetingsWidgetDemo from './WebexMeetingsWidgetDemo';
 
@@ -10,6 +10,7 @@ import './App.scss';
 export default function App() {
   const [tokenInput, setTokenInput] = useState('');
   const [token, setToken] = useState();
+  const [fedramp, setFedramp] = useState(false);
 
   const handleClearToken = (event) => {
     event.preventDefault();
@@ -26,8 +27,12 @@ export default function App() {
     setToken(tokenInput);
   };
 
+  function handleFedrampChange() {
+    setFedramp(!fedramp);
+  }
+
   return (
-    <React.Fragment>
+    <>
       <Sidebar withIcons={false}>
         <SidebarBody>
           <SidebarNav title="Webex Widgets">
@@ -41,11 +46,19 @@ export default function App() {
           <h5>Webex Widgets require an access token to identify the current user.</h5>
           <h5>
             You can get an access token from{' '}
-            <a href="https://developer.webex.com" target="_blank">
-              developer.webex.com
+            <a href={`https://developer${fedramp ? '-usgov' : ''}.webex.com`} target="_blank">
+              {`developer${fedramp ? '-usgov' : ''}.webex.com`}
             </a>
           </h5>
           <form className="webex-form">
+            <Checkbox
+              checked={fedramp}
+              htmlId="fedrampCheckbox"
+              label="FedRAMP"
+              onChange={handleFedrampChange}
+              value="FedRAMP"
+              disabled={!!token}
+            />
             <Input
               htmlId="token"
               label="Access Token"
@@ -65,10 +78,10 @@ export default function App() {
           </form>
         </section>
         <section className="webex-section fluid-height flex-column">
-          <WebexMeetingsWidgetDemo token={token} />
+          <WebexMeetingsWidgetDemo token={token} fedramp={fedramp} />
         </section>
       </div>
-    </React.Fragment>
+    </>
   );
 }
 

diff --git a/demo/WebexMeetingsWidgetDemo.jsx b/demo/WebexMeetingsWidgetDemo.jsx
@@ -5,7 +5,7 @@ import './WebexMeetingsWidgetDemo.scss';
 
 import {WebexMeetingsWidget} from '../src';
 
-export default function WebexMeetingsWidgetDemo({token}) {
+export default function WebexMeetingsWidgetDemo({token, fedramp}) {
   const [destination, setDestination] = useState('');
   const [displayWidget, setDisplayWidget] = useState(false);
   const [theme, setTheme] = useState('dark');
@@ -31,22 +31,24 @@ export default function WebexMeetingsWidgetDemo({token}) {
   const handleChangeLayout = (selectedOptions) => {
     const selectedLayout = selectedOptions[0].value;
     setLayout(selectedLayout);
-  }
+  };
 
   const handleFullscreen = () => {
     const demoWidget = document.querySelector('.webex-meeting-widget-demo');
 
     if (demoWidget.requestFullscreen) {
       demoWidget.requestFullscreen();
-    } else if (demoWidget.webkitRequestFullscreen) { /* Safari */
+    } else if (demoWidget.webkitRequestFullscreen) {
+      /* Safari */
       demoWidget.current.webkitRequestFullscreen();
-    } else if (demoWidget.msRequestFullscreen) { /* IE11 */
+    } else if (demoWidget.msRequestFullscreen) {
+      /* IE11 */
       demoWidget.msRequestFullscreen();
     }
-  }
+  };
 
   return (
-    <React.Fragment>
+    <>
       <h3>Webex Meetings Widget</h3>
       <h5>The Webex Meetings Widget allows you to create and join Webex meetings in your browser.</h5>
       <form className="webex-form">
@@ -71,7 +73,9 @@ export default function WebexMeetingsWidgetDemo({token}) {
         <Button disabled={!displayWidget} onClick={handleHideMeetingWidget} ariaLabel="Remove Meeting Widget">
           Remove Meeting Widget
         </Button>
-        <Button disabled={!displayWidget} onClick={handleFullscreen} ariaLabel="Display meeting widget full screen">Fullscreen</Button>
+        <Button disabled={!displayWidget} onClick={handleFullscreen} ariaLabel="Display meeting widget full screen">
+          Fullscreen
+        </Button>
         <div className="webex-select-control">Theme</div>
         <Select defaultValue="Dark" onSelect={handleChangeTheme}>
           <SelectOption value="dark" label="Dark" />
@@ -92,16 +96,19 @@ export default function WebexMeetingsWidgetDemo({token}) {
           meetingDestination={destination}
           className={`webex-meeting-widget-demo wxc-theme-${theme}`}
           layout={layout}
+          fedramp={fedramp}
         />
       )}
-    </React.Fragment>
+    </>
   );
 }
 
 WebexMeetingsWidgetDemo.propTypes = {
   token: PropTypes.string,
+  fedramp: PropTypes.bool,
 };
 
 WebexMeetingsWidgetDemo.defaultProps = {
   token: '',
+  fedramp: false,
 };