Skip to content

Commit

Permalink
[docs] Add a demo with Font Awesome
Browse files Browse the repository at this point in the history
  • Loading branch information
oliviertassinari committed Jul 2, 2018
1 parent 1a83577 commit 9fbdf21
Show file tree
Hide file tree
Showing 7 changed files with 210 additions and 182 deletions.
2 changes: 1 addition & 1 deletion .size-limit.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ module.exports = [
name: 'The size of all the modules of material-ui.',
webpack: true,
path: 'packages/material-ui/build/index.js',
limit: '94.6 KB',
limit: '95.3 KB',
},
{
name: 'The main bundle of the docs',
Expand Down
32 changes: 5 additions & 27 deletions docs/src/modules/components/Link.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
/* eslint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
Expand Down Expand Up @@ -29,29 +31,6 @@ const styles = theme => ({
},
});

class OnClick extends React.Component {
handleClick = event => {
if (this.props.onClick) {
this.props.onClick(event);
}

if (this.props.onCustomClick) {
this.props.onCustomClick(event);
}
};

render() {
const { component: ComponentProp, onCustomClick, ...props } = this.props;
return <ComponentProp {...props} onClick={this.handleClick} />;
}
}

OnClick.propTypes = {
component: PropTypes.string.isRequired,
onClick: PropTypes.func,
onCustomClick: PropTypes.func,
};

function Link(props) {
const {
activeClassName,
Expand Down Expand Up @@ -86,16 +65,15 @@ function Link(props) {
passHref: true,
};
children = (
<OnClick
component="a"
<a
className={classNames(className, {
[activeClassName]: router.pathname === href && activeClassName,
})}
onCustomClick={onClick}
onClick={onClick}
{...other}
>
{children}
</OnClick>
</a>
);
} else {
ComponentRoot = 'a';
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/demos/tabs/tabs.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: Tab React component
title: Tabs React component
components: Tabs, Tab
---

Expand Down
62 changes: 62 additions & 0 deletions docs/src/pages/style/icons/FontAwesome.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { loadCSS } from 'fg-loadcss/src/loadCSS';
import { withStyles } from '@material-ui/core/styles';
import red from '@material-ui/core/colors/red';
import Icon from '@material-ui/core/Icon';

const styles = theme => ({
root: {
display: 'flex',
justifyContent: 'center',
alignItems: 'flex-end',
},
icon: {
margin: theme.spacing.unit * 2,
},
iconHover: {
margin: theme.spacing.unit * 2,
'&:hover': {
color: red[800],
},
},
});

class FontAwesome extends React.Component {
componentDidMount() {
loadCSS(
'https://use.fontawesome.com/releases/v5.1.0/css/all.css',
document.querySelector('#insertion-point-jss'),
);
}

render() {
const { classes } = this.props;

return (
<div className={classes.root}>
<Icon className={classNames(classes.icon, 'fa fa-plus-circle')} />
<Icon className={classNames(classes.icon, 'fa fa-plus-circle')} color="primary" />
<Icon className={classNames(classes.icon, 'fa fa-plus-circle')} color="secondary" />
<Icon className={classNames(classes.icon, 'fa fa-plus-circle')} color="action" />
<Icon
className={classNames(classes.iconHover, 'fa fa-plus-circle')}
color="error"
style={{ fontSize: 30 }}
/>
<Icon
className={classNames(classes.icon, 'fa fa-plus-circle')}
color="disabled"
style={{ fontSize: 36 }}
/>
</div>
);
}
}

FontAwesome.propTypes = {
classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(FontAwesome);
7 changes: 7 additions & 0 deletions docs/src/pages/style/icons/icons.md
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ There are three exceptions to this rule:
{{"demo": "pages/style/icons/SvgMaterialIcons.js"}}

#### More SVG icons

Looking for even more SVG icons? There are a lot of projects out there,
but [https://materialdesignicons.com](https://materialdesignicons.com/) provides over 2,000 official and community provided icons.
[mdi-material-ui](https://github.com/TeamWertarbyte/mdi-material-ui) packages these icons as Material-UI SvgIcons in much the same way as [@material-ui/icons](https://www.npmjs.com/package/@material-ui/icons) does for the official icons.
Expand All @@ -83,4 +84,10 @@ for example:
By default, an Icon will inherit the current text color.
Optionally, you can set the icon color using one of the theme color properties: `primary`, `secondary`, `action`, `error` & `disabled`.

#### Font Material icons

{{"demo": "pages/style/icons/Icons.js"}}

#### [Font Awesome](https://fontawesome.com/icons)

{{"demo": "pages/style/icons/FontAwesome.js", "hideEditButton": true}}
21 changes: 14 additions & 7 deletions pages/style/icons.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,6 @@ function Page() {
<MarkdownDocs
markdown={markdown}
demos={{
'pages/style/icons/Icons.js': {
js: require('docs/src/pages/style/icons/Icons').default,
raw: preval`
module.exports = require('fs')
.readFileSync(require.resolve('docs/src/pages/style/icons/Icons'), 'utf8')
`,
},
'pages/style/icons/SvgIcons.js': {
js: require('docs/src/pages/style/icons/SvgIcons').default,
raw: preval`
Expand All @@ -27,6 +20,20 @@ module.exports = require('fs')
raw: preval`
module.exports = require('fs')
.readFileSync(require.resolve('docs/src/pages/style/icons/SvgMaterialIcons'), 'utf8')
`,
},
'pages/style/icons/Icons.js': {
js: require('docs/src/pages/style/icons/Icons').default,
raw: preval`
module.exports = require('fs')
.readFileSync(require.resolve('docs/src/pages/style/icons/Icons'), 'utf8')
`,
},
'pages/style/icons/FontAwesome.js': {
js: require('docs/src/pages/style/icons/FontAwesome').default,
raw: preval`
module.exports = require('fs')
.readFileSync(require.resolve('docs/src/pages/style/icons/FontAwesome'), 'utf8')
`,
},
}}
Expand Down
Loading

0 comments on commit 9fbdf21

Please sign in to comment.