add webui-share component another url

basher · Apr 2, 2024 · 446b1a0 · 446b1a0
1 parent ae8ec18
commit 446b1a0
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 5 deletions.
diff --git a/ui/src/javascript/web-components/webui-share.ts b/ui/src/javascript/web-components/webui-share.ts
@@ -16,9 +16,9 @@ export default class WebUIShare extends HTMLElement {
         this.shareInput = this.querySelector('[data-input]');
 
         this.canonical = document.querySelector('link[rel=canonical]');
-        this.shareTitle = this.btnShare?.dataset.shareTitle || document.title;
+        this.shareTitle = this.btnShare?.dataset.title || document.title;
         this.shareUrl =
-            this.btnShare?.dataset.shareUrl || this.canonical
+            this.btnShare?.dataset.url || this.canonical
                 ? this.canonical?.href
                 : document.location.href;
 

diff --git a/ui/stories/6. Web Components Or Custom Elements/WebUIShare/WebUIShare.js b/ui/stories/6. Web Components Or Custom Elements/WebUIShare/WebUIShare.js
@@ -37,3 +37,45 @@ export const WebUIShareHtml = () => `
     </webui-disclosure>
 </webui-share>
 `;
+
+export const WebUIShareAnotherUrlHtml = () => `
+<webui-share>
+    <webui-disclosure>
+        <button
+            type="button"
+            class="button button--text-icon"
+            data-trigger
+            data-url="https://www.google.com"
+            data-title="google"
+            hidden
+        >
+            <svg
+                aria-hidden="true"
+                focusable="false"
+                class="icon"
+            >
+                <use href="sprite.svg#share" />
+            </svg>
+            <span>Share</span>
+        </button>
+
+        <div data-content>
+            <label for="share-input" class="label">Share page</label>
+            <input
+                type="text"
+                id="share-input"
+                class="input"
+                value=""
+                data-input
+            />
+            <button
+                type="button"
+                class="button button--text button--secondary"
+                data-copy
+            >
+                Copy
+            </button>
+        </div>
+    </webui-disclosure>
+</webui-share>
+`;
diff --git a/ui/stories/6. Web Components Or Custom Elements/WebUIShare/WebUIShare.mdx b/ui/stories/6. Web Components Or Custom Elements/WebUIShare/WebUIShare.mdx
@@ -1,4 +1,4 @@
-import { Meta, Canvas, Controls } from '@storybook/blocks';
+import { Meta, Canvas } from '@storybook/blocks';
 import * as WebUIShare from './WebUIShare.stories';
 
 <Meta of={WebUIShare} />
@@ -8,4 +8,6 @@ import * as WebUIShare from './WebUIShare.stories';
 - It is a simple `wrapper` around the [webui-disclosure](/story/web-components-or-custom-elements-webui-disclosure--web-ui-disclosure) custom element.
 
 <Canvas of={WebUIShare.WebUIShare} />
-<Controls of={WebUIShare.WebUIShare} />
+
+## Share a different URL
+<Canvas of={WebUIShare.WebUIShareAnotherUrl} />
diff --git a/ui/stories/6. Web Components Or Custom Elements/WebUIShare/WebUIShare.stories.js b/ui/stories/6. Web Components Or Custom Elements/WebUIShare/WebUIShare.stories.js
@@ -1,4 +1,4 @@
-import { WebUIShareHtml } from './WebUIShare';
+import { WebUIShareHtml, WebUIShareAnotherUrlHtml } from './WebUIShare';
 
 export default {
     title: 'Web Components Or Custom Elements/<webui-share>',
@@ -13,3 +13,8 @@ export const WebUIShare = {
     render: () => WebUIShareHtml(),
 };
 WebUIShare.storyName = '<webui-share>';
+
+export const WebUIShareAnotherUrl = {
+    render: () => WebUIShareAnotherUrlHtml(),
+};
+WebUIShareAnotherUrl.storyName = '<webui-share> Another URL';