chore: overhaul example page(#194)

.vscode/snippets.code-snippets

@@ -0,0 +1,51 @@
+{
+  // General snippets
+  "Print to console": {
+    "scope": "javascript,typescript,typescriptreact",
+    "prefix": "log",
+    "body": ["console.log('$1', $1);"],
+    "description": "Log output to console"
+  },
+
+  "React component fluent": {
+    "prefix": "component:fluent",
+    "scope": "typescriptreact",
+    "body": [
+      "import { makeStyles, mergeClasses } from '@fluentui/react-components'",
+      "import React from 'react'",
+      "",
+      "const componentId = '${1/([A-Z][a-z]*)([A-Z][a-z]*)?([A-Z][a-z]*)?([A-Z][a-z]*)?/${1:/downcase}${2:+-}${2:/downcase}${3:+-}${3:/downcase}${4:+-}${4:/downcase}/}'",
+      "export const ${1/^(.)/${1:/downcase}/}ClassNames = {",
+      " root: componentId",
+      "}",
+      "",
+      "const useStyles = makeStyles({",
+      " root: {}",
+      "})",
+      "",
+      "type TUse${1:}Styles = {",
+      "  test: string",
+      "}",
+      "",
+      "export function use${1:}Styles({test}:TUse${1:}Styles ){",
+      " const styles = useStyles();",
+      " const rootStyle = mergeClasses(${1/^(.)/${1:/downcase}/}ClassNames.root, styles.root);",
+      " return {styles, rootStyle}",
+      "}",
+      "",
+      "type T${1:} = {",
+      "}",
+      "",
+      "export function ${1:}({ ...rest }:T${1:}){",
+      "  const {styles, rootStyle} = use${1:}Styles({test:''})",
+      "",
+      "  return (",
+      "    <div data-testid={componentId} className={rootStyle} {...rest}>",
+      "      Hello, this is ${1:} Component!",
+      "    </div>",
+      "  )",
+      "}"
+    ],
+    "description": "React component fluent"
+  }
+}

examples/src/App.tsx

@@ -3,11 +3,11 @@ import React, { useMemo } from "react";
 import { HashRouter, Route, Routes } from "react-router-dom";
 import { useAppContext } from "./context/ApplicationStateProvider";
 import { MainPage } from "./main-page";
-import { PageNotFound } from "./routing/page-not-found";
-import { getRouteByGroup, RouteGroup } from "./routing/route-map";
-import { routes } from "./routing/routes";
 import { useScrollStaticStyles } from "@axiscommunications/fluent-styles";
 import { WelcomePage } from "./landingpage";
+import { getRouteByGroup, RouteGroup } from "./routing/route-map";
+import { routes } from "./routing/routes";
+import { PageNotFound } from "./routing/page-not-found";
 
 export const App = () => {
   useScrollStaticStyles();

examples/src/components/navigation-menu/navigation-footer.tsx

@@ -0,0 +1,81 @@
+import {
+  Caption1,
+  Card,
+  CardHeader,
+  Link,
+  makeStyles,
+  mergeClasses,
+  shorthands,
+  Text,
+  tokens,
+} from "@fluentui/react-components";
+import React from "react";
+import { GitHubUrls } from "../../constants/constants";
+
+const componentId = "navigation-footer";
+export const navigationFooterClassNames = {
+  root: componentId,
+};
+
+const useStyles = makeStyles({
+  root: {
+    width: "100%",
+    backgroundImage:
+      `linear-gradient(90deg,${tokens.colorNeutralBackground1}0%,${tokens.colorNeutralBackground3}95%)`,
+    ":hover #gitIcon": {
+      transform: "scale(1.5) rotate(15deg)",
+      ...shorthands.transition("all", "250ms"),
+    },
+  },
+  title: {
+    ...shorthands.margin(0, 0, "12px"),
+  },
+  description: {
+    ...shorthands.margin(0, 0, "12px"),
+  },
+  caption: {
+    color: tokens.colorNeutralForeground3,
+  },
+});
+
+export function useNavigationFooterStyles() {
+  const styles = useStyles();
+  const rootStyle = mergeClasses(navigationFooterClassNames.root, styles.root);
+  return { styles, rootStyle };
+}
+
+export function NavigationFooter() {
+  const { styles, rootStyle } = useNavigationFooterStyles();
+
+  return (
+    <Card
+      data-testid={componentId}
+      className={rootStyle}
+    >
+      <CardHeader
+        image={
+          <Link href={GitHubUrls.home} id="gitIcon">
+            <svg
+              aria-hidden="true"
+              height="24"
+              version="1.1"
+              viewBox="0 0 16 16"
+              width="24"
+            >
+              <path
+                fill={tokens.colorBrandForeground1}
+                fillRule="evenodd"
+                d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"
+              >
+              </path>
+            </svg>
+          </Link>
+        }
+        header={<Text weight="semibold">fluent-components</Text>}
+        description={
+          <Caption1 className={styles.caption}>@axiscommunications</Caption1>
+        }
+      />
+    </Card>
+  );
+}

examples/src/components/navigation-menu/navigation-menu-list.tsx

@@ -0,0 +1,52 @@
+import { MenuList } from "@fluentui/react-components";
+import React, { useCallback, useMemo } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+
+import { NavigationMenuItem } from "./navigation-menu.item";
+import { getRouteByCategory, RouteCategory } from "../../routing/route-map";
+import { TRoute } from "../../routing/routes";
+
+const componentId = "navigation-menu-list";
+export const navigationMenuListClassNames = {
+  root: componentId,
+};
+
+type TNavigationMenuList = {
+  category: RouteCategory;
+};
+
+export function NavigationMenuList({ category, ...rest }: TNavigationMenuList) {
+  const routes = getRouteByCategory(category);
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+
+  const goTo = useCallback(
+    (route: TRoute) => {
+      navigate(route);
+    },
+    [navigate]
+  );
+
+  const renderMenuItems = useMemo(
+    () =>
+      Array.from(routes.entries()).map((entry) => {
+        const [key, [route, routeData]] = entry;
+        return (
+          <NavigationMenuItem
+            key={key}
+            onClick={() => goTo(route)}
+            selected={route === pathname}
+          >
+            {routeData.label}
+          </NavigationMenuItem>
+        );
+      }),
+    [routes]
+  );
+
+  return (
+    <MenuList data-testid={componentId} {...rest}>
+      {renderMenuItems}
+    </MenuList>
+  );
+}

examples/src/components/navigation-menu/navigation-menu.item.tsx

@@ -0,0 +1,56 @@
+import {
+  makeStyles,
+  MenuItem,
+  MenuItemProps,
+  mergeClasses,
+  tokens,
+} from "@fluentui/react-components";
+import React from "react";
+
+const componentId = "navigation-menu-item";
+export const navigationMenuItemClassNames = {
+  root: componentId,
+};
+
+const useStyles = makeStyles({
+  root: {
+    backgroundImage:
+      `linear-gradient(90deg,${tokens.colorNeutralBackground1}0%,${tokens.colorNeutralBackground3}95%)`,
+  },
+  selected: {
+    backgroundImage:
+      `linear-gradient(90deg,${tokens.colorNeutralBackground1}100%,${tokens.colorNeutralBackground3}0%)`,
+  },
+});
+
+type TUseNavigationMenuItemStyles = {
+  selected: boolean;
+};
+
+export function useNavigationMenuItemStyles(
+  { selected }: TUseNavigationMenuItemStyles
+) {
+  const styles = useStyles();
+  const rootStyle = mergeClasses(
+    navigationMenuItemClassNames.root,
+    styles.root,
+    selected && styles.selected
+  );
+  return { styles, rootStyle };
+}
+
+type TNavigationMenuItem = {
+  selected: boolean;
+} & MenuItemProps;
+
+export function NavigationMenuItem(
+  { children, selected, ...rest }: TNavigationMenuItem
+) {
+  const { rootStyle } = useNavigationMenuItemStyles({ selected });
+
+  return (
+    <MenuItem data-testid={componentId} className={rootStyle} {...rest}>
+      {children}
+    </MenuItem>
+  );
+}