Merge pull request #419 from sharetribe/reorganize-icons

Reorganize icons

src/components/AddImages/AddImages.js

@@ -10,7 +10,7 @@
 import React, { PropTypes } from 'react';
 import { SortableContainer } from 'react-sortable-hoc';
 import classNames from 'classnames';
-import { ImageFromFile, ResponsiveImage, SpinnerIcon } from '../../components';
+import { ImageFromFile, ResponsiveImage, IconSpinner } from '../../components';
 
 import css from './AddImages.css';
 import RemoveImageButton from './RemoveImageButton';
@@ -28,7 +28,7 @@ const ThumbnailWrapper = props => {
 
     // While image is uploading we show overlay on top of thumbnail
     const uploadingOverlay = !image.imageId
-      ? <div className={css.thumbnailLoading}><SpinnerIcon /></div>
+      ? <div className={css.thumbnailLoading}><IconSpinner /></div>
       : null;
 
     return (

src/components/HeroSection/HeroSection.js

@@ -1,7 +1,7 @@
 import React, { PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
-import { SearchIcon, Button } from '../../components';
+import { IconSearch, Button } from '../../components';
 import { LocationSearchForm } from '../../containers';
 import { stringify } from '../../util/urlHelpers';
 import { createResourceLocatorString } from '../../util/routes';
@@ -36,7 +36,7 @@ const HeroSection = props => {
         <FormattedMessage id="HeroSection.subTitle" />
       </p>
       <Button className={css.mobileSearchButton} onClick={handleMobileSearchClick}>
-        <SearchIcon rootClassName={css.searchIcon} />
+        <IconSearch rootClassName={css.searchIcon} />
         <FormattedMessage id="HeroSection.mobileSearchButtonText" />
       </Button>
       <LocationSearchForm className={css.desktopSearchForm} onSubmit={handleSearchSubmit} />

src/components/IconBannedUser/IconBannedUser.example.js

@@ -0,0 +1,7 @@
+import IconBannedUser from './IconBannedUser';
+
+export const Icon = {
+  component: IconBannedUser,
+  props: {},
+  group: 'icons',
+};

src/components/IconClose/IconClose.example.js

@@ -0,0 +1,7 @@
+import IconClose from './IconClose';
+
+export const Icon = {
+  component: IconClose,
+  props: {},
+  group: 'icons',
+};

src/components/IconClose/IconClose.js

@@ -1,9 +1,9 @@
 import React, { PropTypes } from 'react';
 import classNames from 'classnames';
 
-import css from './CloseIcon.css';
+import css from './IconClose.css';
 
-const CloseIcon = props => {
+const IconClose = props => {
   const { className, rootClassName } = props;
   const classes = classNames(rootClassName || css.root, className);
 
@@ -25,14 +25,14 @@ const CloseIcon = props => {
 
 const { string } = PropTypes;
 
-CloseIcon.defaultProps = {
+IconClose.defaultProps = {
   className: null,
   rootClassName: null,
 };
 
-CloseIcon.propTypes = {
+IconClose.propTypes = {
   className: string,
   rootClassName: string,
 };
 
-export default CloseIcon;
+export default IconClose;

src/components/IconEmailAttention/IconEmailAttention.example.js

@@ -0,0 +1,7 @@
+import IconEmailAttention from './IconEmailAttention';
+
+export const Icon = {
+  component: IconEmailAttention,
+  props: {},
+  group: 'icons',
+};

src/components/IconEmailSent/IconEmailSent.example.js

@@ -0,0 +1,7 @@
+import IconEmailSent from './IconEmailSent';
+
+export const Icon = {
+  component: IconEmailSent,
+  props: {},
+  group: 'icons',
+};

src/components/IconEmailSuccess/IconEmailSuccess.example.js

@@ -0,0 +1,7 @@
+import IconEmailSuccess from './IconEmailSuccess';
+
+export const Icon = {
+  component: IconEmailSuccess,
+  props: {},
+  group: 'icons',
+};

src/components/IconKeys/IconKeys.example.js

@@ -0,0 +1,7 @@
+import IconKeys from './IconKeys';
+
+export const Icon = {
+  component: IconKeys,
+  props: {},
+  group: 'icons',
+};

src/components/IconKeys/IconKeys.js

@@ -1,6 +1,6 @@
 import React, { PropTypes } from 'react';
 
-const KeysIcon = props => {
+const IconKeys = props => {
   const { className } = props;
   return (
     <svg
@@ -46,12 +46,12 @@ const KeysIcon = props => {
   );
 };
 
-KeysIcon.defaultProps = { className: null };
+IconKeys.defaultProps = { className: null };
 
 const { string } = PropTypes;
 
-KeysIcon.propTypes = {
+IconKeys.propTypes = {
   className: string,
 };
 
-export default KeysIcon;
+export default IconKeys;

src/components/IconKeysSuccess/IconKeysSuccess.example.js

@@ -0,0 +1,7 @@
+import IconKeysSuccess from './IconKeysSuccess';
+
+export const Icon = {
+  component: IconKeysSuccess,
+  props: {},
+  group: 'icons',
+};

src/components/IconKeysSuccess/IconKeysSuccess.js

@@ -1,6 +1,6 @@
 import React, { PropTypes } from 'react';
 
-const KeysIconSuccess = props => {
+const IconKeysSuccess = props => {
   const { className } = props;
   return (
     <svg className={className} width="52" height="60" xmlns="http://www.w3.org/2000/svg">
@@ -46,12 +46,12 @@ const KeysIconSuccess = props => {
   );
 };
 
-KeysIconSuccess.defaultProps = { className: null };
+IconKeysSuccess.defaultProps = { className: null };
 
 const { string } = PropTypes;
 
-KeysIconSuccess.propTypes = {
+IconKeysSuccess.propTypes = {
   className: string,
 };
 
-export default KeysIconSuccess;
+export default IconKeysSuccess;

src/components/IconSearch/IconSearch.example.js

@@ -0,0 +1,7 @@
+import IconSearch from './IconSearch';
+
+export const Icon = {
+  component: IconSearch,
+  props: {},
+  group: 'icons',
+};

src/components/IconSearch/IconSearch.js

@@ -1,9 +1,9 @@
 import React, { PropTypes } from 'react';
 import classNames from 'classnames';
 
-import css from './SearchIcon.css';
+import css from './IconSearch.css';
 
-const SearchIcon = props => {
+const IconSearch = props => {
   const { rootClassName, className } = props;
   const classes = classNames(rootClassName || css.root, className);
   return (
@@ -28,16 +28,16 @@ const SearchIcon = props => {
   );
 };
 
-SearchIcon.defaultProps = {
+IconSearch.defaultProps = {
   rootClassName: null,
   className: null,
 };
 
 const { string } = PropTypes;
 
-SearchIcon.propTypes = {
+IconSearch.propTypes = {
   rootClassName: string,
   className: string,
 };
 
-export default SearchIcon;
+export default IconSearch;

src/components/IconSpinner/IconSpinner.example.js

@@ -0,0 +1,7 @@
+import IconSpinner from './IconSpinner';
+
+export const Icon = {
+  component: IconSpinner,
+  props: {},
+  group: 'icons',
+};

src/components/IconSpinner/IconSpinner.js

@@ -1,11 +1,11 @@
 import React, { PropTypes } from 'react';
 import classNames from 'classnames';
 
-import css from './SpinnerIcon.css';
+import css from './IconSpinner.css';
 
 // TODO: SVG needs to be changed so that it doesn't take 100x100 area,
 // but just a little bit more than what actual spinner takes (~26px)
-const SpinnerIcon = props => {
+const IconSpinner = props => {
   const { rootClassName, className } = props;
   const classes = classNames(rootClassName || css.root, className);
   return (
@@ -40,16 +40,16 @@ const SpinnerIcon = props => {
   );
 };
 
-SpinnerIcon.defaultProps = {
+IconSpinner.defaultProps = {
   rootClassName: null,
   className: null,
 };
 
 const { string } = PropTypes;
 
-SpinnerIcon.propTypes = {
+IconSpinner.propTypes = {
   rootClassName: string,
   className: string,
 };
 
-export default SpinnerIcon;
+export default IconSpinner;

src/components/ManageListingCard/ManageListingCard.js

@@ -18,7 +18,7 @@ import {
   NamedLink,
   PrimaryButton,
   SecondaryButton,
-  SpinnerIcon,
+  IconSpinner,
   ResponsiveImage,
 } from '../../components';
 import config from '../../config';
@@ -147,7 +147,7 @@ export const ManageListingCardComponent = props => {
       >
         <div className={css.loadingOverlay} />
         <div className={css.loadingOverlayContent}>
-          <SpinnerIcon />
+          <IconSpinner />
         </div>
       </div>
     : errorOverlay;

src/components/Modal/Modal.js

@@ -11,7 +11,7 @@
 import React, { Component, PropTypes } from 'react';
 import classNames from 'classnames';
 import { FormattedMessage, intlShape, injectIntl } from 'react-intl';
-import { Button, CloseIcon } from '../../components';
+import { Button, IconClose } from '../../components';
 
 import css from './Modal.css';
 
@@ -81,7 +81,7 @@ export class ModalComponent extends Component {
           <span className={css.closeText}>
             {closeButtonMessage || <FormattedMessage id="Modal.close" />}
           </span>
-          <CloseIcon rootClassName={css.closeIcon} />
+          <IconClose rootClassName={css.closeIcon} />
         </Button>
       : null;
 

src/components/index.js

@@ -3,7 +3,6 @@ import Avatar, { AvatarMedium, AvatarLarge } from './Avatar/Avatar';
 import BirthdayInputField from './BirthdayInputField/BirthdayInputField';
 import BookingBreakdown from './BookingBreakdown/BookingBreakdown';
 import Button, { PrimaryButton, SecondaryButton, InlineTextButton } from './Button/Button';
-import CloseIcon from './CloseIcon/CloseIcon';
 import CurrencyInputField from './CurrencyInputField/CurrencyInputField';
 import DateInputField from './DateInputField/DateInputField';
 import DateRangeInputField from './DateRangeInputField/DateRangeInputField';
@@ -13,18 +12,21 @@ import EditListingLocationPanel from './EditListingLocationPanel/EditListingLoca
 import EditListingPhotosPanel from './EditListingPhotosPanel/EditListingPhotosPanel';
 import EditListingPricingPanel from './EditListingPricingPanel/EditListingPricingPanel';
 import EditListingWizard from './EditListingWizard/EditListingWizard';
-import ExternalLink from './ExternalLink/ExternalLink';
 import ExpandingTextarea from './ExpandingTextarea/ExpandingTextarea';
+import ExternalLink from './ExternalLink/ExternalLink';
 import FilterPanel from './FilterPanel/FilterPanel';
 import HeroSection from './HeroSection/HeroSection';
 import IconBannedUser from './IconBannedUser/IconBannedUser';
+import IconClose from './IconClose/IconClose';
 import IconEmailAttention from './IconEmailAttention/IconEmailAttention';
 import IconEmailSent from './IconEmailSent/IconEmailSent';
 import IconEmailSuccess from './IconEmailSuccess/IconEmailSuccess';
+import IconKeys from './IconKeys/IconKeys';
+import IconKeysSuccess from './IconKeysSuccess/IconKeysSuccess';
+import IconSearch from './IconSearch/IconSearch';
+import IconSpinner from './IconSpinner/IconSpinner';
 import ImageCarousel from './ImageCarousel/ImageCarousel';
 import ImageFromFile from './ImageFromFile/ImageFromFile';
-import KeysIcon from './KeysIcon/KeysIcon';
-import KeysIconSuccess from './KeysIconSuccess/KeysIconSuccess';
 import ListingCard from './ListingCard/ListingCard';
 import LocationAutocompleteInput, {
   LocationAutocompleteInputField,
@@ -49,14 +51,12 @@ import Promised from './Promised/Promised';
 import ResponsiveImage from './ResponsiveImage/ResponsiveImage';
 import RoutesProvider from './RoutesProvider/RoutesProvider';
 import SaleDetailsPanel from './SaleDetailsPanel/SaleDetailsPanel';
-import SearchIcon from './SearchIcon/SearchIcon';
 import SearchMap from './SearchMap/SearchMap';
 import SearchMapGroupLabel from './SearchMapGroupLabel/SearchMapGroupLabel';
 import SearchMapInfoCard from './SearchMapInfoCard/SearchMapInfoCard';
 import SearchMapPriceLabel from './SearchMapPriceLabel/SearchMapPriceLabel';
 import SearchResultsPanel from './SearchResultsPanel/SearchResultsPanel';
 import SelectField from './SelectField/SelectField';
-import SpinnerIcon from './SpinnerIcon/SpinnerIcon';
 import StripeBankAccountTokenInputField
   from './StripeBankAccountTokenInputField/StripeBankAccountTokenInputField';
 import TabNav from './TabNav/TabNav';
@@ -77,7 +77,6 @@ export {
   BirthdayInputField,
   BookingBreakdown,
   Button,
-  CloseIcon,
   CurrencyInputField,
   DateInputField,
   DateRangeInputField,
@@ -92,14 +91,17 @@ export {
   FilterPanel,
   HeroSection,
   IconBannedUser,
+  IconClose,
   IconEmailAttention,
   IconEmailSent,
   IconEmailSuccess,
+  IconKeys,
+  IconKeysSuccess,
+  IconSearch,
+  IconSpinner,
   ImageCarousel,
   ImageFromFile,
   InlineTextButton,
-  KeysIcon,
-  KeysIconSuccess,
   ListingCard,
   LocationAutocompleteInput,
   LocationAutocompleteInputField,
@@ -124,7 +126,6 @@ export {
   ResponsiveImage,
   RoutesProvider,
   SaleDetailsPanel,
-  SearchIcon,
   SearchMap,
   SearchMapGroupLabel,
   SearchMapInfoCard,
@@ -132,7 +133,6 @@ export {
   SearchResultsPanel,
   SecondaryButton,
   SelectField,
-  SpinnerIcon,
   StripeBankAccountTokenInputField,
   TabNav,
   TabNavHorizontal,

src/containers/AuthenticationPage/AuthenticationPage.js

@@ -18,7 +18,7 @@ import {
   Topbar,
   IconEmailSent,
   InlineTextButton,
-  CloseIcon,
+  IconClose,
 } from '../../components';
 import { LoginForm, SignupForm } from '../../containers';
 import { login, logout, authenticationInProgress, signup } from '../../ducks/Auth.duck';
@@ -168,7 +168,7 @@ export const AuthenticationPageComponent = props => {
         <span className={css.closeText}>
           <FormattedMessage id="AuthenticationPage.verifyEmailClose" />
         </span>
-        <CloseIcon rootClassName={css.closeIcon} />
+        <IconClose rootClassName={css.closeIcon} />
       </NamedLink>
       <IconEmailSent />
       <h1 className={css.verifyTitle}>

src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js

@@ -16,7 +16,7 @@ import {
   retypePasswordRecoveryEmail,
   clearPasswordRecoveryError,
 } from './PasswordRecoveryPage.duck';
-import { PageLayout, Topbar, InlineTextButton, KeysIcon } from '../../components';
+import { PageLayout, Topbar, InlineTextButton, IconKeys } from '../../components';
 import { PasswordRecoveryForm } from '../../containers';
 
 import DoorIcon from './DoorIcon';
@@ -68,7 +68,7 @@ export const PasswordRecoveryPageComponent = props => {
 
   const submitEmailContent = (
     <div className={css.submitEmailContent}>
-      <KeysIcon />
+      <IconKeys />
       <h1 className={css.title}>
         <FormattedMessage id="PasswordRecoveryPage.forgotPasswordTitle" />
       </h1>
@@ -90,7 +90,7 @@ export const PasswordRecoveryPageComponent = props => {
 
   const emailSubmittedContent = (
     <div className={css.emailSubmittedContent}>
-      <KeysIcon />
+      <IconKeys />
       <h1 className={css.title}>
         <FormattedMessage id="PasswordRecoveryPage.emailSubmittedTitle" />
       </h1>
@@ -137,7 +137,7 @@ export const PasswordRecoveryPageComponent = props => {
 
   const genericErrorContent = (
     <div className={css.genericErrorContent}>
-      <KeysIcon />
+      <IconKeys />
       <h1 className={css.title}>
         <FormattedMessage id="PasswordRecoveryPage.actionFailedTitle" />
       </h1>

src/containers/PasswordRecoveryPage/__snapshots__/PasswordRecoveryPage.test.js.snap

@@ -27,7 +27,7 @@ exports[`ContactDetailsPage matches snapshot 1`] = `
     sendVerificationEmailInProgress={false} />
   <div>
     <div>
-      <KeysIcon
+      <IconKeys
         className={null} />
       <h1>
         <FormattedMessage

src/containers/PasswordResetPage/PasswordResetPage.js

@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 import * as propTypes from '../../util/propTypes';
-import { PageLayout, Topbar, NamedLink, KeysIcon, KeysIconSuccess } from '../../components';
+import { PageLayout, Topbar, NamedLink, IconKeys, IconKeysSuccess } from '../../components';
 import { PasswordResetForm } from '../../containers';
 import { sendVerificationEmail } from '../../ducks/user.duck';
 import { logout, authenticationInProgress } from '../../ducks/Auth.duck';
@@ -81,7 +81,7 @@ export class PasswordResetPageComponent extends Component {
 
     const resetFormContent = (
       <div className={css.content}>
-        <KeysIcon />
+        <IconKeys />
         <h1 className={css.mainHeading}>
           <FormattedMessage id="PasswordResetPage.mainHeading" />
         </h1>
@@ -103,7 +103,7 @@ export class PasswordResetPageComponent extends Component {
 
     const resetDoneContent = (
       <div className={css.content}>
-        <KeysIconSuccess />
+        <IconKeysSuccess />
         <h1 className={css.mainHeading}>
           <FormattedMessage id="PasswordResetPage.passwordChangedHeading" />
         </h1>

src/containers/ProfileSettingsForm/ProfileSettingsForm.js

@@ -5,7 +5,7 @@ import { Field, reduxForm, propTypes as formPropTypes } from 'redux-form';
 import classNames from 'classnames';
 import { ensureCurrentUser } from '../../util/data';
 import * as validators from '../../util/validators';
-import { Avatar, Button, ImageFromFile, SpinnerIcon, TextInputField } from '../../components';
+import { Avatar, Button, ImageFromFile, IconSpinner, TextInputField } from '../../components';
 
 import css from './ProfileSettingsForm.css';
 
@@ -131,7 +131,7 @@ class ProfileSettingsFormComponent extends Component {
     const lastNameRequired = validators.required(lastNameRequiredMessage);
 
     const uploadingOverlay = uploadInProgress || this.state.uploadDelay
-      ? <div className={css.uploadingImageOverlay}><SpinnerIcon /></div>
+      ? <div className={css.uploadingImageOverlay}><IconSpinner /></div>
       : null;
 
     const hasUploadError = !!uploadImageError && !uploadInProgress;

src/containers/index.js

@@ -18,10 +18,10 @@ import LoginForm from './LoginForm/LoginForm';
 import ManageListingsPage from './ManageListingsPage/ManageListingsPage';
 import NotFoundPage from './NotFoundPage/NotFoundPage';
 import OrderPage from './OrderPage/OrderPage';
-import PasswordResetForm from './PasswordResetForm/PasswordResetForm';
-import PasswordResetPage from './PasswordResetPage/PasswordResetPage';
 import PasswordRecoveryForm from './PasswordRecoveryForm/PasswordRecoveryForm';
 import PasswordRecoveryPage from './PasswordRecoveryPage/PasswordRecoveryPage';
+import PasswordResetForm from './PasswordResetForm/PasswordResetForm';
+import PasswordResetPage from './PasswordResetPage/PasswordResetPage';
 import PayoutDetailsForm from './PayoutDetailsForm/PayoutDetailsForm';
 import PayoutPreferencesPage from './PayoutPreferencesPage/PayoutPreferencesPage';
 import ProfilePage from './ProfilePage/ProfilePage';
@@ -56,10 +56,10 @@ export {
   ManageListingsPage,
   NotFoundPage,
   OrderPage,
-  PasswordResetForm,
-  PasswordResetPage,
   PasswordRecoveryForm,
   PasswordRecoveryPage,
+  PasswordResetForm,
+  PasswordResetPage,
   PayoutDetailsForm,
   PayoutPreferencesPage,
   ProfilePage,

src/examples.js

@@ -9,16 +9,25 @@ import * as DateInputField from './components/DateInputField/DateInputField.exam
 import * as DateRangeInputField from './components/DateRangeInputField/DateRangeInputField.example';
 import * as EditListingWizard from './components/EditListingWizard/EditListingWizard.example';
 import * as ExpandingTextarea from './components/ExpandingTextarea/ExpandingTextarea.example';
+import * as IconBannedUser from './components/IconBannedUser/IconBannedUser.example';
+import * as IconClose from './components/IconClose/IconClose.example';
+import * as IconEmailAttention from './components/IconEmailAttention/IconEmailAttention.example';
+import * as IconEmailSent from './components/IconEmailSent/IconEmailSent.example';
+import * as IconEmailSuccess from './components/IconEmailSuccess/IconEmailSuccess.example';
+import * as IconKeys from './components/IconKeys/IconKeys.example';
+import * as IconKeysSuccess from './components/IconKeysSuccess/IconKeysSuccess.example';
+import * as IconSearch from './components/IconSearch/IconSearch.example';
+import * as IconSpinner from './components/IconSpinner/IconSpinner.example';
 import * as ImageCarousel from './components/ImageCarousel/ImageCarousel.example';
 import * as ListingCard from './components/ListingCard/ListingCard.example';
+import * as LocationAutocompleteInput
+  from './components/LocationAutocompleteInput/LocationAutocompleteInput.example';
 import * as ManageListingCard from './components/ManageListingCard/ManageListingCard.example';
 import * as Map from './components/Map/Map.example';
 import * as Menu from './components/Menu/Menu.example';
 import * as Modal from './components/Modal/Modal.example';
 import * as ModalInMobile from './components/ModalInMobile/ModalInMobile.example';
 import * as NamedLink from './components/NamedLink/NamedLink.example';
-import * as LocationAutocompleteInput
-  from './components/LocationAutocompleteInput/LocationAutocompleteInput.example';
 import * as PaginationLinks from './components/PaginationLinks/PaginationLinks.example';
 import * as ResponsiveImage from './components/ResponsiveImage/ResponsiveImage.example';
 import * as SelectField from './components/SelectField/SelectField.example';
@@ -43,9 +52,9 @@ import * as EditListingPhotosForm
 import * as EditListingPricingForm
   from './containers/EditListingPricingForm/EditListingPricingForm.example';
 import * as LoginForm from './containers/LoginForm/LoginForm.example';
-import * as PasswordResetForm from './containers/PasswordResetForm/PasswordResetForm.example';
 import * as PasswordRecoveryForm
   from './containers/PasswordRecoveryForm/PasswordRecoveryForm.example';
+import * as PasswordResetForm from './containers/PasswordResetForm/PasswordResetForm.example';
 import * as PayoutDetailsForm from './containers/PayoutDetailsForm/PayoutDetailsForm.example';
 import * as SignupForm from './containers/SignupForm/SignupForm.example';
 import * as StripePaymentForm from './containers/StripePaymentForm/StripePaymentForm.example';
@@ -69,6 +78,15 @@ export {
   EditListingPricingForm,
   EditListingWizard,
   ExpandingTextarea,
+  IconBannedUser,
+  IconClose,
+  IconEmailAttention,
+  IconEmailSent,
+  IconEmailSuccess,
+  IconKeys,
+  IconKeysSuccess,
+  IconSearch,
+  IconSpinner,
   ImageCarousel,
   ListingCard,
   LocationAutocompleteInput,
@@ -80,8 +98,8 @@ export {
   ModalInMobile,
   NamedLink,
   PaginationLinks,
-  PasswordResetForm,
   PasswordRecoveryForm,
+  PasswordResetForm,
   PayoutDetailsForm,
   ResponsiveImage,
   SelectField,