optimizely-oui
Version:
Optimizely's Component Library.
67 lines (66 loc) • 13.5 kB
JSON
{
"STRING_DIFF": {
"before": "# Change Log\nAll notable changes to this project will be documented in this file.\nThis project adheres to [Semantic Versioning](http://semver.org/).\n\nThis file is similar to the format suggested by [Keep a CHANGELOG](https://github.com/olivierlacan/keep-a-changelog).\n\n## Unreleased\n\n## 44.1.0 - 2019-07-08\n- [Feature] Test render props option for `onDatesChange` access in **DateRangePicker** ([#1186](https://github.com/optimizely/oui/pull/1186))\n\n## 44.0.1 - 2019-07-01\n- [Patch] Add Container, Row, Col to main.js for exporting and consumption on Axiom guidelines site ((#1183)[https://github.com/optimizely/oui/pull/1183])\n",
"after": "# Change Log\nAll notable changes to this project will be documented in this file.\nThis project adheres to [Semantic Versioning](http://semver.org/).\n\nThis file is similar to the format suggested by [Keep a CHANGELOG](https://github.com/olivierlacan/keep-a-changelog).\n\n## Unreleased\n\n## 44.1.1 - 2019-07-08\n- [Patch] Add `addOnBlur` and `addOnPaste` props to the `TokensInput` component ([#1185](https://github.com/optimizely/oui/pull/1185))\n\n## 44.1.0 - 2019-07-08\n- [Feature] Introduce render props option for `onDatesChange` access in **DateRangePicker** ([#1186](https://github.com/optimizely/oui/pull/1186))\n\n## 44.0.1 - 2019-07-01\n- [Patch] Add Container, Row, Col to main.js for exporting and consumption on Axiom guidelines site ((#1183)[https://github.com/optimizely/oui/pull/1183])\n"
},
"JSON_DIFF": {
"before": {
"audience_conditions": "[\"and\", [\"or\", [\"or\",{\"name\": \"user_id\", \"value\": 123, \"match_type\": \"exact\", \"type\": \"custom_attribute\"},{\"name\": \"user_id\", \"value\": 456, \"match_type\": \"exact\", \"type\": \"custom_attribute\"},{\"name\": \"user_id\", \"value\": 789, \"match_type\": \"exact\", \"type\": \"custom_attribute\"},{\"name\": \"user_id\", \"value\": 321, \"match_type\": \"exact\", \"type\": \"custom_attribute\"},{\"name\": \"user_id\", \"value\": 654, \"match_type\": \"exact\", \"type\": \"custom_attribute\"},{\"name\": \"user_id\", \"value\": 987, \"match_type\": \"exact\", \"type\": \"custom_attribute\"},{\"name\": \"user_id\", \"value\": 111, \"match_type\": \"exact\", \"type\": \"custom_attribute\"},{\"name\": \"user_id\", \"value\": 333, \"match_type\": \"exact\", \"type\": \"custom_attribute\"},{\"name\": \"user_id\", \"value\": 777, \"match_type\": \"exact\", \"type\": \"custom_attribute\"},{\"name\": \"user_id\", \"value\": 999, \"match_type\": \"exact\", \"type\": \"custom_attribute\"}]]]",
"description": "creator: @tom | This Audience is for User IDs only. (User 1: 123) (User 2: 456) (User 3: 789) (User 4: 321) (User 5: 654) (User 6: 987) (User 7: 111) (User 8: 333) (User 9: 777) (User 10: 999)",
"environments": {
"staging": {
"id": 123,
"is_primary": true,
"rollout_rules": [
{
"status": "not_started",
"percentage_included": 0
}
]
},
"production": {
"id": 456,
"is_primary": false,
"rollout_rules": [
{
"status": "not_started",
"json_string": "[\"or\", { \"aud\": 123 }, { \"aud\": 456 }, { \"aud\": 789 }]",
"percentage_included": 0
}
]
}
},
"name": "My experiment name",
"javascript": "import React from 'react';\nimport PropTypes from 'prop-types';\n/**\n * @param {Object} props - Properties passed to component\n * @returns {ReactElement}\n */\n\nconst Button = ({\n ariaLabel,\n isSubmit,\n isLink,\n children,\n isActive,\n isDisabled,\n isLoading,\n loadingText,\n onBlur,\n onClick,\n onMouseDown,\n size,\n style,\n testSection,\n width = 'default',\n buttonRef,\n title,\n}) => {\n\n const buttonClassNames = classNames(\n 'oui-button', {\n 'is-active': isActive,\n 'oui-button--loading': isLoading,\n });\n\n const type = isSubmit ? 'submit' : 'button';\n\n function handleOnClick(event) {\n if (isDisabled || isLoading) {\n return;\n }\n onClick(event);\n }\n\n if (isLink) {\n return (\n <div\n data-oui-component={ true }\n className={ buttonClassNames }\n disabled={ isDisabled }\n onBlur={ onBlur }\n data-test-section={ testSection }\n ref={ buttonRef }>\n { children }\n </div>\n );\n }\n\n return (\n <button\n data-oui-component={ true }\n className={ buttonClassNames }\n disabled={ isDisabled || isLoading }\n type={ type }\n onBlur={ onBlur }\n onClick={ handleOnClick }\n onMouseDown={ onMouseDown }\n data-test-section={ testSection }\n aria-label={ ariaLabel }\n aria-live=\"polite\"\n title={ title }\n ref={ buttonRef }>\n { isLoading && <Spinner data-test-section=\"button-spinner\" size=\"tiny\"/> }\n { isLoading ? loadingText || 'Processing' : children }\n </button>\n );\n};\n\nButton.propTypes = {\n /** Describes buttons that have an icon but no text */\n ariaLabel: PropTypes.string,\n /** React ref to the underlying button component */\n buttonRef: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({ current: PropTypes.instanceOf(Element) }),\n ]),\n /** Text within the button */\n children: PropTypes.node.isRequired,\n /** Render button with active state */\n isActive: PropTypes.bool,\n /** Prevent users from interacting with the button */\n isDisabled: PropTypes.bool,\n /** Changes the button to a div for insertion within a Link component */\n isLink: PropTypes.bool,\n /** When true, adds a spinner to the button and disables the button */\n isLoading: PropTypes.bool,\n /** Make the button act as a submit button */\n isSubmit: PropTypes.bool,\n /** When the button adds a spinner, it displays this text */\n loadingText: PropTypes.string,\n /** Function that fires when the button loses focus */\n onBlur: PropTypes.func,\n /** Function that fires when the button is clicked on */\n onClick: PropTypes.func,\n /** Function that fires when the button is mouse downed */\n onMouseDown: PropTypes.func,\n /** Various height and width options */\n size: PropTypes.oneOf([\n 'tiny',\n 'small',\n 'large',\n 'narrow',\n 'tight',\n ]),\n /** Various color options */\n style: PropTypes.oneOf([\n 'highlight',\n 'danger',\n 'danger-outline',\n 'outline',\n 'outline-reverse',\n 'plain',\n 'toggle',\n 'underline',\n 'unstyled',\n ]),\n /** Hook for automated JavaScript tests */\n testSection: PropTypes.string,\n /** Title of the button shown as tooltip text when the button is hovered */\n title: PropTypes.string,\n /** Various height and width options */\n width: PropTypes.oneOf([\n 'default',\n 'full',\n ]),\n};\n\nButton.defaultProps = {\n isLink: false,\n isLoading: false,\n isDisabled: false,\n isSubmit: false,\n loadingText: '',\n onBlur: () => {},\n onClick: () => {},\n onMouseDown: () => {},\n width: 'default',\n};\n\nButton.displayName = 'Button';\n\nexport default Button;"
},
"after": {
"audience_conditions": "[\"and\", [\"or\", [\"or\",{\"name\": \"user_id\", \"value\": 123, \"match_type\": \"exact\", \"type\": \"custom_attribute\"},{\"name\": \"user_id\", \"value\": 456, \"match_type\": \"exact\", \"type\": \"custom_attribute\"},{\"name\": \"user_id\", \"value\": 789, \"match_type\": \"exact\", \"type\": \"custom_attribute\"},{\"name\": \"user_id\", \"value\": 321, \"match_type\": \"exact\", \"type\": \"custom_attribute\"},{\"name\": \"user_id\", \"value\": 654, \"match_type\": \"exact\", \"type\": \"custom_attribute\"},{\"name\": \"user_id\", \"value\": 987, \"match_type\": \"exact\", \"type\": \"custom_attribute\"},{\"name\": \"user_id\", \"value\": 111, \"match_type\": \"exact\", \"type\": \"custom_attribute\"},{\"name\": \"user_id\", \"value\": 333, \"match_type\": \"exact\", \"type\": \"custom_attribute\"},{\"name\": \"user_id\", \"value\": 777, \"match_type\": \"exact\", \"type\": \"custom_attribute\"}]]]",
"description": "creator: @tom | This Audience is for User IDs only. (User 1: 123) (User 2: 456) (User 3: 789) (User 4: 321) (User 5: 654) (User 6: 987) (User 7: 111) (User 8: 333) (User 9: 777) (User 10: 999) (User 11: 222)",
"environments": {
"staging": {
"id": 123,
"is_primary": true,
"rollout_rules": [
{
"status": "running",
"percentage_included": 0
}
]
},
"production": {
"id": 456,
"is_primary": false,
"rollout_rules": [
{
"status": "not_started",
"json_string": "[\"or\", { \"aud\": 123 }, { \"aud\": 456 }]",
"percentage_included": 0
}
]
}
},
"name": "My updated experiment name",
"javascript": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport Spinner from '../Spinner';\n\n/**\n * @param {Object} props - Properties passed to component\n * @returns {ReactElement}\n */\n\nconst Button = ({\n ariaLabel,\n isSubmit,\n isLink,\n children,\n isActive,\n isDisabled,\n isLoading,\n loadingText,\n onBlur,\n onClick,\n onMouseDown,\n size,\n style,\n testSection,\n width = 'default',\n buttonRef,\n title,\n}) => {\n\n const buttonClassNames = classNames(\n 'oui-button', {\n 'is-active': isActive,\n 'oui-button--loading': isLoading,\n });\n\n const type = isSubmit ? 'submit' : 'button';\n\n function handleOnClick(event) {\n if (isDisabled || isLoading) {\n return;\n }\n onClick(event);\n }\n\n if (isLink) {\n return (\n <div\n data-oui-component={ true }\n className={ buttonClassNames }\n disabled={ isDisabled }\n onBlur={ onBlur }\n data-test-section={ testSection }\n ref={ buttonRef }>\n { children }\n </div>\n );\n }\n\n return (\n <button\n data-oui-component={ true }\n className={ buttonClassNames }\n disabled={ isDisabled || isLoading }\n type={ type }\n onBlur={ onBlur }\n onClick={ handleOnClick }\n onMouseDown={ onMouseDown }\n data-test-section={ testSection }\n aria-label={ ariaLabel }\n aria-live=\"polite\"\n title={ title }\n ref={ buttonRef }>\n { isLoading && <Spinner data-test-section=\"button-spinner\" size=\"tiny\"/> }\n { isLoading ? loadingText || 'Processing' : children }\n </button>\n );\n};\n\nButton.propTypes = {\n /** Describes buttons that have an icon but no text */\n ariaLabel: PropTypes.string,\n /** React ref to the underlying button component */\n buttonRef: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({ current: PropTypes.instanceOf(Element) }),\n ]),\n /** Text within the button */\n children: PropTypes.node.isRequired,\n /** Render button with active state */\n isActive: PropTypes.bool,\n /** Prevent users from interacting with the button */\n isDisabled: PropTypes.bool,\n /** Changes the button to a div for insertion within a Link component */\n isLink: PropTypes.bool,\n /** When true, adds a spinner to the button and disables the button */\n isLoading: PropTypes.bool,\n /** Make the button act as a submit button */\n isSubmit: PropTypes.bool,\n /** When the button adds a spinner, it displays this text */\n loadingText: PropTypes.string,\n /** Function that fires when the button loses focus */\n onBlur: PropTypes.func,\n /** Function that fires when the button is clicked on */\n onClick: PropTypes.func,\n /** Function that fires when the button is mouse downed */\n onMouseDown: PropTypes.func,\n /** Various height and width options */\n size: PropTypes.oneOf([\n 'tiny',\n 'small',\n 'large',\n 'narrow',\n 'tight',\n ]),\n /** Various color options */\n style: PropTypes.oneOf([\n 'highlight',\n 'danger',\n 'danger-outline',\n 'outline',\n 'outline-reverse',\n 'plain',\n 'toggle',\n 'underline',\n 'unstyled',\n ]),\n /** Hook for automated JavaScript tests */\n testSection: PropTypes.string,\n /** Title of the button shown as tooltip text when the button is hovered */\n title: PropTypes.string,\n /** Various height and width options */\n width: PropTypes.oneOf([\n 'default',\n 'full',\n ]),\n};\n\nButton.defaultProps = {\n isLink: false,\n isLoading: false,\n isDisabled: false,\n isSubmit: false,\n loadingText: '',\n onBlur: () => {},\n onClick: () => {},\n onMouseDown: () => {},\n width: 'default',\n};\n\nButton.displayName = 'Button';\n\nexport default Button;"
}
}
}