From 818a3fd08c5b51dfce3d1f70461adba74e6852e6 Mon Sep 17 00:00:00 2001
From: Samitha Fernando <fernando.samitha@gmail.com>
Date: Fri, 26 Jan 2024 14:06:03 +1100
Subject: [PATCH] Update src/content/design-system/development/guides/usage

---
 .../development/guides/usage/accessibilityDemo.mdoc      | 0
 .../guides/usage/design/using-components/content.mdoc    | 4 ++--
 .../design-system/development/guides/usage/index.yaml    | 9 +++++++--
 .../development/guides/usage/relatedArticles.mdoc        | 0
 4 files changed, 9 insertions(+), 4 deletions(-)
 create mode 100644 apps/site/src/content/design-system/development/guides/usage/accessibilityDemo.mdoc
 create mode 100644 apps/site/src/content/design-system/development/guides/usage/relatedArticles.mdoc

diff --git a/apps/site/src/content/design-system/development/guides/usage/accessibilityDemo.mdoc b/apps/site/src/content/design-system/development/guides/usage/accessibilityDemo.mdoc
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/site/src/content/design-system/development/guides/usage/design/using-components/content.mdoc b/apps/site/src/content/design-system/development/guides/usage/design/using-components/content.mdoc
index 74a99430c..d7637d2f3 100644
--- a/apps/site/src/content/design-system/development/guides/usage/design/using-components/content.mdoc
+++ b/apps/site/src/content/design-system/development/guides/usage/design/using-components/content.mdoc
@@ -9,7 +9,7 @@ We recommended the individual package import approach if you have issues with [T
 return (
 <section>
   <div className="space-x-4 mb-2">
-    <button look="primary">Pay here</button>
+    <Button look="primary">Pay here</Button>
   </div>
 </section>
 ); } `} />
@@ -25,7 +25,7 @@ However, use this approach with caution as it may cause issues with [Tree shakin
 <StaticCode language="tsx" code={` import { Button } from '@westpac/ui'; export default function SampleApp() { return (
 <section>
   <div className="space-x-4 mb-2">
-    <button look="primary">Pay here</button>
+    <Button look="primary">Pay here</Button>
   </div>
 </section>
 ); } `} />
diff --git a/apps/site/src/content/design-system/development/guides/usage/index.yaml b/apps/site/src/content/design-system/development/guides/usage/index.yaml
index d13242bf4..5797a2452 100644
--- a/apps/site/src/content/design-system/development/guides/usage/index.yaml
+++ b/apps/site/src/content/design-system/development/guides/usage/index.yaml
@@ -1,8 +1,13 @@
 name: Usage
-description: >-
-  This page describes how to use GEL components within your application.
+description: This page describes how to use GEL components within your application.
+namedExport:
+  discriminant: false
+excludeFromNavbar: false
 design:
   - title:
       name: Using components
       slug: using-components
+    noTitle: false
 accessibility: []
+relatedComponents: []
+code: []
diff --git a/apps/site/src/content/design-system/development/guides/usage/relatedArticles.mdoc b/apps/site/src/content/design-system/development/guides/usage/relatedArticles.mdoc
new file mode 100644
index 000000000..e69de29bb