npm - box-ui-elements - Versions diffs - 19.0.0-beta.8 → 19.0.0 - Mend

box-ui-elements 19.0.0-beta.8 → 19.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2051) hide show

package/es/components/pill-selector-dropdown/PillSelector.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/pill-selector-dropdown/PillSelector.js"],"names":["React","classNames","uniqueId","List","Tooltip","KEYS","RoundPill","Pill","SuggestedPillsRow","stopDefaultEvent","event","preventDefault","stopPropagation","PillSelectorBase","Component","isFocused","selectedIndex","selectedOptions","props","size","length","key","map","option","inputEl","focus","setState","inputValue","value","numPills","getNumSelected","state","backspace","index","resetSelectedIndex","onRemove","selectedOption","get","arrowLeft","Math","max","hiddenEl","arrowRight","render","allowInvalidPills","className","disabled","error","errorTooltipPosition","getPillClassName","getPillImageUrl","inputProps","onInput","onSuggestedPillAdd","placeholder","innerRef","showAvatars","showRoundedPills","suggestedPillsData","suggestedPillsFilter","suggestedPillsTitle","validator","rest","suggestedPillsEnabled","hasError","classes","ariaAttrs","errorMessageID","handleBlur","handleClick","handleFocus","handleKeyDown","undefined","bind","displayText","text","id","hasWarning","isExternalUser","hiddenRef","input","getPillsByKey","PillSelector","forwardRef","ref","displayName"],"mappings":"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","sourcesContent":["// @flow\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport uniqueId from 'lodash/uniqueId';\nimport { List } from 'immutable';\n\nimport Tooltip from '../tooltip';\nimport { KEYS } from '../../constants';\n\nimport RoundPill from './RoundPill';\nimport Pill from './Pill';\nimport SuggestedPillsRow from './SuggestedPillsRow';\nimport type { RoundOption, Option, OptionValue, SuggestedPillsFilter } from './flowTypes';\nimport type { Position } from '../tooltip';\n\nfunction stopDefaultEvent(event) {\n event.preventDefault();\n event.stopPropagation();\n}\n\ntype Props = {\n allowInvalidPills: boolean,\n className?: string,\n disabled?: boolean,\n error?: React.Node,\n /** Position of error message tooltip /\n errorTooltipPosition?: Position,\n /* Called on pill render to get a specific class name to use for a particular option. Note: Only has effect when showRoundedPills is true. /\n getPillClassName?: (option: Option) => string,\n /* Function to retrieve the image URL associated with a pill /\n getPillImageUrl?: (data: { id: string \| number, [key: string]: any }) => string,\n innerRef?: React.Ref<any>,\n inputProps: Object,\n onInput: Function,\n onRemove: Function,\n onSuggestedPillAdd?: Function,\n placeholder: string,\n selectedOptions: List<Object>,\n /* Whether to show avatars in pills (if rounded style is enabled) /\n showAvatars?: boolean,\n /* Whether to use rounded style for pills /\n showRoundedPills?: boolean,\n suggestedPillsData?: Array<Object>,\n suggestedPillsFilter?: SuggestedPillsFilter,\n suggestedPillsTitle?: string,\n validator: (option: Option \| OptionValue) => boolean,\n};\n\ntype State = {\n isFocused: boolean,\n selectedIndex: number,\n};\n\ntype DefaultProps = {\n allowInvalidPills: boolean,\n disabled: boolean,\n error: string,\n errorTooltipPosition: Position,\n inputProps: Object,\n placeholder: string,\n selectedOptions: List<Object>,\n validator: () => boolean,\n};\n\ntype Config = React.Config<Props, DefaultProps>;\n\nclass PillSelectorBase extends React.Component<Props, State> {\n static defaultProps: DefaultProps = {\n allowInvalidPills: false,\n disabled: false,\n error: '',\n errorTooltipPosition: 'bottom-left',\n inputProps: {},\n placeholder: '',\n selectedOptions: [],\n validator: () => true,\n };\n\n state = {\n isFocused: false,\n selectedIndex: -1,\n };\n\n getNumSelected = (): number => {\n const { selectedOptions } = this.props;\n\n return typeof selectedOptions.size === 'number' ? selectedOptions.size : selectedOptions.length;\n };\n\n getPillsByKey = (key: string): Array<any> => {\n const { selectedOptions } = this.props;\n\n return selectedOptions.map(option => option[key]);\n };\n\n inputEl: HTMLInputElement;\n\n handleClick = () => {\n this.inputEl.focus();\n };\n\n handleFocus = () => {\n this.setState({ isFocused: true });\n };\n\n handleBlur = () => {\n this.setState({ isFocused: false });\n };\n\n hiddenEl: HTMLSpanElement;\n\n handleKeyDown = (event: SyntheticKeyboardEvent<>) => {\n const inputValue = this.inputEl.value;\n const numPills = this.getNumSelected();\n const { selectedIndex } = this.state;\n\n switch (event.key) {\n case KEYS.backspace: {\n let index = -1;\n if (selectedIndex >= 0) {\n // remove selected pill\n index = selectedIndex;\n this.resetSelectedIndex();\n this.inputEl.focus();\n } else if (inputValue === '') {\n // remove last pill\n index = numPills - 1;\n }\n if (index >= 0) {\n const { onRemove, selectedOptions } = this.props;\n const selectedOption =\n // $FlowFixMe\n typeof selectedOptions.get === 'function' ? selectedOptions.get(index) : selectedOptions[index];\n onRemove(selectedOption, index);\n stopDefaultEvent(event);\n }\n break;\n }\n case KEYS.arrowLeft:\n if (selectedIndex >= 0) {\n // select previous pill\n this.setState({\n selectedIndex: Math.max(selectedIndex - 1, 0),\n });\n stopDefaultEvent(event);\n } else if (inputValue === '' && numPills > 0) {\n // select last pill\n this.hiddenEl.focus();\n this.setState({ selectedIndex: numPills - 1 });\n stopDefaultEvent(event);\n }\n break;\n case KEYS.arrowRight: {\n if (selectedIndex >= 0) {\n const index = selectedIndex + 1;\n if (index >= numPills) {\n // deselect last pill\n this.resetSelectedIndex();\n this.inputEl.focus();\n } else {\n // select next pill\n this.setState({ selectedIndex: index });\n }\n stopDefaultEvent(event);\n }\n break;\n }\n // no default\n }\n };\n\n errorMessageID = uniqueId('errorMessage');\n\n hiddenRef = (hiddenEl: ?HTMLSpanElement) => {\n if (hiddenEl) {\n this.hiddenEl = hiddenEl;\n }\n };\n\n resetSelectedIndex = () => {\n if (this.state.selectedIndex !== -1) {\n this.setState({ selectedIndex: -1 });\n }\n };\n\n render() {\n const { isFocused, selectedIndex } = this.state;\n const {\n allowInvalidPills,\n className,\n disabled,\n error,\n errorTooltipPosition,\n getPillClassName,\n getPillImageUrl,\n inputProps,\n onInput,\n onRemove,\n onSuggestedPillAdd,\n placeholder,\n innerRef,\n selectedOptions,\n showAvatars,\n showRoundedPills,\n suggestedPillsData,\n suggestedPillsFilter,\n suggestedPillsTitle,\n validator,\n ...rest\n } = this.props;\n const suggestedPillsEnabled = suggestedPillsData && suggestedPillsData.length > 0;\n const hasError = !!error;\n const classes = classNames('bdl-PillSelector', 'pill-selector-input-wrapper', {\n 'is-disabled': disabled,\n 'bdl-is-disabled': disabled,\n 'is-focused': isFocused,\n 'show-error': hasError,\n 'pill-selector-suggestions-enabled': suggestedPillsEnabled,\n 'bdl-PillSelector--suggestionsEnabled': suggestedPillsEnabled,\n });\n const ariaAttrs = {\n 'aria-invalid': hasError,\n 'aria-errormessage': this.errorMessageID,\n 'aria-describedby': this.errorMessageID,\n };\n\n return (\n <Tooltip isShown={hasError} text={error \|\| ''} position={errorTooltipPosition} theme=\"error\">\n {/ eslint-disable-next-line jsx-a11y/no-static-element-interactions /}\n <span\n className={classes}\n onBlur={this.handleBlur}\n onClick={this.handleClick}\n onFocus={this.handleFocus}\n onKeyDown={this.handleKeyDown}\n ref={innerRef}\n >\n {showRoundedPills\n ? selectedOptions.map((option: RoundOption, index: number) => {\n return (\n <RoundPill\n className={getPillClassName ? getPillClassName(option) : undefined}\n getPillImageUrl={getPillImageUrl}\n isValid={allowInvalidPills ? validator(option) : true}\n isDisabled={disabled}\n isSelected={index === selectedIndex}\n key={option.value}\n onRemove={onRemove.bind(this, option, index)}\n // $FlowFixMe option.text is for backwards compatibility\n text={option.displayText \|\| option.text}\n showAvatar={showAvatars}\n id={option.id}\n hasWarning={option.hasWarning}\n isExternal={option.isExternalUser}\n />\n );\n })\n : selectedOptions.map((option: Option, index: number) => {\n // TODO: This and associated types will be removed once all views are updates with round pills.\n return (\n <Pill\n isValid={allowInvalidPills ? validator(option) : true}\n isDisabled={disabled}\n isSelected={index === selectedIndex}\n key={option.value}\n onRemove={onRemove.bind(this, option, index)}\n // $FlowFixMe option.text is for backwards compatibility\n text={option.displayText \|\| option.text}\n />\n );\n })}\n\n {/ hidden element for focus/key events during pill selection */}\n <span\n aria-hidden=\"true\"\n className=\"accessibility-hidden\"\n onBlur={this.resetSelectedIndex}\n ref={this.hiddenRef}\n tabIndex={-1}\n data-testid=\"pill-selection-helper\"\n />\n <textarea\n {...ariaAttrs}\n {...rest}\n {...inputProps}\n autoComplete=\"off\"\n className={classNames('bdl-PillSelector-input', 'pill-selector-input', className)}\n disabled={disabled}\n onInput={onInput}\n placeholder={this.getNumSelected() === 0 ? placeholder : ''}\n ref={input => {\n this.inputEl = input;\n }}\n />\n <SuggestedPillsRow\n onSuggestedPillAdd={onSuggestedPillAdd}\n selectedPillsValues={this.getPillsByKey('value')}\n suggestedPillsFilter={suggestedPillsFilter}\n suggestedPillsData={suggestedPillsData}\n title={suggestedPillsTitle}\n />\n <span id={this.errorMessageID} className=\"accessibility-hidden\" role=\"alert\">\n {error}\n </span>\n </span>\n </Tooltip>\n );\n }\n}\n\nexport { PillSelectorBase };\n\nconst PillSelector = React.forwardRef<Config, HTMLSpanElement>((props: Config, ref: React.Ref<any>) => (\n <PillSelectorBase {...props} innerRef={ref} />\n));\nPillSelector.displayName = 'PillSelector';\n\nexport default PillSelector;\n"],"file":"PillSelector.js"}
1	+ {"version":3,"sources":["../../../src/components/pill-selector-dropdown/PillSelector.js"],"names":["React","classNames","uniqueId","List","Tooltip","KEYS","RoundPill","Pill","SuggestedPillsRow","stopDefaultEvent","event","preventDefault","stopPropagation","PillSelectorBase","Component","isFocused","selectedIndex","selectedOptions","props","size","length","key","map","option","inputEl","focus","setState","inputValue","value","numPills","getNumSelected","state","backspace","index","resetSelectedIndex","onRemove","selectedOption","get","arrowLeft","Math","max","hiddenEl","arrowRight","render","allowInvalidPills","className","disabled","error","errorTooltipPosition","getPillClassName","getPillImageUrl","inputProps","isInputDisabled","isInputFocusedNextLine","onInput","onSuggestedPillAdd","placeholder","innerRef","showAvatars","showRoundedPills","suggestedPillsData","suggestedPillsFilter","suggestedPillsTitle","validator","rest","suggestedPillsEnabled","hasError","classes","ariaAttrs","errorMessageID","handleBlur","handleClick","handleFocus","handleKeyDown","undefined","bind","displayText","text","id","hasWarning","isExternalUser","hiddenRef","input","getPillsByKey","PillSelector","forwardRef","ref","displayName"],"mappings":"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","sourcesContent":["// @flow\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport uniqueId from 'lodash/uniqueId';\nimport { List } from 'immutable';\n\nimport Tooltip from '../tooltip';\nimport { KEYS } from '../../constants';\n\nimport RoundPill from './RoundPill';\nimport Pill from './Pill';\nimport SuggestedPillsRow from './SuggestedPillsRow';\nimport type { RoundOption, Option, OptionValue, SuggestedPillsFilter } from './flowTypes';\nimport type { Position } from '../tooltip';\n\nfunction stopDefaultEvent(event) {\n event.preventDefault();\n event.stopPropagation();\n}\n\ntype Props = {\n allowInvalidPills: boolean,\n className?: string,\n disabled?: boolean,\n error?: React.Node,\n /** Position of error message tooltip /\n errorTooltipPosition?: Position,\n /* Called on pill render to get a specific class name to use for a particular option. Note: Only has effect when showRoundedPills is true. /\n getPillClassName?: (option: Option) => string,\n /* Function to retrieve the image URL associated with a pill /\n getPillImageUrl?: (data: { id: string \| number, [key: string]: any }) => string,\n innerRef?: React.Ref<any>,\n inputProps: Object,\n /* Allows disabling the textarea element without disabling the whole PillSelector /\n isInputDisabled?: boolean,\n /* Whether to show textarea in next line when focused /\n isInputFocusedNextLine?: boolean,\n onInput: Function,\n onRemove: Function,\n onSuggestedPillAdd?: Function,\n placeholder: string,\n selectedOptions: List<Object>,\n /* Whether to show avatars in pills (if rounded style is enabled) /\n showAvatars?: boolean,\n /* Whether to use rounded style for pills /\n showRoundedPills?: boolean,\n suggestedPillsData?: Array<Object>,\n suggestedPillsFilter?: SuggestedPillsFilter,\n suggestedPillsTitle?: string,\n validator: (option: Option \| OptionValue) => boolean,\n};\n\ntype State = {\n isFocused: boolean,\n selectedIndex: number,\n};\n\ntype DefaultProps = {\n allowInvalidPills: boolean,\n disabled: boolean,\n error: string,\n errorTooltipPosition: Position,\n inputProps: Object,\n placeholder: string,\n selectedOptions: List<Object>,\n validator: () => boolean,\n};\n\ntype Config = React.Config<Props, DefaultProps>;\n\nclass PillSelectorBase extends React.Component<Props, State> {\n static defaultProps: DefaultProps = {\n allowInvalidPills: false,\n disabled: false,\n error: '',\n errorTooltipPosition: 'bottom-left',\n inputProps: {},\n placeholder: '',\n selectedOptions: [],\n validator: () => true,\n };\n\n state = {\n isFocused: false,\n selectedIndex: -1,\n };\n\n getNumSelected = (): number => {\n const { selectedOptions } = this.props;\n\n return typeof selectedOptions.size === 'number' ? selectedOptions.size : selectedOptions.length;\n };\n\n getPillsByKey = (key: string): Array<any> => {\n const { selectedOptions } = this.props;\n\n return selectedOptions.map(option => option[key]);\n };\n\n inputEl: HTMLInputElement;\n\n handleClick = () => {\n this.inputEl.focus();\n };\n\n handleFocus = () => {\n this.setState({ isFocused: true });\n };\n\n handleBlur = () => {\n this.setState({ isFocused: false });\n };\n\n hiddenEl: HTMLSpanElement;\n\n handleKeyDown = (event: SyntheticKeyboardEvent<>) => {\n const inputValue = this.inputEl.value;\n const numPills = this.getNumSelected();\n const { selectedIndex } = this.state;\n\n switch (event.key) {\n case KEYS.backspace: {\n let index = -1;\n if (selectedIndex >= 0) {\n // remove selected pill\n index = selectedIndex;\n this.resetSelectedIndex();\n this.inputEl.focus();\n } else if (inputValue === '') {\n // remove last pill\n index = numPills - 1;\n }\n if (index >= 0) {\n const { onRemove, selectedOptions } = this.props;\n const selectedOption =\n // $FlowFixMe\n typeof selectedOptions.get === 'function' ? selectedOptions.get(index) : selectedOptions[index];\n onRemove(selectedOption, index);\n stopDefaultEvent(event);\n }\n break;\n }\n case KEYS.arrowLeft:\n if (selectedIndex >= 0) {\n // select previous pill\n this.setState({\n selectedIndex: Math.max(selectedIndex - 1, 0),\n });\n stopDefaultEvent(event);\n } else if (inputValue === '' && numPills > 0) {\n // select last pill\n this.hiddenEl.focus();\n this.setState({ selectedIndex: numPills - 1 });\n stopDefaultEvent(event);\n }\n break;\n case KEYS.arrowRight: {\n if (selectedIndex >= 0) {\n const index = selectedIndex + 1;\n if (index >= numPills) {\n // deselect last pill\n this.resetSelectedIndex();\n this.inputEl.focus();\n } else {\n // select next pill\n this.setState({ selectedIndex: index });\n }\n stopDefaultEvent(event);\n }\n break;\n }\n // no default\n }\n };\n\n errorMessageID = uniqueId('errorMessage');\n\n hiddenRef = (hiddenEl: ?HTMLSpanElement) => {\n if (hiddenEl) {\n this.hiddenEl = hiddenEl;\n }\n };\n\n resetSelectedIndex = () => {\n if (this.state.selectedIndex !== -1) {\n this.setState({ selectedIndex: -1 });\n }\n };\n\n render() {\n const { isFocused, selectedIndex } = this.state;\n const {\n allowInvalidPills,\n className,\n disabled,\n error,\n errorTooltipPosition,\n getPillClassName,\n getPillImageUrl,\n inputProps,\n isInputDisabled,\n isInputFocusedNextLine,\n onInput,\n onRemove,\n onSuggestedPillAdd,\n placeholder,\n innerRef,\n selectedOptions,\n showAvatars,\n showRoundedPills,\n suggestedPillsData,\n suggestedPillsFilter,\n suggestedPillsTitle,\n validator,\n ...rest\n } = this.props;\n const suggestedPillsEnabled = suggestedPillsData && suggestedPillsData.length > 0;\n const hasError = !!error;\n const classes = classNames('bdl-PillSelector', 'pill-selector-input-wrapper', {\n 'is-disabled': disabled,\n 'bdl-is-disabled': disabled,\n 'is-focused': isFocused,\n 'show-error': hasError,\n 'pill-selector-suggestions-enabled': suggestedPillsEnabled,\n 'bdl-PillSelector--suggestionsEnabled': suggestedPillsEnabled,\n });\n const ariaAttrs = {\n 'aria-invalid': hasError,\n 'aria-errormessage': this.errorMessageID,\n 'aria-describedby': this.errorMessageID,\n };\n\n return (\n <Tooltip isShown={hasError} text={error \|\| ''} position={errorTooltipPosition} theme=\"error\">\n {/ eslint-disable-next-line jsx-a11y/no-static-element-interactions /}\n <span\n className={classes}\n onBlur={this.handleBlur}\n onClick={this.handleClick}\n onFocus={this.handleFocus}\n onKeyDown={this.handleKeyDown}\n ref={innerRef}\n >\n {showRoundedPills\n ? selectedOptions.map((option: RoundOption, index: number) => {\n return (\n <RoundPill\n className={getPillClassName ? getPillClassName(option) : undefined}\n getPillImageUrl={getPillImageUrl}\n isValid={allowInvalidPills ? validator(option) : true}\n isDisabled={disabled}\n isSelected={index === selectedIndex}\n key={option.value}\n onRemove={onRemove.bind(this, option, index)}\n // $FlowFixMe option.text is for backwards compatibility\n text={option.displayText \|\| option.text}\n showAvatar={showAvatars}\n id={option.id}\n hasWarning={option.hasWarning}\n isExternal={option.isExternalUser}\n />\n );\n })\n : selectedOptions.map((option: Option, index: number) => {\n // TODO: This and associated types will be removed once all views are updates with round pills.\n return (\n <Pill\n isValid={allowInvalidPills ? validator(option) : true}\n isDisabled={disabled}\n isSelected={index === selectedIndex}\n key={option.value}\n onRemove={onRemove.bind(this, option, index)}\n // $FlowFixMe option.text is for backwards compatibility\n text={option.displayText \|\| option.text}\n />\n );\n })}\n\n {/ hidden element for focus/key events during pill selection */}\n <span\n aria-hidden=\"true\"\n className=\"accessibility-hidden\"\n onBlur={this.resetSelectedIndex}\n ref={this.hiddenRef}\n tabIndex={-1}\n data-testid=\"pill-selection-helper\"\n />\n <textarea\n {...ariaAttrs}\n {...rest}\n {...inputProps}\n autoComplete=\"off\"\n className={classNames('bdl-PillSelector-input', 'pill-selector-input', className, {\n 'bdl-PillSelector-input--nextLine': isInputFocusedNextLine,\n })}\n disabled={disabled \|\| isInputDisabled}\n onInput={onInput}\n placeholder={this.getNumSelected() === 0 ? placeholder : ''}\n ref={input => {\n this.inputEl = input;\n }}\n />\n <SuggestedPillsRow\n onSuggestedPillAdd={onSuggestedPillAdd}\n selectedPillsValues={this.getPillsByKey('value')}\n suggestedPillsFilter={suggestedPillsFilter}\n suggestedPillsData={suggestedPillsData}\n title={suggestedPillsTitle}\n />\n <span id={this.errorMessageID} className=\"accessibility-hidden\" role=\"alert\">\n {error}\n </span>\n </span>\n </Tooltip>\n );\n }\n}\n\nexport { PillSelectorBase };\n\nconst PillSelector = React.forwardRef<Config, HTMLSpanElement>((props: Config, ref: React.Ref<any>) => (\n <PillSelectorBase {...props} innerRef={ref} />\n));\nPillSelector.displayName = 'PillSelector';\n\nexport default PillSelector;\n"],"file":"PillSelector.js"}

