[Feature] Page Designer Layout Components WIP (#993)

* Backport experience base components into template * Fix linting * Fix test imports * Make types more robust * Initial Commit * Clean up & Make Responsive * Docs * Lint * Add debug ui * Fix component descriptions * Add tests * Update CHANGELOG.md * Fix components display name * Update packages/template-retail-react-app/app/components/experience/layouts/mobileGrid2r1c/index.jsx Co-authored-by: Adam Raya <[email protected]> * Fix breakpoints as per PR feedack * Fix tests * Remove grid spacing. --------- Co-authored-by: Adam Raya <[email protected]>
SalesforceCommerceCloud · Feb 23, 2023 · 043c7a9 · 043c7a9
1 parent cc6cd1f
commit 043c7a9
Show file tree

Hide file tree

Showing 20 changed files with 806 additions and 2 deletions.
diff --git a/packages/template-retail-react-app/CHANGELOG.md b/packages/template-retail-react-app/CHANGELOG.md
@@ -1,3 +1,5 @@
+## v2.7.0-dev (Jan 25, 2023)
+- Add Page Designer layout components [#993](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/993)
 ## v2.6.0 (Jan 25, 2023)
 - Mega menu fixes [#875](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/875) and [#910](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/910)
 - Cache SLAS callback using request processor [#884](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/884)

diff --git a/packages/template-retail-react-app/app/components/experience/layouts/index.js b/packages/template-retail-react-app/app/components/experience/layouts/index.js
@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) 2023, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+
+export * from './mobileGrid1r1c'
+export * from './mobileGrid2r1c'
+export * from './mobileGrid2r2c'
+export * from './mobileGrid2r3c'
+export * from './mobileGrid3r1c'
+export * from './mobileGrid3r2c'
diff --git a/...ages/template-retail-react-app/app/components/experience/layouts/mobileGrid1r1c/index.jsx b/...ages/template-retail-react-app/app/components/experience/layouts/mobileGrid1r1c/index.jsx
@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2023, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+import React from 'react'
+import PropTypes from 'prop-types'
+import {SimpleGrid} from '@chakra-ui/react'
+import {Region} from '../../region'
+import {regionType} from '../../types'
+
+/**
+ * This layout component displays its children in a 1 x 1 grid on both mobile and desktop.
+ *
+ * @param {componentProps} props
+ * @param {regionType []} props.regions - The page designer regions for this component.
+ * @param {object} props.data - The data for the component.
+ * @param {string} props.typeId - A mapping of typeId's to react components representing the type.
+ * @returns {React.ReactElement} - Grid component.
+ */
+export const MobileGrid1r1c = ({regions}) => (
+    <SimpleGrid className="mobile-1r-1c" columns={1}>
+        {regions.map((region) => (
+            <Region key={region.id} region={region} />
+        ))}
+    </SimpleGrid>
+)
+
+MobileGrid1r1c.displayName = 'MobileGrid1r1c'
+
+MobileGrid1r1c.propTypes = {
+    // Internally Provided
+    regions: PropTypes.arrayOf(regionType).isRequired
+}
+
+export default MobileGrid1r1c
diff --git a/.../template-retail-react-app/app/components/experience/layouts/mobileGrid1r1c/index.test.js b/.../template-retail-react-app/app/components/experience/layouts/mobileGrid1r1c/index.test.js
@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2023, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+import React from 'react'
+import {renderWithProviders, withPageProvider} from '../../../../utils/test-utils'
+import MobileGrid1r1c from './index'
+
+test('MobileGrid1r1c renders without errors', () => {
+    const MobileGrid1r1cWithPageProvider = withPageProvider(MobileGrid1r1c)
+    renderWithProviders(
+        <MobileGrid1r1cWithPageProvider
+            regions={[
+                {
+                    components: [
+                        {
+                            data: {
+                                richText: '<p>Column 1</p>'
+                            },
+                            id: '6790e4a41380d31bf54b648e9c',
+                            typeId: 'commerce_assets.editorialRichText'
+                        }
+                    ],
+                    id: 'column1'
+                }
+            ]}
+        />
+    )
+    expect(document.querySelector('.mobile-1r-1c')).not.toBeNull()
+})
diff --git a/...ages/template-retail-react-app/app/components/experience/layouts/mobileGrid2r1c/index.jsx b/...ages/template-retail-react-app/app/components/experience/layouts/mobileGrid2r1c/index.jsx
@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2023, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+import React from 'react'
+import PropTypes from 'prop-types'
+import {SimpleGrid} from '@chakra-ui/react'
+import {Region} from '../../region'
+import {regionType} from '../../types'
+
+/**
+ * This layout component displays its children in a 2 row x 1 column grid on mobile
+ * and a 1 row x 2 column grid on desktop.
+ *
+ * @param {componentProps} props
+ * @param {regionType []} props.regions - The page designer regions for this component.
+ * @param {object} props.data - The data for the component.
+ * @param {string} props.typeId - A mapping of typeId's to react components representing the type.
+ * @returns {React.ReactElement} - Grid component.
+ */
+export const MobileGrid2r1c = ({regions}) => (
+    <SimpleGrid className="mobile-2r-1c" columns={{base: 1, sm: 2}}>
+        {regions.map((region) => (
+            <Region key={region.id} region={region} />
+        ))}
+    </SimpleGrid>
+)
+
+MobileGrid2r1c.displayName = 'MobileGrid2r1c'
+
+MobileGrid2r1c.propTypes = {
+    // Internally Provided
+    regions: PropTypes.arrayOf(regionType).isRequired
+}
+
+export default MobileGrid2r1c
diff --git a/.../template-retail-react-app/app/components/experience/layouts/mobileGrid2r1c/index.test.js b/.../template-retail-react-app/app/components/experience/layouts/mobileGrid2r1c/index.test.js
@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) 2023, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+import React from 'react'
+import {renderWithProviders, withPageProvider} from '../../../../utils/test-utils'
+import MobileGrid2r1c from './index'
+
+test('MobileGrid2r1c renders without errors', () => {
+    const MobileGrid2r1cWithPageProvider = withPageProvider(MobileGrid2r1c)
+    renderWithProviders(
+        <MobileGrid2r1cWithPageProvider
+            regions={[
+                {
+                    components: [
+                        {
+                            data: {
+                                richText: '<p>Column 1</p>'
+                            },
+                            id: '2f72a6a939df1527ec378f8509',
+                            typeId: 'commerce_assets.editorialRichText'
+                        }
+                    ],
+                    id: 'column1'
+                },
+                {
+                    components: [
+                        {
+                            data: {
+                                richText: '<p>Column 2</p>'
+                            },
+                            id: 'c6171da06d6754700b8807777e',
+                            typeId: 'commerce_assets.editorialRichText'
+                        }
+                    ],
+                    id: 'column2'
+                }
+            ]}
+        />
+    )
+    expect(document.querySelector('.mobile-2r-1c')).not.toBeNull()
+})
diff --git a/...ages/template-retail-react-app/app/components/experience/layouts/mobileGrid2r2c/index.jsx b/...ages/template-retail-react-app/app/components/experience/layouts/mobileGrid2r2c/index.jsx
@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2023, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+import React from 'react'
+import PropTypes from 'prop-types'
+import {SimpleGrid} from '@chakra-ui/react'
+import {Region} from '../../region'
+import {regionType} from '../../types'
+
+/**
+ * This layout component displays its children in a 2 row x 2 column grid on mobile
+ * and 1 row x 4 column grid on desktop.
+ *
+ * @param {componentProps} props
+ * @param {regionType []} props.regions - The page designer regions for this component.
+ * @param {object} props.data - The data for the component.
+ * @param {string} props.typeId - A mapping of typeId's to react components representing the type.
+ * @returns {React.ReactElement} - Grid component.
+ */
+export const MobileGrid2r2c = ({regions}) => (
+    <SimpleGrid className="mobile-2r-2c" columns={{base: 2, sm: 4}}>
+        {regions.map((region) => (
+            <Region key={region.id} region={region} />
+        ))}
+    </SimpleGrid>
+)
+
+MobileGrid2r2c.displayName = 'MobileGrid2r2c'
+
+MobileGrid2r2c.propTypes = {
+    // Internally Provided
+    regions: PropTypes.arrayOf(regionType).isRequired
+}
+
+export default MobileGrid2r2c
diff --git a/.../template-retail-react-app/app/components/experience/layouts/mobileGrid2r2c/index.test.js b/.../template-retail-react-app/app/components/experience/layouts/mobileGrid2r2c/index.test.js
@@ -0,0 +1,68 @@
+/*
+ * Copyright (c) 2023, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+import React from 'react'
+import {renderWithProviders, withPageProvider} from '../../../../utils/test-utils'
+import MobileGrid2r2c from './index'
+
+test('MobileGrid2r2c renders without errors', () => {
+    const MobileGrid2r2cWithPageProvider = withPageProvider(MobileGrid2r2c)
+    renderWithProviders(
+        <MobileGrid2r2cWithPageProvider
+            regions={[
+                {
+                    components: [
+                        {
+                            data: {
+                                richText: '<p>Column 1</p>'
+                            },
+                            id: '946afd022303cd30a8cdcb2957',
+                            typeId: 'commerce_assets.editorialRichText'
+                        }
+                    ],
+                    id: 'column1'
+                },
+                {
+                    components: [
+                        {
+                            data: {
+                                richText: '<p>Column 2</p>'
+                            },
+                            id: 'd94919f81bd9a5530400879fd9',
+                            typeId: 'commerce_assets.editorialRichText'
+                        }
+                    ],
+                    id: 'column2'
+                },
+                {
+                    components: [
+                        {
+                            data: {
+                                richText: '<p>Column 3</p>'
+                            },
+                            id: '883198f60f5d0f38ce1f895305',
+                            typeId: 'commerce_assets.editorialRichText'
+                        }
+                    ],
+                    id: 'column3'
+                },
+                {
+                    components: [
+                        {
+                            data: {
+                                richText: '<p>Column 4</p>'
+                            },
+                            id: '364bedd2f3fe569f7c83df780b',
+                            typeId: 'commerce_assets.editorialRichText'
+                        }
+                    ],
+                    id: 'column4'
+                }
+            ]}
+        />
+    )
+    expect(document.querySelector('.mobile-2r-2c')).not.toBeNull()
+})
diff --git a/...ages/template-retail-react-app/app/components/experience/layouts/mobileGrid2r3c/index.jsx b/...ages/template-retail-react-app/app/components/experience/layouts/mobileGrid2r3c/index.jsx
@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2023, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+import React from 'react'
+import PropTypes from 'prop-types'
+import {SimpleGrid} from '@chakra-ui/react'
+import {Region} from '../../region'
+import {regionType} from '../../types'
+
+/**
+ * This layout component displays its children in a 2 row x 3 column grid on mobile
+ * and 1 row x 6 column grid on desktop.
+ *
+ * @param {componentProps} props
+ * @param {regionType []} props.regions - The page designer regions for this component.
+ * @param {object} props.data - The data for the component.
+ * @param {string} props.typeId - A mapping of typeId's to react components representing the type.
+ * @returns {React.ReactElement} - Grid component.
+ */
+export const MobileGrid2r3c = ({regions}) => (
+    <SimpleGrid className="mobile-2r-3c" columns={{base: 3, sm: 6}}>
+        {regions.map((region) => (
+            <Region key={region.id} region={region} />
+        ))}
+    </SimpleGrid>
+)
+
+MobileGrid2r3c.displayName = 'MobileGrid2r3c'
+
+MobileGrid2r3c.propTypes = {
+    // Internally Provided
+    regions: PropTypes.arrayOf(regionType).isRequired
+}
+
+export default MobileGrid2r3c