Merge pull request #544 from WestpacGEL/542-add-colours-code-examples

542 add colours code examples
WestpacGEL · Dec 12, 2023 · 70be7ef · 70be7ef · vercel · Dec 12, 2023
2 parents 7703e33 + b4bdd5a
commit 70be7ef
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 14 deletions.
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
@@ -7,6 +7,7 @@ import { NewWindowIcon } from '@westpac/ui/icon';
 import { useMemo } from 'react';
 
 import { Container } from '@/app/design-system/components';
+import { Colors } from '@/components/component-blocks/colors/colors.component';
 import { ComponentPropsTable } from '@/components/component-props-table';
 import { Section } from '@/components/content-blocks/section';
 import { Code } from '@/components/content-blocks/typography';
@@ -28,10 +29,10 @@ export function CodeContent({
   const sectionNames = useMemo(() => {
     const sections = codeSections?.filter(({ noTitle }) => !noTitle).map(({ title }) => ({ title }));
     if (sections.length > 0) {
-      return [...sections, { title: 'Props' }];
+      return componentProps ? [...sections, { title: 'Props' }] : [...sections];
     }
     return [];
-  }, [codeSections]);
+  }, [codeSections, componentProps]);
 
   const sectionHeadings = useMemo(() => {
     const sections = codeSections.reduce((acc, section) => {
@@ -43,10 +44,10 @@ export function CodeContent({
       }, acc);
     }, [] as { title: string }[]);
     if (sections.length > 0) {
-      return [...sections, { title: 'Props' }];
+      return componentProps ? [...sections, { title: 'Props' }] : [...sections];
     }
     return [];
-  }, [codeSections]);
+  }, [codeSections, componentProps]);
 
   return (
     <>
@@ -109,7 +110,11 @@ export function CodeContent({
           <Section key={id}>
             <Container>
               {!noTitle && <Heading level={2}>{title}</Heading>}
-              <DocumentRenderer document={content} renderers={DOCUMENT_RENDERERS} />
+              <DocumentRenderer
+                document={content}
+                renderers={DOCUMENT_RENDERERS}
+                componentBlocks={{ colors: props => <Colors palette={props.palette} tab="code" /> }}
+              />
             </Container>
           </Section>
         );

diff --git a/apps/site/src/app/layout.tsx b/apps/site/src/app/layout.tsx
@@ -1,6 +1,6 @@
 import './styles/globals.css';
 import { type Metadata } from 'next';
-import { cookies, draftMode } from 'next/headers';
+import { draftMode } from 'next/headers';
 
 import { ThemeProvider } from '@/components/theme';
 
@@ -18,10 +18,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       <body>
         <ThemeProvider>{children}</ThemeProvider>
         {isEnabled && (
-          <div>
-            Draft mode ({cookies().get('ks-branch')?.value}){' '}
-            <form method="POST" action="/preview/end">
-              <button>End preview</button>
+          <div className="absolute right-15 top-3 z-[999]">
+            <form method="post" action="/preview/end">
+              <button className="text-white">End preview</button>
             </form>
           </div>
         )}

diff --git a/apps/site/src/components/component-blocks/colors/colors.component.tsx b/apps/site/src/components/component-blocks/colors/colors.component.tsx
@@ -8,7 +8,7 @@ import { Svg } from '@/components/svg';
 
 import { getColorPalette } from './colors.utils';
 
-export function Colors({ palette }: { palette: string }) {
+export function Colors({ palette, tab }: { palette: string; tab?: string }) {
   const searchParams = useSearchParams();
   const brand = (searchParams.get('brand') ?? 'wbc') as BrandKey;
   const colorPalette = getColorPalette({ brand, palette });
@@ -23,7 +23,15 @@ export function Colors({ palette }: { palette: string }) {
             <div className="typography-body-10 ml-4 flex flex-col xsl:ml-0 xsl:mt-2 xsl:px-2">
               <strong className="mb-0.5">{color.name}</strong>
               <span className="mb-0.5">{color.hex}</span>
-              <span>{color.rgb}</span>
+              <span className={tab === 'code' ? 'mb-0.5' : ''}>{color.rgb}</span>
+              {tab === 'code' && (
+                <>
+                  <div className="mb-0.5">
+                    <strong>Tailwind class</strong>
+                  </div>
+                  <span>bg-{color.name.toLowerCase()}</span>
+                </>
+              )}
             </div>
           </div>
         </Item>

diff --git a/apps/site/src/content/design-system/foundation/colour/code/development-examples/content.mdoc b/apps/site/src/content/design-system/foundation/colour/code/development-examples/content.mdoc
@@ -1 +1,13 @@
-The Design System manages colours via design tokens
+GEL export colour palette via **Tailwind classes** and we recommend using these pre-defined classes to ensure consistency across the site.
+
+### Primary UI palette
+
+{% colors palette="primary" tab="code" /%}
+
+### Secondary colours
+
+{% colors palette="secondary" tab="code" /%}
+
+### Reserved colours
+
+{% colors palette="reserved" tab="code" /%}
diff --git a/apps/site/src/content/design-system/foundation/colour/index.yaml b/apps/site/src/content/design-system/foundation/colour/index.yaml
@@ -36,4 +36,3 @@ code:
   - title:
       name: Development examples
       slug: development-examples
-    noTitle: true