[OGUI-1607] Add dropdown component (#2739)

* [OGUI-1497] Add copy-to-clipboard component

* Fix linter

* [OGUI-1497] Add dropdown component

* Add popover styles

* Fix linter

Framework/Frontend/css/src/bootstrap.css

@@ -50,6 +50,9 @@
   --space-m: 1rem;
   --space-l: 2rem;
   --space-xl: 4rem;
+
+  /* fixed size */
+  --ui-component-large: 850px;
 }
 
 /* reset what specific browsers do */
@@ -308,6 +311,10 @@ svg.icon { height: 1em; width: 1em; margin-bottom: -0.2em; }
 .dropup-open>.dropup-menu { display: block; }
 .dropup-menu { box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2); display: none; position: absolute; bottom: calc(100% + 0.1rem); left: 0.1rem; z-index: 1000; font-size: 1rem; background-color: #fff; border: 1px solid rgba(0, 0, 0, .15); border-radius: .25rem; }
 
+/* popover */
+
+.popover { flex-shrink: 0;flex-wrap: wrap;align-items: flex-start;position: absolute;top: 0;left: 0;z-index: 1002;max-width: var(--ui-component-large); }
+
 /* tooltip */
 .tooltip {position: relative; display: inline-block; border-bottom: 1px dotted black;}
 .tooltip .tooltiptext {visibility: hidden; width: 118px; background-color: #555; color: #fff; text-align: center; padding: 3px; border-radius: 6px; position: absolute; z-index: 1;}

Framework/Frontend/js/src/components/Component.js

@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright CERN and copyright holders of ALICE O2. This software is
+ * distributed under the terms of the GNU General Public License v3 (GPL
+ * Version 3), copied verbatim in the file "COPYING".
+ *
+ * See http://alice-o2.web.cern.ch/license for full licensing information.
+ *
+ * In applying this license CERN does not waive the privileges and immunities
+ * granted to it by virtue of its status as an Intergovernmental Organization
+ * or submit itself to any jurisdiction.
+ */
+
+/**
+ * @typedef {(vnode|string|number|Array<(vnode|string|number)>|null)} Component
+ */

Framework/Frontend/js/src/components/CopyToClipboardComponent.js

@@ -93,7 +93,7 @@ export class CopyToClipboardComponent extends StatefulComponent {
    * Renders the button that allows copying text to the clipboard.
    *
    * @param {vnode} vnode The virtual DOM node containing the attrs and children.
-   * @returns {vnode} The copyToClipboard button component
+   * @returns {Component} The copyToClipboard button component
    */
   view(vnode) {
     const { attrs, children } = vnode;

Framework/Frontend/js/src/components/DropdownComponent.js

@@ -0,0 +1,45 @@
+/**
+ * @license
+ * Copyright CERN and copyright holders of ALICE O2. This software is
+ * distributed under the terms of the GNU General Public License v3 (GPL
+ * Version 3), copied verbatim in the file "COPYING".
+ *
+ * See http://alice-o2.web.cern.ch/license for full licensing information.
+ *
+ * In applying this license CERN does not waive the privileges and immunities
+ * granted to it by virtue of its status as an Intergovernmental Organization
+ * or submit itself to any jurisdiction.
+ */
+
+import { h } from '../renderer.js';
+import { PopoverTriggerPreConfiguration } from './PopoverPreConfigurations.js';
+import { PopoverAnchors } from './PopoverEngine.js';
+import { popover } from './popover.js';
+
+/**
+ * Renders a dropdown component
+ *
+ * @param {Component} trigger the component triggering the dropdown opening trigger
+ * @param {Component} content the content of the dropdown
+ * @param {Object} [configuration] dropdown configuration
+ * @param {'left'|'right'} [configuration.alignment='left'] defines the alignment of the dropdown
+ * @param {popoverVisibilityChangeCallback} [configuration.onVisibilityChange] function called when the visibility changes
+ * @return {Component} the dropdown component
+ */
+export const DropdownComponent = (
+  trigger,
+  content,
+  configuration,
+) => {
+  configuration = configuration || {};
+  const { alignment = 'left' } = configuration;
+  return popover(
+    trigger,
+    h('.dropdown', content),
+    {
+      ...PopoverTriggerPreConfiguration.click,
+      anchor: alignment === 'left' ? PopoverAnchors.BOTTOM_START : PopoverAnchors.BOTTOM_END,
+      onVisibilityChange: configuration.onVisibilityChange,
+    },
+  );
+};