Skip to content

Commit

Permalink
improve breakpoint props (#8)
Browse files Browse the repository at this point in the history
  • Loading branch information
@couds
couds committed Dec 6, 2017
1 parent e47b861 commit da67d89
Show file tree
Hide file tree
Showing 5 changed files with 210 additions and 24 deletions.
32 changes: 32 additions & 0 deletions src/components/columns/__test__/__snapshots__/columns.test.js.snap
View file
Expand Up @@ -89,3 +89,35 @@ exports[`Columns component Should have columns one column half width, other narr
</div>
</div>
`;

exports[`Columns component Should have throw warning if deprecated prop is used but render it anyway 1`] = `
<div
className="columns is-multiline"
style={Object {}}
>
<div
className="column is-half-mobile"
style={Object {}}
>
1
</div>
<div
className="column is-narrow"
style={Object {}}
>
2
</div>
<div
className="column"
style={Object {}}
>
3
</div>
<div
className="column"
style={Object {}}
>
4
</div>
</div>
`;
17 changes: 17 additions & 0 deletions src/components/columns/__test__/columns.test.js
View file
Expand Up @@ -3,6 +3,12 @@ import renderer from 'react-test-renderer';
import Columns from '..';

describe('Columns component', () => {
beforeEach(() => {
console.warn = jest.genMockFn();
});
afterAll(() => {
console.warn.mockRestore();
});
it('Should have columns classname', () => {
const component = renderer.create(
<Columns>
Expand Down Expand Up @@ -32,4 +38,15 @@ describe('Columns component', () => {
</Columns>);
expect(component.toJSON()).toMatchSnapshot();
});
it('Should have throw warning if deprecated prop is used but render it anyway', () => {
const component = renderer.create(
<Columns>
<Columns.Column mobileSize="half">1</Columns.Column>
<Columns.Column narrow>2</Columns.Column>
<Columns.Column>3</Columns.Column>
<Columns.Column>4</Columns.Column>
</Columns>);
expect(global.console.warn).toBeCalled();
expect(component.toJSON()).toMatchSnapshot();
});
});
12 changes: 12 additions & 0 deletions src/components/columns/columns.js
View file
Expand Up @@ -12,9 +12,21 @@ export default class Columns extends PureComponent {
children: PropTypes.node,
className: PropTypes.string,
style: PropTypes.object,
/**
* Breakpoint where columns become stacked.
*/
breakpoint: PropTypes.oneOf(breakpoints),
/**
* `true` to remove space between columns
*/
gapless: PropTypes.bool,
/**
* `true` if you want to use more than one line if you add more column elements that would fit in a single row.
*/
multiline: PropTypes.bool,
/**
* `true` you want the columns inside to be horizontaly centered
*/
centered: PropTypes.bool,
}

Expand Down
20 changes: 15 additions & 5 deletions src/components/columns/columns.story.js
View file
Expand Up @@ -449,11 +449,21 @@ storiesOf('Columns', module)
.add('Different column size per breakpoint', withInfo('')(() => (
<Columns breakpoint="mobile">
<Columns.Column
mobileSize="three-quarters"
tabletSize="two-thirds"
desktopSize="half"
widescreenSize="one-third"
fullhfSize="one-quarter"
mobile={{
size: 'three-quarters',
}}
tablet={{
size: 'two-thirds',
}}
desktop={{
size: 'half',
}}
widescreen={{
size: 'one-third',
}}
fullhd={{
size: 'one-quarter',
}}
>
<p className="bd-notification is-success">
is-three-quarters-mobile<br />
Expand Down
153 changes: 134 additions & 19 deletions src/components/columns/components/column.js
View file
Expand Up @@ -3,32 +3,106 @@ import PropTypes from 'prop-types';
import classNames from 'classnames';
import CONSTANTS from '../constants';


import GLOBAL_CONSTANTS from '../../../constants';

const sizes = [null, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
.concat(Object.keys(CONSTANTS.SIZES).map(key => CONSTANTS.SIZES[key]));

const breakpoints = [true, false]
.concat(Object.keys(GLOBAL_CONSTANTS.BREAKPOINTS).map(key => GLOBAL_CONSTANTS.BREAKPOINTS[key]));

export default class Column extends PureComponent {
static propTypes = {
children: PropTypes.node,
className: PropTypes.string,
style: PropTypes.object,
/**
* The size of the column. the maximun size of a row is 12
*/
size: PropTypes.oneOf(sizes),
/**
* Create horizontal space around Column elements
*/
offset: PropTypes.oneOf(sizes),
narrow: PropTypes.oneOf(breakpoints),
/**
* If you want a column to only take the space it needs, use the narrow modifier. The other column(s) will fill up the remaining space.
*/
narrow: PropTypes.bool,
/**
* Size, Offset and Narrow props for Mobile devices (Up to 768px)
*/
mobile: PropTypes.shape({
size: PropTypes.oneOf(sizes),
offset: PropTypes.oneOf(sizes),
narrow: PropTypes.bool,
}),
/**
* Size, Offset and Narrow props for Tablet devices (Between 769px and 1023px)
*/
tablet: PropTypes.shape({
size: PropTypes.oneOf(sizes),
offset: PropTypes.oneOf(sizes),
narrow: PropTypes.bool,
}),
/**
* Size, Offset and Narrow props for Desktop devices (Between 1024px and 1215px)
*/
desktop: PropTypes.shape({
size: PropTypes.oneOf(sizes),
offset: PropTypes.oneOf(sizes),
narrow: PropTypes.bool,
}),
/**
* Size, Offset and Narrow props for WideScreen devices (Between 1216px and 1407px)
*/
widescreen: PropTypes.shape({
size: PropTypes.oneOf(sizes),
offset: PropTypes.oneOf(sizes),
narrow: PropTypes.bool,
}),
/**
* Size, Offset and Narrow props for FullHD devices (1408px and above)
*/
fullhd: PropTypes.shape({
size: PropTypes.oneOf(sizes),
offset: PropTypes.oneOf(sizes),
narrow: PropTypes.bool,
}),
/**
* @deprecated Please use mobile.size prop
*/
mobileSize: PropTypes.oneOf(sizes),

/**
* @deprecated Please use table.size prop
*/
tabletSize: PropTypes.oneOf(sizes),
/**
* @deprecated Please use desktop.size prop
*/
desktopSize: PropTypes.oneOf(sizes),
/**
* @deprecated Please use widescreen.size prop
*/
widescreenSize: PropTypes.oneOf(sizes),
/**
* @deprecated Please use fullhd.size prop
*/
fullhdSize: PropTypes.oneOf(sizes),
/**
* @deprecated Please use mobile.offset prop
*/
mobileOffset: PropTypes.oneOf(sizes),
/**
* @deprecated Please use tablet.offset prop
*/
tabletOffset: PropTypes.oneOf(sizes),
/**
* @deprecated Please use desktop.offset prop
*/
desktopOffset: PropTypes.oneOf(sizes),
/**
* @deprecated Please use widescreen.offset prop
*/
widescreenOffset: PropTypes.oneOf(sizes),
/**
* @deprecated Please use fullhd.offset prop
*/
fullhdOffset: PropTypes.oneOf(sizes),
}

Expand All @@ -38,7 +112,32 @@ export default class Column extends PureComponent {
style: {},
size: null,
offset: null,
narrow: null,
narrow: false,
mobile: {
size: null,
offset: null,
narrow: false,
},
tablet: {
size: null,
offset: null,
narrow: false,
},
desktop: {
size: null,
offset: null,
narrow: false,
},
widescreen: {
size: null,
offset: null,
narrow: false,
},
fullhd: {
size: null,
offset: null,
narrow: false,
},
mobileSize: null,
tabletSize: null,
desktopSize: null,
Expand All @@ -59,6 +158,12 @@ export default class Column extends PureComponent {
size,
offset,
narrow,
mobile,
tablet,
desktop,
widescreen,
fullhd,

mobileSize,
tabletSize,
desktopSize,
Expand All @@ -70,22 +175,32 @@ export default class Column extends PureComponent {
widescreenOffset,
fullhdOffset,
} = this.props;

if (mobileSize || tabletSize || desktopSize || widescreenSize || fullhdSize || mobileOffset || tabletOffset || desktopOffset || widescreenOffset || fullhdOffset) {
console.warn('DEPRECATION Warning: The props: mobileSize tabletSize desktopSize widescreenSize fullhdSize mobileOffset tabletOffset desktopOffset widescreenOffset fullhdOffset are deprecated, please use the mobile.size... alternatives');
}

return (
<div
className={classNames(className, 'column', {
[`is-${size}`]: size,
[`is-${mobileSize}-mobile`]: mobileSize,
[`is-${tabletSize}-tablet`]: tabletSize,
[`is-${desktopSize}-desktop`]: desktopSize,
[`is-${widescreenSize}-widescreen`]: widescreenSize,
[`is-${fullhdSize}-fullhd`]: fullhdSize,
[`is-${mobileOffset}-mobile`]: mobileOffset,
[`is-${tabletOffset}-tablet`]: tabletOffset,
[`is-${desktopOffset}-desktop`]: desktopOffset,
[`is-${widescreenOffset}-widescreen`]: widescreenOffset,
[`is-${fullhdOffset}-fullhd`]: fullhdOffset,
[`is-${mobile.size || mobileSize}-mobile`]: mobile.size || mobileSize,
[`is-${tablet.size || tabletSize}-tablet`]: tablet.size || tabletSize,
[`is-${desktop.size || desktopSize}-desktop`]: desktop.size || desktopSize,
[`is-${widescreen.size || widescreenSize}-widescreen`]: widescreen.size || widescreenSize,
[`is-${fullhd.size || fullhdSize}-fullhd`]: fullhd.size || fullhdSize,
[`is-offset-${mobile.offset || mobileOffset}-mobile`]: mobile.offset || mobileOffset,
[`is-offset-${tablet.offset || tabletOffset}-tablet`]: tablet.offset || tabletOffset,
[`is-offset-${desktop.offset || desktopOffset}-desktop`]: desktop.offset || desktopOffset,
[`is-offset-${widescreen.offset || widescreenOffset}-widescreen`]: widescreen.offset || widescreenOffset,
[`is-offset-${fullhd.offset || fullhdOffset}-fullhd`]: fullhd.offset || fullhdOffset,
[`is-offset-${offset}`]: offset,
[`is-narrow${typeof narrow !== 'boolean' ? `-${narrow}` : ''}`]: narrow,
'is-narrow': narrow,
'is-narrow-mobile': mobile.narrow,
'is-narrow-tablet': tablet.narrow,
'is-narrow-desktop': desktop.narrow,
'is-narrow-widescreen': widescreen.narrow,
'is-narrow-fullhd': fullhd.narrow,
})}
style={style}
>
Expand Down

0 comments on commit da67d89

Please sign in to comment.