@influitive/profile-card NPM

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)

Run npm install

###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 especific user information.

RELEASING

We currently maintain 2 versions of profile card due to mismatched deps that break in one of the places we use this repo. The master branch is v2 while there is also a v3 branch. Changes need to be duplicated in both branches.

before releasing, make sure you remove node_modules and re-install. There seems to be an error when publishing where there is no lib folder, but getting fresh node_modules seems to somehow fix it. This is because each version has diff package.json.
you can try npm publish --dry-run, I haven't tested this yet, but it should list all the files without actually publishing.