Merge pull request #389 from WestpacGEL/develop

Develop to main
WestpacGEL · Nov 28, 2023 · 38f4b99 · 38f4b99 · vercel · Nov 28, 2023
2 parents 5b1fe1f + fff4a70
commit 38f4b99
Show file tree

Hide file tree

Showing 50 changed files with 310 additions and 783 deletions.
diff --git a/...ponents/content-tabs/components/accessibility-content/accessibility-content.component.tsx b/...ponents/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';
@@ -32,55 +33,53 @@ export function AccessibilityContent({ accessibilitySections, accessibilityDemo
 
   return (
     <>
-      <Section className="border-t-0">
-        <Container className="pt-5">
-          <Heading level={2} className="mb-4 sm:mb-7">
-            Colour impairment demonstration
-          </Heading>
-          <Grid>
-            <Item span={{ initial: 12, xsl: 11, sm: 8, md: 7, lg: 9 }}>
-              <Text>
-                All components are designed and tested to ensure colour contrast ratios comply with the WCAG 2.1 AA
-                specification. Select a filter from the list below to see how this component would appear to someone
-                with a: <Link href="#">colour vision impairment</Link>.
-              </Text>
-            </Item>
-          </Grid>
-          {accessibilityDemo && (
-            <>
-              <div className="mb-4 flex items-center bg-light p-4">
-                <label htmlFor={id} className="mr-[1rem]">
-                  Select filter
-                </label>
-                <Select
-                  id={id}
-                  value={filter}
-                  onChange={event => setFilter(event.target.value as VisionFilterProps['value'])}
-                >
-                  {FILTERS.map(filter => (
-                    <option key={filter.text} value={filter.value}>
-                      {filter.text}
-                    </option>
-                  ))}
-                </Select>
-              </div>
-              <VisionFilter value={filter}>
-                <DocumentRenderer
-                  document={accessibilityDemo}
-                  renderers={{
-                    ...DOCUMENT_RENDERERS,
-                    block: {
-                      ...DOCUMENT_RENDERERS.block,
-                      code: props => <Code className="my-4" enableLiveCode={false} {...props} />,
-                    },
-                  }}
-                  componentBlocks={{}}
-                />
-              </VisionFilter>
-            </>
-          )}
-        </Container>
-      </Section>
+      {accessibilityDemo && (
+        <Section className="border-t-0">
+          <Container className="pt-5">
+            <Heading level={2} className="mb-4 sm:mb-7">
+              Colour impairment demonstration
+            </Heading>
+            <Grid>
+              <Item span={{ initial: 12, xsl: 11, sm: 8, md: 7, lg: 9 }}>
+                <Text>
+                  All components are designed and tested to ensure colour contrast ratios comply with the WCAG 2.1 AA
+                  specification. Select a filter from the list below to see how this component would appear to someone
+                  with a: <Link href="#">colour vision impairment</Link>.
+                </Text>
+              </Item>
+            </Grid>
+            <div className="mb-4 flex items-center bg-light p-4">
+              <label htmlFor={id} className="mr-[1rem]">
+                Select filter
+              </label>
+              <Select
+                id={id}
+                value={filter}
+                onChange={event => setFilter(event.target.value as VisionFilterProps['value'])}
+              >
+                {FILTERS.map(filter => (
+                  <option key={filter.text} value={filter.value}>
+                    {filter.text}
+                  </option>
+                ))}
+              </Select>
+            </div>
+            <VisionFilter value={filter}>
+              <DocumentRenderer
+                document={accessibilityDemo}
+                renderers={{
+                  ...DOCUMENT_RENDERERS,
+                  block: {
+                    ...DOCUMENT_RENDERERS.block,
+                    code: props => <Code className="my-4" enableLiveCode={false} {...props} />,
+                  },
+                }}
+                componentBlocks={{}}
+              />
+            </VisionFilter>
+          </Container>
+        </Section>
+      )}
       {accessibilitySections?.map(({ title, content }) => {
         const id = title.toLowerCase().split(' ').join('-');
         return (

diff --git a/...[...component]/components/content-tabs/components/code-content/code-content.component.tsx b/...[...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/...component]/components/content-tabs/components/design-content/design-content.component.tsx b/...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/...design-system/[...component]/components/content-tabs/components/intro/intro.component.tsx b/...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/[...component]/components/content-tabs/content-tabs.types.ts b/apps/site/src/app/design-system/[...component]/components/content-tabs/content-tabs.types.ts
@@ -7,7 +7,7 @@ import { AccessibilitySectionProps } from './components/accessibility-content/ac
 import { DesignSectionProps } from './components/design-content/design-content.types';
 
 export type ContentTabsProps = {
-  accessibilityDemo: DocumentElement[];
+  accessibilityDemo?: DocumentElement[];
   accessibilitySections: AccessibilitySectionProps[];
   code?: DocumentElement[];
   componentProps?: ComponentProps;

diff --git a/apps/site/src/app/design-system/[...component]/page.tsx b/apps/site/src/app/design-system/[...component]/page.tsx
@@ -102,6 +102,7 @@ export default async function ComponentPage({ params }: { params: { component: s
   ]);
 
   const codeIsEmpty = code[0].children.length <= 1 && !code[0].children[0].text;
+  const accessibilityIsEmpty = accessibilityDemo[0].children.length <= 1 && !accessibilityDemo[0].children[0].text;
 
   const componentProps: ComponentProps | undefined = (json as any)[componentName];
   const subComponentProps = Object.entries(json).reduce((acc, [key, value]: [string, any]) => {
@@ -116,7 +117,7 @@ export default async function ComponentPage({ params }: { params: { component: s
       content={{
         westpacUIInfo: westpacInfo,
         accessibilitySections,
-        accessibilityDemo,
+        accessibilityDemo: accessibilityIsEmpty ? undefined : accessibilityDemo,
         code: codeIsEmpty ? undefined : code,
         description: content.description,
         designSections,

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
@@ -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
@@ -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
@@ -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
@@ -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/src/components/related-info/related-info.component.tsx b/apps/site/src/components/related-info/related-info.component.tsx
@@ -23,7 +23,7 @@ export function RelatedInfo({ relatedComponents = [] }: RelatedInfoProps) {
             <ul>
               {relatedComponents.map(relatedComponent => {
                 const componentURL = relatedComponent.split('/').reverse()[0];
-                const componentName = componentURL.split('-').join(' ');
+                const componentName = componentURL[0].toUpperCase() + componentURL.slice(1).split('-').join(' ');
                 return (
                   <li key={relatedComponent}>
                     <Link href={`/design-system/components/${componentURL}?brand=wbc`}>{componentName}</Link>

diff --git a/apps/site/src/content/design-system/components/accordion/design/Accordion/content.mdoc b/apps/site/src/content/design-system/components/accordion/design/Accordion/content.mdoc
diff --git a/apps/site/src/content/design-system/components/breadcrumb/design/Breadcrumbs/content.mdoc b/apps/site/src/content/design-system/components/breadcrumb/design/Breadcrumbs/content.mdoc
diff --git a/apps/site/src/content/design-system/components/collapsible/design/Examples/content.mdoc b/apps/site/src/content/design-system/components/collapsible/design/Examples/content.mdoc