|
|
@@ -3,58 +3,60 @@
|
|
|
* For licensing, see LICENSE.md.
|
|
|
*/
|
|
|
|
|
|
-/* globals document */
|
|
|
-
|
|
|
import IconView from '../../../src/icon/iconview';
|
|
|
-
|
|
|
-const wrapper = document.querySelector( '#inline-svg' );
|
|
|
-
|
|
|
-const icon = `
|
|
|
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
|
-<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
|
|
- xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
|
|
- <!-- Generator: Sketch 3.5.2 (25235) - http://www.bohemiancoding.com/sketch -->
|
|
|
- <title>image</title>
|
|
|
- <desc>Created with Sketch.</desc>
|
|
|
- <defs></defs>
|
|
|
- <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
|
|
- <g id="image" sketch:type="MSArtboardGroup" fill="#454545">
|
|
|
- <g id="icon:image" sketch:type="MSLayerGroup" transform="translate(2.000000, 3.000000)">
|
|
|
- <path d="M0,11.9941413 C0,13.1019465 0.894513756,14 1.99406028,14 L14.0059397,14 C15.1072288,14 16,13.1029399 16,11.9941413
|
|
|
- L16,2.00585866 C16,0.898053512 15.1054862,0 14.0059397,0 L1.99406028,0 C0.892771196,0 0,0.897060126 0,2.00585866
|
|
|
- L0,11.9941413 Z M1,2.00247329 C1,1.44882258 1.44994876,1 2.00684547,1 L13.9931545,1 C14.5492199,1 15,1.45576096
|
|
|
- 15,2.00247329 L15,11.9975267 C15,12.5511774 14.5500512,13 13.9931545,13 L2.00684547,13 C1.45078007,13 1,12.544239
|
|
|
- 1,11.9975267 L1,2.00247329 Z M2.0237314,12.0028573 L14,12.0028573 L14,8.90598928 L11.1099289,4.64285714
|
|
|
- L8.01350775,9.9000001 L5.01091767,7.79714291 L2,10.9601769 L2.0237314,12.0028573 Z M4.40625001,3 C3.62959688,3
|
|
|
- 3,3.62360071 3,4.39285714 C3,5.16210429 3.62959688,5.78571429 4.40625001,5.78571429 C5.18289376,5.78571429
|
|
|
- 5.81250002,5.16210429 5.81250002,4.39285714 C5.81250002,3.62360071 5.18289376,3 4.40625001,3 L4.40625001,3 Z"
|
|
|
- id="path4700" sketch:type="MSShapeGroup"></path>
|
|
|
- </g>
|
|
|
- </g>
|
|
|
- </g>
|
|
|
+import testUtils from '../../_utils/utils';
|
|
|
+
|
|
|
+const icon = `<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg">
|
|
|
+ <path d="M2 14.994C2 16.102 2.895 17 3.994 17h12.012A2 2 0 0 0 18 14.994V5.006A2.001 2.001 0 0 0
|
|
|
+ 16.006 3H3.994A2 2 0 0 0 2 5.006v9.988zm1-9.992C3 4.45 3.45 4 4.007 4h11.986A1.01 1.01 0 0 1 17
|
|
|
+ 5.002v9.996C17 15.55 16.55 16 15.993 16H4.007A1.01 1.01 0 0 1 3 14.998V5.002zm1.024
|
|
|
+ 10H16v-3.096l-2.89-4.263-3.096 5.257-3.003-2.103L4 13.96l.024 1.043zM6.406 6A1.4 1.4 0 0 0 5
|
|
|
+ 7.393a1.4 1.4 0 0 0 1.406 1.393 1.4 1.4 0 0 0 1.407-1.393A1.4 1.4 0 0 0 6.406 6z"
|
|
|
+ fill="#454545" fill-rule="evenodd"/>
|
|
|
</svg>`;
|
|
|
|
|
|
-// Small.
|
|
|
-addCase( renderIcon( icon, 20 ) );
|
|
|
-
|
|
|
-// Medium.
|
|
|
-addCase( renderIcon( icon, 40 ) );
|
|
|
-
|
|
|
-// Large.
|
|
|
-addCase( renderIcon( icon, 60 ) );
|
|
|
-
|
|
|
-// Color.
|
|
|
-addCase( renderIcon( icon, 60, 'red' ) );
|
|
|
-
|
|
|
-// Inherited color.
|
|
|
-const iconWrapper = document.createElement( 'p' );
|
|
|
-iconWrapper.style.color = 'blue';
|
|
|
-iconWrapper.appendChild( document.createTextNode( 'foo' ) );
|
|
|
-iconWrapper.appendChild( renderIcon( icon, 60 ) );
|
|
|
-iconWrapper.appendChild( document.createTextNode( 'bar' ) );
|
|
|
-addCase( iconWrapper );
|
|
|
+const iconDirty = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
|
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
|
+<svg xmlns="http://www.w3.org/2000/svg">
|
|
|
+ <title>Title</title>
|
|
|
+ <desc>Desc</desc>
|
|
|
+ <path d="M2 14.994C2 16.102 2.895 17 3.994 17h12.012A2 2 0 0 0 18 14.994V5.006A2.001 2.001 0 0 0
|
|
|
+ 16.006 3H3.994A2 2 0 0 0 2 5.006v9.988zm1-9.992C3 4.45 3.45 4 4.007 4h11.986A1.01 1.01 0 0 1 17
|
|
|
+ 5.002v9.996C17 15.55 16.55 16 15.993 16H4.007A1.01 1.01 0 0 1 3 14.998V5.002zm1.024
|
|
|
+ 10H16v-3.096l-2.89-4.263-3.096 5.257-3.003-2.103L4 13.96l.024 1.043zM6.406 6A1.4 1.4 0 0 0 5
|
|
|
+ 7.393a1.4 1.4 0 0 0 1.406 1.393 1.4 1.4 0 0 0 1.407-1.393A1.4 1.4 0 0 0 6.406 6z"
|
|
|
+ fill="#454545" fill-rule="evenodd"/>
|
|
|
+</svg>`;
|
|
|
|
|
|
-function renderIcon( content, size, color ) {
|
|
|
+const iconViewBox = `<svg viewBox="0 0 35 35" xmlns="http://www.w3.org/2000/svg">
|
|
|
+<path d="M3.5 26.24c0 1.939 1.566 3.51 3.49 3.51h21.02a3.5 3.5 0 0 0 3.49-3.51V8.76a3.502 3.502 0 0
|
|
|
+0-3.49-3.51H6.99A3.5 3.5 0 0 0 3.5 8.76v17.48zM5.25 8.753C5.25 7.787 6.038 7 7.012 7h20.976a1.767 1.767 0 0
|
|
|
+1 1.762 1.753v17.494c0 .965-.788 1.753-1.762 1.753H7.012a1.767 1.767 0 0 1-1.762-1.753V8.753zm1.792
|
|
|
+17.5H28v-5.419l-5.058-7.46-5.418 9.2-5.255-3.68L7 24.43l.042 1.825v-.002zM11.21 10.5a2.45 2.45 0 0 0-2.46
|
|
|
+2.438 2.45 2.45 0 0 0 2.46 2.438 2.45 2.45 0 0 0 2.463-2.438A2.45 2.45 0 0 0 11.21 10.5z" fill="#454545"
|
|
|
+fill-rule="evenodd"/></svg>`;
|
|
|
+
|
|
|
+const ui = testUtils.createTestUIView( {
|
|
|
+ 'icon20': '#icon20',
|
|
|
+ 'icon40': '#icon40',
|
|
|
+ 'icon60': '#icon60',
|
|
|
+ 'iconRed': '#icon-red',
|
|
|
+ 'iconBlueInherited': '#icon-blue-inherited',
|
|
|
+ 'iconDirty': '#icon-dirty',
|
|
|
+ 'iconViewBox': '#icon-view-box'
|
|
|
+} );
|
|
|
+
|
|
|
+ui.icon20.add( getIcon( icon, 20 ) );
|
|
|
+ui.icon40.add( getIcon( icon, 40 ) );
|
|
|
+ui.icon60.add( getIcon( icon, 60 ) );
|
|
|
+
|
|
|
+ui.iconRed.add( getIcon( icon, 20, 'red' ) );
|
|
|
+ui.iconBlueInherited.add( getIcon( icon, 20 ) );
|
|
|
+
|
|
|
+ui.iconDirty.add( getIcon( iconDirty, 100, 'green' ) );
|
|
|
+ui.iconViewBox.add( getIcon( iconViewBox, 100, 'green' ) );
|
|
|
+
|
|
|
+function getIcon( content, size, color ) {
|
|
|
const iconView = new IconView();
|
|
|
|
|
|
iconView.render();
|
|
|
@@ -69,13 +71,5 @@ function renderIcon( content, size, color ) {
|
|
|
iconView.element.style.color = color;
|
|
|
}
|
|
|
|
|
|
- return iconView.element;
|
|
|
-}
|
|
|
-
|
|
|
-function addCase( el ) {
|
|
|
- const item = document.createElement( 'li' );
|
|
|
-
|
|
|
- item.appendChild( el );
|
|
|
-
|
|
|
- wrapper.appendChild( item );
|
|
|
+ return iconView;
|
|
|
}
|