@progressiveui/react 2.0.2 → 2.0.4

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

@@ -1,94 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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

@@ -1,23 +0,0 @@
-## 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

@@ -1,8 +0,0 @@
-/**
- * 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

@@ -1,137 +0,0 @@
-/**
- * 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

@@ -1,42 +0,0 @@
-/**
- * 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

@@ -1,18 +0,0 @@
-<!-- 
-  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

@@ -1,26 +0,0 @@
-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

@@ -1,180 +0,0 @@
-<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>