feat(styles): add icon style to navigation style

It is decided that the navigation icon should be 20x20 so this commit
adds the style for the icon.
Also updates documentation and example code.

styles/src/navigation/navigation.styles.ts

@@ -1,20 +1,35 @@
 import { makeStyles, shorthands, tokens } from "@fluentui/react-components";
 
 /**
- * How to use:
+ * Expected appearance:
+ * - Tab has the same size as the "large" tab, 44x40
+ * - Icon is 20x20
+ * - Selected tab:
+ *    - icon color is colorNeutralForeground1
+ *    - background color is colorNeutralBackground3Selected
+ * - Padding: 
+ *    - 4px padding between tabs
+ *    - container has these paddings (top 24px, side 8px, bottom 16px)
+ * 
+ * How to create navigation:
  * ```
- * <div className={navStyles.container}>
- *   <TabList
- *     className={navStyles.tabList}
- *     size="large"
- *     vertical
- *   >
- *     <Tab />
- *     <Tab />
- *     <div className={navStyles.spacer}/>
- *     <Tab />
- *   </TabList>
- * </div>
+ * const navStyles = useNavigationStyles()
+ * const { rootStyle } = useTabStyles({ selected: true })
+ * 
+ * return (
+ *    <div className={navStyles.container}>
+ *      <TabList
+ *        className={navStyles.tabList}
+ *        size="large"
+ *        vertical
+ *      >
+ *        <Tab className={rootStyle} icon={{ className: navStyles.iconSize, children: <Icon /> }} />
+ *        <Tab className={rootStyle} icon={{ className: navStyles.iconSize, children: <Icon /> }} />
+ *        <div className={navStyles.spacer} />
+ *        <Tab className={rootStyle} icon={{ className: navStyles.iconSize, children: <Icon /> }} />
+ *      </TabList>
+ *    </div>
+ * )
  * ```
  */
 export const useNavigationStyles = makeStyles({
@@ -26,6 +41,9 @@ export const useNavigationStyles = makeStyles({
     ),
     backgroundColor: tokens.colorNeutralBackground4,
   },
+  iconSize: {
+    fontSize: '20px',
+  },
   spacer: {
     flexGrow: 1,
   },