feat(KNO-7916): Add support for linking to Accordion components

components/ui/Accordion.tsx

@@ -2,7 +2,7 @@ import { Box, Stack } from "@telegraph/layout";
 import { MenuItem } from "@telegraph/menu";
 import { Icon } from "@telegraph/icon";
 import { AnimatePresence, motion } from "framer-motion";
-import { useState, useMemo } from "react";
+import { useState, useMemo, useLayoutEffect } from "react";
 import { Text, Code } from "@telegraph/typography";
 import { ChevronRight } from "lucide-react";
 
@@ -15,11 +15,24 @@ const AccordionGroup = ({ children }) => (
   </div>
 );
 
+function getHashFragment(): string {
+  if (typeof window === "undefined") return "";
+  const { hash } = window.location;
+  if (!hash || hash === "#") return "";
+  try {
+    return decodeURIComponent(hash.slice(1));
+  } catch {
+    return hash.slice(1);
+  }
+}
+
 type AccordionProps = {
   children: React.ReactNode;
   title: string;
   description?: string;
   defaultOpen?: boolean;
+  /** When set, this value is used as the element `id` and the accordion opens if the URL hash matches (for deep links). */
+  anchorId?: string;
 };
 
 // Helper function to parse title and split into text and code parts
@@ -68,12 +81,25 @@ const Accordion = ({
   title,
   description,
   defaultOpen = false,
+  anchorId,
 }: AccordionProps) => {
   const [open, setOpen] = useState<boolean>(defaultOpen);
   const titleParts = useMemo(() => parseTitleWithCode(title), [title]);
 
+  useLayoutEffect(() => {
+    if (!anchorId) return;
+    const syncFromHash = () => {
+      if (getHashFragment() === anchorId) {
+        setOpen(true);
+      }
+    };
+    syncFromHash();
+    window.addEventListener("hashchange", syncFromHash);
+    return () => window.removeEventListener("hashchange", syncFromHash);
+  }, [anchorId]);
+
   return (
-    <Box role="listitem">
+    <Box role="listitem" id={anchorId}>
       <MenuItem
         as="button"
         onClick={() => setOpen(!open)}

content/integrations/chat/microsoft-teams/overview.mdx

@@ -163,7 +163,7 @@ To use TeamsKit, you'll need to configure the API permissions and OAuth redirect
 
 ## How to set channel data for a Microsoft Teams integration in Knock
 
-In Knock, the [`ChannelData`](/managing-recipients/setting-channel-data) concept provides you a way of storing recipient-specific connection data for a given integration. If you reference the [channel data requirements for Microsoft Teams](/managing-recipients/setting-channel-data#chat-app-channels), you'll see that there are two different schemas for an `MsTeamsConnection` stored on a [`User`](/concepts/users) or an [`Object`](/concepts/objects) in Knock.
+In Knock, the [`ChannelData`](/managing-recipients/setting-channel-data) concept provides you a way of storing recipient-specific connection data for a given integration. If you reference the [channel data requirements for Microsoft Teams](/managing-recipients/setting-channel-data#microsoft-teams-channel-data), you'll see that there are two different schemas for an `MsTeamsConnection` stored on a [`User`](/concepts/users) or an [`Object`](/concepts/objects) in Knock.
 
 Here's an example of setting channel data on an `Object` in Knock.
 

content/managing-recipients/setting-channel-data.mdx

@@ -241,7 +241,7 @@ The `PushDevice` object is used to optionally set device-level metadata for a pu
     | incoming_webhook.url | `string` | The Discord incoming webhook URL (to be used instead of the properties above) |
 
   </Accordion>
-  <Accordion title ="Microsoft Teams">
+  <Accordion title ="Microsoft Teams" anchorId="microsoft-teams-channel-data">
     | Property    | Type                  | Description                        |
     | ----------- | --------------------- | ---------------------------------- |
     | connections | `MsTeamsConnection[]` | One or more connections to MsTeams |