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 ( + + + + ); +};