Skip to content

Commit

Permalink
Merge pull request #24 from logtrace/develop
Browse files Browse the repository at this point in the history 
fix(pencil): FOUT fix
  • Loading branch information
@sithumn
sithumn committed Sep 17, 2018
2 parents e8af647 + bc047b6 commit 694f7d4
Show file tree
Hide file tree
Showing 9 changed files with 277 additions and 92 deletions.
47 changes: 42 additions & 5 deletions README.md
View file
@@ -1,12 +1,15 @@
# material-icons-react

[![Build Status](https://semaphoreci.com/api/v1/logtrace/material-icons-react/branches/remove-mocha-from-deps/shields_badge.svg)](https://semaphoreci.com/logtrace/material-icons-react)
[![Build Status](https://semaphoreci.com/api/v1/logtrace/material-icons-react/branches/master/shields_badge.svg)](https://semaphoreci.com/logtrace/material-icons-react)

## NOTE: Version 1.0.1 release
## NOTE: Version 1.0.3 release

* Spelling mistakes corrected
* Proptypes added
* Unwanted dependencies for production is removed from `dependencies`
* Demo app added
* Fix for [#1](https://github.com/logtrace/material-icons-react/issues/1)
* Fix for [#11](https://github.com/logtrace/material-icons-react/issues/11)
* Fix for [#12](https://github.com/logtrace/material-icons-react/issues/12)
* Fix for [#13](https://github.com/logtrace/material-icons-react/issues/13)
* Passing in `className` prop will replace the default icon styles, defaultColor and inactive styles. Own styles for these should be provided if className prop is defined.

## Introduction

Expand Down Expand Up @@ -57,6 +60,40 @@ import MaterialIcon, {colorPalette} from 'material-icons-react';
<MaterialIcon icon="dashboard" color='#7bb92f' />
```

## Showing a preloader until the icon is rendered(For slow connections)
1. CSS

```
.lds-ripple {
display: inline-block;
position: relative;
width: 64px;
height: 64px;
}
.lds-ripple div {
position: absolute;
border: 4px solid #921515;
opacity: 1;
border-radius: 50%;
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
animation-delay: -0.5s;
}
```

2. Preloader element

```
let loader = <div className="lds-ripple"><div></div><div></div></div>
```

3. Icon

```
<MaterialIcon icon="dashboard" preloader={loader} />
```

## Icon size matrix
| Alias | Size |
|-------|-----:|
Expand Down
17 changes: 17 additions & 0 deletions demo/.alm/sessionsV2.json
View file
@@ -0,0 +1,17 @@
{
"sessions": [
{
"id": "6d48b963-c09f-418a-9c33-45977096d663",
"tabLayout": {
"type": "stack",
"width": 100,
"height": 100,
"tabs": [],
"subItems": [],
"activeItemIndex": 0
},
"lastUsed": 1532597970240,
"selectedTabId": null
}
]
}
2 changes: 1 addition & 1 deletion demo/package.json
View file
Expand Up @@ -3,7 +3,7 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"material-icons-react": "1.0.1",
"material-icons-react": "file:///mnt/c/Users/snissanka/Documents/workspaces/MyProjects/material-icons-react",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-scripts": "1.1.4"
Expand Down
35 changes: 35 additions & 0 deletions demo/src/App.css
View file
Expand Up @@ -33,3 +33,38 @@
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

.lds-ripple {
display: inline-block;
position: relative;
width: 64px;
height: 64px;
}
.lds-ripple div {
position: absolute;
border: 4px solid #921515;
opacity: 1;
border-radius: 50%;
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
animation-delay: -0.5s;
}

@keyframes lds-ripple {
0% {
top: 28px;
left: 28px;
width: 0;
height: 0;
opacity: 1;
}
100% {
top: -1px;
left: -1px;
width: 58px;
height: 58px;
opacity: 0;
}
}

94 changes: 58 additions & 36 deletions demo/src/App.js
View file
Expand Up @@ -4,7 +4,19 @@ import './App.css';
import MaterialIcon, {colorPalette} from 'material-icons-react';

class App extends Component {

constructor(props) {
super(props)

this.state = {
inactive: false
}
}

render() {

let loader = <div className="lds-ripple"><div></div><div></div></div>

return (
<div className="App">
<header className="App-header">
Expand All @@ -13,42 +25,52 @@ class App extends Component {
</header>
<div className="App-content">
<table>
<tr>
<td>Default</td>
<td><MaterialIcon icon="dashboard" /></td>
</tr>
<tr>
<td>Default</td>
<td><MaterialIcon icon="alarm_on" /></td>
</tr>
<tr>
<td>Large</td>
<td><MaterialIcon icon="dashboard" size='large' /></td>
</tr>
<tr>
<td>Custom size(100)</td>
<td><MaterialIcon icon="dashboard" size={100} /></td>
</tr>
<tr>
<td>Inverted</td>
<td><MaterialIcon icon="dashboard" invert /></td>
</tr>
<tr>
<td>Inactive</td>
<td><MaterialIcon icon="dashboard" inactive /></td>
</tr>
<tr>
<td>Color from pallete(amber._200)</td>
<td><MaterialIcon icon="dashboard" color={colorPalette.amber._200}/></td>
</tr>
<tr>
<td>Color from pallete(amber.A700)</td>
<td><MaterialIcon icon="dashboard" color={colorPalette.amber.A700}/></td>
</tr>
<tr>
<td>Custom color(#7bb92f)</td>
<td><MaterialIcon icon="dashboard" color='#7bb92f' /></td>
</tr>
<tbody>
<tr>
<td>Default</td>
<td><MaterialIcon icon="dashboard" /></td>
</tr>
<tr>
<td>Default</td>
<td><MaterialIcon icon="alarm_on" /></td>
</tr>
<tr>
<td>Large</td>
<td><MaterialIcon icon="dashboard" size='large' /></td>
</tr>
<tr>
<td>Custom size(100)</td>
<td><MaterialIcon icon="dashboard" size={100} /></td>
</tr>
<tr>
<td>Inverted</td>
<td><MaterialIcon icon="dashboard" invert /></td>
</tr>
<tr>
<td>Inactive</td>
<td><MaterialIcon icon="dashboard" inactive /></td>
</tr>
<tr>
<td>Color from pallete(amber._200)</td>
<td><MaterialIcon icon="dashboard" color={colorPalette.amber._200}/></td>
</tr>
<tr>
<td>Color from pallete(amber.A700)</td>
<td><MaterialIcon icon="dashboard" color={colorPalette.amber.A700}/></td>
</tr>
<tr>
<td>Custom color(#7bb92f)</td>
<td><MaterialIcon icon="dashboard" color='#7bb92f' /></td>
</tr>
<tr>
<td>Preloader</td>
<td><MaterialIcon icon="dashboard" preloader={loader} /></td>
</tr>
<tr>
<td>Additional props</td>
<td><MaterialIcon icon="dashboard" test="test prop" /></td>
</tr>
</tbody>
</table>
</div>
</div>
Expand Down
7 changes: 5 additions & 2 deletions package.json
View file
Expand Up @@ -16,7 +16,9 @@
"react-component",
"react",
"material-icons",
"google"
"material design",
"google",
"material-ui"
],
"options": {
"mocha": "--require ignore-styles --require scripts/mocha_runner src/**/__tests__/**/*.js"
Expand Down Expand Up @@ -64,6 +66,7 @@
"dependencies": {
"prop-types": "^15.6.1",
"react": "^15.0.0",
"react-dom": "^15.0.0"
"react-dom": "^15.0.0",
"webfontloader": "^1.6.28"
}
}
81 changes: 46 additions & 35 deletions src/__tests__/index.js
View file
Expand Up @@ -6,68 +6,79 @@ import sinon from 'sinon';

import MaterialIcon from '../index';

const loadIconAndValidateBasic = (props) => {
const wrapper = shallow(<MaterialIcon {...props} />);
expect(wrapper.find('.material-icons')).to.have.length(1);
const loadIcon = (props) => {
const wrapper = mount(<MaterialIcon {...props} />);

return wrapper;
}

const loadAndValidateWithIcon = (props) => {
const wrapper = loadIconAndValidateBasic(props);
expect(wrapper.find('.material-icons').text()).to.equal('face');
return wrapper;
}
describe('MaterialIcon renders', () => {
it('with an `i`', () => {
const wrapper = loadIcon({icon: 'face'})

expect(wrapper.find('i')).to.be.not.null
});

describe('MaterialIcon renders without any props', () => {
it('to have an `i`', () => {
loadIconAndValidateBasic();
it('with the icon prop', () => {
const wrapper = loadIcon({icon: 'face'})

expect(wrapper.props().icon).to.equal('face');
});
});

describe('MaterialIcon renders with icon prop', () => {
it('to have an `i` with class md-24 by default', () => {
const wrapper = loadAndValidateWithIcon({ icon: 'face' });
expect(wrapper.find('.material-icons').hasClass('md-24')).to.equal(true);
it('with class md-24 by default', async () => {
const wrapper = loadIcon({ icon: 'face' });

expect(wrapper.find('i').hasClass('md-24')).to.equal(true);
});

it('to have an `i` with size prop overridden to medium', () => {
const wrapper = loadAndValidateWithIcon({ icon: 'face', size: 'medium' });
expect(wrapper.find('.material-icons').hasClass('md-36')).to.equal(true);
it('with size prop overridden to medium', async () => {
const wrapper = loadIcon({ icon: 'face', size: 'medium' });

expect(wrapper.find('i').hasClass('md-36')).to.equal(true);
});
});

describe('MaterialIcon renders', () => {
it('to have an `i` with dark color by default', () => {
const wrapper = loadAndValidateWithIcon({ icon: 'face' });
it('with dark color by default', () => {
const wrapper = loadIcon({ icon: 'face' });
expect(wrapper.find('.material-icons').hasClass('md-dark')).to.equal(true);
});

it('to have an `i` with light color when inverted', () => {
const wrapper = loadAndValidateWithIcon({ icon: 'face', invert: true });
it('with light color when inverted', () => {
const wrapper = loadIcon({ icon: 'face', invert: true });
expect(wrapper.find('.material-icons').hasClass('md-light')).to.equal(true);
});
});

describe('MaterialIcon renders', () => {
it('to have an `i` with active state by default', () => {
const wrapper = loadAndValidateWithIcon({ icon: 'face' });
it('with active state by default', () => {
const wrapper = loadIcon({ icon: 'face' });
expect(wrapper.find('.material-icons').hasClass('md-inactive')).to.equal(false);
});

it('to have an `i` with `md-inactive` when inactive', () => {
const wrapper = loadAndValidateWithIcon({ icon: 'face', inactive: true });
it('with `md-inactive` when inactive', () => {
const wrapper = loadIcon({ icon: 'face', inactive: true });
expect(wrapper.find('.material-icons').hasClass('md-inactive')).to.equal(true);
});

it('to have an `i` with active state by default when inverted', () => {
const wrapper = loadAndValidateWithIcon({ icon: 'face', invert: true });
it('with active state by default when inverted', () => {
const wrapper = loadIcon({ icon: 'face', invert: true });
expect(wrapper.find('.material-icons').hasClass('md-light')).to.equal(true);
expect(wrapper.find('.material-icons').hasClass('md-inactive')).to.equal(false);
});

it('to have an `i` with `md-inactive` and `md-light` when inactive and inverted', () => {
const wrapper = loadAndValidateWithIcon({ icon: 'face', invert: true, inactive: true });
it('with `md-inactive` and `md-light` when inactive and inverted', () => {
const wrapper = loadIcon({ icon: 'face', invert: true, inactive: true });
expect(wrapper.find('.material-icons').hasClass('md-light')).to.equal(true);
expect(wrapper.find('.material-icons').hasClass('md-inactive')).to.equal(true);
});

it('with default classes overriden when className prop provided', () => {
const wrapper = loadIcon({ icon: 'face', className: 'test-class-name' });

expect(wrapper.find('i').hasClass('test-class-name')).to.equal(true);
});

it('with custom props available', () => {
const wrapper = loadIcon({ icon: 'face', testProp: 'custom-prop'});

expect(wrapper.props().testProp).to.be.not.null
expect(wrapper.props().testProp).to.equal('custom-prop')
});
});

0 comments on commit 694f7d4

Please sign in to comment.