@influitive/profile-card

This application was scaffolded via create-infl-app

Profile Card

A pop over card component that displays user information and provides some relevant links.

###Installation Add "@influitive/profile-card": "X.X.XX" to the projects package JSON ( replaces X.X.XX with the version you want to use)

npm install
npm start

###To run storybook

1. Add storybook's port to puma to be able to load fonts. echo 6006 > ~/.puma-dev/profile-card-storybook.infl
2. npm run storybook
3. Go to https://profile-card-storybook.infl.dev

Customize storybook by changing .storybook/preview-head.html and stories directory.

Run testing (in another terminal)

npm test -- --watch

###Usage In your component:

import ProfileCard from '@influitive/profile-card/lib';

<ProfileCard
  id={contactUUID}
  disableViewProfile={aBooleanProp}
  anonymous={aBooleanProp}
  disableMessage={aBooleanProp}
  children={wrappedElement} />

###Props

• id (Uuid) of the user whose information is to be display in the card.
• disableViewProfile (bool) When true hides the link to the user public profile.
• disableMessage (bool) When true hides the link to message that contact.
• anonymous (bool) when true renders the generic anonymous advocate information.
• children (node) Corresponds to the element to be wrapped. The profile card will toggle when clicking on this element.

Extra Considerations: You will need to style the element that is being wrapped, as the profile-card does not make assumptions about its children. E.g for avatar images we are normally using:

.profile {
  width: 32px;
  border-radius: 100%;
}

###How it works profile-card is just a regular component built using react-redux. When the children element is clicked an ajax call is fired to the hub's /api/people/${id}.jsonto retrieve that specific user information.