Add focus highlight sampler

Enact-DCO-1.0-Signed-off-by: Juwon Jeong (juwon.jeong@lge.com)

samples/sampler/stories/qa/Spotlight.js

@@ -5,6 +5,7 @@ import Heading from '@enact/sandstone/Heading';
 import FormCheckboxItem from '@enact/sandstone/FormCheckboxItem';
 import Input from '@enact/sandstone/Input';
 import Item from '@enact/sandstone/Item';
+import Image from '@enact/sandstone/Image';
 import Picker from '@enact/sandstone/Picker';
 import Popup from '@enact/sandstone/Popup';
 import RadioItem from '@enact/sandstone/RadioItem';
@@ -27,6 +28,7 @@ import {Component, cloneElement} from 'react';
 import css from './Spotlight.module.less';
 
 import docs from '../../images/icon-enact-docs.png';
+import {svgGenerator} from '../helper/svg';
 
 const Container = SpotlightContainerDecorator({enterTo: 'last-focused'}, 'div');
 
@@ -501,6 +503,21 @@ NavigatingIntoOverflowContainers.parameters = {
 	}
 };
 
+const SpottableDiv = Spottable(Skinnable('div'));
+
+export const FocusHighlight = () => (
+	<Row>
+		<SpottableDiv className={css.spottableDiv1}>
+			<Image className={css.image} src={svgGenerator(360, 240, 'd8d8d8', '6e6e6e', '360 X 240')} />
+		</SpottableDiv>
+		<SpottableDiv className={css.spottableDiv2}>
+			<Image className={css.image} src={svgGenerator(360, 240, '7ed31d', 'ffffff', '360 X 240')} />
+		</SpottableDiv>
+	</Row>
+);
+
+FocusHighlight.storyName = 'Spottable with Focus Highlight';
+
 export const KitchenSink = (args) => (
 	<Column>
 		<Cell component="p" shrink>

samples/sampler/stories/qa/Spotlight.module.less

@@ -1,3 +1,4 @@
+@import "~@enact/sandstone/styles/mixins.less";
 @import "~@enact/sandstone/styles/skin.less";
 
 .spottableitem {
@@ -10,3 +11,25 @@
 		});
 	});
 }
+
+.spottableDiv1 {
+	.applySkins({
+		.sand-focus-highlight();
+	});
+	.focus({
+		transform: scale(1.1);
+	});
+	& .image {
+		margin: 0;
+	}
+}
+
+.spottableDiv2 {
+	.applySkins({
+		.sand-focus-highlight(image);
+	});
+
+	.focus({
+		transform: scale(1.1);
+	});
+}