From a65573ae0ea2a21ddc5742551e5eb80a2a2c8bf2 Mon Sep 17 00:00:00 2001
From: Jeremy Ortiz <jeremy.ortiz@westpac.com.au>
Date: Mon, 27 Nov 2023 21:10:26 +1100
Subject: [PATCH] fix(site): update max width for design-system containers

---
 .../accessibility-content.component.tsx                     | 3 ++-
 .../components/code-content/code-content.component.tsx      | 3 ++-
 .../components/design-content/design-content.component.tsx  | 2 +-
 .../content-tabs/components/intro/intro.component.tsx       | 4 +++-
 .../components/container/container.component.tsx            | 6 ++++++
 .../app/design-system/components/hero/hero.component.tsx    | 3 ++-
 apps/site/src/app/design-system/components/index.ts         | 2 ++
 .../design-system/components/section/section.component.tsx  | 4 ++--
 apps/site/tailwind.config.ts                                | 3 +++
 packages/ui/src/components/grid/index.ts                    | 1 +
 10 files changed, 24 insertions(+), 7 deletions(-)
 create mode 100644 apps/site/src/app/design-system/components/container/container.component.tsx

diff --git a/apps/site/src/app/design-system/[...component]/components/content-tabs/components/accessibility-content/accessibility-content.component.tsx b/apps/site/src/app/design-system/[...component]/components/content-tabs/components/accessibility-content/accessibility-content.component.tsx
index 20798f85c..e78aaf5ac 100644
--- a/apps/site/src/app/design-system/[...component]/components/content-tabs/components/accessibility-content/accessibility-content.component.tsx
+++ b/apps/site/src/app/design-system/[...component]/components/content-tabs/components/accessibility-content/accessibility-content.component.tsx
@@ -1,9 +1,10 @@
 'use client';
 
 import { DocumentRenderer } from '@keystatic/core/renderer';
-import { Container, Grid, Item, Select } from '@westpac/ui';
+import { Grid, Item, Select } from '@westpac/ui';
 import { useId, useState } from 'react';
 
+import { Container } from '@/app/design-system/components';
 import { Section } from '@/components/content-blocks/section';
 import { Link, Text } from '@/components/content-blocks/typography';
 import { Code, Heading } from '@/components/document-renderer';
diff --git a/apps/site/src/app/design-system/[...component]/components/content-tabs/components/code-content/code-content.component.tsx b/apps/site/src/app/design-system/[...component]/components/content-tabs/components/code-content/code-content.component.tsx
index f3741dbea..4f8319d24 100644
--- a/apps/site/src/app/design-system/[...component]/components/content-tabs/components/code-content/code-content.component.tsx
+++ b/apps/site/src/app/design-system/[...component]/components/content-tabs/components/code-content/code-content.component.tsx
@@ -2,10 +2,11 @@
 
 import { DocumentElement } from '@keystatic/core';
 import { DocumentRenderer } from '@keystatic/core/renderer';
-import { Button, Container, Grid, Item } from '@westpac/ui';
+import { Button, Grid, Item } from '@westpac/ui';
 import { NewWindowIcon } from '@westpac/ui/icon';
 import { useMemo } from 'react';
 
+import { Container } from '@/app/design-system/components';
 import { ComponentPropsTable } from '@/components/component-props-table';
 import { Code } from '@/components/content-blocks/typography';
 import { Heading } from '@/components/document-renderer';
diff --git a/apps/site/src/app/design-system/[...component]/components/content-tabs/components/design-content/design-content.component.tsx b/apps/site/src/app/design-system/[...component]/components/content-tabs/components/design-content/design-content.component.tsx
index a4904871b..95952c862 100644
--- a/apps/site/src/app/design-system/[...component]/components/content-tabs/components/design-content/design-content.component.tsx
+++ b/apps/site/src/app/design-system/[...component]/components/content-tabs/components/design-content/design-content.component.tsx
@@ -1,9 +1,9 @@
 'use client';
 
 import { DocumentRenderer } from '@keystatic/core/renderer';
-import { Container } from '@westpac/ui';
 import { useMemo } from 'react';
 
+import { Container } from '@/app/design-system/components';
 import { Colors } from '@/components/component-blocks/colors/colors.component';
 import { Icons } from '@/components/component-blocks/icons/icons.component';
 import { Logos } from '@/components/component-blocks/logos/logos.component';
