-
Notifications
You must be signed in to change notification settings - Fork 53
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(WebexMeetingControl): implement component
Add sample meeting controls "join", "disabled-join" and "disabled-mute-audio" for stories in Storybook.
- Loading branch information
1 parent
5c89588
commit b4fcf5a
Showing
12 changed files
with
525 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
# Webex Meeting Control Component | ||
|
||
Webex Meeting Control component displays a button that allows for control over a meeting by performing a specific action. | ||
|
||
<p align="center"> | ||
<img src="./WebexMeetingControl.png" alt="Default Webex Meeting Control" /> | ||
</p> | ||
|
||
## Preview | ||
|
||
To see all the different possible states of the Webex Meeting Control component, you can run our Storybook: | ||
|
||
```shell | ||
npm start | ||
``` | ||
|
||
## Embed | ||
|
||
1. Create a component adapter from which the data will be retrieved (See [adapters](../../adapters)). For instance: | ||
|
||
```js | ||
const jsonAdapter = new WebexJSONAdapter(jsonData); | ||
``` | ||
|
||
2. Create a component instance by passing the control _type_ as a string and | ||
enclose it within [a data provider](../WebexDataProvider/WebexDataProvider.js) | ||
that takes the [component data adapter](../../adapters/WebexJSONAdapter.js) that we created previously. | ||
A Webex Meeting Control must also be enclosed by a [Webex Meeting Controls](./WebexMeetingControls.js) component that contains the | ||
meeting context for the control | ||
|
||
```js | ||
<WebexDataProvider adapter={jsonAdapter}> | ||
<WebexMeetingControls meetingID="meetingID"> | ||
<WebexMeetingControl type="mute-audio" /> | ||
</WebexMeetingControls> | ||
</WebexDataProvider> | ||
``` | ||
|
||
The component knows how to manage its data. If anything changes in the data source that the adapter manages, the component will also update on its own. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import {Button, Icon} from '@momentum-ui/react'; | ||
import {MeetingControlState} from '@webex/component-adapter-interfaces'; | ||
|
||
import {useMeetingControl} from '../hooks'; | ||
|
||
/** | ||
* WebexMeetingControl component represents an action that can | ||
* be taken in a meeting. | ||
* | ||
* @param {object} props | ||
* @returns {object} JSX of the component | ||
*/ | ||
export default function WebexMeetingControl({type}) { | ||
const [action, display] = useMeetingControl(type); | ||
const {icon, text, tooltip} = display; | ||
const isDisabled = display.state === MeetingControlState.DISABLED; | ||
const iconColor = display.state === MeetingControlState.ACTIVE ? 'red' : ''; | ||
let button = ( | ||
<Button color="green" size={52} ariaLabel={tooltip} onClick={action} disabled={isDisabled}> | ||
{text} | ||
</Button> | ||
); | ||
|
||
if (icon) { | ||
button = ( | ||
<Button circle color={iconColor} size={56} ariaLabel={tooltip} onClick={action} disabled={isDisabled}> | ||
<Icon name={`${icon}_28`} /> | ||
</Button> | ||
); | ||
} | ||
|
||
return button; | ||
} | ||
|
||
WebexMeetingControl.propTypes = { | ||
type: PropTypes.string.isRequired, | ||
}; |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
51 changes: 51 additions & 0 deletions
51
src/components/WebexMeetingControl/WebexMeetingControl.stories.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
import React from 'react'; | ||
import {storiesOf} from '@storybook/react'; | ||
|
||
import jsonData from '../../data'; | ||
import {WebexJSONAdapter} from '../../adapters'; | ||
import {WebexDataProvider, WebexMeetingControl, WebexMeetingControls} from '../'; | ||
|
||
// Setup for the stories | ||
const stories = storiesOf('Webex Meeting Control', module); | ||
const webexAdapter = new WebexJSONAdapter(jsonData); | ||
|
||
// Stories | ||
stories.add('text', () => ( | ||
<WebexDataProvider adapter={webexAdapter}> | ||
<WebexMeetingControls meetingID="scheduledMeeting"> | ||
<WebexMeetingControl type="join-meeting" /> | ||
</WebexMeetingControls> | ||
</WebexDataProvider> | ||
)); | ||
|
||
stories.add('disabled text', () => ( | ||
<WebexDataProvider adapter={webexAdapter}> | ||
<WebexMeetingControls meetingID="scheduledMeeting"> | ||
<WebexMeetingControl type="disabled-join-meeting" /> | ||
</WebexMeetingControls> | ||
</WebexDataProvider> | ||
)); | ||
|
||
stories.add('active icon', () => ( | ||
<WebexDataProvider adapter={webexAdapter}> | ||
<WebexMeetingControls meetingID="mutedLocalAudio"> | ||
<WebexMeetingControl type="mute-audio" /> | ||
</WebexMeetingControls> | ||
</WebexDataProvider> | ||
)); | ||
|
||
stories.add('inactive icon', () => ( | ||
<WebexDataProvider adapter={webexAdapter}> | ||
<WebexMeetingControls meetingID="localAudio"> | ||
<WebexMeetingControl type="mute-audio" /> | ||
</WebexMeetingControls> | ||
</WebexDataProvider> | ||
)); | ||
|
||
stories.add('disabled icon', () => ( | ||
<WebexDataProvider adapter={webexAdapter}> | ||
<WebexMeetingControls meetingID="mutedLocalAudio"> | ||
<WebexMeetingControl type="disabled-mute-audio" /> | ||
</WebexMeetingControls> | ||
</WebexDataProvider> | ||
)); |
29 changes: 29 additions & 0 deletions
29
src/components/WebexMeetingControl/WebexMeetingControl.test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
import React from 'react'; | ||
|
||
import WebexMeetingControl from './WebexMeetingControl'; | ||
|
||
jest.mock('../hooks/useMeetingControl'); | ||
|
||
describe('Webex Meeting Control component', () => { | ||
describe('snapshot', () => { | ||
test('matches with text button', () => { | ||
expect(shallow(<WebexMeetingControl type="join-meeting" />)).toMatchSnapshot(); | ||
}); | ||
|
||
test('matches with disabled text button', () => { | ||
expect(shallow(<WebexMeetingControl type="join-meeting-disabled" />)).toMatchSnapshot(); | ||
}); | ||
|
||
test('matches with active icon button', () => { | ||
expect(shallow(<WebexMeetingControl type="mute-audio-active" />)).toMatchSnapshot(); | ||
}); | ||
|
||
test('matches with inactive icon button', () => { | ||
expect(shallow(<WebexMeetingControl type="mute-audio-inactive" />)).toMatchSnapshot(); | ||
}); | ||
|
||
test('matches with disabled icon button', () => { | ||
expect(shallow(<WebexMeetingControl type="mute-audio-disabled" />)).toMatchSnapshot(); | ||
}); | ||
}); | ||
}); |
Oops, something went wrong.