refactor(Icons): use icons from zanata-ui (#1245)

https://zanata.atlassian.net/browse/ZNTA-1263
zanata · Jul 22, 2016 · f4349df · f4349df
1 parent 86eae88
commit f4349df
Show file tree

Hide file tree

Showing 117 changed files with 971 additions and 2,820 deletions.
diff --git a/zanata-editor/pom.xml b/zanata-editor/pom.xml
@@ -132,7 +132,7 @@
 
           <!-- Inject a spritesheet into index.html based on all the icon sprite files. -->
           <execution>
-            <id>npm run spritesheet (${project.artifactId})</id>
+            <id>npm run processhtml (${project.artifactId})</id>
             <phase>process-resources</phase>
             <goals>
               <goal>exec</goal>
@@ -142,7 +142,7 @@
               <arguments>
                 <argument>${npm.executable}</argument>
                 <argument>run</argument>
-                <argument>spritesheet</argument>
+                <argument>processhtml</argument>
               </arguments>
             </configuration>
           </execution>

diff --git a/zanata-editor/src/__tests__/components/DocsDropdownTest.js b/zanata-editor/src/__tests__/components/DocsDropdownTest.js
@@ -4,7 +4,7 @@ import React from 'react'
 import ReactDOMServer from 'react-dom/server'
 import DocsDropdown from '../../app/components/DocsDropdown'
 import Dropdown from '../../app/components/Dropdown'
-import Icon from '../../app/components/Icon'
+import { Icon } from 'zanata-ui'
 
 describe('DocsDropdownTest', () => {
   it('DocsDropdown markup', () => {
@@ -38,8 +38,9 @@ describe('DocsDropdownTest', () => {
         <Dropdown.Button>
           <button className="Link--invert">
             gastropod.txt
-            <Icon name="chevron-down"
-                  className="Icon--sm Dropdown-toggleIcon u-sML-1-8"/>
+            <div className="u-sML-1-8 Dropdown-toggleIcon">
+              <Icon name="chevron-down" size="1" />
+            </div>
           </button>
         </Dropdown.Button>
         <Dropdown.Content>

diff --git a/zanata-editor/src/__tests__/components/IconButtonTest.js b/zanata-editor/src/__tests__/components/IconButtonTest.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 '../../app/components/Icon'
+import { Icon } from 'zanata-ui'
 import IconButton from '../../app/components/IconButton'
 
 describe('IconButtonTest', () => {
@@ -15,18 +15,16 @@ describe('IconButtonTest', () => {
       icon="classical"
       title="Mozart"
       onClick={clickFun}
-      iconClass="pop-icon"
-      buttonClass="push-me"/>)
+      className="push-me"/>)
 
     const expected = ReactDOMServer.renderToStaticMarkup(
       <button
         className="push-me"
         onClick={clickFun}
         title="Mozart">
         <Icon
-          name="classical"
-          title="Mozart"
-          className="Icon--sm pop-icon"/>
+          name="classical" size="1"
+          title="Mozart" />
       </button>
     )
     expect(actual).toEqual(expected)
@@ -38,8 +36,7 @@ describe('IconButtonTest', () => {
       icon="tea"
       title="Tea"
       onClick={clickFun}
-      iconClass="cultural-icon"
-      buttonClass="drink-me"
+      className="drink-me"
       disabled={true}/>)
 
     const expected = ReactDOMServer.renderToStaticMarkup(
@@ -51,7 +48,7 @@ describe('IconButtonTest', () => {
         <Icon
           name="tea"
           title="Tea"
-          className="Icon--sm cultural-icon"/>
+          size="1" />
       </button>
     )
     expect(actual).toEqual(expected)

diff --git a/zanata-editor/src/__tests__/components/IconButtonToggleTest.js b/zanata-editor/src/__tests__/components/IconButtonToggleTest.js
@@ -13,17 +13,15 @@ describe('IconButtonToggleTest', () => {
       title="Mozart"
       onClick={clickFun}
       active={false}
-      disabled={true}
-      className="pop-icon"/>)
+      disabled={true} />)
 
     const expected = ReactDOMServer.renderToStaticMarkup(
       <IconButton
         icon="classical"
         title="Mozart"
         onClick={clickFun}
         disabled={true}
-        iconClass="pop-icon"
-        buttonClass="Button Button--snug u-roundish Button--invisible"/>
+        className="Button Button--snug u-roundish Button--invisible"/>
     )
     expect(actual).toEqual(expected)
   })
@@ -41,11 +39,10 @@ describe('IconButtonToggleTest', () => {
     const expected = ReactDOMServer.renderToStaticMarkup(
       <IconButton
         active={true}
-        buttonClass="Button Button--snug u-roundish Button--invisible is-active"
+        className="pop-icon Button Button--snug u-roundish Button--invisible is-active"
         icon="classical"
         title="Mozart"
-        onClick={clickFun}
-        iconClass="pop-icon"/>
+        onClick={clickFun} />
     )
     expect(actual).toEqual(expected)
   })

diff --git a/zanata-editor/src/__tests__/components/IconTest.js b/zanata-editor/src/__tests__/components/IconTest.js
diff --git a/zanata-editor/src/__tests__/components/LanguageDropdownTest.js b/zanata-editor/src/__tests__/components/LanguageDropdownTest.js
@@ -4,7 +4,7 @@ import React from 'react'
 import ReactDOMServer from 'react-dom/server'
 import LanguagesDropdown from '../../app/components/LanguagesDropdown'
 import Dropdown from '../../app/components/Dropdown'
-import Icon from '../../app/components/Icon'
+import { Icon } from 'zanata-ui'
 
 describe('LanguageDropdownTest', () => {
   it('LanguagesDropdown markup', () => {
@@ -51,8 +51,9 @@ describe('LanguageDropdownTest', () => {
         <Dropdown.Button>
           <button className="Link--invert">
             Khuzdul
-            <Icon name="chevron-down"
-                  className="Icon--sm Dropdown-toggleIcon u-sML-1-8"/>
+            <div className="u-sML-1-8 Dropdown-toggleIcon">
+              <Icon name="chevron-down" size="1" />
+            </div>
           </button>
         </Dropdown.Button>
         <Dropdown.Content>

diff --git a/zanata-editor/src/__tests__/components/NoSuggestionPanelTest.js b/zanata-editor/src/__tests__/components/NoSuggestionPanelTest.js
@@ -2,7 +2,7 @@ jest.disableAutomock()
 
 import React from 'react'
 import ReactDOMServer from 'react-dom/server'
-import Icon from '../../app/components/Icon'
+import { Icon }  from 'zanata-ui'
 import NoSuggestionsPanel from '../../app/components/NoSuggestionsPanel'
 
 describe('NoSuggestionsPanelTest', () => {
@@ -16,9 +16,9 @@ describe('NoSuggestionsPanelTest', () => {
     const expected = ReactDOMServer.renderToStaticMarkup(
       <div
         className="u-posCenterCenter u-textEmpty u-textCenter">
-        <Icon
-          name="loader"
-          className="Icon--lg Icon--circle u-sMB-1-4"/>
+        <div className="u-sMB-1-4">
+          <Icon name="loader" size="5" />
+        </div>
         <p>You&apos;re on your own</p>
       </div>
     )

diff --git a/zanata-editor/src/__tests__/components/PagerTest.js b/zanata-editor/src/__tests__/components/PagerTest.js
@@ -4,7 +4,7 @@ import React from 'react'
 import ReactDOMServer from 'react-dom/server'
 import TestUtils from 'react-addons-test-utils'
 import Pager from '../../app/components/Pager'
-import Icon from '../../app/components/Icon'
+import { Icon } from 'zanata-ui'
 import mockGettextCatalog from '../mockAngularGettext'
 
 describe('PagerTest', () => {
@@ -25,16 +25,13 @@ describe('PagerTest', () => {
         <li>
           <a className='Link--neutral u-sizeHeight-1_1-2 u-textNoSelect'
              title='First page'>
-            <Icon name='previous' title='First page'
-                  className='u-sizeWidth-1'/>
+            <Icon name='previous' title='First page' size="2" />
           </a>
         </li>
         <li>
           <a className='Link--neutral u-sizeHeight-1_1-2 u-textNoSelect'
              title='Previous page'>
-            <Icon name='chevron-left'
-                  title='Previous page'
-                  className='u-sizeWidth-1'/>
+            <Icon name='chevron-left' title='Previous page' size="2" />
           </a>
         </li>
         <li className='u-sizeHeight-1 u-sPH-1-4'>
@@ -45,14 +42,13 @@ describe('PagerTest', () => {
         <li>
           <a className='Link--neutral u-sizeHeight-1_1-2 u-textNoSelect'
              title='Next page'>
-            <Icon name='chevron-right' title='Next page'
-                  className='u-sizeWidth-1'/>
+            <Icon name='chevron-right' title='Next page' size="2" />
           </a>
         </li>
         <li>
           <a className='Link--neutral u-sizeHeight-1_1-2 u-textNoSelect'
              title='Last page'>
-            <Icon name='next' title='Last page' className='u-sizeWidth-1'/>
+            <Icon name='next' title='Last page' size="2" />
           </a>
         </li>
       </ul>

diff --git a/zanata-editor/src/__tests__/components/SuggestionSourceDetailsTest.js b/zanata-editor/src/__tests__/components/SuggestionSourceDetailsTest.js
@@ -2,7 +2,7 @@ jest.disableAutomock()
 
 import React from 'react'
 import ReactDOMServer from 'react-dom/server'
-import Icon from '../../app/components/Icon'
+import { Icon, Row } from 'zanata-ui'
 import SuggestionSourceDetails from '../../app/components/SuggestionSourceDetails'
 
 describe('SuggestionSourceDetailsTest', () => {
@@ -25,7 +25,9 @@ describe('SuggestionSourceDetailsTest', () => {
       <div className="TransUnit-details">
         <ul className="u-textMeta u-listInline u-sizeLineHeight-1">
           <li>
-            <Icon name="import" className="Icon--xsm"/> {'champagne'}
+            <Row>
+              <Icon name="import" size="n1"/> {'champagne'}
+            </Row>
           </li>
         </ul>
       </div>
@@ -54,13 +56,19 @@ describe('SuggestionSourceDetailsTest', () => {
       <div className="TransUnit-details">
         <ul className="u-textMeta u-listInline u-sizeLineHeight-1">
           <li title="sausages">
-            <Icon name="project" className="Icon--xsm"/> {'Sausages'}
+            <Row>
+              <Icon name="project" size="n1"/> {'Sausages'}
+            </Row>
           </li>
           <li>
-            <Icon name="version" className="Icon--xsm"/> {'the-wurst-version'}
+            <Row>
+              <Icon name="version" size="n1"/> {'the-wurst-version'}
+            </Row>
           </li>
           <li title="what-a-brat/i-rote-this.txt">
-            <Icon name="document" className="Icon--xsm"/> {'i-rote-this.txt'}
+            <Row>
+              <Icon name="document" size="n1"/> {'i-rote-this.txt'}
+            </Row>
           </li>
         </ul>
       </div>
@@ -103,11 +111,15 @@ describe('SuggestionSourceDetailsTest', () => {
       <div className="TransUnit-details">
         <ul className="u-textMeta u-listInline u-sizeLineHeight-1">
           <li>
-            <Icon name="import" className="Icon--xsm"/> {'champagne'}
+            <Row>
+              <Icon name="import" size="n1"/> {'champagne'}
+            </Row>
           </li>
           <li>
-            <Icon name="translate" class="Icon--xsm"
-            /> {3}{' more occurrences'}
+            <Row>
+              <Icon name="translate" size="n1"
+              /> {3}{' more occurrences'}
+            </Row>
           </li>
         </ul>
       </div>

diff --git a/zanata-editor/src/__tests__/components/TransUnitFilterTest.js b/zanata-editor/src/__tests__/components/TransUnitFilterTest.js
@@ -5,7 +5,7 @@ import ReactDOMServer from 'react-dom/server'
 import TestUtils from 'react-addons-test-utils'
 import TransUnitFilter from '../../app/components/TransUnitFilter'
 import FilterToggle from '../../app/components/FilterToggle'
-import Icon from '../../app/components/Icon'
+import { Icon, Row } from 'zanata-ui'
 import mockGettextCatalog from '../mockAngularGettext'
 
 describe('TransUnitFilterTest', () => {
@@ -31,9 +31,11 @@ describe('TransUnitFilterTest', () => {
         <label className="Toggle-label"
                htmlFor="government-issued"
                title="titalic">
-          <Icon name="dot" className="Icon--xsm"/>
-          12
-          <span className="u-hiddenVisually">titalic</span>
+            <Row>
+              <Icon name="dot" size="n1"/>
+              12
+              <span className="u-hiddenVisually">titalic</span>
+            </Row>
         </label>
       </div>
     )
@@ -62,8 +64,10 @@ describe('TransUnitFilterTest', () => {
         <label className="Toggle-label"
                htmlFor="government-issued"
                title="titalic">
-          17
-          <span className="u-hiddenVisually">titalic</span>
+          <Row>
+            17
+            <span className="u-hiddenVisually">titalic</span>
+          </Row>
         </label>
       </div>
     )

diff --git a/zanata-editor/src/__tests__/components/TranslatingIndicatorTest.js b/zanata-editor/src/__tests__/components/TranslatingIndicatorTest.js
@@ -3,7 +3,7 @@ jest.disableAutomock()
 import React from 'react'
 import ReactDOMServer from 'react-dom/server'
 import TranslatingIndicator from '../../app/components/TranslatingIndicator'
-import Icon from '../../app/components/Icon'
+import { Icon } from 'zanata-ui'
 
 describe('TranslatingIndicatorTest', () => {
   it('TranslatingIndicator markup', () => {
@@ -18,7 +18,7 @@ describe('TranslatingIndicatorTest', () => {
     const expected = ReactDOMServer.renderToStaticMarkup(
       <button className="Link--neutral u-sPV-1-4 u-floatLeft
                        u-sizeHeight-1_1-2 u-sMR-1-4">
-        <Icon name="translate"/> <span
+        <Icon name="translate" size="2"/> <span
         className="u-ltemd-hidden u-sMR-1-4">
         Translating
       </span>

diff --git a/zanata-editor/src/__tests__/mock/cssMock.js b/zanata-editor/src/__tests__/mock/cssMock.js
@@ -0,0 +1,7 @@
+/**
+ * This is needed to allow jest to bypass any css syntax in runtime.
+ */
+const cssMock = {
+}
+
+export default cssMock
diff --git a/zanata-editor/src/app/app.css b/zanata-editor/src/app/app.css
@@ -24,10 +24,8 @@
 @import './components/Dropdown/index.css';
 @import './containers/EditorHeader/index.css';
 @import './css/heading/index.css';
-@import './components/Icon/index.css';
 @import './css/links/index.css';
 @import './components/TextDiff/index.css';
-@import './components/LogoLoader/index.css';
 @import './components/ProgressBar/index.css';
 @import './containers/KeyShortcutCheatSheet/index.css';
 @import './components/FilterToggle/index.css';

diff --git a/zanata-editor/src/app/components/DocsDropdown.js b/zanata-editor/src/app/components/DocsDropdown.js
@@ -1,6 +1,6 @@
 import { encode } from '../utils/doc-id'
 import Dropdown from './Dropdown'
-import Icon from './Icon'
+import { Icon } from 'zanata-ui'
 import React, { PropTypes } from 'react'
 
 /**
@@ -54,8 +54,9 @@ const DocsDropdown = React.createClass({
         <Dropdown.Button>
           <button className="Link--invert">
             {selectedDoc}
-            <Icon name="chevron-down"
-              className="Icon--sm Dropdown-toggleIcon u-sML-1-8" />
+            <div className="u-sML-1-8 Dropdown-toggleIcon">
+              <Icon name="chevron-down" size="1" />
+            </div>
           </button>
         </Dropdown.Button>
         <Dropdown.Content>