more storybook fixes due to slugs

src/design-system/molecules/guild-nav/GuildNav.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { GuildNav } from './GuildNav';
-import { guildEnum } from 'roleypoly/common/types/storyData';
+import { mastheadSlugs } from 'roleypoly/common/types/storyData';
 import { PopoverBase } from 'roleypoly/design-system/atoms/popover/Popover.styled';
 
 export default {
@@ -10,12 +10,12 @@ export default {
 
 export const HasGuilds = () => (
     <PopoverBase active>
-        <GuildNav guildEnumeration={guildEnum} />
+        <GuildNav guilds={mastheadSlugs} />
     </PopoverBase>
 );
 
 export const NoGuilds = () => (
     <PopoverBase active>
-        <GuildNav guildEnumeration={{ guildsList: [] }} />
+        <GuildNav guilds={[]} />
     </PopoverBase>
 );

src/design-system/molecules/preauth-greeting/PreauthGreeting.stories.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
+import { mastheadSlugs } from 'roleypoly/common/types/storyData';
 import { PreauthGreeting } from './PreauthGreeting';
-import { guild } from 'roleypoly/common/types/storyData';
 
 export default {
     title: 'Molecules/Preauth/Greeting',
     component: PreauthGreeting,
     args: {
-        guildSlug: guild,
+        guildSlug: mastheadSlugs[0],
     },
 };
 

src/design-system/molecules/preauth-greeting/PreauthGreeting.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
+import { GuildSlug } from 'roleypoly/common/types';
 import { Avatar, utils as avatarUtils } from 'roleypoly/design-system/atoms/avatar';
-import { Guild } from 'roleypoly/common/types';
-import { AccentTitle } from 'roleypoly/design-system/atoms/typography';
 import { Space } from 'roleypoly/design-system/atoms/space';
+import { AccentTitle } from 'roleypoly/design-system/atoms/typography';
 import styled from 'styled-components';
 
 type GreetingProps = {
-    guildSlug: Guild;
+    guildSlug: GuildSlug;
 };
 
 const Center = styled.div`
@@ -19,7 +19,15 @@ const Center = styled.div`
 
 export const PreauthGreeting = (props: GreetingProps) => (
     <Center>
-        <Avatar size={64} src={props.guildSlug.icon}>
+        <Avatar
+            size={64}
+            src={avatarUtils.avatarHash(
+                props.guildSlug.id,
+                props.guildSlug.icon,
+                'icons',
+                512
+            )}
+        >
             {avatarUtils.initialsFromName(props.guildSlug.name)}
         </Avatar>
         <AccentTitle>

src/design-system/organisms/app-shell/AppShell.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { AppShell } from './AppShell';
-import { rpUser, guildEnum } from 'roleypoly/common/types/storyData';
+import { user, mastheadSlugs } from 'roleypoly/common/types/storyData';
 
 export default {
     title: 'Organisms/App Shell',
@@ -14,7 +14,7 @@ export const Guest = () => (
 );
 
 export const LoggedIn = () => (
-    <AppShell user={rpUser} guildEnumeration={guildEnum}>
+    <AppShell user={user} guilds={mastheadSlugs}>
         <h1>Hello World</h1>
     </AppShell>
 );

src/design-system/organisms/help-why-no-roles/WhyNoRoles.styled.ts

@@ -8,7 +8,7 @@ export const DiscordBase = styled.div`
     border-radius: 3px;
     padding: 10px;
     user-select: none;
-    width: 175px;
+    width: 250px;
 `;
 
 const hover = (roleColor: string) => css`

src/design-system/organisms/masthead/Masthead.stories.tsx

@@ -1,5 +1,5 @@
-import { rpUser, guild, guildEnum } from 'roleypoly/common/types/storyData';
 import * as React from 'react';
+import { guild, mastheadSlugs, user } from 'roleypoly/common/types/storyData';
 import { Authed } from './Authed';
 import { Guest } from './Guest';
 
@@ -8,11 +8,9 @@ export default {
 };
 
 export const HasGuilds = () => (
-    <Authed guildEnumeration={guildEnum} activeGuildId={guild.id} user={rpUser} />
+    <Authed guilds={mastheadSlugs} activeGuildId={guild.id} user={user} />
 );
 
-export const NoGuilds = () => (
-    <Authed guildEnumeration={{ guildsList: [] }} activeGuildId={null} user={rpUser} />
-);
+export const NoGuilds = () => <Authed guilds={[]} activeGuildId={null} user={user} />;
 
 export const Guest_ = () => <Guest />;

src/design-system/templates/help-page/HelpPage.stories.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { HelpPageTemplate } from './HelpPage';
+import { WhyNoRoles } from '../../organisms/help-why-no-roles';
 
 export default {
     title: 'Templates/Help Page',
@@ -11,3 +12,9 @@ export const Base = () => (
         <p>Vibrations that synchronize and tie it together, running free forever.</p>
     </HelpPageTemplate>
 );
+
+export const WhyNoRoles_ = () => (
+    <HelpPageTemplate>
+        <WhyNoRoles></WhyNoRoles>
+    </HelpPageTemplate>
+);

src/design-system/templates/help-page/HelpPage.tsx

@@ -1,15 +1,13 @@
 import * as React from 'react';
-import { AppShell } from 'roleypoly/design-system/organisms/app-shell';
+import { AppShell, AppShellProps } from 'roleypoly/design-system/organisms/app-shell';
 import { HelpPageBase } from 'roleypoly/design-system/molecules/help-page-base';
-import { DiscordUser } from 'roleypoly/common/types';
 
-type HelpPageProps = {
-    user: DiscordUser | null;
+export type HelpPageProps = AppShellProps & {
     children: React.ReactNode;
 };
 
 export const HelpPageTemplate = (props: HelpPageProps) => (
-    <AppShell user={props.user || undefined}>
+    <AppShell guilds={props.guilds} user={props.user || undefined}>
         <HelpPageBase>{props.children}</HelpPageBase>
     </AppShell>
 );

src/pages/help/why-no-roles.tsx

@@ -0,0 +1,13 @@
+import { WhyNoRoles } from 'roleypoly/design-system/organisms/help-why-no-roles';
+import {
+    HelpPageTemplate,
+    HelpPageProps,
+} from 'roleypoly/design-system/templates/help-page';
+
+const WhyNoRolesPage = (props: HelpPageProps) => (
+    <HelpPageTemplate {...props}>
+        <WhyNoRoles></WhyNoRoles>
+    </HelpPageTemplate>
+);
+
+export default WhyNoRolesPages;