Alcail/control bar btn docs - MicrophoneButton (#198)

* add MicrophoneButton documentation

* Change files

* fix quote issue in docs

* move MicrophoneButton docs under ControlBar folder

* flatten Buttons hierarchy under ControlBar

change/@azure-communication-ui-a6330edd-5a45-40e8-b01b-131b826fd1c2.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "add documentation for MicrophoneButton Component",
+  "packageName": "@azure/communication-ui",
+  "email": "alcail@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/communication-ui/src/components/MicrophoneButton.tsx

@@ -26,15 +26,15 @@ export const MicrophoneButton = (props: MicrophoneButtonProps): JSX.Element => {
 
   const defaultRenderIcon = (props?: IButtonProps): JSX.Element => {
     if (props?.checked) {
-      return <MicIcon />;
+      return <MicIcon key={'micIconKey'} />;
     }
 
-    return <MicOffIcon />;
+    return <MicOffIcon key={'micOffIconKey'} />;
   };
 
   const defaultRenderText = (props?: IButtonProps): JSX.Element => {
     return (
-      <Stack className={mergeStyles(controlButtonLabelStyles, props?.styles?.label)}>
+      <Stack key={'microphoneLabelKey'} className={mergeStyles(controlButtonLabelStyles, props?.styles?.label)}>
         {props?.checked ? 'Mute' : 'Unmute'}
       </Stack>
     );

packages/storybook/stories/ControlBar/Buttons/MicrophoneButton/MicrophoneButton.stories.tsx

@@ -0,0 +1,25 @@
+// © Microsoft Corporation. All rights reserved.
+
+import { Meta } from '@storybook/react/types-6-0';
+import React from 'react';
+import { MicrophoneButton } from '@azure/communication-ui';
+import { boolean } from '@storybook/addon-knobs';
+import { getDocs } from './MicrophoneButtonDocs';
+import { COMPONENT_FOLDER_PREFIX } from '../../../constants';
+
+export const MicrophoneButtonComponent = (): JSX.Element => {
+  const toggleButtons = boolean('Toggle Buttons', false);
+  const showLabels = boolean('Show Labels', false);
+
+  return <MicrophoneButton showLabel={showLabels} checked={toggleButtons} />;
+};
+
+export default {
+  title: `${COMPONENT_FOLDER_PREFIX}/ControlBar/Buttons`,
+  component: MicrophoneButton,
+  parameters: {
+    docs: {
+      page: () => getDocs()
+    }
+  }
+} as Meta;

packages/storybook/stories/ControlBar/Buttons/MicrophoneButton/MicrophoneButtonDocs.tsx

@@ -0,0 +1,65 @@
+// © Microsoft Corporation. All rights reserved.
+
+import { Canvas, Description, Heading, Props, Source, SourceState, Title } from '@storybook/addon-docs/blocks';
+import React from 'react';
+import { MicrophoneButton } from '@azure/communication-ui';
+import { MicrophoneButtonExample } from './snippets/MicrophoneButton.snippet';
+import { MicrophoneButtonWithLabelExample } from './snippets/MicrophoneButtonWithLabel.snippet';
+import { CustomMicrophoneButtonExample } from './snippets/CustomMicrophoneButton.snippet';
+const MicrophoneButtonExampleText = require('!!raw-loader!./snippets/MicrophoneButton.snippet.tsx').default;
+const MicrophoneButtonWithLabelExampleText = require('!!raw-loader!./snippets/MicrophoneButtonWithLabel.snippet.tsx')
+  .default;
+const CustomMicrophoneButtonExampleText = require('!!raw-loader!./snippets/CustomMicrophoneButton.snippet.tsx').default;
+
+const importStatement = `
+import { MicrophoneButton } from '@azure/communication-ui';
+`;
+
+export const getDocs: () => JSX.Element = () => {
+  return (
+    <>
+      <Title>MicrophoneButton</Title>
+      <Description of={MicrophoneButton} />
+
+      <Heading>Importing</Heading>
+      <Source code={importStatement} />
+
+      <Heading>Example</Heading>
+      <Description>
+        The default `MicrophoneButton` component shows a microphone icon with no label. The following example displays
+        an unmuted `MicrophoneButton` and a muted `MicrophoneButton`.
+      </Description>
+      <Canvas withSource={SourceState.NONE}>
+        <MicrophoneButtonExample />
+      </Canvas>
+      <Source code={MicrophoneButtonExampleText} />
+
+      <Heading>Microphone with default label</Heading>
+      <Description>
+        You can display the button label which, by default, will show below the icon as `Mute` or `Unmute`.
+      </Description>
+      <Canvas withSource={SourceState.NONE}>
+        <MicrophoneButtonWithLabelExample />
+      </Canvas>
+      <Source code={MicrophoneButtonWithLabelExampleText} />
+
+      <Heading>Custom MicrophoneButton Styles</Heading>
+      <Description>
+        You can change the styles of the `MicrophoneButton` as you would customized any Button (styles, primary,
+        onRenderIcon, onRenderText, etc... ).
+      </Description>
+      <Canvas withSource={SourceState.NONE}>
+        <CustomMicrophoneButtonExample />
+      </Canvas>
+      <Source code={CustomMicrophoneButtonExampleText} />
+
+      <Heading>MicrophoneButton Props</Heading>
+      <Description>
+        `MicrophoneButton` features all props a [FluentUI
+        Button](https://developer.microsoft.com/en-us/fluentui#/controls/web/button) offers, with the additional
+        following properties.
+      </Description>
+      <Props of={MicrophoneButton} />
+    </>
+  );
+};

packages/storybook/stories/ControlBar/Buttons/MicrophoneButton/snippets/CustomMicrophoneButton.snippet.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { IButtonProps, Icon, Label, Stack, Text } from '@fluentui/react';
+import { MicrophoneButton } from '@azure/communication-ui';
+
+export const CustomMicrophoneButtonExample: () => JSX.Element = () => {
+  const customOnRenderIcon = (props?: IButtonProps): JSX.Element => {
+    if (props?.checked) {
+      return <Icon key={'micCustomIcon1'} iconName={'Microphone'} style={{ color: 'green', fontSize: '25px' }} />;
+    }
+
+    return (
+      <Icon
+        key={'micCustomIcon2'}
+        iconName={'Microphone'}
+        style={{ color: 'red', fontSize: '25px', fontWeight: 'bolder' }}
+      />
+    );
+  };
+
+  const customOnRenderText = (props?: IButtonProps): JSX.Element => {
+    if (props?.checked) {
+      return (
+        <Text key={'micCustomText'} style={{ fontStyle: 'italic' }}>
+          unmuted
+        </Text>
+      );
+    }
+
+    return <Label key={'micCustomLabel'}>muted</Label>;
+  };
+
+  return (
+    <Stack horizontal horizontalAlign={'center'}>
+      <MicrophoneButton
+        key={'micCustomBtn1'}
+        checked={true}
+        showLabel={true}
+        onRenderIcon={customOnRenderIcon}
+        onRenderText={customOnRenderText}
+      />
+      <MicrophoneButton
+        key={'micCustomBtn2'}
+        showLabel={true}
+        onRenderIcon={customOnRenderIcon}
+        onRenderText={customOnRenderText}
+      />
+    </Stack>
+  );
+};

packages/storybook/stories/ControlBar/Buttons/MicrophoneButton/snippets/MicrophoneButton.snippet.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { MicrophoneButton } from '@azure/communication-ui';
+import { Stack } from '@fluentui/react';
+
+export const MicrophoneButtonExample: () => JSX.Element = () => {
+  return (
+    <Stack horizontal horizontalAlign={'center'}>
+      <MicrophoneButton key={'micBtn1'} checked={true} />
+      <MicrophoneButton key={'micBtn2'} />
+    </Stack>
+  );
+};

packages/storybook/stories/ControlBar/Buttons/MicrophoneButton/snippets/MicrophoneButtonWithLabel.snippet.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { MicrophoneButton } from '@azure/communication-ui';
+import { Stack } from '@fluentui/react';
+
+export const MicrophoneButtonWithLabelExample: () => JSX.Element = () => {
+  return (
+    <Stack horizontal horizontalAlign={'center'}>
+      <MicrophoneButton showLabel={true} checked={true} />
+    </Stack>
+  );
+};