Merge pull request #706 from WestpacGEL/develop

Develop

apps/site/src/app/design-system/[brand]/[...component]/components/content-tabs/components/accessibility-content/accessibility-content.component.tsx

@@ -1,99 +1,26 @@
 'use client';
 
 import { DocumentRenderer } from '@keystatic/core/renderer';
-import { Grid, GridItem, Select } from '@westpac/ui';
-import { useId, useState } from 'react';
 
 import { Container } from '@/app/design-system/components';
 import { Colors } from '@/components/component-blocks/colors/colors.component';
+import { AccessibilityDemo } from '@/components/component-blocks/components/accessibility-demo';
 import { ShortCode } from '@/components/component-blocks/components/short-code';
 import { foundationBlocksComponents } from '@/components/component-blocks/foundation-blocks';
 import { Section } from '@/components/content-blocks/section';
-import { Link, Text } from '@/components/content-blocks/typography';
-import { Code, Heading } from '@/components/document-renderer';
-import { VisionFilter, VisionFilterProps } from '@/components/vision-filter';
+import { Heading } from '@/components/document-renderer';
 
 import { DOCUMENT_RENDERERS } from '../document-renderer';
 
 import { AccessibilityContentProps } from '.';
 
-const FILTERS = [
-  { text: 'No filter', value: '' },
-  { text: 'Achromatomaly', value: 'achromatomaly' },
-  { text: 'Achromatopsia', value: 'achromatopsia' },
-  { text: 'Deuteranomaly', value: 'deuteranomaly' },
-  { text: 'Deuteranopia', value: 'deuteranopia' },
-  { text: 'Protanomaly', value: 'protanomaly' },
-  { text: 'Protanopia', value: 'protanopia' },
-  { text: 'Tritanomaly', value: 'tritanomaly' },
-  { text: 'Tritanopia', value: 'tritanopia' },
-  { text: 'Low contrast', value: 'low-contrast' },
-] as const;
-
 export function AccessibilityContent({
   accessibilitySections,
   accessibilityDemo,
   shortCodes,
 }: AccessibilityContentProps) {
-  const [filter, setFilter] = useState<VisionFilterProps['value']>();
-  const id = useId();
-
   return (
     <>
-      {accessibilityDemo && (
-        <Section className="border-t-0">
-          <Container className="pt-7">
-            <Heading level={2} className="mb-4 sm:mb-7">
-              Colour impairment demonstration
-            </Heading>
-            <Grid>
-              <GridItem 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="/design-system/accessibility/colour-vision-impairment">colour vision impairment</Link>.
-                </Text>
-              </GridItem>
-            </Grid>
-            <div className="flex items-center bg-light p-4">
-              <label htmlFor={id} className="mr-[1rem] whitespace-nowrap">
-                Select filter
-              </label>
-              <Select
-                id={id}
-                value={filter}
-                width={10}
-                onChange={(event: any) => 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={{
-                  ...foundationBlocksComponents,
-                  shortCode: props => {
-                    return <ShortCode shortCodes={shortCodes} {...props} />;
-                  },
-                }}
-              />
-            </VisionFilter>
-          </Container>
-        </Section>
-      )}
       {accessibilitySections?.map(({ title, content }) => {
         const id = title.toLowerCase().split(' ').join('-');
         return (
@@ -106,8 +33,13 @@ export function AccessibilityContent({
                 componentBlocks={{
                   ...foundationBlocksComponents,
                   colors: props => <Colors palette={props.palette} />,
+                  accessibilityDemo: () => <AccessibilityDemo content={accessibilityDemo || []} />,
                   shortCode: props => {
-                    return <ShortCode shortCodes={shortCodes} {...props} />;
+                    return (
+                      <div className="mb-4">
+                        <ShortCode shortCodes={shortCodes} {...props} />
+                      </div>
+                    );
                   },
                 }}
               />

apps/site/src/app/design-system/[brand]/[...component]/page.tsx

@@ -72,6 +72,7 @@ export default async function ComponentPage({
                 return shortCode.entry.content().then(content => {
                   return resolve({
                     ...shortCode.entry,
+                    slug: shortCode.slug,
                     content,
                   });
                 });

apps/site/src/components/component-blocks/components/accessibility-demo/accessibility-demo.component.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import { DocumentRenderer } from '@keystatic/core/renderer';
+import { Select } from '@westpac/ui';
+import { useId, useState } from 'react';
+
+import { DOCUMENT_RENDERERS } from '@/app/articles/[article]/components/document-renderer';
+import { Code } from '@/components/code';
+import { VisionFilter, VisionFilterProps } from '@/components/vision-filter';
+
+import { type AccessibilityDemoProps } from './accessibility-demo.types';
+
+const FILTERS = [
+  { text: 'No filter', value: '' },
+  { text: 'Achromatomaly', value: 'achromatomaly' },
+  { text: 'Achromatopsia', value: 'achromatopsia' },
+  { text: 'Deuteranomaly', value: 'deuteranomaly' },
+  { text: 'Deuteranopia', value: 'deuteranopia' },
+  { text: 'Protanomaly', value: 'protanomaly' },
+  { text: 'Protanopia', value: 'protanopia' },
+  { text: 'Tritanomaly', value: 'tritanomaly' },
+  { text: 'Tritanopia', value: 'tritanopia' },
+  { text: 'Low contrast', value: 'low-contrast' },
+] as const;
+
+export const AccessibilityDemo = ({ content }: AccessibilityDemoProps) => {
+  const [filter, setFilter] = useState<VisionFilterProps['value']>();
+  const id = useId();
+
+  return (
+    <>
+      <div className="flex items-center bg-light p-4">
+        <label htmlFor={id} className="mr-[1rem] whitespace-nowrap">
+          Select filter
+        </label>
+        <Select
+          id={id}
+          value={filter}
+          width={10}
+          onChange={(event: any) => 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={content}
+          renderers={{
+            ...DOCUMENT_RENDERERS,
+            block: {
+              ...DOCUMENT_RENDERERS.block,
+              code: props => <Code {...props} live showCode={false} className="my-4" enableLiveCode={false} />,
+            },
+          }}
+        />
+      </VisionFilter>
+    </>
+  );
+};

apps/site/src/components/component-blocks/components/accessibility-demo/accessibility-demo.preview.tsx

@@ -0,0 +1,24 @@
+import { component, fields } from '@keystatic/core';
+
+import { AccessibilityDemo } from '.';
+
+// Apparently the document field is not possible be implemented on a component.
+export const accessibilityDemo = component({
+  label: 'Accessibility Demo',
+  preview: ({ fields }) => {
+    return <h1>Accessibility Demo</h1>;
+    // return <AccessibilityDemo content={content.value} />;
+  },
+  schema: {
+    // content: fields.document({
+    //   label: 'Content',
+    //   componentBlocks: {},
+    //   formatting: {
+    //     blockTypes: {
+    //       blockquote: true,
+    //       code: true,
+    //     },
+    //   },
+    // }),
+  },
+});

apps/site/src/components/component-blocks/components/accessibility-demo/accessibility-demo.types.ts

@@ -0,0 +1,5 @@
+import { DocumentElement } from '@keystatic/core';
+
+export type AccessibilityDemoProps = {
+  content: DocumentElement[];
+};

apps/site/src/components/component-blocks/components/accessibility-demo/index.ts

@@ -0,0 +1,2 @@
+export * from './accessibility-demo.component';
+export * from './accessibility-demo.types';

apps/site/src/components/component-blocks/components/short-code/short-code.component.tsx

@@ -8,7 +8,7 @@ import { foundationBlocksComponents } from '../../foundation-blocks';
 import { type ShortCodeProps } from './short-code.types';
 
 export const ShortCode = ({ name, shortCodes }: ShortCodeProps) => {
-  const shortCode = useMemo(() => shortCodes.find(shortCode => shortCode.name === name), [name, shortCodes]);
+  const shortCode = useMemo(() => shortCodes.find(shortCode => shortCode.slug === name), [name, shortCodes]);
 
   return shortCode?.content ? (
     <DocumentRenderer

apps/site/src/components/component-blocks/foundation-blocks.tsx

@@ -2,6 +2,8 @@ import { Image } from '@/components/document-renderer';
 
 import { Colors } from './colors/colors.component';
 import { colors } from './colors/colors.preview';
+import { AccessibilityDemo } from './components/accessibility-demo';
+import { accessibilityDemo } from './components/accessibility-demo/accessibility-demo.preview';
 import { designSystemBodyImage } from './components/design-system-body-image';
 import { LinkList } from './components/link-list';
 import { linkList } from './components/link-list/link-list.preview';
@@ -27,6 +29,7 @@ export const foundationBlocks = {
   designSystemBodyImage,
   linkList,
   shortCode,
+  accessibilityDemo,
 };
 
 export const foundationBlocksComponents = {

apps/site/src/content/design-system/components/accordion/accessibility/colour-impairment-demonstration/content.mdoc

@@ -0,0 +1,3 @@
+{% shortCode name="accessibility-colour-impairment" /%}
+
+{% accessibilityDemo /%}

apps/site/src/content/design-system/components/alert/accessibility/colour-impairment-demonstration/content.mdoc

@@ -0,0 +1,3 @@
+{% shortCode name="accessibility-colour-impairment" /%}
+
+{% accessibilityDemo /%}

apps/site/src/content/design-system/components/alert/index.yaml

@@ -4,6 +4,7 @@ description: >-
   flexible, consistent message system for common user interactions.
 namedExport:
   discriminant: false
+excludeFromNavbar: false
 design:
   - title:
       name: Alert boxes
@@ -26,6 +27,9 @@ design:
       slug: dos-and-donts
     noTitle: false
 accessibility:
+  - title:
+      name: Colour impairment demonstration
+      slug: colour-impairment-demonstration
   - title:
       name: Accessibility features
       slug: accessibility-features

apps/site/src/content/design-system/components/badge/accessibility/colour-impairment-demonstration/content.mdoc

@@ -0,0 +1,3 @@
+{% shortCode name="accessibility-colour-impairment" /%}
+
+{% accessibilityDemo /%}

apps/site/src/content/design-system/components/badge/index.yaml

@@ -24,6 +24,9 @@ design:
       slug: dos-and-donts
     noTitle: false
 accessibility:
+  - title:
+      name: Colour impairment demonstration
+      slug: colour-impairment-demonstration
   - title:
       name: Accessibility features
       slug: accessibility-features

apps/site/src/content/design-system/components/button/accessibility/colour-impairment-demonstration/content.mdoc

@@ -0,0 +1,3 @@
+{% shortCode name="accessibility-colour-impairment" /%}
+
+{% accessibilityDemo /%}

apps/site/src/content/design-system/components/button/index.yaml

@@ -31,6 +31,9 @@ design:
       slug: dos-and-donts
     noTitle: false
 accessibility:
+  - title:
+      name: Colour impairment demonstration
+      slug: colour-impairment-demonstration
   - title:
       name: Accessibility features
       slug: accessibility-features

apps/site/src/content/design-system/components/compacta/accessibility/colour-impairment-demonstration/content.mdoc

@@ -0,0 +1,3 @@
+{% shortCode name="accessibility-colour-impairment" /%}
+
+{% accessibilityDemo /%}

apps/site/src/content/design-system/components/compacta/index.yaml

@@ -22,6 +22,9 @@ design:
       slug: dos-and-donts
     noTitle: false
 accessibility:
+  - title:
+      name: Colour impairment demonstration
+      slug: colour-impairment-demonstration
   - title:
       name: Accessibility notes
       slug: accessibility-notes

apps/site/src/content/design-system/components/date-picker/accessibility/colour-impairment-demonstration/content.mdoc

@@ -0,0 +1,3 @@
+{% shortCode name="accessibility-colour-impairment" /%}
+
+{% accessibilityDemo /%}

apps/site/src/content/design-system/components/date-picker/index.yaml

@@ -30,6 +30,9 @@ design:
       slug: dos-and-donts
     noTitle: false
 accessibility:
+  - title:
+      name: Colour impairment demonstration
+      slug: colour-impairment-demonstration
   - title:
       name: Accessibility features
       slug: accessibility-features

apps/site/src/content/design-system/components/input-group/accessibility/colour-impairment-demonstration/content.mdoc

@@ -0,0 +1,3 @@
+{% shortCode name="accessibility-colour-impairment" /%}
+
+{% accessibilityDemo /%}

apps/site/src/content/design-system/components/input-group/index.yaml

@@ -32,6 +32,9 @@ design:
       slug: dos-and-donts
     noTitle: false
 accessibility:
+  - title:
+      name: Colour impairment demonstration
+      slug: colour-impairment-demonstration
   - title:
       name: Accessibility features
       slug: accessibility-features

apps/site/src/content/design-system/components/link/accessibility/colour-impairment-demonstration/content.mdoc

@@ -0,0 +1,3 @@
+{% shortCode name="accessibility-colour-impairment" /%}
+
+{% accessibilityDemo /%}

apps/site/src/content/design-system/components/link/index.yaml

@@ -24,6 +24,9 @@ design:
       slug: visual-design
     noTitle: false
 accessibility:
+  - title:
+      name: Colour impairment demonstration
+      slug: colour-impairment-demonstration
   - title:
       name: Accessibility features
       slug: accessibility-features

apps/site/src/content/design-system/components/progress-indicator/accessibility/colour-impairment-demonstration/content.mdoc

@@ -0,0 +1,3 @@
+{% shortCode name="accessibility-colour-impairment" /%}
+
+{% accessibilityDemo /%}

apps/site/src/content/design-system/components/progress-indicator/index.yaml

@@ -20,6 +20,9 @@ design:
       slug: dos-and-donts
     noTitle: false
 accessibility:
+  - title:
+      name: Colour impairment demonstration
+      slug: colour-impairment-demonstration
   - title:
       name: Accessibility features
       slug: accessibility-features

apps/site/src/content/design-system/components/progress-rope/accessibility/colour-impairment-demonstration/content.mdoc

@@ -0,0 +1,3 @@
+{% shortCode name="accessibility-colour-impairment" /%}
+
+{% accessibilityDemo /%}

apps/site/src/content/design-system/components/progress-rope/index.yaml

@@ -26,6 +26,9 @@ design:
       slug: dos-and-donts
     noTitle: false
 accessibility:
+  - title:
+      name: Colour impairment demonstration
+      slug: colour-impairment-demonstration
   - title:
       name: Accessibility features
       slug: accessibility-features

apps/site/src/content/design-system/components/radio-group/accessibility/colour-impairment-demonstration/content.mdoc

@@ -0,0 +1,3 @@
+{% shortCode name="accessibility-colour-impairment" /%}
+
+{% accessibilityDemo /%}