- Fix style guide for Tag cmpnt;

- Create Avatar cmpnt with "marked" blue dot prop;
- Add Avatar component to the style guide;

src/components/elements/Avatar/Avatar.md

+```js
+<div>
+  <div style={{ float: 'left' }}>
+    <div>Profile</div>
+    <div>
+      <Avatar size="large">
+        <img src="https://picsum.photos/100/100?random" alt="Example avatar" />
+      </Avatar>
+    </div>
+  </div>
+  <div style={{ float: 'left', marginLeft: '20px' }}>
+    <div>Contributors</div>
+    <div>
+      <Avatar>
+        <img src="https://picsum.photos/100/100?random" alt="Example avatar" />
+      </Avatar>
+      <Avatar marked>
+        <img src="https://picsum.photos/100/100?random" alt="Example avatar" />
+      </Avatar>
+    </div>
+  </div>
+  <div style={{ clear: 'both' }}>Blue dot = collection owner</div>
+</div>
+```

src/components/elements/Avatar/Avatar.tsx

+import * as React from 'react';
+import { Avatar } from '@zendeskgarden/react-avatars';
+
+export default ({ children, marked, className = '', ...props }) => {
+  if (marked) {
+    className += ' marked';
+  }
+  return (
+    <Avatar className={className} {...props}>
+      {children}
+    </Avatar>
+  );
+};

src/components/elements/Tag/Tag.md

 ```js
-<Tag closeable focused style={{ marginRight: '10px'}} onClick={() => alert('Tag close clicked')}>Selected</Tag>
-<Tag closeable onClick={() => alert('Tag close clicked')}>Unselected</Tag>
+const { default: Tag, TagContainer } = require('./Tag');
+
+<TagContainer style={{ margin: 0 }}>
+  <Tag
+    closeable
+    focused
+    style={{ marginRight: '10px' }}
+    onClick={() => alert('Tag close clicked')}
+  >
+    Selected
+  </Tag>
+  <Tag closeable onClick={() => alert('Tag close clicked')}>
+    Unselected
+  </Tag>
+</TagContainer>;
 ```

src/themes/create.tsx

@@ -276,6 +276,32 @@ export default function createTheme(theme: MoodleThemeInterface) {
         &&&&:hover {
             color: ${theme.colour.primary};
         }
+    `,
+    // - avatars
+    //language=SCSS
+    'avatars.avatar': `
+        &&&& {
+          position: relative;
+          width: 40px;
+          height: 40px;
+        }
+      
+       &&&&[class*=large] {
+         width: 80px;
+         height: 80px;
+       }
+      
+       &&.marked:after {
+         content: '';
+         position: absolute;
+         display: block;
+         width: 10px;
+         height: 10px;
+         border-radius: 20px;
+         background-color: #60C3FF;
+         top: 0;
+         right: 0;
+       }
     `
   };
 }

styleguide.config.js

@@ -22,8 +22,7 @@ webpackConfig.module.rules.push({
 module.exports = {
   components: 'src/components/**/*.tsx',
   ignore: [
-    //TODO maybe don't ignore these chrome components?
-    'src/components/chrome/{Body,Menu,Nav}/*.tsx',
+    'src/components/chrome/{Body,Menu,Nav,Main}/*.tsx',
     'src/components/typography/LI/*.tsx',
     'src/components/elements/flag/*.tsx',
     'src/components/inputs/LanguageSelect/*.tsx',