diff --git a/apps/site/src/app/design-system/[...component]/components/content-tabs/components/intro/intro.component.tsx b/apps/site/src/app/design-system/[...component]/components/content-tabs/components/intro/intro.component.tsx
index e4eeddce4..2b118bf91 100644
--- a/apps/site/src/app/design-system/[...component]/components/content-tabs/components/intro/intro.component.tsx
+++ b/apps/site/src/app/design-system/[...component]/components/content-tabs/components/intro/intro.component.tsx
@@ -1,6 +1,8 @@
 'use client';
 
-import { Container, Grid, Item } from '@westpac/ui';
+import { Grid, Item } from '@westpac/ui';
+
+import { Container } from '@/app/design-system/components';
 
 import { TableOfContents } from './components';
 
diff --git a/apps/site/src/app/design-system/components/container/container.component.tsx b/apps/site/src/app/design-system/components/container/container.component.tsx
new file mode 100644
index 000000000..fac966c36
--- /dev/null
+++ b/apps/site/src/app/design-system/components/container/container.component.tsx
@@ -0,0 +1,6 @@
+import { type ContainerProps, Container as GELContainer } from '@westpac/ui/grid';
+import { clsx } from 'clsx';
+
+export function Container({ className, ...props }: ContainerProps) {
+  return <GELContainer className={clsx('max-w-gel-container', className)} {...props} />;
+}
diff --git a/apps/site/src/app/design-system/components/hero/hero.component.tsx b/apps/site/src/app/design-system/components/hero/hero.component.tsx
index 24d39d4fb..df304c05c 100644
--- a/apps/site/src/app/design-system/components/hero/hero.component.tsx
+++ b/apps/site/src/app/design-system/components/hero/hero.component.tsx
@@ -1,9 +1,10 @@
 'use client';
 
-import { Container, Grid, Item } from '@westpac/ui';
+import { Grid, Item } from '@westpac/ui';
 import { AccessibilityPictogram, StopwatchPictogram, TruckPictogram } from '@westpac/ui/pictogram';
 import { useSearchParams } from 'next/navigation';
 
+import { Container } from '@/app/design-system/components';
 import { type BrandKey } from '@/app/types/brand.types';
 
 import { BackgroundImage, Header } from './components';
diff --git a/apps/site/src/app/design-system/components/index.ts b/apps/site/src/app/design-system/components/index.ts
index 15f127105..8df8ffbf9 100644
--- a/apps/site/src/app/design-system/components/index.ts
+++ b/apps/site/src/app/design-system/components/index.ts
@@ -6,3 +6,5 @@ export { Hero } from './hero/hero.component';
 export { Section } from './section/section.component';
 export { SectionHeading } from './section/section-heading.component';
 export { SectionItem } from './section/section-item.component';
+
+export { Container } from './container/container.component';
diff --git a/apps/site/src/app/design-system/components/section/section.component.tsx b/apps/site/src/app/design-system/components/section/section.component.tsx
index 550ad0b02..3ac81c29e 100644
--- a/apps/site/src/app/design-system/components/section/section.component.tsx
+++ b/apps/site/src/app/design-system/components/section/section.component.tsx
@@ -1,11 +1,11 @@
 'use client';
 
-import { Container } from '@westpac/ui';
+import { Container } from '@/app/design-system/components';
 
 export function Section({ background, children }: { background?: boolean; children: React.ReactNode }) {
   return background ? (
     <section className="bg-background">
-      <Container className="py-7 text-center sm:py-15">
+      <Container tag="section" className="py-7 text-center sm:py-15">
         <>{children}</>
       </Container>
     </section>
diff --git a/apps/site/tailwind.config.ts b/apps/site/tailwind.config.ts
index b20e5bdc0..34663735f 100644
--- a/apps/site/tailwind.config.ts
+++ b/apps/site/tailwind.config.ts
@@ -48,6 +48,9 @@ const config: Config = withGEL({
         'gel-muted': '#575F65',
         'gel-hover': '#F9FAFB',
       },
+      maxWidth: {
+        'gel-container': '71.5rem',
+      },
     },
   },
   safelist: [
diff --git a/packages/ui/src/components/grid/index.ts b/packages/ui/src/components/grid/index.ts
index 65679b03f..a0100565c 100644
--- a/packages/ui/src/components/grid/index.ts
+++ b/packages/ui/src/components/grid/index.ts
@@ -1,3 +1,4 @@
 export { Grid } from './grid.component.js';
 export { Container, Item } from './components/index.js';
 export { type GridProps } from './grid.types.js';
+export { type ContainerProps } from './components/container/container.types.js';