+ A future version of the topbar can be used. It is in experimental state.
+ Things can be modified and depending of your use some features might
+ still be missing.
+
+ This is done by appending the class{" "}
+ to the element with
+ class .
+
+
+ There is several breaking changes (details are following lower down)
+
+
+
order of elements in the topbar
+
+ container links content is modified (added a header & footer to the
+ topbar, and links are grouped in a specific container)
+
+
logo used in the topbar is different
+
+ links need to have a `.pinned` class to be visible in the topbar
+
+
+
+ To do the migration please follow instructions on{" "}
+ the migration page.
+
+
+
Javascript methods
diff --git a/src/App/ComponentsDocumentation/components/TopbarMigratingToV2/index.js b/src/App/ComponentsDocumentation/components/TopbarMigratingToV2/index.js
new file mode 100644
index 0000000000..ce8e2ba06e
--- /dev/null
+++ b/src/App/ComponentsDocumentation/components/TopbarMigratingToV2/index.js
@@ -0,0 +1,466 @@
+import React, { useEffect } from "react";
+import { Link } from "react-router-dom";
+
+import { EditableComponentPreview, DocContainer } from "@docutils";
+import CodeTags from "@components/CodeTags";
+
+export const Overview = () => (
+
+
Intro
+
+
+ The migration should be part of a larger effort to rethink the
+ information structure. Try to simplify the navigation. Projects with an
+ allocated designer should collaborate with them to achieve this.{" "}
+
+
+ the new topbar is opt-in. By default nothing changes. The new style will
+ only be applied if you add the
+ class{" "}
+
+
+ There is several breaking changes (details are following lower down){" "}
+
+
+
order of elements in the topbar
+
+ container links content is modified (added a header & footer to the
+ topbar, and links are grouped in a specific container){" "}
+
+
logo used in the topbar is different
+
+ links need to have a
+ class to be visible in
+ the topbar{" "}
+
+
+
+ no change JS wise needed (no new method to call, etc). Things should
+ keep working{" "}
+
+
+ This is still an experimental phase. Please rise up any issue
+ you're finding out.
+
+
+
+);
+
+export const Migration = () => (
+
+
Migrating to Topbar v2
+
Experimental
+
+
+ this is an opt-in. By default, if you do not modify
+ anything, things should remain as they were 😉
+
+
+ to enable the new topbar you need to add the CSS class `experimental` to
+ the Topbar
+
+ we switch the SwedbankPay logo from the vertical version to the
+ horizontal one
+
+
+
+
+ BEFORE
+
+
+
+
+
+
+
+
+ NOW
+
+
+
+
+
+
+
+
+
the button to open the menu
+
+ we used to have two buttons, one top open the menu modal & the other one
+ to close it. We now only have the one to open it. The button to close it
+ is inside the modal (in
+ )
+
+
+ buttons are NOT modified. The only change is that we
+ remove the close button
+
+
+
+
+ BEFORE
+
+
+
+
+ {"\n"}
+
+ {"\n"}
+
+
+
+
+ NOW
+
+
+
+
+
+
+
+
+
the structure of the “`.topbar-link-container`” is modified:
+
+
+
+
+
+ BEFORE
+
+
+
+
it used to have all links as direct children
+
+
+
+
+ NOW
+
+
+
it now contains only 3 direct children
+
+
+
+
+
+
+
+
+
+
+
+
+
+ all links should be contained inside
+
+
+
+ so far only normal links can be contained inside it (no nesting,
+ no dropdowns, no sidebar)
+
+
+
+
+ in the future we plan to support nested links (2-3 levels of
+ nesting)
+
+
+ in the future we plan to replace the language dropdown by a
+ language button displaying a specific language selection modal
+
+
+
+
+
Links in topbar
+
+
+ max 5 short/medium length links in topbar (or less if long words). No
+ dynamic hiding, you're responsible to select which links you want
+ to keep “pinned” to the topbar on desktop and which ones can be
+ visible only in modal when it's opened
+
+
still no links visible on mobile view (no breaking change)
+
+ new
+
+
+
+ add the CSS class
+ to the links you want
+ to keep “pinned” to the topbar
+
+
+ any links without the
+ class will be hidden on
+ the topbar but visible inside the modal
+
+
+
+
Topbar modal header
+
+
+ {"\n"}
+
+ {"\n"}
+
+
+
+
+ mandatory to be used
+
+
for now it contains only the close button (to close the modal)
+
+ in the future it will eventually contain a header for the modal. (i.e.
+ for the language modal)
+
+
+
+
Topbar modal footer
+
+
+
+
+
+
initially it will be mandatory to be used BUT it can be empty:
+
+
+
+
in the future we'll make it optional
+
+
+
+);
+
+export const CurrentState = () => (
+
+
Current state of experimental
+
For now:
+
+
+ No plan of supporting dropdown and or custom items in the topbar/modal
+
+
Not ready for production yet
+
+
+);
+
+export const Roadmap = () => (
+
+
Roadmap
+
Future iterations:
+
+
language selector (button visible in topbar + display a modal)
+ {"\n"}
+
+ {"\n"}
+
+ {/* */}
+
+ {"\n"}
+ 
+ {"\n"}
+
+ {"\n"}
+
+ {/* */}
+
+ {"\n"}
+
+ {/* */}
+
+ {"\n"}
+ 
+ 
+