docs(Portal): add accordion to side menu (#3794)

## Accordion
* Can make a menu item into an accordion with the doc option `accordion:
true` (default is `false`)
* Accordions automatically open and close depending on which page you
navigate to.
* A "+/-" button indicates the accordions and allows for manual opening
and closing.
* Fallback auto-scroll _after_ expanding if the item is no longer in
view. Because the default auto-scroll can't handle multiple accordions
opening and closing at once.

## Menu ordering
* Added ability to use negative `order` to add to the bottom (`-1` is
the the first of them, followed by `-2` etc.).
* docs without order will be placed in the middle.
* fix: docs with `order` number now at the top instead of the bottom
(except negative order)
* fix: docs with same title and level no longer ignored
* fix: docs with dot `.` in the file name no longer ignored

## New doc structure
* "Releases and versions" can now be expanded to see each release page
* "Pagination" and "Fragments" children now hidden behind accordion
* "Form", "Wizard", "Iterate", "Value", and "Create your own component"
can now be expanded to see sub-components
* Changed "All feature fields" to accordion "More feature fields..."

## Other
* "Getting started" table of contents filled out to include all headings
* "Releases and versions" now uses `<ListSummaryFromEdges>` component
* `<ListSummaryFromEdges>` 
  * component now shows description in `returnListItems` mode
* fix: `<ListSummaryFromEdges>` made an `<ul>`for each `<li>` in
`returnListItems` mode. Now there is only one `<ul>` for the entire
list.
* Side menu is now a hierarchy of nested `<ul>` instead of one flat
list.

## Not-implemented ideas for the future
* Auto-scroll
* instead of scrolling the item to the top it should be smart enough to
include context. Scroll to the parent item, or until the item is
centered if the list is too long.
* Should animate the item when finished scrolling (a blink effect
maybe?), so the user can easily see where they are
* It should completely control scrolling by stopping all other scrolling
at the start of expansion so we don't get the occasional double scroll.
* The accordion button interferes with the sbanken styling, this should
be improved
* The "Usage" sub-menu should probably also implement some accordions
* "Base fields" and "Feature fields" could also be accordions, then
showing all the children would take less space. today we hide a few, and
that's not optimal.

packages/dnb-design-system-portal/gatsby-config.js

@@ -125,7 +125,8 @@ const plugins = [
       elements: [
         {
           selector: '#portal-sidebar-menu',
-          ensureInView: '#portal-sidebar-menu ul li.is-active',
+          ensureInView:
+            '#portal-sidebar-menu ul li.is-active > .dnb-sidebar-menu__item',
         },
       ],
     },

packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases.mdx

@@ -3,8 +3,12 @@ title: 'Releases and versions'
 developers: 'Overview of all major releases and changes, including migration guides.'
 redirect_from:
   - /uilib/releases
+accordion: true
 ---
 
+import ListUiLibVersions from './releases/dnb-ui-lib/ListUiLibVersions'
+import ListEufemiaVersions from './releases/eufemia/ListEufemiaVersions'
+
 import WelcomeAdvice from 'Docs/welcome-advice.mdx'
 import GithubLogo from 'Docs/contribute/assets/github-logo.js'
 import { Icon } from '@dnb/eufemia/src'
@@ -15,16 +19,12 @@ You may also have a look at the [<Icon icon={GithubLogo} size="default" />**GitH
 
 Here you can find an overview of all major releases (versions) and changes, including migration guides:
 
-- [**@dnb/eufemia@v10**](/uilib/about-the-lib/releases/eufemia/v10-info) _May, 31. 2023_
-- [**@dnb/eufemia@v9**](/uilib/about-the-lib/releases/eufemia/v9-info) _March, 3. 2021_
-- [**dnb-ui-lib@v8**](/uilib/about-the-lib/releases/dnb-ui-lib/v8-info) _December, 15. 2020_
-- [**dnb-ui-lib@v7.2**](/uilib/about-the-lib/releases/dnb-ui-lib/v7.2-info) _November, 8. 2020_
-- [**dnb-ui-lib@v7.0**](/uilib/about-the-lib/releases/dnb-ui-lib/v7-info) _June, 4. 2020_
-- [**dnb-ui-lib@v6.0**](/uilib/about-the-lib/releases/dnb-ui-lib/v6-info) _January, 30. 2020_
-- [**dnb-ui-lib@v5.8**](/uilib/about-the-lib/releases/dnb-ui-lib/v5.8-info) _November, 30. 2019_
-- [**dnb-ui-lib@v5.0**](/uilib/about-the-lib/releases/dnb-ui-lib/v5-info) _October, 30. 2019_
-- [**dnb-ui-lib@v4.18**](/uilib/about-the-lib/releases/dnb-ui-lib/v4.18-info) _September, 28. 2019_
-- [**dnb-ui-lib@v4.10**](/uilib/about-the-lib/releases/dnb-ui-lib/v4.10-info) _August, 24. 2019_
-- [**dnb-ui-lib@v4.0**](/uilib/about-the-lib/releases/dnb-ui-lib/v4-info) _July, 21. 2019_
+## @dnb/eufemia
+
+<ListEufemiaVersions returnListItems />
+
+## dnb-ui-lib
+
+<ListUiLibVersions returnListItems />
 
 <WelcomeAdvice />

packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/dnb-ui-lib.mdx

@@ -0,0 +1,11 @@
+---
+title: 'dnb-ui-lib'
+developers: 'Overview of all major dnb-ui-lib releases and changes, including migration guides.'
+order: 2
+---
+
+import ListUiLibVersions from './dnb-ui-lib/ListUiLibVersions'
+
+# dnb-ui-lib releases
+
+<ListUiLibVersions size="small" returnListItems />

packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/dnb-ui-lib/ListUiLibVersions.tsx

@@ -0,0 +1,39 @@
+import { useStaticQuery, graphql } from 'gatsby'
+import ListSummaryFromEdges from '../../../../../shared/parts/ListSummaryFromEdges'
+
+export default function ListUiLibVersions(props) {
+  const {
+    allMdx: { edges },
+  } = useStaticQuery(graphql`
+    {
+      allMdx(
+        filter: {
+          frontmatter: { title: { ne: null }, draft: { ne: true } }
+          internal: {
+            contentFilePath: {
+              glob: "**/uilib/about-the-lib/releases/dnb-ui-lib/**/*"
+            }
+          }
+        }
+        sort: [
+          { frontmatter: { order: ASC } }
+          { frontmatter: { title: DESC } }
+        ]
+      ) {
+        edges {
+          node {
+            fields {
+              slug
+            }
+            frontmatter {
+              title
+              description
+            }
+          }
+        }
+      }
+    }
+  `)
+
+  return <ListSummaryFromEdges edges={edges} {...props} />
+}

packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/dnb-ui-lib/v4-info.mdx

@@ -1,4 +1,7 @@
 ---
+title: 'v4.0'
+description: 'July, 21. 2019'
+order: -4
 redirect_from:
   - /uilib/about-the-lib/releases/v4-info
 ---

packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/dnb-ui-lib/v4.10-info.mdx

@@ -1,4 +1,7 @@
 ---
+title: 'v4.10'
+description: 'August, 24. 2019'
+order: -4.10
 redirect_from:
   - /uilib/about-the-lib/releases/v4.10-info
 ---

packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/dnb-ui-lib/v4.18-info.mdx

@@ -1,4 +1,7 @@
 ---
+title: 'v4.18'
+description: 'September, 28. 2019'
+order: -4.18
 redirect_from:
   - /uilib/about-the-lib/releases/v4.18-info
 ---

packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/dnb-ui-lib/v5-info.mdx

@@ -1,4 +1,7 @@
 ---
+title: 'v5.0'
+description: 'October, 30. 2019'
+order: -5
 redirect_from:
   - /uilib/about-the-lib/releases/v5-info
 ---

packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/dnb-ui-lib/v5.8-info.mdx

@@ -1,4 +1,7 @@
 ---
+title: 'v5.8'
+description: 'November, 30. 2019'
+order: -5.8
 redirect_from:
   - /uilib/about-the-lib/releases/v5.8-info
 ---

packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/dnb-ui-lib/v6-info.mdx

@@ -1,4 +1,7 @@
 ---
+title: 'v6.0'
+description: 'January, 30. 2020'
+order: -6
 redirect_from:
   - /uilib/about-the-lib/releases/v6-info
 ---

packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/dnb-ui-lib/v7-info.mdx

@@ -1,4 +1,7 @@
 ---
+title: 'v7.0'
+description: 'June, 4. 2020'
+order: -7
 redirect_from:
   - /uilib/about-the-lib/releases/v7-info
 ---

packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/dnb-ui-lib/v7.2-info.mdx

@@ -1,4 +1,7 @@
 ---
+title: 'v7.2'
+description: 'November, 8. 2020'
+order: -7.2
 redirect_from:
   - /uilib/about-the-lib/releases/v7.2-info
 ---

packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/dnb-ui-lib/v8-info.mdx

@@ -1,4 +1,7 @@
 ---
+title: 'v8'
+description: 'December, 15. 2020'
+order: -8
 redirect_from:
   - /uilib/about-the-lib/releases/v8-info
 ---

packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia.mdx

@@ -0,0 +1,11 @@
+---
+title: '@dnb/eufemia'
+developers: 'Overview of all major Eufemia releases and changes, including migration guides.'
+order: 1
+---
+
+import ListEufemiaVersions from './eufemia/ListEufemiaVersions'
+
+# @dnb/eufemia releases
+
+<ListEufemiaVersions size="small" returnListItems />

packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/ListEufemiaVersions.tsx

@@ -0,0 +1,39 @@
+import { useStaticQuery, graphql } from 'gatsby'
+import ListSummaryFromEdges from '../../../../../shared/parts/ListSummaryFromEdges'
+
+export default function ListEufemiaVersions(props) {
+  const {
+    allMdx: { edges },
+  } = useStaticQuery(graphql`
+    {
+      allMdx(
+        filter: {
+          frontmatter: { title: { ne: null }, draft: { ne: true } }
+          internal: {
+            contentFilePath: {
+              glob: "**/uilib/about-the-lib/releases/eufemia/**/*"
+            }
+          }
+        }
+        sort: [
+          { frontmatter: { order: ASC } }
+          { frontmatter: { title: DESC } }
+        ]
+      ) {
+        edges {
+          node {
+            fields {
+              slug
+            }
+            frontmatter {
+              title
+              description
+            }
+          }
+        }
+      }
+    }
+  `)
+
+  return <ListSummaryFromEdges edges={edges} {...props} />
+}

packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.mdx

@@ -1,3 +1,9 @@
+---
+title: 'v10'
+order: -10
+description: 'May, 31. 2023'
+---
+
 import { Accordion } from '@dnb/eufemia/src'
 
 # v10

packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v11-info.mdx

@@ -1,4 +1,7 @@
 ---
+title: 'v11'
+description: 'TBA'
+order: -11
 draft: true
 ---
 

packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v12-info.mdx

@@ -1,4 +1,7 @@
 ---
+title: 'v12'
+description: 'TBA'
+order: -12
 draft: true
 ---
 

packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v9-info.mdx

@@ -1,3 +1,9 @@
+---
+title: 'v9'
+order: -9
+description: 'March, 3. 2021'
+---
+
 # v9
 
 - [Migration](#migration)

packages/dnb-design-system-portal/src/docs/uilib/components/fragments.mdx

@@ -1,8 +1,9 @@
 ---
 title: 'Fragments'
 description: 'Fragments are small, low-level and reusable parts used inside other components.'
-order: 300
+order: -1
 theme: 'sbanken'
+accordion: true
 ---
 
 import ListFragments from 'dnb-design-system-portal/src/shared/parts/ListFragments'

packages/dnb-design-system-portal/src/docs/uilib/components/pagination.mdx

@@ -3,6 +3,7 @@ title: 'Pagination'
 description: 'The Pagination component supports both classical pagination and infinity scrolling.'
 showTabs: true
 theme: 'sbanken'
+accordion: true
 ---
 
 import PaginationInfo from 'Docs/uilib/components/pagination/info'

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form.mdx

@@ -15,6 +15,7 @@ breadcrumb:
     href: /uilib/extensions/forms/
   - text: Form
     href: /uilib/extensions/forms/Form/
+accordion: true
 ---
 
 import Info from 'Docs/uilib/extensions/forms/Form/info'

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Appearance.mdx

@@ -1,7 +1,6 @@
 ---
 title: 'Appearance'
 description: '`Form.Appearance` is a provider for theming form fields.'
-hideInMenu: true
 showTabs: true
 tabs:
   - title: Info

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/ButtonRow.mdx

@@ -1,7 +1,6 @@
 ---
 title: 'ButtonRow'
 description: '`Form.ButtonRow` is a wrapper for horizontally separated buttons.'
-hideInMenu: true
 showTabs: true
 tabs:
   - title: Info

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/FieldProps.mdx

@@ -1,7 +1,6 @@
 ---
 title: 'FieldProps'
 description: '`Form.FieldProps` is a provider for forwarding fields properties, such as `required` or `disabled` to all nested field components.'
-hideInMenu: true
 showTabs: true
 tabs:
   - title: Info

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Handler.mdx

@@ -1,7 +1,6 @@
 ---
 title: 'Handler'
 description: '`Form.Handler` provides both the DataContext.Provider and a HTML form element.'
-hideInMenu: true
 showTabs: true
 tabs:
   - title: Info

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/MainHeading.mdx

@@ -1,7 +1,6 @@
 ---
 title: 'MainHeading'
 description: '`Form.MainHeading` is a standardized main heading for sections, ensuring default layout, spacing etc.'
-hideInMenu: true
 showTabs: true
 tabs:
   - title: Info

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Section.mdx

@@ -1,7 +1,7 @@
 ---
 title: 'Section'
 description: '`Form.Section` lets you compose blocks of fields and values to be reused in different contexts.'
-hideInMenu: true
+order: 1
 showTabs: true
 tabs:
   - title: Info

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Section/EditContainer.mdx

@@ -3,7 +3,6 @@ title: 'EditContainer'
 description: '`Form.Section.EditContainer` enables users to toggle (with animation) the content of each item between the view and edit container.'
 order: 9
 showTabs: true
-hideInMenu: true
 tabs:
   - title: Info
     key: '/info'

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Section/ViewContainer.mdx

@@ -3,7 +3,6 @@ title: 'ViewContainer'
 description: '`Form.Section.ViewContainer` enables users to toggle (with animation) the content of each item between the view and edit container.'
 order: 8
 showTabs: true
-hideInMenu: true
 tabs:
   - title: Info
     key: '/info'

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/SubHeading.mdx

@@ -1,7 +1,6 @@
 ---
 title: 'SubHeading'
 description: '`Form.SubHeading` is a standardized sub heading for sections, ensuring default layout, spacing etc.'
-hideInMenu: true
 showTabs: true
 tabs:
   - title: Info

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/SubmitButton.mdx

@@ -1,7 +1,6 @@
 ---
 title: 'SubmitButton'
 description: '`Form.SubmitButton` connects to the `Form.Handler` to submit the active state of the internal DataContext, triggering `onSubmit`.'
-hideInMenu: true
 showTabs: true
 tabs:
   - title: Info

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/SubmitIndicator.mdx

@@ -1,7 +1,6 @@
 ---
 title: 'SubmitIndicator'
 description: '`Form.SubmitIndicator` lets you show an indicator while async form operations are performed.'
-hideInMenu: true
 showTabs: true
 tabs:
   - title: Info

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Visibility.mdx

@@ -1,7 +1,6 @@
 ---
 title: 'Visibility'
 description: '`Form.Visibility` makes it possible to hide components and elements on the screen based on the dynamic state of data.'
-hideInMenu: true
 showTabs: true
 tabs:
   - title: Info

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/getData.mdx

@@ -1,7 +1,6 @@
 ---
 title: 'getData'
 description: '`Form.getData` lets you access your form data outside of the form context.'
-hideInMenu: true
 showTabs: true
 tabs:
   - title: Info

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/setData.mdx

@@ -1,7 +1,6 @@
 ---
 title: 'setData'
 description: '`Form.setData` lets you set or modify your form data outside of the form context.'
-hideInMenu: true
 showTabs: true
 tabs:
   - title: Info