package/es/components/pill-selector-dropdown/PillSelector.scss CHANGED Viewed

@@ -50,6 +50,10 @@
             border-color: $primary-color;
             outline: 0;
             box-shadow: none;
+            .bdl-PillSelector-input--nextLine {
+                flex: 1 1 100%;
+            }
         }
         &.show-error {

package/es/components/pill-selector-dropdown/PillSelectorDropdown.stories.js CHANGED Viewed

@@ -323,7 +323,7 @@ export const customPillStyles = () => {
   }, option.displayText))));
 };
 export default {
-  title: 'Components|PillSelectorDropdown',
+  title: 'Components/PillSelectorDropdown',
   component: PillSelectorDropdown,
   parameters: {
     notes

package/es/components/pill-selector-dropdown/PillSelectorDropdown.stories.js.flow CHANGED Viewed

@@ -322,7 +322,7 @@ export const customPillStyles = () => {
 };
 export default {
-    title: 'Components|PillSelectorDropdown',
+    title: 'Components/PillSelectorDropdown',
     component: PillSelectorDropdown,
     parameters: {
         notes,

package/es/components/pill-selector-dropdown/PillSelectorDropdown.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/pill-selector-dropdown/PillSelectorDropdown.stories.js"],"names":["React","State","Store","ContactDatalistItem","PillSelectorDropdown","notes","users","id","name","isExternalUser","generateProps","store","handleInput","value","selectorOptions","forEach","user","toLowerCase","indexOf","push","displayText","set","error","handleSelect","pills","selectedOptions","get","handleRemove","option","index","splice","validator","text","pattern","test","validateForError","count","length","empty","emptyStore","state","map","withPills","storeWithPills","showRoundedPills","showAvatars","customPillStyles","getPillClassName","title","component","parameters"],"mappings":"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","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { State, Store } from '@sambego/storybook-state';\n\nimport ContactDatalistItem from '../contact-datalist-item';\nimport PillSelectorDropdown from './PillSelectorDropdown';\nimport notes from './PillSelectorDropdown.notes.md';\n\nimport './PillSelectorDropdown.stories.scss';\n\nconst users = [\n { id: 0, name: 'bob@foo.bar' },\n { id: 1, name: 'sally@foo.bar', isExternalUser: true },\n { id: 2, name: 'jean@foo.bar' },\n { id: 3, name: 'longlonglonglonglonglonglonglonglonglonglonglongemail@foo.bar' },\n { id: 4, name: 'anotherlonglonglonglonglonglonglonglonglonglonglonglongemail@foo.bar' },\n { id: 5, name: 'aaa@foo.bar' },\n { id: 6, name: 'bbb@foo.bar' },\n { id: 7, name: 'ccc@foo.bar' },\n];\n\nfunction generateProps(store) {\n const handleInput = value => {\n const selectorOptions = [];\n if (value !== '') {\n users.forEach(user => {\n if (user.name.toLowerCase().indexOf(value.toLowerCase()) !== -1) {\n selectorOptions.push({\n displayText: user.name,\n value: user.id,\n });\n }\n });\n }\n // As user is typing, reset error and update selectorOptions\n store.set({ selectorOptions, error: '' });\n };\n\n const handleSelect = pills => {\n store.set({\n selectedOptions: [...store.get('selectedOptions'), ...pills],\n });\n };\n\n const handleRemove = (option, index) => {\n const selectedOptions = [...store.get('selectedOptions')];\n selectedOptions.splice(index, 1);\n store.set({\n selectedOptions,\n });\n };\n\n const validator = text => {\n // email input validation\n const pattern = /^[^\\s<>@,]+@[^\\s<>@,/\\\\]+\\.[^\\s<>@,]+$/i;\n return pattern.test(((text: any): string));\n };\n\n const validateForError = text => {\n const count = store.get('selectedOptions').length;\n let error = '';\n\n if (!text && count === 0) {\n error = 'Field Required';\n } else if (text && !validator(text)) {\n error = 'Invalid Email Address';\n }\n\n store.set({ error });\n };\n\n return {\n handleInput,\n handleRemove,\n handleSelect,\n validator,\n validateForError,\n };\n}\n\nexport const empty = () => {\n const emptyStore = new Store({\n error: '',\n selectedOptions: [],\n selectorOptions: [],\n });\n const { handleInput, handleRemove, handleSelect, validator, validateForError } = generateProps(emptyStore);\n return (\n <State store={emptyStore}>\n {state => (\n <PillSelectorDropdown\n allowCustomPills\n error={state.error}\n placeholder=\"Names or email addresses\"\n onInput={handleInput}\n onRemove={handleRemove}\n onSelect={handleSelect}\n selectedOptions={state.selectedOptions}\n selectorOptions={state.selectorOptions}\n validateForError={validateForError}\n validator={validator}\n >\n {state.selectorOptions.map(option => (\n <ContactDatalistItem key={option.value} name={option.displayText}>\n {option.displayText}\n </ContactDatalistItem>\n ))}\n </PillSelectorDropdown>\n )}\n </State>\n );\n};\n\nexport const withPills = () => {\n const storeWithPills = new Store({\n error: '',\n selectedOptions: [\n {\n displayText: users[2].name,\n value: users[2].name,\n },\n {\n displayText: users[1].name,\n value: users[1].name,\n },\n {\n displayText: users[4].name,\n value: users[4].name,\n },\n ],\n selectorOptions: [],\n });\n const { handleInput, handleRemove, handleSelect, validator, validateForError } = generateProps(storeWithPills);\n return (\n <State store={storeWithPills}>\n {state => (\n <PillSelectorDropdown\n allowCustomPills\n error={state.error}\n placeholder=\"Names or email addresses\"\n onInput={handleInput}\n onRemove={handleRemove}\n onSelect={handleSelect}\n selectedOptions={state.selectedOptions}\n selectorOptions={state.selectorOptions}\n validateForError={validateForError}\n validator={validator}\n >\n {state.selectorOptions.map(option => (\n <ContactDatalistItem key={option.value} name={option.value}>\n {option.displayText}\n </ContactDatalistItem>\n ))}\n </PillSelectorDropdown>\n )}\n </State>\n );\n};\n\nexport const showRoundedPills = () => {\n const storeWithPills = new Store({\n error: '',\n selectedOptions: [\n {\n displayText: users[2].name,\n value: users[2].name,\n },\n {\n displayText: users[1].name,\n value: users[1].name,\n },\n {\n displayText: users[4].name,\n value: users[4].name,\n },\n ],\n selectorOptions: [],\n });\n const { handleInput, handleRemove, handleSelect, validator, validateForError } = generateProps(storeWithPills);\n return (\n <State store={storeWithPills}>\n {state => (\n <PillSelectorDropdown\n allowCustomPills\n error={state.error}\n placeholder=\"Names or email addresses\"\n onInput={handleInput}\n onRemove={handleRemove}\n onSelect={handleSelect}\n selectedOptions={state.selectedOptions}\n selectorOptions={state.selectorOptions}\n showRoundedPills\n validateForError={validateForError}\n validator={validator}\n >\n {state.selectorOptions.map(option => (\n <ContactDatalistItem key={option.value} name={option.value}>\n {option.displayText}\n </ContactDatalistItem>\n ))}\n </PillSelectorDropdown>\n )}\n </State>\n );\n};\n\nexport const showAvatars = () => {\n const storeWithPills = new Store({\n error: '',\n selectedOptions: [\n {\n text: users[2].name,\n value: users[2].name,\n id: users[2].id,\n },\n {\n text: users[1].name,\n value: users[1].name,\n id: users[1].id,\n isExternalUser: users[1].isExternalUser,\n },\n {\n text: users[3].name,\n value: users[3].name,\n id: users[3].id,\n },\n ],\n selectorOptions: [],\n });\n const { handleInput, handleRemove, handleSelect, validator, validateForError } = generateProps(storeWithPills);\n return (\n <State store={storeWithPills}>\n {state => (\n <PillSelectorDropdown\n allowCustomPills\n error={state.error}\n placeholder=\"Names or email addresses\"\n onInput={handleInput}\n onRemove={handleRemove}\n onSelect={handleSelect}\n selectedOptions={state.selectedOptions}\n selectorOptions={state.selectorOptions}\n showAvatars\n showRoundedPills\n validateForError={validateForError}\n validator={validator}\n >\n {state.selectorOptions.map(option => (\n <ContactDatalistItem key={option.value} name={option.value}>\n {option.displayText}\n </ContactDatalistItem>\n ))}\n </PillSelectorDropdown>\n )}\n </State>\n );\n};\n\nexport const customPillStyles = () => {\n /*\n NOTE: For consistent styling, use bdl-RoundPill mixin when creating custom pill classes.\n \n Example:\n \n .bdl-RoundPill {\n * &.is-custom {\n * @include bdl-RoundPill($border-color: $bdl-watermelon-red-50, $selected-border-color: $bdl-watermelon-red-50);\n * }\n * }\n \n \n */\n const storeWithPills = new Store({\n error: '',\n selectedOptions: [\n {\n displayText: 'default@example.com',\n value: '1',\n },\n {\n displayText: 'custom@example.com',\n value: '2',\n },\n ],\n selectorOptions: [],\n });\n const getPillClassName = ({ value }) => {\n switch (value) {\n case '2':\n return 'is-custom';\n default:\n return '';\n }\n };\n const { handleInput, handleRemove, handleSelect, validator, validateForError } = generateProps(storeWithPills);\n return (\n <State store={storeWithPills}>\n {state => (\n <PillSelectorDropdown\n allowCustomPills\n error={state.error}\n getPillClassName={getPillClassName}\n placeholder=\"Names or email addresses\"\n onInput={handleInput}\n onRemove={handleRemove}\n onSelect={handleSelect}\n selectedOptions={state.selectedOptions}\n selectorOptions={state.selectorOptions}\n showRoundedPills\n validateForError={validateForError}\n validator={validator}\n >\n {state.selectorOptions.map(option => (\n <ContactDatalistItem key={option.value} name={option.displayText}>\n {option.displayText}\n </ContactDatalistItem>\n ))}\n </PillSelectorDropdown>\n )}\n </State>\n );\n};\n\nexport default {\n title: 'Components\|PillSelectorDropdown',\n component: PillSelectorDropdown,\n parameters: {\n notes,\n },\n};\n"],"file":"PillSelectorDropdown.stories.js"}
1	+ {"version":3,"sources":["../../../src/components/pill-selector-dropdown/PillSelectorDropdown.stories.js"],"names":["React","State","Store","ContactDatalistItem","PillSelectorDropdown","notes","users","id","name","isExternalUser","generateProps","store","handleInput","value","selectorOptions","forEach","user","toLowerCase","indexOf","push","displayText","set","error","handleSelect","pills","selectedOptions","get","handleRemove","option","index","splice","validator","text","pattern","test","validateForError","count","length","empty","emptyStore","state","map","withPills","storeWithPills","showRoundedPills","showAvatars","customPillStyles","getPillClassName","title","component","parameters"],"mappings":"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","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { State, Store } from '@sambego/storybook-state';\n\nimport ContactDatalistItem from '../contact-datalist-item';\nimport PillSelectorDropdown from './PillSelectorDropdown';\nimport notes from './PillSelectorDropdown.notes.md';\n\nimport './PillSelectorDropdown.stories.scss';\n\nconst users = [\n { id: 0, name: 'bob@foo.bar' },\n { id: 1, name: 'sally@foo.bar', isExternalUser: true },\n { id: 2, name: 'jean@foo.bar' },\n { id: 3, name: 'longlonglonglonglonglonglonglonglonglonglonglongemail@foo.bar' },\n { id: 4, name: 'anotherlonglonglonglonglonglonglonglonglonglonglonglongemail@foo.bar' },\n { id: 5, name: 'aaa@foo.bar' },\n { id: 6, name: 'bbb@foo.bar' },\n { id: 7, name: 'ccc@foo.bar' },\n];\n\nfunction generateProps(store) {\n const handleInput = value => {\n const selectorOptions = [];\n if (value !== '') {\n users.forEach(user => {\n if (user.name.toLowerCase().indexOf(value.toLowerCase()) !== -1) {\n selectorOptions.push({\n displayText: user.name,\n value: user.id,\n });\n }\n });\n }\n // As user is typing, reset error and update selectorOptions\n store.set({ selectorOptions, error: '' });\n };\n\n const handleSelect = pills => {\n store.set({\n selectedOptions: [...store.get('selectedOptions'), ...pills],\n });\n };\n\n const handleRemove = (option, index) => {\n const selectedOptions = [...store.get('selectedOptions')];\n selectedOptions.splice(index, 1);\n store.set({\n selectedOptions,\n });\n };\n\n const validator = text => {\n // email input validation\n const pattern = /^[^\\s<>@,]+@[^\\s<>@,/\\\\]+\\.[^\\s<>@,]+$/i;\n return pattern.test(((text: any): string));\n };\n\n const validateForError = text => {\n const count = store.get('selectedOptions').length;\n let error = '';\n\n if (!text && count === 0) {\n error = 'Field Required';\n } else if (text && !validator(text)) {\n error = 'Invalid Email Address';\n }\n\n store.set({ error });\n };\n\n return {\n handleInput,\n handleRemove,\n handleSelect,\n validator,\n validateForError,\n };\n}\n\nexport const empty = () => {\n const emptyStore = new Store({\n error: '',\n selectedOptions: [],\n selectorOptions: [],\n });\n const { handleInput, handleRemove, handleSelect, validator, validateForError } = generateProps(emptyStore);\n return (\n <State store={emptyStore}>\n {state => (\n <PillSelectorDropdown\n allowCustomPills\n error={state.error}\n placeholder=\"Names or email addresses\"\n onInput={handleInput}\n onRemove={handleRemove}\n onSelect={handleSelect}\n selectedOptions={state.selectedOptions}\n selectorOptions={state.selectorOptions}\n validateForError={validateForError}\n validator={validator}\n >\n {state.selectorOptions.map(option => (\n <ContactDatalistItem key={option.value} name={option.displayText}>\n {option.displayText}\n </ContactDatalistItem>\n ))}\n </PillSelectorDropdown>\n )}\n </State>\n );\n};\n\nexport const withPills = () => {\n const storeWithPills = new Store({\n error: '',\n selectedOptions: [\n {\n displayText: users[2].name,\n value: users[2].name,\n },\n {\n displayText: users[1].name,\n value: users[1].name,\n },\n {\n displayText: users[4].name,\n value: users[4].name,\n },\n ],\n selectorOptions: [],\n });\n const { handleInput, handleRemove, handleSelect, validator, validateForError } = generateProps(storeWithPills);\n return (\n <State store={storeWithPills}>\n {state => (\n <PillSelectorDropdown\n allowCustomPills\n error={state.error}\n placeholder=\"Names or email addresses\"\n onInput={handleInput}\n onRemove={handleRemove}\n onSelect={handleSelect}\n selectedOptions={state.selectedOptions}\n selectorOptions={state.selectorOptions}\n validateForError={validateForError}\n validator={validator}\n >\n {state.selectorOptions.map(option => (\n <ContactDatalistItem key={option.value} name={option.value}>\n {option.displayText}\n </ContactDatalistItem>\n ))}\n </PillSelectorDropdown>\n )}\n </State>\n );\n};\n\nexport const showRoundedPills = () => {\n const storeWithPills = new Store({\n error: '',\n selectedOptions: [\n {\n displayText: users[2].name,\n value: users[2].name,\n },\n {\n displayText: users[1].name,\n value: users[1].name,\n },\n {\n displayText: users[4].name,\n value: users[4].name,\n },\n ],\n selectorOptions: [],\n });\n const { handleInput, handleRemove, handleSelect, validator, validateForError } = generateProps(storeWithPills);\n return (\n <State store={storeWithPills}>\n {state => (\n <PillSelectorDropdown\n allowCustomPills\n error={state.error}\n placeholder=\"Names or email addresses\"\n onInput={handleInput}\n onRemove={handleRemove}\n onSelect={handleSelect}\n selectedOptions={state.selectedOptions}\n selectorOptions={state.selectorOptions}\n showRoundedPills\n validateForError={validateForError}\n validator={validator}\n >\n {state.selectorOptions.map(option => (\n <ContactDatalistItem key={option.value} name={option.value}>\n {option.displayText}\n </ContactDatalistItem>\n ))}\n </PillSelectorDropdown>\n )}\n </State>\n );\n};\n\nexport const showAvatars = () => {\n const storeWithPills = new Store({\n error: '',\n selectedOptions: [\n {\n text: users[2].name,\n value: users[2].name,\n id: users[2].id,\n },\n {\n text: users[1].name,\n value: users[1].name,\n id: users[1].id,\n isExternalUser: users[1].isExternalUser,\n },\n {\n text: users[3].name,\n value: users[3].name,\n id: users[3].id,\n },\n ],\n selectorOptions: [],\n });\n const { handleInput, handleRemove, handleSelect, validator, validateForError } = generateProps(storeWithPills);\n return (\n <State store={storeWithPills}>\n {state => (\n <PillSelectorDropdown\n allowCustomPills\n error={state.error}\n placeholder=\"Names or email addresses\"\n onInput={handleInput}\n onRemove={handleRemove}\n onSelect={handleSelect}\n selectedOptions={state.selectedOptions}\n selectorOptions={state.selectorOptions}\n showAvatars\n showRoundedPills\n validateForError={validateForError}\n validator={validator}\n >\n {state.selectorOptions.map(option => (\n <ContactDatalistItem key={option.value} name={option.value}>\n {option.displayText}\n </ContactDatalistItem>\n ))}\n </PillSelectorDropdown>\n )}\n </State>\n );\n};\n\nexport const customPillStyles = () => {\n /*\n NOTE: For consistent styling, use bdl-RoundPill mixin when creating custom pill classes.\n \n Example:\n \n .bdl-RoundPill {\n * &.is-custom {\n * @include bdl-RoundPill($border-color: $bdl-watermelon-red-50, $selected-border-color: $bdl-watermelon-red-50);\n * }\n * }\n \n \n */\n const storeWithPills = new Store({\n error: '',\n selectedOptions: [\n {\n displayText: 'default@example.com',\n value: '1',\n },\n {\n displayText: 'custom@example.com',\n value: '2',\n },\n ],\n selectorOptions: [],\n });\n const getPillClassName = ({ value }) => {\n switch (value) {\n case '2':\n return 'is-custom';\n default:\n return '';\n }\n };\n const { handleInput, handleRemove, handleSelect, validator, validateForError } = generateProps(storeWithPills);\n return (\n <State store={storeWithPills}>\n {state => (\n <PillSelectorDropdown\n allowCustomPills\n error={state.error}\n getPillClassName={getPillClassName}\n placeholder=\"Names or email addresses\"\n onInput={handleInput}\n onRemove={handleRemove}\n onSelect={handleSelect}\n selectedOptions={state.selectedOptions}\n selectorOptions={state.selectorOptions}\n showRoundedPills\n validateForError={validateForError}\n validator={validator}\n >\n {state.selectorOptions.map(option => (\n <ContactDatalistItem key={option.value} name={option.displayText}>\n {option.displayText}\n </ContactDatalistItem>\n ))}\n </PillSelectorDropdown>\n )}\n </State>\n );\n};\n\nexport default {\n title: 'Components/PillSelectorDropdown',\n component: PillSelectorDropdown,\n parameters: {\n notes,\n },\n};\n"],"file":"PillSelectorDropdown.stories.js"}

package/es/components/plain-button/PlainButton.stories.js CHANGED Viewed

@@ -40,7 +40,7 @@ export const fixingMargins = () => React.createElement(React.Fragment, null, Rea
   className: "bdl-SpecialButtonFix2"
 }, React.createElement(Icon, null))), React.createElement("p", null, "You can set all 4 margins inline using shorthand property syntax.", React.createElement("pre", null, React.createElement("code", null, "\n            .bdl-SpecialButtonFix2 {\n                @include bdl-Button-margins($bdl-grid-unit*2 $bdl-grid-unit*3 0 $bdl-grid-unit*4);\n            }\n                "))), React.createElement("p", null, React.createElement("b", null, "Why not fix this?"), " We will eventually, but since this behavior is relied upon in many places it is a breaking change that needs to be rolled out strategically."));
 export default {
-  title: 'Components|Buttons/PlainButton',
+  title: 'Components/Buttons/PlainButton',
   component: PlainButton,
   parameters: {
     notes

package/es/components/plain-button/PlainButton.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/plain-button/PlainButton.stories.tsx"],"names":["React","boolean","Icon","vars","PlainButton","ButtonType","notes","regular","BUTTON","disabled","fixingMargins","backgroundColor","bdlLightBlue20","display","bdlWatermelonRed10","bdlGreenLight10","title","component","parameters"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,OAAT,QAAwB,wBAAxB;AAEA,OAAOC,IAAP,MAAiB,8BAAjB;AACA,OAAO,KAAKC,IAAZ,MAAsB,wBAAtB;AAEA,OAAOC,WAAP,MAAwB,eAAxB;AACA,SAASC,UAAT,QAA2B,WAA3B;AACA,OAAOC,KAAP,MAAkB,0BAAlB;AAEA,OAAO,MAAMC,OAAO,GAAG,MACnB,oBAAC,WAAD;AAAa,EAAA,UAAU,EAAEN,OAAO,CAAC,YAAD,EAAe,KAAf,CAAhC;AAAuD,EAAA,IAAI,EAAEI,UAAU,CAACG;AAAxE,gBADG;AAMP,OAAO,MAAMC,QAAQ,GAAG,MAAM,oBAAC,WAAD;AAAa,EAAA,UAAU;AAAvB,gBAAvB;AAEP,OAAO,MAAMC,aAAa,GAAG,MACzB,0CACI;AAAK,EAAA,KAAK,EAAE;AAAEC,IAAAA,eAAe,EAAER,IAAI,CAACS,cAAxB;AAAwCC,IAAAA,OAAO,EAAE;AAAjD;AAAZ,GACI,oBAAC,WAAD,QACI,oBAAC,IAAD,OADJ,CADJ,CADJ,EAMI,4FANJ,EAQI,kJARJ,EAeI;AAAG,EAAA,KAAK,EAAE;AAAEF,IAAAA,eAAe,EAAER,IAAI,CAACW,kBAAxB;AAA4CD,IAAAA,OAAO,EAAE;AAArD;AAAV,GACI,oBAAC,WAAD;AAAa,EAAA,SAAS,EAAC;AAAvB,GACI,oBAAC,IAAD,OADJ,CADJ,CAfJ,EAoBI,+HAEI,iCACI,sJADJ,CAFJ,CApBJ,EAgCI,+OAhCJ,EAyCI;AAAG,EAAA,KAAK,EAAE;AAAEF,IAAAA,eAAe,EAAER,IAAI,CAACY,eAAxB;AAAyCF,IAAAA,OAAO,EAAE;AAAlD;AAAV,GACI,oBAAC,WAAD;AAAa,EAAA,SAAS,EAAC;AAAvB,GACI,oBAAC,IAAD,OADJ,CADJ,CAzCJ,EA8CI,+FAEI,iCACI,2KADJ,CAFJ,CA9CJ,EA0DI,8PA1DJ,EAmEI;AAAG,EAAA,KAAK,EAAE;AAAEF,IAAAA,eAAe,EAAER,IAAI,CAACY,eAAxB;AAAyCF,IAAAA,OAAO,EAAE;AAAlD;AAAV,GACI,oBAAC,WAAD;AAAa,EAAA,SAAS,EAAC;AAAvB,GACI,oBAAC,IAAD,OADJ,CADJ,CAnEJ,EAwEI,oGAEI,iCACI,gNADJ,CAFJ,CAxEJ,EAoFI,+BACI,mDADJ,kJApFJ,CADG;AA4FP,eAAe;AACXG,EAAAA,KAAK,EAAE,gCADI;AAEXC,EAAAA,SAAS,EAAEb,WAFA;AAGXc,EAAAA,UAAU,EAAE;AACRZ,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\nimport { boolean } from '@storybook/addon-knobs';\n\nimport Icon from '../../icons/general/IconCopy';\nimport * as vars from '../../styles/variables';\n\nimport PlainButton from './PlainButton';\nimport { ButtonType } from '../button';\nimport notes from './PlainButton.stories.md';\n\nexport const regular = () => (\n <PlainButton isDisabled={boolean('isDisabled', false)} type={ButtonType.BUTTON}>\n Click Here\n </PlainButton>\n);\n\nexport const disabled = () => <PlainButton isDisabled>Click Here</PlainButton>;\n\nexport const fixingMargins = () => (\n <>\n <div style={{ backgroundColor: vars.bdlLightBlue20, display: 'inline-block' }}>\n <PlainButton>\n <Icon />\n </PlainButton>\n </div>\n <p>By default the PlainButton component has margins set to 0.</p>\n\n <style>\n {`\n .bdl-SpecialButtonBug {\n margin: 8px;\n }\n `}\n </style>\n <p style={{ backgroundColor: vars.bdlWatermelonRed10, display: 'inline-block' }}>\n <PlainButton className=\"bdl-SpecialButtonBug\">\n <Icon />\n </PlainButton>\n </p>\n <p>\n The layout jumps on hover if margin overrides are not set for the :active and :hover states.\n <pre>\n <code>\n {`\n .bdl-SpecialButtonBug {\n margin: $bdl-grid-unit2;\n }\n `}\n </code>\n </pre>\n </p>\n <style>\n {`\n .bdl-SpecialButtonFix,\n .bdl-SpecialButtonFix:hover,\n .bdl-SpecialButtonFix:active {\n margin: 8px;\n }\n `}\n </style>\n <p style={{ backgroundColor: vars.bdlGreenLight10, display: 'inline-block' }}>\n <PlainButton className=\"bdl-SpecialButtonFix\">\n <Icon />\n </PlainButton>\n </p>\n <p>\n Workaround - use bdl-Button-margins mixin to define margins.\n <pre>\n <code>\n {`\n .bdl-SpecialButtonFix {\n @include bdl-Button-margins($bdl-grid-unit2);\n }\n `}\n </code>\n </pre>\n </p>\n <style>\n {`\n .bdl-SpecialButtonFix2,\n .bdl-SpecialButtonFix2:hover,\n .bdl-SpecialButtonFix2:active {\n margin: 8px 12px 0 16px;\n }\n `}\n </style>\n <p style={{ backgroundColor: vars.bdlGreenLight10, display: 'inline-block' }}>\n <PlainButton className=\"bdl-SpecialButtonFix2\">\n <Icon />\n </PlainButton>\n </p>\n <p>\n You can set all 4 margins inline using shorthand property syntax.\n <pre>\n <code>\n {`\n .bdl-SpecialButtonFix2 {\n @include bdl-Button-margins($bdl-grid-unit2 $bdl-grid-unit3 0 $bdl-grid-unit*4);\n }\n `}\n </code>\n </pre>\n </p>\n <p>\n <b>Why not fix this?</b> We will eventually, but since this behavior is relied upon in many places it is a\n breaking change that needs to be rolled out strategically.\n </p>\n </>\n);\n\nexport default {\n title: 'Components\|Buttons/PlainButton',\n component: PlainButton,\n parameters: {\n notes,\n },\n};\n"],"file":"PlainButton.stories.js"}
1	+ {"version":3,"sources":["../../../src/components/plain-button/PlainButton.stories.tsx"],"names":["React","boolean","Icon","vars","PlainButton","ButtonType","notes","regular","BUTTON","disabled","fixingMargins","backgroundColor","bdlLightBlue20","display","bdlWatermelonRed10","bdlGreenLight10","title","component","parameters"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,OAAT,QAAwB,wBAAxB;AAEA,OAAOC,IAAP,MAAiB,8BAAjB;AACA,OAAO,KAAKC,IAAZ,MAAsB,wBAAtB;AAEA,OAAOC,WAAP,MAAwB,eAAxB;AACA,SAASC,UAAT,QAA2B,WAA3B;AACA,OAAOC,KAAP,MAAkB,0BAAlB;AAEA,OAAO,MAAMC,OAAO,GAAG,MACnB,oBAAC,WAAD;AAAa,EAAA,UAAU,EAAEN,OAAO,CAAC,YAAD,EAAe,KAAf,CAAhC;AAAuD,EAAA,IAAI,EAAEI,UAAU,CAACG;AAAxE,gBADG;AAMP,OAAO,MAAMC,QAAQ,GAAG,MAAM,oBAAC,WAAD;AAAa,EAAA,UAAU;AAAvB,gBAAvB;AAEP,OAAO,MAAMC,aAAa,GAAG,MACzB,0CACI;AAAK,EAAA,KAAK,EAAE;AAAEC,IAAAA,eAAe,EAAER,IAAI,CAACS,cAAxB;AAAwCC,IAAAA,OAAO,EAAE;AAAjD;AAAZ,GACI,oBAAC,WAAD,QACI,oBAAC,IAAD,OADJ,CADJ,CADJ,EAMI,4FANJ,EAQI,kJARJ,EAeI;AAAG,EAAA,KAAK,EAAE;AAAEF,IAAAA,eAAe,EAAER,IAAI,CAACW,kBAAxB;AAA4CD,IAAAA,OAAO,EAAE;AAArD;AAAV,GACI,oBAAC,WAAD;AAAa,EAAA,SAAS,EAAC;AAAvB,GACI,oBAAC,IAAD,OADJ,CADJ,CAfJ,EAoBI,+HAEI,iCACI,sJADJ,CAFJ,CApBJ,EAgCI,+OAhCJ,EAyCI;AAAG,EAAA,KAAK,EAAE;AAAEF,IAAAA,eAAe,EAAER,IAAI,CAACY,eAAxB;AAAyCF,IAAAA,OAAO,EAAE;AAAlD;AAAV,GACI,oBAAC,WAAD;AAAa,EAAA,SAAS,EAAC;AAAvB,GACI,oBAAC,IAAD,OADJ,CADJ,CAzCJ,EA8CI,+FAEI,iCACI,2KADJ,CAFJ,CA9CJ,EA0DI,8PA1DJ,EAmEI;AAAG,EAAA,KAAK,EAAE;AAAEF,IAAAA,eAAe,EAAER,IAAI,CAACY,eAAxB;AAAyCF,IAAAA,OAAO,EAAE;AAAlD;AAAV,GACI,oBAAC,WAAD;AAAa,EAAA,SAAS,EAAC;AAAvB,GACI,oBAAC,IAAD,OADJ,CADJ,CAnEJ,EAwEI,oGAEI,iCACI,gNADJ,CAFJ,CAxEJ,EAoFI,+BACI,mDADJ,kJApFJ,CADG;AA4FP,eAAe;AACXG,EAAAA,KAAK,EAAE,gCADI;AAEXC,EAAAA,SAAS,EAAEb,WAFA;AAGXc,EAAAA,UAAU,EAAE;AACRZ,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\nimport { boolean } from '@storybook/addon-knobs';\n\nimport Icon from '../../icons/general/IconCopy';\nimport * as vars from '../../styles/variables';\n\nimport PlainButton from './PlainButton';\nimport { ButtonType } from '../button';\nimport notes from './PlainButton.stories.md';\n\nexport const regular = () => (\n <PlainButton isDisabled={boolean('isDisabled', false)} type={ButtonType.BUTTON}>\n Click Here\n </PlainButton>\n);\n\nexport const disabled = () => <PlainButton isDisabled>Click Here</PlainButton>;\n\nexport const fixingMargins = () => (\n <>\n <div style={{ backgroundColor: vars.bdlLightBlue20, display: 'inline-block' }}>\n <PlainButton>\n <Icon />\n </PlainButton>\n </div>\n <p>By default the PlainButton component has margins set to 0.</p>\n\n <style>\n {`\n .bdl-SpecialButtonBug {\n margin: 8px;\n }\n `}\n </style>\n <p style={{ backgroundColor: vars.bdlWatermelonRed10, display: 'inline-block' }}>\n <PlainButton className=\"bdl-SpecialButtonBug\">\n <Icon />\n </PlainButton>\n </p>\n <p>\n The layout jumps on hover if margin overrides are not set for the :active and :hover states.\n <pre>\n <code>\n {`\n .bdl-SpecialButtonBug {\n margin: $bdl-grid-unit2;\n }\n `}\n </code>\n </pre>\n </p>\n <style>\n {`\n .bdl-SpecialButtonFix,\n .bdl-SpecialButtonFix:hover,\n .bdl-SpecialButtonFix:active {\n margin: 8px;\n }\n `}\n </style>\n <p style={{ backgroundColor: vars.bdlGreenLight10, display: 'inline-block' }}>\n <PlainButton className=\"bdl-SpecialButtonFix\">\n <Icon />\n </PlainButton>\n </p>\n <p>\n Workaround - use bdl-Button-margins mixin to define margins.\n <pre>\n <code>\n {`\n .bdl-SpecialButtonFix {\n @include bdl-Button-margins($bdl-grid-unit2);\n }\n `}\n </code>\n </pre>\n </p>\n <style>\n {`\n .bdl-SpecialButtonFix2,\n .bdl-SpecialButtonFix2:hover,\n .bdl-SpecialButtonFix2:active {\n margin: 8px 12px 0 16px;\n }\n `}\n </style>\n <p style={{ backgroundColor: vars.bdlGreenLight10, display: 'inline-block' }}>\n <PlainButton className=\"bdl-SpecialButtonFix2\">\n <Icon />\n </PlainButton>\n </p>\n <p>\n You can set all 4 margins inline using shorthand property syntax.\n <pre>\n <code>\n {`\n .bdl-SpecialButtonFix2 {\n @include bdl-Button-margins($bdl-grid-unit2 $bdl-grid-unit3 0 $bdl-grid-unit*4);\n }\n `}\n </code>\n </pre>\n </p>\n <p>\n <b>Why not fix this?</b> We will eventually, but since this behavior is relied upon in many places it is a\n breaking change that needs to be rolled out strategically.\n </p>\n </>\n);\n\nexport default {\n title: 'Components/Buttons/PlainButton',\n component: PlainButton,\n parameters: {\n notes,\n },\n};\n"],"file":"PlainButton.stories.js"}

package/es/components/primary-button/PrimaryButton.stories.js CHANGED Viewed

@@ -15,7 +15,7 @@ export const disabled = () => React.createElement(PrimaryButton, {
   isDisabled: true
 }, "Click Here");
 export default {
-  title: 'Components|Buttons/PrimaryButton',
+  title: 'Components/Buttons/PrimaryButton',
   component: PrimaryButton,
   parameters: {
     notes

package/es/components/primary-button/PrimaryButton.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/primary-button/PrimaryButton.stories.tsx"],"names":["React","action","boolean","PrimaryButton","notes","regular","loading","disabled","title","component","parameters"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,MAAT,QAAuB,0BAAvB;AACA,SAASC,OAAT,QAAwB,wBAAxB;AAEA,OAAOC,aAAP,MAA0B,iBAA1B;AACA,OAAOC,KAAP,MAAkB,4BAAlB;AAEA,OAAO,MAAMC,OAAO,GAAG,MACnB,oBAAC,aAAD;AACI,EAAA,UAAU,EAAEH,OAAO,CAAC,YAAD,EAAe,KAAf,CADvB;AAEI,EAAA,SAAS,EAAEA,OAAO,CAAC,WAAD,EAAc,KAAd,CAFtB;AAGI,EAAA,OAAO,EAAED,MAAM,CAAC,gBAAD;AAHnB,gBADG;AAUP,OAAO,MAAMK,OAAO,GAAG,MAAM,oBAAC,aAAD;AAAe,EAAA,SAAS;AAAxB,gBAAtB;AAEP,OAAO,MAAMC,QAAQ,GAAG,MAAM,oBAAC,aAAD;AAAe,EAAA,UAAU;AAAzB,gBAAvB;AAEP,eAAe;AACXC,EAAAA,KAAK,EAAE,kCADI;AAEXC,EAAAA,SAAS,EAAEN,aAFA;AAGXO,EAAAA,UAAU,EAAE;AACRN,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { boolean } from '@storybook/addon-knobs';\n\nimport PrimaryButton from './PrimaryButton';\nimport notes from './PrimaryButton.stories.md';\n\nexport const regular = () => (\n <PrimaryButton\n isDisabled={boolean('isDisabled', false)}\n isLoading={boolean('isLoading', false)}\n onClick={action('onClick called')}\n >\n Click Here\n </PrimaryButton>\n);\n\nexport const loading = () => <PrimaryButton isLoading>Click Here</PrimaryButton>;\n\nexport const disabled = () => <PrimaryButton isDisabled>Click Here</PrimaryButton>;\n\nexport default {\n title: 'Components\|Buttons/PrimaryButton',\n component: PrimaryButton,\n parameters: {\n notes,\n },\n};\n"],"file":"PrimaryButton.stories.js"}
1	+ {"version":3,"sources":["../../../src/components/primary-button/PrimaryButton.stories.tsx"],"names":["React","action","boolean","PrimaryButton","notes","regular","loading","disabled","title","component","parameters"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,MAAT,QAAuB,0BAAvB;AACA,SAASC,OAAT,QAAwB,wBAAxB;AAEA,OAAOC,aAAP,MAA0B,iBAA1B;AACA,OAAOC,KAAP,MAAkB,4BAAlB;AAEA,OAAO,MAAMC,OAAO,GAAG,MACnB,oBAAC,aAAD;AACI,EAAA,UAAU,EAAEH,OAAO,CAAC,YAAD,EAAe,KAAf,CADvB;AAEI,EAAA,SAAS,EAAEA,OAAO,CAAC,WAAD,EAAc,KAAd,CAFtB;AAGI,EAAA,OAAO,EAAED,MAAM,CAAC,gBAAD;AAHnB,gBADG;AAUP,OAAO,MAAMK,OAAO,GAAG,MAAM,oBAAC,aAAD;AAAe,EAAA,SAAS;AAAxB,gBAAtB;AAEP,OAAO,MAAMC,QAAQ,GAAG,MAAM,oBAAC,aAAD;AAAe,EAAA,UAAU;AAAzB,gBAAvB;AAEP,eAAe;AACXC,EAAAA,KAAK,EAAE,kCADI;AAEXC,EAAAA,SAAS,EAAEN,aAFA;AAGXO,EAAAA,UAAU,EAAE;AACRN,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { boolean } from '@storybook/addon-knobs';\n\nimport PrimaryButton from './PrimaryButton';\nimport notes from './PrimaryButton.stories.md';\n\nexport const regular = () => (\n <PrimaryButton\n isDisabled={boolean('isDisabled', false)}\n isLoading={boolean('isLoading', false)}\n onClick={action('onClick called')}\n >\n Click Here\n </PrimaryButton>\n);\n\nexport const loading = () => <PrimaryButton isLoading>Click Here</PrimaryButton>;\n\nexport const disabled = () => <PrimaryButton isDisabled>Click Here</PrimaryButton>;\n\nexport default {\n title: 'Components/Buttons/PrimaryButton',\n component: PrimaryButton,\n parameters: {\n notes,\n },\n};\n"],"file":"PrimaryButton.stories.js"}

package/es/components/radar/RadarAnimation.stories.js CHANGED Viewed

@@ -34,7 +34,7 @@ export const withOffset = () => React.createElement(RadarAnimation, {
   offset: "0 20px"
 }, React.createElement(Button, null, "Middle Left, with offset"));
 export default {
-  title: 'Components|RadarAnimation',
+  title: 'Components/RadarAnimation',
   component: RadarAnimation,
   parameters: {
     notes

package/es/components/radar/RadarAnimation.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/radar/RadarAnimation.stories.tsx"],"names":["React","RadarAnimation","RadarAnimationPosition","Button","notes","bottomLeft","BOTTOM_LEFT","bottomCenter","BOTTOM_CENTER","bottomRight","BOTTOM_RIGHT","middleLeft","MIDDLE_LEFT","middleCenter","MIDDLE_CENTER","middleRight","MIDDLE_RIGHT","topLeft","TOP_LEFT","topCenter","TOP_CENTER","topRight","TOP_RIGHT","withOffset","title","component","parameters"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,cAAP,IAAyBC,sBAAzB,QAAuD,kBAAvD;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,KAAP,MAAkB,6BAAlB;AAEA,OAAO,MAAMC,UAAU,GAAG,MACtB,oBAAC,cAAD;AAAgB,EAAA,QAAQ,EAAEH,sBAAsB,CAACI;AAAjD,GACI,oBAAC,MAAD,sBADJ,CADG;AAMP,OAAO,MAAMC,YAAY,GAAG,MACxB,oBAAC,cAAD;AAAgB,EAAA,QAAQ,EAAEL,sBAAsB,CAACM;AAAjD,GACI,oBAAC,MAAD,wBADJ,CADG;AAMP,OAAO,MAAMC,WAAW,GAAG,MACvB,oBAAC,cAAD;AAAgB,EAAA,QAAQ,EAAEP,sBAAsB,CAACQ;AAAjD,GACI,oBAAC,MAAD,uBADJ,CADG;AAMP,OAAO,MAAMC,UAAU,GAAG,MACtB,oBAAC,cAAD;AAAgB,EAAA,QAAQ,EAAET,sBAAsB,CAACU;AAAjD,GACI,oBAAC,MAAD,sBADJ,CADG;AAMP,OAAO,MAAMC,YAAY,GAAG,MACxB,oBAAC,cAAD;AAAgB,EAAA,QAAQ,EAAEX,sBAAsB,CAACY;AAAjD,GACI,oBAAC,MAAD,wBADJ,CADG;AAMP,OAAO,MAAMC,WAAW,GAAG,MACvB,oBAAC,cAAD;AAAgB,EAAA,QAAQ,EAAEb,sBAAsB,CAACc;AAAjD,GACI,oBAAC,MAAD,uBADJ,CADG;AAMP,OAAO,MAAMC,OAAO,GAAG,MACnB,oBAAC,cAAD;AAAgB,EAAA,QAAQ,EAAEf,sBAAsB,CAACgB;AAAjD,GACI,oBAAC,MAAD,mBADJ,CADG;AAMP,OAAO,MAAMC,SAAS,GAAG,MACrB,oBAAC,cAAD;AAAgB,EAAA,QAAQ,EAAEjB,sBAAsB,CAACkB;AAAjD,GACI,oBAAC,MAAD,qBADJ,CADG;AAMP,OAAO,MAAMC,QAAQ,GAAG,MACpB,oBAAC,cAAD;AAAgB,EAAA,QAAQ,EAAEnB,sBAAsB,CAACoB;AAAjD,GACI,oBAAC,MAAD,oBADJ,CADG;AAMP,OAAO,MAAMC,UAAU,GAAG,MACtB,oBAAC,cAAD;AAAgB,EAAA,QAAQ,EAAErB,sBAAsB,CAACU,WAAjD;AAA8D,EAAA,MAAM,EAAC;AAArE,GACI,oBAAC,MAAD,mCADJ,CADG;AAMP,eAAe;AACXY,EAAAA,KAAK,EAAE,2BADI;AAEXC,EAAAA,SAAS,EAAExB,cAFA;AAGXyB,EAAAA,UAAU,EAAE;AACRtB,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\nimport RadarAnimation, { RadarAnimationPosition } from './RadarAnimation';\nimport Button from '../button';\nimport notes from './RadarAnimation.stories.md';\n\nexport const bottomLeft = () => (\n <RadarAnimation position={RadarAnimationPosition.BOTTOM_LEFT}>\n <Button>Bottom Left</Button>\n </RadarAnimation>\n);\n\nexport const bottomCenter = () => (\n <RadarAnimation position={RadarAnimationPosition.BOTTOM_CENTER}>\n <Button>Bottom Center</Button>\n </RadarAnimation>\n);\n\nexport const bottomRight = () => (\n <RadarAnimation position={RadarAnimationPosition.BOTTOM_RIGHT}>\n <Button>Bottom Right</Button>\n </RadarAnimation>\n);\n\nexport const middleLeft = () => (\n <RadarAnimation position={RadarAnimationPosition.MIDDLE_LEFT}>\n <Button>Middle Left</Button>\n </RadarAnimation>\n);\n\nexport const middleCenter = () => (\n <RadarAnimation position={RadarAnimationPosition.MIDDLE_CENTER}>\n <Button>Middle Center</Button>\n </RadarAnimation>\n);\n\nexport const middleRight = () => (\n <RadarAnimation position={RadarAnimationPosition.MIDDLE_RIGHT}>\n <Button>Middle Right</Button>\n </RadarAnimation>\n);\n\nexport const topLeft = () => (\n <RadarAnimation position={RadarAnimationPosition.TOP_LEFT}>\n <Button>Top Left</Button>\n </RadarAnimation>\n);\n\nexport const topCenter = () => (\n <RadarAnimation position={RadarAnimationPosition.TOP_CENTER}>\n <Button>Top Center</Button>\n </RadarAnimation>\n);\n\nexport const topRight = () => (\n <RadarAnimation position={RadarAnimationPosition.TOP_RIGHT}>\n <Button>Top Right</Button>\n </RadarAnimation>\n);\n\nexport const withOffset = () => (\n <RadarAnimation position={RadarAnimationPosition.MIDDLE_LEFT} offset=\"0 20px\">\n <Button>Middle Left, with offset</Button>\n </RadarAnimation>\n);\n\nexport default {\n title: 'Components\|RadarAnimation',\n component: RadarAnimation,\n parameters: {\n notes,\n },\n};\n"],"file":"RadarAnimation.stories.js"}
1	+ {"version":3,"sources":["../../../src/components/radar/RadarAnimation.stories.tsx"],"names":["React","RadarAnimation","RadarAnimationPosition","Button","notes","bottomLeft","BOTTOM_LEFT","bottomCenter","BOTTOM_CENTER","bottomRight","BOTTOM_RIGHT","middleLeft","MIDDLE_LEFT","middleCenter","MIDDLE_CENTER","middleRight","MIDDLE_RIGHT","topLeft","TOP_LEFT","topCenter","TOP_CENTER","topRight","TOP_RIGHT","withOffset","title","component","parameters"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,cAAP,IAAyBC,sBAAzB,QAAuD,kBAAvD;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,KAAP,MAAkB,6BAAlB;AAEA,OAAO,MAAMC,UAAU,GAAG,MACtB,oBAAC,cAAD;AAAgB,EAAA,QAAQ,EAAEH,sBAAsB,CAACI;AAAjD,GACI,oBAAC,MAAD,sBADJ,CADG;AAMP,OAAO,MAAMC,YAAY,GAAG,MACxB,oBAAC,cAAD;AAAgB,EAAA,QAAQ,EAAEL,sBAAsB,CAACM;AAAjD,GACI,oBAAC,MAAD,wBADJ,CADG;AAMP,OAAO,MAAMC,WAAW,GAAG,MACvB,oBAAC,cAAD;AAAgB,EAAA,QAAQ,EAAEP,sBAAsB,CAACQ;AAAjD,GACI,oBAAC,MAAD,uBADJ,CADG;AAMP,OAAO,MAAMC,UAAU,GAAG,MACtB,oBAAC,cAAD;AAAgB,EAAA,QAAQ,EAAET,sBAAsB,CAACU;AAAjD,GACI,oBAAC,MAAD,sBADJ,CADG;AAMP,OAAO,MAAMC,YAAY,GAAG,MACxB,oBAAC,cAAD;AAAgB,EAAA,QAAQ,EAAEX,sBAAsB,CAACY;AAAjD,GACI,oBAAC,MAAD,wBADJ,CADG;AAMP,OAAO,MAAMC,WAAW,GAAG,MACvB,oBAAC,cAAD;AAAgB,EAAA,QAAQ,EAAEb,sBAAsB,CAACc;AAAjD,GACI,oBAAC,MAAD,uBADJ,CADG;AAMP,OAAO,MAAMC,OAAO,GAAG,MACnB,oBAAC,cAAD;AAAgB,EAAA,QAAQ,EAAEf,sBAAsB,CAACgB;AAAjD,GACI,oBAAC,MAAD,mBADJ,CADG;AAMP,OAAO,MAAMC,SAAS,GAAG,MACrB,oBAAC,cAAD;AAAgB,EAAA,QAAQ,EAAEjB,sBAAsB,CAACkB;AAAjD,GACI,oBAAC,MAAD,qBADJ,CADG;AAMP,OAAO,MAAMC,QAAQ,GAAG,MACpB,oBAAC,cAAD;AAAgB,EAAA,QAAQ,EAAEnB,sBAAsB,CAACoB;AAAjD,GACI,oBAAC,MAAD,oBADJ,CADG;AAMP,OAAO,MAAMC,UAAU,GAAG,MACtB,oBAAC,cAAD;AAAgB,EAAA,QAAQ,EAAErB,sBAAsB,CAACU,WAAjD;AAA8D,EAAA,MAAM,EAAC;AAArE,GACI,oBAAC,MAAD,mCADJ,CADG;AAMP,eAAe;AACXY,EAAAA,KAAK,EAAE,2BADI;AAEXC,EAAAA,SAAS,EAAExB,cAFA;AAGXyB,EAAAA,UAAU,EAAE;AACRtB,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\nimport RadarAnimation, { RadarAnimationPosition } from './RadarAnimation';\nimport Button from '../button';\nimport notes from './RadarAnimation.stories.md';\n\nexport const bottomLeft = () => (\n <RadarAnimation position={RadarAnimationPosition.BOTTOM_LEFT}>\n <Button>Bottom Left</Button>\n </RadarAnimation>\n);\n\nexport const bottomCenter = () => (\n <RadarAnimation position={RadarAnimationPosition.BOTTOM_CENTER}>\n <Button>Bottom Center</Button>\n </RadarAnimation>\n);\n\nexport const bottomRight = () => (\n <RadarAnimation position={RadarAnimationPosition.BOTTOM_RIGHT}>\n <Button>Bottom Right</Button>\n </RadarAnimation>\n);\n\nexport const middleLeft = () => (\n <RadarAnimation position={RadarAnimationPosition.MIDDLE_LEFT}>\n <Button>Middle Left</Button>\n </RadarAnimation>\n);\n\nexport const middleCenter = () => (\n <RadarAnimation position={RadarAnimationPosition.MIDDLE_CENTER}>\n <Button>Middle Center</Button>\n </RadarAnimation>\n);\n\nexport const middleRight = () => (\n <RadarAnimation position={RadarAnimationPosition.MIDDLE_RIGHT}>\n <Button>Middle Right</Button>\n </RadarAnimation>\n);\n\nexport const topLeft = () => (\n <RadarAnimation position={RadarAnimationPosition.TOP_LEFT}>\n <Button>Top Left</Button>\n </RadarAnimation>\n);\n\nexport const topCenter = () => (\n <RadarAnimation position={RadarAnimationPosition.TOP_CENTER}>\n <Button>Top Center</Button>\n </RadarAnimation>\n);\n\nexport const topRight = () => (\n <RadarAnimation position={RadarAnimationPosition.TOP_RIGHT}>\n <Button>Top Right</Button>\n </RadarAnimation>\n);\n\nexport const withOffset = () => (\n <RadarAnimation position={RadarAnimationPosition.MIDDLE_LEFT} offset=\"0 20px\">\n <Button>Middle Left, with offset</Button>\n </RadarAnimation>\n);\n\nexport default {\n title: 'Components/RadarAnimation',\n component: RadarAnimation,\n parameters: {\n notes,\n },\n};\n"],"file":"RadarAnimation.stories.js"}

package/es/components/radio/stories/RadioButton.stories.js CHANGED Viewed

@@ -12,7 +12,7 @@ export const disabled = () => React.createElement(RadioButton, {
   isDisabled: boolean('isDisabled', true)
 });
 export default {
-  title: 'Components|Radio/RadioButton',
+  title: 'Components/Radio/RadioButton',
   component: RadioButton,
   parameters: {
     notes

package/es/components/radio/stories/RadioButton.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/radio/stories/RadioButton.stories.tsx"],"names":["React","boolean","RadioButton","notes","basic","disabled","title","component","parameters"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,OAAT,QAAwB,wBAAxB;AAEA,OAAOC,WAAP,MAAwB,gBAAxB;AACA,OAAOC,KAAP,MAAkB,0BAAlB;AAEA,OAAO,MAAMC,KAAK,GAAG,MAAM,oBAAC,WAAD;AAAa,EAAA,KAAK,EAAC,gBAAnB;AAAoC,EAAA,KAAK,EAAC;AAA1C,EAApB;AAEP,OAAO,MAAMC,QAAQ,GAAG,MACpB,oBAAC,WAAD;AAAa,EAAA,KAAK,EAAC,uBAAnB;AAA2C,EAAA,KAAK,EAAC,QAAjD;AAA0D,EAAA,UAAU,EAAEJ,OAAO,CAAC,YAAD,EAAe,IAAf;AAA7E,EADG;AAIP,eAAe;AACXK,EAAAA,KAAK,EAAE,8BADI;AAEXC,EAAAA,SAAS,EAAEL,WAFA;AAGXM,EAAAA,UAAU,EAAE;AACRL,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\nimport { boolean } from '@storybook/addon-knobs';\n\nimport RadioButton from '../RadioButton';\nimport notes from './RadioButton.stories.md';\n\nexport const basic = () => <RadioButton label=\"Radio Button 1\" value=\"radio1\" />;\n\nexport const disabled = () => (\n <RadioButton label=\"Disabled Radio Button\" value=\"radio2\" isDisabled={boolean('isDisabled', true)} />\n);\n\nexport default {\n title: 'Components\|Radio/RadioButton',\n component: RadioButton,\n parameters: {\n notes,\n },\n};\n"],"file":"RadioButton.stories.js"}
1	+ {"version":3,"sources":["../../../../src/components/radio/stories/RadioButton.stories.tsx"],"names":["React","boolean","RadioButton","notes","basic","disabled","title","component","parameters"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,OAAT,QAAwB,wBAAxB;AAEA,OAAOC,WAAP,MAAwB,gBAAxB;AACA,OAAOC,KAAP,MAAkB,0BAAlB;AAEA,OAAO,MAAMC,KAAK,GAAG,MAAM,oBAAC,WAAD;AAAa,EAAA,KAAK,EAAC,gBAAnB;AAAoC,EAAA,KAAK,EAAC;AAA1C,EAApB;AAEP,OAAO,MAAMC,QAAQ,GAAG,MACpB,oBAAC,WAAD;AAAa,EAAA,KAAK,EAAC,uBAAnB;AAA2C,EAAA,KAAK,EAAC,QAAjD;AAA0D,EAAA,UAAU,EAAEJ,OAAO,CAAC,YAAD,EAAe,IAAf;AAA7E,EADG;AAIP,eAAe;AACXK,EAAAA,KAAK,EAAE,8BADI;AAEXC,EAAAA,SAAS,EAAEL,WAFA;AAGXM,EAAAA,UAAU,EAAE;AACRL,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\nimport { boolean } from '@storybook/addon-knobs';\n\nimport RadioButton from '../RadioButton';\nimport notes from './RadioButton.stories.md';\n\nexport const basic = () => <RadioButton label=\"Radio Button 1\" value=\"radio1\" />;\n\nexport const disabled = () => (\n <RadioButton label=\"Disabled Radio Button\" value=\"radio2\" isDisabled={boolean('isDisabled', true)} />\n);\n\nexport default {\n title: 'Components/Radio/RadioButton',\n component: RadioButton,\n parameters: {\n notes,\n },\n};\n"],"file":"RadioButton.stories.js"}

package/es/components/radio/stories/RadioGroup.stories.js CHANGED Viewed

@@ -85,7 +85,7 @@ export const withCustomRadioButtonComponent = () => {
   }));
 };
 export default {
-  title: 'Components|Radio/RadioGroup',
+  title: 'Components/Radio/RadioGroup',
   component: RadioGroup,
   parameters: {
     notes

package/es/components/radio/stories/RadioGroup.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/radio/stories/RadioGroup.stories.tsx"],"names":["React","boolean","bdlGray20","bdlPurpleRain","RadioButton","RadioGroup","notes","basic","withCustomRadioButtonComponent","CustomRadioButton","isSelected","label","name","value","marginRight","position","String","backgroundColor","borderRadius","display","height","left","width","cursor","opacity","title","component","parameters"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { boolean } from '@storybook/addon-knobs';\n\nimport { bdlGray20, bdlPurpleRain } from '../../../styles/variables';\nimport RadioButton, { RadioButtonProps } from '../RadioButton';\nimport RadioGroup from '../RadioGroup';\nimport notes from './RadioGroup.stories.md';\n\nexport const basic = () => (\n <RadioGroup name=\"radiogroup\" value=\"radio3\">\n <RadioButton label=\"Radio Button 1\" value=\"radio1\" description=\"I have a description\" />\n <RadioButton label=\"Radio Button 2\" value=\"radio2\" description=\"I also have a description\" />\n <RadioButton label=\"Radio Button 3\" value=\"radio3\" />\n <RadioButton label=\"Radio Button 4\" value=\"radio4\" />\n <RadioButton label=\"Disabled Radio Button\" value=\"radio5\" isDisabled={boolean('isDisabled', true)} />\n </RadioGroup>\n);\n\nexport const withCustomRadioButtonComponent = () => {\n const CustomRadioButton = ({ isSelected, label, name, value }: RadioButtonProps) => (\n <span style={{ marginRight: '15px', position: 'relative' }} title={String(label)}>\n <span\n style={{\n backgroundColor: isSelected ? bdlPurpleRain : bdlGray20,\n borderRadius: '50%',\n display: 'inline-block',\n height: '20px',\n left: '0',\n position: 'absolute',\n width: '20px',\n }}\n />\n <input\n checked={isSelected}\n name={name}\n type=\"radio\"\n value={value}\n style={{ cursor: 'pointer', height: '20px', opacity: 0, width: '20px' }}\n />\n </span>\n );\n\n return (\n <RadioGroup name=\"customradiogroup\" value=\"customRadio3\">\n <CustomRadioButton label=\"Radio Button 1\" value=\"customRadio1\" />\n <CustomRadioButton label=\"Radio Button 2\" value=\"customRadio2\" />\n <CustomRadioButton label=\"Radio Button 3\" value=\"customRadio3\" />\n <CustomRadioButton label=\"Radio Button 4\" value=\"customRadio4\" />\n <CustomRadioButton label=\"Radio Button 5\" value=\"customRadio5\" />\n </RadioGroup>\n );\n};\n\nexport default {\n title: 'Components\|Radio/RadioGroup',\n component: RadioGroup,\n parameters: {\n notes,\n },\n};\n"],"file":"RadioGroup.stories.js"}
1	+ {"version":3,"sources":["../../../../src/components/radio/stories/RadioGroup.stories.tsx"],"names":["React","boolean","bdlGray20","bdlPurpleRain","RadioButton","RadioGroup","notes","basic","withCustomRadioButtonComponent","CustomRadioButton","isSelected","label","name","value","marginRight","position","String","backgroundColor","borderRadius","display","height","left","width","cursor","opacity","title","component","parameters"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { boolean } from '@storybook/addon-knobs';\n\nimport { bdlGray20, bdlPurpleRain } from '../../../styles/variables';\nimport RadioButton, { RadioButtonProps } from '../RadioButton';\nimport RadioGroup from '../RadioGroup';\nimport notes from './RadioGroup.stories.md';\n\nexport const basic = () => (\n <RadioGroup name=\"radiogroup\" value=\"radio3\">\n <RadioButton label=\"Radio Button 1\" value=\"radio1\" description=\"I have a description\" />\n <RadioButton label=\"Radio Button 2\" value=\"radio2\" description=\"I also have a description\" />\n <RadioButton label=\"Radio Button 3\" value=\"radio3\" />\n <RadioButton label=\"Radio Button 4\" value=\"radio4\" />\n <RadioButton label=\"Disabled Radio Button\" value=\"radio5\" isDisabled={boolean('isDisabled', true)} />\n </RadioGroup>\n);\n\nexport const withCustomRadioButtonComponent = () => {\n const CustomRadioButton = ({ isSelected, label, name, value }: RadioButtonProps) => (\n <span style={{ marginRight: '15px', position: 'relative' }} title={String(label)}>\n <span\n style={{\n backgroundColor: isSelected ? bdlPurpleRain : bdlGray20,\n borderRadius: '50%',\n display: 'inline-block',\n height: '20px',\n left: '0',\n position: 'absolute',\n width: '20px',\n }}\n />\n <input\n checked={isSelected}\n name={name}\n type=\"radio\"\n value={value}\n style={{ cursor: 'pointer', height: '20px', opacity: 0, width: '20px' }}\n />\n </span>\n );\n\n return (\n <RadioGroup name=\"customradiogroup\" value=\"customRadio3\">\n <CustomRadioButton label=\"Radio Button 1\" value=\"customRadio1\" />\n <CustomRadioButton label=\"Radio Button 2\" value=\"customRadio2\" />\n <CustomRadioButton label=\"Radio Button 3\" value=\"customRadio3\" />\n <CustomRadioButton label=\"Radio Button 4\" value=\"customRadio4\" />\n <CustomRadioButton label=\"Radio Button 5\" value=\"customRadio5\" />\n </RadioGroup>\n );\n};\n\nexport default {\n title: 'Components/Radio/RadioGroup',\n component: RadioGroup,\n parameters: {\n notes,\n },\n};\n"],"file":"RadioGroup.stories.js"}

package/es/components/search-form/SearchActions.js ADDED Viewed

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { injectIntl } from 'react-intl';
+import ClearBadge16 from '../../icon/fill/ClearBadge16';
+import Search16 from '../../icon/fill/Search16';
+import makeLoadable from '../loading-indicator/makeLoadable';
+import messages from './messages';
+const SearchActions = (_ref) => {
+  let {
+    hasSubmitAction,
+    intl,
+    onClear
+  } = _ref;
+  const {
+    formatMessage
+  } = intl;
+  return React.createElement("div", {
+    className: "action-buttons"
+  }, hasSubmitAction ? React.createElement("button", {
+    type: "submit",
+    className: "action-button search-button",
+    title: formatMessage(messages.searchButtonTitle)
+  }, React.createElement(Search16, null)) : React.createElement("div", {
+    className: "action-button search-button"
+  }, React.createElement(Search16, null)), React.createElement("button", {
+    className: "action-button clear-button",
+    onClick: onClear,
+    title: formatMessage(messages.clearButtonTitle),
+    type: "button"
+  }, React.createElement(ClearBadge16, null)));
+};
+export { SearchActions as SearchActionsBase };
+export default makeLoadable(injectIntl(SearchActions));
+//# sourceMappingURL=SearchActions.js.map

package/es/components/search-form/SearchActions.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../src/components/search-form/SearchActions.tsx"],"names":["React","injectIntl","ClearBadge16","Search16","makeLoadable","messages","SearchActions","hasSubmitAction","intl","onClear","formatMessage","searchButtonTitle","clearButtonTitle","SearchActionsBase"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,UAAT,QAAsC,YAAtC;AAEA,OAAOC,YAAP,MAAyB,8BAAzB;AACA,OAAOC,QAAP,MAAqB,0BAArB;AACA,OAAOC,YAAP,MAAyB,mCAAzB;AAEA,OAAOC,QAAP,MAAqB,YAArB;;AAWA,MAAMC,aAAa,GAAG,UAA4D;AAAA,MAA3D;AAAEC,IAAAA,eAAF;AAAmBC,IAAAA,IAAnB;AAAyBC,IAAAA;AAAzB,GAA2D;AAC9E,QAAM;AAAEC,IAAAA;AAAF,MAAoBF,IAA1B;AAEA,SACI;AAAK,IAAA,SAAS,EAAC;AAAf,KACKD,eAAe,GACZ;AACI,IAAA,IAAI,EAAC,QADT;AAEI,IAAA,SAAS,EAAC,6BAFd;AAGI,IAAA,KAAK,EAAEG,aAAa,CAACL,QAAQ,CAACM,iBAAV;AAHxB,KAKI,oBAAC,QAAD,OALJ,CADY,GASZ;AAAK,IAAA,SAAS,EAAC;AAAf,KACI,oBAAC,QAAD,OADJ,CAVR,EAcI;AACI,IAAA,SAAS,EAAC,4BADd;AAEI,IAAA,OAAO,EAAEF,OAFb;AAGI,IAAA,KAAK,EAAEC,aAAa,CAACL,QAAQ,CAACO,gBAAV,CAHxB;AAII,IAAA,IAAI,EAAC;AAJT,KAMI,oBAAC,YAAD,OANJ,CAdJ,CADJ;AAyBH,CA5BD;;AA8BA,SAASN,aAAa,IAAIO,iBAA1B;AACA,eAAeT,YAAY,CAACH,UAAU,CAACK,aAAD,CAAX,CAA3B","sourcesContent":["import * as React from 'react';\nimport { injectIntl, IntlShape } from 'react-intl';\n\nimport ClearBadge16 from '../../icon/fill/ClearBadge16';\nimport Search16 from '../../icon/fill/Search16';\nimport makeLoadable from '../loading-indicator/makeLoadable';\n\nimport messages from './messages';\n\nexport interface SearchActionsProps {\n /** Whether to render an interactive search button */\n hasSubmitAction: boolean;\n /** Intl object */\n intl: IntlShape;\n /** Called when clear button is clicked */\n onClear: (event: React.SyntheticEvent<HTMLButtonElement>) => void;\n}\n\nconst SearchActions = ({ hasSubmitAction, intl, onClear }: SearchActionsProps) => {\n const { formatMessage } = intl;\n\n return (\n <div className=\"action-buttons\">\n {hasSubmitAction ? (\n <button\n type=\"submit\"\n className=\"action-button search-button\"\n title={formatMessage(messages.searchButtonTitle)}\n >\n <Search16 />\n </button>\n ) : (\n <div className=\"action-button search-button\">\n <Search16 />\n </div>\n )}\n <button\n className=\"action-button clear-button\"\n onClick={onClear}\n title={formatMessage(messages.clearButtonTitle)}\n type=\"button\"\n >\n <ClearBadge16 />\n </button>\n </div>\n );\n};\n\nexport { SearchActions as SearchActionsBase };\nexport default makeLoadable(injectIntl(SearchActions));\n"],"file":"SearchActions.js"}

package/es/components/search-form/SearchForm.js CHANGED Viewed

@@ -7,27 +7,14 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 import * as React from 'react';
-import { defineMessages, injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl';
 import classNames from 'classnames';
-import omit from 'lodash/omit';
-import ClearBadge16 from '../../icon/fill/ClearBadge16';
-import Search16 from '../../icon/fill/Search16';
-import makeLoadable from '../loading-indicator/makeLoadable';
+import omit from 'lodash/omit'; // $FlowFixMe
+import SearchActions from './SearchActions'; // $FlowFixMe
+import messages from './messages';
 import './SearchForm.scss';
-const messages = defineMessages({
-  clearButtonTitle: {
-    "id": "boxui.searchForm.clearButtonTitle",
-    "defaultMessage": "Clear"
-  },
-  searchButtonTitle: {
-    "id": "boxui.searchForm.searchButtonTitle",
-    "defaultMessage": "Search"
-  },
-  searchLabel: {
-    "id": "boxui.searchForm.searchLabel",
-    "defaultMessage": "Search query"
-  }
-});
 class SearchFormBase extends React.Component {
   constructor() {
@@ -148,24 +135,7 @@ class SearchFormBase extends React.Component {
       name: param,
       type: "hidden",
       value: queryParams[param]
-    }));
-    const SearchActions = () => React.createElement("div", {
-      className: "action-buttons"
-    }, onSubmit ? React.createElement("button", {
-      type: "submit",
-      className: "action-button search-button",
-      title: formatMessage(messages.searchButtonTitle)
-    }, React.createElement(Search16, null)) : React.createElement("div", {
-      className: "action-button search-button"
-    }, React.createElement(Search16, null)), React.createElement("button", {
-      className: "action-button clear-button",
-      onClick: this.onClearHandler,
-      title: formatMessage(messages.clearButtonTitle),
-      type: "button"
-    }, React.createElement(ClearBadge16, null)));
-    const LoadableSearchActions = makeLoadable(SearchActions); // @NOTE Prevent errors from React about controlled inputs
+    })); // @NOTE Prevent errors from React about controlled inputs
     const onChangeStub = () => {};
@@ -187,11 +157,13 @@ class SearchFormBase extends React.Component {
       name: name,
       onChange: onChangeStub,
       type: "search"
-    }, inputProps)), React.createElement(LoadableSearchActions, {
+    }, inputProps)), React.createElement(SearchActions, {
+      hasSubmitAction: !!onSubmit,
       isLoading: isLoading,
       loadingIndicatorProps: {
         className: 'search-form-loading-indicator'
-      }
+      },
+      onClear: this.onClearHandler
     }), hiddenInputs));
   }