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

React components to support the MCP styleguide

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const react_components_1 = require("@cimpress/react-components");
const phone_jsx_1 = __importDefault(require("!raw-loader!./phone.jsx"));
const phone_jsx_2 = __importDefault(require("./phone.jsx"));
const TabbedComponentDoc_1 = __importDefault(require("../../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_1.default.createElement("div", null,
                react_1.default.createElement("p", null, "Callback function that is fired when any part of the phone component changes. "),
                react_1.default.createElement("p", null,
                    "Signature: ",
                    react_1.default.createElement("code", null,
                        "function({ number: string, isValid: boolean }) ",
                        '=>',
                        " void"),
                    ' '),
                react_1.default.createElement("p", null,
                    react_1.default.createElement("code", null, "number:"),
                    " E.123 formatted telephone number as you type."),
                react_1.default.createElement("p", null,
                    react_1.default.createElement("code", null, "isValid:"),
                    " Is the string a valid E.123 phone number.",
                    react_1.default.createElement("br", null),
                    react_1.default.createElement("br", null),
                    react_1.default.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_1.default.createElement("div", null,
                react_1.default.createElement("p", null, "Selector component to use for the country selection (i.e. react-select-plus)."),
                react_1.default.createElement("p", null, "If not specified - react-select will be used."))),
        },
        {
            name: 'countryGroups',
            type: 'object',
            default: '',
            description: (react_1.default.createElement("div", null,
                react_1.default.createElement("p", null, "Optional set of country groups."),
                react_1.default.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_1.default.createElement("p", null, "Example:"),
                react_1.default.createElement("p", null,
                    react_1.default.createElement("code", null, "{ 'Frequent': ['us', 'gb'], 'All': '*' }")))),
        },
    ];
    return (react_1.default.createElement("div", null,
        react_1.default.createElement(TabbedComponentDoc_1.default, { name: "Phone", propInfos: propInfos },
            react_1.default.createElement(phone_jsx_2.default, null),
            react_1.default.createElement(react_components_1.CodeExample, { code: phone_jsx_1.default }))));
};
exports.default = PhoneDocs;
//# sourceMappingURL=index.js.map