Add storybook pages for Camera and ScreenShare buttons (#206)

change/react-components-3d449b03-a297-4cd6-8788-7d2c1223d608.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Update button docstrings",
+  "packageName": "react-components",
+  "email": "prprabhu@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/src/components/CameraButton.tsx

@@ -19,6 +19,7 @@ export interface CameraButtonProps extends IButtonProps {
 /**
  * `CameraButton` allows you to easily create a component for rendering a camera button.
  * It can be used in your ControlBar component for example.
+ *
  * @param props - of type CameraButtonProps
  */
 export const CameraButton = (props: CameraButtonProps): JSX.Element => {

packages/react-components/src/components/ScreenShareButton.tsx

@@ -19,6 +19,7 @@ export interface ScreenShareButtonProps extends IButtonProps {
 /**
  * `ScreenShareButton` allows you to easily create a component for rendering a screen-share button.
  * It can be used in your ControlBar component for example.
+ *
  * @param props - of type ScreenShareButtonProps
  */
 export const ScreenShareButton = (props: ScreenShareButtonProps): JSX.Element => {

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

@@ -0,0 +1,88 @@
+// © Microsoft Corporation. All rights reserved.
+
+import { Canvas, Description, Heading, Props, Source, SourceState, Title } from '@storybook/addon-docs/blocks';
+import { boolean } from '@storybook/addon-knobs';
+import { Meta } from '@storybook/react/types-6-0';
+import React from 'react';
+import { CameraButton } from 'react-components';
+
+import { COMPONENT_FOLDER_PREFIX } from '../../../constants';
+import { CustomCameraButtonExample } from './snippets/Custom.snippet';
+import { CameraButtonExample } from './snippets/Default.snippet';
+import { CameraButtonWithLabelExample } from './snippets/WithLabel.snippet';
+
+const ButtonWithLabelExampleText = require('!!raw-loader!./snippets/WithLabel.snippet.tsx').default;
+const CustomButtonExampleText = require('!!raw-loader!./snippets/Custom.snippet.tsx').default;
+const DefaultButtonExampleText = require('!!raw-loader!./snippets/Default.snippet.tsx').default;
+
+const importStatement = `
+import { CameraButton } from '@azure/communication-ui';
+`;
+
+const getDocs: () => JSX.Element = () => {
+  return (
+    <>
+      <Title>CameraButton</Title>
+      <Description of={CameraButton} />
+
+      <Heading>Importing</Heading>
+      <Source code={importStatement} />
+
+      <Heading>Example</Heading>
+      <Description>
+        The default `CameraButton` component shows a Camera icon with no label. The following example displays the
+        `CameraButton` with camera turned on and off.
+      </Description>
+      <Canvas withSource={SourceState.NONE}>
+        <CameraButtonExample />
+      </Canvas>
+      <Source code={DefaultButtonExampleText} />
+
+      <Heading>Camera with default label</Heading>
+      <Description>
+        You can display the button label which, by default, will show below the icon as `Turn on` or `Turn off`.
+      </Description>
+      <Canvas withSource={SourceState.NONE}>
+        <CameraButtonWithLabelExample />
+      </Canvas>
+      <Source code={ButtonWithLabelExampleText} />
+
+      <Heading>Custom CameraButton Styles</Heading>
+      <Description>
+        You can change the styles of the `CameraButton` as you would customized any Button (styles, primary,
+        onRenderIcon, onRenderText, etc... ).
+      </Description>
+      <Canvas withSource={SourceState.NONE}>
+        <CustomCameraButtonExample />
+      </Canvas>
+      <Source code={CustomButtonExampleText} />
+
+      <Heading>CameraButton Props</Heading>
+      <Description>
+        `CameraButton` features all props a [FluentUI
+        Button](https://developer.microsoft.com/en-us/fluentui#/controls/web/button) offers, with the following
+        additional properties:
+      </Description>
+      <Props of={CameraButton} />
+    </>
+  );
+};
+
+// This must be the only named export from this module, and must be named to match the storybook path suffix.
+// This ensures that storybook hoists the story instead of creating a folder with a single entry.
+export const Camera = (): JSX.Element => {
+  const toggleButtons = boolean('Toggle Buttons', false);
+  const showLabels = boolean('Show Labels', false);
+
+  return <CameraButton showLabel={showLabels} checked={toggleButtons} />;
+};
+
+export default {
+  title: `${COMPONENT_FOLDER_PREFIX}/ControlBar/Buttons/Camera`,
+  component: CameraButton,
+  parameters: {
+    docs: {
+      page: () => getDocs()
+    }
+  }
+} as Meta;

packages/storybook/stories/ControlBar/Buttons/Camera/snippets/Custom.snippet.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { IButtonProps, Icon, Label, Stack, Text } from '@fluentui/react';
+import { CameraButton } from 'react-components';
+
+export const CustomCameraButtonExample: () => JSX.Element = () => {
+  const customOnRenderIcon = (props?: IButtonProps): JSX.Element => {
+    if (props?.checked) {
+      return <Icon iconName={'Camera'} style={{ color: 'green', fontSize: '25px' }} />;
+    }
+
+    return <Icon iconName={'Camera'} style={{ color: 'red', fontSize: '25px', fontWeight: 'bolder' }} />;
+  };
+
+  const customOnRenderText = (props?: IButtonProps): JSX.Element => {
+    if (props?.checked) {
+      return <Label style={{ fontStyle: 'italic' }}>Turn off</Label>;
+    }
+
+    return <Label>Turn on</Label>;
+  };
+
+  return (
+    <Stack horizontal horizontalAlign={'center'}>
+      <CameraButton
+        checked={true}
+        showLabel={true}
+        onRenderIcon={customOnRenderIcon}
+        onRenderText={customOnRenderText}
+      />
+      <CameraButton showLabel={true} onRenderIcon={customOnRenderIcon} onRenderText={customOnRenderText} />
+    </Stack>
+  );
+};

packages/storybook/stories/ControlBar/Buttons/Camera/snippets/Default.snippet.tsx

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

packages/storybook/stories/ControlBar/Buttons/Camera/snippets/WithLabel.snippet.tsx

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

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

@@ -1,11 +1,16 @@
 // © Microsoft Corporation. All rights reserved.
 
 import { Canvas, Description, Heading, Props, Source, SourceState, Title } from '@storybook/addon-docs/blocks';
+import { boolean } from '@storybook/addon-knobs';
+import { Meta } from '@storybook/react/types-6-0';
 import React from 'react';
 import { MicrophoneButton } from 'react-components';
+
+import { COMPONENT_FOLDER_PREFIX } from '../../../constants';
 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;
@@ -15,7 +20,7 @@ const importStatement = `
 import { MicrophoneButton } from 'react-components';
 `;
 
-export const getDocs: () => JSX.Element = () => {
+const getDocs: () => JSX.Element = () => {
   return (
     <>
       <Title>MicrophoneButton</Title>
@@ -63,3 +68,22 @@ export const getDocs: () => JSX.Element = () => {
     </>
   );
 };
+
+// This must be the only named export from this module, and must be named to match the storybook path suffix.
+// This ensures that storybook hoists the story instead of creating a folder with a single entry.
+export const Microphone = (): 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/Microphone`,
+  component: MicrophoneButton,
+  parameters: {
+    docs: {
+      page: () => getDocs()
+    }
+  }
+} as Meta;

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { MicrophoneButton } from 'react-components';
 import { Stack } from '@fluentui/react';
+import { MicrophoneButton } from 'react-components';
 
 export const MicrophoneButtonExample: () => JSX.Element = () => {
   return (

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { MicrophoneButton } from 'react-components';
 import { Stack } from '@fluentui/react';
+import { MicrophoneButton } from 'react-components';
 
 export const MicrophoneButtonWithLabelExample: () => JSX.Element = () => {
   return (

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

@@ -1,25 +0,0 @@
-// © Microsoft Corporation. All rights reserved.
-
-import { Meta } from '@storybook/react/types-6-0';
-import React from 'react';
-import { MicrophoneButton } from 'react-components';
-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/ScreenShare/ScreenShare.stories.tsx

@@ -0,0 +1,90 @@
+// © Microsoft Corporation. All rights reserved.
+
+import { Canvas, Description, Heading, Props, Source, SourceState, Title } from '@storybook/addon-docs/blocks';
+import { boolean } from '@storybook/addon-knobs';
+import { Meta } from '@storybook/react/types-6-0';
+import React from 'react';
+import { ScreenShareButton } from 'react-components';
+
+import { COMPONENT_FOLDER_PREFIX } from '../../../constants';
+import { CustomScreenShareButtonExample } from './snippets/Custom.snippet';
+import { ScreenShareButtonExample } from './snippets/Default.snippet';
+import { ScreenShareButtonWithLabelExample } from './snippets/WithLabel.snippet';
+
+const ButtonWithLabelExampleText = require('!!raw-loader!./snippets/WithLabel.snippet.tsx').default;
+const CustomButtonExampleText = require('!!raw-loader!./snippets/Custom.snippet.tsx').default;
+const DefaultButtonExampleText = require('!!raw-loader!./snippets/Default.snippet.tsx').default;
+
+const importStatement = `
+import { ScreenShareButton } from '@azure/communication-ui';
+`;
+
+const getDocs: () => JSX.Element = () => {
+  return (
+    <>
+      <Title>ScreenShareButton</Title>
+      <Description of={ScreenShareButton} />
+
+      <Heading>Importing</Heading>
+      <Source code={importStatement} />
+
+      <Heading>Example</Heading>
+      <Description>
+        The default `ScreenShareButton` component shows a ScreenShare icon with no label. The following example displays
+        the `ScreenShareButton` with screen sharing enabled and disabled.
+      </Description>
+      <Canvas withSource={SourceState.NONE}>
+        <ScreenShareButtonExample />
+      </Canvas>
+      <Source code={DefaultButtonExampleText} />
+
+      <Heading>ScreenShare with default label</Heading>
+      <Description>
+        You can display the button label which, by default, will show below the icon as `Share` or `Stop`.
+      </Description>
+      <Canvas withSource={SourceState.NONE}>
+        <ScreenShareButtonWithLabelExample />
+      </Canvas>
+      <Source code={ButtonWithLabelExampleText} />
+
+      <Heading>Custom ScreenShareButton Styles</Heading>
+      <Description>
+        You can change the styles of the `ScreenShareButton` as you would customized any Button (styles, primary,
+        onRenderIcon, onRenderText, etc... ).
+      </Description>
+      <Canvas withSource={SourceState.NONE}>
+        <CustomScreenShareButtonExample />
+      </Canvas>
+      <Source code={CustomButtonExampleText} />
+
+      <Heading>ScreenShareButton Props</Heading>
+      <Description>
+        `ScreenShareButton` features all props a [FluentUI
+        Button](https://developer.microsoft.com/en-us/fluentui#/controls/web/button) offers, with the following
+        additional properties:
+      </Description>
+      <Props of={ScreenShareButton} />
+    </>
+  );
+};
+
+// This must be the only named export from this module, and must be named to match the storybook path suffix.
+// This ensures that storybook hoists the story instead of creating a folder with a single entry.
+export const ScreenShare = (): JSX.Element => {
+  const toggleButtons = boolean('Toggle Buttons', false);
+  const showLabels = boolean('Show Labels', false);
+
+  return <ScreenShareButton showLabel={showLabels} checked={toggleButtons} />;
+};
+
+export default {
+  // Space in the name is required to match storybook's matching with the camel case component name:
+  // ScreenShare -> Screen Share
+  title: `${COMPONENT_FOLDER_PREFIX}/ControlBar/Buttons/Screen Share`,
+  component: ScreenShareButton,
+  parameters: {
+    docs: {
+      page: () => getDocs()
+    }
+  }
+} as Meta;

packages/storybook/stories/ControlBar/Buttons/ScreenShare/snippets/Custom.snippet.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { IButtonProps, Icon, Label, Stack, Text } from '@fluentui/react';
+import { ScreenShareButton } from 'react-components';
+
+export const CustomScreenShareButtonExample: () => JSX.Element = () => {
+  const customOnRenderIcon = (props?: IButtonProps): JSX.Element => {
+    if (props?.checked) {
+      return <Icon iconName={'Presentation'} style={{ color: 'green', fontSize: '25px' }} />;
+    }
+
+    return <Icon iconName={'Presentation'} style={{ color: 'red', fontSize: '25px', fontWeight: 'bolder' }} />;
+  };
+
+  const customOnRenderText = (props?: IButtonProps): JSX.Element => {
+    if (props?.checked) {
+      return <Label style={{ fontStyle: 'italic' }}>sharing screen</Label>;
+    }
+
+    return <Label>not sharing screen</Label>;
+  };
+
+  return (
+    <Stack horizontal horizontalAlign={'center'}>
+      <ScreenShareButton
+        checked={true}
+        showLabel={true}
+        onRenderIcon={customOnRenderIcon}
+        onRenderText={customOnRenderText}
+      />
+      <ScreenShareButton showLabel={true} onRenderIcon={customOnRenderIcon} onRenderText={customOnRenderText} />
+    </Stack>
+  );
+};

packages/storybook/stories/ControlBar/Buttons/ScreenShare/snippets/Default.snippet.tsx

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

packages/storybook/stories/ControlBar/Buttons/ScreenShare/snippets/WithLabel.snippet.tsx

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