Migrate internal caption banner component (#5008)

packages/storybook8/stories/Components/INTERNAL/CaptionsBanner/CaptionsBanner.tsx

@@ -0,0 +1,57 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { PrimaryButton, Stack } from '@fluentui/react';
+// eslint-disable-next-line no-restricted-imports
+import { _CaptionsInfo, _CaptionsBanner } from '@internal/react-components';
+import React, { useState } from 'react';
+import {
+  GenerateMockNewCaption,
+  GenerateMockNewCaptions,
+  GenerateMockNewCaptionWithLongName,
+  GenerateMockNewShortCaption
+} from './mockCaptions';
+
+export const CaptionsBannerStory = (): JSX.Element => {
+  const [captions, setCaptions] = useState<_CaptionsInfo[]>(GenerateMockNewCaptions());
+
+  const addNewCaption = (): void => {
+    setCaptions([...captions, GenerateMockNewCaption()]);
+  };
+
+  const addNewShortCaption = (): void => {
+    setCaptions([...captions, GenerateMockNewShortCaption()]);
+  };
+
+  const addNewLongNameCaption = (): void => {
+    setCaptions([...captions, GenerateMockNewCaptionWithLongName()]);
+  };
+
+  const extendLastCaption = (): void => {
+    captions[captions.length - 1].captionText = `${captions[captions.length - 1].captionText} hello`;
+    setCaptions([...captions]);
+  };
+
+  const containerStyles = {
+    width: '100%',
+    height: '100%',
+    padding: '2rem'
+  };
+
+  return (
+    <Stack verticalFill tokens={{ childrenGap: '5rem' }} style={containerStyles} verticalAlign="space-between">
+      <Stack style={{ border: 'solid grey 0.1rem' }} horizontalAlign="center">
+        <Stack.Item style={{ width: '60%' }}>
+          <_CaptionsBanner captions={captions} isCaptionsOn startCaptionsInProgress />
+        </Stack.Item>
+      </Stack>
+
+      <Stack horizontal horizontalAlign="space-between">
+        <PrimaryButton text="Add new captions" onClick={addNewCaption} />
+        <PrimaryButton text="Add new short captions" onClick={addNewShortCaption} />
+        <PrimaryButton text="Add new captions with long name" onClick={addNewLongNameCaption} />
+        <PrimaryButton text="Extend last caption" onClick={extendLastCaption} />
+      </Stack>
+    </Stack>
+  );
+};

packages/storybook8/stories/Components/INTERNAL/CaptionsBanner/index.stories.tsx

@@ -0,0 +1,11 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { Meta } from '@storybook/react';
+import { CaptionsBannerStory } from './CaptionsBanner';
+
+export default {
+  title: 'Components/Internal/CaptionsBanner',
+  component: CaptionsBannerStory
+} as Meta;
+
+export const Default = CaptionsBannerStory;

packages/storybook8/stories/Components/INTERNAL/CaptionsBanner/mockCaptions.ts

@@ -0,0 +1,62 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+// eslint-disable-next-line no-restricted-imports
+import { _CaptionsInfo } from '@internal/react-components';
+
+export const GenerateMockNewCaption = (): _CaptionsInfo => {
+  return {
+    id: Date.now().toString(),
+    displayName: 'SpongeBob',
+    captionText:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+  };
+};
+
+export const GenerateMockNewShortCaption = (): _CaptionsInfo => {
+  return {
+    id: Date.now().toString(),
+    displayName: 'SpongeBob Patrick',
+    captionText: 'Lorem ipsum dolor sit amet'
+  };
+};
+
+export const GenerateMockNewCaptionWithLongName = (): _CaptionsInfo => {
+  return {
+    id: Date.now().toString(),
+    displayName: 'SpongeBob Patrick Robert',
+    captionText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt'
+  };
+};
+
+export const GenerateMockNewCaptions = (): _CaptionsInfo[] => {
+  return [
+    {
+      id: Date.now().toString(),
+      displayName: 'Caroline',
+      captionText: 'Hello there'
+    },
+    {
+      id: Date.now().toString() + 1,
+      displayName: 'Mike',
+      captionText: 'Hi welcome'
+    },
+    {
+      id: Date.now().toString() + 2,
+      displayName: 'SpongeBob Patrick Robert',
+      captionText:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+    },
+    {
+      id: Date.now().toString() + 3,
+      displayName: 'Patrick',
+      captionText:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.'
+    },
+    {
+      id: Date.now().toString() + 4,
+      displayName: 'Sandy',
+      captionText: 'Lorem ipsum dolor sit amet'
+    }
+  ];
+};