From 38abd69468f5cb23fe9485ca97222acab103c315 Mon Sep 17 00:00:00 2001
From: Prathmesh Prabhu <82062616+prprabhu-ms@users.noreply.github.com>
Date: Wed, 5 May 2021 10:00:34 -0700
Subject: [PATCH] Add storybook pages for Camera and ScreenShare buttons (#206)
---
...-3d449b03-a297-4cd6-8788-7d2c1223d608.json | 7 ++
.../src/components/CameraButton.tsx | 1 +
.../src/components/ScreenShareButton.tsx | 1 +
.../Buttons/Camera/Camera.stories.tsx | 88 ++++++++++++++++++
.../Camera/snippets/Custom.snippet.tsx | 33 +++++++
.../Camera/snippets/Default.snippet.tsx | 12 +++
.../Camera/snippets/WithLabel.snippet.tsx | 11 +++
.../Microphone.stories.tsx} | 26 +++++-
.../CustomMicrophoneButton.snippet.tsx | 0
.../snippets/MicrophoneButton.snippet.tsx | 2 +-
.../MicrophoneButtonWithLabel.snippet.tsx | 2 +-
.../MicrophoneButton.stories.tsx | 25 ------
.../ScreenShare/ScreenShare.stories.tsx | 90 +++++++++++++++++++
.../ScreenShare/snippets/Custom.snippet.tsx | 33 +++++++
.../ScreenShare/snippets/Default.snippet.tsx | 12 +++
.../snippets/WithLabel.snippet.tsx | 11 +++
16 files changed, 326 insertions(+), 28 deletions(-)
create mode 100644 change/react-components-3d449b03-a297-4cd6-8788-7d2c1223d608.json
create mode 100644 packages/storybook/stories/ControlBar/Buttons/Camera/Camera.stories.tsx
create mode 100644 packages/storybook/stories/ControlBar/Buttons/Camera/snippets/Custom.snippet.tsx
create mode 100644 packages/storybook/stories/ControlBar/Buttons/Camera/snippets/Default.snippet.tsx
create mode 100644 packages/storybook/stories/ControlBar/Buttons/Camera/snippets/WithLabel.snippet.tsx
rename packages/storybook/stories/ControlBar/Buttons/{MicrophoneButton/MicrophoneButtonDocs.tsx => Microphone/Microphone.stories.tsx} (75%)
rename packages/storybook/stories/ControlBar/Buttons/{MicrophoneButton => Microphone}/snippets/CustomMicrophoneButton.snippet.tsx (100%)
rename packages/storybook/stories/ControlBar/Buttons/{MicrophoneButton => Microphone}/snippets/MicrophoneButton.snippet.tsx (100%)
rename packages/storybook/stories/ControlBar/Buttons/{MicrophoneButton => Microphone}/snippets/MicrophoneButtonWithLabel.snippet.tsx (100%)
delete mode 100644 packages/storybook/stories/ControlBar/Buttons/MicrophoneButton/MicrophoneButton.stories.tsx
create mode 100644 packages/storybook/stories/ControlBar/Buttons/ScreenShare/ScreenShare.stories.tsx
create mode 100644 packages/storybook/stories/ControlBar/Buttons/ScreenShare/snippets/Custom.snippet.tsx
create mode 100644 packages/storybook/stories/ControlBar/Buttons/ScreenShare/snippets/Default.snippet.tsx
create mode 100644 packages/storybook/stories/ControlBar/Buttons/ScreenShare/snippets/WithLabel.snippet.tsx
diff --git a/change/react-components-3d449b03-a297-4cd6-8788-7d2c1223d608.json b/change/react-components-3d449b03-a297-4cd6-8788-7d2c1223d608.json
new file mode 100644
index 0000000000..dc0588f688
--- /dev/null
+++ b/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"
+}
diff --git a/packages/react-components/src/components/CameraButton.tsx b/packages/react-components/src/components/CameraButton.tsx
index 5c93a75734..7a6def3bfe 100644
--- a/packages/react-components/src/components/CameraButton.tsx
+++ b/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 => {
diff --git a/packages/react-components/src/components/ScreenShareButton.tsx b/packages/react-components/src/components/ScreenShareButton.tsx
index 94618c8a83..0dcc4c0685 100644
--- a/packages/react-components/src/components/ScreenShareButton.tsx
+++ b/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 => {
diff --git a/packages/storybook/stories/ControlBar/Buttons/Camera/Camera.stories.tsx b/packages/storybook/stories/ControlBar/Buttons/Camera/Camera.stories.tsx
new file mode 100644
index 0000000000..e5866c21e8
--- /dev/null
+++ b/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 (
+ <>
+
CameraButton
+
+
+ Importing
+
+
+ Example
+
+ The default `CameraButton` component shows a Camera icon with no label. The following example displays the
+ `CameraButton` with camera turned on and off.
+
+
+
+
+ Camera with default label
+
+ You can display the button label which, by default, will show below the icon as `Turn on` or `Turn off`.
+
+
+
+
+ Custom CameraButton Styles
+
+ You can change the styles of the `CameraButton` as you would customized any Button (styles, primary,
+ onRenderIcon, onRenderText, etc... ).
+
+
+
+
+ CameraButton Props
+
+ `CameraButton` features all props a [FluentUI
+ Button](https://developer.microsoft.com/en-us/fluentui#/controls/web/button) offers, with the following
+ additional properties:
+
+
+ >
+ );
+};
+
+// 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 ;
+};
+
+export default {
+ title: `${COMPONENT_FOLDER_PREFIX}/ControlBar/Buttons/Camera`,
+ component: CameraButton,
+ parameters: {
+ docs: {
+ page: () => getDocs()
+ }
+ }
+} as Meta;
diff --git a/packages/storybook/stories/ControlBar/Buttons/Camera/snippets/Custom.snippet.tsx b/packages/storybook/stories/ControlBar/Buttons/Camera/snippets/Custom.snippet.tsx
new file mode 100644
index 0000000000..b3f80b8ef4
--- /dev/null
+++ b/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 ;
+ }
+
+ return ;
+ };
+
+ const customOnRenderText = (props?: IButtonProps): JSX.Element => {
+ if (props?.checked) {
+ return ;
+ }
+
+ return ;
+ };
+
+ return (
+
+
+
+
+ );
+};
diff --git a/packages/storybook/stories/ControlBar/Buttons/Camera/snippets/Default.snippet.tsx b/packages/storybook/stories/ControlBar/Buttons/Camera/snippets/Default.snippet.tsx
new file mode 100644
index 0000000000..0a5dbfac97
--- /dev/null
+++ b/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 (
+
+
+
+
+ );
+};
diff --git a/packages/storybook/stories/ControlBar/Buttons/Camera/snippets/WithLabel.snippet.tsx b/packages/storybook/stories/ControlBar/Buttons/Camera/snippets/WithLabel.snippet.tsx
new file mode 100644
index 0000000000..c1c6b6c9e3
--- /dev/null
+++ b/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 (
+
+
+
+ );
+};
diff --git a/packages/storybook/stories/ControlBar/Buttons/MicrophoneButton/MicrophoneButtonDocs.tsx b/packages/storybook/stories/ControlBar/Buttons/Microphone/Microphone.stories.tsx
similarity index 75%
rename from packages/storybook/stories/ControlBar/Buttons/MicrophoneButton/MicrophoneButtonDocs.tsx
rename to packages/storybook/stories/ControlBar/Buttons/Microphone/Microphone.stories.tsx
index b55f12c631..d26b18d0e4 100644
--- a/packages/storybook/stories/ControlBar/Buttons/MicrophoneButton/MicrophoneButtonDocs.tsx
+++ b/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 (
<>
MicrophoneButton
@@ -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 ;
+};
+
+export default {
+ title: `${COMPONENT_FOLDER_PREFIX}/ControlBar/Buttons/Microphone`,
+ component: MicrophoneButton,
+ parameters: {
+ docs: {
+ page: () => getDocs()
+ }
+ }
+} as Meta;
diff --git a/packages/storybook/stories/ControlBar/Buttons/MicrophoneButton/snippets/CustomMicrophoneButton.snippet.tsx b/packages/storybook/stories/ControlBar/Buttons/Microphone/snippets/CustomMicrophoneButton.snippet.tsx
similarity index 100%
rename from packages/storybook/stories/ControlBar/Buttons/MicrophoneButton/snippets/CustomMicrophoneButton.snippet.tsx
rename to packages/storybook/stories/ControlBar/Buttons/Microphone/snippets/CustomMicrophoneButton.snippet.tsx
diff --git a/packages/storybook/stories/ControlBar/Buttons/MicrophoneButton/snippets/MicrophoneButton.snippet.tsx b/packages/storybook/stories/ControlBar/Buttons/Microphone/snippets/MicrophoneButton.snippet.tsx
similarity index 100%
rename from packages/storybook/stories/ControlBar/Buttons/MicrophoneButton/snippets/MicrophoneButton.snippet.tsx
rename to packages/storybook/stories/ControlBar/Buttons/Microphone/snippets/MicrophoneButton.snippet.tsx
index 9e33a0edb3..cd77e4480d 100644
--- a/packages/storybook/stories/ControlBar/Buttons/MicrophoneButton/snippets/MicrophoneButton.snippet.tsx
+++ b/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 (
diff --git a/packages/storybook/stories/ControlBar/Buttons/MicrophoneButton/snippets/MicrophoneButtonWithLabel.snippet.tsx b/packages/storybook/stories/ControlBar/Buttons/Microphone/snippets/MicrophoneButtonWithLabel.snippet.tsx
similarity index 100%
rename from packages/storybook/stories/ControlBar/Buttons/MicrophoneButton/snippets/MicrophoneButtonWithLabel.snippet.tsx
rename to packages/storybook/stories/ControlBar/Buttons/Microphone/snippets/MicrophoneButtonWithLabel.snippet.tsx
index 1dc7aa5e5c..668a5c134e 100644
--- a/packages/storybook/stories/ControlBar/Buttons/MicrophoneButton/snippets/MicrophoneButtonWithLabel.snippet.tsx
+++ b/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 (
diff --git a/packages/storybook/stories/ControlBar/Buttons/MicrophoneButton/MicrophoneButton.stories.tsx b/packages/storybook/stories/ControlBar/Buttons/MicrophoneButton/MicrophoneButton.stories.tsx
deleted file mode 100644
index ed289b3ef6..0000000000
--- a/packages/storybook/stories/ControlBar/Buttons/MicrophoneButton/MicrophoneButton.stories.tsx
+++ /dev/null
@@ -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 ;
-};
-
-export default {
- title: `${COMPONENT_FOLDER_PREFIX}/ControlBar/Buttons`,
- component: MicrophoneButton,
- parameters: {
- docs: {
- page: () => getDocs()
- }
- }
-} as Meta;
diff --git a/packages/storybook/stories/ControlBar/Buttons/ScreenShare/ScreenShare.stories.tsx b/packages/storybook/stories/ControlBar/Buttons/ScreenShare/ScreenShare.stories.tsx
new file mode 100644
index 0000000000..0509a40c95
--- /dev/null
+++ b/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 (
+ <>
+ ScreenShareButton
+
+
+ Importing
+
+
+ Example
+
+ The default `ScreenShareButton` component shows a ScreenShare icon with no label. The following example displays
+ the `ScreenShareButton` with screen sharing enabled and disabled.
+
+
+
+
+ ScreenShare with default label
+
+ You can display the button label which, by default, will show below the icon as `Share` or `Stop`.
+
+
+
+
+ Custom ScreenShareButton Styles
+
+ You can change the styles of the `ScreenShareButton` as you would customized any Button (styles, primary,
+ onRenderIcon, onRenderText, etc... ).
+
+
+
+
+ ScreenShareButton Props
+
+ `ScreenShareButton` features all props a [FluentUI
+ Button](https://developer.microsoft.com/en-us/fluentui#/controls/web/button) offers, with the following
+ additional properties:
+
+
+ >
+ );
+};
+
+// 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 ;
+};
+
+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;
diff --git a/packages/storybook/stories/ControlBar/Buttons/ScreenShare/snippets/Custom.snippet.tsx b/packages/storybook/stories/ControlBar/Buttons/ScreenShare/snippets/Custom.snippet.tsx
new file mode 100644
index 0000000000..1fd719c9f4
--- /dev/null
+++ b/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 ;
+ }
+
+ return ;
+ };
+
+ const customOnRenderText = (props?: IButtonProps): JSX.Element => {
+ if (props?.checked) {
+ return ;
+ }
+
+ return ;
+ };
+
+ return (
+
+
+
+
+ );
+};
diff --git a/packages/storybook/stories/ControlBar/Buttons/ScreenShare/snippets/Default.snippet.tsx b/packages/storybook/stories/ControlBar/Buttons/ScreenShare/snippets/Default.snippet.tsx
new file mode 100644
index 0000000000..7a38a48ffe
--- /dev/null
+++ b/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 (
+
+
+
+
+ );
+};
diff --git a/packages/storybook/stories/ControlBar/Buttons/ScreenShare/snippets/WithLabel.snippet.tsx b/packages/storybook/stories/ControlBar/Buttons/ScreenShare/snippets/WithLabel.snippet.tsx
new file mode 100644
index 0000000000..d625a86a9d
--- /dev/null
+++ b/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 (
+
+
+
+ );
+};