Feature/#80: gel docs update

apps/site/TO_DO.md

@@ -29,10 +29,10 @@ 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
+3. [x] Props table
 
 ### /articles
 

apps/site/content/design-system/components/accordion/code.mdoc

@@ -1,6 +1,5 @@
-## Accordion
-
-### Default accordion: See Visual design for the usage recommendations for the default style.
+### Default accordion
+See Visual design for the usage recommendations for the default style.
 
 ```jsx
 <Accordion>
@@ -20,7 +19,8 @@
 </Accordion>
 ```
 
-### Lego accordion: See Visual design for the usage recommendations for the lego style.
+### Lego accordion
+See Visual design for the usage recommendations for the lego style.
 
 ```jsx
 <Accordion color="hero" rounded={false}>

apps/site/content/design-system/components/alert/code.mdoc

@@ -1,4 +1,4 @@
-## Looks
+### Looks
 
 ```jsx
 <div>
@@ -23,7 +23,7 @@
 
 ---
 
-## Text
+### Text
 
 ```jsx
 <div>
@@ -48,7 +48,7 @@
 
 ---
 
-## Heading
+### Heading
 
 ```jsx
 <Alert look="info" heading="I am an alert heading">
@@ -61,7 +61,7 @@
 
 ---
 
-## Custom
+### Custom
 
 ```jsx
 <Alert look="info" icon={TelephoneIcon}>
@@ -71,7 +71,7 @@
 
 ---
 
-## Dismissible
+### Dismissible
 
 ```jsx
 <Alert look="info" dismissible>
@@ -81,7 +81,7 @@
 
 ---
 
