[issue-35] enhance grid to support reverse layout (#36)

alecherryy · Mar 27, 2021 · bc8e053 · bc8e053
1 parent 15fa4d9
commit bc8e053
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 13 deletions.
diff --git a/src/stories/layouts/Grid/Grid.js b/src/stories/layouts/Grid/Grid.js
@@ -8,18 +8,21 @@ import PropTypes from 'prop-types';
  *
  * @param {node} children of the component
  * @param {number} numColumns number of columns in layout.
+ * @param {boolean} reverse reverse the direction of items
  * @return {object} (
- *   <Grid numColumns={numColumns}>
+ *   <Grid numColumns={numColumns} reverse={reverse}>
  *      {children}
  *    </Grid>
  * )
  */
 
-export const Grid = ({ children, numColumns }) => {
-  const modifierClass = numColumns ? `grid--${numColumns}-col` : '';
+export const Grid = ({ children, numColumns, reverse }) => {
+  const numColumnsModifierClass = numColumns ? `grid--${numColumns}-col` : '';
+  const reverseModifierClass = reverse ? `grid--reverse` : '';
 
   return (
-    <div className={['grid', modifierClass].join(' ').trim()}>
+    <div className={['grid', numColumnsModifierClass, reverseModifierClass]
+      .join(' ').trim()}>
       {children}
     </div>
   );
@@ -34,6 +37,10 @@ Grid.propTypes = {
    * Grid's number of columns
    */
   numColumns: PropTypes.number,
+  /**
+   * Grid items' direction
+   */
+  reverse: PropTypes.bool,
 };
 
 Grid.defaultProps = {

diff --git a/src/stories/layouts/Grid/Grid.stories.js b/src/stories/layouts/Grid/Grid.stories.js
@@ -14,44 +14,46 @@ export default {
 
 const Template = (args) => (
   <Constrain>
-    <Grid numColumns={args.numColumns}>
+    <Grid
+      numColumns={args.numColumns}
+      reverse={args.reverse}>
       <div className="grid__item">
-        <h3>Test</h3>
+        <h3>Test 1</h3>
         <p>Lorem ipsum dolor sit amet, aliquip pertinax intellegebat vel ad.
           Quo diceret comprehensam id, mazim labore instructior et mea.</p>
       </div>
       <div className="grid__item">
-        <h3>Test</h3>
+        <h3>Test 2</h3>
         <p>Lorem ipsum dolor sit amet, aliquip pertinax intellegebat vel ad.
           Quo diceret comprehensam id, mazim labore instructior et mea.</p>
       </div>
       <div className="grid__item">
-        <h3>Test</h3>
+        <h3>Test 3</h3>
         <p>Lorem ipsum dolor sit amet, aliquip pertinax intellegebat vel ad.
           Quo diceret comprehensam id, mazim labore instructior et mea.</p>
       </div>
       <div className="grid__item">
-        <h3>Test</h3>
+        <h3>Test 4</h3>
         <p>Lorem ipsum dolor sit amet, aliquip pertinax intellegebat vel ad.
           Quo diceret comprehensam id, mazim labore instructior et mea.</p>
       </div>
       <div className="grid__item">
-        <h3>Test</h3>
+        <h3>Test 5</h3>
         <p>Lorem ipsum dolor sit amet, aliquip pertinax intellegebat vel ad.
           Quo diceret comprehensam id, mazim labore instructior et mea.</p>
       </div>
       <div className="grid__item">
-        <h3>Test</h3>
+        <h3>Test 6</h3>
         <p>Lorem ipsum dolor sit amet, aliquip pertinax intellegebat vel ad.
           Quo diceret comprehensam id, mazim labore instructior et mea.</p>
       </div>
       <div className="grid__item">
-        <h3>Test</h3>
+        <h3>Test 7</h3>
         <p>Lorem ipsum dolor sit amet, aliquip pertinax intellegebat vel ad.
           Quo diceret comprehensam id, mazim labore instructior et mea.</p>
       </div>
       <div className="grid__item">
-        <h3>Test</h3>
+        <h3>Test 8</h3>
         <p>Lorem ipsum dolor sit amet, aliquip pertinax intellegebat vel ad.
           Quo diceret comprehensam id, mazim labore instructior et mea.</p>
       </div>
@@ -82,3 +84,10 @@ export const FourColumn = Template.bind({});
 FourColumn.args = {
   numColumns: 4,
 };
+
+// Grid Layout two columns reversed
+export const TwoColumnReversed = Template.bind({});
+TwoColumnReversed.args = {
+  numColumns: 2,
+  reverse: true,
+};
diff --git a/src/stories/layouts/Grid/styles.scss b/src/stories/layouts/Grid/styles.scss
@@ -9,6 +9,10 @@
   gap: calc(#{$spacing-3} / 2);
 }
 
+.grid--reverse {
+  direction: rtl;
+}
+
 .grid--2-col {
   @include bp-tablet {
     grid-template-columns: repeat(2, 1fr);