feat: #9761 page heading and layout tweaks (#9960)

* feat: #9761 page heading and layout tweaks * feat: #9761 page heading and layout tweaks
reapit · Oct 16, 2023 · a989b7a · a989b7a
1 parent 610beac
commit a989b7a
Show file tree

Hide file tree

Showing 16 changed files with 811 additions and 352 deletions.
diff --git a/packages/elements/package.json b/packages/elements/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@reapit/elements",
-  "version": "3.12.0",
+  "version": "4.0.0-beta.4",
   "description": "A collection of React components and utilities for building apps for Reapit Marketplace",
   "homepage": "https://github.com/reapit/foundations#readme",
   "bugs": {

diff --git a/packages/elements/src/components/grid/grid.stories.mdx b/packages/elements/src/components/grid/grid.stories.mdx
@@ -122,7 +122,7 @@ Below 1024px the grid will have a single item per column, above, the screen will
 
 ## Basic Usage - Split Screen Grid Thirds
 
-For a sidebar and main colum view, you can use a `GridThirds` grid, with `ColSplitThird` and `ColSplitTwoThirds` grid items - this is best combined with a `PageContainerMaxWidth` - see layouts for more on this.
+For a sidebar and main colum view, you can use a `GridThirds` grid, with `ColSplitThird` and `ColSplitTwoThirds` grid items - this is best combined with a `hasMaxWidth` Container - see layouts for more on this.
 
 In mobile and tablet, these columns stack then break at destop view and above.
 

diff --git a/packages/elements/src/components/layout/__styles__/index.ts b/packages/elements/src/components/layout/__styles__/index.ts
@@ -4,11 +4,12 @@ import { elHFull } from '../../../styles/sizing'
 import { css } from '@linaria/core'
 
 export const elHasGreyBackground = css``
+export const elHasMaxWidth = css``
 
 export const ElMainContainer = styled.main`
   display: flex;
   flex-direction: column;
-  width: 100vw;
+  width: 100%;
   height: 100vh;
   overflow-y: visible;
   overflow-x: hidden;
@@ -17,6 +18,11 @@ export const ElMainContainer = styled.main`
   &.${elHasGreyBackground} {
     background: var(--color-grey-50);
   }
+
+  &.${elHasMaxWidth} {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
 `
 
 export const ElPageContainer = styled.section`
@@ -29,7 +35,7 @@ export const ElPageContainer = styled.section`
   background-color: var(--color-white);
 
   ${isTablet} {
-    padding: 2rem 1.5rem;
+    padding: 2.5rem 1.5rem;
   }
 
   &.${elHFull} {
@@ -39,11 +45,11 @@ export const ElPageContainer = styled.section`
   &.${elHasGreyBackground} {
     background: var(--color-grey-50);
   }
-`
 
-export const ElPageContainerMaxWidth = styled(ElPageContainer)`
-  max-width: 1200px;
-  margin: 0 auto;
+  &.${elHasMaxWidth} {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
 `
 
 export const ElSecondaryNavContainer = styled.aside`
@@ -81,4 +87,9 @@ export const ElFlexContainer = styled.div`
   &.${elHasGreyBackground} {
     background: var(--color-grey-50);
   }
+
+  &.${elHasMaxWidth} {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
 `
diff --git a/packages/elements/src/components/layout/__tests__/__snapshots__/layout.test.tsx.snap b/packages/elements/src/components/layout/__tests__/__snapshots__/layout.test.tsx.snap
@@ -465,83 +465,6 @@ exports[`PageContainer should match a snapshot and render children 1`] = `
 }
 `;
 
-exports[`PageContainerMaxWidth should match a snapshot and render children 1`] = `
-{
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
-      <mock-styled.mock-styled.section
-        classname="mock-css."
-      >
-        <p>
-          I am child
-        </p>
-      </mock-styled.mock-styled.section>
-    </div>
-  </body>,
-  "container": <div>
-    <mock-styled.mock-styled.section
-      classname="mock-css."
-    >
-      <p>
-        I am child
-      </p>
-    </mock-styled.mock-styled.section>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
-`;
-
 exports[`SecondaryNavContainer should match a snapshot and render children 1`] = `
 {
   "asFragment": [Function],

diff --git a/packages/elements/src/components/layout/__tests__/layout.test.tsx b/packages/elements/src/components/layout/__tests__/layout.test.tsx
@@ -1,13 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import {
-  MainContainer,
-  PageContainer,
-  SecondaryNavContainer,
-  Molecule,
-  FlexContainer,
-  PageContainerMaxWidth,
-} from '../index'
+import { MainContainer, PageContainer, SecondaryNavContainer, Molecule, FlexContainer } from '../index'
 
 describe('MainContainer', () => {
   it('should match a snapshot and render children', () => {
@@ -31,17 +24,6 @@ describe('PageContainer', () => {
   })
 })
 
-describe('PageContainerMaxWidth', () => {
-  it('should match a snapshot and render children', () => {
-    const wrapper = render(
-      <PageContainerMaxWidth hasGreyBackground>
-        <p>I am child</p>
-      </PageContainerMaxWidth>,
-    )
-    expect(wrapper).toMatchSnapshot()
-  })
-})
-
 describe('SecondaryNavContainer', () => {
   it('should match a snapshot and render children', () => {
     const wrapper = render(