Merge pull request #487 from WestpacGEL/459-design-system-docs-divide…

…rs-on-the-code-tab-not-full-width

459 design system docs dividers on the code tab not full width

apps/site/keystatic.config.ts

@@ -183,12 +183,35 @@ export default config({
           links: true,
           label: 'Related Articles',
         }),
-        code: fields.document({
-          formatting: true,
-          dividers: true,
-          links: true,
-          label: 'Code',
-        }),
+        code: fields.array(
+          fields.object({
+            title: fields.slug({
+              name: {
+                label: 'Title',
+                validation: {
+                  length: {
+                    min: 1,
+                  },
+                },
+              },
+            }),
+            noTitle: fields.checkbox({ label: 'No title' }),
+            content: fields.document({
+              formatting: true,
+              dividers: true,
+              links: true,
+              images: true,
+              layouts: [[6, 6]],
+              label: 'Code',
+              componentBlocks: foundationBlocks,
+            }),
+          }),
+          {
+            label: 'Code sections',
+            itemLabel: props => props.fields.title.value.name,
+            slugField: 'title',
+          },
+        ),
       },
     }),
     authors: collection({

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

@@ -8,6 +8,7 @@ import { useMemo } from 'react';
 
 import { Container } from '@/app/design-system/components';
 import { ComponentPropsTable } from '@/components/component-props-table';
+import { Section } from '@/components/content-blocks/section';
 import { Code } from '@/components/content-blocks/typography';
 import { Heading } from '@/components/document-renderer';
 import { pascalToKebab } from '@/utils/format-string';
@@ -17,23 +18,29 @@ import { TableOfContents } from '../intro/components';
 
 import { type CodeContentProps } from '.';
 
-export function CodeContent({ content = [], westpacUIInfo, componentProps, subComponentProps }: CodeContentProps) {
-  const tableOfContents = useMemo(() => {
+export function CodeContent({ codeSections = [], westpacUIInfo, componentProps, subComponentProps }: CodeContentProps) {
+  const sectionNames = useMemo(() => {
+    return codeSections?.filter(({ noTitle }) => !noTitle).map(({ title }) => ({ title })) || [];
+  }, [codeSections]);
+
+  const sectionHeadings = useMemo(() => {
     return (
-      content?.reduce((acc, item: DocumentElement & { level?: number }) => {
-        if (item.type === 'heading' && item?.level && item.level <= 3) {
-          return [...acc, { title: item.children[0].text as string }];
-        }
-        return acc;
+      codeSections.reduce((acc, section) => {
+        return section.content?.reduce((acc, item: DocumentElement & { level?: number }) => {
+          if (item.type === 'heading' && item?.level && item.level <= 3) {
+            return [...acc, { title: item.children[0].text as string }];
+          }
+          return acc;
+        }, acc);
       }, [] as { title: string }[]) || []
     );
-  }, [content]);
+  }, [codeSections]);
 
   return (
     <>
       <section className="py-7 sm:pb-10 sm:pt-15">
         <Container>
-          <Grid>
+          <Grid className="gap-y-5.5">
             <Item span={{ initial: 12, sm: 7 }}>
               <table className="typography-body-11 table w-full bg-[#f2f8fc] text-info">
                 <tbody>
@@ -76,18 +83,25 @@ export function CodeContent({ content = [], westpacUIInfo, componentProps, subCo
                 </tbody>
               </table>
             </Item>
-            <Item span={{ initial: 12, sm: 4 }} start={{ initial: 1, sm: 9 }}>
-              <TableOfContents contents={tableOfContents} />
-            </Item>
+            {(sectionHeadings || sectionNames).length > 0 && (
+              <Item span={{ initial: 12, sm: 4 }} start={{ initial: 1, sm: 9 }}>
+                <TableOfContents contents={sectionHeadings || sectionNames} />
+              </Item>
+            )}
           </Grid>
         </Container>
       </section>
-      <section className="border-t border-t-border">
-        <Container className="py-15">
-          <h2 className="typography-body-6 mb-4 font-bold sm:mb-8">Development examples</h2>
-          <DocumentRenderer document={content} renderers={DOCUMENT_RENDERERS} componentBlocks={{}} />
-        </Container>
-      </section>
+      {codeSections?.map(({ title, content, noTitle }) => {
+        const id = title.toLowerCase().split(' ').join('-');
+        return (
+          <Section key={id}>
+            <Container>
+              {!noTitle && <Heading level={2}>{title}</Heading>}
+              <DocumentRenderer document={content} renderers={DOCUMENT_RENDERERS} />
+            </Container>
+          </Section>
+        );
+      })}
       {componentProps && (
         <section className="border-t border-t-border bg-white py-7 sm:pb-10 sm:pt-15">
           <Container>

apps/site/src/app/design-system/[...component]/components/content-tabs/components/code-content/code-content.types.ts

@@ -4,11 +4,11 @@ import { ComponentProps } from '@westpac/ui';
 import { RelatedInfoProps } from '@/components/related-info/related-info.types';
 import { WestpacUIInfo } from '@/types/westpac-ui-info.types';
 
-export type CodeSectionProps = { content: DocumentElement[]; title: string };
+export type CodeSectionProps = { content: DocumentElement[]; noTitle?: boolean; title: string };
 
 export type CodeContentProps = {
+  codeSections?: CodeSectionProps[];
   componentProps?: ComponentProps;
-  content?: DocumentElement[];
   description?: string;
   relatedComponents?: RelatedInfoProps['relatedComponents'];
   subComponentProps?: ComponentProps[];

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

@@ -39,7 +39,7 @@ export function DesignContent({ designSections, description, relatedComponents,
                   ...DOCUMENT_RENDERERS,
                   block: {
                     ...DOCUMENT_RENDERERS.block,
-                    code: props => <Code className="my-4" enableLiveCode={false} {...props} />,
+                    code: props => <Code className="mb-5 mt-4" enableLiveCode={false} {...props} />,
                   },
                 }}
                 componentBlocks={{

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

@@ -1,17 +1,18 @@
 import { DocumentRendererProps } from '@keystatic/core/renderer';
 
 import { Code as InlineCode, Link } from '@/components/content-blocks/typography';
-import { Code, Divider, Heading, List, Paragraph } from '@/components/document-renderer';
+import { Code, Divider, Heading, Image, List, Paragraph } from '@/components/document-renderer';
 import { Layout } from '@/components/document-renderer/layout';
 
 export const DOCUMENT_RENDERERS: Required<DocumentRendererProps>['renderers'] = {
   block: {
-    divider: Divider,
+    divider: () => <Divider className="w-full sm:w-9/12" />,
     paragraph: props => <Paragraph {...props} className="w-full sm:w-9/12" />,
     code: props => <Code className="mb-5 mt-1 sm:mb-8 sm:mt-2" {...props} showCode />,
     heading: Heading,
     list: props => <List {...props} className="sm:w-9/12" />,
     layout: Layout,
+    image: props => <Image {...props} className="mb-5 last:mb-0" />,
     blockquote: ({ children }) => (
       <blockquote className="typography-body-9 mx-6.5 my-2.5 font-light">{children}</blockquote>
     ),

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

@@ -32,7 +32,7 @@ const TabPanelByKey = ({ tabKey, content }: { content: ContentTabsProps; tabKey:
         subComponentProps={content.subComponentProps}
         componentProps={content.componentProps}
         westpacUIInfo={content.westpacUIInfo}
-        content={content.code}
+        codeSections={content.codeSections}
       />
     );
   }
@@ -63,9 +63,14 @@ export function ContentTabs({ content }: { content: ContentTabsProps }) {
     return [
       ...(content.designSections?.length ? [{ label: 'Design', key: 'design' }] : []),
       ...(content.accessibilitySections.length > 0 ? [{ label: 'Accessibility', key: 'accessibility' }] : []),
-      ...(content.componentProps || content.code ? [{ label: 'Code', key: 'code' }] : []),
+      ...(content.componentProps || content.codeSections.length > 0 ? [{ label: 'Code', key: 'code' }] : []),
     ];
-  }, [content.accessibilitySections.length, content.code, content.componentProps, content.designSections?.length]);
+  }, [
+    content.accessibilitySections.length,
+    content.codeSections.length,
+    content.componentProps,
+    content.designSections?.length,
+  ]);
 
   if (filteredTabs.length === 1) {
     return (

apps/site/src/app/design-system/[...component]/components/content-tabs/content-tabs.types.ts

@@ -5,12 +5,13 @@ import { RelatedInfoLinks } from '@/components/related-info/related-info.types';
 import { WestpacUIInfo } from '@/types/westpac-ui-info.types';
 
 import { AccessibilitySectionProps } from './components/accessibility-content/accessibility-content.types';
+import { CodeSectionProps } from './components/code-content/code-content.types';
 import { DesignSectionProps } from './components/design-content/design-content.types';
 
 export type ContentTabsProps = {
   accessibilityDemo?: DocumentElement[];
   accessibilitySections: AccessibilitySectionProps[];
-  code?: DocumentElement[];
+  codeSections: CodeSectionProps[];
   componentProps?: ComponentProps;
   description?: string;
   designSections?: DesignSectionProps[];

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

@@ -7,6 +7,7 @@ import { RelatedInfoLinks } from '@/components/related-info/related-info.types';
 
 import { ContentTabs } from './components';
 import { AccessibilitySectionProps } from './components/content-tabs/components/accessibility-content/accessibility-content.types';
+import { CodeSectionProps } from './components/content-tabs/components/code-content/code-content.types';
 import { DesignSectionProps } from './components/content-tabs/components/design-content/design-content.types';
 
 type MetadataProps = {
@@ -54,7 +55,7 @@ export default async function ComponentPage({ params }: { params: { component: s
     .map(name => `${name[0].toUpperCase()}${name.slice(1)}`)
     .join('');
 
-  const [designSections, accessibilitySections, accessibilityDemo, code, relatedArticles] = await Promise.all([
+  const [designSections, accessibilitySections, accessibilityDemo, codeSections, relatedArticles] = await Promise.all([
     Promise.all(
       content.design.map(section => {
         return new Promise<DesignSectionProps>((resolve, reject) => {
@@ -99,11 +100,31 @@ export default async function ComponentPage({ params }: { params: { component: s
       }),
     ),
     content?.accessibilityDemo(),
-    content?.code(),
+    Promise.all(
+      content.code.map(section => {
+        return new Promise<CodeSectionProps>((resolve, reject) => {
+          return section
+            .content()
+            .then(content => {
+              resolve({
+                title: section.title.name,
+                content: content,
+                noTitle: section.noTitle,
+              });
+              return {
+                ...section,
+                content,
+              };
+            })
+            .catch((error: any) => {
+              reject(error);
+            });
+        });
+      }),
+    ),
     content?.relatedArticles(),
   ]);
 
-  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 relatedArticlesIsEmpty = relatedArticles[0].children.length <= 1 && !relatedArticles[0].children[0].text;
 
@@ -121,7 +142,7 @@ export default async function ComponentPage({ params }: { params: { component: s
         westpacUIInfo: westpacInfo,
         accessibilitySections,
         accessibilityDemo: accessibilityIsEmpty ? undefined : accessibilityDemo,
-        code: codeIsEmpty ? undefined : code,
+        codeSections,
         description: content.description,
         designSections,
         relatedArticles: relatedArticlesIsEmpty ? undefined : relatedArticles,

apps/site/src/components/code/code.inject-components.ts

@@ -1,5 +1,9 @@
 import Link from 'next/link';
 
+export { DesktopComputerPictogram } from '@westpac/ui/pictogram';
+
+export { MastercardAcceptedSymbol, WBCLogo } from '@westpac/ui/symbol';
+
 export { StaticCode } from '../static-code/index';
 
 export { ComponentTitle } from '../document-renderer/component-title';

apps/site/src/components/document-renderer/divider/divider.component.tsx

@@ -1,5 +1,7 @@
+import { clsx } from 'clsx';
+
 import { type DividerProps } from './divider.types';
 
-export const Divider: DividerProps = () => {
-  return <hr className="my-10 border-border xsl:-mx-5 sm:-mx-6 md:-mx-8 lg:-mx-10" />;
+export const Divider = ({ className }: DividerProps) => {
+  return <hr className={clsx('my-7 border-border xsl:my-10', className)} />;
 };

apps/site/src/components/document-renderer/divider/divider.types.ts

@@ -1,3 +1,3 @@
-import { DocumentRendererProps } from '@keystatic/core/renderer';
-
-export type DividerProps = Required<Required<DocumentRendererProps>['renderers']>['block']['divider'];
+export type DividerProps = {
+  className?: string;
+};

apps/site/src/components/document-renderer/heading/heading.style.ts

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 
 export const styles = tv({
-  base: 'font-bold',
+  base: 'mt-5 font-bold first:mt-0',
   variants: {
     textAlign: {
       left: 'text-left',
@@ -11,7 +11,7 @@ export const styles = tv({
     level: {
       1: 'typography-body-5 mb-3',
       2: 'typography-body-7 mb-4 sm:typography-body-6 sm:mb-7',
-      3: 'typography-body-8 my-2 first:mt-0',
+      3: 'typography-body-8 mb-2',
       4: 'typography-body-9 mb-2',
       5: 'typography-body-10 mb-2',
       6: 'typography-body-10 mb-2',

apps/site/src/components/document-renderer/image/image.component.tsx

@@ -0,0 +1,12 @@
+import { styles as imageStyles } from './image.style';
+import { type ImageProps } from './image.types';
+
+export const Image = ({ alt, src, title, className }: ImageProps) => {
+  const styles = imageStyles({});
+  return (
+    <figure className={styles.base({ className })}>
+      <img className={styles.img({})} loading="lazy" alt={alt} src={src} />
+      {title && <figcaption className={styles.caption({})}>{title}</figcaption>}
+    </figure>
+  );
+};

apps/site/src/components/document-renderer/image/image.style.ts

@@ -0,0 +1,9 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({
+  slots: {
+    base: 'relative',
+    img: 'block',
+    caption: 'typography-site-10 mt-2 text-gel-muted',
+  },
+});

apps/site/src/components/document-renderer/image/image.types.ts

@@ -0,0 +1,6 @@
+export type ImageProps = {
+  alt: string;
+  className?: string;
+  src: string;
+  title?: string | undefined;
+};

apps/site/src/components/document-renderer/image/index.ts

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

apps/site/src/components/document-renderer/index.ts

@@ -4,3 +4,4 @@ export * from './paragraph';
 export * from './list';
 export * from './divider';
 export * from './blockquote';
+export * from './image';