Skip to content

Commit abc9d09

Browse files
prabhjot-msftprabhjot-msft
authored
[Storybook8] Migrate Captions Settings Modal to V8 (#5046)
* added captions modal * Migrate Captions Settings Modal to V8 * Add button for opening modal
1 parent 3f7fd1e commit abc9d09

4 files changed

Lines changed: 253 additions & 0 deletions

File tree

‎packages/storybook8/stories/INTERNAL/CaptionsSettingsModal/CaptionsSettingsModal.story.tsx‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
// Copyright (c) Microsoft Corporation.
2+
// Licensed under the MIT License.
3+
4+
import { mergeStyles, PrimaryButton, Stack } from '@fluentui/react';
5+
import {
6+
_CaptionsSettingsModal,
7+
_CaptionsSettingsModalStrings,
8+
SpokenLanguageStrings
9+
} from '@internal/react-components';
10+
import React, { useState } from 'react';
11+
12+
const CaptionsSettingsModalStory = (args: any): JSX.Element => {
13+
const supportedSpokenLanguages: Array<keyof SpokenLanguageStrings> = [
14+
'ar-ae',
15+
'ar-sa',
16+
'da-dk',
17+
'de-de',
18+
'en-au',
19+
'en-ca',
20+
'en-gb',
21+
'en-in',
22+
'en-nz',
23+
'en-us',
24+
'es-es',
25+
'es-mx',
26+
'fi-fi',
27+
'fr-ca',
28+
'fr-fr',
29+
'hi-in',
30+
'it-it',
31+
'ja-jp',
32+
'ko-kr',
33+
'nb-no',
34+
'nl-be',
35+
'nl-nl',
36+
'pl-pl',
37+
'pt-br',
38+
'ru-ru',
39+
'sv-se',
40+
'zh-cn',
41+
'zh-hk',
42+
'cs-cz',
43+
'pt-pt',
44+
'tr-tr',
45+
'vi-vn',
46+
'th-th',
47+
'he-il',
48+
'cy-gb',
49+
'uk-ua',
50+
'el-gr',
51+
'hu-hu',
52+
'ro-ro',
53+
'sk-sk',
54+
'zh-tw'
55+
];
56+
57+
const currentSpokenLanguage = 'en-us';
58+
const [showModal, setShowModal] = useState<boolean>(false);
59+
const onDismissCaptionsSettings = (): void => {
60+
setShowModal(false);
61+
};
62+
const onSetSpokenLanguage = (language: any): Promise<void> => {
63+
alert(`Selected ${language}`);
64+
return Promise.resolve();
65+
};
66+
67+
const onStartCaptions = (): Promise<void> => {
68+
alert(`Start Captions with selected language`);
69+
return Promise.resolve();
70+
};
71+
72+
const strings = {
73+
startCaptionsButtonTooltipOffContent: 'Turn on captions',
74+
captionsSettingsModalTitle: 'What language is being spoken?',
75+
captionsSettingsDropdownLabel: 'Spoken language',
76+
captionsSettingsDropdownInfoText: 'Language that everyone on this call is speaking.',
77+
captionsSettingsConfirmButtonLabel: 'Confirm',
78+
captionsSettingsCancelButtonLabel: 'Cancel',
79+
captionsSettingsModalAriaLabel: 'Captions Setting Modal',
80+
captionsSettingsCloseModalButtonAriaLabel: 'Close Captions Setting'
81+
};
82+
83+
return (
84+
<Stack>
85+
<PrimaryButton
86+
className={mergeStyles({ maxWidth: '13.5rem' })}
87+
onClick={() => {
88+
setShowModal(true);
89+
}}
90+
>
91+
{'Captions Settings Modal'}
92+
</PrimaryButton>
93+
<_CaptionsSettingsModal
94+
showModal={showModal}
95+
isCaptionsFeatureActive={args.isCaptionsFeatureActive}
96+
supportedSpokenLanguages={supportedSpokenLanguages}
97+
currentSpokenLanguage={currentSpokenLanguage}
98+
onSetSpokenLanguage={onSetSpokenLanguage}
99+
onStartCaptions={onStartCaptions}
100+
onDismissCaptionsSettings={onDismissCaptionsSettings}
101+
strings={strings}
102+
supportedCaptionLanguages={[]}
103+
onSetCaptionLanguage={Promise.resolve}
104+
currentCaptionLanguage={'en'}
105+
/>{' '}
106+
</Stack>
107+
);
108+
};
109+
110+
// This must be the only named export from this module, and must be named to match the storybook path suffix.
111+
// This ensures that storybook hoists the story instead of creating a folder with a single entry.
112+
export const CaptionsSettingsModal = CaptionsSettingsModalStory.bind({});

‎packages/storybook8/stories/INTERNAL/CaptionsSettingsModal/Docs.mdx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
2+
import { _CaptionsSettingsModal } from '@internal/react-components';
3+
import * as CaptionsSettingsModalStories from './index.stories';
4+
import CaptionsSettingsModalExampleText from '!!raw-loader!./snippets/CaptionsSettingsModal.snippet.tsx';
5+
6+
<Meta of={CaptionsSettingsModalStories} />
7+
8+
# CaptionsBanner
9+
10+
A component for displaying a CaptionsBanner with user icon, displayName and captions text.
11+
12+
<Canvas of={CaptionsSettingsModalStories.CaptionsSettingsModal} source={{ code: CaptionsSettingsModalExampleText }} />
13+
14+
## Props
15+
16+
<ArgTypes of={_CaptionsSettingsModal} />

‎packages/storybook8/stories/INTERNAL/CaptionsSettingsModal/index.stories.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
// Copyright (c) Microsoft Corporation.
2+
// Licensed under the MIT License.
3+
4+
import { _CaptionsSettingsModal } from '@internal/react-components';
5+
import { Meta } from '@storybook/react';
6+
import { hiddenControl, controlsToAdd } from '../../controlsUtils';
7+
8+
export { CaptionsSettingsModal } from './CaptionsSettingsModal.story';
9+
10+
const meta: Meta = {
11+
title: 'Components/Internal/Captions Settings Modal',
12+
component: _CaptionsSettingsModal,
13+
argTypes: {
14+
isCaptionsFeatureActive: controlsToAdd.isCaptionsFeatureActive,
15+
showModal: hiddenControl,
16+
supportedSpokenLanguages: hiddenControl,
17+
currentSpokenLanguage: hiddenControl,
18+
strings: hiddenControl,
19+
onSetSpokenLanguage: hiddenControl,
20+
onDismissCaptionsSettings: hiddenControl,
21+
onStartCaptions: hiddenControl
22+
}
23+
};
24+
25+
export default meta;

‎packages/storybook8/stories/INTERNAL/CaptionsSettingsModal/snippets/CaptionsSettingsModal.snippet.tsx‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
// Copyright (c) Microsoft Corporation.
2+
// Licensed under the MIT License.
3+
4+
import { Stack } from '@fluentui/react';
5+
import {
6+
_CaptionsSettingsModal,
7+
_CaptionsSettingsModalStrings,
8+
SpokenLanguageStrings
9+
} from '@internal/react-components';
10+
import React, { useState } from 'react';
11+
12+
export const CaptionsSettingsModalStory = (args: any): JSX.Element => {
13+
const supportedSpokenLanguages: Array<keyof SpokenLanguageStrings> = [
14+
'ar-ae',
15+
'ar-sa',
16+
'da-dk',
17+
'de-de',
18+
'en-au',
19+
'en-ca',
20+
'en-gb',
21+
'en-in',
22+
'en-nz',
23+
'en-us',
24+
'es-es',
25+
'es-mx',
26+
'fi-fi',
27+
'fr-ca',
28+
'fr-fr',
29+
'hi-in',
30+
'it-it',
31+
'ja-jp',
32+
'ko-kr',
33+
'nb-no',
34+
'nl-be',
35+
'nl-nl',
36+
'pl-pl',
37+
'pt-br',
38+
'ru-ru',
39+
'sv-se',
40+
'zh-cn',
41+
'zh-hk',
42+
'cs-cz',
43+
'pt-pt',
44+
'tr-tr',
45+
'vi-vn',
46+
'th-th',
47+
'he-il',
48+
'cy-gb',
49+
'uk-ua',
50+
'el-gr',
51+
'hu-hu',
52+
'ro-ro',
53+
'sk-sk',
54+
'zh-tw'
55+
];
56+
57+
const currentSpokenLanguage = 'en-us';
58+
const [showModal, setShowModal] = useState<boolean>(true);
59+
const onDismissCaptionsSettings = (): void => {
60+
setShowModal(false);
61+
};
62+
const onSetSpokenLanguage = (language: any): Promise<void> => {
63+
alert(`Selected ${language}`);
64+
return Promise.resolve();
65+
};
66+
67+
const onStartCaptions = (): Promise<void> => {
68+
alert(`Start Captions with selected language`);
69+
return Promise.resolve();
70+
};
71+
72+
const strings = {
73+
startCaptionsButtonTooltipOffContent: 'Turn on captions',
74+
captionsSettingsModalTitle: 'What language is being spoken?',
75+
captionsSettingsDropdownLabel: 'Spoken language',
76+
captionsSettingsDropdownInfoText: 'Language that everyone on this call is speaking.',
77+
captionsSettingsConfirmButtonLabel: 'Confirm',
78+
captionsSettingsCancelButtonLabel: 'Cancel',
79+
captionsSettingsModalAriaLabel: 'Captions Setting Modal',
80+
captionsSettingsCloseModalButtonAriaLabel: 'Close Captions Setting'
81+
};
82+
83+
return (
84+
<Stack>
85+
<_CaptionsSettingsModal
86+
showModal={showModal}
87+
isCaptionsFeatureActive={args.isCaptionsFeatureActive}
88+
supportedSpokenLanguages={supportedSpokenLanguages}
89+
currentSpokenLanguage={currentSpokenLanguage}
90+
onSetSpokenLanguage={onSetSpokenLanguage}
91+
onStartCaptions={onStartCaptions}
92+
onDismissCaptionsSettings={onDismissCaptionsSettings}
93+
strings={strings}
94+
supportedCaptionLanguages={[]}
95+
onSetCaptionLanguage={Promise.resolve}
96+
currentCaptionLanguage={'en'}
97+
/>{' '}
98+
</Stack>
99+
);
100+
};

0 commit comments

Comments
 (0)
⚡