@progressiveui/react 1.22.0

package/src/components/Loading/Loading.stories.tsx

@@ -0,0 +1,94 @@
+import React, { useState } from "react";
+import markdown from "./README.mdx";
+import Loading from ".";
+import Button from "../Button";
+
+export default {
+  title: "Components/UI Elements/Loading",
+  component: Loading,
+  parameters: {
+    componentSubtitle: "Component",
+    status: "released",
+    mdx: markdown,
+  },
+};
+
+export const Regular = (args) => <Loading {...args}>Text</Loading>;
+Regular.args = {
+  active: true,
+  withOverlay: false,
+};
+
+export const overlay = (args) => {
+  const [loading, setLoading] = useState(false);
+
+  return (
+    <>
+      <Button kind="primary" onClick={() => setLoading(true)}>
+        Load with overlay{" "}
+      </Button>
+      {loading && (
+        <Loading withOverlay={loading} {...args}>
+          Text
+        </Loading>
+      )}
+    </>
+  );
+};
+
+overlay.args = {
+  active: true,
+};
+
+const overlaysourcecode = `
+import { Loading, Button  } from "@progressiveui/react";
+
+export const overlay = () => {
+  const [loading, setLoading] = useState(false);
+  
+  return(
+    <>
+      <Button onClick={()=>setLoading(true)}>Load with overlay </Button>
+      {
+        loading && ( <Loading withOverlay={loading} active={true}>Text</Loading> )
+      }
+    </>
+  )
+
+}
+`;
+
+const description = `
+When loader is applied with an overlay. Do this by specifying \`true\` to \`withOverlay\` prop.
+`;
+
+overlay.story = {
+  parameters: {
+    docs: {
+      storyDescription: description,
+      source: {
+        code: overlaysourcecode,
+      },
+    },
+  },
+};
+
+export const small = (args) => <Loading {...args}>Text</Loading>;
+
+const desc = `
+When loader has a \`small\` variant.
+`;
+
+small.args = {
+  withOverlay: false,
+  small: true,
+  active: true,
+};
+
+small.story = {
+  parameters: {
+    docs: {
+      storyDescription: desc,
+    },
+  },
+};

package/src/components/Loading/Loading.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { componentsX } from '../../internal/FeatureFlags';
+import useSettings from '../../hooks/useSettings';
+
+interface LoadingProps {
+  active?: boolean;
+  className?: string;
+  /**
+   * Specify whether you want the loader to be applied with an overlay
+   */
+  withOverlay?: boolean;
+  /**
+   * Specify whether you would like the small variant of <Loading>
+   */
+  small?: boolean;
+}
+
+/** Loading spinners are used when retrieving data or performing slow computations, and help to notify users that loading is underway. */
+
+const Loading: React.FC<LoadingProps> = (props) => {
+  const {
+    active = true,
+    className,
+    withOverlay = true,
+    small = false,
+    ...other
+  } = props;
+  const { prefix } = useSettings();
+
+  const loadingClasses = classNames(`${prefix}--loading`, className, {
+    [`${prefix}--loading--small`]: small,
+    [`${prefix}--loading--stop`]: !active,
+  });
+
+  const overlayClasses = classNames(`${prefix}--loading-overlay`, {
+    [`${prefix}--loading-overlay--stop`]: !active,
+  });
+
+  const loading = (
+    <div
+      {...other}
+      aria-live={active ? 'assertive' : 'off'}
+      className={loadingClasses}>
+      <svg className={`${prefix}--loading__svg`} viewBox="-75 -75 150 150">
+        <title>Loading</title>
+        {componentsX && small ? (
+          <circle
+            className={`${prefix}--loading__background`}
+            cx="0"
+            cy="0"
+            r="37.5"
+          />
+        ) : null}
+        <circle
+          className={componentsX ? `${prefix}--loading__stroke` : undefined}
+          cx="0"
+          cy="0"
+          r="37.5"
+        />
+      </svg>
+    </div>
+  );
+
+  return withOverlay ? (
+    <div className={overlayClasses}>{loading}</div>
+  ) : (
+    loading
+  );
+};
+
+Loading.displayName = 'Loading';
+
+export default Loading;

