Skip to content

Commit d9f56ad

Browse files
ExairnousExairnous
authored
Merge pull request #6564 from DougReeder/storybook-tips
Fixes two issues in the Scene UI & adds Storybook test cases for the Scene UI
2 parents 6c395b0 + 155bb78 commit d9f56ad

File tree

7 files changed

+134
-32
lines changed

7 files changed

+134
-32
lines changed

‎src/assets/stylesheets/scene-ui.scss‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949
width: clamp(200px, 100%, 17vw);
5050
display: block;
5151
filter: drop-shadow(0 0 4px theme.$text-inverted-color);
52-
52+
5353
img {
5454
width: 100%;
5555
}
@@ -68,6 +68,7 @@
6868
align-items: center;
6969
align-self: center;
7070
text-align: center;
71+
z-index: 0;
7172
@media (min-width: theme.$breakpoint-lg) {
7273
align-items: flex-start;
7374
align-self: left;
@@ -132,7 +133,7 @@
132133
display: flex;
133134
flex-direction: row;
134135
border: 1px solid #007AB8;
135-
background-color: #007AB8;
136+
background-color: #007AB8;
136137
color: theme.$text5-color;
137138
box-sizing: border-box;
138139
border-radius: 13px;

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

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,8 @@ export const Base = args => (
5151
timestamp={nextTimestamp()}
5252
messages={[
5353
{ id: "1", key: "1", type: "chat", body: "Hello!" },
54-
{ id: "2", key: "2", type: "chat", body: "This is a really long message that should cause a new line." },
54+
// prettier-ignore
55+
{ 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." },
5556
{ id: "3", key: "3", type: "image", body: { src: imgSrc } }
5657
]}
5758
/>
@@ -61,7 +62,8 @@ export const Base = args => (
6162
timestamp={nextTimestamp()}
6263
messages={[
6364
{ id: "4", key: "4", type: "chat", body: "Hello!" },
64-
{ id: "5", key: "5", type: "chat", body: "This is a really long message that should cause a new line." },
65+
// prettier-ignore
66+
{ 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." },
6567
{ id: "6", key: "6", type: "video", body: { src: videoSrc } },
6668
{ id: "7", key: "7", type: "chat", body: "Another message" },
6769
{ id: "8", key: "8", type: "chat", body: "One last message" }
@@ -89,6 +91,12 @@ export const Base = args => (
8991
key: "11",
9092
type: "chat",
9193
body: ":thumbsup:"
94+
},
95+
{
96+
id: "10",
97+
key: "10",
98+
type: "chat",
99+
body: "Really long test message with url, to test line breaking. https://demo.hubsfoundation.org Woo!"
92100
}
93101
]}
94102
/>
@@ -110,7 +118,8 @@ export const Base = args => (
110118
timestamp={nextTimestamp()}
111119
messages={[
112120
{ id: "14", key: "14", type: "chat", body: "https://hubsfoundation.org" },
113-
{ id: "15", key: "15", type: "chat", body: "Test message with url. https://hubsfoundation.org" }
121+
// prettier-ignore
122+
{ id: "21", key: "21", type: "chat", body: "Another really long test message with url. https://hubsfoundation.org So where does the line break?" }
114123
]}
115124
/>
116125
<PermissionMessageGroup

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

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,15 @@ const room = {
1818

1919
export const Base = () => (
2020
<RoomLayout
21-
toolbarCenter={<InvitePopoverButton url={room.url} code={room.code} embed={room.embed} initiallyVisible />}
21+
toolbarCenter={
22+
<InvitePopoverButton
23+
url={room.url}
24+
code={room.code}
25+
embed={room.embed}
26+
initiallyVisible
27+
shareUrlHandler={() => console.log("room URL shared")}
28+
/>
29+
}
2230
/>
2331
);
2432

@@ -31,6 +39,7 @@ export const InviteLink = () => (
3139
initiallyVisible
3240
inviteUrl="https://demo.hubsfoundation.org/123?hub_invite_id=123"
3341
revokeInvite={() => console.log("revoke invite pressed")}
42+
shareUrlHandler={() => console.log("room URL shared")}
3443
/>
3544
}
3645
/>

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

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,18 +25,24 @@ Tips.propTypes = {
2525
step: PropTypes.string
2626
};
2727

28+
// Test cases where the actual software works fine, but the Storybook is wrong, have been commented out.
29+
// Test cases that are identical to desktop cases haven't been created.
2830
const TOOLTIP_STEPS = {
2931
"tips.desktop.welcome": "Desktop Welcome Message",
3032
"tips.desktop.locomotion": "Desktop Locomotion",
3133
"tips.desktop.turning": "Desktop Turning",
34+
"tips.desktop.defense": "Desktop Defense",
3235
"tips.desktop.invite": "Desktop Invite",
3336
"tips.desktop.end": "Desktop End",
3437
"tips.desktop.menu": "Desktop Menu",
35-
"tips.mobile.welcome": "Mobile Welcome Message",
36-
"tips.mobile.locomotion": "Mobile Locomotion",
37-
"tips.mobile.turning": "Mobile Turning",
38-
"tips.mobile.end": "Mobile End",
39-
"tips.mobile.menu": "Mobile Menu"
38+
// "tips.mobile.locomotion": "Mobile Locomotion",
39+
// "tips.mobile.turning": "Mobile Turning",
40+
// "tips.mobile.defense": "Mobile Defense",
41+
// "tips.mobile.menu": "Mobile Menu",
42+
"tips.standalone.locomotion": "Standalone Locomotion",
43+
"tips.standalone.turning": "Standalone Turning",
44+
"tips.standalone.defense": "Standalone Defense",
45+
"tips.standalone.invite": "Standalone Invite"
4046
};
4147

4248
export const Tooltips = ({ step }) => <RoomLayout viewport={<Tooltip step={step} />} />;

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

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ class SceneUI extends Component {
4242
return (
4343
<div className={styles.ui}>
4444
<div className={styles.unavailable}>
45-
<div>
45+
<div className={styles.logoTagline}>
4646
<FormattedMessage id="scene-page.unavailable" defaultMessage="This scene is no longer available." />
4747
</div>
4848
</div>
@@ -87,24 +87,26 @@ class SceneUI extends Component {
8787
source = url && url.includes("sketchfab.com") ? "Sketchfab" : "";
8888

8989
if (remix) {
90-
<span className="remix">
91-
<FormattedMessage
92-
id="scene-page.remix-attribution"
93-
defaultMessage="(Remixed from <a>{name} by {author}</a>)"
94-
values={{
95-
name: _name,
96-
author: _author,
97-
a: chunks =>
98-
url ? (
99-
<a href={url} target="_blank" rel="noopener noreferrer">
100-
{chunks}
101-
</a>
102-
) : (
103-
<>{chunks}</>
104-
)
105-
}}
106-
/>
107-
</span>;
90+
return (
91+
<span className="remix">
92+
<FormattedMessage
93+
id="scene-page.remix-attribution"
94+
defaultMessage="(Remixed from <a>{name} by {author}</a>)"
95+
values={{
96+
name: _name,
97+
author: _author,
98+
a: chunks =>
99+
url ? (
100+
<a href={url} target="_blank" rel="noopener noreferrer">
101+
{chunks}
102+
</a>
103+
) : (
104+
<>{chunks}</>
105+
)
106+
}}
107+
/>
108+
</span>
109+
);
108110
} else if (source) {
109111
return (
110112
<span key={url}>

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

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import React from "react";
2+
import SceneUI from "./scene-ui";
3+
4+
export default {
5+
title: "scene-ui",
6+
parameters: {
7+
layout: "fullscreen"
8+
}
9+
};
10+
11+
export const Base = () => (
12+
<SceneUI sceneName="Very Cool Scene" sceneDescription="A must see!" sceneScreenshotURL="https://example.com/" />
13+
);
14+
15+
export const ShowCreateRoom = () => (
16+
<SceneUI
17+
sceneName="Very Cool Scene"
18+
sceneDescription="A must see!"
19+
sceneScreenshotURL="https://example.com/"
20+
showCreateRoom={true}
21+
/>
22+
);
23+
24+
export const SceneAllowRemixing = () => (
25+
<SceneUI
26+
sceneName="Very Cool Scene"
27+
sceneDescription="A must see!"
28+
sceneScreenshotURL="https://example.com/"
29+
sceneAllowRemixing={true}
30+
/>
31+
);
32+
33+
export const SceneAttributions = () => (
34+
<SceneUI
35+
sceneName="Very Cool Scene"
36+
sceneDescription="A must see!"
37+
sceneScreenshotURL="https://example.com/"
38+
sceneAttributions={{
39+
creator: "Some Artist",
40+
content: [{ title: "Some Title", name: "Parent", author: "Joe Cool", remix: true }]
41+
}}
42+
/>
43+
);
44+
45+
export const OwnerProjectId = () => (
46+
<SceneUI
47+
sceneName="Very Cool Scene"
48+
sceneDescription="A must see!"
49+
sceneScreenshotURL="https://example.com/"
50+
isOwner={true}
51+
sceneProjectId="abc123"
52+
/>
53+
);
54+
55+
export const ShowUnavailable = () => (
56+
<SceneUI
57+
sceneName="Very Cool Scene"
58+
sceneDescription="A must see!"
59+
sceneScreenshotURL="https://example.com/"
60+
unavailable={true}
61+
/>
62+
);
63+
64+
export const RemixedScene = () => (
65+
<SceneUI
66+
sceneName="Child Scene"
67+
sceneDescription="immature"
68+
sceneScreenshotURL="https://example.com/"
69+
sceneAttributions={{
70+
creator: "Derivative Artist"
71+
}}
72+
parentScene={{ name: "Parent Scene", url: "https://example.test", attributions: { creator: "Über Artist" } }}
73+
/>
74+
);

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import React from "react";
33
import { Column } from "../layout/Column";
44
import { RoomLayout } from "../layout/RoomLayout";
55
import { Sidebar } from "./Sidebar";
6+
import { BackButton } from "../input/BackButton";
67

78
export default {
89
title: "Sidebar/Sidebar"
@@ -12,8 +13,8 @@ export const Base = () => (
1213
<RoomLayout
1314
viewport={<div style={{ height: "100vh" }} />}
1415
sidebar={
15-
<Sidebar title="Sidebar">
16-
<Column padding>Test</Column>
16+
<Sidebar title="Sidebar Title" beforeTitle={<BackButton onClick={() => console.log("back button pressed")} />}>
17+
<Column padding>Column component</Column>
1718
</Sidebar>
1819
}
1920
/>

0 commit comments

Comments
 (0)