From fa78adf22b0e191fb3a72c17a76bd45869be4202 Mon Sep 17 00:00:00 2001 From: Kimmo Puputti Date: Tue, 24 Jan 2017 19:44:58 +0200 Subject: [PATCH 1/2] Add forms related to authentication and credentials --- package.json | 1 + src/Routes.js | 1 - src/components/Hello/Hello.example.js | 13 ---- src/components/Hello/Hello.js | 9 --- src/components/examples.js | 4 -- src/components/index.js | 1 - .../ChangeAccountPasswordForm.example.js | 11 +++ .../ChangeAccountPasswordForm.js | 24 +++++++ .../ChangeAccountPasswordForm.test.js | 20 ++++++ .../ChangeAccountPasswordForm.test.js.snap | 65 ++++++++++++++++++ .../ChangePasswordForm.example.js | 11 +++ .../ChangePasswordForm/ChangePasswordForm.js | 23 +++++++ .../ChangePasswordForm.test.js | 20 ++++++ .../ChangePasswordForm.test.js.snap | 62 +++++++++++++++++ src/containers/LoginForm/LoginForm.example.js | 11 +++ src/containers/LoginForm/LoginForm.js | 20 ++++++ src/containers/LoginForm/LoginForm.test.js | 20 ++++++ .../__snapshots__/LoginForm.test.js.snap | 39 +++++++++++ .../PasswordForgottenForm.example.js | 11 +++ .../PasswordForgottenForm.js | 18 +++++ .../PasswordForgottenForm.test.js | 20 ++++++ .../PasswordForgottenForm.test.js.snap | 26 +++++++ .../SignUpForm/SignUpForm.example.js | 11 +++ src/containers/SignUpForm/SignUpForm.js | 24 +++++++ src/containers/SignUpForm/SignUpForm.test.js | 20 ++++++ .../__snapshots__/SignUpForm.test.js.snap | 63 +++++++++++++++++ .../StyleguidePage/StyleguidePage.css | 2 + .../StyleguidePage/StyleguidePage.js | 2 +- src/containers/index.js | 10 +++ src/ducks/index.js | 3 +- src/examples.js | 13 ++++ src/index.css | 67 +++++++++++++++++++ src/routesConfiguration.js | 7 +- yarn.lock | 36 ++++++++-- 34 files changed, 647 insertions(+), 41 deletions(-) delete mode 100644 src/components/Hello/Hello.example.js delete mode 100644 src/components/Hello/Hello.js delete mode 100644 src/components/examples.js create mode 100644 src/containers/ChangeAccountPasswordForm/ChangeAccountPasswordForm.example.js create mode 100644 src/containers/ChangeAccountPasswordForm/ChangeAccountPasswordForm.js create mode 100644 src/containers/ChangeAccountPasswordForm/ChangeAccountPasswordForm.test.js create mode 100644 src/containers/ChangeAccountPasswordForm/__snapshots__/ChangeAccountPasswordForm.test.js.snap create mode 100644 src/containers/ChangePasswordForm/ChangePasswordForm.example.js create mode 100644 src/containers/ChangePasswordForm/ChangePasswordForm.js create mode 100644 src/containers/ChangePasswordForm/ChangePasswordForm.test.js create mode 100644 src/containers/ChangePasswordForm/__snapshots__/ChangePasswordForm.test.js.snap create mode 100644 src/containers/LoginForm/LoginForm.example.js create mode 100644 src/containers/LoginForm/LoginForm.js create mode 100644 src/containers/LoginForm/LoginForm.test.js create mode 100644 src/containers/LoginForm/__snapshots__/LoginForm.test.js.snap create mode 100644 src/containers/PasswordForgottenForm/PasswordForgottenForm.example.js create mode 100644 src/containers/PasswordForgottenForm/PasswordForgottenForm.js create mode 100644 src/containers/PasswordForgottenForm/PasswordForgottenForm.test.js create mode 100644 src/containers/PasswordForgottenForm/__snapshots__/PasswordForgottenForm.test.js.snap create mode 100644 src/containers/SignUpForm/SignUpForm.example.js create mode 100644 src/containers/SignUpForm/SignUpForm.js create mode 100644 src/containers/SignUpForm/SignUpForm.test.js create mode 100644 src/containers/SignUpForm/__snapshots__/SignUpForm.test.js.snap create mode 100644 src/examples.js diff --git a/package.json b/package.json index ec8df08b..3445ec05 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "react-router": "4.0.0-alpha.6", "react-test-renderer": "^15.4.2", "redux": "^3.6.0", + "redux-form": "^6.4.3", "sharetribe-scripts": "0.8.6", "source-map-support": "^0.4.10" }, diff --git a/src/Routes.js b/src/Routes.js index 17e2b086..77ed92b2 100644 --- a/src/Routes.js +++ b/src/Routes.js @@ -48,7 +48,6 @@ const MatchWithSubRoutes = props => { ); }; /* eslint-enable arrow-body-style */ - MatchWithSubRoutes.defaultProps = { auth: false, exactly: false }; const { any, array, bool, func, node, oneOfType, string } = PropTypes; diff --git a/src/components/Hello/Hello.example.js b/src/components/Hello/Hello.example.js deleted file mode 100644 index b109e6af..00000000 --- a/src/components/Hello/Hello.example.js +++ /dev/null @@ -1,13 +0,0 @@ -import Hello from './Hello'; - -export const HelloWorld = { - component: Hello, - description: 'Hello to world', - props: { name: 'world' }, -}; - -export const HelloMars = { - component: Hello, - description: 'Hello to mars', - props: { name: 'mars' }, -}; diff --git a/src/components/Hello/Hello.js b/src/components/Hello/Hello.js deleted file mode 100644 index 3cb026de..00000000 --- a/src/components/Hello/Hello.js +++ /dev/null @@ -1,9 +0,0 @@ -import React, { PropTypes } from 'react'; - -const Hello = ({ name }) =>

