{"size": 3695, "ext": "js", "max_stars_repo_path": "src/components/Avatar/story.js", "max_stars_repo_name": "mikemfleming/rover-ui", "max_stars_repo_stars_event_min_datetime": "2019-07-01T16:58:24.000Z", "max_stars_repo_stars_event_max_datetime": "2022-01-18T16:18:56.000Z", "max_issues_repo_path": "src/components/Avatar/story.js", "max_issues_repo_name": "mikemfleming/rover-ui", "max_issues_repo_issues_event_min_datetime": "2019-07-01T18:51:06.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-08T22:52:54.000Z", "max_forks_repo_path": "src/components/Avatar/story.js", "max_forks_repo_name": "afwss/rover-ui", "max_forks_repo_forks_event_min_datetime": "2019-07-15T21:53:29.000Z", "max_forks_repo_forks_event_max_datetime": "2021-11-04T19:02:36.000Z"}
{"max_stars_count": 14, "max_issues_count": 152, "max_forks_count": 12, "avg_line_length": 24.9662162162, "max_line_length": 78, "alphanum_fraction": 0.5077131258}
import React from 'react';
import { storiesOf } from '@storybook/react';
import { boolean, text, select } from '@storybook/addon-knobs';

import Avatar from './';
import Paper from '../Paper';
import Readme from './README.md';
import AddonReadme from './Addon.README.md';

const badgeStyle = {
  backgroundColor: 'green',
  border: '1px solid black',
  width: '14px',
  height: '14px',
  borderRadius: '50%',
};

const positionOptions = [
  'top-left',
  'top-right',
  'bottom-right',
  'bottom-left',
];

/* eslint-disable react/prop-types */
const BadgeExample = ({ size, color }) => {
  return (
    <div
      style={{
        backgroundColor: color,
        border: '2px solid white',
        width: `${size}px`,
        height: `${size}px`,
        borderRadius: '50%',
      }}
    />
  );
};

storiesOf('Planets/Avatar', module)
  .addParameters({
    readme: {
      sidebar: Readme,
    },
  })
  .add(
    'Overview',
    () => (
      <Avatar
        loading={boolean('loading', false)}
        name={text('name', 'Helter Skelter')}
        imageUrl={text('imageUrl', 'https://picsum.photos/40')}
        size={text('size', 'small')}
      />
    ),
    {
      info: {
        inline: true,
        source: true,
      },
    }
  )
  .add(
    'Examples',
    () => (
      <div>
        <Paper style={{ marginBottom: '10px' }}>
          <h1>Loading</h1>
          <Avatar loading />
        </Paper>
        <Paper style={{ marginBottom: '10px' }}>
          <h1>Name, no image</h1>
          <Avatar name="Helter Skelter" />
        </Paper>
        <Paper style={{ marginBottom: '10px' }}>
          <h1>Name with Emoji, no image</h1>
          <Avatar name="Helter ❤️" />
        </Paper>
        <Paper style={{ marginBottom: '10px' }}>
          <h1>Name and image</h1>
          <Avatar name="Helter Skelter" imageUrl="https://picsum.photos/40" />
        </Paper>
        <Paper style={{ marginBottom: '10px' }}>
          <h1>Small, Medium, Large</h1>
          <Avatar size="small" imageUrl="https://picsum.photos/40" />
          <Avatar size="medium" imageUrl="https://picsum.photos/60" />
          <Avatar size="large" imageUrl="https://picsum.photos/100" />
        </Paper>
        <Paper style={{ marginBottom: '10px' }}>
          <h1>Any Size</h1>
          <Avatar size={67} imageUrl="https://picsum.photos/40" />
        </Paper>
        <Paper style={{ marginBottom: '10px' }}>
          <h1>With Addon (default)</h1>
          <Avatar name="Helter Skelter">
            <Avatar.Addon>
              <div style={badgeStyle} />
            </Avatar.Addon>
          </Avatar>
        </Paper>
        <Paper style={{ marginBottom: '10px' }}>
          <h1>With Addon (position)</h1>
          <Avatar name="Helter Skelter">
            <Avatar.Addon position="bottom-left">
              <div style={badgeStyle} />
            </Avatar.Addon>
          </Avatar>
        </Paper>
      </div>
    ),
    {
      info: {
        inline: false,
        source: true,
      },
    }
  );

storiesOf('Planets/Avatar/Moons', module)
  .addParameters({
    readme: {
      sidebar: AddonReadme,
    },
  })
  .add(
    'Overview',
    () => (
      <Avatar
        name="Helter Skelter"
        imageUrl={text('Avatar imageUrl', 'https://picsum.photos/60')}
        size={text('Avatar size', 'medium')}
      >
        <Avatar.Addon
          offset={text('offset', '-3')}
          position={select('position', positionOptions, 'bottom-right')}
        >
          <BadgeExample size={text('badge example size', 20)} color="#00f" />
        </Avatar.Addon>
      </Avatar>
    ),
    {
      info: {
        inline: true,
        source: true,
      },
    }
  );
