v0.8.2

cypress/support/commands.ts

@@ -143,7 +143,6 @@ const attachCustomCommands = (Cypress, fb: typeof firebase) => {
         },
       })
       return firestore.updateDocument(collectionName, docId, docData)
-
     },
   )
 
@@ -194,9 +193,7 @@ const attachCustomCommands = (Cypress, fb: typeof firebase) => {
 
   Cypress.Commands.add('toggleUserMenuOn', () => {
     Cypress.log({ displayName: 'OPEN_USER_MENU' })
-    cy.get('[data-cy=user-menu]')
-      .find('path')
-      .should('be.exist')
+    cy.get('[data-cy=user-menu]').should('be.exist')
     cy.get('[data-cy=user-menu]').click()
   })
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "precious-plastic-community-plateform",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "private": true,
   "dependencies": {
     "@babel/core": "7.2.2",

src/components/Avatar/index.tsx

@@ -1,22 +1,18 @@
 import React from 'react'
 
 import { Image, ImageProps } from 'rebass'
-import Icon from 'src/components/Icons'
 import { inject, observer } from 'mobx-react'
-import { UserStore, getUserAvatar } from 'src/stores/User/user.store'
+import { ProfileTypeLabel } from 'src/models/user_pp.models'
+import Workspace from 'src/pages/User/workspace/Workspace'
 
 interface IProps extends ImageProps {
   width?: string
   userName: string
-}
-
-interface IInjected extends IProps {
-  userStore: UserStore
+  profileType?: ProfileTypeLabel
 }
 
 interface IState {
-  avatarUrl?: string
-  showFallback?: boolean
+  badgeProfileType?: string
 }
 
 @inject('userStore')
@@ -26,40 +22,30 @@ export class Avatar extends React.Component<IProps, IState> {
     super(props)
     this.state = {}
   }
-  get injected() {
-    return this.props as IInjected
-  }
 
   // subscribe/unsubscribe from specific user profile message when
   // user updates their avatar (same url so by default will now be aware of change)
   componentDidMount() {
-    this.getAvatar(this.props.userName)
+    this.getProfileTypeBadge(this.props.profileType)
   }
 
-  async getAvatar(userName: string) {
-    const url = getUserAvatar(userName)
-    console.log('avatar', url)
-    this.setState({ avatarUrl: url })
+  public getProfileTypeBadge(type?: ProfileTypeLabel) {
+    const img = Workspace.findWorkspaceBadge(type, true)
+    this.setState({ badgeProfileType: img })
   }
-
   render() {
     const { width } = this.props
-    const { showFallback, avatarUrl } = this.state
+    const { badgeProfileType } = this.state
+
     return (
       <>
-        {showFallback && <Icon glyph={'account-circle'} size={50} />}
-        {!showFallback && avatarUrl && (
-          <Image
-            className="avatar"
-            width={width ? width : 40}
-            sx={{ borderRadius: '25px' }}
-            src={avatarUrl}
-            onError={() => {
-              // if user image doesn't exist show fallback image instead
-              this.setState({ showFallback: true })
-            }}
-          />
-        )}
+        <Image
+          className="avatar"
+          width={width ? width : 40}
+          height={width ? width : 40}
+          sx={{ borderRadius: '25px' }}
+          src={badgeProfileType}
+        />
       </>
     )
   }

src/components/EventCard/event.card.stories.mdx

@@ -0,0 +1,77 @@
+import { withKnobs, text } from '@storybook/addon-knobs'
+import { PropsTable } from '@storybook/components'
+import { Story, Meta, Preview } from '@storybook/addon-docs/blocks'
+import { EventCard } from './EventCard.tsx'
+
+<Meta
+  title="Components|EventCard"
+  component={EventCard}
+  decorators={[withKnobs]}
+/>
+
+# Event Cards
+
+Below you will be able to see how to use and configure a `EventCard` component:
+
+<Preview>
+  <Story name="Default Event Card">
+    <EventCard
+      event={{
+        _createdBy: text('Created By', 'John Doe'),
+        slug: 'event-slug',
+        url: text('URL', ''),
+        date: Date.now(),
+        title: text('Title', 'Lighten the Black Sea'),
+        location: {
+          name: text('Location Name', 'Odessa'),
+          countryCode: text('Country Code', 'UKR'),
+        },
+      }}
+    />
+  </Story>
+</Preview>
+
+<br />
+<br />
+
+## Props
+
+The `EventCard` component receives an `event` prop, an object containing the fields below:
+
+<PropsTable
+  rows={[
+    {
+      name: '_createdBy',
+      description: 'Name of the creator of the event.',
+    },
+    {
+      name: 'slug',
+      description: 'Event slug. Used as the key to render the react component.',
+    },
+    {
+      name: 'url',
+      required: true,
+      description: 'Url to where the "Go to event" link will take the user.',
+    },
+    {
+      name: 'date',
+      required: true,
+      description: 'Date object. Date in which the event will occur.',
+    },
+    {
+      name: 'title',
+      required: true,
+      description: 'Event title.',
+    },
+    {
+      name: 'location.name',
+      required: true,
+      description: 'Location where the event will take place',
+    },
+    {
+      name: 'location.countryCode',
+      required: true,
+      description: 'Country code',
+    },
+  ]}
+/>

src/components/FileInfo/FileInfo.tsx

@@ -3,6 +3,7 @@ import { availableGlyphs } from '../Icons'
 import { bytesToSize } from '../ImageInput/ImageInput'
 import { IUploadedFileMeta } from 'src/stores/storage'
 import { FileDetails } from './FileDetails'
+import styled from 'styled-components'
 
 interface IProps {
   file: File | IUploadedFileMeta | null
@@ -13,6 +14,10 @@ interface IState {
   size: string
 }
 
+const FileContainer = styled.a`
+  width: 300px;
+`
+
 export class FileInfo extends React.Component<IProps, IState> {
   constructor(props: IProps) {
     super(props)
@@ -46,9 +51,13 @@ export class FileInfo extends React.Component<IProps, IState> {
     return (
       <>
         {allowDownload && meta.downloadUrl ? (
-          <a href={meta.downloadUrl} target="_blank" download={file.name}>
+          <FileContainer
+            href={meta.downloadUrl}
+            target="_blank"
+            download={file.name}
+          >
             <FileDetails file={file} glyph={glyph} size={size} />
-          </a>
+          </FileContainer>
         ) : (
           <FileDetails file={file} glyph={glyph} size={size} />
         )}

src/components/Heading/heading.stories.mdx

@@ -0,0 +1,71 @@
+import { withKnobs, text, boolean } from '@storybook/addon-knobs'
+import { PropsTable } from '@storybook/components'
+import { Story, Meta, Preview } from '@storybook/addon-docs/blocks'
+import Heading from './index.tsx'
+
+<Meta title="Components|Heading" component={Heading} decorators={[withKnobs]} />
+
+# Headings
+
+A `Heading` component basically receives one of the props `small`, `medium` or `large`:
+
+<Preview isColumn={true}>
+  <Story name="Small Heading">
+    <Heading small={true}>Lorem ipsum dolor sit amet</Heading>
+  </Story>
+  <Story name="Medium Heading">
+    <Heading medium={true}>Lorem ipsum dolor sit amet</Heading>
+  </Story>
+  <Story name="Large Heading">
+    <Heading large={true}>Lorem ipsum dolor sit amet</Heading>
+  </Story>
+</Preview>
+
+<br />
+<br />
+
+## Other Props
+
+Props that can be applied to the `Heading` component:
+
+<Story name="Default Heading" parameters={{ docs: { disable: true } }}>
+  <Heading
+    small={boolean('small', false)}
+    medium={boolean('medium', true)}
+    large={boolean('large', false)}
+    clipped={boolean('clipped', false)}
+    color={text('color', 'black')}
+  >
+    Lorem ipsum dolor sit amet.
+  </Heading>
+</Story>
+
+<PropsTable
+  rows={[
+    {
+      name: 'small',
+      defaultValue: false,
+      description: 'Sets a small font-size.',
+    },
+    {
+      name: 'medium',
+      defaultValue: false,
+      description: 'Sets a medium small font-size.',
+    },
+    {
+      name: 'large',
+      defaultValue: false,
+      description: 'Sets a large small font-size.',
+    },
+    {
+      name: 'clipped',
+      defaultValue: false,
+      description: 'Adds ellipsis while preventing text overflow.',
+    },
+    {
+      name: 'color',
+      defaultValue: 'black',
+      description: 'Font color.',
+    },
+  ]}
+/>