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..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); 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 +
`; 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; + } }