feat: reorganize examples into File menu (#3743)

Examples now don't contain any dev related fixtures.

Refs #3627

Author: char0n

src/plugins/dropdown-menu/components/DropdownMenuNested/DropdownMenuNested.jsx

@@ -0,0 +1,40 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+const DropdownMenuNested = ({ children, label, isLong }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleOpen = () => {
+    setIsOpen(true);
+  };
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+
+  return (
+    <li
+      className={classNames('nested-dd-menu nested-reverse', { long: isLong })}
+      onMouseEnter={handleOpen}
+      onMouseLeave={handleClose}
+    >
+      <button type="button">
+        {label}&nbsp;&nbsp;<b>&gt;</b>
+      </button>
+      <span className="dd-item-ignore">{isOpen && <ul>{children}</ul>}</span>
+    </li>
+  );
+};
+
+DropdownMenuNested.propTypes = {
+  label: PropTypes.string.isRequired,
+  children: PropTypes.oneOfType([PropTypes.array, PropTypes.element]),
+  isLong: PropTypes.bool,
+};
+
+DropdownMenuNested.defaultProps = {
+  children: [],
+  isLong: false,
+};
+
+export default DropdownMenuNested;

src/plugins/dropdown-menu/components/DropdownMenuNested/_dropdown-menu-nested.scss

@@ -0,0 +1,7 @@
+.dd-menu {
+  .dd-item-ignore {
+    ol, ul {
+      border-radius:4px 4px 4px 4px;
+    }
+  }
+}

src/plugins/dropdown-menu/components/_all.scss

@@ -1,2 +1,3 @@
 @import './DropdownMenu/dropdown-menu';
 @import './DropdownMenuItem/dropdown-menu-item';
+@import './DropdownMenuNested/dropdown-menu-nested';

src/plugins/dropdown-menu/index.js

@@ -1,10 +1,12 @@
 import DropdownMenu from './components/DropdownMenu/DropdownMenu.jsx';
+import DropdownMenuNested from './components/DropdownMenuNested/DropdownMenuNested.jsx';
 import DropdownMenuItem from './components/DropdownMenuItem/DropdownMenuItem.jsx';
 import DropdownMenuItemDivider from './components/DropdownMenuItemDivider.jsx';
 
 const DropdownMenuPlugin = () => ({
   components: {
     DropdownMenu,
+    DropdownMenuNested,
     DropdownMenuItem,
     DropdownMenuItemDivider,
   },

src/plugins/editor-content-fixtures/index.js

@@ -1,24 +1,21 @@
-import selectAsyncAPI250JSON from './selectors/selectAsyncAPI250JSON.js';
-import selectAsyncAPI250PetstoreJSON from './selectors/selectAsyncAPI250PetstoreJSON.js';
-import selectOpenAPI20JSON from './selectors/selectOpenAPI20JSON.js';
-import selectOpenAPI303JSON from './selectors/selectOpenAPI303JSON.js';
-import selectOpenAPI310JSON from './selectors/selectOpenAPI310JSON.js';
-import selectAPIDesignSystemsJSON from './selectors/selectAPIDesignSystemsJSON.js';
+import selectOpenAPI310PetstoreYAML from './selectors/selectOpenAPI310PetstoreYAML.js';
+import selectOpenAPI303PetstoreYAML from './selectors/selectOpenAPI303PetstoreYAML.js';
 import selectOpenAPI20PetstoreYAML from './selectors/selectOpenAPI20PetstoreYAML.js';
-import selectOpenAPI30PetstoreYAML from './selectors/selectOpenAPI30PetstoreYAML.js';
+import selectAsyncAPI250PetstoreYAML from './selectors/selectAsyncAPI250PetstoreYAML.js';
+import selectAsyncAPI250StreetlightsYAML from './selectors/selectAsyncAPI250StreetlightsYAML.js';
+import selectAPIDesignSystemsYAML from './selectors/selectAPIDesignSystemsYAML.js';
+// test
 
 const EditorContentFixturesPlugin = () => ({
   statePlugins: {
     editorContentFixtures: {
       selectors: {
-        selectAsyncAPI250JSON,
-        selectAsyncAPI250PetstoreJSON,
-        selectOpenAPI20JSON,
-        selectOpenAPI303JSON,
-        selectOpenAPI310JSON,
-        selectAPIDesignSystemsJSON,
+        selectOpenAPI310PetstoreYAML,
+        selectOpenAPI303PetstoreYAML,
         selectOpenAPI20PetstoreYAML,
-        selectOpenAPI30PetstoreYAML,
+        selectAsyncAPI250PetstoreYAML,
+        selectAsyncAPI250StreetlightsYAML,
+        selectAPIDesignSystemsYAML,
       },
     },
   },