@cimpress/react-components/dist/esm/docs/components/phone/index.js

React components to support the MCP styleguide

import React from 'react';
import { CodeExample } from '@cimpress/react-components';
import PhoneCode from '!raw-loader!./phone.jsx';
import PhoneDemo from './phone.jsx';
import ComponentDoc from '../../shared/TabbedComponentDoc';
const PhoneDocs = () => {
    const propInfos = [
        {
            name: 'initialValue',
            type: 'string',
            default: '',
            description: 'If included, the phone component will parse and prepopulate with the initial value on mount.',
        },
        {
            name: 'onChange',
            type: 'function (required)',
            default: '',
            description: (React.createElement("div", null,
                React.createElement("p", null, "Callback function that is fired when any part of the phone component changes. "),
                React.createElement("p", null,
                    "Signature: ",
                    React.createElement("code", null,
                        "function({ number: string, isValid: boolean }) ",
                        '=>',
                        " void"),
                    ' '),
                React.createElement("p", null,
                    React.createElement("code", null, "number:"),
                    " E.123 formatted telephone number as you type."),
                React.createElement("p", null,
                    React.createElement("code", null, "isValid:"),
                    " Is the string a valid E.123 phone number.",
                    React.createElement("br", null),
                    React.createElement("br", null),
                    React.createElement("strong", null, "Note:"),
                    " Properly formatted numbers that do not exist will be considered invalid.",
                    ' '))),
        },
        {
            name: 'triggerChangeOnMount',
            type: 'boolean',
            default: 'false',
            description: 'Treats mounting the component as a change event. Useful for when passing an initial value.',
        },
        {
            name: 'disableStatus',
            type: 'boolean',
            default: 'false',
            description: 'Set to true to prevent validation styling on text inputs when phone number is invalid.',
        },
        {
            name: 'className',
            type: 'string',
            default: '',
            description: 'Additional CSS classes to apply to the container element.',
        },
        {
            name: 'countrySelectLabel',
            type: 'node',
            default: 'Country Code...',
            description: 'Overrides the label for the country code select dropdown.',
        },
        {
            name: 'countrySelectClassName',
            type: 'string',
            default: '',
            description: 'Additional CSS classes to apply to the country code select dropdown.',
        },
        {
            name: 'countrySelectMenuStyle',
            type: 'object',
            default: '',
            description: 'Styles to be applied to the country select drop down menu.',
        },
        {
            name: 'phoneTextInputLabel',
            type: 'node',
            default: 'Telephone (Allowed characters: 0-9)',
            description: 'Overrides the label for the phone number text input.',
        },
        {
            name: 'phoneTextInputClassName',
            type: 'string',
            default: '',
            description: 'Additional CSS classes to apply to the phone number text input.',
        },
        {
            name: 'extensionTextInputLabel',
            type: 'node',
            default: 'Ext.',
            description: 'Overrides the label for the phone number text input.',
        },
        {
            name: 'extensionTextInputClassName',
            type: 'string',
            default: '',
            description: 'Additional CSS classes to apply to the extension text input.',
        },
        {
            name: 'selectedSelect',
            type: 'function',
            default: '',
            description: (React.createElement("div", null,
                React.createElement("p", null, "Selector component to use for the country selection (i.e. react-select-plus)."),
                React.createElement("p", null, "If not specified - react-select will be used."))),
        },
        {
            name: 'countryGroups',
            type: 'object',
            default: '',
            description: (React.createElement("div", null,
                React.createElement("p", null, "Optional set of country groups."),
                React.createElement("p", null, "Every country group is represented by a member that has a name (that will be used as a label for this group) and a list of country codes to include (or * for all countries)"),
                React.createElement("p", null, "Example:"),
                React.createElement("p", null,
                    React.createElement("code", null, "{ 'Frequent': ['us', 'gb'], 'All': '*' }")))),
        },
    ];
    return (React.createElement("div", null,
        React.createElement(ComponentDoc, { name: "Phone", propInfos: propInfos },
            React.createElement(PhoneDemo, null),
            React.createElement(CodeExample, { code: PhoneCode }))));
};
export default PhoneDocs;
//# sourceMappingURL=index.js.map