Merge pull request #388 from WestpacGEL/fix/site-ds-grid

fix(site): update max width for design-system containers

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';

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';

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';

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';
 

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} />;
+}

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';

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';

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>

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: [

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';