From f1e3adbec532062eb2e6793cc937e41ac8b6cdbd Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Thu, 12 May 2022 14:45:56 -0700
Subject: [PATCH] Split up design/style pages

---
 web/stories/BrowserNotifyModal.stories.tsx    |  5 +-
 ...leGuide.stories.mdx => Colors.stories.mdx} | 59 +------------------
 web/stories/Images.stories.mdx                | 49 +++++++++++++++
 web/stories/Typography.stories.mdx            | 11 ++++
 4 files changed, 63 insertions(+), 61 deletions(-)
 rename web/stories/{StyleGuide.stories.mdx => Colors.stories.mdx} (53%)
 create mode 100644 web/stories/Images.stories.mdx
 create mode 100644 web/stories/Typography.stories.mdx

diff --git a/web/stories/BrowserNotifyModal.stories.tsx b/web/stories/BrowserNotifyModal.stories.tsx
index a88eebf80..cacefabe9 100644
--- a/web/stories/BrowserNotifyModal.stories.tsx
+++ b/web/stories/BrowserNotifyModal.stories.tsx
@@ -1,16 +1,15 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import BrowserNotifyModal from '../components/modals/BrowserNotifyModal';
-import AuthModal from '../components/modals/AuthModal';
 
 const Example = () => (
   <div>
-    <AuthModal />
+    <BrowserNotifyModal />
   </div>
 );
 
 export default {
-  title: 'owncast/Modals/Browser Push Notifications',
+  title: 'owncast/Modals/Browser Notifications',
   component: BrowserNotifyModal,
   parameters: {},
 } as ComponentMeta<typeof BrowserNotifyModal>;
diff --git a/web/stories/StyleGuide.stories.mdx b/web/stories/Colors.stories.mdx
similarity index 53%
rename from web/stories/StyleGuide.stories.mdx
rename to web/stories/Colors.stories.mdx
index 8d61207f1..c98b54df0 100644
--- a/web/stories/StyleGuide.stories.mdx
+++ b/web/stories/Colors.stories.mdx
@@ -1,51 +1,10 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Color, ColorRow } from './Color';
-import { Image, ImageRow } from './ImageAsset';
 
-import Logo from '../assets/images/logo.svg';
-import FediverseColor from '../assets/images/fediverse-color.png';
-import FediverseBlack from '../assets/images/fediverse-black.png';
-import Moderator from '../assets/images/moderator.svg';
-import IndieAuth from '../assets/images/indieauth.png';
-import IsBot from '../assets/images/bot.svg';
-
-<Meta title="owncast/Style Guide" />
-
-<style>{`
- 
-  
-`}</style>
-
-export const images = [
-  {
-    src: Logo,
-    name: 'Logo',
-  },
-  {
-    src: FediverseColor,
-    name: 'Fediverse Color',
-  },
-  {
-    src: FediverseBlack,
-    name: 'Fediverse Black',
-  },
-  {
-    src: Moderator,
-    name: 'Moderator',
-  },
-  {
-    src: IndieAuth,
-    name: 'IndieAuth',
-  },
-  {
-    src: IsBot,
-    name: 'Bot Flag',
-  },
-];
+<Meta title="owncast/Style Guide/Colors" />
 
 # Colors
 
-<Story name="Colors"></Story>
 
 <ColorRow colors={['theme-primary-color', 'theme-text-color-secondary']} />
 
@@ -110,19 +69,3 @@ export const images = [
     'color-owncast-orange-900',
   ]}
 />
-
-# Font
-
-[Inter font](https://rsms.me/inter/)
-
-<Story name="Fonts">
-  <Canvas style={{ color: 'var(--theme-text-color-secondary)' }}>
-    {getComputedStyle(document.documentElement).getPropertyValue('--theme-font-family')}
-  </Canvas>
-</Story>
-
-# Images
-
-<Story name="Images and Icons"></Story>
-
-<ImageRow images={images} />
diff --git a/web/stories/Images.stories.mdx b/web/stories/Images.stories.mdx
new file mode 100644
index 000000000..f3cc1891e
--- /dev/null
+++ b/web/stories/Images.stories.mdx
@@ -0,0 +1,49 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Image, ImageRow } from './ImageAsset';
+
+import Logo from '../assets/images/logo.svg';
+import FediverseColor from '../assets/images/fediverse-color.png';
+import FediverseBlack from '../assets/images/fediverse-black.png';
+import Moderator from '../assets/images/moderator.svg';
+import IndieAuth from '../assets/images/indieauth.png';
+import IsBot from '../assets/images/bot.svg';
+
+<Meta title="owncast/Style Guide/Images+Icons" />
+
+export const images = [
+  {
+    src: Logo,
+    name: 'Logo',
+  },
+];
+
+# Images
+
+<ImageRow images={images} />
+
+## App Icons
+
+export const icons = [
+  {
+    src: FediverseColor,
+    name: 'Fediverse Color',
+  },
+  {
+    src: FediverseBlack,
+    name: 'Fediverse Black',
+  },
+  {
+    src: Moderator,
+    name: 'Moderator',
+  },
+  {
+    src: IndieAuth,
+    name: 'IndieAuth',
+  },
+  {
+    src: IsBot,
+    name: 'Bot Flag',
+  },
+];
+
+<ImageRow images={icons} />
diff --git a/web/stories/Typography.stories.mdx b/web/stories/Typography.stories.mdx
new file mode 100644
index 000000000..139a6429c
--- /dev/null
+++ b/web/stories/Typography.stories.mdx
@@ -0,0 +1,11 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+<Meta title="owncast/Style Guide/Typography" />
+
+# Font
+
+[Inter font](https://rsms.me/inter/)
+
+  <Canvas style={{ color: 'var(--theme-text-color-secondary)' }}>
+    {getComputedStyle(document.documentElement).getPropertyValue('--theme-font-family')}
+  </Canvas>