WRR-789: Clean up default props in sandstone sampler

Panels/Header.js

@@ -334,6 +334,8 @@ const HeaderBase = kind({
 	},
 
 	defaultProps: {
+		backButtonBackgroundOpacity: 'transparent',
+		closeButtonBackgroundOpacity: 'transparent',
 		marqueeOn: 'render',
 		noSubtitle: false,
 		type: 'standard'

QuickGuidePanels/index.js

@@ -12,9 +12,10 @@
  * @module sandstone/QuickGuidePanels
  * @exports Panel
  * @exports QuickGuidePanels
+ * @exports QuickGuidePanelsBase
  */
 
-import {QuickGuidePanels} from './QuickGuidePanels';
+import {QuickGuidePanels, QuickGuidePanelsBase} from './QuickGuidePanels';
 import {Panel} from './Panel';
 
 /**
@@ -29,5 +30,6 @@ QuickGuidePanels.Panel = Panel;
 export default QuickGuidePanels;
 export {
 	Panel,
-	QuickGuidePanels
+	QuickGuidePanels,
+	QuickGuidePanelsBase
 };

RangePicker/RangePicker.js

@@ -277,6 +277,10 @@ const RangePickerBase = kind({
 		wrap: PropTypes.bool
 	},
 
+	defaultProps: {
+		orientation: 'horizontal'
+	},
+
 	styles: {
 		css: componentCss,
 		className: 'rangePicker',

Slider/Slider.js

@@ -56,6 +56,7 @@ const sliderDefaultProps = {
 	keyFrequency: [1],
 	max: 100,
 	min: 0,
+	orientation: 'horizontal',
 	step: 1,
 	wheelInterval: 0
 };

samples/sampler/stories/default/Button.js

@@ -10,6 +10,7 @@ import iconNames from '../helper/icons';
 // Button's prop `minWidth` defaults to true and we only want to show `minWidth={false}` in the JSX. In order to hide `minWidth` when `true`, we use the normal storybook boolean control and return `void 0` when `true`.
 Button.displayName = 'Button';
 const Config = mergeComponentMetadata('Button', UIButtonBase, UIButton, ButtonBase, Button);
+Config.defaultProps.tooltipType = 'balloon';
 
 // Set up some defaults for info and controls
 const prop = {
@@ -22,7 +23,7 @@ const prop = {
 	iconFlip: ['', 'auto', 'both', 'horizontal', 'vertical'],
 	iconPosition: ['', 'before', 'after'],
 	icons: ['', ...iconNames],
-	minWidth: {'undefined/null (automatic)': '', 'true (enforce)': true, 'false (ignore)': 'false'},
+	minWidth: {'undefined/null (automatic)': '', 'true (enforce)': 'false', 'false (ignore)': 'false'},
 	size: ['', 'small', 'large'],
 	tooltipType: ['', 'balloon', 'transparent']
 };
@@ -76,7 +77,7 @@ boolean('disabled', _Button, Config);
 select('icon', _Button, prop.icons, Config);
 select('iconFlip', _Button, prop.iconFlip, Config);
 select('iconPosition', _Button, prop.iconPosition, Config);
-select('minWidth', _Button, prop.minWidth, Config);
+select('minWidth', _Button, prop.minWidth, Config, '');
 boolean('roundBorder', _Button, Config);
 boolean('selected', _Button, Config);
 boolean('shadowed', _Button, Config);

samples/sampler/stories/default/FlexiblePopupPanels.js

@@ -19,6 +19,10 @@ const propOptions = {
 
 const Config = mergeComponentMetadata('FlexiblePopupPanels', FlexiblePopupPanelsBase, FlexiblePopupPanels);
 const PanelConfig = mergeComponentMetadata('Panel', PanelBase, Panel);
+Config.defaultProps = {
+	scrimType: 'translucent',
+	spotlightRestrict: 'self-only'
+};
 
 export default {
 	title: 'Sandstone/FlexiblePopupPanels',
@@ -115,13 +119,12 @@ boolean('noAnimation', _FlexiblePopupPanels, Config);
 boolean('noAutoDismiss', _FlexiblePopupPanels, Config);
 boolean('noCloseButton', _FlexiblePopupPanels, Config);
 select('prevButtonVisibility', _FlexiblePopupPanels, propOptions.buttonVisibility, Config);
-select('scrimType', _FlexiblePopupPanels, ['none', 'translucent', 'transparent'], Config, 'translucent');
+select('scrimType', _FlexiblePopupPanels, ['none', 'translucent', 'transparent'], Config);
 select(
 	'spotlightRestrict',
 	_FlexiblePopupPanels,
 	['self-first', 'self-only'],
-	Config,
-	'self-only'
+	Config
 );
 select('size', _FlexiblePopupPanels, propOptions.size, PanelConfig);
 boolean('custom first Panel prevButton', _FlexiblePopupPanels, PanelConfig);

samples/sampler/stories/default/Header.js

@@ -96,16 +96,14 @@ select(
 	'backButtonBackgroundOpacity',
 	PanelsHeader,
 	['opaque', 'transparent'],
-	Config,
-	'transparent'
+	Config
 );
 boolean('centered', PanelsHeader, Config);
 select(
 	'closeButtonBackgroundOpacity',
 	PanelsHeader,
 	['opaque', 'transparent'],
-	Config,
-	'transparent'
+	Config
 );
 select('marqueeOn', PanelsHeader, prop.marqueeOn, Config);
 boolean('noCloseButton', PanelsHeader, Config);

samples/sampler/stories/default/Marquee.js

@@ -1,9 +1,18 @@
 import Marquee from '@enact/sandstone/Marquee';
+import {mergeComponentMetadata} from '@enact/storybook-utils';
 import {boolean, number, select, text} from '@enact/storybook-utils/addons/controls';
+import {Marquee as uiMarquee} from '@enact/ui/Marquee';
 import ri from '@enact/ui/resolution';
 
+const Config = mergeComponentMetadata('Marquee', uiMarquee);
 Marquee.displayName = 'Marquee';
 
+const props = {
+	alignment: [null, 'left', 'right', 'center'],
+	forceDirection: [null, 'rtl', 'ltr'],
+	marqueeOn: ['focus', 'hover', 'render']
+};
+
 export default {
 	title: 'Sandstone/Marquee',
 	component: 'Marquee'
@@ -48,15 +57,15 @@ export const _Marquee = (args) => {
 	);
 };
 
-boolean('disabled', _Marquee, Marquee);
-select('alignment', _Marquee, [null, 'left', 'right', 'center'], Marquee);
-select('forceDirection', _Marquee, [null, 'rtl', 'ltr'], Marquee);
-number('marqueeDelay', _Marquee, Marquee, 1000);
-boolean('marqueeDisabled', _Marquee, Marquee);
-select('marqueeOn', _Marquee, ['hover', 'render'], Marquee, 'render');
-number('marqueeResetDelay', _Marquee, Marquee, 1000);
-text('marqueeSpacing', _Marquee, Marquee, '50%');
-number('marqueeSpeed', _Marquee, Marquee, 60);
+boolean('disabled', _Marquee, Config);
+select('alignment', _Marquee, props.alignment, Config);
+select('forceDirection', _Marquee, props.forceDirection, Config);
+number('marqueeDelay', _Marquee, Config);
+boolean('marqueeDisabled', _Marquee, Config);
+select('marqueeOn', _Marquee, props.marqueeOn, Config, 'render');
+number('marqueeResetDelay', _Marquee, Config);
+text('marqueeSpacing', _Marquee, Config);
+number('marqueeSpeed', _Marquee, Config);
 text(
 	'children',
 	_Marquee,

samples/sampler/stories/default/PageViews.js

@@ -7,6 +7,8 @@ import {Cell, Row, Column} from '@enact/ui/Layout';
 PageViews.displayName = 'PageViews';
 
 const Config = mergeComponentMetadata('PageViews', PageViews);
+Config.defaultProps.pageIndicatorType = 'dot';
+
 const propOptions = {
 	pageIndicatorType: ['dot', 'number']
 };

samples/sampler/stories/default/Panels.js

@@ -19,6 +19,9 @@ import compose from 'ramda/src/compose';
 import {svgGenerator} from '../helper/svg';
 
 const Config = mergeComponentMetadata('Panels', Panels);
+Config.defaultProps.backButtonBackgroundOpacity = 'transparent';
+Config.defaultProps.closeButtonBackgroundOpacity = 'transparent';
+
 const HeaderConfig = mergeComponentMetadata('Header', Header);
 
 const items = [];
@@ -217,15 +220,13 @@ select(
 	'backButtonBackgroundOpacity',
 	_Panels,
 	['opaque', 'transparent'],
-	Config,
-	'transparent'
+	Config
 );
 select(
 	'closeButtonBackgroundOpacity',
 	_Panels,
 	['opaque', 'transparent'],
-	Config,
-	'transparent'
+	Config
 );
 boolean('noAnimation', _Panels, Panels, false);
 boolean('noBackButton', _Panels, Panels, false);

samples/sampler/stories/default/ProgressBar.js

@@ -1,10 +1,10 @@
-import ProgressBar, {ProgressBarTooltip} from '@enact/sandstone/ProgressBar';
+import ProgressBar, {ProgressBarBase, ProgressBarTooltip} from '@enact/sandstone/ProgressBar';
 import {mergeComponentMetadata} from '@enact/storybook-utils';
 import {boolean, range, select} from '@enact/storybook-utils/addons/controls';
 
 import css from './ProgressBar.module.less';
 
-const ProgressBarConfig = mergeComponentMetadata('ProgressBar', ProgressBar);
+const ProgressBarConfig = mergeComponentMetadata('ProgressBar', ProgressBarBase);
 const ProgressBarTooltipConfig = mergeComponentMetadata('ProgressBarTooltip', ProgressBarTooltip);
 ProgressBar.displayName = 'ProgressBar';
 ProgressBarTooltip.displayName = 'ProgressBarTooltip';
@@ -68,8 +68,7 @@ select(
 	'orientation',
 	_ProgressBar,
 	['horizontal', 'vertical', 'radial'],
-	ProgressBarConfig,
-	'horizontal'
+	ProgressBarConfig
 );
 range(
 	'progress',

samples/sampler/stories/default/ProgressButton.js

@@ -27,7 +27,7 @@ const prop = {
 	},
 	color: ['', 'red', 'green', 'yellow', 'blue'],
 	icons: ['', ...iconNames],
-	minWidth: {'undefined/null (automatic)': '', 'true (enforce)': true, 'false (ignore)': 'false'},
+	minWidth: {'undefined/null (automatic)': '', 'true (enforce)': 'false', 'false (ignore)': 'false'},
 	size: ['', 'small', 'large']
 };
 
@@ -71,7 +71,7 @@ boolean('showProgress', _ProgressButton, Config);
 select('backgroundOpacity', _ProgressButton, prop.backgroundOpacity, Config);
 select('color', _ProgressButton, prop.color, Config);
 select('icon', _ProgressButton, prop.icons, Config);
-select('minWidth', _ProgressButton, prop.minWidth, Config);
+select('minWidth', _ProgressButton, prop.minWidth, Config, '');
 range('progress', _ProgressButton, Config, {min: 0, max: 1, step: 0.01}, 0.4);
 select('size', _ProgressButton, prop.size, Config);
 text('children', _ProgressButton, Config, 'Update');

samples/sampler/stories/default/QuickGuidePanels.js

@@ -2,12 +2,16 @@ import Button from '@enact/sandstone/Button';
 import {Panel} from '@enact/sandstone/Panels';
 import Popup from '@enact/sandstone/Popup';
 import SwitchItem from '@enact/sandstone/SwitchItem';
-import QuickGuidePanels from '@enact/sandstone/QuickGuidePanels';
+import {QuickGuidePanels, QuickGuidePanelsBase} from '@enact/sandstone/QuickGuidePanels';
+
 import {action} from '@enact/storybook-utils/addons/actions';
+import {mergeComponentMetadata} from '@enact/storybook-utils';
 import {number, select} from '@enact/storybook-utils/addons/controls';
 
 import css from './QuickGuidePanels.module.less';
 
+const Config = mergeComponentMetadata('QuickGuidePanels', QuickGuidePanelsBase);
+
 QuickGuidePanels.displayName = 'QuickGuidePanels';
 
 const propOptions = {
@@ -87,8 +91,8 @@ export const _QuickGuidePanels = (args) => {
 };
 
 number('current', _QuickGuidePanels, 0);
-select('nextButtonVisibility', _QuickGuidePanels, propOptions.buttonVisibility, 'auto');
-select('prevButtonVisibility', _QuickGuidePanels, propOptions.buttonVisibility, 'auto');
+select('nextButtonVisibility', _QuickGuidePanels, propOptions.buttonVisibility, Config);
+select('prevButtonVisibility', _QuickGuidePanels, propOptions.buttonVisibility, Config);
 number('total', _QuickGuidePanels, 0);
 
 _QuickGuidePanels.storyName = 'QuickGuidePanels';

samples/sampler/stories/default/RangePicker.js

@@ -58,7 +58,7 @@ select('incrementIcon', _RangePicker, ['', ...incrementIcons], Config);
 boolean('inlineTitle', _RangePicker, Config);
 boolean('joined', _RangePicker, Config);
 boolean('noAnimation', _RangePicker, Config);
-select('orientation', _RangePicker, prop.orientation, Config, 'horizontal');
+select('orientation', _RangePicker, prop.orientation, Config);
 number('step', _RangePicker, Config, 5);
 text('title', _RangePicker, Config);
 select('width', _RangePicker, prop.width, Config, 'small');

samples/sampler/stories/default/Slider.js

@@ -77,7 +77,7 @@ number('knobStep', _Slider, SliderConfig);
 number('max', _Slider, SliderConfig, 10);
 number('min', _Slider, SliderConfig, 0);
 boolean('noFill', _Slider, SliderConfig);
-select('orientation', _Slider, ['horizontal', 'vertical'], SliderConfig, 'horizontal');
+select('orientation', _Slider, ['horizontal', 'vertical'], SliderConfig);
 range(
 	'progressAnchor',
 	_Slider,

samples/sampler/stories/default/TooltipDecorator.js

@@ -6,6 +6,7 @@ import {boolean, number, select, text} from '@enact/storybook-utils/addons/contr
 import iconNames from '../helper/icons';
 
 const Config = mergeComponentMetadata('TooltipDecorator', TooltipBase, Tooltip, TooltipDecorator);
+Config.defaultProps.tooltipType = 'balloon';
 const TooltipButton = TooltipDecorator({tooltipDestinationProp: 'decoration'}, Button);
 
 const prop = {
@@ -59,7 +60,7 @@ boolean('tooltipMarquee', _TooltipDecorator, Config);
 select('tooltipPosition', _TooltipDecorator, prop.tooltipPosition, Config, prop.tooltipPosition[0]);
 boolean('tooltipRelative', _TooltipDecorator, Config);
 text('tooltipText', _TooltipDecorator, Config, 'tooltip!');
-select('tooltipType', _TooltipDecorator, prop.tooltipType, Config, prop.tooltipType[0]);
+select('tooltipType', _TooltipDecorator, prop.tooltipType, Config);
 number('tooltipWidth', _TooltipDecorator, Config);
 text('children', _TooltipDecorator, Config, 'click me');