Skip to content

Commit

Permalink
Icon toggle (#174)
Browse files Browse the repository at this point in the history
* run compileComponents on build script

* IconToggle component added

* Sample example chnage

* typo fixes

* Package version bump
  • Loading branch information
reznord authored and prateekbh committed Jul 12, 2017
1 parent a8d60d6 commit bf08b64
Show file tree
Hide file tree
Showing 4 changed files with 46 additions and 9 deletions.
19 changes: 19 additions & 0 deletions IconToggle/IconToggle.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { h } from "preact";
import MaterialComponent from "../MaterialComponent";

/**
* @prop disabled = false
*/
export default class IconToggle extends MaterialComponent {
constructor() {
super();
this.componentName = "icon-toggle";
}
materialDom(props) {
return (
<i {...props} className="material-icons">
{props.children}
</i>
);
}
}
3 changes: 3 additions & 0 deletions index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import Button from "./Button";
import Checkbox from "./Checkbox";
import Fab from "./Fab";
import Icon from "./Icon";
import IconToggle from "./IconToggle";
import Switch from "./Switch";
import Snackbar from "./Snackbar";
import Radio from "./Radio";
Expand All @@ -19,13 +20,15 @@ import LayoutGrid from "./LayoutGrid";
import Menu from "./Menu";
import Tabs from "./Tabs";
import Slider from "./Slider";

export {
Button,
Checkbox,
Fab,
Switch,
Snackbar,
Icon,
IconToggle,
Radio,
Textfield,
Select,
Expand Down
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
{
"name": "preact-material-components",
"version": "1.0.13",
"version": "1.0.14",
"description": "preact wrapper for \"Material Components for the web\"",
"module": "index.js",
"main": "dist/index.js",
"scripts": {
"build": "webpack",
"build": "node ./compileComponents.js && webpack",
"prepublish": "npm run build && npm run test ",
"test": "npm run build && npm run lint",
"lint": "eslint src/",
Expand Down
29 changes: 22 additions & 7 deletions sample/home.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import {
Button,
Fab,
Icon,
IconToggle,
Switch,
Snackbar,
Checkbox,
Expand Down Expand Up @@ -83,6 +84,19 @@ export default class Home extends Component {
<Switch />
</div>

<div>
<IconToggle
role="button"
tabindex="0"
aria-pressed="false"
aria-label="Add to favorites"
data-toggle-on="{'content': 'favorite', 'label': 'Remove From Favorites'}"
data-toggle-off="{'content': 'favorite_border', 'label': 'Add to Favorites'}"
>
favorite_border
</IconToggle>
</div>

<Snackbar
ref={bar => {
this.bar = bar;
Expand All @@ -106,8 +120,7 @@ export default class Home extends Component {
</div>

<div className="mdc-form-field">
<Radio id="rd" ref={radio => (this.radio = radio)} />
{" "}
<Radio id="rd" ref={radio => (this.radio = radio)} />{" "}
<label for="rd">Radio Box</label>
</div>

Expand All @@ -130,9 +143,7 @@ export default class Home extends Component {
</LayoutGrid.Cell>
</LayoutGrid>

<Elevation z="9">
hi
</Elevation>
<Elevation z="9">hi</Elevation>

<Dialog
ref={dlg => {
Expand Down Expand Up @@ -192,7 +203,9 @@ export default class Home extends Component {
</div>
<div>
<Select basic={true}>
<option value="" default selected>Pick a food</option>
<option value="" default selected>
Pick a food
</option>
<option value="grains">Bread, Cereal, Rice, and Pasta</option>
<option value="vegetables">Vegetables</option>
<optgroup label="Fruits">
Expand Down Expand Up @@ -230,7 +243,9 @@ export default class Home extends Component {
Item2
</List.LinkItem>
<List.Divider />
<List.LinkItem ripple={true} href="#">Item3</List.LinkItem>
<List.LinkItem ripple={true} href="#">
Item3
</List.LinkItem>
</List>
<Menu.Anchor>
<Button
Expand Down

0 comments on commit bf08b64

Please sign in to comment.