chore(dropzone): restoring image, story and template files

Author: aramos-adobe

.storybook/assets/images/dropzone-illustration.png

@@ -1,13 +1,12 @@
 import { default as ActionButton } from "@spectrum-css/actionbutton/stories/actionbutton.stories.js";
-import { SizingTemplate } from "@spectrum-css/dropzone/stories/template.js";
 import { default as IllustratedMessage } from "@spectrum-css/illustratedmessage/stories/illustratedmessage.stories.js";
-import { Template as Link } from "@spectrum-css/link/stories/template.js";
+import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDragged } from "@spectrum-css/preview/types";
-import { html } from "lit";
 import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { DropzoneGroup } from "./dropzone.test.js";
+import { Template } from "./template.js";
 
 /**
  * A drop zone is an area on the screen into a which an object can be dragged and dropped to accomplish a task. It's a common interaction in uploading and file management workflows. For example, a drop zone might be used in an upload workflow to enable the user to simply drop a file from their operating system into the drop zone, which is a more efficient and intuitive action, rather than utilizing the standard "Choose file" dialog.
@@ -38,6 +37,7 @@ export default {
 		isFilled: false,
 		title: "Drag and drop your file",
 		description: "Or, select a file from your computer.",
+		label: "Browse files",
 	},
 	parameters: {
 		design: {
@@ -50,17 +50,7 @@ export default {
 };
 
 export const Default = DropzoneGroup.bind({});
-Default.args = {
-	description: [
-		() => {
-			return html`${Link({ url: "#", text: "Select a file" })} from your computer.`;
-		},
-	],
-	label: "Drop file to replace",
-	customStyles: {
-		width: "300px",
-	},
-};
+Default.args = {};
 
 // ********* VRT ONLY ********* //
 export const WithForcedColors = DropzoneGroup.bind({});
@@ -74,7 +64,13 @@ WithForcedColors.parameters = {
 };
 
 
-export const Sizing = SizingTemplate.bind({});
+export const Sizing = (args, context) => Sizes({
+	Template,
+	withBorder: false,
+	withHeader: false,
+	...args
+}, context);
+
 Sizing.args = {};
 Sizing.tags = ["!dev"];
 Sizing.parameters = {

components/dropzone/stories/dropzone.stories.js

@@ -30,11 +30,7 @@ export const Template = ({
 	${customIllustration
         ? customIllustration()
         : illustrationSvgMarkup(size)}
-<<<<<<< HEAD
 		<div class="${rootClass}-content">
-=======
-		<div class="${rootClass}--content">
->>>>>>> da506c0eb (feat(dropzone): adding dropzone migration)
 			${when(
 				title,
 				() =>