package/src/components/Loading/README.mdx

@@ -0,0 +1,23 @@
+## Usage
+
+Use the **Loading** spinner to indicate a loading time between 1 and 7 seconds. For shorter loading times don't use any loader and for longer use a progress bar to indicate the remaining time.
+
+### Usage with (react)
+
+```javascript
+import { Loading } from "@progressiveui/react";
+```
+
+```js
+<Loading withOverlay={false} active />
+```
+
+#### css Modifiers
+
+Use these modifiers with `.wfp--loading` class.
+
+| Selector                    | Description                              |
+| --------------------------- | ---------------------------------------- |
+| .wfp--loading--small        | Class for small loading spinner          |
+| .wfp--loading--stop         | Class for stopping the loading animation |
+| .wfp--loading-overlay--stop | Class for hiding the overlay             |

package/src/components/Loading/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export { default } from './Loading';

package/src/components/Loading/loading-vanilla.js

@@ -0,0 +1,137 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import mixin from '../../globals/js/misc/mixin';
+import createComponent from '../../globals/js/mixins/create-component';
+import initComponentBySearch from '../../globals/js/mixins/init-component-by-search';
+import handles from '../../globals/js/mixins/handles';
+import on from '../../globals/js/misc/on';
+import { settings } from '../../globals/js';
+
+const { prefix } = settings;
+
+class Loading extends mixin(createComponent, initComponentBySearch, handles) {
+  /**
+   * Spinner indicating loading state.
+   * @extends CreateComponent
+   * @extends InitComponentBySearch
+   * @extends Handles
+   * @param {HTMLElement} element The element working as a spinner.
+   * @param {object} [options] The component options.
+   * @param {boolean} [options.active] `true` if this spinner should roll.
+   */
+  constructor(element, options) {
+    super(element, options);
+
+    this.active = this.options.active;
+
+    // Initialize spinner
+    this.set(this.active);
+  }
+
+  /**
+   * Sets active/inactive state.
+   * @param {boolean} active `true` if this spinner should roll.
+   */
+  set(active) {
+    if (typeof active !== 'boolean') {
+      throw new TypeError('set expects a boolean.');
+    }
+
+    this.active = active;
+    this.element.classList.toggle(this.options.classLoadingStop, !this.active);
+
+    /**
+     * If overlay is the parentNode then toggle it too.
+     */
+    const parentNode = this.element.parentNode;
+
+    if (
+      parentNode &&
+      parentNode.classList.contains(this.options.classLoadingOverlay)
+    ) {
+      parentNode.classList.toggle(
+        this.options.classLoadingOverlayStop,
+        !this.active
+      );
+    }
+
+    return this;
+  }
+
+  /**
+   * Toggles active/inactive state.
+   */
+  toggle() {
+    return this.set(!this.active);
+  }
+
+  /**
+   * @returns {boolean} `true` if this spinner is rolling.
+   */
+  isActive() {
+    return this.active;
+  }
+
+  /**
+   * Sets state to inactive and deletes the loading element.
+   */
+  end() {
+    this.set(false);
+    let handleAnimationEnd = this.manage(
+      on(this.element, 'animationend', (evt) => {
+        if (handleAnimationEnd) {
+          handleAnimationEnd = this.unmanage(handleAnimationEnd).release();
+        }
+        if (evt.animationName === 'rotate-end-p2') {
+          this._deleteElement();
+        }
+      })
+    );
+  }
+
+  /**
+   * Delete component from the DOM.
+   */
+  _deleteElement() {
+    const parentNode = this.element.parentNode;
+
+    parentNode.removeChild(this.element);
+
+    if (parentNode.classList.contains(this.options.selectorLoadingOverlay)) {
+      parentNode.remove();
+    }
+  }
+
+  /**
+   * The map associating DOM element and spinner instance.
+   * @member Loading.components
+   * @type {WeakMap}
+   */
+  static components /* #__PURE_CLASS_PROPERTY__ */ = new WeakMap();
+
+  /**
+   * The component options.
+   * If `options` is specified in the constructor, {@linkcode Loading.create .create()}, or {@linkcode Loading.init .init()},
+   * properties in this object are overriden for the instance being create and how {@linkcode Loading.init .init()} works.
+   * @member Loading.options
+   * @type {object}
+   * @property {string} selectorInit The CSS selector to find spinners.
+   */
+  static get options() {
+    return {
+      selectorInit: '[data-loading]',
+      selectorLoadingOverlay: `.${prefix}--loading-overlay`,
+      classLoadingOverlay: `${prefix}--loading-overlay`,
+      classLoadingStop: `${prefix}--loading--stop`,
+      classLoadingOverlayStop: `${prefix}--loading-overlay--stop`,
+      active: true,
+    };
+  }
+}
+
+export default Loading;

