feat: implementation of the overlay component (#527)

src/components/overlay/demo.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import DemoContainer from '../demo-container';
+
+import { Copy, CopySize } from '../copy';
+import { Icon, IconName, IconSize } from '../icons';
+import { Overlay } from './index';
+import { Space, SpaceSize } from '../space';
+
+const DemoOverlay: React.StatelessComponent<void> = (): JSX.Element => (
+	<DemoContainer>
+		<Overlay isVisisble={true}>
+			<Space size={[0, 0, SpaceSize.L]}>
+				<Icon name={IconName.Robo} size={IconSize.S} />
+			</Space>
+			<Copy size={CopySize.M}>Drop the component on the left element list</Copy>
+		</Overlay>
+	</DemoContainer>
+);
+
+export default DemoOverlay;

src/components/overlay/index.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { Color } from '../colors';
+import { getSpace, SpaceSize } from '../space';
+
+export interface OverlayProps {
+	isVisisble: boolean;
+}
+
+export interface StyledOverlayProps {
+	isVisisble: boolean;
+}
+
+const StyledOverlay = styled.div`
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	box-sizing: border-box;
+	width: 20vw;
+	min-width: 200px;
+	max-width: 500px;
+	padding: ${getSpace(SpaceSize.XL)}px ${getSpace(SpaceSize.XXL)}px;
+	border-radius: 3px;
+	box-shadow: 0 1px 6px ${Color.Grey60};
+	opacity: ${(props: StyledOverlayProps) => (props.isVisisble ? 1 : 0)};
+	text-align: center;
+	pointer-events: ${(props: StyledOverlayProps) => (props.isVisisble ? 'auto' : 'none')};
+	background-color: ${Color.Grey97};
+	transform: translate(-50%, -50%);
+	transition: opacity 0.333s ease;
+`;
+
+export const Overlay: React.StatelessComponent<OverlayProps> = ({
+	children,
+	isVisisble
+}): JSX.Element => <StyledOverlay isVisisble={isVisisble}>{children}</StyledOverlay>;

src/components/overlay/pattern.json

@@ -0,0 +1,7 @@
+{
+	"name": "overlay",
+	"displayName": "Overlay",
+	"flag": "alpha",
+	"version": "1.0.0",
+	"tags": ["overlay"]
+ }

src/container/app.tsx

@@ -106,6 +106,7 @@ export class App extends React.Component {
 								</SideBar>
 							</Resizeable>
 							<PreviewPaneWrapper
+								isDragging={props.store.getDragging()}
 								key="center"
 								previewFrame={`http://localhost:${props.store.getServerPort()}/preview.html`}
 							/>

src/container/preview-pane-wrapper.tsx

@@ -3,7 +3,13 @@ import { PreviewFrame, PreviewPane } from '../components';
 import { PreviewDocumentMode } from '../preview';
 import * as React from 'react';
 
+import { Copy, CopySize } from '../components/copy';
+import { Icon, IconName, IconSize } from '../components/icons';
+import { Overlay } from '../components/overlay';
+import { Space, SpaceSize } from '../components/space';
+
 export interface PreviewPaneProps {
+	isDragging: boolean;
 	previewFrame: string;
 }
 
@@ -17,6 +23,12 @@ export class PreviewPaneWrapper extends React.Component<PreviewPaneProps> {
 					src={setSearch(props.previewFrame, { mode: PreviewDocumentMode.Live })}
 					offCanvas={false}
 				/>
+				<Overlay isVisisble={props.isDragging}>
+					<Space size={[0, 0, SpaceSize.L]}>
+						<Icon name={IconName.Robo} size={IconSize.S} />
+					</Space>
+					<Copy size={CopySize.M}>Drop the component on the left element list</Copy>
+				</Overlay>
 			</PreviewPane>
 		);
 	}