feat: add reversed prop to the Stack component (#2678)

* feat: add reverse prop to the stack component

* fix: fix after code review

* fix: add snapshot with reversed prop

---------

Co-authored-by: Kyrylo Hudym-Levkovych <[email protected]>

src/Stack/README.md

@@ -36,3 +36,22 @@ Stacks are vertical by default and stacked items are full-width by default. Watc
   <div className="border p-2">third block</div>
 </Stack>
 ```
+
+## Reversed props
+
+- **Vertical** with `reversed` prop
+```jsx live
+<Stack gap={3} reversed>
+  <Button>first button</Button>
+  <Button>second button</Button>
+  <Button>third button</Button>
+</Stack>
+```
+- **Horizontal** with `reversed` prop
+```jsx live
+<Stack direction="horizontal" gap={3} reversed>
+  <div className="border p-2">first block</div>
+  <div className="border p-2">second block</div>
+  <div className="border p-2">third block</div>
+</Stack>
+```

src/Stack/Stack.test.jsx

@@ -1,17 +1,28 @@
 import React from 'react';
+import { render } from '@testing-library/react';
 import { mount } from 'enzyme';
 import renderer from 'react-test-renderer';
 
 import Stack from './index';
 
+const stackList = ['First', 'Second'];
+
 describe('<Stack />', () => {
   describe('correct rendering', () => {
     it('renders without props', () => {
       const tree = renderer.create((
-        <Stack>content</Stack>
+        <Stack>{stackList.map((el) => <div>{el}</div>)}</Stack>
       )).toJSON();
       expect(tree).toMatchSnapshot();
     });
+    it('renders with the reversed prop', () => {
+      const { container } = render(
+        <Stack reversed>
+          {stackList.reverse().map((el) => <div>{el}</div>)}
+        </Stack>,
+      );
+      expect(container).toMatchSnapshot();
+    });
     it('renders with the vertical direction', () => {
       const wrapper = mount(<Stack>Content</Stack>);
       expect(wrapper.find('.pgn__vstack').length).toBeGreaterThan(0);

src/Stack/__snapshots__/Stack.test.jsx.snap

@@ -1,9 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`<Stack /> correct rendering renders with the reversed prop 1`] = `
+<div>
+  <div
+    class="pgn__vstack pgn__stack-reversed"
+  >
+    <div>
+      Second
+    </div>
+    <div>
+      First
+    </div>
+  </div>
+</div>
+`;
+
 exports[`<Stack /> correct rendering renders without props 1`] = `
 <div
   className="pgn__vstack"
 >
-  content
+  <div>
+    First
+  </div>
+  <div>
+    Second
+  </div>
 </div>
 `;

src/Stack/index.jsx

@@ -10,6 +10,7 @@ const DIRECTION_VARIANTS = [
 const Stack = forwardRef(({
   direction,
   gap,
+  reversed,
   children,
   className,
   ...rest
@@ -19,6 +20,7 @@ const Stack = forwardRef(({
     className={classNames(
       direction === 'horizontal' ? 'pgn__hstack' : 'pgn__vstack',
       gap ? `pgn__stack-gap--${gap}` : '',
+      reversed ? 'pgn__stack-reversed' : '',
       className,
     )}
     {...rest}
@@ -39,6 +41,8 @@ Stack.propTypes = {
    * `0, 0.5, ... 6`.
    */
   gap: PropTypes.number,
+  /** Specifies the order of the children. */
+  reversed: PropTypes.bool,
   /** Specifies an additional `className` to add to the base element. */
   className: PropTypes.string,
 };
@@ -47,6 +51,7 @@ Stack.defaultProps = {
   direction: 'vertical',
   gap: 0,
   className: undefined,
+  reversed: false,
 };
 
 export default Stack;

src/Stack/index.scss

@@ -16,9 +16,18 @@
 .pgn__vstack {
   flex: 1 1 auto;
   flex-direction: column;
+
+  &.pgn__stack-reversed {
+    flex-direction: column-reverse;
+  }
 }
 
 .pgn__hstack {
   flex-direction: row;
   align-items: center;
+
+  &.pgn__stack-reversed {
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+  }
 }