From e560caaeb3369a58d58530fd895d346aa8f9ee62 Mon Sep 17 00:00:00 2001 From: Kyrylo Hudym-Levkovych Date: Mon, 2 Oct 2023 09:57:59 +0300 Subject: [PATCH 1/3] feat: add reverse prop to the stack component --- src/Stack/index.jsx | 37 ++++++++++++++++++++++++------------- 1 file changed, 24 insertions(+), 13 deletions(-) diff --git a/src/Stack/index.jsx b/src/Stack/index.jsx index 0e7aa7af15..5e3ebb2ecb 100644 --- a/src/Stack/index.jsx +++ b/src/Stack/index.jsx @@ -10,22 +10,30 @@ const DIRECTION_VARIANTS = [ const Stack = forwardRef(({ direction, gap, + reverse, children, className, ...rest -}, ref) => ( -
- {children} -
-)); +}, ref) => { + const childrenArray = React.Children.toArray(children); + + if (reverse) { + childrenArray.reverse(); + } + return ( +
+ {childrenArray} +
+ ); +}); Stack.propTypes = { /** Specifies the content of the `Stack`. */ @@ -39,6 +47,8 @@ Stack.propTypes = { * `0, 0.5, ... 6`. */ gap: PropTypes.number, + /** Specifies the order of the children. */ + reverse: PropTypes.bool, /** Specifies an additional `className` to add to the base element. */ className: PropTypes.string, }; @@ -47,6 +57,7 @@ Stack.defaultProps = { direction: 'vertical', gap: 0, className: undefined, + reverse: false, }; export default Stack; From 7e382dc0e3fa3922054e8ef37fcb159a9fd9c47c Mon Sep 17 00:00:00 2001 From: Kyrylo Hudym-Levkovych Date: Thu, 5 Oct 2023 12:56:12 +0300 Subject: [PATCH 2/3] fix: fix after code review --- src/Stack/README.md | 19 +++++++++++++++++++ src/Stack/Stack.test.jsx | 8 ++++++++ src/Stack/index.jsx | 40 +++++++++++++++++----------------------- src/Stack/index.scss | 9 +++++++++ 4 files changed, 53 insertions(+), 23 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
third block
``` + +## Reversed props + +- **Vertical** with `reversed` prop +```jsx live + + + + + +``` +- **Horizontal** with `reversed` prop +```jsx live + +
first block
+
second block
+
third block
+ +``` \ No newline at end of file diff --git a/src/Stack/Stack.test.jsx b/src/Stack/Stack.test.jsx index b771eb1214..ffed82c88e 100644 --- a/src/Stack/Stack.test.jsx +++ b/src/Stack/Stack.test.jsx @@ -27,6 +27,14 @@ describe('', () => { const wrapper = mount(Content); expect(wrapper.find('.pgn__vstack').hasClass(`pgn__stack-gap--${gap}`)).toEqual(true); }); + it('renders reversed children with the vertical direction', () => { + const wrapper = mount(Content); + expect(wrapper.find('.pgn__vstack').hasClass('pgn__stack-reversed')).toEqual(true); + }); + it('renders reversed children with the horizontal direction', () => { + const wrapper = mount(Content); + expect(wrapper.find('.pgn__hstack').hasClass('pgn__stack-reversed')).toEqual(true); + }); it('renders with the className prop', () => { const className = 'className'; const wrapper = mount(Content); diff --git a/src/Stack/index.jsx b/src/Stack/index.jsx index 5e3ebb2ecb..d7a531ba39 100644 --- a/src/Stack/index.jsx +++ b/src/Stack/index.jsx @@ -10,30 +10,24 @@ const DIRECTION_VARIANTS = [ const Stack = forwardRef(({ direction, gap, - reverse, + reversed, children, className, ...rest -}, ref) => { - const childrenArray = React.Children.toArray(children); - - if (reverse) { - childrenArray.reverse(); - } - return ( -
- {childrenArray} -
- ); -}); +}, ref) => ( +
+ {children} +
+)); Stack.propTypes = { /** Specifies the content of the `Stack`. */ @@ -48,7 +42,7 @@ Stack.propTypes = { */ gap: PropTypes.number, /** Specifies the order of the children. */ - reverse: PropTypes.bool, + reversed: PropTypes.bool, /** Specifies an additional `className` to add to the base element. */ className: PropTypes.string, }; @@ -57,7 +51,7 @@ Stack.defaultProps = { direction: 'vertical', gap: 0, className: undefined, - reverse: false, + 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; + } } From 687e70a9c0101c13ec059d9e975c433fb11f08fc Mon Sep 17 00:00:00 2001 From: Kyrylo Hudym-Levkovych Date: Tue, 10 Oct 2023 12:00:59 +0300 Subject: [PATCH 3/3] fix: add snapshot with reversed prop --- src/Stack/Stack.test.jsx | 21 +++++++++++--------- src/Stack/__snapshots__/Stack.test.jsx.snap | 22 ++++++++++++++++++++- 2 files changed, 33 insertions(+), 10 deletions(-) diff --git a/src/Stack/Stack.test.jsx b/src/Stack/Stack.test.jsx index ffed82c88e..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('', () => { describe('correct rendering', () => { it('renders without props', () => { const tree = renderer.create(( - content + {stackList.map((el) =>
{el}
)} )).toJSON(); expect(tree).toMatchSnapshot(); }); + it('renders with the reversed prop', () => { + const { container } = render( + + {stackList.reverse().map((el) =>
{el}
)} + , + ); + expect(container).toMatchSnapshot(); + }); it('renders with the vertical direction', () => { const wrapper = mount(Content); expect(wrapper.find('.pgn__vstack').length).toBeGreaterThan(0); @@ -27,14 +38,6 @@ describe('', () => { const wrapper = mount(Content); expect(wrapper.find('.pgn__vstack').hasClass(`pgn__stack-gap--${gap}`)).toEqual(true); }); - it('renders reversed children with the vertical direction', () => { - const wrapper = mount(Content); - expect(wrapper.find('.pgn__vstack').hasClass('pgn__stack-reversed')).toEqual(true); - }); - it('renders reversed children with the horizontal direction', () => { - const wrapper = mount(Content); - expect(wrapper.find('.pgn__hstack').hasClass('pgn__stack-reversed')).toEqual(true); - }); it('renders with the className prop', () => { const className = 'className'; const wrapper = mount(Content); 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[` correct rendering renders with the reversed prop 1`] = ` +
+
+
+ Second +
+
+ First +
+
+
+`; + exports[` correct rendering renders without props 1`] = `
- content +
+ First +
+
+ Second +
`;