From ed5a7730fdbd66ab094b34031afc54e6d94d5e6e Mon Sep 17 00:00:00 2001
From: Chris Olsen <olsen.chris@gmail.com>
Date: Wed, 2 Apr 2025 10:37:38 -0600
Subject: [PATCH 1/3] fix(#2550): remove the `lts` tag from the setup
 instructions

---
 src/routes/get-started/developers/DevelopersSetup.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/get-started/developers/DevelopersSetup.tsx b/src/routes/get-started/developers/DevelopersSetup.tsx
index ab2dd495a..c1cb7fe1d 100644
--- a/src/routes/get-started/developers/DevelopersSetup.tsx
+++ b/src/routes/get-started/developers/DevelopersSetup.tsx
@@ -24,7 +24,7 @@ export default function DevelopersSetupPage() {
         allowCopy={true}
         code={`
           npm i @abgov/web-components
-          npm i @abgov/angular-components@lts
+          npm i @abgov/angular-components
         `}
       />
 
@@ -89,7 +89,7 @@ export default function DevelopersSetupPage() {
           tags="react"
           allowCopy={true}
           code={`
-          npm i @abgov/react-components@lts
+          npm i @abgov/react-components
           npm i @abgov/web-components
         `}
         />

From 63f2c7832d2869d613bdedea9c062e4101c47125 Mon Sep 17 00:00:00 2001
From: Chris Olsen <olsen.chris@gmail.com>
Date: Wed, 2 Apr 2025 10:38:49 -0600
Subject: [PATCH 2/3] fix(#2550): remove the `tags` prop from the CodeSnippets

---
 src/routes/get-started/developers/DevelopersSetup.tsx | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/src/routes/get-started/developers/DevelopersSetup.tsx b/src/routes/get-started/developers/DevelopersSetup.tsx
index c1cb7fe1d..30eae3737 100644
--- a/src/routes/get-started/developers/DevelopersSetup.tsx
+++ b/src/routes/get-started/developers/DevelopersSetup.tsx
@@ -20,7 +20,6 @@ export default function DevelopersSetupPage() {
       <h4>1. Add Dependencies</h4>
       <CodeSnippet
         lang="typescript"
-        tags="react"
         allowCopy={true}
         code={`
           npm i @abgov/web-components
@@ -31,7 +30,6 @@ export default function DevelopersSetupPage() {
       <h4>2. Link ionicons in app/index.html Add the following in the head element</h4>
       <CodeSnippet
         lang="typescript"
-        tags="react"
         allowCopy={true}
         code={`
           <script type="module" src="https://cdn.jsdelivr.net/npm/ionicons@latest/dist/ionicons/ionicons.esm.js"></script>
@@ -42,7 +40,6 @@ export default function DevelopersSetupPage() {
       <h4>3. Update src/app/app.module.ts as per the four steps below</h4>
       <CodeSnippet
         lang="typescript"
-        tags="react"
         allowCopy={true}
         code={`
           // 1. Import the CUSTOM_ELEMENTS_SCHEMA
@@ -70,7 +67,6 @@ export default function DevelopersSetupPage() {
       <h4>4. Add the styles link in the src/styles.css file</h4>
       <CodeSnippet
         lang="typescript"
-        tags="react"
         allowCopy={true}
         code={`@import "@abgov/web-components/index.css";`}
       />
@@ -86,7 +82,6 @@ export default function DevelopersSetupPage() {
         <h4>1. Add Dependencies</h4>
         <CodeSnippet
           lang="typescript"
-          tags="react"
           allowCopy={true}
           code={`
           npm i @abgov/react-components
@@ -97,7 +92,6 @@ export default function DevelopersSetupPage() {
         <h4>2. Link ionicons in app/index.html Add the following to the head element</h4>
         <CodeSnippet
           lang="typescript"
-          tags="react"
           allowCopy={true}
           code={`
           <script type="module" src="https://cdn.jsdelivr.net/npm/ionicons@latest/dist/ionicons/ionicons.esm.js"></script>
@@ -108,7 +102,6 @@ export default function DevelopersSetupPage() {
         <h4>3. Import the web-component styles in the src/index.css file</h4>
         <CodeSnippet
           lang="typescript"
-          tags="react"
           allowCopy={true}
           code={`@import "@abgov/web-components/index.css";`}
         />
@@ -121,7 +114,6 @@ export default function DevelopersSetupPage() {
         <h4>1. Add Dependencies</h4>
         <CodeSnippet
           lang="typescript"
-          tags="react"
           allowCopy={true}
           code={`npm i @abgov/web-components`}
         />
@@ -129,7 +121,6 @@ export default function DevelopersSetupPage() {
         <h4>2. Link ionicons in index.html Add the following in the head element</h4>
         <CodeSnippet
           lang="typescript"
-          tags="react"
           allowCopy={true}
           code={`
           <script type="module" src="https://cdn.jsdelivr.net/npm/ionicons@latest/dist/ionicons/ionicons.esm.js"></script>
@@ -158,7 +149,6 @@ export default function DevelopersSetupPage() {
         <h4>4. Import the web-components into src/main.js:</h4>
         <CodeSnippet
           lang="typescript"
-          tags="react"
           allowCopy={true}
           code={`import "@abgov/web-components";`}
         />
@@ -169,7 +159,6 @@ export default function DevelopersSetupPage() {
         </h4>
         <CodeSnippet
           lang="typescript"
-          tags="react"
           allowCopy={true}
           code={`@import "@abgov/web-components/index.css";`}
         />

From 8563aba8786f940e146dc69f20cb06c5c70a50f3 Mon Sep 17 00:00:00 2001
From: Chris Olsen <olsen.chris@gmail.com>
Date: Wed, 2 Apr 2025 10:39:17 -0600
Subject: [PATCH 3/3] chore(#2550): formatting fixes

---
 .../developers/DevelopersSetup.tsx            | 29 ++++---------------
 1 file changed, 6 insertions(+), 23 deletions(-)

diff --git a/src/routes/get-started/developers/DevelopersSetup.tsx b/src/routes/get-started/developers/DevelopersSetup.tsx
index 30eae3737..0dd79df42 100644
--- a/src/routes/get-started/developers/DevelopersSetup.tsx
+++ b/src/routes/get-started/developers/DevelopersSetup.tsx
@@ -108,7 +108,7 @@ export default function DevelopersSetupPage() {
 
       <GoabDivider mt="2xl" mb="xl" />
 
-        <h3 id="vue">Vue web components</h3>
+        <h3 id="web-components">Web components</h3>
         <p>This library contains react components from the Government of Alberta.</p>
 
         <h4>1. Add Dependencies</h4>
@@ -128,25 +128,7 @@ export default function DevelopersSetupPage() {
         `}
         />
 
-        <h4>3. Update vite.config.js with the following:</h4>
-        <CodeSnippet
-          lang="typescript"
-          tags="react"
-          allowCopy={true}
-          code={`
-          plugins: [
-            vue({
-              template: {
-               compilerOptions: {
-                 // treat all tags with goa- as custom elements
-                 isCustomElement: (tag) => tag.includes('goa-')
-               }
-            }
-          })],
-        `}
-        />
-
-        <h4>4. Import the web-components into src/main.js:</h4>
+        <h4>3. Import the web-components into src/main.js:</h4>
         <CodeSnippet
           lang="typescript"
           allowCopy={true}
@@ -154,7 +136,7 @@ export default function DevelopersSetupPage() {
         />
 
         <h4>
-          5. Add the styles link in the src/assets/main.css file or wherever your main css file is
+          4. Add the styles link in the src/assets/main.css file or wherever your main css file is
           located:
         </h4>
         <CodeSnippet
@@ -200,8 +182,9 @@ export default function DevelopersSetupPage() {
                 <code>npm run build</code>
               </li>
               <li>
-                <code>npm run start</code>-- if using Angular, <code>npm run dev</code> --if using
-                react
+                <code>npm run start # Angular</code>
+                <br />
+                <code>npm run dev # React</code>
               </li>
             </ol>
           </li>