-
Notifications
You must be signed in to change notification settings - Fork 14
/
Copy pathdocumentation.js
1 lines (1 loc) · 7.1 KB
/
documentation.js
1
export default {"Card":"/**\n * @name \n * Card\n * \n * @module\n * Cards\n * \n * @description\n * Card container with border and box-shadow\n * Wrap children for showing them in a nice frame\n *\n * @example\n * // card with children\n * <Card>\n * <div>Card content</div>\n * <br/>\n * <img src=\"https://i.imgur.com/8CoNRCD.gif\" style={{maxWidth: '100%'}}></img>\n * </Card>\n *\n * @param {String} [className] Append class name to container\n * @param {node} [children] Children elements\n */","CodeCard":"/**\n * @name\n * CodeCard\n * \n * @module\n * Cards\n * \n * @description\n * CodeCard with border and inset box-shadow\n * to show code examples with \"pre\" tag\n *\n * @example\n * <CodeCard>\n * console.log('You are awesome!');\n * </CodeCard>\n *\n * @param {string} [className] additional className to the element\n * @param {node} children the code that will be formatted\n *\n */","Collapsible":"/**\n * @name\n * Collapsible\n * \n * @module\n * Content\n *\n * @description\n * An element that can be closed or opened by clicking on the title\n *\n * @example\n * // Example with some style minimalism\n * <Collapsible\n * title=\"Click me to open/close the content\"\n * style={{border: \"1px solid\", padding: \"15px\"}}\n * contentStyle={{paddingTop: \"15px\"}}>\n * This is the content\n * </Collapsible>\n *\n * @param {node} title clickable string/element to open/close the content\n * @param {node} children inner content of the Collapsible\n * @param {boolean} [isOpen=true] to control the Collapsible from the outside by passing a boolean value\n * @param {function} [onChange] callback for change of the content state\n * @param {object} [style] outer style of the element\n * @param {object} [titleStyle] the style of the title only\n * @param {object} [contentStyle] the title of the content only\n */","ErrorIndicator":"/**\n * @name\n * ErrorIndicator\n * \n * @module\n * Content\n * \n * @description\n * Show an error tooltip on a container\n * \n * @example\n * <ErrorIndicator error={new Error('message')}>\n * My error-full content\n * </ErrorIndicator>\n * \n * @param {node} children\n * @param {String|Error} [error]\n */","Menu":"/**\n * @name\n * Menu \n * \n * @module\n * Menus\n * \n * @description\n * Menu to select items\n * Wrap MenuItem components with the prop \"value\"\n * and control the chosen value by the Menu prop \"value\"\n * \n * @example\n * // Choose a color\n * <Menu value=\"pink\" onChange={(e, val) => console.log(val)}>\n * <MenuItem value=\"pink\"\n * style={{backgroundColor:\"#ecabab\"}}>\n * Color pink\n * </MenuItem>\n * <MenuItem value=\"cyan\"\n * style={{backgroundColor:\"#66cfdc\"}}>\n * Color cyan\n * </MenuItem>\n * <MenuItem value=\"green\"\n * style={{backgroundColor:\"#abca87\"}}>\n * Color green\n * </MenuItem>\n * </Menu>\n * \n * @param {string|number} [value] current selected value of MenuItem inside the menu\n * @param {function} [onChange] callback for changes in selected value\n * @param {node} children MenuItems to be selected\n */","MenuItem":"/**\n * @name \n * MenuItem\n * \n * @module\n * Menus\n * \n * @description\n * Menu Item to be used in Menu component\n * as a child. fill props.value with this item value.\n * \n * @example \n * // Example with a different root\n * <Menu value=\"pink\">\n * <MenuItem value=\"pink\"\n * style={{backgroundColor:\"#ecabab\"}}>\n * Color pink\n * </MenuItem>\n * <MenuItem value=\"cyan\"\n * style={{backgroundColor:\"#66cfdc\"}}>\n * Color cyan\n * </MenuItem>\n * </Menu>\n * \n * @example\n * <MenuItem value=\"pink\"\n * style={{backgroundColor:\"#ecabab\"}}>\n * Color pink\n * </MenuItem>\n *\n * @param {string|number} value this item value in the menu\n * @param {node} children\n */","Modal":"/**\n * @name\n * Modal\n * \n * @module\n * Content\n * \n * @description\n * Change isOpen to open/close the modal\n * \n * @example\n * <Modal className=\"modal_class_name\" title=\"title\">\n * inner modal content\n * </Modal>\n * \n * @param {boolean} [isOpen] change to open/close the modal\n * @param {string} title the modal title\n * @param {node} children the modal content\n * @param {function} onChange will execute the callback on change with the new value\n */","RaisedButton":"/**\n * @name \n * RaisedButton\n * \n * @module\n * Inputs\n * \n * @description\n * A styled button for clicking and hovering\n * \n * @example\n * <RaisedButton onClick={(e) => console.log('RaisedButton was clicked, event: ', e)}>\n * Raised Button Text\n * </RaisedButton>\n * \n * @param {function} [onClick] callback for the tooltip was clicked\n * @param {node} children the clickable element that will open the tooltip\n */","Separator":"/**\n * @name\n * Separator\n * \n * @module\n * General\n * \n * @description\n * A generic separator to be used between components\n *\n * @example\n * <Separator/>\n */","TextField":"/**\n * @name\n * TextField\n * \n * @module\n * Inputs\n * \n * @description\n * Text Field with adjustable height\n * It will lengthen the textarea up to 5 rows based on the content in it\n * use props.value to control the component.\n * Try writing in it!\n * \n * @example\n * // Without value\n * <TextField\n * placeholder=\"Placeholder Text\"\n * onChange={(e) => console.log('TextField was changed with value: ', e.target.value)}/>\n * \n * @example\n * // With controlled value, change only from the parent\n * <TextField\n * value=\"Can't change this\"\n * onChange={(e) => console.log('TextField was changed with value: ', e.target.value)}/>\n * \n * @param {string} [placeholder] value as a placeholder until user input another value\n * @param {string} [value] current value of the text field\n * @param {function} onChange\n */","Tooltip":"/**\n * @name\n * Tooltip\n * \n * @module\n * Content\n * \n * @description\n * Tooltip to be shown on hover or click events.\n * Wrap children to give them the tooltip upon them.\n * This is an auto-location Tooltip. Responsive solution to the tooltip.\n *\n * @example\n * // Default props\n * <Tooltip tooltip={'tooltip inner text!'}>\n * Click me to open the tooltip!\n * </Tooltip>\n * \n * @example \n * // center bottom directions\n * <Tooltip tooltip={'tooltip inner text on the bottom!'} side=\"bottom\" alignment=\"center\" trigger=\"hover\">\n * Text to open the tooltip upon on the bottom\n * </Tooltip>\n *\n * @param {*} [tooltip] tooltip inner content, can be text or elements\n * @param {\"top\"|\"bottom\"} [side=top] preferred placement of the tooltip relative to the element\n * @param {\"center\"|\"start\"|\"end\"} [alignment=center] preferred alignment of the tooltip relative to the element\n * @param {\"click\"|\"hover\"} [trigger=click] trigger event, on mobile you should stick with click\n * @param {function} [onTooltipOpen] callback for when the tooltip is opened\n * @param {function} [onAfterTooltipOpen] callback for after the tooltip is opened\n * @param {Boolean} [isOpen] controlled prop to open/close the tooltip\n * @param {node} [children] the element/s to be triggering the tooltip appearance\n */"};