Adds Storybook test cases for scene-ui.js

Why: They didn't exist yet, and production code was changed to use the Web Share API.

Author: DougReeder

src/react-components/room/ChatSidebar.stories.js

@@ -51,7 +51,7 @@ export const Base = args => (
             timestamp={nextTimestamp()}
             messages={[
               { id: "1", key: "1", type: "chat", body: "Hello!" },
-              { id: "2", key: "2", type: "chat", body: "This is a really long message that should cause a new line." },
+              { id: "2", key: "2", type: "chat", body: "This is a really long message that should cause a new line, so it needs to contain a lot of verbiage." },
               { id: "3", key: "3", type: "image", body: { src: imgSrc } }
             ]}
           />
@@ -61,7 +61,7 @@ export const Base = args => (
             timestamp={nextTimestamp()}
             messages={[
               { id: "4", key: "4", type: "chat", body: "Hello!" },
-              { id: "5", key: "5", type: "chat", body: "This is a really long message that should cause a new line." },
+              { id: "5", key: "5", type: "chat", body: "This is a really long message that should cause a new line, so it needs to contain a lot of verbiage." },
               { id: "6", key: "6", type: "video", body: { src: videoSrc } },
               { id: "7", key: "7", type: "chat", body: "Another message" },
               { id: "8", key: "8", type: "chat", body: "One last message" }
@@ -89,7 +89,13 @@ export const Base = args => (
                 key: "11",
                 type: "chat",
                 body: ":thumbsup:"
-              }
+              },
+              {
+                id: "10",
+                key: "10",
+                type: "chat",
+                body: "Really long test message with url, to test line breaking. https://demo.hubsfoundation.org Woo!"
+              },
             ]}
           />
           <SystemMessage type="join" presence="room" name="Liv" timestamp={nextTimestamp()} />
@@ -110,7 +116,12 @@ export const Base = args => (
             timestamp={nextTimestamp()}
             messages={[
               { id: "14", key: "14", type: "chat", body: "https://hubsfoundation.org" },
-              { id: "15", key: "15", type: "chat", body: "Test message with url. https://hubsfoundation.org" }
+              {
+                id: "21",
+                key: "21",
+                type: "chat",
+                body: "Another really long test message with url. https://hubsfoundation.org So where does the line break?"
+              }
             ]}
           />
           <PermissionMessageGroup

src/react-components/room/InvitePopover.stories.js

@@ -18,7 +18,15 @@ const room = {
 
 export const Base = () => (
   <RoomLayout
-    toolbarCenter={<InvitePopoverButton url={room.url} code={room.code} embed={room.embed} initiallyVisible />}
+    toolbarCenter={
+      <InvitePopoverButton
+        url={room.url}
+        code={room.code}
+        embed={room.embed}
+        initiallyVisible
+        shareUrlHandler={() => console.log("room URL shared")}
+      />
+    }
   />
 );
 
@@ -31,6 +39,7 @@ export const InviteLink = () => (
         initiallyVisible
         inviteUrl="https://demo.hubsfoundation.org/123?hub_invite_id=123"
         revokeInvite={() => console.log("revoke invite pressed")}
+        shareUrlHandler={() => console.log("room URL shared")}
       />
     }
   />

src/react-components/room/Tip.stories.js

@@ -25,18 +25,24 @@ Tips.propTypes = {
   step: PropTypes.string
 };
 
+// Test cases where the actual software works fine, but the Storybook is wrong, have been commented out.
+// Test cases that are identical to desktop cases haven't been created.
 const TOOLTIP_STEPS = {
   "tips.desktop.welcome": "Desktop Welcome Message",
   "tips.desktop.locomotion": "Desktop Locomotion",
   "tips.desktop.turning": "Desktop Turning",
+  "tips.desktop.defense": "Desktop Defense",
   "tips.desktop.invite": "Desktop Invite",
   "tips.desktop.end": "Desktop End",
   "tips.desktop.menu": "Desktop Menu",
-  "tips.mobile.welcome": "Mobile Welcome Message",
-  "tips.mobile.locomotion": "Mobile Locomotion",
-  "tips.mobile.turning": "Mobile Turning",
-  "tips.mobile.end": "Mobile End",
-  "tips.mobile.menu": "Mobile Menu"
+  // "tips.mobile.locomotion": "Mobile Locomotion",
+  // "tips.mobile.turning": "Mobile Turning",
+  // "tips.mobile.defense": "Mobile Defense",
+  // "tips.mobile.menu": "Mobile Menu",
+  // "tips.standalone.locomotion": "Standalone Locomotion",
+  // "tips.standalone.turning": "Standalone Turning",
+  "tips.standalone.defense": "Standalone Defense",
+  "tips.standalone.invite": "Standalone Invite"
 };
 
 export const Tooltips = ({ step }) => <RoomLayout viewport={<Tooltip step={step} />} />;

src/react-components/scene-ui.stories.js

@@ -0,0 +1,62 @@
+import React from "react";
+import SceneUI from "./scene-ui";
+
+export default {
+  title: "scene-ui",
+  parameters: {
+    layout: "fullscreen"
+  }
+};
+
+export const Base = () => (
+  <SceneUI sceneName="Very Cool Scene" sceneDescription="A must see!" sceneScreenshotURL="https://example.com/" />
+);
+
+export const ShowCreateRoom = () => (
+  <SceneUI
+    sceneName="Very Cool Scene"
+    sceneDescription="A must see!"
+    sceneScreenshotURL="https://example.com/"
+    showCreateRoom={true}
+  />
+);
+
+export const SceneAllowRemixing = () => (
+  <SceneUI
+    sceneName="Very Cool Scene"
+    sceneDescription="A must see!"
+    sceneScreenshotURL="https://example.com/"
+    sceneAllowRemixing={true}
+  />
+);
+
+export const SceneAttributions = () => (
+  <SceneUI
+    sceneName="Very Cool Scene"
+    sceneDescription="A must see!"
+    sceneScreenshotURL="https://example.com/"
+    sceneAttributions={{
+      creator: "Some Artist",
+      content: [{ title: "Some Title", name: "Parent", author: "Joe Cool", remix: true }]
+    }}
+  />
+);
+
+export const OwnerProjectId = () => (
+  <SceneUI
+    sceneName="Very Cool Scene"
+    sceneDescription="A must see!"
+    sceneScreenshotURL="https://example.com/"
+    isOwner={true}
+    sceneProjectId="abc123"
+  />
+);
+
+export const ShowUnavailable = () => (
+  <SceneUI
+    sceneName="Very Cool Scene"
+    sceneDescription="A must see!"
+    sceneScreenshotURL="https://example.com/"
+    unavailable={true}
+  />
+);

src/react-components/sidebar/Sidebar.stories.js

@@ -3,6 +3,7 @@ import React from "react";
 import { Column } from "../layout/Column";
 import { RoomLayout } from "../layout/RoomLayout";
 import { Sidebar } from "./Sidebar";
+import { BackButton } from "../input/BackButton";
 
 export default {
   title: "Sidebar/Sidebar"
@@ -12,8 +13,8 @@ export const Base = () => (
   <RoomLayout
     viewport={<div style={{ height: "100vh" }} />}
     sidebar={
-      <Sidebar title="Sidebar">
-        <Column padding>Test</Column>
+      <Sidebar title="Sidebar Title" beforeTitle={<BackButton onClick={() => console.log("back button pressed")} />}>
+        <Column padding>Column component</Column>
       </Sidebar>
     }
   />