Skip to content

Commit

Permalink
feat(Col/Label): Removed pull/push and added order (#696)
Browse files Browse the repository at this point in the history
  • Loading branch information
@supergibbs @TheSharpieOne
supergibbs authored and TheSharpieOne committed Nov 21, 2017
1 parent b7567c7 commit 7c5e690
Show file tree
Hide file tree
Showing 8 changed files with 31 additions and 40 deletions.
3 changes: 1 addition & 2 deletions docs/lib/Components/LayoutPage.js
View file
Expand Up @@ -50,8 +50,7 @@ const columnProps = PropTypes.oneOfType([
// 12 || "12" => col-12 or col-\`width\`-12
// auto => col-auto or col-\`width\`-auto
// true => col or col-\`width\`
push: stringOrNumberProp,
pull: stringOrNumberProp,
order: stringOrNumberProp,
offset: stringOrNumberProp
})
]);
Expand Down
4 changes: 2 additions & 2 deletions docs/lib/Components/index.js
View file
Expand Up @@ -133,7 +133,7 @@ class Components extends React.Component {
return (
<Container className="content">
<Row>
<Col md={3} className="order-md-12">
<Col md={{ size: 3, order: 2 }}>
<div className="docs-sidebar mb-3">
<h5>Components</h5>
<Nav className="flex-column">
Expand All @@ -146,7 +146,7 @@ class Components extends React.Component {
</Nav>
</div>
</Col>
<Col md={9} className="order-md-1">
<Col md={{ size: 9, order: 1 }}>
{this.props.children}
</Col>
</Row>
Expand Down
4 changes: 2 additions & 2 deletions docs/lib/Utilities/index.js
View file
Expand Up @@ -37,7 +37,7 @@ class Utilities extends React.Component {
return (
<Container className="content">
<Row>
<Col md={{ size: 3, push: 9 }}>
<Col md={{ size: 3, order: 2 }}>
<div className="docs-sidebar mb-3">
<h5>Utilities</h5>
<Nav className="flex-column">
Expand All @@ -47,7 +47,7 @@ class Utilities extends React.Component {
</Nav>
</div>
</Col>
<Col md={{ size: 9, pull: 3 }}>
<Col md={{ size: 9, order: 1 }}>
{this.props.children}
</Col>
</Row>
Expand Down
2 changes: 1 addition & 1 deletion docs/lib/examples/Layout.js
View file
Expand Up @@ -29,7 +29,7 @@ export default class Example extends React.Component {
<Col sm="4">.col .col-sm-4</Col>
</Row>
<Row>
<Col sm={{ size: 6, push: 2, pull: 2, offset: 1 }}>.col .col-sm-6 .col-sm-push-2 .col-sm-pull-2 .col-sm-offset-2</Col>
<Col sm={{ size: 6, order: 2, offset: 1 }}>.col .col-sm-6 .col-sm-order-2 .col-sm-offset-2</Col>
</Row>
<Row>
<Col sm="12" md={{ size: 8, offset: 2 }}>.col .col-sm-12 .col-md-6 .col-md-offset-3</Col>
Expand Down
10 changes: 5 additions & 5 deletions src/Col.js
View file
Expand Up @@ -2,7 +2,7 @@ import isobject from 'lodash.isobject';
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { mapToCssModules } from './utils';
import { mapToCssModules, deprecated } from './utils';

const colWidths = ['xs', 'sm', 'md', 'lg', 'xl'];
const stringOrNumberProp = PropTypes.oneOfType([PropTypes.number, PropTypes.string]);
Expand All @@ -13,8 +13,9 @@ const columnProps = PropTypes.oneOfType([
PropTypes.string,
PropTypes.shape({
size: PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.string]),
push: stringOrNumberProp,
pull: stringOrNumberProp,
push: deprecated(stringOrNumberProp, 'Please use the prop "order"'),
pull: deprecated(stringOrNumberProp, 'Please use the prop "order"'),
order: stringOrNumberProp,
offset: stringOrNumberProp
})
]);
Expand Down Expand Up @@ -78,8 +79,7 @@ const Col = (props) => {

colClasses.push(mapToCssModules(classNames({
[colClass]: columnProp.size || columnProp.size === '',
[`push${colSizeInterfix}${columnProp.push}`]: columnProp.push || columnProp.push === 0,
[`pull${colSizeInterfix}${columnProp.pull}`]: columnProp.pull || columnProp.pull === 0,
[`order${colSizeInterfix}${columnProp.order}`]: columnProp.order || columnProp.order === 0,
[`offset${colSizeInterfix}${columnProp.offset}`]: columnProp.offset || columnProp.offset === 0
})), cssModule);
} else {
Expand Down
10 changes: 5 additions & 5 deletions src/Label.js
View file
Expand Up @@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import isobject from 'lodash.isobject';
import { mapToCssModules } from './utils';
import { mapToCssModules, deprecated } from './utils';

const colWidths = ['xs', 'sm', 'md', 'lg', 'xl'];

Expand All @@ -13,8 +13,9 @@ const columnProps = PropTypes.oneOfType([
PropTypes.number,
PropTypes.shape({
size: stringOrNumberProp,
push: stringOrNumberProp,
pull: stringOrNumberProp,
push: deprecated(stringOrNumberProp, 'Please use the prop "order"'),
pull: deprecated(stringOrNumberProp, 'Please use the prop "order"'),
order: stringOrNumberProp,
offset: stringOrNumberProp,
}),
]);
Expand Down Expand Up @@ -84,8 +85,7 @@ const Label = (props) => {

colClasses.push(mapToCssModules(classNames({
[colClass]: columnProp.size || columnProp.size === '',
[`push${colSizeInterfix}${columnProp.push}`]: columnProp.push || columnProp.push === 0,
[`pull${colSizeInterfix}${columnProp.pull}`]: columnProp.pull || columnProp.pull === 0,
[`order${colSizeInterfix}${columnProp.order}`]: columnProp.order || columnProp.order === 0,
[`offset${colSizeInterfix}${columnProp.offset}`]: columnProp.offset || columnProp.offset === 0
})), cssModule);
} else {
Expand Down
17 changes: 7 additions & 10 deletions src/__tests__/Col.spec.js
View file
Expand Up @@ -30,11 +30,10 @@ describe('Col', () => {
});

it('should allow custom columns to be defined with objects', () => {
const wrapper = shallow(<Col widths={['base', 'jumbo', 'wtf']} wtf={{ size: 1, push: 2, pull: 3, offset: 4 }} />);
const wrapper = shallow(<Col widths={['base', 'jumbo', 'wtf']} wtf={{ size: 1, order: 2, offset: 4 }} />);

expect(wrapper.hasClass('col-wtf-1')).toBe(true);
expect(wrapper.hasClass('push-wtf-2')).toBe(true);
expect(wrapper.hasClass('pull-wtf-3')).toBe(true);
expect(wrapper.hasClass('order-wtf-2')).toBe(true);
expect(wrapper.hasClass('offset-wtf-4')).toBe(true);
expect(wrapper.hasClass('col')).toBe(true);
});
Expand All @@ -61,28 +60,26 @@ describe('Col', () => {
});

it('should pass col size specific classes via Objects', () => {
const wrapper = shallow(<Col sm={{ size: 6, push: 2, pull: 2, offset: 2 }} />);
const wrapper = shallow(<Col sm={{ size: 6, order: 2, offset: 2 }} />);

expect(wrapper.hasClass('col-sm-6')).toBe(true);
expect(wrapper.hasClass('col')).toBe(true);
expect(wrapper.hasClass('push-sm-2')).toBe(true);
expect(wrapper.hasClass('pull-sm-2')).toBe(true);
expect(wrapper.hasClass('order-sm-2')).toBe(true);
expect(wrapper.hasClass('offset-sm-2')).toBe(true);
});

it('should pass col size specific classes via Objects including 0', () => {
const wrapper = shallow(<Col sm={{ size: 6, push: 0, pull: 0, offset: 0 }} />);
const wrapper = shallow(<Col sm={{ size: 6, order: 0, offset: 0 }} />);

expect(wrapper.hasClass('col-sm-6')).toBe(true);
expect(wrapper.hasClass('col')).toBe(true);
expect(wrapper.hasClass('push-sm-0')).toBe(true);
expect(wrapper.hasClass('pull-sm-0')).toBe(true);
expect(wrapper.hasClass('order-sm-0')).toBe(true);
expect(wrapper.hasClass('offset-sm-0')).toBe(true);
});

it('should pass col size when passing via object with size "auto"', () => {
const wrapper = shallow(<Col
sm={{ size: 'auto', push: 2, pull: 2, offset: 2 }}
sm={{ size: 'auto', offset: 2 }}
/>);

expect(wrapper.hasClass('col-sm-auto')).toBe(true);
Expand Down
21 changes: 8 additions & 13 deletions src/__tests__/Label.spec.js
View file
Expand Up @@ -106,37 +106,32 @@ describe('Label', () => {
});

it('should pass col size specific classes via Objects', () => {
const wrapper = shallow(<Label sm={{ size: 6, push: 2, pull: 2, offset: 2 }}>Yo!</Label>);
const wrapper = shallow(<Label sm={{ size: 6, order: 2, offset: 2 }}>Yo!</Label>);

expect(wrapper.hasClass('col-sm-6')).toBe(true);
expect(wrapper.hasClass('push-sm-2')).toBe(true);
expect(wrapper.hasClass('pull-sm-2')).toBe(true);
expect(wrapper.hasClass('order-sm-2')).toBe(true);
expect(wrapper.hasClass('offset-sm-2')).toBe(true);
});

it('should pass col size specific classes via Objects (xs)', () => {
const wrapper = shallow(<Label xs={{ size: 6, push: 2, pull: 2, offset: 2 }}>Yo!</Label>);
const wrapper = shallow(<Label xs={{ size: 6, order: 2, offset: 2 }}>Yo!</Label>);

expect(wrapper.hasClass('col-6')).toBe(true);
expect(wrapper.hasClass('push-2')).toBe(true);
expect(wrapper.hasClass('pull-2')).toBe(true);
expect(wrapper.hasClass('order-2')).toBe(true);
expect(wrapper.hasClass('offset-2')).toBe(true);
});

it('should pass multiple col size specific classes via Objects', () => {
const wrapper = shallow(<Label xs={{ size: 4, push: 3, pull: 3, offset: 3 }} sm={{ size: 6, push: 2, pull: 2, offset: 2 }} md={{ size: 7, push: 1, pull: 1, offset: 1 }}>Yo!</Label>);
const wrapper = shallow(<Label xs={{ size: 4, order: 3, offset: 3 }} sm={{ size: 6, order: 2, offset: 2 }} md={{ size: 7, order: 1, offset: 1 }}>Yo!</Label>);

expect(wrapper.hasClass('col-4')).toBe(true);
expect(wrapper.hasClass('push-3')).toBe(true);
expect(wrapper.hasClass('pull-3')).toBe(true);
expect(wrapper.hasClass('order-3')).toBe(true);
expect(wrapper.hasClass('offset-3')).toBe(true);
expect(wrapper.hasClass('col-sm-6')).toBe(true);
expect(wrapper.hasClass('push-sm-2')).toBe(true);
expect(wrapper.hasClass('pull-sm-2')).toBe(true);
expect(wrapper.hasClass('order-sm-2')).toBe(true);
expect(wrapper.hasClass('offset-sm-2')).toBe(true);
expect(wrapper.hasClass('col-md-7')).toBe(true);
expect(wrapper.hasClass('push-md-1')).toBe(true);
expect(wrapper.hasClass('pull-md-1')).toBe(true);
expect(wrapper.hasClass('order-md-1')).toBe(true);
expect(wrapper.hasClass('offset-md-1')).toBe(true);
});

Expand Down

0 comments on commit 7c5e690

Please sign in to comment.