feat: add new template and module for service catalog

rollup.config.mjs

@@ -35,6 +35,7 @@ export default defineConfig([
     input: {
       "new-request-form": "src/modules/new-request-form/index.tsx",
       "flash-notifications": "src/modules/flash-notifications/index.ts",
+      "service-catalog": "src/modules/service-catalog/index.tsx",
     },
     output: {
       dir: "assets",

src/modules/service-catalog/ServiceCatalog.tsx

@@ -0,0 +1,5 @@
+import { Span } from "@zendeskgarden/react-typography";
+
+export function ServiceCatalog() {
+  return <Span>Hello from module</Span>;
+}

src/modules/service-catalog/index.tsx

@@ -0,0 +1 @@
+export { renderServiceCatalog } from "./renderServiceCatalog";

src/modules/service-catalog/renderServiceCatalog.tsx

@@ -0,0 +1,7 @@
+import { render } from "react-dom";
+
+import { ServiceCatalog } from "./ServiceCatalog";
+
+export async function renderServiceCatalog(container: HTMLElement) {
+  render(<ServiceCatalog />, container);
+}

templates/custom_pages/service_catalog.hbs

@@ -0,0 +1,20 @@
+<div class="container-divider"></div>
+<div class="container">
+  <div class="sub-nav">
+  </div>
+
+  <h1>Service Catalog</h1>
+
+  <div id="main-content">
+     <div id="service-catalog"></div>
+    <div>Hello from template</div>
+  </div>
+</div>
+
+<script type="module">
+  import { renderServiceCatalog } from "service-catalog";
+
+  const container = document.getElementById("service-catalog");
+
+  renderServiceCatalog(container);
+</script>

templates/document_head.hbs

@@ -13,6 +13,7 @@
   "imports": {
     "new-request-form": "{{asset 'new-request-form-bundle.js'}}",
     "flash-notifications": "{{asset 'flash-notifications-bundle.js'}}",
+    "service-catalog": "{{asset 'service-catalog-bundle.js'}}",
     "new-request-form-translations": "{{asset 'new-request-form-translations-bundle.js'}}",
     "shared": "{{asset 'shared-bundle.js'}}",
     "wysiwyg": "{{asset 'wysiwyg-bundle.js'}}"

templates/header.hbs

@@ -14,6 +14,7 @@
     <nav class="user-nav" id="user-nav" aria-label="{{t 'user_navigation'}}">
       <ul class="user-nav-list">
         <li>{{link 'community'}}</li>
+        <li><a href="/hc/en-us/p/service_catalog">Request a service</a></li>
         <li>{{link 'new_request' class='submit-a-request'}}</li>
         {{#unless signed_in}}
           <li>