Remove vanilla from Profile

[nfiniteset]

As a developer
I can use the profile without depending on hig-vanilla
so my users dont have to download hella stuff

---

Dev notes

Don't overthink this one. It has a lot of props but most get passed through to other components we already have built.

It looks like it uses Flyout, Button, Avatar, and some typography components.

The only state needed is to enable the profile to open and close automatically in an "uncontrolled" way.

If present, the open prop overrides internal state managing open-close behavior.

---

Examples

import ProfileFlyout, { ProfileContent } from '@hig/profile-flyout';

Basic use - profile opens and closes on it's own (state managed internally)

<ProfileFlyout
  avatarName="Peter Parker"
  avatarImage="/images/my-image-url.jpg"
>
  <ProfileContent
    profileName="Peter Parker"
    profileEmail="peter@example.com"
  >
    <p>You can put what ever you want in here.</p>
  </ProfileContent>
</ProfileFlyout>

Controlling open/close - Client dev manages open-close state

<ProfileFlyout
  open={this.state.profileOpen}
  onProfileImageClick={this.openProfile}
  onProfileClickOutside={this.closeProfile}
  {...unrelatedProfileProps}
>
  {...unrelatedProfileContentProps}
</ProfileFlyout>

Prop Types

ProfileFlyout.propTypes = {
  /** Url pointing to signed in user's avatar image */
  avatarImage: PropTypes.string,
  /** Signed-in user's name */
  avatarName: PropTypes.string,
  /** Content rendered inside the profile flyout */
  children: PropTypes.node,
  /** Called when user clicks away from the profile flyout */
  onProfileClickOutside: PropTypes.func,
  /** Called when user clicks the profile image */
  onProfileImageClick: PropTypes.func,
  /** Called when user clicks on the settings button */
  open: PropTypes.bool,
  /** Label identifying the settings button */
}

ProfileContent.propTypes = {
  /** Signed-in user's email address */
  profileEmail: PropTypes.string,
  /** Signed-in user's name */
  profileName: PropTypes.string,
  /** Content rendered after use name and email */
  children: PropTypes.node
}

// When prop is not provided...
ProfileFlyout.propTypes = {
  /** Pass prop as usual to avatar */
  avatarImage: PropTypes.string,
  /** Pass prop as usual to avatar */
  avatarName: PropTypes.string,

  /** Nothing special */
  children: PropTypes.node,
  /** Nothing special */
  onProfileClickOutside: PropTypes.func,
  /** Nothing special */
  onProfileImageClick: PropTypes.func,
  /** Nothing special */
  open: PropTypes.bool
}

ProfileContent.propTypes = {
  /** Don't render email address in profile content */
  profileEmail: PropTypes.string,
  /** Don't render name address in profile content */
  profileName: PropTypes.string,
  /** Nothing special */
  children: PropTypes.node
}

[halfghaninne]

@nfiniteset What is the desired behavior of the component when no props are passed?