Fix/remove non null assertion

change/@microsoft-fast-components-8d3df65a-e2b2-4ec4-b4bd-7ae1e042f856.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "remove non-null assertion in anchored region",
+  "packageName": "@microsoft/fast-components",
+  "email": "mathieu.lavoie@shopify.com",
+  "dependentChangeType": "patch"
+}

packages/web-components/fast-components/src/anchored-region/anchored-region.stories.ts

@@ -5,7 +5,6 @@ import { AnchoredRegion as FoundationAnchoredRegion } from "@microsoft/fast-foun
 import AnchoredRegionTemplate from "./fixtures/base.html";
 import "./index";
 
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
 addons.getChannel().addListener(STORY_RENDERED, (name: string) => {
     if (name.toLowerCase().startsWith("anchored-region")) {
         //scroll stuff into view
@@ -46,60 +45,59 @@ addons.getChannel().addListener(STORY_RENDERED, (name: string) => {
         const regionScalingUpdate = document.getElementById(
             "region-upd1"
         ) as FoundationAnchoredRegion;
-        document
-            .getElementById("viewport-upd1")!
-            .addEventListener("scroll", () => regionScalingUpdate.update());
-
+        const viewPort = document.getElementById("viewport-upd1");
         const togglesRegion = document.getElementById("toggles-region");
 
+        if (!togglesRegion || !viewPort) {
+            return;
+        }
+
+        viewPort.addEventListener("scroll", () => regionScalingUpdate.update());
+
         // toggle anchor example
         document.querySelectorAll("[id^=toggles1-anchor").forEach(anchor => {
             anchor.addEventListener("click", (e: MouseEvent) => {
-                togglesRegion!.setAttribute("anchor", (e.target as HTMLElement).id);
+                togglesRegion.setAttribute("anchor", (e.target as HTMLElement).id);
             });
         });
 
-        document
-            .getElementById("toggle-positions-horizontal")!
-            .addEventListener("click", (e: MouseEvent) => {
-                if (
-                    togglesRegion?.getAttribute("horizontal-default-position") === "right"
-                ) {
-                    togglesRegion!.setAttribute("horizontal-default-position", "left");
-                } else {
-                    togglesRegion!.setAttribute("horizontal-default-position", "right");
-                }
-            });
-
-        document
-            .getElementById("toggle-positions-vertical")!
-            .addEventListener("click", (e: MouseEvent) => {
-                if (togglesRegion?.getAttribute("vertical-default-position") === "top") {
-                    togglesRegion!.setAttribute("vertical-default-position", "bottom");
-                } else {
-                    togglesRegion!.setAttribute("vertical-default-position", "top");
-                }
-            });
-
-        document
-            .getElementById("toggle-inset-vertical")!
-            .addEventListener("click", (e: MouseEvent) => {
-                if (togglesRegion?.getAttribute("vertical-inset") === "true") {
-                    togglesRegion!.setAttribute("vertical-inset", "false");
-                } else {
-                    togglesRegion!.setAttribute("vertical-inset", "true");
-                }
-            });
-
-        document
-            .getElementById("toggle-inset-horizontal")!
-            .addEventListener("click", (e: MouseEvent) => {
-                if (togglesRegion?.getAttribute("horizontal-inset") === "true") {
-                    togglesRegion!.setAttribute("horizontal-inset", "false");
-                } else {
-                    togglesRegion!.setAttribute("horizontal-inset", "true");
-                }
-            });
+        [
+            {
+                id: "toggle-positions-horizontal",
+                attribute: "horizontal-default-position",
+                firstValue: "right",
+                secondValue: "left",
+            },
+            {
+                id: "toggle-positions-vertical",
+                attribute: "vertical-default-position",
+                firstValue: "top",
+                secondValue: "bottom",
+            },
+            {
+                id: "toggle-inset-vertical",
+                attribute: "vertical-inset",
+                firstValue: "true",
+                secondValue: "false",
+            },
+            {
+                id: "toggle-inset-horizontal",
+                attribute: "horizontal-inset",
+                firstValue: "true",
+                secondValue: "false",
+            },
+        ].forEach(({ id, attribute, firstValue, secondValue }) => {
+            const toggleElement = document.getElementById(id);
+            if (toggleElement) {
+                toggleElement.addEventListener("click", (e: MouseEvent) => {
+                    if (togglesRegion?.getAttribute(attribute) === firstValue) {
+                        togglesRegion.setAttribute(attribute, secondValue);
+                    } else {
+                        togglesRegion.setAttribute(attribute, firstValue);
+                    }
+                });
+            }
+        });
 
         document
             .querySelectorAll("[id^=anchor-menu-many]")
@@ -120,4 +118,3 @@ export default {
 };
 
 export const AnchoredRegion = () => AnchoredRegionTemplate;
-/* eslint-enable @typescript-eslint/no-non-null-assertion */