Storybook changes for captions (#4471)

* story

* Change files

* Update packages/storybook/stories/INTERNAL/ClosedCaptions/ClosedCaptions.stories.tsx

Co-authored-by: edwardlee-msft <edwardlee@microsoft.com>
Signed-off-by: carocao-msft <96077406+carocao-msft@users.noreply.github.com>

* update

* feedback

---------

Signed-off-by: carocao-msft <96077406+carocao-msft@users.noreply.github.com>
Co-authored-by: edwardlee-msft <edwardlee@microsoft.com>

Author: 2 people

change-beta/@azure-communication-react-27ce02fa-de57-4d1a-851f-6bac5534b61f.json

@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "feature",
+  "workstream": "Closed captions",
+  "comment": "Improved closed captions storybook based on feedback",
+  "packageName": "@azure/communication-react",
+  "email": "96077406+carocao-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/storybook/public/images/CaptionsSettings.png

@@ -1,22 +1,12 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { CallComposite } from '@azure/communication-react';
-import { Stack } from '@fluentui/react';
+import { PrimaryButton, Stack } from '@fluentui/react';
 import { Description, Heading, Source, Subheading, Title } from '@storybook/addon-docs';
 import { Meta } from '@storybook/react/types-6-0';
-import React, { useMemo } from 'react';
-import { v1 as createGUID } from 'uuid';
+import React from 'react';
 import { SingleLineBetaBanner } from '../../BetaBanners/SingleLineBetaBanner';
-import { ContosoCallContainer } from '../../CallComposite/snippets/Container.snippet';
-import { ConfigHintBanner } from '../../CallWithChatComposite/Utils';
-import {
-  COMPONENT_FOLDER_PREFIX,
-  compositeExperienceContainerStyle,
-  overviewPageImagesStackStyle
-} from '../../constants';
-import { ArgsFrom, controlsToAdd, defaultCallCompositeHiddenControls } from '../../controlsUtils';
-import { compositeLocale } from '../../localizationUtils';
+import { COMPONENT_FOLDER_PREFIX, overviewPageImagesStackStyle } from '../../constants';
 import { exampleDisableCaptions } from './ClosedCaptions';
 
 const getDocs: () => JSX.Element = () => {
@@ -31,32 +21,33 @@ const getDocs: () => JSX.Element = () => {
         or hard of hearing to follow along.
       </Description>
       <Description>
-        Closed Captions is enabled by default and are automatically included within the CallComposite and
+        Closed Captions is supported by default and are automatically included within the CallComposite and
         CallWithChatComposite experiences.
       </Description>
 
-      <Heading>ACS Based Captions</Heading>
+      <Heading>Azure Communication Service Based Captions</Heading>
       <SingleLineBetaBanner topOfPage={true} />
       <Description>
-        ACS Closed Captions are enabled by default and are automatically included within the CallComposite and
-        CallWithChatComposite experiences for calling scenarios involving ACS users only. Captions can be enabled both
-        in Mobile Web sessions and in Desktop Web sessions.
+        Azure Communication Service Closed Captions are supported by default and are automatically included within the
+        CallComposite and CallWithChatComposite experiences for calling scenarios involving Azure Communication Service
+        users only. Captions can be enabled in both Mobile Web sessions and in Desktop Web sessions.
       </Description>
       <Description>
-        For acs captions, users can enable captions in the menu and select the spoken language for the captions.
-        Captions does not detect language automatically, so the spoken language selected needs to match the language
-        that will be used in the call. Currently, ACS captions does not support translation.
+        For Azure Communication Service captions, users can enable captions in the menu and select the spoken language
+        for the captions. Captions does not detect language automatically, so the spoken language selected needs to
+        match the language that will be used in the call. Currently, Azure Communication Service captions does not
+        support translation.
       </Description>
 
       <Heading>Teams Interop Closed Captions</Heading>
       <Description>
-        Teams Interop Closed Captions is enabled by default and are automatically included within the CallComposite and
-        CallWithChatComposite experiences during a call including one or more teams users.
+        Teams Interop Closed Captions is supported by default and are automatically included within the CallComposite
+        and CallWithChatComposite experiences during a call including one or more teams users.
       </Description>
       <Description>
-        The main difference between ACS Closed Captions and Teams Interop Closed Captions is that Teams Interop Closed
-        Captions supports translation. End users can choose to have captions translated to a different language by using
-        captions settings.
+        The main difference between Azure Communication Service Closed Captions and Teams Interop Closed Captions is
+        that Teams Interop Closed Captions supports translation. End users can choose to have captions translated to a
+        different language by using captions settings.
       </Description>
 
       <Heading>How to use Captions</Heading>
@@ -76,40 +67,45 @@ const getDocs: () => JSX.Element = () => {
       </Description>
       <Stack tokens={{ childrenGap: '3rem' }} style={overviewPageImagesStackStyle}>
         <Stack.Item align="center">
-          <Description>Using the more menu to turn on captions.</Description>
+          <Subheading>Using the more menu to turn on captions</Subheading>
           <img
             style={{ width: '100%' }}
             src="images/StartCaptions.png"
             alt="example of component that can be used for starting captions"
           />
         </Stack.Item>
         <Stack.Item align="center">
-          <Description>Captions Setting modal to change spoken language.</Description>
+          <Subheading>Captions Setting modal to change spoken language</Subheading>
           <img
             style={{ width: '100%' }}
             src="images/CaptionsSettings.png"
             alt="example of component that can be used for setting languages for captions"
           />
         </Stack.Item>
         <Stack.Item align="center">
-          <Description>Captions Setting modal to change spoken language and caption language.</Description>
+          <Subheading>Captions Setting modal to change spoken language and caption language</Subheading>
           <img
             style={{ width: '100%' }}
             src="images/TeamsCaptionsSettings.png"
             alt="example of component that can be used for setting languages for teams captions"
           />
         </Stack.Item>
         <Stack.Item align="center">
-          <Description>Captions is started.</Description>
+          <Subheading>Captions started</Subheading>
           <img
             style={{ width: '100%' }}
             src="images/Captions.png"
             alt="example of component that can be used for displaying captions"
           />
         </Stack.Item>
+        <PrimaryButton
+          style={{ width: 'fit-content' }}
+          text="Go to CallComposite to see captions in action"
+          href="../?path=/story/composites-call-basicexample--basic-example"
+        />
       </Stack>
 
-      <Subheading>Disable captions</Subheading>
+      <Heading>Disable captions</Heading>
       <Description>
         The UI Library enables users to hide captions UI when they do not wish to use the captions service.
       </Description>
@@ -119,62 +115,17 @@ const getDocs: () => JSX.Element = () => {
   );
 };
 
-const storyControls = {
-  userId: controlsToAdd.userId,
-  token: controlsToAdd.token,
-  displayName: controlsToAdd.requiredDisplayName,
-  compositeFormFactor: controlsToAdd.formFactor,
-  errorBar: controlsToAdd.showErrorBar
-};
-
-const ClosedCaptionsStory = (args: ArgsFrom<typeof storyControls>, context): JSX.Element => {
-  const {
-    globals: { locale }
-  } = context;
-
-  const containerProps = useMemo(() => {
-    if (args.userId && args.token) {
-      const containerProps = {
-        userId: { communicationUserId: args.userId },
-        token: args.token,
-        locator: createGUID()
-      };
-      return containerProps;
-    }
-    return undefined;
-  }, [args.userId, args.token]);
-
-  return (
-    <Stack horizontalAlign="center" verticalAlign="center" styles={compositeExperienceContainerStyle}>
-      {containerProps ? (
-        <ContosoCallContainer
-          fluentTheme={context.theme}
-          rtl={context.globals.rtl === 'rtl'}
-          displayName={args.displayName}
-          {...containerProps}
-          locale={compositeLocale(locale)}
-          formFactor={args.compositeFormFactor}
-          options={{ errorBar: args.errorBar }}
-        />
-      ) : (
-        <ConfigHintBanner />
-      )}
-    </Stack>
-  );
+const ClosedCaptionsStory = (): JSX.Element => {
+  return <></>;
 };
 
 export const ClosedCaptions = ClosedCaptionsStory.bind({});
 
 export default {
   id: `${COMPONENT_FOLDER_PREFIX}-internal-ClosedCaptions`,
   title: `${COMPONENT_FOLDER_PREFIX}/Internal/ClosedCaptions`,
-  component: CallComposite,
-  argTypes: {
-    ...storyControls,
-    // Hiding auto-generated controls
-    ...defaultCallCompositeHiddenControls
-  },
   parameters: {
+    previewTabs: { canvas: { disable: true, hidden: true } },
     docs: {
       page: () => getDocs()
     }

packages/storybook/public/images/TeamsCaptionsSettings.png

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 export const exampleDisableCaptions = `
-const options: CallWithChatCompositeOptions = {
+const options: CallCompositeOptions = {
     callControls: {
       captionsButton: false
     }