diff --git a/__mocks__/fileMock.js b/__mocks__/fileMock.js
index 85d4e538d0cebd5c8c95edf82221f061cb384263..0e56c5b5f76550eeeafcb929345e596c31a667e7 100644
--- a/__mocks__/fileMock.js
+++ b/__mocks__/fileMock.js
@@ -1 +1 @@
-module.exports = 'test-file-stub'
\ No newline at end of file
+module.exports = 'test-file-stub'
diff --git a/src/lib/components/ErrorBoundary.js b/src/lib/components/ErrorBoundary.js
index 63c7bdf5cb35c05a62c11848604d54eb17deeae4..a60b819947b29d30d0e4d737d8a87486d45d62cf 100644
--- a/src/lib/components/ErrorBoundary.js
+++ b/src/lib/components/ErrorBoundary.js
@@ -1,47 +1,47 @@
import React from 'react'
class ErrorBoundary extends React.Component {
- constructor(props) {
- super(props)
- this.state = {
- hasError: false,
- errorInfo: null,
- }
+ constructor(props) {
+ super(props)
+ this.state = {
+ hasError: false,
+ errorInfo: null,
}
+ }
- static getDerivedStateFromError(error) {
- if (error) {
- throw new Error(error)
- }
- // Update state so the next render will show the fallback UI.
- return { hasError: true }
+ static getDerivedStateFromError(error) {
+ if (error) {
+ throw new Error(error)
}
+ // Update state so the next render will show the fallback UI.
+ return { hasError: true }
+ }
- componentDidCatch(error, info) {
- // You can also log the error to an error reporting service
- this.setState({
- error: error,
- errorInfo: info,
- })
- }
+ componentDidCatch(error, info) {
+ // You can also log the error to an error reporting service
+ this.setState({
+ error: error,
+ errorInfo: info,
+ })
+ }
- render() {
- if (this.state.errorInfo) {
- // Error path
- return (
- <div>
- <h2>Something went wrong.</h2>
- <details style={{ whiteSpace: 'pre-wrap' }}>
- {this.state.error && this.state.error.toString()}
- <br />
- {this.state.errorInfo.componentStack}
- </details>
- </div>
- )
- }
- // Normally, just render children
- return this.props.children
+ render() {
+ if (this.state.errorInfo) {
+ // Error path
+ return (
+ <div>
+ <h2>Something went wrong.</h2>
+ <details style={{ whiteSpace: 'pre-wrap' }}>
+ {this.state.error && this.state.error.toString()}
+ <br />
+ {this.state.errorInfo.componentStack}
+ </details>
+ </div>
+ )
}
+ // Normally, just render children
+ return this.props.children
+ }
}
-export default ErrorBoundary
\ No newline at end of file
+export default ErrorBoundary
diff --git a/src/lib/components/LensImage.js b/src/lib/components/LensImage.js
index bebb1dc303484376d18e5f8c5be552413c2e5d7d..9469eaf0c871b70d0150f29afe53a1eca1a35a6d 100644
--- a/src/lib/components/LensImage.js
+++ b/src/lib/components/LensImage.js
@@ -63,4 +63,4 @@ LensImage.propTypes = {
disabled: PropTypes.bool,
}
-export default LensImage
\ No newline at end of file
+export default LensImage
diff --git a/src/lib/components/PinImage.js b/src/lib/components/PinImage.js
index 61d011e52ab1262549895df70a7746b90cb3fb99..e73709f5d087b27789205008da0e91bf1eb07f95 100644
--- a/src/lib/components/PinImage.js
+++ b/src/lib/components/PinImage.js
@@ -2,7 +2,15 @@ import React from 'react'
import PropTypes from 'prop-types'
import { unit, colorType } from '../utils'
-const PinImage = ({ size, border, full, color, secondary, danger, disabled }) => {
+const PinImage = ({
+ size,
+ border,
+ full,
+ color,
+ secondary,
+ danger,
+ disabled,
+}) => {
const length = unit(size)
const fullPath =
`M787.143802,465.995818 C766.506373,317.376739 647.401481,210 499.22782,210 ` +
diff --git a/src/lib/components/SingleLineInput.js b/src/lib/components/SingleLineInput.js
index 9b996b09aa10e9a86fd8fed8d0427120ee876077..91b6cf444a590fc1bf347ba7993258e5f7d8d0f9 100644
--- a/src/lib/components/SingleLineInput.js
+++ b/src/lib/components/SingleLineInput.js
@@ -7,138 +7,136 @@ import { theme } from '../inittheme'
import { Icon, ErrorIcon, Checkmark } from '../index'
const input = theme
-.register('input', t => ({
+ .register('input', t => ({
primary: t.colors.primary,
secondary: t.colors.secondary,
danger: t.colors.danger,
idle: t.colors.idle,
-}))
-.createSelector()
+ }))
+ .createSelector()
const StyledInput = styled.input`
-width: 100%;
-border: none;
-border-bottom: 3px solid ${input('idle')};
-font-family: Linguala;
-font-size: 1rem;
-color: ${input('primary')};
-::placeholder {
- color: ${props =>
- props.isInputCorrect === false ?
- input('danger') :
- props.isInputCorrect === true ?
- input('secondary') :
- input('idle')
- };
+ width: 100%;
+ border: none;
+ border-bottom: 3px solid ${input('idle')};
+ font-family: Linguala;
+ font-size: 1rem;
+ color: ${input('primary')};
+ ::placeholder {
+ color: ${props =>
+ props.isInputCorrect === false
+ ? input('danger')
+ : props.isInputCorrect === true
+ ? input('secondary')
+ : input('idle')};
opacity: 0.4;
-}
+ }
`
const StyledLabel = styled.div`
-color: ${props =>
- props.isInputCorrect === false ?
- input('danger') :
- props.isInputCorrect === true ?
- input('secondary') :
- input('idle')
-};
-font-size: 0.75rem;
-margin-bottom: 0.2rem;
+ color: ${props =>
+ props.isInputCorrect === false
+ ? input('danger')
+ : props.isInputCorrect === true
+ ? input('secondary')
+ : input('idle')};
+ font-size: 0.75rem;
+ margin-bottom: 0.2rem;
`
const Line = styled.div`
- display: flex;
- width: 100%;
- margin: 0;
- padding: 0;
+ display: flex;
+ width: 100%;
+ margin: 0;
+ padding: 0;
`
const InputShape = styled.div`
-margin: 0.5rem;
-border-style: solid;
-border-width: 3px;
-border-color:
-${props =>
- props.isInputCorrect === false ?
- input('danger') :
- props.isInputCorrect === true ?
- input('secondary') :
- 'transparent'
-};
-border-radius: 2000rem;
-display: flex;
-padding: 1rem;
-flex-direction: column;
-width: ${props => unit(props.size || 20)};
-${props =>
- props.isInputCorrect === false? `
+ margin: 0.5rem;
+ border-style: solid;
+ border-width: 3px;
+ border-color: ${props =>
+ props.isInputCorrect === false
+ ? input('danger')
+ : props.isInputCorrect === true
+ ? input('secondary')
+ : 'transparent'};
+ border-radius: 2000rem;
+ display: flex;
+ padding: 1rem;
+ flex-direction: column;
+ width: ${props => unit(props.size || 20)};
+ ${props =>
+ props.isInputCorrect === false
+ ? `
box-shadow:
0 1px 5px 0 rgba(0, 0, 0, 0.2),
0 3px 4px 0 rgba(0, 0, 0, 0.12),
0 2px 4px 0 rgba(0, 0, 0, 0.14);
- `: null
-}
-${props =>
- props.isActive === true ? `
+ `
+ : null}
+ ${props =>
+ props.isActive === true
+ ? `
box-shadow:
0 8px 10px 0 rgba(0, 0, 0, 0.2),
0 6px 30px 5px rgba(0, 0, 0, 0.12),
0 16px 24px 2px rgba(0, 0, 0, 0.14);
- `: null
-}
+ `
+ : null}
`
-const DisplayIcon = props =>{
- if(props.isInputCorrect === true){
- return <Icon size={1} icon={Checkmark}/>
- } else if (props.isInputCorrect === false){
- return <Icon size={1} icon={ErrorIcon} />
- } return null
+const DisplayIcon = props => {
+ if (props.isInputCorrect === true) {
+ return <Icon size={1} icon={Checkmark} />
+ } else if (props.isInputCorrect === false) {
+ return <Icon size={1} icon={ErrorIcon} />
+ }
+ return null
}
-
-class SingleLineInput extends React.Component{
- constructor(props){
- super(props)
- this.handleActive = this.handleActive.bind(this)
- this.handleBlur = this.handleBlur.bind(this)
- this.handleOnChange = this.handleOnChange.bind(this)
- this.state = {
- isActive: false,
- value: "",
- }
+class SingleLineInput extends React.Component {
+ constructor(props) {
+ super(props)
+ this.handleActive = this.handleActive.bind(this)
+ this.handleBlur = this.handleBlur.bind(this)
+ this.handleOnChange = this.handleOnChange.bind(this)
+ this.state = {
+ isActive: false,
+ value: '',
}
+ }
- handleActive(){
- this.setState({isActive: true})
- }
+ handleActive() {
+ this.setState({ isActive: true })
+ }
- handleBlur(){
- this.setState({isActive: false})
- }
+ handleBlur() {
+ this.setState({ isActive: false })
+ }
- handleOnChange(event){
- this.setState({value: event.target.value})
- }
+ handleOnChange(event) {
+ this.setState({ value: event.target.value })
+ }
- render(){
- return(
- <InputShape isActive={this.state.isActive} {...this.props}>
- <StyledLabel {...this.props}>{this.props.label}</StyledLabel>
- <Line>
- <StyledInput
- type="text"
- name="input"
- placeholder={this.props.placeholder}
- onFocus={this.handleActive}
- onBlur={this.handleBlur}
- onChange={this.handleOnChange}
- {...this.props}
- />
- <DisplayIcon {...this.props}/>
- </Line>
- </InputShape>
- )
- }
+ render() {
+ return (
+ <InputShape isActive={this.state.isActive} {...this.props}>
+ <StyledLabel {...this.props}>{this.props.label}</StyledLabel>
+ <Line>
+ <StyledInput
+ type="text"
+ name="input"
+ placeholder={this.props.placeholder}
+ onFocus={this.handleActive}
+ onBlur={this.handleBlur}
+ onChange={this.handleOnChange}
+ {...this.props}
+ />
+ <DisplayIcon {...this.props} />
+ </Line>
+ </InputShape>
+ )
+ }
}
SingleLineInput.propTypes = {
@@ -148,5 +146,4 @@ SingleLineInput.propTypes = {
isInputCorrect: PropTypes.bool,
}
-
-export default SingleLineInput
\ No newline at end of file
+export default SingleLineInput
diff --git a/src/lib/styles/BodyStyles.js b/src/lib/styles/BodyStyles.js
index a0366e905920bd6239bff9d149b82a65835bd535..f3b069c6448fc06b607b2b5a5419ae8cc4ff9e8b 100644
--- a/src/lib/styles/BodyStyles.js
+++ b/src/lib/styles/BodyStyles.js
@@ -19,4 +19,4 @@ const BodyStyles = createGlobalStyle`
}
`
-export default BodyStyles
\ No newline at end of file
+export default BodyStyles
diff --git a/src/lib/styles/GlobalFonts.js b/src/lib/styles/GlobalFonts.js
index c1e52dbd8c469bb64271c763b370661b8907ff7f..bf636932f57400f957c347ec321b9580082e9ff4 100644
--- a/src/lib/styles/GlobalFonts.js
+++ b/src/lib/styles/GlobalFonts.js
@@ -14,4 +14,4 @@ const GlobalFonts = createGlobalStyle`
}
`
-export default GlobalFonts
\ No newline at end of file
+export default GlobalFonts
diff --git a/src/stories/atoms/input.stories.js b/src/stories/atoms/input.stories.js
index 459382569b5cafe4d09c06e37d401909b79d1402..ce82595ed8272685e6ae9142dddcc0b60d80632e 100644
--- a/src/stories/atoms/input.stories.js
+++ b/src/stories/atoms/input.stories.js
@@ -2,33 +2,30 @@ import React from 'react'
import { storiesOf } from '@storybook/react'
import { withKnobs, number, text } from '@storybook/addon-knobs'
-import {
- SingleLineInput,
- } from '../../lib'
+import { SingleLineInput } from '../../lib'
const stories = storiesOf('Atom/Input', module)
.addDecorator(withKnobs)
.add('Single Line Input', () => (
<>
- <SingleLineInput
+ <SingleLineInput
size={number('Size', 20)}
- placeholder={text('Placeholder','Placeholder')}
- label={text('Label','')}
- />
- <SingleLineInput
+ placeholder={text('Placeholder', 'Placeholder')}
+ label={text('Label', '')}
+ />
+ <SingleLineInput
size={number('Size', 20)}
isInputCorrect={false}
- placeholder= {text('Placeholder','Something went wrong here!!!')}
- label={text('Label','Danger')}
- />
- <SingleLineInput
+ placeholder={text('Placeholder', 'Something went wrong here!!!')}
+ label={text('Label', 'Danger')}
+ />
+ <SingleLineInput
size={number('Size', 20)}
isInputCorrect={true}
- placeholder= {text('Placeholder','Something went right. Yeahh!!!')}
- label={text('Label','Correct')}
- />
+ placeholder={text('Placeholder', 'Something went right. Yeahh!!!')}
+ label={text('Label', 'Correct')}
+ />
</>
- ))
-
+ ))
export default stories
diff --git a/tests/centerPositioning.test.js b/tests/centerPositioning.test.js
index cc85479ea36c72d2775a8a561852e5d3d66ef302..98bcdca637919279b8378c22db195e4d2cfa156e 100644
--- a/tests/centerPositioning.test.js
+++ b/tests/centerPositioning.test.js
@@ -11,4 +11,4 @@ test('center with factor 2', t => {
test('center with factor Infinity', t => {
t.true(centerPosition(Infinity) === '50%')
-})
\ No newline at end of file
+})
diff --git a/tests/snapshots.test.js b/tests/snapshots.test.js
index d7568b6e4a77b1b2c0fbf0c0e7d33b80a6dbb3d0..0c8d656aeb5cdfc00a64e0f6c68f237e9a8cf46c 100644
--- a/tests/snapshots.test.js
+++ b/tests/snapshots.test.js
@@ -18,4 +18,4 @@ test('renderLingualaIcon component', t => {
// .toJSON()
// expect(tree).toMatchSnapshot()
// })
-// })
\ No newline at end of file
+// })
diff --git a/tests/unit.test.js b/tests/unit.test.js
index a4dda7ff655793905e04ffa56b92ff014f3a32bf..9096b33182b65de171a60e58fb181fe0edfcc440 100644
--- a/tests/unit.test.js
+++ b/tests/unit.test.js
@@ -3,8 +3,7 @@ import test from 'jest-t-assert'
let utilFcts = { context: {} }
-
-test.beforeEach( () => {
+test.beforeEach(() => {
utilFcts.context.calcWidth = unitLength()
utilFcts.context.calcWidthParams = unitLength(10, 'px')
utilFcts.context.relUnit = unitLength(1, 'rem')
@@ -19,8 +18,6 @@ test('initialize unitWidth', t => {
t.true(calcWidth(3) === '60px')
})
-
-
test('initialize unitWidth with parameters', t => {
const calcWidth = utilFcts.context.calcWidthParams
t.true(calcWidth() === '10px')
@@ -39,4 +36,4 @@ test('customized unit', t => {
const relUnit = utilFcts.context.relUnit
t.true(relUnit(1) === '1rem')
t.true(relUnit(2) === '2rem')
-})
\ No newline at end of file
+})