Create fixed column (#82)

* Add new documentation

* Add new properties

* Create new verifications to fixed a column

* Creaet a story to fixed column

* Remove sibling property

* Update documentation

Author: nathpaiva

README.md

@@ -83,10 +83,10 @@ These are the **available** and **reserved** props that can be used on the `Col`
 
 | Prop          | Valid types                                                 | Valid values                                                                            | Default value | Description                                                                                                                                                                                                                                               |
 |:--------------|:------------------------------------------------------------|:----------------------------------------------------------------------------------------|:--------------|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `xs`          | integer                                                     | `0`-`12`<br>(based on default columns)<br>`hidden`<br>`auto`                                                  | nill          | Sets the width of the col based the column configuration (12 by default) for the XS breakpoint and up.                                                                                                                                                    |
-| `sm`          | integer                                                     | `0`-`12`<br>(based on default columns)<br>`hidden`<br>`auto`                                                  | nill          | Sets the width of the col based the column configuration (12 by default) for the SM breakpoint and up.                                                                                                                                                    |
-| `md`          | integer                                                     | `0`-`12`<br>(based on default columns)<br>`hidden`<br>`auto`                                                  | nill          | Sets the width of the col based the column configuration (12 by default) for the MD breakpoint and up.                                                                                                                                                    |
-| `lg`          | integer                                                     | `0`-`12`<br>(based on default columns)<br>`hidden`<br>`auto`                                                   | nill          | Sets the width of the col based the column configuration (12 by default) for the LG breakpoint and up.                                                                                                                                                    |
+| `xs`          | integer/ string                                             | `0`-`12`<br>(based on default columns)<br>`hidden`<br>`auto` <br> `'390px'` - `'calc=(100% - 390px)'`         | nill          | **Number:** Sets the width of the col based the column configuration (12 by default) for the XS breakpoint and up.<br> **String:** Set a width like string `xs="390px"` to fixed have a fixed colum, or create a calc `xs="calc(100% - 390px)"` base on sibling to have a responsive column.                                                                                                                                                    |
+| `sm`          | integer/ string                                             | `0`-`12`<br>(based on default columns)<br>`hidden`<br>`auto` <br> `'390px'` - `'calc=(100% - 390px)'`         | nill          | **Number:** Sets the width of the col based the column configuration (12 by default) for the SM breakpoint and up.<br> **String:** Set a width like string `sm="390px"` to fixed have a fixed colum, or create a calc `sm="calc(100% - 390px)"` base on sibling to have a responsive column.                                                                                                                                                    |
+| `md`          | integer/ string                                             | `0`-`12`<br>(based on default columns)<br>`hidden`<br>`auto` <br> `'390px'` - `'calc=(100% - 390px)'`         | nill          | **Number:** Sets the width of the col based the column configuration (12 by default) for the MD breakpoint and up.<br> **String:** Set a width like string `md="390px"` to fixed have a fixed colum, or create a calc `md="calc(100% - 390px)"` base on sibling to have a responsive column.                                                                                                                                                    |
+| `lg`          | integer/ string                                             | `0`-`12`<br>(based on default columns)<br>`hidden`<br>`auto` <br> `'390px'` - `'calc=(100% - 390px)'`         | nill          | **Number:** Sets the width of the col based the column configuration (12 by default) for the LG breakpoint and up.<br> **String:** Set a width like string `lg="390px"` to fixed have a fixed colum, or create a calc `lg="calc(100% - 390px)"` base on sibling to have a responsive column.                                                                                                                                                    |
 | `gutter`      | integer, string,<br>[object](#responsive-api-using-objects) | `'1rem'`<br>`'12px'`<br>`4`                                                             | `'1rem'`      | Sets the width of the gutter to be used between columns. For correct positioning you must set the same value (if custom) on the parent Row                                                                                                                |
 | `order`       | string,<br>[object](#responsive-api-using-objects)          | `-1`<br>`0`<br>`1`<br>(etc)                                                             | `0`           | By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container. [Read more about order.](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-9) |
 | `alignSelf`   | string,<br>[object](#responsive-api-using-objects)          | `'auto'`<br>`'flex‑start'`<br>`'flex‑end'`<br>`'center'`<br>`'baseline'`<br>`'stretch'` | `'auto'`      | This allows the default alignment (or the one specified by align‑items) to be overridden for individual flex items. [Read more about align-self.](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-14)                           |

src/components/Col/Col.js

@@ -42,10 +42,10 @@ const displayOptions = ['flex', 'inline-flex', 'block', 'none', 'inline-block'];
 export const alignSelfOptions = ['auto', 'flex-start', 'flex-end', 'center', 'baseline', 'stretch'];
 
 Col.propTypes = {
-  xs: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['hidden', 'auto'])]),
-  sm: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['hidden', 'auto'])]),
-  md: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['hidden', 'auto'])]),
-  lg: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['hidden', 'auto'])]),
+  xs: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.oneOf(['hidden', 'auto'])]),
+  sm: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.oneOf(['hidden', 'auto'])]),
+  md: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.oneOf(['hidden', 'auto'])]),
+  lg: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.oneOf(['hidden', 'auto'])]),
 
   gutter: PropTypes.oneOfType([
     PropTypes.number,

src/components/Col/Col.stories.js

@@ -5,7 +5,7 @@ import { storiesOf } from '@storybook/react';
 import { withKnobs } from '@storybook/addon-knobs';
 import withReadme from 'storybook-readme/with-readme';
 
-import { Col, Fluid, Responsive, AutoGrow } from './stories';
+import { Col, Fluid, Responsive, AutoGrow, Fixed } from './stories';
 import README from './README.md';
 
 storiesOf('Col', module)
@@ -14,4 +14,5 @@ storiesOf('Col', module)
   .add('Default', () => <Col />)
   .add('Fluid example', () => <Fluid />)
   .add('Responsive example', () => <Responsive />)
-  .add('Auto grow example', () => <AutoGrow />);
+  .add('Auto grow example', () => <AutoGrow />)
+  .add('One fixed col', () => <Fixed />);

src/components/Col/README.md

@@ -6,10 +6,18 @@ A component for creating a column containing other elements, within a grid syste
 
 View detailed property information in [Col props](https://github.com/aaronvanston/react-flexa#col-props) within the react-flexa readme.
 
-- `xs`: Sets the width of the col based the column configuration (12 by default) for the XS breakpoint and up.
-- `sm`: Sets the width of the col based the column configuration (12 by default) for the SM breakpoint and up.
-- `md`: Sets the width of the col based the column configuration (12 by default) for the MD breakpoint and up.
-- `lg`: Sets the width of the col based the column configuration (12 by default) for the LG breakpoint and up.
+- `xs`:
+  - **Number:** Sets the width of the col based the column configuration (12 by default) for the XS breakpoint and up.
+  - **String:** Set a width like string `xs="390px"` to fixed have a fixed colum, or create a calc `xs="calc(100% - 390px)"` base on sibling to have a responsive column.
+- `sm`:
+  - **Number:** Sets the width of the col based the column configuration (12 by default) for the SM breakpoint and up.
+  - **String:** Set a width like string `sm="390px"` to fixed have a fixed colum, or create a calc `sm="calc(100% - 390px)"` base on sibling to have a responsive column.
+- `md`:
+  - **Number:** Sets the width of the col based the column configuration (12 by default) for the MD breakpoint and up.
+  - **String:** Set a width like string `md="390px"` to fixed have a fixed colum, or create a calc `md="calc(100% - 390px)"` base on sibling to have a responsive column.
+- `lg`:
+  - **Number:** Sets the width of the col based the column configuration (12 by default) for the LG breakpoint and up.
+  - **String:** Set a width like string `lg="390px"` to fixed have a fixed colum, or create a calc `lg="calc(100% - 390px)"` base on sibling to have a responsive column.
 - `gutter`: Sets the width of the gutter to be used between columns.
 - `order`: Controls the order in which they appear in the flex container.
 - `alignSelf`: Controls vertical alignment in the flex container.
@@ -45,4 +53,31 @@ export default () => (
 );
 ```
 
+### One fixed column
+
+```js
+import React from 'react';
+import { Row, Col } from 'react-flexa';
+
+export default () => (
+  <Row>
+    <Col xs={12} sm={6} md={6} lg="390px"></Col>
+    <Col xs={12} sm={6} md={6} lg="calc(100% - 390px)"></Col>
+  </Row>
+);
+```
+
+```js
+import React from 'react';
+import { Row, Col } from 'react-flexa';
+
+export default () => (
+  <Row>
+    <Col xs={12} sm={6} md={6} lg="390px"></Col>
+    <Col xs={12} sm={6} md={6} lg="calc(80% - 390px)"></Col>
+    <Col xs={12} sm={6} md={6} lg="20%"></Col>
+  </Row>
+);
+```
+
 Read more about react-flexa [responsive api using objects.](https://github.com/aaronvanston/react-flexa#responsive-api-using-objects)

src/components/Col/stories/Fixed.js

@@ -0,0 +1,82 @@
+import React from 'react';
+
+import { Box, Title, Section } from '../../../../stories/components';
+import { Row, Col } from '../../';
+
+export default () => (
+  <div>
+    <Section>
+      <Title>One fixed column and other responsive</Title>
+      <Row>
+        <Col xs={12} sm={6} md={6} lg="390px">
+          <Box>col 1</Box>
+        </Col>
+
+        <Col xs={12} sm={6} md={6} lg="calc(80% - 390px)">
+          <Box bgColor="#9c27b0">col 2</Box>
+        </Col>
+
+        <Col xs={12} sm={6} md={6} lg="20%">
+          <Box bgColor="#ff9800">col 3</Box>
+        </Col>
+      </Row>
+    </Section>
+
+    <Section>
+      <Title>One fixed column and responsive gutter</Title>
+      <Row gutter={{ xs: 0, sm: 2, md: 4, lg: 8 }}>
+        <Col xs={12} sm={6} md={6} lg="390px">
+          <Box>col 1</Box>
+        </Col>
+
+        <Col xs={12} sm={6} md={6} lg="calc(80% - 390px)">
+          <Box bgColor="#9c27b0">col 2</Box>
+        </Col>
+
+        <Col xs={12} sm={6} md={6} lg="20%">
+          <Box bgColor="#ff9800">col 3</Box>
+        </Col>
+      </Row>
+    </Section>
+
+    <Section>
+      <Title>One fixed column and other responsive order</Title>
+      <Row>
+        <Col xs={12} sm={6} md={6} lg="390px" order={{ xs: 4, sm: 3, md: 2, lg: 1 }}>
+          <Box>col 1</Box>
+        </Col>
+
+        <Col xs={12} sm={6} md={6} lg="calc(80% - 390px)" order={1}>
+          <Box bgColor="#9c27b0">col 2</Box>
+        </Col>
+
+        <Col xs={12} sm={6} md={6} lg="20%">
+          <Box bgColor="#ff9800">col 3</Box>
+        </Col>
+      </Row>
+    </Section>
+
+    <Section>
+      <Title>One fixed column and other responsive alignSelf</Title>
+      <Row>
+        <Col xs={12} sm={6} md={6} lg="390px">
+          <Box height="5rem">col 1</Box>
+        </Col>
+
+        <Col
+          xs={12}
+          sm={6}
+          md={6}
+          lg="calc(80% - 390px)"
+          alignSelf={{ xs: 'flex-end', md: 'center', lg: 'flex-start' }}
+        >
+          <Box bgColor="#9c27b0">col 2</Box>
+        </Col>
+
+        <Col xs={12} sm={6} md={6} lg="20%">
+          <Box bgColor="#ff9800" height="5rem">col 3</Box>
+        </Col>
+      </Row>
+    </Section>
+  </div>
+);

src/components/Col/stories/index.js

@@ -2,3 +2,4 @@ export Col from './Col';
 export Fluid from './Fluid';
 export Responsive from './Responsive';
 export AutoGrow from './AutoGrow';
+export Fixed from './Fixed';

src/helpers/columnWidth/columnWidth.js

@@ -38,10 +38,22 @@ const columnWidth = (props, breakpoint) => {
 
   const width = percentage(props, breakpoint);
 
-  return has(props, `${breakpoint}`) ? css`
-    flex-basis: ${width}%;
-    max-width: ${width}%;
-    ${display(props, breakpoint)}
-  ` : null;
+  if (has(props, `${breakpoint}`) && typeof props[breakpoint] !== 'string') {
+    return css`
+      flex-basis: ${width}%;
+      max-width: ${width}%;
+      ${display(props, breakpoint)}
+    `;
+  }
+
+  if (has(props, `${breakpoint}`) && typeof props[breakpoint] === 'string') {
+    return css`
+      width: ${props[breakpoint]};
+      max-width: ${props[breakpoint]};
+      flex-basis: initial;
+    `;
+  }
+
+  return null;
 };
 export default columnWidth;

src/helpers/columnWidth/columnWidth.spec.js

@@ -88,4 +88,16 @@ describe('columnWidth', () => {
     const width = columnWidth(hiddenMockProps, 'md').join('');
     expect(width).toContain('display: none');
   });
+
+  test('should return a fixed column', () => {
+    const hiddenMockProps = { xs: 12, sm: 5, md: 6, lg: '390px' };
+    const width = columnWidth(hiddenMockProps, 'lg').join('');
+    expect(width).toContain('max-width: 390px;');
+  });
+
+  test('should return a fixed column with sibling responsive', () => {
+    const hiddenMockProps = { xs: 12, sm: 5, md: 6, lg: 'calc(100% - 390px)' };
+    const width = columnWidth(hiddenMockProps, 'lg').join('');
+    expect(width).toContain('calc(100% - 390px);');
+  });
 });