add EndCallButton documentation (#218)

* add EndCallButton documentation

* update react-component package import

* update snippet file names + PR comments on strings

* Change files

change/react-components-34e1ae0e-353b-4643-85ed-ce20f1a7d6ad.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "improved documentation of EndCallButton",
+  "packageName": "react-components",
+  "email": "alcail@microsoft.com",
+  "dependentChangeType": "none"
+}

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

@@ -11,6 +11,7 @@ import { controlButtonLabelStyles, endCallControlButtonStyles } from './styles/C
 export interface EndCallButtonProps extends IButtonProps {
   /**
    * Whether the label is displayed or not.
+   *
    * @defaultValue `false`
    */
   showLabel?: boolean;
@@ -18,6 +19,7 @@ export interface EndCallButtonProps extends IButtonProps {
 
 /**
  * `EndCallButton` allows you to easily create a component for rendering a end call button. It can be used in your ControlBar component for example.
+ *
  * @param props - of type EndCallButtonProps
  */
 export const EndCallButton = (props: EndCallButtonProps): JSX.Element => {

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

@@ -0,0 +1,86 @@
+// © 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 { EndCallButton } from '@azure/communication-react';
+
+import { COMPONENT_FOLDER_PREFIX } from '../../../constants';
+import { EndCallButtonDefaultExample } from './snippets/Default.snippet';
+import { EndCallButtonWithLabelExample } from './snippets/WithLabel.snippet';
+import { EndCallButtonCustomExample } from './snippets/Custom.snippet';
+
+const EndCallButtonDefaultExampleText = require('!!raw-loader!./snippets/Default.snippet.tsx').default;
+const EndCallButtonWithLabelExampleText = require('!!raw-loader!./snippets/WithLabel.snippet.tsx').default;
+const EndCallButtonCustomExampleText = require('!!raw-loader!./snippets/Custom.snippet.tsx').default;
+
+const importStatement = `
+import { EndCallButton, FluentThemeProvider } from '@azure/communication-react';
+`;
+
+const getDocs: () => JSX.Element = () => {
+  return (
+    <>
+      <Title>EndCallButton</Title>
+      <Description of={EndCallButton} />
+
+      <Heading>Importing</Heading>
+      <Source code={importStatement} />
+
+      <Heading>Example</Heading>
+      <Description>
+        The default `EndCallButton` component shows a hangup icon with no label as in the example below.
+      </Description>
+      <Canvas withSource={SourceState.NONE}>
+        <EndCallButtonDefaultExample />
+      </Canvas>
+      <Source code={EndCallButtonDefaultExampleText} />
+
+      <Heading>EndCallButton with default label</Heading>
+      <Description>
+        You can display the button label which, by default, will show below the icon as `Hangup`.
+      </Description>
+      <Canvas withSource={SourceState.NONE}>
+        <EndCallButtonWithLabelExample />
+      </Canvas>
+      <Source code={EndCallButtonWithLabelExampleText} />
+
+      <Heading>Custom EndCallButton Styles</Heading>
+      <Description>
+        You can change the styles of the `EndCallButton` as you would customized any Button (styles, primary,
+        onRenderIcon, onRenderText, etc... ).
+      </Description>
+      <Canvas withSource={SourceState.NONE}>
+        <EndCallButtonCustomExample />
+      </Canvas>
+      <Source code={EndCallButtonCustomExampleText} />
+
+      <Heading>EndCallButton Props</Heading>
+      <Description>
+        `EndCallButton` 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={EndCallButton} />
+    </>
+  );
+};
+
+// 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 EndCall = (): JSX.Element => {
+  const showLabels = boolean('Show Labels', false);
+
+  return <EndCallButton showLabel={showLabels} />;
+};
+
+export default {
+  title: `${COMPONENT_FOLDER_PREFIX}/ControlBar/Buttons/End Call`,
+  component: EndCallButton,
+  parameters: {
+    docs: {
+      page: () => getDocs()
+    }
+  }
+} as Meta;

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { IButtonProps, Icon, Label, Stack } from '@fluentui/react';
+import { EndCallButton } from '@azure/communication-react';
+
+export const EndCallButtonCustomExample: () => JSX.Element = () => {
+  const customOnRenderIcon = (): JSX.Element => {
+    return <Icon key={'endCallCustomIconKey'} iconName={'DeclineCall'} style={{ color: 'black', fontSize: '25px' }} />;
+  };
+
+  const customOnRenderText = (props?: IButtonProps): JSX.Element => {
+    return (
+      <Label key={'endCallCustomLabelKey'} style={{ color: 'blue', fontStyle: 'italic' }}>
+        end call
+      </Label>
+    );
+  };
+
+  return (
+    <Stack horizontal horizontalAlign={'center'}>
+      <EndCallButton
+        style={{ backgroundColor: 'cyan' }}
+        key={'endCallCustomBtnKey'}
+        showLabel={true}
+        onRenderIcon={customOnRenderIcon}
+        onRenderText={customOnRenderText}
+      />
+    </Stack>
+  );
+};

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Stack } from '@fluentui/react';
+import { EndCallButton, FluentThemeProvider } from '@azure/communication-react';
+
+export const EndCallButtonDefaultExample: () => JSX.Element = () => {
+  return (
+    <FluentThemeProvider>
+      <Stack horizontal horizontalAlign={'center'}>
+        <EndCallButton />
+      </Stack>
+    </FluentThemeProvider>
+  );
+};

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

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