xmj/element-call
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Refactor header

Browse source
This commit is contained in:
Robert Long 2021-12-23 14:40:23 -08:00
commit eb620e9220
16 changed files with 307 additions and 130 deletions
Download patch file Download diff file Expand all files Collapse all files

98
src/Header.stories.jsx
View file

@ -1,14 +1,106 @@
import React from "react";
import { Header, LeftNav, RightNav } from "./Header";
import { GridLayoutMenu } from "./GridLayoutMenu";
import {
Header,
HeaderLogo,
LeftNav,
RightNav,
RoomHeaderInfo,
} from "./Header";
import { UserMenu } from "./UserMenu";
export default {
title: "Header",
component: Header,
parameters: {
layout: "fullscreen",
},
};
export const Home = () => (
export const HomeAnonymous = () => (
<Header>
<LeftNav></LeftNav>
<LeftNav>
<HeaderLogo />
</LeftNav>
<RightNav>
<UserMenu />
</RightNav>
</Header>
);
export const HomeNamedGuest = () => (
<Header>
<LeftNav>
<HeaderLogo />
</LeftNav>
<RightNav>
<UserMenu isAuthenticated isPasswordlessUser displayName="Yara" />
</RightNav>
</Header>
);
export const HomeLoggedIn = () => (
<Header>
<LeftNav>
<HeaderLogo />
</LeftNav>
<RightNav>
<UserMenu isAuthenticated displayName="Yara" />
</RightNav>
</Header>
);
export const LobbyNamedGuest = () => (
<Header>
<LeftNav>
<RoomHeaderInfo roomName="Q4Roadmap" />
</LeftNav>
<RightNav>
<UserMenu isAuthenticated isPasswordlessUser displayName="Yara" />
</RightNav>
</Header>
);
export const LobbyLoggedIn = () => (
<Header>
<LeftNav>
<RoomHeaderInfo roomName="Q4Roadmap" />
</LeftNav>
<RightNav>
<UserMenu isAuthenticated displayName="Yara" />
</RightNav>
</Header>
);
export const InRoomNamedGuest = () => (
<Header>
<LeftNav>
<RoomHeaderInfo roomName="Q4Roadmap" />
</LeftNav>
<RightNav>
<GridLayoutMenu layout="freedom" />
<UserMenu isAuthenticated isPasswordlessUser displayName="Yara" />
</RightNav>
</Header>
);
export const InRoomLoggedIn = () => (
<Header>
<LeftNav>
<RoomHeaderInfo roomName="Q4Roadmap" />
</LeftNav>
<RightNav>
<GridLayoutMenu layout="freedom" />
<UserMenu isAuthenticated displayName="Yara" />
</RightNav>
</Header>
);
export const CreateAccount = () => (
<Header>
<LeftNav>
<HeaderLogo />
</LeftNav>
<RightNav></RightNav>
</Header>
);