Commit ad3ac60b authored by Martin Fahl's avatar Martin Fahl

changes material design framework to material-ui

parent 87cd1a0e
......@@ -4,9 +4,10 @@
"private": true,
"proxy": "http://localhost:4000",
"dependencies": {
"@material-ui/core": "^1.4.3",
"@material-ui/icons": "^2.0.1",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"mdbreact": "^4.6.1",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-redux": "^5.0.7",
......
......@@ -9,7 +9,9 @@
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
......
......@@ -2,16 +2,24 @@ import React from 'react';
import { Navbar } from "../Navbar/Navbar";
import { CodecentricFooter } from "../CodecentricFooter/CodecentricFooter";
import InventoryListContainer from '../../container/InventoryListContainer/InventoryListContainer';
import { withStyles } from '@material-ui/core/styles'
const App = () => (
const styles = {
root: {
margin: 20
}
}
const App = (props) => (
<div className="App">
<Navbar appName="Inventory" />
<div className="container">
<div className={props.classes.root}>
<InventoryListContainer />
</div>
<CodecentricFooter author="codecentric" link="https://www.codecentric.de"/>
</div>
);
export default App
\ No newline at end of file
export default withStyles(styles)(App)
\ No newline at end of file
import React from 'react';
import PropTypes from "prop-types";
import { Container, Footer } from 'mdbreact';
import { Typography, Grid} from '@material-ui/core';
export const CodecentricFooter = ({author, link}) => (
<Footer color="blue" className="font-small pt-4 mt-4 text-center">
<Container fluid>
Created with <span role="img" aria-label="Heart">❤️</span> in {(new Date().getFullYear())} by <a href={link} target="_blank" rel="noopener noreferrer"> {author} </a>
</Container>
</Footer>
<Grid container justify="center">
<Grid item>
<Typography>
Created with <span role="img" aria-label="Heart">❤️</span> in {(new Date().getFullYear())} by <a href={link} target="_blank" rel="noopener noreferrer"> {author} </a>
</Typography>
</Grid>
</Grid>
);
CodecentricFooter.propTypes = {
......
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`CodecentricFooter should render as expected 1`] = `
<footer
className="page-footer mt-4 blue font-small pt-4 mt-4 text-center"
<div
className="MuiGrid-container-1 MuiGrid-justify-xs-center-18"
>
<div
className="container-fluid"
className="MuiGrid-item-2"
>
Created with
<span
aria-label="Heart"
role="img"
<p
className="MuiTypography-root-98 MuiTypography-body1-107"
>
❤️
</span>
in
2018
by
<a
href="http://www.google.de"
rel="noopener noreferrer"
target="_blank"
>
Test
</a>
Created with
<span
aria-label="Heart"
role="img"
>
❤️
</span>
in
2018
by
<a
href="http://www.google.de"
rel="noopener noreferrer"
target="_blank"
>
Test
</a>
</p>
</div>
</footer>
</div>
`;
import React from "react";
import PropTypes from "prop-types";
import TextField from '@material-ui/core/TextField';
import Icon from '@material-ui/core/Icon';
import InputAdornment from '@material-ui/core/InputAdornment';
export const Filter = ({ filterTerm, updateFilter }) => (
<form>
<div className="md-form my-0">
<input className="form-control mr-sm-2" type="text" placeholder="Filter" aria-label="Filter" value={filterTerm} onChange={updateFilter} />
</div>
</form>
<TextField
id="input-with-icon-textfield"
value={filterTerm}
onChange={updateFilter}
fullWidth
margin="normal"
InputProps={{
startAdornment: (
<InputAdornment position="start">
<Icon>search</Icon>
</InputAdornment>
),
}}
/>
);
Filter.propTypes = {
......
......@@ -18,7 +18,7 @@ describe("Filter", () => {
<Filter filterTerm="filter" updateFilter={updateFilter} />
);
filterComponent.find("input").simulate("change");
filterComponent.find("#input-with-icon-textfield").simulate("change");
expect(updateFilter.mock.calls.length).toBe(1);
});
......
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Filter should render as expected 1`] = `
<form>
<div
aria-describedby={undefined}
className="MuiFormControl-root-1 MuiFormControl-marginNormal-2 MuiFormControl-fullWidth-4"
>
<div
className="md-form my-0"
className="MuiInput-root-5 MuiInput-fullWidth-12 MuiInput-formControl-6 MuiInput-underline-9"
>
<div
className="MuiInputAdornment-root-18 MuiInputAdornment-positionStart-19"
>
<span
aria-hidden="true"
className="material-icons MuiIcon-root-21"
>
search
</span>
</div>
<input
aria-label="Filter"
className="form-control mr-sm-2"
aria-invalid={false}
autoComplete={undefined}
autoFocus={undefined}
className="MuiInput-input-13"
defaultValue={undefined}
disabled={false}
id="input-with-icon-textfield"
name={undefined}
onBlur={[Function]}
onChange={[Function]}
placeholder="Filter"
onFocus={[Function]}
onKeyDown={undefined}
onKeyUp={undefined}
placeholder={undefined}
readOnly={undefined}
required={false}
rows={undefined}
type="text"
value="filter"
/>
</div>
</form>
</div>
`;
import React from 'react'
import React, { Fragment } from 'react'
import PropTypes from 'prop-types'
import Item from "../../container/ItemContainer/ItemContainer";
import { Filter } from "../Filter/Filter";
import { Container, Row, Col, Card, CardBody, ListGroup } from "mdbreact";
import { CSSTransitionGroup } from 'react-transition-group' // ES6
import '../../css/animations.css'
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import List from '@material-ui/core/List';
const InventoryList = ({ items, filterTerm, updateFilter, deleteItem }) => (
<Container>
<Row className="justify-content-md-center justify-content-center mx-auto">
<Col sm="12" md="8" lg="6">
<Card className="mt-4 mb-4 mx-auto">
<CardBody>
<Filter filterTerm={filterTerm} updateFilter={updateFilter} />
<ListGroup>
<Fragment>
<Grid container justify="center">
<Grid item sm={12} md={8} lg={6}>
<Paper className="mt-4 mb-4 mx-auto" elevation={1}>
<Filter filterTerm={filterTerm} updateFilter={updateFilter} />
<List>
<CSSTransitionGroup
transitionName="example"
transitionAppear={true}
......@@ -27,15 +27,12 @@ const InventoryList = ({ items, filterTerm, updateFilter, deleteItem }) => (
{...item}
/>
)}
</CSSTransitionGroup>
</ListGroup>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</List>
</Paper>
</Grid>
</Grid>
</Fragment>
)
InventoryList.propTypes = {
......
......@@ -2,30 +2,22 @@
exports[`InventoryList should render as expected 1`] = `
<div
className="container"
className="MuiGrid-container-1 MuiGrid-justify-xs-center-18"
>
<div
className="row justify-content-md-center justify-content-center mx-auto"
className="MuiGrid-item-2 MuiGrid-grid-sm-12-55 MuiGrid-grid-md-8-65 MuiGrid-grid-lg-6-77"
>
<div
className="col-sm-12 col-md-8 col-lg-6"
className="MuiPaper-root-98 MuiPaper-elevation1-101 MuiPaper-rounded-99 mt-4 mb-4 mx-auto"
>
<div
className="card mt-4 mb-4 mx-auto"
name="Filter"
/>
<ul
className="MuiList-root-125 MuiList-padding-126"
>
<div
className="card-body"
>
<div
name="Filter"
/>
<ul
className="list-group"
>
<span />
</ul>
</div>
</div>
<span />
</ul>
</div>
</div>
</div>
......
import React from "react";
import PropTypes from "prop-types";
import { ListGroupItem, Badge, Fa } from "mdbreact";
import { Row, Col } from "mdbreact";
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import Typography from '@material-ui/core/Typography';
import Icon from '@material-ui/core/Icon';
import IconButton from '@material-ui/core/IconButton';
import DeleteIcon from '@material-ui/icons/Delete';
const Item = ({ id, name, quantity, increment, decrement, deleteItem }) => (
<ListGroupItem>
<Row>
<Col md="6" xs="4">
{name}
</Col>
<ListItem>
<ListItemText>
{name}
</ListItemText>
<IconButton onClick={() => decrement(id)} aria-label="Decrement">
<Icon>arrow_downward</Icon>
</IconButton>
<Typography>
{quantity}
</Typography>
<IconButton onClick={() => increment(id)} aria-label="Increment">
<Icon>arrow_upward</Icon>
</IconButton>
<IconButton onClick={() => deleteItem(id)} aria-label="Delete">
<DeleteIcon />
</IconButton>
</ListItem>
)
<Col md="6" xs="8">
<Badge color="secondary" className="ml-1 mr-1" onClick={() => decrement(id)}><Fa icon="minus-square" aria-hidden="true"/></Badge>
<Badge color="default" className="ml-1 mr-1" pill>{quantity}</Badge>
<Badge color="secondary" className="ml-1 mr-1" onClick={() => increment(id)}><Fa icon="plus-square" aria-hidden="true"/></Badge>
<Badge color="danger" className="ml-1 mr-1" onClick={() => deleteItem(id)}><Fa icon="trash" aria-hidden="true"/></Badge>
</Col>
/* <Row>
</Row>
<Col md="6" xs="4">
{name}
</Col>
<Col md="6" xs="8">
<Badge color="secondary" className="ml-1 mr-1" onClick={() => decrement(id)}><Fa icon="minus-square" aria-hidden="true"/></Badge>
<Badge color="default" className="ml-1 mr-1" pill>{quantity}</Badge>
<Badge color="secondary" className="ml-1 mr-1" onClick={() => increment(id)}><Fa icon="plus-square" aria-hidden="true"/></Badge>
<Badge color="danger" className="ml-1 mr-1" onClick={() => deleteItem(id)}><Fa icon="trash" aria-hidden="true"/></Badge>
</Col>
</ListGroupItem>
)
</Row> */
Item.propTypes = {
id: PropTypes.string.isRequired,
......
import React from 'react';
import PropTypes from "prop-types";
import { CodecentricLogo } from "../CodecentricLogo/CodecentricLogo";
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
export const Navbar = ({appName}) => (
<nav className="navbar navbar-expand-lg navbar-dark primary-color">
<AppBar position="static" color="primary">
<Toolbar>
<CodecentricLogo />
<Typography variant="title" color="inherit">
{appName}
</Typography>
</Toolbar>
</AppBar>
<a className="navbar-brand" href="/"><CodecentricLogo className="d-inline-block align-top"/></a>
<a className="navbar-brand" href="/">{appName}</a>
</nav>
);
Navbar.propTypes = {
......
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Navbar should render as expected 1`] = `
<nav
className="navbar navbar-expand-lg navbar-dark primary-color"
<header
className="MuiPaper-root-9 MuiPaper-elevation4-15 MuiAppBar-root-1 MuiAppBar-positionStatic-5 MuiAppBar-colorPrimary-7"
>
<a
className="navbar-brand"
href="/"
<div
className="MuiToolbar-root-36 MuiToolbar-regular-38 MuiToolbar-gutters-37"
>
<img
alt="codecentric"
height="60"
src="CC_RGB_onBlack.png"
/>
</a>
<a
className="navbar-brand"
href="/"
>
Test
</a>
</nav>
<h2
className="MuiTypography-root-40 MuiTypography-title-46 MuiTypography-colorInherit-59"
>
Test
</h2>
</div>
</header>
`;
......@@ -5,9 +5,6 @@ import thunk from 'redux-thunk';
import { Provider } from 'react-redux'
import registerServiceWorker from './registerServiceWorker';
import rootReducer from './reducers'
import 'font-awesome/css/font-awesome.min.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';
import App from './components/App/App';
const store = createStore(
......
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment