Fixes two issues in the Scene UI & adds Storybook test cases for the Scene UI

src/assets/stylesheets/scene-ui.scss

@@ -49,7 +49,7 @@
   width: clamp(200px, 100%, 17vw);
   display: block;
   filter: drop-shadow(0 0 4px theme.$text-inverted-color);
-  
+
   img {
     width: 100%;
   }
@@ -68,6 +68,7 @@
   align-items: center;
   align-self: center;
   text-align: center;
+  z-index: 0;
   @media (min-width: theme.$breakpoint-lg) {
     align-items: flex-start;
     align-self: left;
@@ -132,7 +133,7 @@
   display: flex;
   flex-direction: row;
   border: 1px solid #007AB8;
-  background-color: #007AB8; 
+  background-color: #007AB8;
   color: theme.$text5-color;
   box-sizing: border-box;
   border-radius: 13px;

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

@@ -51,7 +51,8 @@ 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." },
+              // prettier-ignore
+              { 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 +62,8 @@ 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." },
+              // prettier-ignore
+              { 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,6 +91,12 @@ 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!"
               }
             ]}
           />
@@ -110,7 +118,8 @@ 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" }
+              // prettier-ignore
+              { 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.js

@@ -42,7 +42,7 @@ class SceneUI extends Component {
       return (
         <div className={styles.ui}>
           <div className={styles.unavailable}>
-            <div>
+            <div className={styles.logoTagline}>
               <FormattedMessage id="scene-page.unavailable" defaultMessage="This scene is no longer available." />
             </div>
           </div>
@@ -87,24 +87,26 @@ class SceneUI extends Component {
       source = url && url.includes("sketchfab.com") ? "Sketchfab" : "";
 
       if (remix) {
-        <span className="remix">
-          <FormattedMessage
-            id="scene-page.remix-attribution"
-            defaultMessage="(Remixed from <a>{name} by {author}</a>)"
-            values={{
-              name: _name,
-              author: _author,
-              a: chunks =>
-                url ? (
-                  <a href={url} target="_blank" rel="noopener noreferrer">
-                    {chunks}
-                  </a>
-                ) : (
-                  <>{chunks}</>
-                )
-            }}
-          />
-        </span>;
+        return (
+          <span className="remix">
+            <FormattedMessage
+              id="scene-page.remix-attribution"
+              defaultMessage="(Remixed from <a>{name} by {author}</a>)"
+              values={{
+                name: _name,
+                author: _author,
+                a: chunks =>
+                  url ? (
+                    <a href={url} target="_blank" rel="noopener noreferrer">
+                      {chunks}
+                    </a>
+                  ) : (
+                    <>{chunks}</>
+                  )
+              }}
+            />
+          </span>
+        );
       } else if (source) {
         return (
           <span key={url}>

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

@@ -0,0 +1,74 @@
+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}
+  />
+);
+
+export const RemixedScene = () => (
+  <SceneUI
+    sceneName="Child Scene"
+    sceneDescription="immature"
+    sceneScreenshotURL="https://example.com/"
+    sceneAttributions={{
+      creator: "Derivative Artist"
+    }}
+    parentScene={{ name: "Parent Scene", url: "https://example.test", attributions: { creator: "Über Artist" } }}
+  />
+);

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>
     }
   />