Skip to content

Commit 0d73166

Browse files
alkwa-msftalkwa-msft
authored
Added back in dialpad component storybook entry and fixed pstn dialpad links (#5122)
1 parent 76c84fb commit 0d73166

File tree

7 files changed

+210
-2
lines changed

7 files changed

+210
-2
lines changed

‎packages/storybook8/stories/Components/Dialpad/Dialpad.story.tsx

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
// Copyright (c) Microsoft Corporation.
2+
// Licensed under the MIT License.
3+
4+
import { Dialpad as DialpadComponent, useTheme } from '@azure/communication-react';
5+
import { mergeStyles } from '@fluentui/react';
6+
import MobileDetect from 'mobile-detect';
7+
import React from 'react';
8+
9+
export const isIOS = (): boolean =>
10+
/iPad|iPhone|iPod/.test(navigator.platform) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
11+
12+
const DialpadStory = (args): JSX.Element => {
13+
const isMobile = !!new MobileDetect(window.navigator.userAgent).mobile() || isIOS();
14+
const theme = useTheme();
15+
16+
return (
17+
<div
18+
className={mergeStyles({
19+
background: theme.palette.neutralLighterAlt,
20+
padding: '2em',
21+
width: '75%',
22+
height: '75%'
23+
})}
24+
>
25+
<DialpadComponent
26+
longPressTrigger={isMobile ? 'touch' : 'mouseAndTouch'}
27+
disableDtmfPlayback={args.disableDtmfPlayback}
28+
dialpadMode={args.dialpadMode}
29+
/>
30+
</div>
31+
);
32+
};
33+
34+
export const Dialpad = DialpadStory.bind({});

‎packages/storybook8/stories/Components/Dialpad/Docs.mdx

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { Dialpad } from '@azure/communication-react';
2+
import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
3+
import * as DialpadStories from './index.stories';
4+
5+
import CustomDialpadText from '!!raw-loader!./snippets/CustomDialpad.snippet.tsx';
6+
import ExampleDialpadText from '!!raw-loader!./snippets/Dialpad.snippet.tsx';
7+
import DialerExampleText from '!!raw-loader!./snippets/DialpadDialer.snippet.tsx';
8+
9+
<Meta of={DialpadStories} component={Dialpad} />
10+
11+
# Dialpad
12+
13+
## Dialpad modes
14+
15+
The Dialpad component is versatile in its usage. Like on a physical phone, the dialpad can have many different
16+
roles. Our Dialpad component is designed to accommodate different scenarios encountered in calling experiences.
17+
18+
### Dialer Mode
19+
20+
This is the default mode of the Dialpad component. In this mode you are able to enter and edit numbers in the
21+
Dialpad's input box. The typical scenario to use this mode is when you are dialling a phone number to call the
22+
number, or to dial in a new participant into an ongoing call.
23+
24+
<Canvas of={DialpadStories.DialerExampleDocsOnly} source={{ code: DialerExampleText }} />
25+
26+
### DTMF Mode
27+
28+
This mode is for sending DTMF tones when in a call. These tones are used for controlling bots or other services
29+
that you might encounter. Each tone is mapped to a sound that is played when pressing each key. You can disable
30+
these sounds by using the `disableDtmfPlayback` property on the component. In this mode, the input box in the
31+
dialpad is hidden since you are not able to edit DTMF tones that are sent.
32+
33+
<Canvas of={DialpadStories.DialpadExampleDocsOnly} source={{ code: ExampleDialpadText }} />
34+
35+
Component to render a Dialpad. This component allows numbers and +, \*, # input by clicking on dialpad or using
36+
keyboard
37+
38+
### Customizing your Dialpad
39+
40+
We provide many different ways to customize the Dialpad component. This example showcases how to customize the
41+
format for dialpad input using onChange, how to grab textfield values using onChange, and how to add extra
42+
functionality to dialpad buttons. This overrides the included number formatting behavior to North American phone
43+
numbers. In this example, the sounds are also disabled.
44+
45+
<Canvas of={DialpadStories.CustomDialpadExampleDocsOnly} source={{ code: CustomDialpadText }} />
46+
47+
## Dialpad Props
48+
49+
<ArgTypes of={Dialpad} />

‎packages/storybook8/stories/Components/Dialpad/index.stories.tsx

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { Meta } from '@storybook/react';
2+
import { hiddenControl } from '../../controlsUtils';
3+
import { Dialpad as DialpadComponent } from '@azure/communication-react';
4+
import { CustomDialpadExample } from './snippets/CustomDialpad.snippet';
5+
import { DialpadExample } from './snippets/Dialpad.snippet';
6+
import { DialerExample } from './snippets/DialpadDialer.snippet';
7+
export { Dialpad } from './Dialpad.story';
8+
9+
export const CustomDialpadExampleDocsOnly = {
10+
render: CustomDialpadExample
11+
};
12+
13+
export const DialpadExampleDocsOnly = {
14+
render: DialpadExample
15+
};
16+
17+
export const DialerExampleDocsOnly = {
18+
render: DialerExample
19+
};
20+
21+
export default {
22+
title: 'Components/Dialpad',
23+
component: DialpadComponent,
24+
argTypes: {
25+
strings: hiddenControl,
26+
onSendDtmfTone: hiddenControl,
27+
onClickDialpadButton: hiddenControl,
28+
textFieldValue: hiddenControl,
29+
onChange: hiddenControl,
30+
longPressTrigger: hiddenControl,
31+
styles: hiddenControl,
32+
dtmfAudioContext: hiddenControl
33+
},
34+
args: {
35+
disableDtmfPlayback: false,
36+
dialpadMode: 'dtmf',
37+
showDeleteButton: true
38+
}
39+
} as Meta;

‎packages/storybook8/stories/Components/Dialpad/snippets/CustomDialpad.snippet.tsx

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
// Copyright (c) Microsoft Corporation.
2+
// Licensed under the MIT License.
3+
4+
import { DtmfTone } from '@azure/communication-calling';
5+
import { Dialpad, FluentThemeProvider } from '@azure/communication-react';
6+
import { Stack } from '@fluentui/react';
7+
import React, { useState } from 'react';
8+
9+
export const CustomDialpadExample: (props: { isTouchOnlyDevice?: boolean }) => JSX.Element = (props: {
10+
isTouchOnlyDevice?: boolean;
11+
}) => {
12+
const [dtmftone, setDtmftone] = useState('');
13+
const [buttonValue, setButtonValue] = useState('');
14+
const [buttonIndex, setButtonIndex] = useState('');
15+
const [textFieldValue, setTextFieldValue] = useState('');
16+
17+
const onSendDtmfTone = (dtmfTone: DtmfTone): Promise<void> => {
18+
setDtmftone(dtmfTone);
19+
return Promise.resolve();
20+
};
21+
22+
const onClickDialpadButton = (buttonValue: string, buttonIndex: number): void => {
23+
setButtonValue(buttonValue);
24+
setButtonIndex(buttonIndex.toString());
25+
};
26+
27+
const onChange = (input: string): void => {
28+
// if there is already a plus sign at the front remove it
29+
if (input[0] === '+') {
30+
input = input.slice(1, input.length);
31+
}
32+
// add + sign and brackets to format phone number
33+
if (input.length < 4 && input.length > 0) {
34+
// store the new value in textFieldValue and pass it back to dialpad textfield
35+
setTextFieldValue(`+ ${input}`);
36+
} else if (input.length >= 4) {
37+
// store the new value in textFieldValue and pass it back to dialpad textfield
38+
setTextFieldValue(`+ (${input.slice(0, 3)}) ${input.slice(3, input.length)}`);
39+
} else {
40+
// store the new value in textFieldValue and pass it back to dialpad textfield
41+
setTextFieldValue(input);
42+
}
43+
};
44+
45+
return (
46+
<FluentThemeProvider>
47+
<Stack>
48+
<div style={{ fontSize: '1.5rem', marginBottom: '1rem', fontFamily: 'Segoe UI' }}>DTMF Tone: {dtmftone}</div>
49+
<div style={{ fontSize: '1.5rem', marginBottom: '1rem', fontFamily: 'Segoe UI' }}>
50+
Button Clicked: {buttonValue} index at {buttonIndex}
51+
</div>
52+
53+
<Dialpad
54+
onSendDtmfTone={onSendDtmfTone}
55+
textFieldValue={textFieldValue}
56+
onClickDialpadButton={onClickDialpadButton}
57+
onChange={onChange}
58+
disableDtmfPlayback={true}
59+
longPressTrigger={props.isTouchOnlyDevice ? 'touch' : 'mouseAndTouch'}
60+
/>
61+
</Stack>
62+
</FluentThemeProvider>
63+
);
64+
};

‎packages/storybook8/stories/Components/Dialpad/snippets/Dialpad.snippet.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// Copyright (c) Microsoft Corporation.
2+
// Licensed under the MIT License.
3+
4+
import { Dialpad } from '@azure/communication-react';
5+
import React from 'react';
6+
7+
export const DialpadExample: (props: { isTouchOnlyDevice?: boolean }) => JSX.Element = (props: {
8+
isTouchOnlyDevice?: boolean;
9+
}) => {
10+
return <Dialpad dialpadMode={'dtmf'} longPressTrigger={props.isTouchOnlyDevice ? 'touch' : 'mouseAndTouch'} />;
11+
};

‎packages/storybook8/stories/Components/Dialpad/snippets/DialpadDialer.snippet.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// Copyright (c) Microsoft Corporation.
2+
// Licensed under the MIT License.
3+
4+
import { Dialpad } from '@azure/communication-react';
5+
import React from 'react';
6+
7+
export const DialerExample: (props: { isTouchOnlyDevice?: boolean }) => JSX.Element = (props: {
8+
isTouchOnlyDevice?: boolean;
9+
}) => {
10+
return <Dialpad dialpadMode={'dialer'} longPressTrigger={props.isTouchOnlyDevice ? 'touch' : 'mouseAndTouch'} />;
11+
};

‎packages/storybook8/stories/Composites/CallComposite/pstn/Docs.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ features such as being put on hold and dialing in and removing users from an exi
1111

1212
More specifically, the following features are supported:
1313

14-
1. [DTMF](./?path=/docs/ui-components-dialpad--dialpad) (dual tone multi-frequency)
15-
2. [Dialpad UI](./?path=/docs/ui-components-dialpad--dialpad)
14+
1. [DTMF](./?path=/docs/components-dialpad--docs#dtmf-mode) (dual tone multi-frequency)
15+
2. [Dialpad UI](./?path=/docs/components-dialpad--docs#dialer-mode)
1616
3. [On/Off hold features](./?path=/docs/composites-adapters--docs)
1717
4. 1 to 1 participant PSTN calls
1818
5. Multi participant PSTN calls

0 commit comments

Comments
 (0)