optimizely-oui

{ "Accordion": [ { "description": "@deprecated This component has been deprecated. 2020-04-10", "displayName": "Accordion", "methods": [ { "name": "handleSelection", "docblock": null, "modifiers": [], "params": [ { "name": "selected", "type": null } ], "returns": null } ], "props": { "children": { "type": { "name": "union", "value": [ { "name": "node" }, { "name": "arrayOf", "value": { "name": "node" } } ] }, "required": true, "description": "" }, "initiallySelected": { "type": { "name": "number" }, "required": false, "description": "", "defaultValue": { "value": "0", "computed": false } }, "testSection": { "type": { "name": "string" }, "required": false, "description": "" } } }, { "description": "", "displayName": "AccordionSection", "methods": [], "props": { "_isSelected": { "type": { "name": "bool" }, "required": false, "description": "" }, "_onClickHandler": { "type": { "name": "func" }, "required": false, "description": "" }, "children": { "type": { "name": "node" }, "required": true, "description": "" }, "testSection": { "type": { "name": "string" }, "required": false, "description": "" }, "title": { "type": { "name": "string" }, "required": true, "description": "" } } } ], "ArrowsInline": [ { "description": "@param {Object} props - Properties passed to component\n@returns {ReactElement}\n@deprecated This component has been deprecated. 2020-04-10", "displayName": "ArrowsInline", "methods": [], "props": { "direction": { "type": { "name": "enum", "value": [ { "value": "\"up\"", "computed": false }, { "value": "\"down\"", "computed": false }, { "value": "\"left\"", "computed": false }, { "value": "\"right\"", "computed": false } ] }, "required": false, "description": "Direction the arrow points", "defaultValue": { "value": "\"down\"", "computed": false } }, "testSection": { "type": { "name": "string" }, "required": false, "description": "Hook for automated JavaScript tests" } } } ], "Attention": [ { "description": "", "displayName": "renderDismissButton", "methods": [] }, { "description": "", "displayName": "Attention", "methods": [], "props": { "alignment": { "required": false, "tsType": { "name": "union", "raw": "\"left\" | \"center\"", "elements": [ { "name": "literal", "value": "\"left\"" }, { "name": "literal", "value": "\"center\"" } ] }, "description": "", "defaultValue": { "value": "\"left\"", "computed": false } }, "children": { "required": false, "tsType": { "name": "any" }, "description": "" }, "className": { "required": false, "tsType": { "name": "string" }, "description": "CSS class names." }, "isDismissible": { "required": false, "tsType": { "name": "boolean" }, "description": "" }, "testSection": { "required": false, "tsType": { "name": "string" }, "description": "" }, "type": { "required": false, "tsType": { "name": "union", "raw": "\"bad-news\" | \"brand\" | \"good-news\" | \"warning\"", "elements": [ { "name": "literal", "value": "\"bad-news\"" }, { "name": "literal", "value": "\"brand\"" }, { "name": "literal", "value": "\"good-news\"" }, { "name": "literal", "value": "\"warning\"" } ] }, "description": "", "defaultValue": { "value": "\"brand\"", "computed": false } } } } ], "Avatar": [ { "description": "@param {Object} props - Properties passed to component\n@returns {ReactElement}", "displayName": "Avatar", "methods": [], "props": { "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names." }, "imageUrl": { "type": { "name": "string" }, "required": false, "description": "Image to use for the avatar - default is the anonymous head" }, "isEmulating": { "type": { "name": "bool" }, "required": false, "description": "Whether or not the emulating border should appear" }, "size": { "type": { "name": "enum", "value": [ { "value": "\"small\"", "computed": false }, { "value": "\"medium\"", "computed": false } ] }, "required": false, "description": "Size of the avatar, large is default" }, "testSection": { "type": { "name": "string" }, "required": false, "description": "Data test section to use for testing" } } } ], "Badge": [ { "description": "Tiny inline component used to draw attention to an item's state or status.\n@param {Object} props - Properties passed to component\n@returns {ReactElement}", "displayName": "Badge", "methods": [], "props": { "backgroundColor": { "type": { "name": "enum", "value": [ { "value": "\"yellow\"", "computed": false }, { "value": "\"default\"", "computed": false }, { "value": "\"green\"", "computed": false }, { "value": "\"orange\"", "computed": false }, { "value": "\"pink\"", "computed": false }, { "value": "\"magenta\"", "computed": false }, { "value": "\"grey\"", "computed": false }, { "value": "\"purple\"", "computed": false }, { "value": "\"black\"", "computed": false } ] }, "required": false, "description": "@deprecated Color to use for the background of the token" }, "children": { "type": { "name": "node" }, "required": true, "description": "Text that appears within the component" }, "className": { "type": { "name": "string" }, "required": false, "description": "" }, "color": { "type": { "name": "enum", "value": [ { "value": "\"default\"", "computed": false }, { "value": "\"draft\"", "computed": false }, { "value": "\"live\"", "computed": false }, { "value": "\"primary\"", "computed": false }, { "value": "\"plain\"", "computed": false }, { "value": "\"purple\"", "computed": false }, { "value": "\"bad-news\"", "computed": false } ] }, "required": false, "description": "Various color schemes. Purple has been deprecated 2021-06-08.", "defaultValue": { "value": "\"default\"", "computed": false } }, "testSection": { "type": { "name": "string" }, "required": false, "description": "Hook for automated JavaScript tests" } } } ], "Category": [ { "description": "@param {Object} props - Properties passed to component\n@returns {ReactElement}", "displayName": "BlockList.Category", "methods": [], "props": { "children": { "type": { "name": "node" }, "required": true, "description": "Items that appears within the category" }, "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names." }, "header": { "type": { "name": "node" }, "required": false, "description": "Node or component that appears above the `children`" }, "testSection": { "type": { "name": "string" }, "required": false, "description": "Hook for automated JavaScript tests" } } } ], "Item": [ { "description": "", "displayName": "Item", "methods": [], "props": { "children": { "type": { "name": "node" }, "required": true, "description": "", "tsType": { "name": "union", "raw": "ReactElement | ReactElement[]", "elements": [ { "name": "ReactElement" }, { "name": "Array", "elements": [ { "name": "ReactElement" } ], "raw": "ReactElement[]" } ] } }, "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names.", "tsType": { "name": "string" } }, "testSection": { "type": { "name": "string" }, "required": false, "description": "", "tsType": { "name": "string" } } } } ], "BlockList": [ { "description": "Building blocks to display a list of items that perform actions.\n@param {Object} props - Properties passed to component\n@returns {ReactElement}", "displayName": "BlockList", "methods": [], "props": { "children": { "type": { "name": "node" }, "required": true, "description": "Should be subcomponents of `BlockList`" }, "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names." }, "hasBorder": { "type": { "name": "bool" }, "required": false, "description": "Should the `BlockList` contain a border on all sides", "defaultValue": { "value": "true", "computed": false } }, "maxHeight": { "type": { "name": "union", "value": [ { "name": "number" }, { "name": "string" } ] }, "required": false, "description": "The max height of the `BlockList`. Pixels will be assumed if no unit is\nprovided." }, "testSection": { "type": { "name": "string" }, "required": false, "description": "Hook for automated JavaScript tests" } } } ], "ButterBar": [ { "description": "", "displayName": "renderDismissButton", "methods": [] }, { "description": "", "displayName": "ButterBar", "methods": [], "props": { "alignment": { "required": false, "tsType": { "name": "union", "raw": "\"left\" | \"center\"", "elements": [ { "name": "literal", "value": "\"left\"" }, { "name": "literal", "value": "\"center\"" } ] }, "description": "", "defaultValue": { "value": "\"left\"", "computed": false } }, "children": { "required": false, "tsType": { "name": "any" }, "description": "" }, "className": { "required": false, "tsType": { "name": "string" }, "description": "CSS class names." }, "isDismissible": { "required": false, "tsType": { "name": "boolean" }, "description": "" }, "testSection": { "required": false, "tsType": { "name": "string" }, "description": "" }, "type": { "required": false, "tsType": { "name": "union", "raw": "\"bad-news\" | \"brand\" | \"good-news\" | \"warning\"", "elements": [ { "name": "literal", "value": "\"bad-news\"" }, { "name": "literal", "value": "\"brand\"" }, { "name": "literal", "value": "\"good-news\"" }, { "name": "literal", "value": "\"warning\"" } ] }, "description": "", "defaultValue": { "value": "\"brand\"", "computed": false } }, "onDismiss": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "() => any", "signature": { "arguments": [], "return": { "name": "any" } } }, "description": "", "defaultValue": { "value": "() => null", "computed": false } } } } ], "Button": [ { "description": "@param {Object} props - Properties passed to component\n@returns {ReactElement}", "displayName": "Button", "methods": [], "props": { "ariaHasPopup": { "type": { "name": "bool" }, "required": false, "description": "Should be true if this button displays a menu or tooltip" }, "ariaLabel": { "type": { "name": "string" }, "required": false, "description": "Describes buttons that have an icon but no text" }, "buttonRef": { "type": { "name": "union", "value": [ { "name": "func" }, { "name": "shape", "value": { "current": { "name": "instanceOf", "value": "Element", "required": false } } } ] }, "required": false, "description": "React ref to the underlying button component" }, "children": { "type": { "name": "node" }, "required": true, "description": "Text within the button" }, "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names." }, "isActive": { "type": { "name": "bool" }, "required": false, "description": "Render button with active state" }, "isDisabled": { "type": { "name": "bool" }, "required": false, "description": "Prevent users from interacting with the button", "defaultValue": { "value": "false", "computed": false } }, "isLink": { "type": { "name": "bool" }, "required": false, "description": "Changes the button to a div for insertion within a Link component", "defaultValue": { "value": "false", "computed": false } }, "isLoading": { "type": { "name": "bool" }, "required": false, "description": "When true, adds a spinner to the button and disables the button", "defaultValue": { "value": "false", "computed": false } }, "isSubmit": { "type": { "name": "bool" }, "required": false, "description": "Make the button act as a submit button", "defaultValue": { "value": "false", "computed": false } }, "leftIcon": { "type": { "name": "node" }, "required": false, "description": "Icon to display on the left" }, "loadingText": { "type": { "name": "string" }, "required": false, "description": "When the button adds a spinner, it displays this text", "defaultValue": { "value": "\"\"", "computed": false } }, "onBlur": { "type": { "name": "func" }, "required": false, "description": "Function that fires when the button loses focus", "defaultValue": { "value": "() => null", "computed": false } }, "onClick": { "type": { "name": "func" }, "required": false, "description": "Function that fires when the button is clicked on", "defaultValue": { "value": "() => null", "computed": false } }, "onMouseDown": { "type": { "name": "func" }, "required": false, "description": "Function that fires when the button is mouse downed", "defaultValue": { "value": "() => null", "computed": false } }, "rightIcon": { "type": { "name": "node" }, "required": false, "description": "Icon to display on the right" }, "size": { "type": { "name": "enum", "value": [ { "value": "\"tiny\"", "computed": false }, { "value": "\"small\"", "computed": false }, { "value": "\"large\"", "computed": false }, { "value": "\"narrow\"", "computed": false }, { "value": "\"tight\"", "computed": false } ] }, "required": false, "description": "Various height and width options" }, "style": { "type": { "name": "enum", "value": [ { "value": "\"highlight\"", "computed": false }, { "value": "\"danger\"", "computed": false }, { "value": "\"danger-outline\"", "computed": false }, { "value": "\"outline\"", "computed": false }, { "value": "\"outline-reverse\"", "computed": false }, { "value": "\"plain\"", "computed": false }, { "value": "\"toggle\"", "computed": false }, { "value": "\"underline\"", "computed": false }, { "value": "\"unstyled\"", "computed": false } ] }, "required": false, "description": "Various color options" }, "testSection": { "type": { "name": "string" }, "required": false, "description": "Hook for automated JavaScript tests" }, "title": { "type": { "name": "string" }, "required": false, "description": "Title of the button shown as tooltip text when the button is hovered" }, "width": { "type": { "name": "enum", "value": [ { "value": "\"default\"", "computed": false }, { "value": "\"full\"", "computed": false } ] }, "required": false, "description": "Various height and width options", "defaultValue": { "value": "\"default\"", "computed": false } } } } ], "ButtonIcon": [ { "description": "", "displayName": "ButtonIcon", "methods": [], "props": { "buttonRef": { "type": { "name": "union", "value": [ { "name": "func" }, { "name": "shape", "value": { "current": { "name": "instanceOf", "value": "Element", "required": false } } } ] }, "required": false, "description": "React ref to the underlying button component", "tsType": { "name": "any" } }, "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names.", "tsType": { "name": "string" } }, "iconFill": { "type": { "name": "enum", "computed": true, "value": "Object.keys(FILL_COLOR_MAP)" }, "required": false, "description": "Color to use for the fill of the icon", "tsType": { "name": "union", "raw": "\"aqua\" | \"yellow\" | \"default\" | \"green\" | \"orange\" | \"pink\" | \"red\" | \"magenta\" | \"grey\" | \"purple\" | \"black\"", "elements": [ { "name": "literal", "value": "\"aqua\"" }, { "name": "literal", "value": "\"yellow\"" }, { "name": "literal", "value": "\"default\"" }, { "name": "literal", "value": "\"green\"" }, { "name": "literal", "value": "\"orange\"" }, { "name": "literal", "value": "\"pink\"" }, { "name": "literal", "value": "\"red\"" }, { "name": "literal", "value": "\"magenta\"" }, { "name": "literal", "value": "\"grey\"" }, { "name": "literal", "value": "\"purple\"" }, { "name": "literal", "value": "\"black\"" } ] } }, "iconName": { "type": { "name": "string" }, "required": false, "description": "Name of the icon to use", "tsType": { "name": "string" }, "defaultValue": { "value": "\"add\"", "computed": false } }, "isDisabled": { "type": { "name": "bool" }, "required": false, "description": "Prevent users from interacting with the button", "tsType": { "name": "boolean" } }, "onClick": { "type": { "name": "func" }, "required": false, "description": "Function to perform when the close button is clicked.", "tsType": { "name": "signature", "type": "function", "raw": "(evt) => void", "signature": { "arguments": [ { "name": "evt" } ], "return": { "name": "void" } } }, "defaultValue": { "value": "() => null", "computed": false } }, "size": { "type": { "name": "enum", "value": [ { "value": "\"small\"", "computed": false }, { "value": "\"medium\"", "computed": false }, { "value": "\"large\"", "computed": false } ] }, "required": false, "description": "Size of the button, medium by default", "tsType": { "name": "union", "raw": "\"small\" | \"medium\" | \"large\"", "elements": [ { "name": "literal", "value": "\"small\"" }, { "name": "literal", "value": "\"medium\"" }, { "name": "literal", "value": "\"large\"" } ] }, "defaultValue": { "value": "\"medium\"", "computed": false } }, "style": { "type": { "name": "enum", "value": [ { "value": "\"highlight\"", "computed": false }, { "value": "\"danger\"", "computed": false }, { "value": "\"danger-outline\"", "computed": false }, { "value": "\"outline\"", "computed": false }, { "value": "\"plain\"", "computed": false }, { "value": "\"unstyled\"", "computed": false } ] }, "required": false, "description": "Various style options", "tsType": { "name": "union", "raw": "\"highlight\" | \"danger\" | \"danger-outline\" | \"outline\" | \"plain\" | \"unstyled\"", "elements": [ { "name": "literal", "value": "\"highlight\"" }, { "name": "literal", "value": "\"danger\"" }, { "name": "literal", "value": "\"danger-outline\"" }, { "name": "literal", "value": "\"outline\"" }, { "name": "literal", "value": "\"plain\"" }, { "name": "literal", "value": "\"unstyled\"" } ] } }, "testSection": { "type": { "name": "string" }, "required": false, "description": "Hook for automated JavaScript tests", "tsType": { "name": "string" } }, "title": { "type": { "name": "string" }, "required": false, "description": "Title of the button used on hover and for screen readers", "tsType": { "name": "string" }, "defaultValue": { "value": "\"\"", "computed": false } } } } ], "ButtonRow": [ { "description": "", "displayName": "ButtonRowSide", "methods": [] }, { "description": "A horizontal list of buttons with space between them.\n@param {Object} props - Properties passed to component\n@returns {ReactElement}", "displayName": "ButtonRow", "methods": [], "props": { "centerGroup": { "type": { "name": "arrayOf", "value": { "name": "element" } }, "required": false, "description": "Array of buttons for the center" }, "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names." }, "leftGroup": { "type": { "name": "arrayOf", "value": { "name": "element" } }, "required": false, "description": "Array of buttons for left side" }, "rightGroup": { "type": { "name": "arrayOf", "value": { "name": "element" } }, "required": false, "description": "Array of buttons for right side" }, "testSection": { "type": { "name": "string" }, "required": false, "description": "Hook for automated JavaScript tests" } } } ], "Card": [ { "description": "", "displayName": "Card", "methods": [], "props": { "children": { "type": { "name": "union", "value": [ { "name": "string" }, { "name": "node" } ] }, "required": true, "description": "Elements that appears within the component", "tsType": { "name": "any" } }, "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names.", "tsType": { "name": "string" } }, "onClose": { "type": { "name": "func" }, "required": false, "description": "method to invoke when a close element is clicked", "tsType": { "name": "signature", "type": "function", "raw": "() => void", "signature": { "arguments": [], "return": { "name": "void" } } } }, "shadow": { "type": { "name": "bool" }, "required": false, "description": "Display a subtle shadow around card.", "tsType": { "name": "boolean" }, "defaultValue": { "value": "false", "computed": false } }, "testSection": { "type": { "name": "string" }, "required": false, "description": "For automated testing only.", "tsType": { "name": "string" } }, "title": { "type": { "name": "string" }, "required": true, "description": "What is the card title", "tsType": { "name": "string