React EUI WebComponent PoC

src/Elastic.Markdown/Assets/WebComponents/VersionDropdown/VersionDropdown.tsx

@@ -0,0 +1,189 @@
+import * as React from 'react';
+import r2wc from "@r2wc/react-to-web-component"
+import {
+    EuiButton,
+    EuiContextMenu,
+    EuiFormRow,
+    EuiIcon,
+    EuiPopover,
+    EuiSwitch,
+    EuiSpacer,
+    useGeneratedHtmlId,
+} from '@elastic/eui';
+import { useState } from 'react';
+
+import { appendIconComponentCache } from '@elastic/eui/es/components/icon/icon';
+
+import { icon as EuiIconArrowDown } from '@elastic/eui/es/components/icon/assets/arrow_down';
+import { icon as EuiIconArrowLeft } from '@elastic/eui/es/components/icon/assets/arrow_left';
+import { icon as EuiIconDocument } from '@elastic/eui/es/components/icon/assets/document';
+import { icon as EuiIconSearch } from '@elastic/eui/es/components/icon/assets/search';
+import { icon as EuiIconTrash } from '@elastic/eui/es/components/icon/assets/trash';
+import { icon as EuiIconUser } from '@elastic/eui/es/components/icon/assets/user';
+import { icon as EuiIconWrench } from '@elastic/eui/es/components/icon/assets/wrench';
+import { icon as EuiIconVisualizeApp } from '@elastic/eui/es/components/icon/assets/app_visualize';
+import { icon as EuiIconArrowRight } from '@elastic/eui/es/components/icon/assets/arrow_right';
+
+// One or more icons are passed in as an object of iconKey (string): IconComponent
+appendIconComponentCache({
+    arrowDown: EuiIconArrowDown,
+    arrowLeft: EuiIconArrowLeft,
+    arrowRight: EuiIconArrowRight,
+    document: EuiIconDocument,
+    search: EuiIconSearch,
+    trash: EuiIconTrash,
+    user: EuiIconUser,
+    wrench: EuiIconWrench,
+    visualizeApp: EuiIconVisualizeApp
+});
+
+const VersionDropdown =() => {
+    const [isPopoverOpen, setPopover] = useState(false);
+
+    const embeddedCodeSwitchId__1 = useGeneratedHtmlId({
+        prefix: 'embeddedCodeSwitch',
+        suffix: 'first',
+    });
+    const embeddedCodeSwitchId__2 = useGeneratedHtmlId({
+        prefix: 'embeddedCodeSwitch',
+        suffix: 'second',
+    });
+    const contextMenuPopoverId = useGeneratedHtmlId({
+        prefix: 'contextMenuPopover',
+    });
+
+    const onButtonClick = () => {
+        setPopover(!isPopoverOpen);
+    };
+
+    const closePopover = () => {
+        setPopover(false);
+    };
+
+    const panels = [
+        {
+            id: 0,
+            title: 'This is a context menu',
+            items: [
+                {
+                    name: 'Handle an onClick',
+                    icon: 'search',
+                    onClick: closePopover,
+                },
+                {
+                    name: 'Go to a link',
+                    icon: 'user',
+                    href: 'http://elastic.co',
+                    target: '_blank',
+                },
+                {
+                    name: 'Nest panels',
+                    icon: 'wrench',
+                    panel: 1,
+                },
+                {
+                    name: 'Add a tooltip',
+                    icon: 'document',
+                    toolTipContent: 'Optional content for a tooltip',
+                    toolTipProps: {
+                        title: 'Optional tooltip title',
+                        position: 'right',
+                    },
+                    onClick: closePopover,
+                },
+                {
+                    name: 'Use an app icon',
+                    icon: 'visualizeApp',
+                    onClick: closePopover,
+                },
+                {
+                    name: 'Pass an icon as a component to customize it',
+                    icon: <EuiIcon type="trash" size="m" color="danger" />,
+                    onClick: closePopover,
+                },
+                {
+                    name: 'Disabled option',
+                    icon: 'user',
+                    toolTipContent: 'For reasons, this item is disabled',
+                    toolTipProps: { position: 'right' },
+                    disabled: true,
+                    onClick: closePopover,
+                },
+            ],
+        },
+        {
+            id: 1,
+            initialFocusedItemIndex: 1,
+            title: 'Nest panels',
+            items: [
+                {
+                    name: 'PDF reports',
+                    icon: 'user',
+                    onClick: closePopover,
+                },
+                {
+                    name: 'Embed code',
+                    icon: 'user',
+                    panel: 2,
+                },
+                {
+                    name: 'Permalinks',
+                    icon: 'user',
+                    onClick: closePopover,
+                },
+            ],
+        },
+        {
+            id: 2,
+            title: 'Embed code',
+            content: (
+                <div style={{ padding: 16 }}>
+                    <EuiFormRow label="Generate a public snapshot?" hasChildLabel={false}>
+                        <EuiSwitch
+                            name="switch"
+                            id={embeddedCodeSwitchId__1}
+                            label="Snapshot data"
+                            checked={true}
+                            onChange={() => {}}
+                        />
+                    </EuiFormRow>
+                    <EuiFormRow
+                        label="Include the following in the embed"
+                        hasChildLabel={false}
+                    >
+                        <EuiSwitch
+                            name="switch"
+                            id={embeddedCodeSwitchId__2}
+                            label="Current time range"
+                            checked={true}
+                            onChange={() => {}}
+                        />
+                    </EuiFormRow>
+                    <EuiSpacer />
+                    <EuiButton fill>Copy iFrame code</EuiButton>
+                </div>
+            ),
+        },
+    ];
+
+    const button = (
+        <EuiButton iconType="arrowDown" iconSide="right" onClick={onButtonClick}>
+            Click me to load a context menu
+        </EuiButton>
+    );
+
+    return (
+        <EuiPopover
+            id={contextMenuPopoverId}
+            button={button}
+            isOpen={isPopoverOpen}
+            closePopover={closePopover}
+            panelPaddingSize="none"
+            anchorPosition="downLeft"
+        >
+            <EuiContextMenu initialPanelId={0} panels={panels} />
+        </EuiPopover>
+    );
+};
+
+customElements.define('version-dropdown', r2wc(VersionDropdown));

src/Elastic.Markdown/Assets/main.ts

@@ -11,6 +11,7 @@ import 'htmx-ext-preload'
 import 'htmx.org'
 import { $, $$ } from 'select-dom'
 import { UAParser } from 'ua-parser-js'
+import "./WebComponents/VersionDropdown/VersionDropdown";
 
 const { getOS } = new UAParser()
 

src/Elastic.Markdown/Slices/_Layout.cshtml

@@ -18,6 +18,7 @@
 	                  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
 }
 @(await RenderPartialAsync(_Header.Create(Model)))
+
 <div id="main-container" class="flex flex-col items-center border-t-1 border-grey-20">
 	@functions {
 
@@ -47,6 +48,8 @@
 						</div>
 						<article id="markdown-content" class="content-container markdown-content md:px-4">
 							<input type="checkbox" class="hidden" id="pages-nav-hamburger">
+							<version-dropdown></version-dropdown>
+
 							@await RenderBodyAsync()
 						</article>
 						@await RenderPartialAsync(_PrevNextNav.Create(Model))