Migrate the project to use the new Icon component

Create IconOldTemplate providing interface similar with the previous
icon's version to simplify the migration

src/components/alt-button.js

@@ -18,7 +18,7 @@
 import React, { PropTypes } from 'react';
 import classNames from 'classnames';
 
-import Icon from './icon';
+import { OldIcon as Icon } from './icon';
 
 export default class AltButton extends React.Component {
   static defaultClassName = [
@@ -56,7 +56,7 @@ export default class AltButton extends React.Component {
       };
     } else {
       finalIcon = {
-        size: 'small',
+        size: 'big',
         color: 'gray',
         icon
       };

src/components/bio/card.js

@@ -18,13 +18,15 @@
 import React, { PropTypes } from 'react';
 import classNames from 'classnames';
 
-import Icon from '../icon';
+import { OldIcon as Icon } from '../icon';
+
+const ICON_SIZE = { inner: 'xxl', outer: 'l' };
 
 export default function BioCard({ className, icon, onClick, title, children }) {
   return (
     <div className={classNames('bio__card bio-card', className)}>
       <div className="bio-card__container" onClick={onClick}>
-        <Icon {...icon} className={classNames('bio-card__icon', icon.className)} />
+        <Icon size={ICON_SIZE} {...icon} className={classNames('bio-card__icon', icon.className)} />
         <div className="bio-card__title">{title}</div>
       </div>
       <div>{children}</div>

src/components/bio/informer.js

@@ -18,9 +18,11 @@
 import React from 'react';
 import Link from 'react-router/lib/Link';
 
-import Icon from '../icon';
+import { OldIcon as Icon } from '../icon';
 import BasicRiverItem from '../river/theme/basic';
 
+const ICON_SIZE = { inner: 'xl', outer: 'l' };
+
 export default function YourBioInformer({ username }) {
   return (
     <BasicRiverItem
@@ -30,6 +32,7 @@ export default function YourBioInformer({ username }) {
           className="bio__icon bio__icon--bordered bio__informer-icon"
           icon="exclamation-circle"
           pack="fa"
+          size={ICON_SIZE}
         />
       }
     >

src/components/bio/river.js

@@ -22,13 +22,15 @@ import isUndefined from 'lodash/isUndefined';
 import { getName } from '../../utils/user';
 import { PROFILE_POST_TYPES as t } from '../../consts/postTypeConstants';
 import BasicRiverItem from '../river/theme/basic';
-import Icon from '../icon';
+import { OldIcon as Icon } from '../icon';
 import Logo from '../logo';
 import Time from '../time';
 import User from '../user';
 import ProfilePost from './post';
 import PictureChangePost from './picture-change-post';
 
+const SIGNUP_ICON_SIZE = { inner: 'lm', outer: 's' };
+
 const SignUpIcon = ({ user }) => (
   <div className="bio__icon--type_signup layout layout-align_center layout-align_vertical">
     <User
@@ -40,6 +42,7 @@ const SignUpIcon = ({ user }) => (
       color="gray"
       icon="arrow-right"
       pack="fa"
+      size={SIGNUP_ICON_SIZE}
     />
     <Logo isLink={false} />
   </div>

src/components/breadcrumbs/breadcrumbs.js

@@ -22,7 +22,7 @@ import compact from 'lodash/compact';
 import keys from 'lodash/keys';
 import isEqual from 'lodash/isEqual';
 
-import Icon from '../icon';
+import { OldIcon as Icon } from '../icon';
 
 const defaultShortView = (
   <Icon

src/components/create-post.js

@@ -25,10 +25,12 @@ import { ArrayOfSchools as ArrayOfSchoolsPropType } from '../prop-types/schools'
 import { TAG_HASHTAG, TAG_LOCATION, TAG_SCHOOL } from '../consts/tags';
 import ClickOutsideComponentDecorator from '../decorators/ClickOutsideComponentDecorator';
 
-import Icon from './icon';
+import { OldIcon as Icon } from './icon';
 import Tag from './tag';
 import AddTagModal from './add-tag-modal';
 
+const MORE_ICON_SIZE = { inner: 'l', outer: 'm' };
+
 class CreatePost extends React.Component {
   static displayName = 'CreatePost';
   static propTypes = {
@@ -230,6 +232,7 @@ class CreatePost extends React.Component {
                 <Icon
                   className="more_button"
                   icon={expanded ? 'more_vert' : 'more_horiz'}
+                  size={MORE_ICON_SIZE}
                   onClick={this._handleClickOnMore}
                 />
                 {expanded &&

src/components/dropdown/v1.js

@@ -20,12 +20,32 @@ import classNames from 'classnames';
 import omit from 'lodash/omit';
 
 import ClickOutsideComponentDecorator from '../../decorators/ClickOutsideComponentDecorator';
-import Icon from '../icon';
+import { OldIcon as Icon } from '../icon';
+
+const getIcon = (icon) => {
+  let props;
+  if (icon && typeof icon === 'object') {
+    props = icon;
+  } else {
+    props = { icon };
+  }
+
+  return (
+    <Icon
+      className="micon micon-small"
+      key="icon"
+      {...props}
+    />
+  );
+};
 
 class OpenedDropdownContent extends React.Component {
   static propTypes = {
     children: PropTypes.node,
-    icon: PropTypes.string,
+    icon: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.shape(Icon.propTypes)
+    ]),
     onClose: PropTypes.func
   };
 
@@ -41,7 +61,7 @@ class OpenedDropdownContent extends React.Component {
     return (
       <div>
         <div className="dropdown__trigger action" onClick={this.props.onClose}>
-          <Icon className="micon micon-small" icon={this.props.icon} />
+          {this.props.icon}
         </div>
         {this.props.children &&
           <div className="dropdown__body">
@@ -53,7 +73,10 @@ class OpenedDropdownContent extends React.Component {
   }
 }
 
-const defaultIcon = 'arrow_drop_down';
+const defaultIcon = {
+  icon: 'arrow_drop_down', size: { inner: 'lm', outer: 's' }
+};
+
 const Body = ClickOutsideComponentDecorator(OpenedDropdownContent);
 
 export default class Dropdown extends React.Component {
@@ -104,6 +127,8 @@ export default class Dropdown extends React.Component {
       i = defaultIcon;
     }
 
+    i = getIcon(i);
+
     let body;
     let dropdownClassName = classNames(
       'dropdown',
@@ -119,9 +144,10 @@ export default class Dropdown extends React.Component {
       );
     } else {
       dropdownClassName += ' dropdown-closed';
+
       body = (
         <div className="dropdown__trigger action" onClick={this.toggleVisibility}>
-          <Icon className="micon micon-small" icon={i} />
+          {i}
         </div>
       );
     }

src/components/dropdown/v2.js

@@ -20,7 +20,7 @@ import classNames from 'classnames';
 import omit from 'lodash/omit';
 
 import ClickOutsideComponentDecorator from '../../decorators/ClickOutsideComponentDecorator';
-import Icon from '../icon';
+import { OldIcon as Icon } from '../icon';
 
 class OpenedDropdownV2Content extends React.Component {
   static propTypes = {
@@ -54,7 +54,12 @@ class OpenedDropdownV2Content extends React.Component {
 }
 
 const Body = ClickOutsideComponentDecorator(OpenedDropdownV2Content);
-export const defaultIcon = <Icon className="micon micon-small" icon="arrow_drop_down" />;
+
+const ICON_SIZE = { inner: 'lm', outer: 's' };
+
+export const defaultIcon = (
+  <Icon icon="arrow_drop_down" size={ICON_SIZE} />
+);
 
 export default class DropdownV2 extends React.Component {
   static displayName = 'DropdownV2';

src/components/form/field/index.js

@@ -19,7 +19,7 @@ import React, { PropTypes } from 'react';
 import classNames from 'classnames';
 import omit from 'lodash/omit';
 
-import Icon from '../../icon';
+import { OldIcon as Icon } from '../../icon';
 
 const STATUS_ICONS = {
   invalid: {
@@ -33,6 +33,8 @@ const STATUS_ICONS = {
   unfilled: {}
 };
 
+const DOT_ICON_SIZE = { outer: 'l', inner: 's' };
+
 export default class FormField extends React.Component {
   static propTypes = {
     className: PropTypes.string,
@@ -94,7 +96,7 @@ export default class FormField extends React.Component {
         className="form__dot"
         color={dotColor}
         icon="fiber-manual-record"
-        size="common"
+        size={DOT_ICON_SIZE}
       />
     );
 

src/components/icon/index.js

@@ -17,3 +17,4 @@
 */
 export { default } from './icon';
 export { default as CommonIcon } from './templates/common';
+export { default as OldIcon } from './templates/old';

src/components/icon/templates/old.js

@@ -0,0 +1,75 @@
+/*
+ This file is a part of libertysoil.org website
+ Copyright (C) 2017  Loki Education (Social Enterprise)
+
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU Affero General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU Affero General Public License for more details.
+
+ You should have received a copy of the GNU Affero General Public License
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+import React, { PropTypes } from 'react';
+import omit from 'lodash/omit';
+
+import CommonIcon from './common';
+
+function translateSize(size) {
+  switch (size) {
+    case 'small':  return 's';
+    case 'big':    return 'm';
+    case 'block':  return 'l';
+    case 'common': return 'l';
+    default:       return size;
+  }
+}
+
+function translateOutline(outline) {
+  const props = {};
+
+  if (typeof outline === 'string') {
+    props.bg = outline;
+  } else if (outline) {
+    props.bg = 'white';
+  } else {
+    return props;
+  }
+
+  props.round = true;
+  return props;
+}
+
+export default class IconOldTemplate extends React.PureComponent {
+  static displayName = 'IconOldTemplate';
+
+  static propTypes = {
+    icon: PropTypes.string,
+    outline: PropTypes.oneOfType([
+      PropTypes.bool,
+      PropTypes.string
+    ]),
+    size: PropTypes.string
+  };
+
+  static defaultProps = {
+    size: 'small'
+  };
+
+  render() {
+    return (
+      <CommonIcon
+        size={translateSize(this.props.size)}
+        {...translateOutline(this.props.outline)}
+        {...omit(this.props, KNOWN_PROPS)}
+      >{this.props.icon}</CommonIcon>
+    );
+  }
+}
+
+const KNOWN_PROPS = Object.keys(IconOldTemplate.propTypes);

src/components/ignore-button.js

@@ -16,7 +16,9 @@
  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import React from 'react';
-import Icon from './icon';
+import { OldIcon as Icon } from './icon';
+
+const ICON_SIZE = { inner: 'lm', outer: 'm' };
 
 export default class IgnoreButton extends React.Component {
   static displayName = 'IgnoreButton';
@@ -39,6 +41,7 @@ export default class IgnoreButton extends React.Component {
         className="suggested-user__button suggested-user__button-ignore button-light_gray action"
         icon="angle-right"
         pack="fa"
+        size={ICON_SIZE}
         title="Ignore"
         onClick={this.clickHandler}
       />

src/components/like-tag-button.js

@@ -19,7 +19,9 @@ import React, { PropTypes } from 'react';
 import ga from 'react-google-analytics';
 import { omit } from 'lodash';
 
-import Icon from './icon';
+import { OldIcon as Icon } from './icon';
+
+const ICON_SIZE = { inner: 'lm', outer: 'm' };
 
 /**
  * Universal component to use in the TagPage, SchoolPage, GeotagPage components.
@@ -80,9 +82,10 @@ export default class LikeTagButton extends React.Component {
       <Icon
         {...iconProps}
         className={`action ${className}`}
-        onClick={this._toggleLike}
         icon={icon}
         color={color}
+        size={ICON_SIZE}
+        onClick={this._toggleLike}
       />
     );
   }

src/components/login/v2.js

@@ -45,7 +45,7 @@ const ERROR_MESSAGES = [
 
 const ERROR_TAG_MAPPING = {
   'login.errors.invalid': {
-    icon: { color: 'orange', icon: 'question-circle' },
+    icon: { color: 'orange', icon: 'question-circle', size: { outer: undefined, inner: 'l' } },
     name: { name: (translate) => translate('login.qs.forget_pass') },
     url: '/resetpassword'
   }