[Feature] Page Designer Layout Components WIP #993
Conversation
| ]} | ||
| /> | ||
| ) | ||
| expect(document.querySelector('.mobile-1r-1c')).toBeDefined() |
There was a problem hiding this comment.
It looks like the test should be failing and instead the test should be looking for the class .mobile-2r-1c defined inside the <MobileGrid2r1c />. component.
The same assertion needs to be updated for the rest of the layouts components test files.
There was a problem hiding this comment.
Thanks .. I've addressed these and those false positives as well
packages/template-retail-react-app/app/components/experience/layouts/mobileGrid2r1c/index.jsx
Outdated
Show resolved
Hide resolved
| @@ -21,7 +21,7 @@ export const Region = (props) => { | |||
| const {id, components} = region | |||
|
|
|||
| return ( | |||
| <div id={id} className={`region ${className}`} {...rest}> | |||
| <div id={id} className={`region ${className}`} style={{marginBottom: 15}} {...rest}> | |||
There was a problem hiding this comment.
small nit: I think we shouldn't need to add the extra style here since region will be living in the SDK package.
Also, on Mobile the vertical space between rows accumulates the margin-bottom defined here with the spacingY defined in the layout component:
We may want to conditionally add the rows spacingY or remove the margin-bottom to not show extra vertical space between rows on Mobile.
There was a problem hiding this comment.
That grid spacing is jsut something that I added because it was easy to do with ChakraUI. I don't want to be opinionated to much with styling and I was hoping to loop back on a clean up ticket to address any styling questions. So I've removed the space between forthe moment.
|
|
||
| import * as Layouts from '../../components/experience/layouts' | ||
|
|
||
| const withTitle = (Component) => { |
There was a problem hiding this comment.
Nice hint to get a visual of the layout during the review.
…ayouts/mobileGrid2r1c/index.jsx Co-authored-by: Adam Raya <[email protected]>
* develop: Support Node 16 (#965) [W-12450361] Introduce short-circuit method for bypassing auth in Commerce Provider by passing in a fetchedToken (#1010) remove jest-silent-reporter (#1009) Clean up Page Designer Code (#1004) [Shopper Experience] `ImageWithText` component (#991) Feature: Page Designer Carousel Component (#977) [Feature] Page Designer Layout Components WIP (#993) remove updatePw from not implemented list (#996) Back-port Shopper Experience Base Components into Retail Template (#992) # Conflicts: # packages/commerce-sdk-react/package-lock.json # packages/commerce-sdk-react/package.json # packages/pwa-kit-dev/package-lock.json # packages/pwa-kit-dev/src/configs/webpack/config.js # packages/template-retail-react-app/package-lock.json
Overview
This PR implements the below layout components for page designer.
Internally all these components use Charkra's SimpleGrid component with varying column props. Additionally we take advantage of Chakra's responsive props to ensure that the column layout is appropriate for the screen size. E.g. Mobile2r1c displays its children in a 2 row x 1 column grid on mobile and a 1 row x 2 column grid on desktop.
Testing
Because we are using the SimpleGrid to do the heavy lifting with respect to the gird layout and it's responsiveness there isn't really much to test. I however have included a basic test for each component to ensure that it renders.
To test this work, checkout this branch and view the sample page:
Followed by visiting
http://localhost:3000/page-viewer, here you can see a sample page using all the layout components created in this PR. Play with your browser width to see the layout change in response to the change.TODO's