From 564302147d0174963ce5637ab01054b0dda7472a Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 14 Mar 2023 23:36:36 +0100
Subject: [PATCH] feat(svelte): add attribution

---
 .../example-components/Header/Header.svelte   |  2 +-
 .../components/Attribution/Attribution.svelte | 36 +++++++++++++++++++
 .../src/lib/components/Attribution/index.ts   |  1 +
 .../src/lib/components/Attribution/types.ts   |  6 ++++
 .../svelte/src/lib/container/Panel/types.ts   |  1 +
 .../container/SvelteFlow/SvelteFlow.svelte    |  2 ++
 .../svelte/src/routes/validation/+page.svelte |  2 +-
 7 files changed, 48 insertions(+), 2 deletions(-)
 create mode 100644 packages/svelte/src/lib/components/Attribution/Attribution.svelte
 create mode 100644 packages/svelte/src/lib/components/Attribution/index.ts
 create mode 100644 packages/svelte/src/lib/components/Attribution/types.ts

diff --git a/packages/svelte/src/example-components/Header/Header.svelte b/packages/svelte/src/example-components/Header/Header.svelte
index 0d937de5..e6ada667 100644
--- a/packages/svelte/src/example-components/Header/Header.svelte
+++ b/packages/svelte/src/example-components/Header/Header.svelte
@@ -16,7 +16,7 @@
 </script>
 
 <header>
-  <div class="logo">SvelteFlow</div>
+  <div class="logo">Svelte Flow</div>
   <select on:change={onChange}>
     {#each routes as route}
       <option value={route}>{route}</option>
diff --git a/packages/svelte/src/lib/components/Attribution/Attribution.svelte b/packages/svelte/src/lib/components/Attribution/Attribution.svelte
new file mode 100644
index 00000000..a984cdd1
--- /dev/null
+++ b/packages/svelte/src/lib/components/Attribution/Attribution.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { Panel } from '$lib/container/Panel';
+  import type { AttributionProps } from './types';
+
+  type $$Props = AttributionProps;
+
+  export let proOptions: AttributionProps['proOptions'] = undefined;
+  export let position: AttributionProps['position'] = 'bottom-right';
+</script>
+
+
+{#if !proOptions?.hideAttribution}
+  <Panel
+    position={position}
+    class="svelte-flow__attribution"
+    data-message="Please only hide this attribution when you are subscribed to Svelte Flow Pro: https://pro.reactflow.dev"
+  >
+    <a href="https://reactflow.dev/svelte" target="_blank" rel="noopener noreferrer" aria-label="Svelte Flow attribution">
+      Svelte Flow
+    </a>
+  </Panel>
+{/if}
+
+<style>
+  :global(.svelte-flow__panel.svelte-flow__attribution) {
+    font-size: 10px;
+    background: rgba(255, 255, 255, 0.5);
+    padding: 2px 3px;
+    margin: 0;
+  }
+
+  :global(.svelte-flow__attribution) a {
+    text-decoration: none;
+    color: #999;
+  }
+</style>
\ No newline at end of file
diff --git a/packages/svelte/src/lib/components/Attribution/index.ts b/packages/svelte/src/lib/components/Attribution/index.ts
new file mode 100644
index 00000000..d77f9e59
--- /dev/null
+++ b/packages/svelte/src/lib/components/Attribution/index.ts
@@ -0,0 +1 @@
+export { default as Attribution } from './Attribution.svelte';
diff --git a/packages/svelte/src/lib/components/Attribution/types.ts b/packages/svelte/src/lib/components/Attribution/types.ts
new file mode 100644
index 00000000..4a6052b4
--- /dev/null
+++ b/packages/svelte/src/lib/components/Attribution/types.ts
@@ -0,0 +1,6 @@
+import type { PanelPosition, ProOptions } from '@reactflow/system';
+
+export type AttributionProps = {
+  proOptions?: ProOptions;
+  position?: PanelPosition;
+};
diff --git a/packages/svelte/src/lib/container/Panel/types.ts b/packages/svelte/src/lib/container/Panel/types.ts
index 32bbea01..13fa2b33 100644
--- a/packages/svelte/src/lib/container/Panel/types.ts
+++ b/packages/svelte/src/lib/container/Panel/types.ts
@@ -3,6 +3,7 @@ import type { HTMLAttributes } from 'svelte/elements';
 
 export type PanelProps = HTMLAttributes<HTMLDivElement> & {
   'data-testid'?: string;
+  'data-message'?: string;
   position?: PanelPosition;
   style?: string;
   class?: string;
diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
index 7b7153b3..acb8b2c7 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
@@ -11,6 +11,7 @@
   import { NodeSelection } from '$lib/components/NodeSelection';
   import { KeyHandler } from '$lib/components/KeyHandler';
   import { ConnectionLine } from '$lib/components/ConnectionLine';
+  import { Attribution } from '$lib/components/Attribution';
   import { useStore } from '$lib/store';
   import type { SvelteFlowProps } from './types';
 
@@ -122,6 +123,7 @@
       <UserSelection />
     </Pane>
   </Zoom>
+  <Attribution />
   <slot />
 </div>
 
diff --git a/packages/svelte/src/routes/validation/+page.svelte b/packages/svelte/src/routes/validation/+page.svelte
index 7b08fb5f..83ffd342 100644
--- a/packages/svelte/src/routes/validation/+page.svelte
+++ b/packages/svelte/src/routes/validation/+page.svelte
@@ -11,7 +11,7 @@
   import { Position } from '@reactflow/system';
 
   const nodes = createNodes([
-    { id: '0', type: 'default', position: { x: 0, y: 150 }, data: { label: 'only connecatbale with B' } },
+    { id: '0', type: 'default', position: { x: 0, y: 150 }, data: { label: 'only connectable with B' } },
     { id: 'A', type: 'default', position: { x: 250, y: 0 }, data: { label: 'A' } },
     { id: 'B', type: 'default', position: { x: 250, y: 150 }, data: { label: 'B' } },
     { id: 'C', type: 'default', position: { x: 250, y: 300 }, data: { label: 'C' } }