Add some images+icons to assets section

web/stories/ImageAsset.tsx

@@ -0,0 +1,77 @@
+import PropTypes from 'prop-types';
+
+export function ImageAsset(props) {
+  const { name, src } = props;
+
+  const containerStyle = {
+    borderRadius: '20px',
+    width: '12vw',
+    height: '12vw',
+    minWidth: '100px',
+    minHeight: '100px',
+    borderWidth: '1.5px',
+    borderStyle: 'solid',
+    borderColor: 'lightgray',
+    overflow: 'hidden',
+    margin: '0.3vw',
+  };
+
+  const colorBlockStyle = {
+    height: '70%',
+    width: '100%',
+    backgroundColor: 'white',
+  };
+
+  const colorDescriptionStyle = {
+    textAlign: 'center',
+    color: 'gray',
+    fontSize: '0.8em',
+  };
+
+  const imageStyle = {
+    width: '100%',
+    height: '80%',
+    backgroundRepeat: 'no-repeat',
+    backgroundSize: 'contain',
+    backgroundPosition: 'center',
+    marginTop: '5px',
+    backgroundImage: `url(${src})`,
+  };
+
+  return (
+    <figure style={containerStyle}>
+      <a href={src} target="_blank" rel="noopener noreferrer">
+        <div style={imageStyle} />
+        <figcaption style={colorDescriptionStyle}>{name}</figcaption>
+      </a>
+    </figure>
+  );
+}
+
+Image.propTypes = {
+  name: PropTypes.string.isRequired,
+};
+
+const rowStyle = {
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'wrap',
+  // justifyContent: 'space-around',
+  alignItems: 'center',
+};
+
+export function ImageRow(props) {
+  const { images } = props;
+
+  return (
+    <div style={rowStyle}>
+      {images.map(image => (
+        <ImageAsset key={image.src} src={image.src} name={image.name} />
+      ))}
+    </div>
+  );
+}
+
+ImageRow.propTypes = {
+  images: PropTypes.arrayOf(PropTypes.object).isRequired,
+};

web/stories/StyleGuide.stories.mdx

@@ -1,5 +1,13 @@
 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" />
 
@@ -8,10 +16,26 @@ import {Color, ColorRow} from './Color';
   
 `}</style>
 
-# Images
+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',
+}];
 
-<Story name="Images">
-</Story>
 
 # Colors
 
@@ -43,10 +67,22 @@ import {Color, ColorRow} from './Color';
 
 # 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>
 
-[Inter font](https://rsms.me/inter/)
+# Images
+
+<Story name="Images and Icons">
+</Story>
+
+<ImageRow images={images} />
+
+
+
+
+