Add custom icon documentation to storybook (#1171)

* Init

* Change files

* Add custom icon documentation to storybook

* Fixing linting

* Nit fixes

* Resolving PR comments

* Resolving PR comments

Author: anjulgarg

change/@internal-storybook-5d1cdb86-9b3c-4817-8f27-7ec287a29c42.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add custom icon documentation to storybook",
+  "packageName": "@internal/storybook",
+  "email": "anjulgarg@live.com",
+  "dependentChangeType": "patch"
+}

packages/storybook/.storybook/preview.tsx

@@ -67,6 +67,7 @@ export const parameters = {
         [        
         'Styling',
         'Theming',
+        'Icons',
         'Localization',
         'Accessibility',
         'Custom User Data Model',

packages/storybook/stories/CustomIcons/IconGrid.tsx

@@ -0,0 +1,69 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import { mergeStyles, Stack, TextField } from '@fluentui/react';
+import React, { useState } from 'react';
+
+const IconGrid = (props: { allIcons: Record<string, JSX.Element>; searchText?: string }): JSX.Element => {
+  const { allIcons, searchText } = props;
+  const allIconKeys = Object.keys(allIcons).sort();
+  const filteredKeys = searchText
+    ? allIconKeys.filter((k) => k.toLowerCase().includes(searchText.toLowerCase()))
+    : allIconKeys;
+
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: 'auto auto auto', padding: '1rem 0' }}>
+      {filteredKeys.map((key, idx) => {
+        return (
+          <Stack
+            key={idx}
+            horizontal
+            style={{
+              padding: '0.5rem 0'
+            }}
+            verticalAlign="center"
+          >
+            <Stack horizontalAlign="start" className={mergeStyles({ span: { fontSize: '1rem', lineHeight: 0 } })}>
+              {allIcons[key]}
+            </Stack>
+            <Stack
+              horizontalAlign="start"
+              style={{
+                paddingLeft: '0.5rem',
+                fontSize: '0.75rem',
+                fontFamily: 'consolas'
+              }}
+            >
+              {key}
+            </Stack>
+          </Stack>
+        );
+      })}
+    </div>
+  );
+};
+
+const SearchBar = (props: { onChange: (newValue?: string) => void }): JSX.Element => {
+  const { onChange } = props;
+  return (
+    <Stack style={{ padding: '1rem 0' }} horizontalAlign="start">
+      <TextField
+        label="Search Icons:"
+        underlined
+        onChange={(e, val) => {
+          onChange(val);
+        }}
+      />
+    </Stack>
+  );
+};
+
+export const IconGridWithSearch = (props: { icons: Record<string, JSX.Element> }): JSX.Element => {
+  const { icons } = props;
+  const [searchText, setSearchText] = useState<string | undefined>(undefined);
+  return (
+    <Stack>
+      <SearchBar onChange={(val) => setSearchText(val)} />
+      <IconGrid allIcons={icons} searchText={searchText} />
+    </Stack>
+  );
+};

packages/storybook/stories/CustomIcons/Icons.stories.mdx

@@ -0,0 +1,83 @@
+import { DEFAULT_COMPONENT_ICONS, DEFAULT_COMPOSITE_ICONS } from '@azure/communication-react';
+import { Meta, Canvas, Source } from '@storybook/addon-docs';
+import { IconGridWithSearch } from './IconGrid';
+
+<Meta id="icons" title="Concepts/Icons" />
+
+# Icons
+
+Both the Composites and the Components use a set of default icons from the Fluent UI library. All the icons used in Components and Composites are displayed below with their names.
+
+**All the default icons can be replaced with a custom icon by providing a custom JSX element.**
+The method for providing custom icons differs between composites and components. Please read below for more details about each.
+
+## Composites
+
+There is no setup required for rendering icons inside the Composites.
+
+### Custom Icons
+
+All Composites expose a prop `icons` that allows you to override the default icons used inside Composites.
+
+Here is a sample code showcasing how you can override an icon used inside Composites with custom icons.
+
+<Source
+  language="tsx"
+  code={`
+<CallComposite
+  adapter={adapter}
+  icons={{
+    LocalDeviceSettingsCamera: <p>My Custom Icon</p>
+  }}
+/>
+  `}
+/>
+
+### Default Composite Icons
+
+Below is a list of all the default icons you can override in Composites with their names.
+
+<Canvas withSource="none">
+  <IconGridWithSearch icons={DEFAULT_COMPOSITE_ICONS} />
+</Canvas>
+
+## Components
+
+Before you can render icons in Components, you will need to setup the icons using the `registerIcons` method as shown below.
+
+<Source
+  language="tsx"
+  code={`
+import { registerIcons } from '@fluentui/react';
+import { DEFAULT_COMPONENT_ICONS } from '@azure/communication-react';
+//
+// If you don't want to provide custom icons, you can register the default ones included with the library.
+// This will ensure that all the icons are rendered correctly.
+//
+registerIcons({ icons: DEFAULT_COMPONENT_ICONS });
+  `}
+/>
+
+### Custom Icons
+
+For overriding a default icon, you can provide a custom react element as shown in the example below.
+
+<Source
+  language="tsx"
+  code={`
+import { registerIcons } from '@fluentui/react';
+import { DEFAULT_COMPONENT_ICONS } from '@azure/communication-react';
+const customIcons = {...DEFAULT_COMPONENT_ICONS, {
+  ControlButtonCameraOff: <p>My Custom Icon</p>
+}};
+registerIcons({ icons: customIcons });
+  `}
+/>
+
+### Default Component Icons
+
+Below is a list of all the default icons you can override in Components with their names.
+
+<Canvas withSource="none">
+  <IconGridWithSearch icons={DEFAULT_COMPONENT_ICONS} />
+</Canvas>