package/src/components/Loading/loading.config.js

@@ -0,0 +1,42 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const { prefix } = require('../../globals/js');
+
+module.exports = {
+  context: {
+    prefix,
+  },
+  variants: [
+    {
+      name: 'default',
+      label: 'Loading',
+      notes: `
+        Loading spinners are used when retrieving data or performing slow computations,
+        and help to notify users that loading is underway.
+      `,
+      context: {
+        overlay: true,
+      },
+    },
+    {
+      name: 'without-overlay',
+      label: 'Without overlay',
+      context: {
+        overlay: false,
+      },
+    },
+    {
+      name: 'small',
+      label: 'Small',
+      context: {
+        overlay: false,
+        small: true,
+      },
+    },
+  ],
+};

package/src/components/Loading/loading.hbs

@@ -0,0 +1,18 @@
+<!-- 
+  Copyright IBM Corp. 2016, 2018
+
+  This source code is licensed under the Apache-2.0 license found in the
+  LICENSE file in the root directory of this source tree.
+-->
+
+{{#if overlay}}<div class="{{@root.prefix}}--loading-overlay">{{/if}}
+<div data-loading class="{{@root.prefix}}--loading{{#if small}} {{@root.prefix}}--loading--small{{/if}}">
+  <svg class="{{@root.prefix}}--loading__svg" viewBox="-75 -75 150 150">
+    <title>Loading</title>
+    {{#if componentsX}}
+    {{#if small}}<circle class="{{@root.prefix}}--loading__background" cx="0" cy="0" r="37.5" />{{/if}}
+    {{/if}}
+    <circle {{#if componentsX}}class="{{@root.prefix}}--loading__stroke"{{/if}} cx="0" cy="0" r="37.5" />
+  </svg>
+</div>
+{{#if overlay}}</div>{{/if}}

package/src/components/MainNavigation/MainNavigation-test.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { MainNavigation} from '../MainNavigation';
+import { shallow } from 'enzyme';
+
+describe('MainNavigation', () => {
+    describe('Renders as expected', () => {
+        const wrapper = shallow(<MainNavigation className="some-class">Content</MainNavigation>)
+
+        it('should allow for custom classes to be applied', () => {
+            expect(wrapper.hasClass('some-class')).toEqual(true);
+          });
+
+        it('has classes as expected', () => {
+            expect(wrapper.exists('.wfp--main-navigation')).toBe(true);
+           
+        })
+
+        it('has children as expected', () => {
+            expect(wrapper.find("ul").length).toBe(1);
+        })
+
+        
+    });
+
+    
+})

package/src/components/MainNavigation/MainNavigation.hbs

@@ -0,0 +1,180 @@
+<div class="wfp--main-navigation">
+  <div class="wfp--wrapper wfp--wrapper--width-lg wfp--wrapper--width-mobile-full wfp--main-navigation__wrapper">
+    <div class="wfp--main-navigation__logo-wrapper">
+      <button tabindex="0" class="wfp--main-navigation__button wfp--btn wfp--btn--primary" type="button">Menu</button>
+      <div class="wfp--main-navigation__logo"><a href="http://www.wfp.org">WFP UI</a></div>
+    </div>
+    <ul class="wfp--main-navigation__list">
+      <li class="wfp--main-navigation__item">
+        <div class="wfp--main-navigation__trigger"><a href="http://communities.wfp.org" class="wfp--link" target="_blank">Lorem</a></div>
+      </li>
+      <li class="wfp--main-navigation__item">
+        <div class="wfp--main-navigation__trigger"><a href="https://go.docs.wfp.org" class="wfp--link" target="_blank">Ipsum jomen</a></div>
+      </li>
+      <li class="wfp--main-navigation__item">
+        <div class="wfp--main-navigation__trigger"><a href="http://opweb.wfp.org" class="wfp--link" target="_blank">Bin dualem</a></div>
+      </li>
+
+      <li class="wfp--main-navigation__item">
+        <div class="wfp--main-navigation__trigger wfp--main-navigation__trigger--has-sub"><a href="http://manuals.wfp.org" class="wfp--link" target="_blank">Manuals</a></div>
+        <div class="wfp--main-navigation__sub">
+          <div>
+            <div class="wfp--sub-navigation__header">
+              <div class="wfp--sub-navigation__title">The Title</div>
+              <div class="wfp--sub-navigation__link"><button tabindex="0" class="wfp--btn wfp--btn--sm wfp--btn--primary" type="button">The SubPage Link</button></div>
+              <div class="wfp--sub-navigation__filter">
+                <div class="wfp--search wfp--search--sm some-class" role="search">
+                  <svg class="wfp--search-magnifier" fill-rule="evenodd" height="16" name="search" role="img" viewBox="0 0 16 16" width="16" aria-label="Provide a description that will be used as the title" alt="Provide a description that will be used as the title">
+                    <path d="M11.435 10.063h-.728l-.251-.252a5.89 5.89 0 0 0 1.437-3.865 5.946 5.946 0 1 0-5.947 5.947 5.91 5.91 0 0 0 3.865-1.432l.252.251v.723L14.637 16 16 14.637l-4.565-4.574zm-5.489 0a4.117 4.117 0 1 1 0-8.234 4.117 4.117 0 0 1 0 8.234z"></path>
+                  </svg>
+                  <label for="search-2" class="wfp--label"></label><input type="text" class="wfp--search-input" id="search-2" placeholder="Filter List">
+                  <button class="wfp--search-close wfp--search-close--hidden" type="button">
+                    <svg fill-rule="evenodd" height="16" name="close--solid" role="img" viewBox="0 0 16 16" width="16" aria-label="Provide a description that will be used as the title" alt="Provide a description that will be used as the title">
+                      <path d="M8 6.586L5.879 4.464 4.464 5.88 6.586 8l-2.122 2.121 1.415 1.415L8 9.414l2.121 2.122 1.415-1.415L9.414 8l2.122-2.121-1.415-1.415L8 6.586zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"></path>
+                    </svg>
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div class="wfp--sub-navigation__content">
+              <div class="wfp--sub-navigation__list">
+                <div class="wfp--sub-navigation__group wfp--sub-navigation__group--columns">
+                  <h3 class="wfp--sub-navigation__group__title">First List</h3>
+                  <div>
+                    <div class="wfp--sub-navigation__item"><a href="https://go.docs.wfp.org" class="wfp--link" target="_blank">Lorem Ipsum et jomen</a></div>
+                    <div class="wfp--sub-navigation__item"><a href="https://go.docs.wfp.org" class="wfp--link" target="_blank">At vero eos</a></div>
+                    <div class="wfp--sub-navigation__item"><a href="https://go.docs.wfp.org" class="wfp--link" target="_blank">Sadipscing elitr</a></div>
+                    <div class="wfp--sub-navigation__item"><a href="https://go.docs.wfp.org" class="wfp--link" target="_blank">At vero eos</a></div>
+                    <div class="wfp--sub-navigation__item"><a href="https://go.docs.wfp.org" class="wfp--link" target="_blank">Sadipscing elitr</a></div>
+                    <div class="wfp--sub-navigation__item"><a href="https://go.docs.wfp.org" class="wfp--link" target="_blank">Dolore magna</a></div>
+                    <div class="wfp--sub-navigation__item"><a href="https://go.docs.wfp.org" class="wfp--link" target="_blank">Sadipscing elitr</a></div>
+                    <div class="wfp--sub-navigation__item"><a href="https://go.docs.wfp.org" class="wfp--link" target="_blank">Consetetur sadipscing</a></div>
+                    <div class="wfp--sub-navigation__item"><a href="https://go.docs.wfp.org" class="wfp--link" target="_blank">Sadipscing elitr</a></div>
+                  </div>
+                </div>
+                <div class="wfp--sub-navigation__group wfp--sub-navigation__group--columns">
+                  <h3 class="wfp--sub-navigation__group__title">Second List of Items</h3>
+                  <div>
+                    <div class="wfp--sub-navigation__item"><a href="https://go.docs.wfp.org" class="wfp--link" target="_blank">At vero eos</a></div>
+                    <div class="wfp--sub-navigation__item"><a href="https://go.docs.wfp.org" class="wfp--link" target="_blank">Sadipscing elitr</a></div>
+                    <div class="wfp--sub-navigation__item"><a href="https://go.docs.wfp.org" class="wfp--link" target="_blank">At vero eos</a></div>
+                    <div class="wfp--sub-navigation__item"><a href="https://go.docs.wfp.org" class="wfp--link" target="_blank">Nonumy eirmod</a></div>
+                    <div class="wfp--sub-navigation__item"><a href="https://go.docs.wfp.org" class="wfp--link" target="_blank">Consetetur sadipscing</a></div>
+                    <div class="wfp--sub-navigation__item"><a href="https://go.docs.wfp.org" class="wfp--link" target="_blank">Dolore magna</a></div>
+                    <div class="wfp--sub-navigation__item"><a href="https://go.docs.wfp.org" class="wfp--link" target="_blank">Nonumy eirmod</a></div>
+                    <div class="wfp--sub-navigation__item"><a href="https://go.docs.wfp.org" class="wfp--link" target="_blank">Dolore magna</a></div>
+                    <div class="wfp--sub-navigation__item"><a href="https://go.docs.wfp.org" class="wfp--link" target="_blank">Sadipscing elitr</a></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </li>
+
+       <li class="wfp--main-navigation__item">
+        <div class="wfp--main-navigation__trigger wfp--main-navigation__trigger--has-sub"><a href="http://manuals.wfp.org" class="wfp--link" target="_blank">Sea takimata</a></div>
+        <div class="wfp--main-navigation__sub">
+          <div>
+            <div class="wfp--sub-navigation__header">
+              <div class="wfp--sub-navigation__title">Another Title</div>
+              <div class="wfp--sub-navigation__link"><button tabindex="0" class="wfp--btn wfp--btn--sm wfp--btn--primary" type="button">The SubPage Link</button></div>
+              <div class="wfp--sub-navigation__filter">
+                <div class="wfp--search wfp--search--sm some-class" role="search">
+                  <svg class="wfp--search-magnifier" fill-rule="evenodd" height="16" name="search" role="img" viewBox="0 0 16 16" width="16" aria-label="Provide a description that will be used as the title" alt="Provide a description that will be used as the title">
+                    <path d="M11.435 10.063h-.728l-.251-.252a5.89 5.89 0 0 0 1.437-3.865 5.946 5.946 0 1 0-5.947 5.947 5.91 5.91 0 0 0 3.865-1.432l.252.251v.723L14.637 16 16 14.637l-4.565-4.574zm-5.489 0a4.117 4.117 0 1 1 0-8.234 4.117 4.117 0 0 1 0 8.234z"></path>
+                  </svg>
+                  <label for="search-2" class="wfp--label"></label><input type="text" class="wfp--search-input" id="search-2" placeholder="Filter List">
+                  <button class="wfp--search-close wfp--search-close--hidden" type="button">
+                    <svg fill-rule="evenodd" height="16" name="close--solid" role="img" viewBox="0 0 16 16" width="16" aria-label="Provide a description that will be used as the title" alt="Provide a description that will be used as the title">
+                      <path d="M8 6.586L5.879 4.464 4.464 5.88 6.586 8l-2.122 2.121 1.415 1.415L8 9.414l2.121 2.122 1.415-1.415L9.414 8l2.122-2.121-1.415-1.415L8 6.586zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"></path>
+                    </svg>
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div class="wfp--sub-navigation__content">
+              <div class="wfp--sub-navigation__list">
+                <div class="wfp--sub-navigation__group wfp--sub-navigation__group--columns">
+                  <h3 class="wfp--sub-navigation__group__title">First List</h3>
+                  <div>
+                    <div class="wfp--sub-navigation__item"><a href="https://go.docs.wfp.org" class="wfp--link" target="_blank">Lorem Ipsum et jomen</a></div>
+                    <div class="wfp--sub-navigation__item"><a href="https://go.docs.wfp.org" class="wfp--link" target="_blank">At vero eos</a></div>
+                    <div class="wfp--sub-navigation__item"><a href="https://go.docs.wfp.org" class="wfp--link" target="_blank">Sadipscing elitr</a></div>
+                    <div class="wfp--sub-navigation__item"><a href="https://go.docs.wfp.org" class="wfp--link" target="_blank">At vero eos</a></div>
+                    <div class="wfp--sub-navigation__item"><a href="https://go.docs.wfp.org" class="wfp--link" target="_blank">Sadipscing elitr</a></div>
+                    <div class="wfp--sub-navigation__item"><a href="https://go.docs.wfp.org" class="wfp--link" target="_blank">Dolore magna</a></div>
+                    <div class="wfp--sub-navigation__item"><a href="https://go.docs.wfp.org" class="wfp--link" target="_blank">Sadipscing elitr</a></div>
+                    <div class="wfp--sub-navigation__item"><a href="https://go.docs.wfp.org" class="wfp--link" target="_blank">Consetetur sadipscing</a></div>
+                    <div class="wfp--sub-navigation__item"><a href="https://go.docs.wfp.org" class="wfp--link" target="_blank">Sadipscing elitr</a></div>
+                  </div>
+                </div>
+                <div class="wfp--sub-navigation__group wfp--sub-navigation__group--columns">
+                  <h3 class="wfp--sub-navigation__group__title">Second List of Items</h3>
+                  <div>
+                    <div class="wfp--sub-navigation__item"><a href="https://go.docs.wfp.org" class="wfp--link" target="_blank">At vero eos</a></div>
+                    <div class="wfp--sub-navigation__item"><a href="https://go.docs.wfp.org" class="wfp--link" target="_blank">Sadipscing elitr</a></div>
+                    <div class="wfp--sub-navigation__item"><a href="https://go.docs.wfp.org" class="wfp--link" target="_blank">At vero eos</a></div>
+                    <div class="wfp--sub-navigation__item"><a href="https://go.docs.wfp.org" class="wfp--link" target="_blank">Nonumy eirmod</a></div>
+                    <div class="wfp--sub-navigation__item"><a href="https://go.docs.wfp.org" class="wfp--link" target="_blank">Consetetur sadipscing</a></div>
+                    <div class="wfp--sub-navigation__item"><a href="https://go.docs.wfp.org" class="wfp--link" target="_blank">Dolore magna</a></div>
+                    <div class="wfp--sub-navigation__item"><a href="https://go.docs.wfp.org" class="wfp--link" target="_blank">Nonumy eirmod</a></div>
+                    <div class="wfp--sub-navigation__item"><a href="https://go.docs.wfp.org" class="wfp--link" target="_blank">Dolore magna</a></div>
+                    <div class="wfp--sub-navigation__item"><a href="https://go.docs.wfp.org" class="wfp--link" target="_blank">Sadipscing elitr</a></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </li>
+
+      <li class="wfp--main-navigation__item">
+        <div class="wfp--main-navigation__trigger">
+          <div class="wfp--search wfp--search--lg wfp--search--main" role="search">
+            <svg class="wfp--search-magnifier" fill-rule="evenodd" height="16" name="search" role="img" viewBox="0 0 16 16" width="16" aria-label="Search" alt="Search">
+              <title>Search</title>
+              <path d="M11.435 10.063h-.728l-.251-.252a5.89 5.89 0 0 0 1.437-3.865 5.946 5.946 0 1 0-5.947 5.947 5.91 5.91 0 0 0 3.865-1.432l.252.251v.723L14.637 16 16 14.637l-4.565-4.574zm-5.489 0a4.117 4.117 0 1 1 0-8.234 4.117 4.117 0 0 1 0 8.234z"></path>
+            </svg>
+            <label for="search-2" class="wfp--label">Search</label><input type="text" class="wfp--search-input" id="search-2" placeholder="Search">
+            <button class="wfp--search-close wfp--search-close--hidden" type="button">
+              <svg fill-rule="evenodd" height="16" name="close--solid" role="img" viewBox="0 0 16 16" width="16" aria-label="Provide a description that will be used as the title" alt="Provide a description that will be used as the title">
+                <path d="M8 6.586L5.879 4.464 4.464 5.88 6.586 8l-2.122 2.121 1.415 1.415L8 9.414l2.121 2.122 1.415-1.415L9.414 8l2.122-2.121-1.415-1.415L8 6.586zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"></path>
+              </svg>
+            </button>
+          </div>
+        </div>
+      </li>
+      <li class="wfp--main-navigation__user wfp--main-navigation__item">
+        <div class="wfp--main-navigation__trigger wfp--main-navigation__trigger--has-sub">
+          <div class="wfp--user" title="Max Mustermann long name">
+            <svg class="wfp--user__icon wfp--user__icon--empty" fill="#ffffff" fill-rule="evenodd" height="14" name="user" role="img" viewBox="0 0 16 16" width="14" title="Max Mustermann long name" aria-label="User Icon" alt="User Icon">
+              <title>User Icon</title>
+              <path d="M6.123 9.455a3.5 3.5 0 1 1 3.754 0c1.958.97 3.571 3.424 4.436 6.64-5.852-.027-6.488-.027-12.62-.027.867-3.203 2.477-5.645 4.43-6.613z"></path>
+            </svg>
+          </div>
+        </div>
+        <div class="wfp--main-navigation__sub">
+          <div>
+            <div class="wfp--sub-navigation__header">
+              <div class="wfp--sub-navigation__title">User Menu</div>
+            </div>
+            <div class="wfp--sub-navigation__content">
+              <div class="wfp--sub-navigation__list">
+                <div class="wfp--sub-navigation__group">
+                  <h3 class="wfp--sub-navigation__group__title">First List</h3>
+                  <div>
+                    <div class="wfp--sub-navigation__item"><a href="https://go.docs.wfp.org" class="wfp--link" target="_blank">Lorem Ipsum et jomen</a></div>
+                    <div class="wfp--sub-navigation__item"><a href="https://go.docs.wfp.org" class="wfp--link" target="_blank">At vero eos</a></div>
+                    <div class="wfp--sub-navigation__item"><a href="https://go.docs.wfp.org" class="wfp--link" target="_blank">Sadipscing elitr</a></div>
+                    <div class="wfp--sub-navigation__item"><a href="https://go.docs.wfp.org" class="wfp--link" target="_blank">At vero eos</a></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+</div>