Commit db102cb1 authored by Yannis Barlas's avatar Yannis Barlas

Merge branch 'styleguidist' into 'master'

Styleguidist

See merge request !8
parents 5f814d1d d05f4130
......@@ -4,6 +4,8 @@
"description": "",
"main": "index.js",
"scripts": {
"styleguide": "styleguidist server",
"styleguide:build": "styleguidist build",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
......@@ -13,9 +15,11 @@
"author": "",
"license": "ISC",
"dependencies": {
"classnames": "^2.2.5",
"editoria-common": "0.0.1",
"font-awesome": "4.7.0",
"lodash": "4.17.4",
"prop-types": "^15.5.10",
"pubsweet-client": "0.9.1",
"react": "15.5.4",
"react-bootstrap": "0.30.10",
......@@ -28,14 +32,25 @@
"redux": "3.6.0"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"enzyme": "^2.9.1",
"enzyme-to-json": "^1.5.1",
"eslint-config-editoria": "0.0.4",
"eslint-config-editoria": "0.0.6",
"file-loader": "^0.11.2",
"identity-obj-proxy": "^3.0.0",
"jest": "^20.0.4",
"node-sass": "^4.5.3",
"react-addons-test-utils": "^15.6.0",
"react-styleguidist": "^6.0.24",
"react-test-renderer": "^15.6.1",
"sass-loader": "^6.0.6",
"sinon": "^2.3.6",
"sinon-as-promised": "^4.0.3"
"sinon-as-promised": "^4.0.3",
"webpack": "^3.5.6",
"webpack-node-externals": "^1.6.0"
}
}
import classNames from 'classnames'
import PropTypes from 'prop-types'
import React from 'react'
import classes from './AlignmentBox.local.scss'
const AlignmentBox = ({ active, id, noBorder, onClick }) => {
const styles = classNames(
classes.root,
{
[classes.active]: active,
[classes.borderTop]: noBorder.top,
[classes.borderRight]: noBorder.right,
[classes.borderBottom]: noBorder.bottom,
[classes.borderLeft]: noBorder.left
}
)
return (
<div
className={styles}
id={id}
onClick={onClick}
role='presentation'
/>
)
}
AlignmentBox.propTypes = {
active: PropTypes.bool.isRequired,
id: PropTypes.string.isRequired,
noBorder: PropTypes.shape({
top: PropTypes.bool,
bottom: PropTypes.bool,
right: PropTypes.bool,
left: PropTypes.bool
}),
onClick: PropTypes.func
}
AlignmentBox.defaultProps = {
active: false,
noBorder: {
top: false,
bottom: false,
right: false,
left: false
},
onClick: () => null
}
export default AlignmentBox
import { includes } from 'lodash'
import React from 'react'
import styles from '../styles/bookBuilder.local.scss'
class AlignmentBox extends React.Component {
constructor (props) {
super(props)
this.onClick = this.onClick.bind(this)
}
onClick () {
const { chapter, position, update } = this.props
if (!includes(['left', 'right'], position)) return
const patch = {
alignment: chapter.alignment,
id: chapter.id
}
patch.alignment[position] = !chapter.alignment[position]
update(patch)
}
render () {
const { chapter, position } = this.props
const selected = chapter.alignment[position]
// TODO -- fix classes here
const outerClass = styles.leftRightBox + ' ' + styles[position + 'Box']
const innerClass = selected ? styles.boxActive : styles.boxInactiveHover
return (
<li onClick={this.onClick}>
<div className={outerClass}>
<div className={innerClass} />
</div>
</li>
)
}
}
AlignmentBox.propTypes = {
chapter: React.PropTypes.object.isRequired,
position: React.PropTypes.string.isRequired,
update: React.PropTypes.func.isRequired
}
export default AlignmentBox
$light-grey: #b3b3b3;
$main-grey: #666;
$white-rgba: rgba(255, 255, 255, 1);
.root {
border: 1px solid $main-grey;
box-shadow: inset 0 0 0 2px $white-rgba;
cursor: pointer;
height: 26px;
width: 17px;
&:hover {
background-color: $light-grey;
}
&.active {
background-color: $main-grey;
}
}
.borderTop {
border-top: 0;
}
.borderRight {
border-right: 0;
}
.borderBottom {
border-bottom: 0;
}
.borderLeft {
border-left: 0;
}
Inactive
```js
const active = false;
const id = 'eyedee';
const noBorder = {};
const onClick = () => { return null };
<AlignmentBox
active={active}
id={id}
noBorder={noBorder}
onClick={onClick}
/>
```
Active
```js
const active = true;
const id = 'eyedee';
const noBorder = {};
const onClick = () => { return null };
<AlignmentBox
active={active}
id={id}
noBorder={noBorder}
onClick={onClick}
/>
```
Active with no right border
```js
const active = true;
const id = 'eyedee';
const noBorder = { right: true };
const onClick = () => { return null };
<AlignmentBox
active={active}
id={id}
noBorder={noBorder}
onClick={onClick}
/>
```
import classNames from 'classnames'
import PropTypes from 'prop-types'
import React from 'react'
import AlignmentBox from './AlignmentBox'
import classes from './AlignmentBoxWithLabel.local.scss'
const AlignmentBoxWithLabel = ({
active,
id,
labelPositionRight,
labelText,
noBorder,
onClick
}) => {
const styles = classNames(classes.root, {
[classes.reverseOrder]: labelPositionRight
})
return (
<div className={styles}>
<span className={classes.label}>
{labelText}
</span>
<AlignmentBox
active={active}
id={id}
noBorder={noBorder}
onClick={onClick}
/>
</div>
)
}
AlignmentBoxWithLabel.propTypes = {
active: PropTypes.bool.isRequired,
id: PropTypes.string.isRequired,
labelPositionRight: PropTypes.bool,
labelText: PropTypes.string.isRequired,
noBorder: PropTypes.shape({
top: PropTypes.bool,
bottom: PropTypes.bool,
right: PropTypes.bool,
left: PropTypes.bool
}),
onClick: PropTypes.func
}
AlignmentBoxWithLabel.defaultProps = {
active: false,
labelPositionRight: false,
noBorder: {
top: false,
bottom: false,
right: false,
left: false
},
onClick: () => null
}
export default AlignmentBoxWithLabel
$blue: #0d78f2;
$font: 'Fira Sans Condensed';
.root {
align-items: center;
display: flex;
flex-direction: row;
.label {
color: $blue;
font-family: $font;
font-size: 16px;
font-style: italic;
margin-right: 10px;
}
&.reverseOrder {
.label {
margin-left: 10px;
margin-right: 0;
order: 2;
}
}
}
AligmentBox with Label on the left
```js
const active = true;
const id = 'eyedee';
const labelText = 'left';
const noBorder = {};
const onClick = () => { return null };
<AlignmentBoxWithLabel
active={active}
id={id}
labelText={labelText}
noBorder={noBorder}
onClick={onClick}
/>
```
Inactive AligmentBox with Label on the right
```js
const active = false;
const id = 'eyedee';
const labelPositionRight = true;
const labelText = 'right';
const noBorder = {};
const onClick = () => { return null };
<AlignmentBoxWithLabel
active={active}
id={id}
labelPositionRight={labelPositionRight}
labelText={labelText}
noBorder={noBorder}
onClick={onClick}
/>
```
import React from 'react'
import PropTypes from 'prop-types'
import AlignmentBoxWithLabel from './AlignmentBoxWithLabel'
import classes from './AlignmentTool.local.scss'
const AlignmentTool = ({ data, onClickAlignmentBox }) => {
const onClick = (event) => {
const id = event.currentTarget.id
onClickAlignmentBox(id)
}
const leftData = data[0]
const rightData = data[1]
const noBorderRight = { right: true }
const noBorderLeft = { left: true }
return (
<div className={classes.root}>
<AlignmentBoxWithLabel
active={leftData.active}
id={leftData.id}
labelText={leftData.label}
noBorder={noBorderRight}
onClick={onClick}
/>
<div className={classes.middleLine} />
<AlignmentBoxWithLabel
active={rightData.active}
id={rightData.id}
labelText={rightData.label}
labelPositionRight
noBorder={noBorderLeft}
onClick={onClick}
/>
</div>
)
}
AlignmentTool.propTypes = {
data: PropTypes.arrayOf(PropTypes.shape({
active: PropTypes.bool.isRequired,
id: PropTypes.string.isRequired,
label: PropTypes.string.isRequired
})).isRequired,
onClickAlignmentBox: PropTypes.func.isRequired
}
export default AlignmentTool
import React from 'react'
import AlignmentBox from './AlignmentBox'
import styles from '../styles/bookBuilder.local.scss'
export class AlignmentTool extends React.Component {
render () {
const { chapter, update } = this.props
// TODO -- what is boxDiver? divider?
return (
<ul className={styles.pagePosition}>
<li>left &nbsp;</li>
<AlignmentBox
chapter={chapter}
position='left'
update={update}
/>
<AlignmentBox
chapter={chapter}
position='right'
update={update}
/>
<li>
<div className={styles.boxDiver} />
</li>
<li>&nbsp; right</li>
</ul>
)
}
}
AlignmentTool.propTypes = {
chapter: React.PropTypes.object.isRequired,
update: React.PropTypes.func.isRequired
}
export default AlignmentTool
$main-grey: #666;
.root {
display: flex;
margin-left: auto;
.middleLine {
background-color: $main-grey;
height: 40px;
width: 1px;
}
}
AligmentTool with left box active
```js
const data = [
{
active: true,
id: 'left',
label: 'left'
},
{
active: false,
id: 'right',
label: 'right'
}
];
const onClickAlignmentBox = () => null;
<AlignmentTool
data={data}
onClickAlignmentBox={onClickAlignmentBox}
/>
```
......@@ -181,7 +181,7 @@ ChapterButtons.propTypes = {
bookId: React.PropTypes.string.isRequired,
chapter: React.PropTypes.object.isRequired,
isRenaming: React.PropTypes.bool.isRequired,
isUploadInProgress: React.PropTypes.bool.isRequired,
isUploadInProgress: React.PropTypes.bool,
modalContainer: React.PropTypes.object.isRequired,
onClickRename: React.PropTypes.func.isRequired,
onClickSave: React.PropTypes.func.isRequired,
......
......@@ -82,7 +82,7 @@ class ChapterTitle extends React.Component {
{/* { this.props.chapter.index } */}
{ renameEmptyError }
<div className={styles.separator} />
{/* <div className={styles.separator} /> */}
</div>
)
......@@ -93,7 +93,7 @@ ChapterTitle.propTypes = {
chapter: React.PropTypes.object.isRequired,
isRenaming: React.PropTypes.bool.isRequired,
isRenameEmpty: React.PropTypes.bool.isRequired,
isUploadInProgress: React.PropTypes.bool.isRequired,
isUploadInProgress: React.PropTypes.bool,
onSaveRename: React.PropTypes.func.isRequired,
title: React.PropTypes.string.isRequired,
type: React.PropTypes.string.isRequired,
......
......@@ -92,7 +92,7 @@ class ChapterFirstRow extends React.Component {
ChapterFirstRow.propTypes = {
book: React.PropTypes.object.isRequired,
chapter: React.PropTypes.object.isRequired,
isUploadInProgress: React.PropTypes.bool.isRequired,
isUploadInProgress: React.PropTypes.bool,
outerContainer: React.PropTypes.object.isRequired,
remove: React.PropTypes.func.isRequired,
roles: React.PropTypes.array,
......
......@@ -8,7 +8,7 @@ class ProgressList extends React.Component {
const { chapter, roles, modalContainer, update } = this.props
return (
<ul className={styles.secondActions + ' col-lg-7 col-md-12 col-sm-12 col-xs-12'}>
<ul className={styles.proggressListContainer}>
<ProgressItem
chapter={chapter}
hasIcon
......
import { keys, map } from 'lodash'
import React from 'react'
import AlignmentTool from './AlignmentTool'
......@@ -7,27 +8,58 @@ import UploadButton from './UploadButton'
import styles from '../styles/bookBuilder.local.scss'
class ChapterSecondRow extends React.Component {
constructor (props) {
super(props)
this.onClickAlignmentBox = this.onClickAlignmentBox.bind(this)
}
onClickAlignmentBox (id) {
const { chapter, update } = this.props
const patch = {
alignment: chapter.alignment,
id: chapter.id
}
patch.alignment[id] = !chapter.alignment[id]
update(patch)
}
render () {
const { chapter, convertFile, outerContainer, roles, toggleUpload, update, isUploadInProgress } = this.props
const {
chapter,
convertFile,
isUploadInProgress,
outerContainer,
roles,
toggleUpload,
update
} = this.props
// TODO -- surrounding divs should go inside the components
const alignmentOptions = []
map(keys(chapter.alignment), (key) => {
const option = {
active: chapter.alignment[key],
id: key,
label: key
}
alignmentOptions.push(option)
})
return (
<div className={styles.secondLineContainer}>
<div className={styles.noPadding + ' col-lg-2 col-md-12 col-sm-12 col-xs-12'}>
<UploadButton
accept='.doc,.docx'
chapter={chapter}
convertFile={convertFile}
isUploadInProgress={isUploadInProgress}
modalContainer={outerContainer}
title=' '
toggleUpload={toggleUpload}
type='file'
update={update}
/>
</div>
<UploadButton
accept='.doc,.docx'
chapter={chapter}
convertFile={convertFile}
isUploadInProgress={isUploadInProgress}
modalContainer={outerContainer}
title=' '
toggleUpload={toggleUpload}
type='file'
update={update}
/>
<ProgressList
chapter={chapter}
......@@ -36,12 +68,10 @@ class ChapterSecondRow extends React.Component {
update={update}
/>
<div className={styles.noPadding + ' col-lg-3 col-md-12 col-sm-12 col-xs-12'}>
<AlignmentTool
chapter={chapter}
update={update}
/>
</div>
<AlignmentTool
data={alignmentOptions}
onClickAlignmentBox={this.onClickAlignmentBox}
/>
<div className={styles.separator} />
</div>
......@@ -53,7 +83,7 @@ ChapterSecondRow.propTypes = {
chapter: React.PropTypes.object.isRequired,
convertFile: React.PropTypes.func.isRequired,
outerContainer: React.PropTypes.object.isRequired,
isUploadInProgress: React.PropTypes.bool.isRequired,
isUploadInProgress: React.PropTypes.bool,
roles: React.PropTypes.array,
toggleUpload: React.PropTypes.func.isRequired,
update: React.PropTypes.func.isRequired
......
......@@ -98,7 +98,7 @@ export class UploadButton extends React.Component {
title={title}
name='single-file-uploader'
type={type}
disabled={noAction}
disabled={noAction}
/>
</span>
)
......@@ -152,7 +152,7 @@ UploadButton.propTypes = {
chapter: React.PropTypes.object.isRequired,
convertFile: React.PropTypes.func.isRequired,
modalContainer: React.PropTypes.object.isRequired,
isUploadInProgress: React.PropTypes.bool.isRequired,
isUploadInProgress: React.PropTypes.bool,
title: React.PropTypes.string.isRequired,
toggleUpload: React.PropTypes.func.isRequired,
type: React.PropTypes.string.isRequired,
......
......@@ -463,6 +463,7 @@ $upload-multiple: #b1b1b1;
}
.secondLineContainer {
display: flex;
padding-top: 1.8%;
.btnFile {
......@@ -499,7 +500,9 @@ $upload-multiple: #b1b1b1;
height: 24px;
}
.secondActions {
.proggressListContainer {
margin-left: 3%;
width: 40%;
li {
font-family: 'Fira Sans Condensed';
font-size: 16px;
......@@ -514,67 +517,29 @@ $upload-multiple: #b1b1b1;
transition: .25s ease-in-out 0s;
}
}
.pagePosition {
float: right;
position: relative;
top: 4px;
li {
color: $blue;
float: left;
font-family: 'Fira Sans Condensed';
font-size: 16px;
font-style: italic;
}
.leftRightBox {
border: 1px solid $main-grey;
float: left;
height: 26px;
padding: 2px 0 0 1.8px;
text-align: center;
width: 17.5px;
}
.leftBox {
border-right: 0;
}
.rightBox {
border-left: 0;
}
.boxDiver {