-## Controlled
+### Controlled
 
 ```jsx
 () => {

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/(home)/page.tsx

@@ -8,7 +8,7 @@ export default async function Homepage() {
     ...article,
     entry: { ...article.entry, content: null },
   }));
-  console.log('articles', articles);
+
   return (
     <main className="pb-8 font-gel-sans">
       <Hero />

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,104 @@
+'use client';
+
+import { DocumentElement } from '@keystatic/core';
+import { DocumentRenderer } from '@keystatic/core/renderer';
+import { Button, Container, Grid, Item } from '@westpac/ui';
+import { NewWindowIcon } from '@westpac/ui/icon';
+import { useMemo } from 'react';
+
+import { ComponentPropsTable } from '@/components/component-props-table';
+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, componentProps, subComponentProps }: CodeContentProps) {
+  const tableOfContents = 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;
+    }, [] as { title: string }[]);
+  }, [content]);
+
+  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={tableOfContents} />
+            </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>
+      {componentProps && (
+        <section className="bg-white py-7 sm:pb-10 sm:pt-15">
+          <Container>
+            <Heading level={2}>Props</Heading>
+            <div className="flex flex-col gap-6">
+              <ComponentPropsTable componentProps={componentProps} />
+              {subComponentProps?.map(subComponentProps => (
+                <ComponentPropsTable
+                  key={subComponentProps.displayName}
+                  componentProps={{
+                    ...subComponentProps,
+                    displayName: subComponentProps.displayName,
+                  }}
+                />
+              ))}
+            </div>
+          </Container>
+        </section>
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,16 @@
+import { DocumentElement } from '@keystatic/core';
+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 CodeContentProps = {
+  componentProps?: ComponentProps;
+  content: DocumentElement[];
+  description?: string;
+  relatedComponents?: RelatedInfoProps['relatedComponents'];
+  subComponentProps?: ComponentProps[];
+  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/document-renderer.tsx

@@ -7,7 +7,7 @@ export const DOCUMENT_RENDERERS: Required<DocumentRendererProps>['renderers'] =
   block: {
     divider: Divider,
     paragraph: props => <Paragraph {...props} className="sm:w-9/12" />,
-    code: Code,
+    code: props => <Code className="my-4" {...props} />,
     heading: Heading,
     list: props => <List {...props} className="sm:w-9/12" />,
   },

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/components/tabs/tabs.component.tsx

@@ -16,7 +16,7 @@ export function Tabs(props: AriaTabListProps<AriaTabProps>) {
   const { tabListProps } = useTabList(props, state, ref);
   return (
     <div>
-      <StickyHeader stickyPosition={HEADER_OFFSET} className="top-11">
+      <StickyHeader stickyPosition={HEADER_OFFSET} className="top-[3.75rem]">
         <div {...tabListProps} ref={ref} className="flex h-11 items-end bg-white sm:h-15">
           {[...state.collection].map(item => (
             <Tab key={item.key} item={item} state={state} />

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 = [
@@ -48,9 +45,12 @@ export function ContentTabs({ content }: { content: ContentTabsProps }) {
               />
             )}
             {tab.key === 'code' && (
-              <Container className="py-15">
-                <DocumentRenderer document={content[tab.key]} renderers={DOCUMENT_RENDERERS} componentBlocks={{}} />
-              </Container>
+              <CodeContent
+                subComponentProps={content.subComponentProps}
+                componentProps={content.componentProps}
+                westpacUIInfo={content.westpacUIInfo}
+                content={content.code}
+              />
             )}
           </div>
         </Tabs.Panel>

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

@@ -1,4 +1,7 @@
 import { DocumentElement } from '@keystatic/core';
+import { ComponentProps } from '@westpac/ui';
+
+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';
@@ -7,8 +10,11 @@ export type ContentTabsProps = {
   accessibilityDemo: DocumentElement[];
   accessibilitySections: AccessibilitySectionProps[];
   code: DocumentElement[];
+  componentProps?: ComponentProps;
   description?: string;
   designSections?: DesignSectionProps[];
   pageOfContent?: { title: string }[];
   relatedComponents?: string[];
+  subComponentProps: ComponentProps[];
+  westpacUIInfo: WestpacUIInfo;
 };

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

@@ -1,3 +1,7 @@
+import { type ComponentProps } from '@westpac/ui';
+import json from '@westpac/ui/component-type.json';
+import { useMemo } from 'react';
+
 import { reader } from '@/app/reader';
 import { formatComponentSlug } from '@/utils/format';
 
@@ -12,7 +16,15 @@ 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.readOrThrow(),
+  ]);
+  const componentName = component[1]
+    .split('-')
+    .map(name => `${name[0].toUpperCase()}${name.slice(1)}`)
+    .join('');
+
   if (!content) return <div>Component not found!</div>;
 
   const [designSections, accessibilitySections, accessibilityDemo, code] = await Promise.all([
@@ -61,17 +73,27 @@ export default async function ComponentPage({ params }: { params: { component: s
     content?.accessibilityDemo(),
     content?.code(),
   ]);
+  const componentProps: ComponentProps | undefined = (json as any)[componentName];
+  const subComponentProps = Object.entries(json).reduce((acc, [key, value]: [string, ComponentProps]) => {
+    if (key.indexOf(`${componentName}.`) !== 0) {
+      return acc;
+    }
+    return [...acc, value];
+  }, [] as ComponentProps[]);
 
   return (
     <ContentTabs
       content={{
+        westpacUIInfo: westpacInfo,
         accessibilitySections,
         accessibilityDemo,
         code,
         description: content.description,
         pageOfContent: content.pageOfContent.concat(),
         designSections,
         relatedComponents: content.relatedInformation.filter(value => !!value) as string[],
+        componentProps,
+        subComponentProps,
       }}
     />
   );

apps/site/src/app/design-system/components/sidebar/components/navigation/navigation.component.tsx

@@ -53,17 +53,18 @@ function Group({ label, level, crumbs, children, ...props }: GroupProps) {
         <AnimatePresence initial={false}>
           {open && (
             <m.div
+              className="overflow-hidden"
               initial={{
                 height: 0,
-                opacity: 0,
+                opacity: 1,
               }}
               animate={{
                 height: 'auto',
                 opacity: 1,
               }}
               exit={{
                 height: 0,
-                opacity: 0,
+                opacity: 1,
               }}
               transition={{ duration: 0.3, ease: 'easeInOut' }}
             >