-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
* chore: updates dial pad docs * chore: updates ui tests * chore:updates snapshots * Update libs/components/src/lib/dial-pad/VARIATIONS.md Co-authored-by: Rachel Bratt Tannenbaum <[email protected]> * chore: update docs headings * chore: updates heading * chore: api reference format --------- Co-authored-by: Rachel Bratt Tannenbaum <[email protected]>
- Loading branch information
Showing
9 changed files
with
293 additions
and
133 deletions.
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,3 @@ | ||
| ## Resources | ||
|
|
||
| - [Dial Pad: Manual accessibility test](https://docs.google.com/spreadsheets/d/1zyrl82jDPTzLcqF767OficGFvlKaKY9q6ltYS1c17yY/edit?gid=1175911860#gid=1175911860) |
Empty file.
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 |
|---|---|---|
| @@ -1,159 +1,98 @@ | ||
| # Dial Pad | ||
| ## Usage | ||
|
|
||
| This is a composed component that allows users to enter / dial telephone numbers. | ||
| <vwc-tabs> | ||
| <vwc-tab label="Web component"></vwc-tab> | ||
| <vwc-tab-panel> | ||
|
|
||
| ```js | ||
| <script type="module">import '@vonage/vivid/dial-pad';</script> | ||
| import '@vonage/vivid/dial-pad'; | ||
| ``` | ||
|
|
||
| ```html preview | ||
| <vwc-dial-pad></vwc-dial-pad> | ||
| ``` | ||
|
|
||
| ## Members | ||
|
|
||
| ### Value | ||
|
|
||
| To set the value of the input, use the `value` attribute to set the text displayed in the input. | ||
|
|
||
| - Type: `string` | ||
| - Default: `undefined` | ||
|
|
||
| ```html preview | ||
| <vwc-dial-pad value="1234567890"></vwc-dial-pad> | ||
| ``` | ||
|
|
||
| ### Helper Text | ||
|
|
||
| To give extra context to the number that is being displayed, use the `helper-text` attribute to set the text displayed under the input. | ||
|
|
||
| - Type: `string` | ||
| - Default: `undefined` | ||
|
|
||
| ```html preview | ||
| <vwc-dial-pad | ||
| helper-text="58 Meeting Room - Extension" | ||
| value="4734" | ||
| ></vwc-dial-pad> | ||
| ``` | ||
|
|
||
| ### Placeholder | ||
|
|
||
| To give a hint to the user of what to enter in the input, use the `placeholder` attribute to set the text displayed in the input. | ||
|
|
||
| - Type: `string` | ||
| - Default: `undefined` | ||
|
|
||
| ```html preview | ||
| <vwc-dial-pad placeholder="Enter a phone number"></vwc-dial-pad> | ||
| ``` | ||
|
|
||
| ### Disabled | ||
|
|
||
| Use the `disabled` attribute to disable the keypad, input and Call/End call buttons. | ||
|
|
||
| - Type: `boolean` | ||
| - Default: `false` | ||
| or, if you need to use a unique prefix: | ||
|
|
||
| ```html preview | ||
| <vwc-dial-pad disabled></vwc-dial-pad> | ||
| ``` | ||
|
|
||
| ### Call Active | ||
|
|
||
| Use the `call-active` attribute (or `callActive` property) to enable the `end call button` and disable the `dial button`. | ||
|
|
||
| - Type: `boolean` | ||
| - Default: `false` | ||
| ```js | ||
| import { registerDialPad } from '@vonage/vivid'; | ||
|
|
||
| ```html preview | ||
| <vwc-dial-pad call-active value="01146869483"></vwc-dial-pad> | ||
| registerDialPad('your-prefix'); | ||
| ``` | ||
|
|
||
| ### No Call | ||
| ```html preview 500px | ||
| <script type="module"> | ||
| import { registerDialPad } from '@vonage/vivid'; | ||
| registerDialPad('your-prefix'); | ||
| </script> | ||
|
|
||
| Use the `no-call` attribute (or `noCall` property) to disable call/end call functionality and hide the call/end call button. | ||
|
|
||
| - Type: `boolean` | ||
| - Default: `false` | ||
|
|
||
| ```html preview | ||
| <vwc-dial-pad no-call></vwc-dial-pad> | ||
| <your-prefix-dial-pad></your-prefix-text-dial-pad> | ||
| ``` | ||
|
|
||
| ### No Input | ||
| </vwc-tab-panel> | ||
| <vwc-tab label="Vue"></vwc-tab> | ||
| <vwc-tab-panel> | ||
|
|
||
| Use the `no-input` attribute (or `noInput` property) to disable the input field. | ||
| ```html | ||
| <script setup lang="ts"> | ||
| import { VDialPad } from '@vonage/vivid-vue'; | ||
| </script> | ||
|
|
||
| - Type: `boolean` | ||
| - Default: `false` | ||
|
|
||
| ```html preview | ||
| <vwc-dial-pad no-input></vwc-dial-pad> | ||
| <template> | ||
| <VDialPad /> | ||
| </template> | ||
| ``` | ||
|
|
||
| ### Call Button Label | ||
| </vwc-tab-panel> | ||
| </vwc-tabs> | ||
|
|
||
| Use the `call-button-label` attribute (or `callButtonLabel` property) to update the call button label. | ||
| ## Value | ||
|
|
||
| - Type: `string` | ||
| - Default: `Call` | ||
| To set the value of the input, use the `value` attribute to set the text displayed in the input. | ||
|
|
||
| ```html preview | ||
| <vwc-dial-pad call-button-label="Dial"></vwc-dial-pad> | ||
| <vwc-dial-pad value="1234567890"></vwc-dial-pad> | ||
| ``` | ||
|
|
||
| ### End Call Button Label | ||
|
|
||
| Use the `end-call-button-label` attribute (or `endCallButtonLabel` property) to update the end call button label. | ||
| ## Pattern | ||
|
|
||
| - Type: `string` | ||
| - Default: `End Call` | ||
| Use the `pattern` attribute to set the regex string of allowed characters in the input. | ||
| Read more about [vwc-text-field validation](/components/text-field/#validation). | ||
| It defaults to `^[0-9#*]*$` (key pad buttons). | ||
|
|
||
| ```html preview | ||
| <vwc-dial-pad call-active end-call-button-label="End"></vwc-dial-pad> | ||
| <vwc-dial-pad placeholder="Only digits" pattern="^[0-9]*$"></vwc-dial-pad> | ||
| ``` | ||
|
|
||
| ### Pending | ||
|
|
||
| Add the `pending` attribute to disable the button and display a processing indicator. | ||
| ## API Reference | ||
|
|
||
| - Type: `boolean` | ||
| - Default: `false` | ||
|
|
||
| ```html preview | ||
| <vwc-dial-pad pending></vwc-dial-pad> | ||
| ``` | ||
| ### Properties | ||
|
|
||
| ### Pattern | ||
|
|
||
| Use the `pattern` attribute to set the regex string of allowed characters in the input. | ||
| Read more about [vwc-text-field validation](/components/text-field/#validation). | ||
| You can change the error text with the `error-text` attribute. | ||
| <div class="table-wrapper"> | ||
|
|
||
| - Type: `string` | ||
| - Default: `^[0-9#*]*$` (key pad buttons) | ||
| | Name | Type | Description | | ||
| | ------------------------- | -------------------------------- | ---------------------------------------------------------------- | | ||
| | **call-active** | `boolean` | Controls the active state of the call | | ||
| | **call-button-label** | `string` (default is `Call`) | Controls the call button label | | ||
| | **disabled** | `boolean` | Controls the disabled state of the dial pad | | ||
| | **end-call-button-label** | `string` (default is `End call`) | Controls the end call button label | | ||
| | **helper-text** | `string` | Controls the helper text displayed below the phone input element | | ||
| | **no-call** | `boolean` | Removes the call button and functionality | | ||
| | **no-input** | `boolean` | Removes the phone input element | | ||
| | **pattern** | `regExp` (default `^[0-9#*]*$`) | Regular expression to validate the value of the input element | | ||
| | **pending** | `boolean` | Controls the pending state | | ||
| | **value** | `string` | Value of the phone input element | | ||
|
|
||
| ```html preview | ||
| <vwc-dial-pad | ||
| placeholder="Only digits" | ||
| pattern="^[0-9]*$" | ||
| error-text="The input is invalid" | ||
| ></vwc-dial-pad> | ||
| ``` | ||
| </div> | ||
|
|
||
| ## Events | ||
| ### Events | ||
|
|
||
| <div class="table-wrapper"> | ||
|
|
||
| | Name | Type | Bubbles | Composed | Description | | ||
| | -------------- | --------------------------- | ------- | -------- | ----------------------------------------------- | | ||
| | `input` | `CustomEvent<undefined>` | Yes | Yes | Emitted when the text field value changes | | ||
| | `change` | `CustomEvent<undefined>` | Yes | Yes | Emitted when the text field value changes | | ||
| | `blur` | `CustomEvent<undefined>` | Yes | Yes | Emitted when the dialpad loses focus | | ||
| | `focus` | `CustomEvent<undefined>` | Yes | Yes | Emitted when the dialpad children receive focus | | ||
| | `keypad-click` | `CustomEvent<HTMLElement> ` | Yes | Yes | Emitted when a digit button is clicked | | ||
| | `dial` | `CustomEvent<undefined> ` | Yes | Yes | Emitted when the call button is clicked | | ||
| | `end-call` | `CustomEvent<undefined> ` | Yes | Yes | Emitted when the end call button is clicked | | ||
| | Name | Type | Bubbles | Composed | Description | | ||
| | ---------------- | --------------------------- | ------- | -------- | ------------------------------------------------ | | ||
| | **input** | `CustomEvent<undefined>` | Yes | Yes | Emitted when the text field value changes | | ||
| | **change** | `CustomEvent<undefined>` | Yes | Yes | Emitted when the text field value changes | | ||
| | **blur** | `CustomEvent<undefined>` | Yes | Yes | Emitted when the Dial Pad loses focus | | ||
| | **focus** | `CustomEvent<undefined>` | Yes | Yes | Emitted when the Dial Pad children receive focus | | ||
| | **keypad-click** | `CustomEvent<HTMLElement> ` | Yes | Yes | Emitted when a digit button is clicked | | ||
| | **dial** | `CustomEvent<undefined> ` | Yes | Yes | Emitted when the call button is clicked | | ||
| | **end-call** | `CustomEvent<undefined> ` | Yes | Yes | Emitted when the end call button is clicked | | ||
|
|
||
| </div> |
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,94 @@ | ||
| ## Dialog Form | ||
|
|
||
| You can use a `form` with `method=dialog` inside a dialog. This will make the dialog close when the form is submitted. | ||
|
|
||
| ```html preview 400px | ||
| <vwc-dialog headline="Dialog With Form" open> | ||
| <form slot="body" method="dialog"> | ||
| <vwc-layout column-basis="block"> | ||
| <vwc-text-field | ||
| label="Agent Name" | ||
| placeholder="Search for an agent" | ||
| icon="search-line" | ||
| ></vwc-text-field> | ||
| <vwc-text-area label="Additional Note (Optional)"></vwc-text-area> | ||
| <vwc-button type="submit" label="Submit" appearance="filled"></vwc-button> | ||
| </vwc-layout> | ||
| </form> | ||
| </vwc-dialog> | ||
| ``` | ||
|
|
||
| ## Confirm Closing of Dialog | ||
|
|
||
| ```html preview 400px | ||
| <style> | ||
| vwc-text-area { | ||
| width: 100%; | ||
| } | ||
| </style> | ||
| <vwc-button label="Open Dialog" onclick="openDialog()"></vwc-button> | ||
| <vwc-dialog id="dialog" headline="Dialog" modal open> | ||
| <vwc-text-area | ||
| id="input" | ||
| slot="body" | ||
| label="Important Data" | ||
| value="Some important data" | ||
| ></vwc-text-area> | ||
| <vwc-button | ||
| slot="action-items" | ||
| label="Cancel" | ||
| appearance="outlined" | ||
| onclick="closeDialog()" | ||
| ></vwc-button> | ||
| <vwc-button | ||
| slot="action-items" | ||
| label="Save" | ||
| appearance="filled" | ||
| onclick="closeDialog()" | ||
| ></vwc-button> | ||
| </vwc-dialog> | ||
| <vwc-dialog | ||
| id="confirm" | ||
| headline="Unsaved Changes" | ||
| subtitle="Are you sure you want to discard your changes?" | ||
| modal | ||
| > | ||
| <vwc-button | ||
| slot="action-items" | ||
| label="Cancel" | ||
| appearance="outlined" | ||
| onclick="closeConfirm()" | ||
| ></vwc-button> | ||
| <vwc-button | ||
| autofocus | ||
| slot="action-items" | ||
| label="Discard" | ||
| appearance="filled" | ||
| connotation="alert" | ||
| onclick="discardChanges()" | ||
| ></vwc-button> | ||
| </vwc-dialog> | ||
| <script> | ||
| document.querySelector('#dialog').addEventListener('cancel', (e) => { | ||
| e.preventDefault(); | ||
| document.querySelector('#confirm').open = true; | ||
| }); | ||
| function openDialog() { | ||
| document.querySelector('#dialog').open = true; | ||
| } | ||
| function closeDialog() { | ||
| document.querySelector('#dialog').open = false; | ||
| } | ||
| function closeConfirm() { | ||
| document.querySelector('#confirm').open = false; | ||
| } | ||
| function discardChanges() { | ||
| closeConfirm(); | ||
| closeDialog(); | ||
| } | ||
| </script> | ||
| ``` |
Oops, something went wrong.