Avatar (codesandbox#3295)

* add avatr

* fix my merge, sorry :(

* should always be white; wwow that sounds racist

* fix avatar color

* fixed pr comments

Author: SaraVieira

packages/components/.storybook/config.tsx

@@ -33,10 +33,14 @@ const GlobalStyle = createGlobalStyle`
   ${global};
   html body {
     font-family: 'Inter', sans-serif;
-    background-color: ${theme.colors.sideBar.background};
-    color: ${theme.colors.sideBar.foreground};
+
+    background-color: ${props =>
+      // @ts-ignore
+      props.theme.colors.sideBar.background} !important;
+    color: ${props =>
+      // @ts-ignore
+      props.theme.colors.sideBar.foreground} !important;
     margin: 0;
-    padding: 20px;
 
     * {
       box-sizing: border-box;

packages/components/src/components/Avatar/index.stories.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Avatar } from '.';
+import { sid, sara } from './stubs';
+
+export default {
+  title: 'components/Avatar',
+  component: Avatar,
+};
+
+export const Sid = () => <Avatar user={sid} />;
+export const Sara = () => <Avatar user={sara} />;

packages/components/src/components/Avatar/index.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import css from '@styled-system/css';
+import { User } from '@codesandbox/common/lib/types';
+import styled from 'styled-components';
+import { Element } from '../Element';
+import { Text } from '../Text';
+
+interface IAvatarProps {
+  user: User;
+}
+
+export const AvatarImage = styled.img(
+  css({
+    width: 8,
+    height: 8,
+    borderRadius: 'small',
+    border: '1px solid',
+    borderColor: 'avatar.border',
+    backgroundColor: 'avatar.border', // fallback for loading image
+  })
+);
+
+export const Pro = styled(Text).attrs({ size: 1, weight: 'bold' })(
+  css({
+    backgroundColor: 'blues.700',
+    color: 'white',
+    borderRadius: 'small',
+    paddingX: 2,
+    paddingY: '2px', // no 2 in spaces
+    border: '1px solid',
+    borderColor: 'avatar.border',
+    transform: 'translateX(-50%) translateY(-100%);',
+    position: 'absolute',
+    top: '100%',
+  })
+);
+
+export const Avatar = ({ user }: IAvatarProps) => (
+  <Element style={{ position: 'relative' }}>
+    <AvatarImage src={user.avatarUrl} alt={user.username} />
+    {user.subscriptionSince ? <Pro>Pro</Pro> : null}
+  </Element>
+);

packages/components/src/components/Avatar/stubs.ts

@@ -0,0 +1,76 @@
+export const sid = {
+  avatarUrl: 'https://avatars0.githubusercontent.com/u/1863771?v=4',
+  badges: [],
+  bio: null,
+  curatorAt: '2018-12-19T14:09:51Z',
+  featuredSandboxes: [],
+  forkedCount: 334,
+  givenLikeCount: 15,
+  id: '740dca51-993d-4b0e-b8cb-0e46acada86b',
+  insertedAt: '2017-07-23T17:28:22',
+  name: 'Siddharth Kshetrapal',
+  profileEmail: null,
+  receivedLikeCount: 35,
+  sandboxCount: 215,
+  sandboxCountPerTemplate: {
+    apollo: 1,
+    'create-react-app': 166,
+    gatsby: 3,
+    node: 14,
+    nuxt: 1,
+    parcel: 24,
+    'preact-cli': 1,
+    static: 5,
+  },
+  showcasedSandboxShortid: 'ppsij',
+  subscriptionSince: null,
+  sandboxes: [],
+  likedSandboxes: [],
+  topSandboxes: [],
+  twitter: null,
+  username: 'siddharthkp',
+  viewCount: 31128,
+};
+
+export const sara = {
+  avatarUrl: 'https://avatars0.githubusercontent.com/u/1051509?v=4',
+  badges: [{ id: 'patron_2', name: 'Patron II', visible: true }],
+  bio: 'I am sara',
+  curatorAt: '2018-11-25T18:51:34Z',
+  featuredSandboxes: [],
+  forkedCount: 1556,
+  givenLikeCount: 33,
+  id: '8d35d7c1-eecb-4aad-87b0-c22d30d12081',
+  insertedAt: '2017-07-18T23:49:53',
+  name: 'Sara Vieira',
+  profileEmail: '[email protected]',
+  receivedLikeCount: 86,
+  sandboxCount: 611,
+  sandboxCountPerTemplate: {
+    '@dojo/cli-create-app': 1,
+    'angular-cli': 3,
+    apollo: 7,
+    'create-react-app': 356,
+    'create-react-app-typescript': 6,
+    cxjs: 3,
+    gatsby: 13,
+    'mdx-deck': 2,
+    next: 1,
+    node: 44,
+    nuxt: 1,
+    parcel: 77,
+    'preact-cli': 8,
+    sapper: 1,
+    static: 28,
+    svelte: 11,
+    'vue-cli': 49,
+  },
+  showcasedSandboxShortid: '3p5b4',
+  subscriptionSince: '2018-03-01T16:00:18Z',
+  sandboxes: [],
+  likedSandboxes: [],
+  topSandboxes: [],
+  twitter: 'NikkitaFTW',
+  username: 'SaraVieira',
+  viewCount: 84435,
+};

packages/components/src/utils/polyfill-theme.ts

@@ -18,6 +18,9 @@ const polyfillTheme = vsCodeTheme =>
     sideBar: {
       hoverBackground: vsCodeTheme.sideBar.border,
     },
+    avatar: {
+      border: vsCodeTheme.sideBar.border,
+    },
   });
 
 export default polyfillTheme;