feat(#80): adding the table on Code content

apps/site/TO_DO.md

@@ -29,7 +29,7 @@ const GEL_COLORS = {
 
 #### code tab
 
-1. [ ] Package info table used in intro section
+1. [x] Package info table used in intro section
 2. [x] Update Live code block to look like current gel site
    - [x] Update Show code text to Show live code
 3. [ ] Props table

apps/site/content/westpac-ui-info/index.yaml

@@ -0,0 +1,2 @@
+changelog: https://github.com/WestpacGEL/GEL-next/bloc/main/CHANGELOG.ms
+currentVersion: 1.0.0

apps/site/keystatic.config.ts

@@ -31,6 +31,18 @@ export default config({
         }),
       },
     }),
+    westpacUIInfo: singleton({
+      label: 'Westpac UI Info',
+      path: 'content/westpac-ui-info/',
+      schema: {
+        changelog: fields.url({
+          label: 'Changelog link',
+        }),
+        currentVersion: fields.text({
+          label: 'current gel version',
+        }),
+      },
+    }),
   },
   collections: {
     designSystem: collection({

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

@@ -33,7 +33,7 @@ export function AccessibilityContent({ accessibilitySections, accessibilityDemo
   return (
     <>
       <Section className="border-t-0">
-        <Container>
+        <Container className="pt-5">
           <Heading level={2} className="mb-4 sm:mb-7">
             Colour impairment demonstration
           </Heading>

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

@@ -0,0 +1,103 @@
+'use client';
+
+import { DocumentRenderer } from '@keystatic/core/renderer';
+import { Button, Container, Grid, Item, Link, Table } from '@westpac/ui';
+import { NewWindowIcon } from '@westpac/ui/icon';
+
+import { Code } from '@/components/content-blocks/typography';
+import { Heading } from '@/components/document-renderer';
+
+import { DOCUMENT_RENDERERS } from '../document-renderer';
+import { TableOfContents } from '../intro/components';
+
+import { type CodeContentProps } from '.';
+
+export function CodeContent({ content, westpacUIInfo }: CodeContentProps) {
+  return (
+    <>
+      <section className="py-7 sm:pb-10 sm:pt-15">
+        <Container>
+          <Grid>
+            <Item span={{ initial: 12, sm: 7 }}>
+              <table className="table w-full bg-[#f2f8fc] text-info">
+                <tbody>
+                  <tr>
+                    <th className="w-10 border-y border-gel-icon p-3 text-left font-semibold">Version</th>
+                    <td className="border-y border-gel-icon p-3">{westpacUIInfo?.currentVersion}</td>
+                  </tr>
+                  <tr>
+                    <th className="w-10 border-y border-gel-icon p-3 text-left font-semibold">History</th>
+                    <td className="border-y border-gel-icon p-3">
+                      <Button
+                        tag="a"
+                        size="small"
+                        className="pl-0"
+                        look="link"
+                        target="_blank"
+                        href={westpacUIInfo?.changelog || '#'}
+                      >
+                        <div className="flex items-center gap-1">
+                          <span>View changes</span>
+                          <NewWindowIcon size="xsmall" />
+                        </div>
+                      </Button>
+                    </td>
+                  </tr>
+                  <tr>
+                    <th className="w-10 border-y border-gel-icon p-3 text-left font-semibold">Install</th>
+                    <td className="border-y border-gel-icon p-3 text-black">
+                      <Code>npm install @westpac/ui</Code>
+                    </td>
+                  </tr>
+                  <tr>
+                    <th className="w-10 border-y border-gel-icon p-3 text-left font-semibold">Requires</th>
+                    <td className="border-y border-gel-icon p-3">react@18</td>
+                  </tr>
+                </tbody>
+              </table>
+            </Item>
+            <Item span={{ initial: 12, sm: 4 }} start={{ initial: 1, sm: 9 }}>
+              <TableOfContents contents={[{ title: 'test' }]} />
+            </Item>
+          </Grid>
+        </Container>
+      </section>
+      <Container className="py-15">
+        <DocumentRenderer document={content} renderers={DOCUMENT_RENDERERS} componentBlocks={{}} />
+      </Container>
+      <section className="bg-white py-7 sm:pb-10 sm:pt-15">
+        <Container>
+          <Heading level={2}>Props</Heading>
+          <Table bordered striped className="table w-full">
+            <Table.Caption className="text-left">Alert props</Table.Caption>
+            <Table.Header>
+              <Table.Row>
+                {['Property', 'Type', 'Value', 'Default', 'Required', 'Description'].map(title => (
+                  <Table.HeaderCell key={title} className="text-left">
+                    {title}
+                  </Table.HeaderCell>
+                ))}
+              </Table.Row>
+            </Table.Header>
+            <Table.Body>
+              <Table.Row>
+                {['Property', 'Type', 'Value', 'Default', 'Required', 'Description'].map(title => (
+                  <Table.Cell key={title} className="text-left">
+                    {title}
+                  </Table.Cell>
+                ))}
+              </Table.Row>
+              <Table.Row>
+                {['Property', 'Type', 'Value', 'Default', 'Required', 'Description'].map(title => (
+                  <Table.Cell key={title} className="text-left">
+                    {title}
+                  </Table.Cell>
+                ))}
+              </Table.Row>
+            </Table.Body>
+          </Table>
+        </Container>
+      </section>
+    </>
+  );
+}

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

@@ -0,0 +1,13 @@
+import { DocumentElement } from '@keystatic/core';
+
+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 CodeContentProps = {
+  content: DocumentElement[];
+  description?: string;
+  relatedComponents?: RelatedInfoProps['relatedComponents'];
+  westpacUIInfo?: WestpacUIInfo;
+};

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

@@ -0,0 +1,2 @@
+export { CodeContent } from './code-content.component';
+export { type CodeContentProps } from './code-content.types';

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

@@ -1,4 +1,5 @@
 export * from './accessibility-content';
+export * from './code-content';
 export * from './design-content';
 export * from './intro';
 export * from './tabs';

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

@@ -1,12 +1,9 @@
 'use client';
 
-import { DocumentRenderer } from '@keystatic/core/renderer';
-import { Container } from '@westpac/ui';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { Key, useCallback } from 'react';
 
-import { AccessibilityContent, DesignContent, Tabs } from './components';
-import { DOCUMENT_RENDERERS } from './components/document-renderer';
+import { AccessibilityContent, CodeContent, DesignContent, Tabs } from './components';
 import { type ContentTabsProps } from './content-tabs.types';
 
 const TABS = [
@@ -47,11 +44,7 @@ export function ContentTabs({ content }: { content: ContentTabsProps }) {
                 accessibilityDemo={content.accessibilityDemo}
               />
             )}
-            {tab.key === 'code' && (
-              <Container className="py-15">
-                <DocumentRenderer document={content[tab.key]} renderers={DOCUMENT_RENDERERS} componentBlocks={{}} />
-              </Container>
-            )}
+            {tab.key === 'code' && <CodeContent westpacUIInfo={content.westpacUIInfo} content={content.code} />}
           </div>
         </Tabs.Panel>
       ))}

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

@@ -1,5 +1,7 @@
 import { DocumentElement } from '@keystatic/core';
 
+import { WestpacUIInfo } from '@/types/westpac-ui-info.types';
+
 import { AccessibilitySectionProps } from './components/accessibility-content/accessibility-content.types';
 import { DesignSectionProps } from './components/design-content/design-content.types';
 
@@ -11,4 +13,5 @@ export type ContentTabsProps = {
   designSections?: DesignSectionProps[];
   pageOfContent?: { title: string }[];
   relatedComponents?: string[];
+  westpacUIInfo: WestpacUIInfo;
 };

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

@@ -12,7 +12,10 @@ export function generateMetadata({ params }: { params: { component: string } })
 
 export default async function ComponentPage({ params }: { params: { component: string[] } }) {
   const { component } = params;
-  const content = await reader.collections.designSystem.read(component.join('/'));
+  const [content, westpacInfo] = await Promise.all([
+    reader.collections.designSystem.read(component.join('/')),
+    reader.singletons.westpacUIInfo.read(),
+  ]);
   if (!content) return <div>Component not found!</div>;
 
   const [designSections, accessibilitySections, accessibilityDemo, code] = await Promise.all([
@@ -65,6 +68,7 @@ export default async function ComponentPage({ params }: { params: { component: s
   return (
     <ContentTabs
       content={{
+        westpacUIInfo: westpacInfo,
         accessibilitySections,
         accessibilityDemo,
         code,

apps/site/src/types/westpac-ui-info.types.ts

@@ -0,0 +1,4 @@
+export type WestpacUIInfo = {
+  changelog: string | null;
+  currentVersion: string;
+};