From 10707c4595e3c3e0bf7129dbf9929307c726f640 Mon Sep 17 00:00:00 2001
From: Kyr <40792129+khudym@users.noreply.github.com>
Date: Tue, 10 Oct 2023 12:40:58 +0300
Subject: [PATCH] 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 <kyr.hudym@kyrs-MacBook-Pro.local>
---
 src/Stack/README.md                         | 19 ++++++++++++++++++
 src/Stack/Stack.test.jsx                    | 13 +++++++++++-
 src/Stack/__snapshots__/Stack.test.jsx.snap | 22 ++++++++++++++++++++-
 src/Stack/index.jsx                         |  5 +++++
 src/Stack/index.scss                        |  9 +++++++++
 5 files changed, 66 insertions(+), 2 deletions(-)

diff --git a/src/Stack/README.md b/src/Stack/README.md
index 8a49da001f..58e929383d 100644
--- a/src/Stack/README.md
+++ b/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>
+```
\ No newline at end of file
diff --git a/src/Stack/Stack.test.jsx b/src/Stack/Stack.test.jsx
index b771eb1214..1a05841701 100644
--- a/src/Stack/Stack.test.jsx
+++ b/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);
diff --git a/src/Stack/__snapshots__/Stack.test.jsx.snap b/src/Stack/__snapshots__/Stack.test.jsx.snap
index 76b3d66492..b317b09540 100644
--- a/src/Stack/__snapshots__/Stack.test.jsx.snap
+++ b/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>
 `;
diff --git a/src/Stack/index.jsx b/src/Stack/index.jsx
index 0e7aa7af15..d7a531ba39 100644
--- a/src/Stack/index.jsx
+++ b/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;
diff --git a/src/Stack/index.scss b/src/Stack/index.scss
index 52ed5b134d..e967233412 100644
--- a/src/Stack/index.scss
+++ b/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;
+  }
 }