From 6d8b5bd62b9e619780f69c1fbabdef09cad84d73 Mon Sep 17 00:00:00 2001
From: Oksana Azarova <oksana.azarova@shopify.com>
Date: Tue, 5 Mar 2024 02:50:38 +0000
Subject: [PATCH] added website example

---
 .../selection-and-input/drop-zone.mdx         |   5 +
 .../examples/drop-zone-drag-and-drop-only.tsx | 119 ++++++++++++++++++
 2 files changed, 124 insertions(+)
 create mode 100644 polaris.shopify.com/pages/examples/drop-zone-drag-and-drop-only.tsx

diff --git a/polaris.shopify.com/content/components/selection-and-input/drop-zone.mdx b/polaris.shopify.com/content/components/selection-and-input/drop-zone.mdx
index 7b6f94049b6..2032ebc8413 100644
--- a/polaris.shopify.com/content/components/selection-and-input/drop-zone.mdx
+++ b/polaris.shopify.com/content/components/selection-and-input/drop-zone.mdx
@@ -46,6 +46,11 @@ examples:
   - fileName: drop-zone-with-custom-file-dialog-trigger.tsx
     title: With custom file dialog trigger
     description: Use to trigger the file dialog from an action somewhere else on the page.
+  - fileName: drop-zone-drag-and-drop-only.tsx
+    title: With custom modal and drag-and-drop only
+    description:
+      Use to delegate file uploading to child element which serves as the modal activator and provides
+      accessibility and custom desight features.
 previewImg: /images/components/selection-and-input/drop-zone.png
 ---
 
diff --git a/polaris.shopify.com/pages/examples/drop-zone-drag-and-drop-only.tsx b/polaris.shopify.com/pages/examples/drop-zone-drag-and-drop-only.tsx
new file mode 100644
index 00000000000..0edfe70795b
--- /dev/null
+++ b/polaris.shopify.com/pages/examples/drop-zone-drag-and-drop-only.tsx
@@ -0,0 +1,119 @@
+import {
+  BlockStack,
+  DropZone,
+  Icon,
+  InlineStack,
+  Modal,
+  Thumbnail,
+  UnstyledButton,
+  Text,
+} from '@shopify/polaris';
+import React, {useCallback, useState} from 'react';
+import type {MouseEvent, KeyboardEvent} from 'react';
+import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {ImageAddIcon, NoteIcon} from '@shopify/polaris-icons';
+
+function WithCustomModalAndDragAndDropOnlyExample() {
+  const [files, setFiles] = useState<File[]>([]);
+  const [activeModal, setActiveModal] = useState<boolean>(false);
+
+  const handleDrop = useCallback((dropFiles: File[]) => {
+    setFiles((files) => [...files, ...dropFiles]);
+  }, []);
+
+  const handleOpenModal = useCallback(
+    () =>
+      setActiveModal((activeModal) => {
+        console.log(activeModal);
+        return !activeModal;
+      }),
+    [],
+  );
+
+  const handleOpenModalFromChildElement = useCallback(
+    () =>
+      (event: MouseEvent<HTMLSpanElement> | KeyboardEvent<HTMLSpanElement>) => {
+        event.stopPropagation();
+        setActiveModal((activeModal) => !activeModal);
+      },
+    [],
+  );
+
+  const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];
+  const fileUpload = !files.length && (
+    <UnstyledButton
+      onClick={handleOpenModalFromChildElement}
+      style={{width: 40, height: 40, border: 0, cursor: 'pointer'}}
+      accessibilityLabel="Upload image for product Green T-shirt size Small"
+    >
+      <Icon source={ImageAddIcon} tone="interactive" />
+    </UnstyledButton>
+  );
+
+  const uploadImageModal = (
+    <div style={{height: '500px'}}>
+      <Modal
+        size="small"
+        open={activeModal}
+        onClose={handleOpenModal}
+        title="Upload images from store gallery"
+        primaryAction={{
+          content: 'Save',
+          onAction: handleOpenModal,
+        }}
+        secondaryActions={[
+          {
+            content: 'Cancel',
+            onAction: handleOpenModal,
+          },
+        ]}
+      >
+        <Modal.Section>
+          <DropZone onDrop={() => {}}>
+            <DropZone.FileUpload />
+          </DropZone>
+        </Modal.Section>
+      </Modal>
+    </div>
+  );
+
+  const uploadedFiles = files.length > 0 && (
+    <BlockStack gap="400">
+      {files.map((file, index) => (
+        <InlineStack gap="400" align="center" key={index}>
+          <Thumbnail
+            size="small"
+            alt={file.name}
+            source={
+              validImageTypes.includes(file.type)
+                ? window.URL.createObjectURL(file)
+                : NoteIcon
+            }
+          />
+        </InlineStack>
+      ))}
+    </BlockStack>
+  );
+
+  return (
+    <BlockStack gap="200">
+      <Text as="h2" variant="headingMd">
+        Small sized Drop zone that functions as a drop zone when using a mouse
+        and has a customized modal that opens when clicked. When navigating with
+        a keyboard, the child element serves as the modal activator and provides
+        accessibility and custom desight features.
+      </Text>
+      <div style={{width: 40, height: 40}}>
+        <DropZone onDrop={handleDrop} onClick={handleOpenModal} dragAndDropOnly>
+          <BlockStack align="center" inlineAlign="center" gap="400">
+            {uploadedFiles}
+            {fileUpload}
+          </BlockStack>
+        </DropZone>
+      </div>
+      {uploadImageModal}
+    </BlockStack>
+  );
+}
+
+export default withPolarisExample(WithCustomModalAndDragAndDropOnlyExample);