Merge branch 'master' of https://github.com/zanata/zanata-platform

server/zanata-frontend/src/frontend/.storybook-editor/config.js

@@ -5,9 +5,6 @@ import { locale, formats } from '../app/editor/config/intl'
 import { addDecorator, configure } from '@kadira/storybook'
 import './storybook.css'
 
-// As long as we use any zanata-ui components, we should keep this import
-import 'zanata-ui/dist/zanata-ui.css'
-
 // fonts are included in index.html for the app, but storybook does not use that
 var fontLink = document.createElement('link')
 fontLink.setAttribute('href', 'http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,400italic') // eslint-disable-line max-len

server/zanata-frontend/src/frontend/app/editor/components/DocsDropdown/DocsDropdown.test.js

@@ -4,7 +4,8 @@ import React from 'react'
 import ReactDOMServer from 'react-dom/server'
 import DocsDropdown from '.'
 import Dropdown from '../Dropdown'
-import { Icon, Row } from 'zanata-ui'
+import { Icon } from '../../../components'
+import { Row } from 'react-bootstrap'
 
 describe('DocsDropdownTest', () => {
   it('DocsDropdown markup', () => {
@@ -40,7 +41,7 @@ describe('DocsDropdownTest', () => {
             <Row>
               gastropod.txt
               <div className="u-sML-1-8 Dropdown-toggleIcon">
-                <Icon name="chevron-down" size="1" />
+                <Icon name="chevron-down" className="s1" />
               </div>
             </Row>
           </button>

server/zanata-frontend/src/frontend/app/editor/components/DocsDropdown/index.js

@@ -1,6 +1,7 @@
 import Dropdown from '../Dropdown'
-import { Icon, Row } from 'zanata-ui'
+import { Icon } from '../../../components'
 import React, { PropTypes } from 'react'
+import { Row } from 'react-bootstrap'
 
 /**
  * Dropdown to select the current document to work on.
@@ -54,7 +55,7 @@ const DocsDropdown = React.createClass({
             <Row>
               {selectedDoc}
               <div className="u-sML-1-8 Dropdown-toggleIcon">
-                <Icon name="chevron-down" size="1" />
+                <Icon name="chevron-down" className="s1" />
               </div>
             </Row>
           </button>

server/zanata-frontend/src/frontend/app/editor/components/EditorSearchInput/EditorSearchInput.test.js

@@ -4,9 +4,9 @@ import React from 'react'
 import ReactDOMServer from 'react-dom/server'
 import TestUtils from 'react-addons-test-utils'
 import EditorSearchInput from '.'
-import { Icon, Row } from 'zanata-ui'
+import { Icon } from '../../../components'
 import IconButton from '../IconButton'
-import { Panel, Button } from 'react-bootstrap'
+import { Panel, Button, Row } from 'react-bootstrap'
 
 describe('EditorSearchInputTest', () => {
   it('renders input markup with show advanced but not focused', () => {
@@ -32,7 +32,7 @@ describe('EditorSearchInputTest', () => {
       <div>
         <div className="InputGroup InputGroup--outlined InputGroup--rounded">
           <span className="InputGroup-addon">
-            <Icon name="search" title="Search" size="n1" />
+            <Icon name="search" title="Search" className="n1" />
           </span>
           <input type="search"
             placeholder="Search source and target text"

server/zanata-frontend/src/frontend/app/editor/components/EditorSearchInput/index.js

@@ -20,7 +20,7 @@
  */
 
 import cx from 'classnames'
-import { Icon } from 'zanata-ui'
+import { Icon } from '../../../components'
 import IconButton from '../IconButton'
 import React, { PropTypes } from 'react'
 import { Panel, Button } from 'react-bootstrap'
@@ -187,7 +187,7 @@ const EditorSearchInput = React.createClass({
           <span className="InputGroup-addon"
             onClick={this.focusInput}>
             <Icon name="search" title="Search"
-              size="n1" />
+              className="n1" />
           </span>
           <input ref="input"
             type="search"

server/zanata-frontend/src/frontend/app/editor/components/FilterToggle/index.js

@@ -20,7 +20,8 @@
  */
 
 import cx from 'classnames'
-import { Icon, Row } from 'zanata-ui'
+import { Icon } from '../../../components'
+import { Row } from 'react-bootstrap'
 import React, { PropTypes } from 'react'
 
 /**
@@ -52,7 +53,7 @@ const FilterToggle = React.createClass({
 
   render: function () {
     const className = cx('Toggle u-round', this.props.className)
-    const dot = this.props.withDot && <Icon name="dot" size="n1" />
+    const dot = this.props.withDot && <Icon name="dot" className="n1" />
 
     return (
       <div className={className}>

server/zanata-frontend/src/frontend/app/editor/components/IconButton/IconButton.test.js

@@ -4,7 +4,7 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import ReactDOMServer from 'react-dom/server'
 import TestUtils from 'react-addons-test-utils'
-import { Icon } from 'zanata-ui'
+import { Icon } from '../../../components'
 import IconButton from '.'
 
 describe('IconButtonTest', () => {
@@ -23,8 +23,8 @@ describe('IconButtonTest', () => {
         onClick={clickFun}
         title="Mozart">
         <Icon
-          name="classical" size="1"
-          title="Mozart" />
+          name="classical" title="Mozart"
+          className="s1" />
       </button>
     )
     expect(actual).toEqual(expected)
@@ -48,7 +48,7 @@ describe('IconButtonTest', () => {
         <Icon
           name="tea"
           title="Tea"
-          size="1" />
+          className="s1" />
       </button>
     )
     expect(actual).toEqual(expected)

server/zanata-frontend/src/frontend/app/editor/components/IconButton/index.js

@@ -1,5 +1,5 @@
 import Button from '../Button'
-import { Icon } from 'zanata-ui'
+import { Icon } from '../../../components'
 import React, { PropTypes } from 'react'
 
 /**
@@ -17,16 +17,17 @@ const IconButton = React.createClass({
   },
 
   render: function () {
+    const iconSize = this.props.iconSize || 's1'
     return (
       <Button
         className={this.props.className}
         disabled={this.props.disabled}
         onClick={this.props.onClick}
         title={this.props.title}>
         <Icon
-          size={this.props.iconSize || '1'}
-          name={this.props.icon}
-          title={this.props.title} />
+          title={this.props.title}
+          className={iconSize}
+          name={this.props.icon} />
       </Button>
     )
   }

server/zanata-frontend/src/frontend/app/editor/components/LanguagesDropdown/LanguageDropdown.test.js

@@ -4,7 +4,8 @@ import React from 'react'
 import ReactDOMServer from 'react-dom/server'
 import LanguagesDropdown from '.'
 import Dropdown from '../Dropdown'
-import { Icon, Row } from 'zanata-ui'
+import { Icon } from '../../../components'
+import { Row } from 'react-bootstrap'
 
 describe('LanguageDropdownTest', () => {
   it('LanguagesDropdown markup', () => {
@@ -53,7 +54,7 @@ describe('LanguageDropdownTest', () => {
             <Row>
               Khuzdul
               <div className="u-sML-1-8 Dropdown-toggleIcon">
-                <Icon name="chevron-down" size="1" />
+                <Icon name="chevron-down" className="s1" />
               </div>
             </Row>
           </button>

server/zanata-frontend/src/frontend/app/editor/components/LanguagesDropdown/index.js

@@ -1,8 +1,9 @@
 import { values } from 'lodash'
 import { encode } from '../../utils/doc-id-util'
 import Dropdown from '../Dropdown'
-import { Icon, Row } from 'zanata-ui'
+import { Icon } from '../../../components'
 import React, { PropTypes } from 'react'
+import { Row } from 'react-bootstrap'
 
 /**
  * Dropdown to select the current language to translate to.
@@ -65,7 +66,7 @@ const LanguagesDropdown = React.createClass({
             <Row>
               {localeName}
               <div className="u-sML-1-8 Dropdown-toggleIcon">
-                <Icon name="chevron-down" size="1" />
+                <Icon name="chevron-down" className="s1" />
               </div>
             </Row>
           </button>