hello, {name}!

; - -const { string } = PropTypes; - -Hello.propTypes = { name: string.isRequired }; - -export default Hello; diff --git a/src/components/examples.js b/src/components/examples.js deleted file mode 100644 index 0d0b9135..00000000 --- a/src/components/examples.js +++ /dev/null @@ -1,4 +0,0 @@ -/* eslint-disable import/prefer-default-export*/ -import * as Hello from './Hello/Hello.example'; - -export { Hello }; diff --git a/src/components/index.js b/src/components/index.js index 01b7ea37..6629c16f 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,4 +1,3 @@ -/* eslint-disable import/prefer-default-export */ import NamedLink from './NamedLink/NamedLink'; import PageLayout from './PageLayout/PageLayout'; import RouterProvider from './RouterProvider/RouterProvider'; diff --git a/src/containers/ChangeAccountPasswordForm/ChangeAccountPasswordForm.example.js b/src/containers/ChangeAccountPasswordForm/ChangeAccountPasswordForm.example.js new file mode 100644 index 00000000..5e480a54 --- /dev/null +++ b/src/containers/ChangeAccountPasswordForm/ChangeAccountPasswordForm.example.js @@ -0,0 +1,11 @@ +/* eslint-disable no-console, import/prefer-default-export */ +import ChangeAccountPasswordForm from './ChangeAccountPasswordForm'; + +export const Empty = { + component: ChangeAccountPasswordForm, + props: { + onSubmit(values) { + console.log('submit new password form values:', values); + }, + }, +}; diff --git a/src/containers/ChangeAccountPasswordForm/ChangeAccountPasswordForm.js b/src/containers/ChangeAccountPasswordForm/ChangeAccountPasswordForm.js new file mode 100644 index 00000000..2d6a4cf5 --- /dev/null +++ b/src/containers/ChangeAccountPasswordForm/ChangeAccountPasswordForm.js @@ -0,0 +1,24 @@ +import React from 'react'; +import { Field, reduxForm, propTypes as formPropTypes } from 'redux-form'; + +const ChangeAccountPasswordForm = props => { + const { handleSubmit, pristine, submitting } = props; + return ( +
+ + + + + + + + +

Delete account (module)

+ + + ); +}; + +ChangeAccountPasswordForm.propTypes = { ...formPropTypes }; + +export default reduxForm({ form: 'changeAccountPassword' })(ChangeAccountPasswordForm) diff --git a/src/containers/ChangeAccountPasswordForm/ChangeAccountPasswordForm.test.js b/src/containers/ChangeAccountPasswordForm/ChangeAccountPasswordForm.test.js new file mode 100644 index 00000000..cd31f15d --- /dev/null +++ b/src/containers/ChangeAccountPasswordForm/ChangeAccountPasswordForm.test.js @@ -0,0 +1,20 @@ +import React from 'react'; +import renderer from 'react-test-renderer'; +import { Provider } from 'react-redux'; +import configureStore from '../../store'; +import ChangeAccountPasswordForm from './ChangeAccountPasswordForm'; + +describe('ChangeAccountPasswordForm', () => { + it('matches snapshot', () => { + const store = configureStore(); + const component = renderer.create( + ( + + + + ), + ); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/src/containers/ChangeAccountPasswordForm/__snapshots__/ChangeAccountPasswordForm.test.js.snap b/src/containers/ChangeAccountPasswordForm/__snapshots__/ChangeAccountPasswordForm.test.js.snap new file mode 100644 index 00000000..66b6a708 --- /dev/null +++ b/src/containers/ChangeAccountPasswordForm/__snapshots__/ChangeAccountPasswordForm.test.js.snap @@ -0,0 +1,65 @@ +exports[`ChangeAccountPasswordForm matches snapshot 1`] = ` +
+ + + + + + + + +

+ Delete account (module) +

+ +
+`; diff --git a/src/containers/ChangePasswordForm/ChangePasswordForm.example.js b/src/containers/ChangePasswordForm/ChangePasswordForm.example.js new file mode 100644 index 00000000..dbbc6b91 --- /dev/null +++ b/src/containers/ChangePasswordForm/ChangePasswordForm.example.js @@ -0,0 +1,11 @@ +/* eslint-disable no-console, import/prefer-default-export */ +import ChangePasswordForm from './ChangePasswordForm'; + +export const Empty = { + component: ChangePasswordForm, + props: { + onSubmit(values) { + console.log('submit new password form values:', values); + }, + }, +}; diff --git a/src/containers/ChangePasswordForm/ChangePasswordForm.js b/src/containers/ChangePasswordForm/ChangePasswordForm.js new file mode 100644 index 00000000..a98e635c --- /dev/null +++ b/src/containers/ChangePasswordForm/ChangePasswordForm.js @@ -0,0 +1,23 @@ +import React from 'react'; +import { Field, reduxForm, propTypes as formPropTypes } from 'redux-form'; + +const ChangePasswordForm = props => { + const { handleSubmit, pristine, submitting } = props; + return ( +
+ + + + + + + + + + + ); +}; + +ChangePasswordForm.propTypes = { ...formPropTypes }; + +export default reduxForm({ form: 'changePassword' })(ChangePasswordForm) diff --git a/src/containers/ChangePasswordForm/ChangePasswordForm.test.js b/src/containers/ChangePasswordForm/ChangePasswordForm.test.js new file mode 100644 index 00000000..27917da0 --- /dev/null +++ b/src/containers/ChangePasswordForm/ChangePasswordForm.test.js @@ -0,0 +1,20 @@ +import React from 'react'; +import renderer from 'react-test-renderer'; +import { Provider } from 'react-redux'; +import configureStore from '../../store'; +import ChangePasswordForm from './ChangePasswordForm'; + +describe('ChangePasswordForm', () => { + it('matches snapshot', () => { + const store = configureStore(); + const component = renderer.create( + ( + + + + ), + ); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/src/containers/ChangePasswordForm/__snapshots__/ChangePasswordForm.test.js.snap b/src/containers/ChangePasswordForm/__snapshots__/ChangePasswordForm.test.js.snap new file mode 100644 index 00000000..e664778d --- /dev/null +++ b/src/containers/ChangePasswordForm/__snapshots__/ChangePasswordForm.test.js.snap @@ -0,0 +1,62 @@ +exports[`ChangePasswordForm matches snapshot 1`] = ` +
+ + + + + + + + + +
+`; diff --git a/src/containers/LoginForm/LoginForm.example.js b/src/containers/LoginForm/LoginForm.example.js new file mode 100644 index 00000000..922121e5 --- /dev/null +++ b/src/containers/LoginForm/LoginForm.example.js @@ -0,0 +1,11 @@ +/* eslint-disable no-console, import/prefer-default-export */ +import LoginForm from './LoginForm'; + +export const Empty = { + component: LoginForm, + props: { + onSubmit(values) { + console.log('log in with form values:', values); + }, + }, +}; diff --git a/src/containers/LoginForm/LoginForm.js b/src/containers/LoginForm/LoginForm.js new file mode 100644 index 00000000..dca94677 --- /dev/null +++ b/src/containers/LoginForm/LoginForm.js @@ -0,0 +1,20 @@ +import React from 'react'; +import { Field, reduxForm, propTypes as formPropTypes } from 'redux-form'; + +const LoginForm = props => { + const { handleSubmit, pristine, submitting } = props; + return ( +
+ + + + +

Forgot password?

+ + + ); +}; + +LoginForm.propTypes = { ...formPropTypes }; + +export default reduxForm({ form: 'login' })(LoginForm) diff --git a/src/containers/LoginForm/LoginForm.test.js b/src/containers/LoginForm/LoginForm.test.js new file mode 100644 index 00000000..7f05b48f --- /dev/null +++ b/src/containers/LoginForm/LoginForm.test.js @@ -0,0 +1,20 @@ +import React from 'react'; +import renderer from 'react-test-renderer'; +import { Provider } from 'react-redux'; +import configureStore from '../../store'; +import LoginForm from './LoginForm'; + +describe('LoginForm', () => { + it('matches snapshot', () => { + const store = configureStore(); + const component = renderer.create( + ( + + + + ), + ); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/src/containers/LoginForm/__snapshots__/LoginForm.test.js.snap b/src/containers/LoginForm/__snapshots__/LoginForm.test.js.snap new file mode 100644 index 00000000..9a34ff08 --- /dev/null +++ b/src/containers/LoginForm/__snapshots__/LoginForm.test.js.snap @@ -0,0 +1,39 @@ +exports[`LoginForm matches snapshot 1`] = ` +
+ + + + +

+ Forgot password? +

+ +
+`; diff --git a/src/containers/PasswordForgottenForm/PasswordForgottenForm.example.js b/src/containers/PasswordForgottenForm/PasswordForgottenForm.example.js new file mode 100644 index 00000000..0312b51b --- /dev/null +++ b/src/containers/PasswordForgottenForm/PasswordForgottenForm.example.js @@ -0,0 +1,11 @@ +/* eslint-disable no-console, import/prefer-default-export */ +import PasswordForgottenForm from './PasswordForgottenForm'; + +export const Empty = { + component: PasswordForgottenForm, + props: { + onSubmit(values) { + console.log('submit forgotten password email:', values); + }, + }, +}; diff --git a/src/containers/PasswordForgottenForm/PasswordForgottenForm.js b/src/containers/PasswordForgottenForm/PasswordForgottenForm.js new file mode 100644 index 00000000..fd85b4ce --- /dev/null +++ b/src/containers/PasswordForgottenForm/PasswordForgottenForm.js @@ -0,0 +1,18 @@ +import React from 'react'; +import { Field, reduxForm, propTypes as formPropTypes } from 'redux-form'; + +const PasswordForgottenForm = props => { + const { handleSubmit, pristine, submitting } = props; + return ( +
+ + +

We will send you instructions to your email.

+ + + ); +}; + +PasswordForgottenForm.propTypes = { ...formPropTypes }; + +export default reduxForm({ form: 'passwordForgotten' })(PasswordForgottenForm) diff --git a/src/containers/PasswordForgottenForm/PasswordForgottenForm.test.js b/src/containers/PasswordForgottenForm/PasswordForgottenForm.test.js new file mode 100644 index 00000000..cbcd3b40 --- /dev/null +++ b/src/containers/PasswordForgottenForm/PasswordForgottenForm.test.js @@ -0,0 +1,20 @@ +import React from 'react'; +import renderer from 'react-test-renderer'; +import { Provider } from 'react-redux'; +import configureStore from '../../store'; +import PasswordForgottenForm from './PasswordForgottenForm'; + +describe('PasswordForgottenForm', () => { + it('matches snapshot', () => { + const store = configureStore(); + const component = renderer.create( + ( + + + + ), + ); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/src/containers/PasswordForgottenForm/__snapshots__/PasswordForgottenForm.test.js.snap b/src/containers/PasswordForgottenForm/__snapshots__/PasswordForgottenForm.test.js.snap new file mode 100644 index 00000000..a474ddec --- /dev/null +++ b/src/containers/PasswordForgottenForm/__snapshots__/PasswordForgottenForm.test.js.snap @@ -0,0 +1,26 @@ +exports[`PasswordForgottenForm matches snapshot 1`] = ` +
+ + +

+ We will send you instructions to your email. +

+ +
+`; diff --git a/src/containers/SignUpForm/SignUpForm.example.js b/src/containers/SignUpForm/SignUpForm.example.js new file mode 100644 index 00000000..aeac9bdc --- /dev/null +++ b/src/containers/SignUpForm/SignUpForm.example.js @@ -0,0 +1,11 @@ +/* eslint-disable no-console, import/prefer-default-export */ +import SignUpForm from './SignUpForm'; + +export const Empty = { + component: SignUpForm, + props: { + onSubmit(values) { + console.log('sign up with form values:', values); + }, + }, +}; diff --git a/src/containers/SignUpForm/SignUpForm.js b/src/containers/SignUpForm/SignUpForm.js new file mode 100644 index 00000000..de4e0643 --- /dev/null +++ b/src/containers/SignUpForm/SignUpForm.js @@ -0,0 +1,24 @@ +import React from 'react'; +import { Field, reduxForm, propTypes as formPropTypes } from 'redux-form'; + +const SignUpForm = props => { + const { handleSubmit, pristine, submitting } = props; + return ( +
+ + + + + + + + +

By confirming I accept the booking terms and conditions.

+ + + ); +}; + +SignUpForm.propTypes = { ...formPropTypes }; + +export default reduxForm({ form: 'signup' })(SignUpForm) diff --git a/src/containers/SignUpForm/SignUpForm.test.js b/src/containers/SignUpForm/SignUpForm.test.js new file mode 100644 index 00000000..b0398022 --- /dev/null +++ b/src/containers/SignUpForm/SignUpForm.test.js @@ -0,0 +1,20 @@ +import React from 'react'; +import renderer from 'react-test-renderer'; +import { Provider } from 'react-redux'; +import configureStore from '../../store'; +import SignUpForm from './SignUpForm'; + +describe('SignUpForm', () => { + it('matches snapshot', () => { + const store = configureStore(); + const component = renderer.create( + ( + + + + ), + ); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/src/containers/SignUpForm/__snapshots__/SignUpForm.test.js.snap b/src/containers/SignUpForm/__snapshots__/SignUpForm.test.js.snap new file mode 100644 index 00000000..b3b81e62 --- /dev/null +++ b/src/containers/SignUpForm/__snapshots__/SignUpForm.test.js.snap @@ -0,0 +1,63 @@ +exports[`SignUpForm matches snapshot 1`] = ` +
+ + + + + + + + +

+ By confirming I accept the booking terms and conditions. +

+ +
+`; diff --git a/src/containers/StyleguidePage/StyleguidePage.css b/src/containers/StyleguidePage/StyleguidePage.css index b5367cc9..4ad3a33e 100644 --- a/src/containers/StyleguidePage/StyleguidePage.css +++ b/src/containers/StyleguidePage/StyleguidePage.css @@ -1,4 +1,6 @@ .root { + padding: 1rem; + & ul { list-style: none; padding: 0; diff --git a/src/containers/StyleguidePage/StyleguidePage.js b/src/containers/StyleguidePage/StyleguidePage.js index 131c291f..2005efd5 100644 --- a/src/containers/StyleguidePage/StyleguidePage.js +++ b/src/containers/StyleguidePage/StyleguidePage.js @@ -1,7 +1,7 @@ import React, { PropTypes } from 'react'; import { Link } from 'react-router'; import { map, size } from 'lodash'; -import * as allExamples from '../../components/examples'; +import * as allExamples from '../../examples'; import css from './StyleguidePage.css'; diff --git a/src/containers/index.js b/src/containers/index.js index c2a99d14..451075e1 100644 --- a/src/containers/index.js +++ b/src/containers/index.js @@ -1,41 +1,51 @@ import AuthenticationPage from './AuthenticationPage/AuthenticationPage'; +import ChangeAccountPasswordForm from './ChangeAccountPasswordForm/ChangeAccountPasswordForm'; +import ChangePasswordForm from './ChangePasswordForm/ChangePasswordForm'; import CheckoutPage from './CheckoutPage/CheckoutPage'; import ContactDetailsPage from './ContactDetailsPage/ContactDetailsPage'; import EditProfilePage from './EditProfilePage/EditProfilePage'; import InboxPage from './InboxPage/InboxPage'; import LandingPage from './LandingPage/LandingPage'; import ListingPage from './ListingPage/ListingPage'; +import LoginForm from './LoginForm/LoginForm'; import ManageListingsPage from './ManageListingsPage/ManageListingsPage'; import NotFoundPage from './NotFoundPage/NotFoundPage'; import OrderPage from './OrderPage/OrderPage'; import PasswordChangePage from './PasswordChangePage/PasswordChangePage'; +import PasswordForgottenForm from './PasswordForgottenForm/PasswordForgottenForm'; import PasswordForgottenPage from './PasswordForgottenPage/PasswordForgottenPage'; import PayoutPreferencesPage from './PayoutPreferencesPage/PayoutPreferencesPage'; import ProfilePage from './ProfilePage/ProfilePage'; import SalesConversationPage from './SalesConversationPage/SalesConversationPage'; import SearchPage from './SearchPage/SearchPage'; import SecurityPage from './SecurityPage/SecurityPage'; +import SignUpForm from './SignUpForm/SignUpForm'; import StyleguidePage from './StyleguidePage/StyleguidePage'; import Topbar from './Topbar/Topbar'; export { AuthenticationPage, + ChangeAccountPasswordForm, + ChangePasswordForm, CheckoutPage, ContactDetailsPage, EditProfilePage, InboxPage, LandingPage, ListingPage, + LoginForm, ManageListingsPage, NotFoundPage, OrderPage, PasswordChangePage, + PasswordForgottenForm, PasswordForgottenPage, PayoutPreferencesPage, ProfilePage, SalesConversationPage, SearchPage, SecurityPage, + SignUpForm, StyleguidePage, Topbar, }; diff --git a/src/ducks/index.js b/src/ducks/index.js index 739c6c30..6d774136 100644 --- a/src/ducks/index.js +++ b/src/ducks/index.js @@ -4,6 +4,7 @@ * https://github.com/erikras/ducks-modular-redux */ +import { reducer as formReducer } from 'redux-form'; import FlashNotification from './FlashNotification.ducks'; -export { FlashNotification }; // eslint-disable-line import/prefer-default-export +export { formReducer as form, FlashNotification }; diff --git a/src/examples.js b/src/examples.js new file mode 100644 index 00000000..8881760b --- /dev/null +++ b/src/examples.js @@ -0,0 +1,13 @@ +import * as ChangeAccountPasswordForm from './containers/ChangeAccountPasswordForm/ChangeAccountPasswordForm.example'; +import * as ChangePasswordForm from './containers/ChangePasswordForm/ChangePasswordForm.example'; +import * as LoginForm from './containers/LoginForm/LoginForm.example'; +import * as PasswordForgottenForm from './containers/PasswordForgottenForm/PasswordForgottenForm.example'; +import * as SignUpForm from './containers/SignUpForm/SignUpForm.example'; + +export { + ChangeAccountPasswordForm, + ChangePasswordForm, + LoginForm, + PasswordForgottenForm, + SignUpForm, +}; diff --git a/src/index.css b/src/index.css index b4cc7250..28f2581e 100644 --- a/src/index.css +++ b/src/index.css @@ -1,5 +1,72 @@ +html { + box-sizing: border-box; +} + +*, *:before, *:after { + box-sizing: inherit; +} + body { margin: 0; padding: 0; font-family: sans-serif; + line-height: 1.4; +} + +h1 { + font-size: 2rem; +} +h2 { + font-size: 1.6rem; +} +h3 { + font-size: 1.2rem; +} +h4, +h5, +h6 { + font-size: 1rem; +} + +ul { + list-style: none; + padding: 0; +} + +label { + display: block; + font-weight: bold; + margin-top: 1rem; +} + +input { + display: block; + width: 100%; + font-size: 1.4rem; +} + +button { + display: block; + width: 100%; + font-size: 1.4rem; + padding: 0.5rem; + margin: 1rem 0; + background-color: #eee; + border: 1px solid #ddd; + cursor: pointer; + + &:hover { + background-color: #ddd; + } + &:active { + background-color: #ccc; + } + &:disabled { + cursor: auto; + + &:hover, + &:active { + background-color: #eee; + } + } } diff --git a/src/routesConfiguration.js b/src/routesConfiguration.js index 0a8ae658..34ea3f9a 100644 --- a/src/routesConfiguration.js +++ b/src/routesConfiguration.js @@ -197,12 +197,7 @@ const routesConfiguration = [ }, ], }, - { - pattern: '/styleguide', - exactly: true, - name: 'Styleguide', - component: StyleguidePage, - }, + { pattern: '/styleguide', exactly: true, name: 'Styleguide', component: StyleguidePage }, { pattern: '/styleguide/:component', exactly: true, diff --git a/yarn.lock b/yarn.lock index b2e19905..c4151d2c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -136,6 +136,10 @@ array-equal@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93" +array-findindex-polyfill@^0.1.0: + version "0.1.0" + resolved "https://registry.yarnpkg.com/array-findindex-polyfill/-/array-findindex-polyfill-0.1.0.tgz#c362665bec7645f22d7a3c3aac9793f71c3622ef" + array-flatten@1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2" @@ -1645,7 +1649,7 @@ decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2: version "1.2.0" resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290" -deep-equal@1.0.1: +deep-equal@1.0.1, deep-equal@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5" @@ -1872,6 +1876,10 @@ es5-ext@^0.10.7, es5-ext@^0.10.8, es5-ext@~0.10.11, es5-ext@~0.10.2, es5-ext@~0. es6-iterator "2" es6-symbol "~3.1" +es6-error@^4.0.0: + version "4.0.1" + resolved "https://registry.yarnpkg.com/es6-error/-/es6-error-4.0.1.tgz#eeb3e280f57e2ec48d72a9fccaf6247d3c1f5719" + es6-iterator@2: version "2.0.0" resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.0.tgz#bd968567d61635e33c0b80727613c9cb4b096bac" @@ -2632,7 +2640,7 @@ hoek@2.x.x: version "2.16.3" resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed" -hoist-non-react-statics@^1.0.3: +hoist-non-react-statics@^1.0.3, hoist-non-react-statics@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb" @@ -2849,7 +2857,7 @@ intl-relativeformat@^1.3.0: dependencies: intl-messageformat "1.3.0" -invariant@^2.0.0, invariant@^2.1.1, invariant@^2.2.0, invariant@^2.2.1: +invariant@^2.0.0, invariant@^2.1.1, invariant@^2.2.0, invariant@^2.2.1, invariant@^2.2.2: version "2.2.2" resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360" dependencies: @@ -2998,6 +3006,10 @@ is-primitive@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/is-primitive/-/is-primitive-2.0.0.tgz#207bab91638499c07b2adf240a41a87210034575" +is-promise@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.1.0.tgz#79a2a9ece7f096e80f36d2b2f3bc16c1ff4bf3fa" + is-property@^1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/is-property/-/is-property-1.0.2.tgz#57fe1c4e48474edd65b09911f26b1cd4095dda84" @@ -3499,7 +3511,7 @@ loader-utils@0.2.x, loader-utils@^0.2.11, loader-utils@^0.2.16, loader-utils@^0. json5 "^0.5.0" object-assign "^4.0.1" -lodash-es@^4.2.0, lodash-es@^4.2.1: +lodash-es@^4.17.3, lodash-es@^4.2.0, lodash-es@^4.2.1: version "4.17.4" resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.4.tgz#dcc1d7552e150a0640073ba9cb31d70f032950e7" @@ -3648,7 +3660,7 @@ lodash.uniq@^4.3.0: version "4.5.0" resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773" -"lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.14.0, lodash@^4.16.2, lodash@^4.16.4, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0: +"lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.14.0, lodash@^4.16.2, lodash@^4.16.4, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0: version "4.17.4" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae" @@ -5081,6 +5093,20 @@ reduce-function-call@^1.0.1: dependencies: balanced-match "^0.4.2" +redux-form@^6.4.3: + version "6.4.3" + resolved "https://registry.yarnpkg.com/redux-form/-/redux-form-6.4.3.tgz#bd83a77770d9805f7b595a4ff18f00fe4267d3c8" + dependencies: + array-findindex-polyfill "^0.1.0" + deep-equal "^1.0.1" + es6-error "^4.0.0" + hoist-non-react-statics "^1.2.0" + invariant "^2.2.2" + is-promise "^2.1.0" + lodash "^4.17.3" + lodash-es "^4.17.3" + shallowequal "^0.2.2" + redux@^3.6.0: version "3.6.0" resolved "https://registry.yarnpkg.com/redux/-/redux-3.6.0.tgz#887c2b3d0b9bd86eca2be70571c27654c19e188d" From c042d3273bafe7ac66dcefa3e87bb40ac80bd254 Mon Sep 17 00:00:00 2001 From: Kimmo Puputti Date: Wed, 25 Jan 2017 13:06:15 +0200 Subject: [PATCH 2/2] Add sanitize.css to normalize CSS default styles --- package.json | 1 + .../StyleguidePage/StyleguidePage.css | 5 --- src/index.css | 32 ++----------------- yarn.lock | 4 +++ 4 files changed, 8 insertions(+), 34 deletions(-) diff --git a/package.json b/package.json index 3445ec05..9b7c33b5 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "react-test-renderer": "^15.4.2", "redux": "^3.6.0", "redux-form": "^6.4.3", + "sanitize.css": "^4.1.0", "sharetribe-scripts": "0.8.6", "source-map-support": "^0.4.10" }, diff --git a/src/containers/StyleguidePage/StyleguidePage.css b/src/containers/StyleguidePage/StyleguidePage.css index 4ad3a33e..ba196371 100644 --- a/src/containers/StyleguidePage/StyleguidePage.css +++ b/src/containers/StyleguidePage/StyleguidePage.css @@ -1,8 +1,3 @@ .root { padding: 1rem; - - & ul { - list-style: none; - padding: 0; - } } diff --git a/src/index.css b/src/index.css index 28f2581e..f616e36a 100644 --- a/src/index.css +++ b/src/index.css @@ -1,32 +1,4 @@ -html { - box-sizing: border-box; -} - -*, *:before, *:after { - box-sizing: inherit; -} - -body { - margin: 0; - padding: 0; - font-family: sans-serif; - line-height: 1.4; -} - -h1 { - font-size: 2rem; -} -h2 { - font-size: 1.6rem; -} -h3 { - font-size: 1.2rem; -} -h4, -h5, -h6 { - font-size: 1rem; -} +@import "sanitize.css"; ul { list-style: none; @@ -43,6 +15,7 @@ input { display: block; width: 100%; font-size: 1.4rem; + border: 1px solid #ddd; } button { @@ -63,6 +36,7 @@ button { } &:disabled { cursor: auto; + color: #aaa; &:hover, &:active { diff --git a/yarn.lock b/yarn.lock index c4151d2c..1ca4fa97 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5329,6 +5329,10 @@ sane@~1.4.1: walker "~1.0.5" watch "~0.10.0" +sanitize.css@^4.1.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/sanitize.css/-/sanitize.css-4.1.0.tgz#0bafc3c513699f2fe8c7980c6d37edf21d3f5448" + sax@^1.1.4, sax@~1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.1.tgz#7b8e656190b228e81a66aea748480d828cd2d37a"