Add 'order' option to Col

nlambert · Oct 4, 2019 · 7b86302 · 7b86302
1 parent 3d101ed
commit 7b86302
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 4 deletions.
diff --git a/index.d.ts b/index.d.ts
@@ -394,6 +394,7 @@ declare module '@bootstrap-styled/v4' {
         push?: number | string;
         pull?: number | string;
         offset?: number | string;
+        order?: number | string;
       });
 
   export type ColProps = {

diff --git a/src/Col/index.js b/src/Col/index.js
@@ -18,6 +18,7 @@ const columnProps = PropTypes.oneOfType([
     push: stringOrNumberProp,
     pull: stringOrNumberProp,
     offset: stringOrNumberProp,
+    order: stringOrNumberProp,
   }),
 ]);
 
@@ -119,6 +120,7 @@ class ColUnstyled extends React.Component { // eslint-disable-line react/prefer-
           [`push${colSizeInterfix}${columnProp.push}`]: columnProp.push,
           [`pull${colSizeInterfix}${columnProp.pull}`]: columnProp.pull,
           [`offset${colSizeInterfix}${columnProp.offset}`]: columnProp.offset,
+          [`order${colSizeInterfix}${columnProp.order}`]: columnProp.order,
         })), cssModule);
       } else {
         colClass = getColumnSizeClass(isXs, colWidth, columnProp);

diff --git a/src/Col/index.md b/src/Col/index.md
@@ -16,7 +16,7 @@ import { Col, Row } from '$PACKAGE_NAME';
 </Row>
 ```
 
-You can use `offset`, `size`, `push`, `pull` modifier on any `Col` component:
+You can use `offset`, `order`, `size`, `push`, `pull` modifier on any `Col` component:
 
 ```js
 import { Col, Row } from '$PACKAGE_NAME';

diff --git a/src/Col/tests/index.test.js b/src/Col/tests/index.test.js
@@ -83,16 +83,17 @@ describe('<Col />', () => {
     });
     expect(renderedComponent.find('div').at(1).hasClass('col-md-auto')).toEqual(true);
   });
-  it('should have a classes .col .col-sm-6 .sm-push-2 .sm-pull-2 .sm-offset-2', () => {
+  it('should have a classes .col .col-sm-6 .sm-push-2 .sm-pull-2 .sm-offset-1 .sm-order-2', () => {
     const renderedComponent = renderComponentUsingTheme({
       sm: {
-        size: 6, push: 2, pull: 2, offset: 1,
+        size: 6, push: 2, pull: 2, offset: 1, order: 2,
       },
     });
     expect(renderedComponent.find('div').at(1).hasClass('col-sm-6')).toEqual(true);
     expect(renderedComponent.find('div').at(1).hasClass('push-sm-2')).toEqual(true);
     expect(renderedComponent.find('div').at(1).hasClass('pull-sm-2')).toEqual(true);
     expect(renderedComponent.find('div').at(1).hasClass('offset-sm-1')).toEqual(true);
+    expect(renderedComponent.find('div').at(1).hasClass('order-sm-2')).toEqual(true);
   });
   it('should have children with a theme', () => {
     const renderedComponent = renderComponentUsingTheme({

diff --git a/src/Row/index.md b/src/Row/index.md
@@ -19,7 +19,7 @@ import {
 </Row>
 ```
 
-You can use `offset`, `size`, `push`, `pull` modifier on any `Col` component:
+You can use `offset`, `order`, `size`, `push`, `pull` modifier on any `Col` component:
 
 ```js
 import { Col, Row } from '$PACKAGE_NAME';
-Original file line number
+Diff line change
@@ Expand Up / @@ -16,7 +16,7 @@ import { Col, Row } from '$PACKAGE_NAME'; @@
     </Row>
     ```
-    You can use `offset`, `size`, `push`, `pull` modifier on any `Col` component:
+    You can use `offset`, `order`, `size`, `push`, `pull` modifier on any `Col` component:
     ```js
     import { Col, Row } from '$PACKAGE_NAME';
@@ Expand Down @@