-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
4 changed files
with
171 additions
and
113 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,62 @@ | ||
import React from 'react'; | ||
import Row from '../Row'; | ||
import Column from './index'; | ||
|
||
const selectors = { | ||
component: '.tyk-col', | ||
row: '.tyk-row', | ||
}; | ||
|
||
// eslint-disable-next-line react/prop-types | ||
function Component({ children, ...rest }) { | ||
return ( | ||
<Row style={{ blockSize: '300px', border: '1px solid blue' }}> | ||
<Column size="lg-6 md-6" {...rest}>{children ?? 'column content'}</Column> | ||
</Row> | ||
); | ||
} | ||
|
||
describe('Column', () => { | ||
it('TODO', () => { | ||
expect(true).to.equal(true); | ||
it('renders the component', () => { | ||
cy.mount(<Component />) | ||
.get(selectors.component) | ||
.should('exist'); | ||
}); | ||
|
||
it('can specify the size of the column', () => { | ||
const gutterWidth = 20; | ||
cy.mount(<Component size="lg-3 md-3" />); | ||
|
||
cy | ||
.get(selectors.row) | ||
.then(($row) => { | ||
cy.get(selectors.component).should(($col) => { | ||
expect($col.width()).to.equal(($row.width() / 4 - gutterWidth)); | ||
}); | ||
}); | ||
}); | ||
|
||
it('can align vertically in the row', () => { | ||
cy.mount(<Component align="center" />) | ||
.get(selectors.component) | ||
.invoke('offset') | ||
.its('top') | ||
.then((top) => { | ||
expect(top).to.be.gt(100); | ||
}); | ||
}); | ||
|
||
it('can have custom class names', () => { | ||
const customClass = 'custom-class'; | ||
cy.mount(<Component className={customClass} />) | ||
.get(selectors.component) | ||
.should('have.class', customClass); | ||
}); | ||
|
||
it('can have an offset from the left', () => { | ||
cy.mount(<Component offset="lg-2 md-2" />) | ||
.get(selectors.component) | ||
.should('have.class', 'tyk-col--offset-lg-2') | ||
.and('have.class', 'tyk-col--offset-md-2'); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,71 +1,51 @@ | ||
import React, { PureComponent } from 'react'; | ||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
|
||
/** | ||
* Column component. | ||
*/ | ||
class Column extends PureComponent { | ||
static propTypes = { | ||
/** | ||
* This property describes how the column element will be aligned vertically | ||
* within a Row: bottom, center, top | ||
*/ | ||
align: PropTypes.string, | ||
/** Css classes that can be passed to the column element */ | ||
className: PropTypes.string, | ||
/** | ||
* ID that can be passed to the column element | ||
*/ | ||
id: PropTypes.string, | ||
/** | ||
* Specifies the size of the column within a Row (values must be between 1 - 12) | ||
*/ | ||
size: PropTypes.string.isRequired, | ||
/** | ||
* Specifies the left gap a column can have within a Row (values must be between 1 - 12) | ||
*/ | ||
offset: PropTypes.string, | ||
children: PropTypes.oneOfType([ | ||
PropTypes.element, | ||
PropTypes.string, | ||
PropTypes.object, | ||
PropTypes.node, | ||
]), | ||
}; | ||
|
||
getCssClasses() { | ||
const { | ||
align, className, offset, size, | ||
} = this.props; | ||
const colSize = size.split(' '); | ||
const colOffsets = offset ? offset.split(' ') : []; | ||
|
||
let cssClasses = colSize.map(cSize => `tyk-col--${cSize}`); | ||
const offsets = colOffsets.map(cOffset => `tyk-col--offset-${cOffset}`); | ||
|
||
if (align) { | ||
cssClasses.push(`tyk-col--align-${align}`); | ||
} | ||
|
||
if (className) { | ||
cssClasses = cssClasses.concat(className.split(' ')); | ||
} | ||
|
||
cssClasses.push('tyk-col'); | ||
cssClasses = cssClasses.concat(offsets || []); | ||
|
||
return cssClasses.join(' '); | ||
} | ||
|
||
render() { | ||
const { children, id, ...props } = this.props; | ||
|
||
return ( | ||
<div {...props} className={this.getCssClasses()} id={id}> | ||
{ children } | ||
</div> | ||
); | ||
} | ||
function Column({ | ||
children, | ||
align, | ||
className, | ||
offset, | ||
size, | ||
...rest | ||
}) { | ||
const classes = [ | ||
'tyk-col', | ||
className, | ||
align && `tyk-col--align-${align}`, | ||
...size.split(' ').map((cSize) => `tyk-col--${cSize}`), | ||
...(offset ? offset.split(' ') : []).map((cOffset) => `tyk-col--offset-${cOffset}`), | ||
].filter(Boolean).join(' '); | ||
|
||
return ( | ||
<div className={classes} {...rest}> | ||
{ children } | ||
</div> | ||
); | ||
} | ||
|
||
Column.propTypes = { | ||
/** | ||
* This property describes how the column element will be aligned vertically | ||
* within a Row: bottom, center, top | ||
*/ | ||
align: PropTypes.string, | ||
/** Css classes that can be passed to the column element */ | ||
className: PropTypes.string, | ||
/** | ||
* Specifies the size of the column within a Row (values must be between 1 - 12) | ||
*/ | ||
size: PropTypes.string.isRequired, | ||
/** | ||
* Specifies the left gap a column can have within a Row (values must be between 1 - 12) | ||
*/ | ||
offset: PropTypes.string, | ||
children: PropTypes.oneOfType([ | ||
PropTypes.element, | ||
PropTypes.string, | ||
PropTypes.object, | ||
PropTypes.node, | ||
]), | ||
}; | ||
|
||
export default Column; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,41 @@ | ||
import React from 'react'; | ||
import Row from './index'; | ||
|
||
const classes = { | ||
noGutter: 'no-gutters', | ||
gutterless: 'tyk-row--gutterless', | ||
}; | ||
|
||
const selectors = { | ||
component: '.tyk-row', | ||
}; | ||
|
||
describe('Row', () => { | ||
it('TODO', () => { | ||
expect(true).to.equal(true); | ||
it('renders the component', () => { | ||
cy.mount(<Row />) | ||
.get(selectors.component) | ||
.should('exist'); | ||
}); | ||
|
||
it('can have custom class names', () => { | ||
const customClass = 'custom-class'; | ||
cy.mount(<Row className={customClass} />) | ||
.get(selectors.component) | ||
.should('have.class', customClass); | ||
}); | ||
|
||
it('adds classes that remove gutters', () => { | ||
cy.mount(<Row nogutters />) | ||
.get(selectors.component) | ||
.should('have.class', classes.noGutter) | ||
.and('have.class', classes.gutterless); | ||
}); | ||
|
||
it('renders its children', () => { | ||
const content = <div id="custom-content">custom content</div>; | ||
cy.mount(<Row>{content}</Row>) | ||
.get(selectors.component) | ||
.find('#custom-content') | ||
.should('exist'); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,47 +1,36 @@ | ||
import React, { PureComponent } from 'react'; | ||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
|
||
|
||
/** Row component which must be always present as a wrapper for Columns */ | ||
export default class Row extends PureComponent { | ||
static propTypes = { | ||
children: PropTypes.oneOfType([ | ||
PropTypes.element, | ||
PropTypes.node, | ||
]), | ||
/** Css classes that can be passed to the Row element */ | ||
className: PropTypes.string, | ||
/** Removes all the spaces between column */ | ||
nogutters: PropTypes.bool, | ||
} | ||
|
||
getCssClasses() { | ||
const { className, nogutters } = this.props; | ||
let cssClass = ['tyk-row']; | ||
|
||
if (nogutters) { | ||
cssClass.push('no-gutters'); | ||
cssClass.push('tyk-row--gutterless'); | ||
} | ||
|
||
if (className) { | ||
cssClass = cssClass.concat(className.split(' ')); | ||
} | ||
|
||
return cssClass.join(' '); | ||
} | ||
|
||
render() { | ||
const { | ||
children, | ||
nogutters, | ||
...rest | ||
} = this.props; | ||
|
||
return ( | ||
<div {...rest} className={this.getCssClasses()}> | ||
{ children } | ||
</div> | ||
); | ||
} | ||
function Row({ | ||
className, | ||
nogutters, | ||
children, | ||
...rest | ||
}) { | ||
const classes = [ | ||
'tyk-row', | ||
className, | ||
nogutters && 'no-gutters', | ||
nogutters && 'tyk-row--gutterless', | ||
].filter(Boolean).join(' '); | ||
|
||
return ( | ||
<div {...rest} className={classes}> | ||
{ children } | ||
</div> | ||
); | ||
} | ||
|
||
Row.propTypes = { | ||
children: PropTypes.oneOfType([ | ||
PropTypes.element, | ||
PropTypes.node, | ||
]), | ||
/** Css classes that can be passed to the Row element */ | ||
className: PropTypes.string, | ||
/** Removes all the spaces between column */ | ||
nogutters: PropTypes.bool, | ||
}; | ||
|
||
export default Row; |