Merge pull request #508 from dnbexperience/rc/v7

release of v7.0.0-beta.8

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

@@ -38,7 +38,7 @@ const plugins = [
   },
   'gatsby-plugin-meta-redirect',
   'gatsby-plugin-catch-links',
-  'gatsby-plugin-react-helmet-async',
+  'gatsby-plugin-react-helmet',
   'gatsby-plugin-sharp', // is used by gatsby-remark-images
   {
     resolve: 'gatsby-plugin-page-creator',

packages/dnb-design-system-portal/package.json

@@ -51,9 +51,9 @@
   "dependencies": {
     "algoliasearch": "^4.1.0",
     "css-vars-ponyfill": "^2.2.1",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-helmet-async": "^1.0.5",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "react-helmet": "^6.0.0",
     "react-router-dom": "^5.1.2",
     "smoothscroll-polyfill": "^0.4.4"
   },
@@ -107,7 +107,7 @@
     "gatsby-plugin-offline": "^3.1.2",
     "gatsby-plugin-page-creator": "^2.2.1",
     "gatsby-plugin-postcss": "^2.2.1",
-    "gatsby-plugin-react-helmet-async": "^1.0.16",
+    "gatsby-plugin-react-helmet": "^3.2.2",
     "gatsby-plugin-sass": "^2.2.1",
     "gatsby-plugin-sharp": "^2.5.4",
     "gatsby-react-router-scroll": "^2.2.1",

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

@@ -38,7 +38,8 @@ class Example extends React.PureComponent {
           data-dnb-test="pagination-default"
           scope={{ HeightLimit, LargePage }}
         >
-          {/* @jsx */ `
+          {
+            /* @jsx */ `
 <Pagination
   page_count={30}
   current_page={15}
@@ -48,15 +49,16 @@ class Example extends React.PureComponent {
 >
   {({ pageNo }) => <div>Page {pageNo}</div>}
 </Pagination>
-          `}
+          `
+          }
         </ComponentBox>
         <ComponentBox
           title="Centered Pagination with random delay"
           description="Note that we keep the hight of the previous page. All pages can for sure have their own height."
-          data-dnb-test="pagination-centered"
           scope={{ HeightLimit, LargePage }}
         >
-          {/* @jsx */ `
+          {
+            /* @jsx */ `
 <Pagination
   align="center"
   page_count={30}
@@ -68,15 +70,16 @@ class Example extends React.PureComponent {
     }, Math.ceil(Math.random() * 500))
   }}
 </Pagination>
-          `}
+          `
+          }
         </ComponentBox>
         <ComponentBox
           title="Infinity scroller with load button"
           description="A laod button is shown on the bottom by having `use_load_button={true}` - but here we define our `startup_page={5}`, so we also get a laod button on top."
-          data-dnb-test="pagination-infinity-load-button"
           scope={{ HeightLimit, LargePage }}
         >
-          {/* @jsx */ `
+          {
+            /* @jsx */ `
 <HeightLimit>
   <Pagination
     mode="infinity"
@@ -95,14 +98,15 @@ class Example extends React.PureComponent {
     }}
   />
 </HeightLimit>
-          `}
+          `
+          }
         </ComponentBox>
         <ComponentBox
           title="Infinity scroller with custom load indicator"
-          data-dnb-test="pagination-infinity-indicator"
           scope={{ HeightLimit, LargePage }}
         >
-          {/* @jsx */ `
+          {
+            /* @jsx */ `
 <HeightLimit>
   <Pagination
     mode="infinity"
@@ -127,13 +131,15 @@ class Example extends React.PureComponent {
     }}
   />
 </HeightLimit>
-          `}
+          `
+          }
         </ComponentBox>
         <ComponentBox
           title="Infinity scroller with unknown `page_count`"
           scope={{ HeightLimit, LargePage }}
         >
-          {/* @jsx */ `
+          {
+            /* @jsx */ `
 <HeightLimit>
   <Pagination
     mode="infinity"
@@ -163,18 +169,21 @@ class Example extends React.PureComponent {
     }}
   />
 </HeightLimit>
-          `}
+          `
+          }
         </ComponentBox>
         <ComponentBox
           title="Advanced Table infinity scroller"
           description="You can find the code either on [GitHub](https://github.com/dnbexperience/eufemia/blob/develop/packages/dnb-design-system-portal/src/docs/uilib/components/pagination/PaginationTableExample.js) or on [CodeSandbox](https://codesandbox.io/s/eufemia-table-pagination-infinity-546f7)"
           scope={{ HeightLimit, PaginationTableExample }}
         >
-          {/* @jsx */ `
+          {
+            /* @jsx */ `
 <HeightLimit height="60rem">
   <PaginationTableExample />
 </HeightLimit>
-          `}
+          `
+          }
         </ComponentBox>
       </React.Fragment>
     )

packages/dnb-design-system-portal/src/docs/uilib/demos/eufemia-demo/form-demo-01.js

@@ -12,7 +12,7 @@
  */
 
 import React from 'react'
-import { Helmet as Head } from 'react-helmet-async'
+import { Helmet as Head } from 'react-helmet'
 import styled from '@emotion/styled'
 
 // App layout wrapper

packages/dnb-design-system-portal/src/docs/uilib/elements/anchor.md

@@ -20,7 +20,7 @@ You would normally just decorate your anchor class withe this CSS class: `.dnb-a
     </a>
   </li>
   <li>
-    <a href="https://eufemia.dnb.no/uilib/elements/anchor" target="_blank" data-dnb-test="anchor-blank" className="dnb-anchor">
+    <a target="_blank" href="https://eufemia.dnb.no/uilib/elements/anchor" data-dnb-test="anchor-blank" className="dnb-anchor">
       Blank target with https
     </a>
   </li>
@@ -75,7 +75,7 @@ To force a specific state of style, use the following classes to do so:
     </a>
   </li>
   <li>
-    <a href="/" target="_blank" className="dnb-anchor dnb-anchor--no-icon">
+    <a target="_blank" href="https://eufemia.dnb.no/uilib/elements/anchor" className="dnb-anchor dnb-anchor--no-icon">
       Blank target without link_out icon
     </a>
   </li>
@@ -108,32 +108,77 @@ To force a specific state of style, use the following classes to do so:
 `}
 </ComponentBox>
 
-### Manipulation
+### Anchor modifiers
 
 - `.dnb-anchor--no-animation` <a href="/" class="dnb-anchor dnb-anchor--no-animation">No Animation</a>
 - `.dnb-anchor--no-style` <a href="/" class="dnb-anchor dnb-anchor--no-style">No Style</a>
 - `.dnb-anchor--no-hover` <a href="/" class="dnb-anchor dnb-anchor--no-hover">No Hover</a>
 - `.dnb-anchor--no-underline` <a href="/" class="dnb-anchor dnb-anchor--no-underline">No Underline</a>
 
-### With icon
+### Anchor with icons
 
-- <a href="/" className="dnb-anchor">
-    Anchor with Icon <IconPrimary icon="chevron_right" />
-  </a>
+<ComponentBox hideCode>
+{`
+<a href="/" className="dnb-anchor" data-dnb-test="anchor-icon">
+  Anchor with Icon <IconPrimary icon="chevron_right" />
+</a>
+<br/><br/>
+<p className="dnb-p" data-dnb-test="anchor-paragraph">
+  text <a href="/" className="dnb-anchor">Inside a Paragraph <IconPrimary icon="bell" /></a> text
+</p>
+`}
+</ComponentBox>
 
-- <p>
-    Eros semper blandit tellus mollis primis quisque platea sollicitudin
-    ipsum <a href="/" className="dnb-anchor">Inside a Paragraph <IconPrimary icon="bell" /></a> auctor cursus mauris porta consectetur natoque vehicula vestibulum feugiat ultrices vitae fermentum eros euismod imperdiet eleifend justo vivamus posuere
-  </p>
+### Anchor in headings
+
+<ComponentBox hideCode>
+{`
+<h2 className="dnb-h2">
+  <a href="/" className="dnb-anchor" data-dnb-test="anchor-heading">
+    Inside Headings <IconPrimary icon="bell" />
+  </a> H2
+</h2>
+<h2 className="dnb-h2">
+  <a target="_blank" href="https://eufemia.dnb.no/uilib/elements/anchor" className="dnb-anchor" data-dnb-test="anchor-heading-blank">
+    Blank target in headings
+  </a> H2
+</h2>
+`}
+</ComponentBox>
+
+### Customize blank target graphic
+
+You may use a [tool like this url-encoder](https://yoksel.github.io/url-encoder/) to **url-encode** your SVG.
+
+If you only want to change the colors, you can swap out `fill='%23007272'` with your custom color HEX code. Keep in mind that `%23` stands for `#`.
+
+```css
+.dnb-anchor::after {
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 0a.75.75 0 000 1.5V0zm4 .75h.75A.75.75 0 0015 0v.75zm-.75 4a.75.75 0 001.5 0h-1.5zm1.5 4a.75.75 0 00-1.5 0h1.5zm-.75 6.5V16c.41 0 .75-.34.75-.75H15zm-14 0H.25c0 .41.34.75.75.75v-.75zM1 .75V0a.75.75 0 00-.75.75H1zm5.75.75a.75.75 0 000-1.5v1.5zm2.72 3.72a.75.75 0 001.06 1.06L9.47 5.22zM14.25.75v4h1.5v-4h-1.5zm0 8v6.5h1.5v-6.5h-1.5zM15 14.5H1V16h14v-1.5zm-13.25.75V.75H.25v14.5h1.5zM1 1.5h5.75V0H1v1.5zm10 0h4V0h-4v1.5zm-.47 4.78l5-5L14.47.22l-5 5 1.06 1.06z' fill='%23007272' /%3E%3C/svg%3E");
+}
+.dnb-anchor:active::after {
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 0a.75.75 0 000 1.5V0zm4 .75h.75A.75.75 0 0015 0v.75zm-.75 4a.75.75 0 001.5 0h-1.5zm1.5 4a.75.75 0 00-1.5 0h1.5zm-.75 6.5V16c.41 0 .75-.34.75-.75H15zm-14 0H.25c0 .41.34.75.75.75v-.75zM1 .75V0a.75.75 0 00-.75.75H1zm5.75.75a.75.75 0 000-1.5v1.5zm2.72 3.72a.75.75 0 001.06 1.06L9.47 5.22zM14.25.75v4h1.5v-4h-1.5zm0 8v6.5h1.5v-6.5h-1.5zM15 14.5H1V16h14v-1.5zm-13.25.75V.75H.25v14.5h1.5zM1 1.5h5.75V0H1v1.5zm10 0h4V0h-4v1.5zm-.47 4.78l5-5L14.47.22l-5 5 1.06 1.06z' fill='%23a5e1d2' /%3E%3C/svg%3E");
+}
+```
+
+To ensure compatibility for Internet Explorer and older Edge versions, you may still use **base64**. Use e.g. [this base64 converter](https://www.base64encode.org)
+
+```css
+.dnb-anchor::after {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTEgMGEuNzUuNzUgMCAwMDAgMS41VjB6bTQgLjc1aC43NUEuNzUuNzUgMCAwMDE1IDB2Ljc1em0tLjc1IDRhLjc1Ljc1IDAgMDAxLjUgMGgtMS41em0xLjUgNGEuNzUuNzUgMCAwMC0xLjUgMGgxLjV6bS0uNzUgNi41VjE2Yy40MSAwIC43NS0uMzQuNzUtLjc1SDE1em0tMTQgMEguMjVjMCAuNDEuMzQuNzUuNzUuNzV2LS43NXpNMSAuNzVWMGEuNzUuNzUgMCAwMC0uNzUuNzVIMXptNS43NS43NWEuNzUuNzUgMCAwMDAtMS41djEuNXptMi43MiAzLjcyYS43NS43NSAwIDAwMS4wNiAxLjA2TDkuNDcgNS4yMnpNMTQuMjUuNzV2NGgxLjV2LTRoLTEuNXptMCA4djYuNWgxLjV2LTYuNWgtMS41ek0xNSAxNC41SDFWMTZoMTR2LTEuNXptLTEzLjI1Ljc1Vi43NUguMjV2MTQuNWgxLjV6TTEgMS41aDUuNzVWMEgxdjEuNXptMTAgMGg0VjBoLTR2MS41em0tLjQ3IDQuNzhsNS01TDE0LjQ3LjIybC01IDUgMS4wNiAxLjA2eiIgZmlsbD0iIzAwNzI3MiIgLz48L3N2Zz4=);
+}
+.dnb-anchor:active::after {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aAogICAgZD0iTTExIDBhLjc1Ljc1IDAgMDAwIDEuNVYwem00IC43NWguNzVBLjc1Ljc1IDAgMDAxNSAwdi43NXptLS43NSA0YS43NS43NSAwIDAwMS41IDBoLTEuNXptMS41IDRhLjc1Ljc1IDAgMDAtMS41IDBoMS41em0tLjc1IDYuNVYxNmMuNDEgMCAuNzUtLjM0Ljc1LS43NUgxNXptLTE0IDBILjI1YzAgLjQxLjM0Ljc1Ljc1Ljc1di0uNzV6TTEgLjc1VjBhLjc1Ljc1IDAgMDAtLjc1Ljc1SDF6bTUuNzUuNzVhLjc1Ljc1IDAgMDAwLTEuNXYxLjV6bTIuNzIgMy43MmEuNzUuNzUgMCAwMDEuMDYgMS4wNkw5LjQ3IDUuMjJ6TTE0LjI1Ljc1djRoMS41di00aC0xLjV6bTAgOHY2LjVoMS41di02LjVoLTEuNXpNMTUgMTQuNUgxVjE2aDE0di0xLjV6bS0xMy4yNS43NVYuNzVILjI1djE0LjVoMS41ek0xIDEuNWg1Ljc1VjBIMXYxLjV6bTEwIDBoNFYwaC00djEuNXptLS40NyA0Ljc4bDUtNUwxNC40Ny4yMmwtNSA1IDEuMDYgMS4wNnoiCiAgICBmaWxsPSIjYTVlMWQyIgogIC8+Cjwvc3ZnPg==);
+}
+```
+
+You can also make the **base64** conversion during runtime using `btoa`, e.g.:
+
+```js
+const svgAsString = ReactDOMServer.renderToString(<YourSVG />)
+const base64 = window.btoa(svgAsString)
+AnchorElement.style = `background-image: url(data:image/svg+xml;base64,${base64})`
 
-- <h2 className="dnb-h2 skip-anchor">
-    <a href="/" className="dnb-anchor">
-      Inside Headings <IconPrimary icon="bell" />
-    </a> H2
-  </h2>
-
-- <h2 className="dnb-h2 skip-anchor">
-    <a href="/" target="_blank" className="dnb-anchor">
-      Blank target in headings
-    </a> H2
-  </h2>
+// ... or using Node:
+Buffer.from(svgAsString, 'utf-8').toString('base64')
+```

packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/theming.md

@@ -18,6 +18,30 @@ Of course, we can still overwrite the functional layout properties to customize
 
 Simply do not import **dnb-theme-ui** and create your own visual styles for every component you use in your App.
 
+### Using `postcss-replace`
+
+If your applications only need new colors or other CSS properties, you could simply replace all the properties with [postcss-replace](https://www.npmjs.com/package/postcss-replace) using this config scheme:
+
+```js
+{
+  resolve: 'gatsby-plugin-postcss',
+  options: {
+    postCssPlugins: [
+      require('postcss-replace')({
+        pattern: /#([A-Fa-f0-9]+)/,
+        data: {
+          '007272': '#YOUR_COLOR' // sea-green
+        }
+      })
+    ]
+  }
+}
+```
+
+### Using CSS (vars) Custom Properties
+
+This is for sure a very nice and powerful solution, but lacks Internet Explorer support.
+
 ## The hard way
 
 Maybe the most common ways would be:

packages/dnb-design-system-portal/src/shared/menu/MainMenu.js

@@ -7,7 +7,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { css, Global } from '@emotion/core'
 import { StaticQuery, graphql } from 'gatsby'
-import { Helmet as Head } from 'react-helmet-async'
+import { Helmet as Head } from 'react-helmet'
 import styled from '@emotion/styled'
 import classnames from 'classnames'
 import Card, { focusRing } from './Card'

packages/dnb-design-system-portal/src/shared/menu/SearchBar.js

@@ -87,7 +87,7 @@ export const SearchBarInput = () => {
         <>
           <Items />
           {data.length > 1 && (
-            <li>
+            <li align="right">
               <SearchLogo />
             </li>
           )}
@@ -170,13 +170,9 @@ const StyledAutocomplete = styled(Autocomplete)`
   } */
 
   .search-logo {
-    display: flex;
-    align-items: flex-end;
-
     min-width: 4rem;
     height: 1rem;
     margin: 1rem;
-    margin-left: auto;
 
     filter: grayscale(1);
   }

packages/dnb-design-system-portal/src/shared/tags/ComponentBox.js

@@ -22,6 +22,7 @@ const ComponentBox = ({ children, hideOnTest, scope = {}, ...rest }) => {
         ...getFragments(),
         ...getElements(),
         styled,
+        React,
         TestWrapper,
         ...scope
       }}

packages/dnb-design-system-portal/src/templates/mdx.js

@@ -10,7 +10,7 @@ import { MDXRenderer } from 'gatsby-plugin-mdx'
 import { graphql } from 'gatsby'
 
 import Layout from '../shared/parts/Layout'
-import { Helmet as Head } from 'react-helmet-async'
+import { Helmet as Head } from 'react-helmet'
 import tags from '../shared/tags'
 
 const Tabbar = tags.Tabbar

packages/dnb-ui-lib/package.json

@@ -26,7 +26,7 @@
     "build:cjs": "cross-env NODE_ENV=production BABEL_ENV=cjs babel --config-file ./babel.config.cjs ./src --out-dir ./build/cjs --ignore \"./src/umd\" --ignore \"./src/core\" --ignore \"**/*.test.js\"",
     "build:clean": "rm -rf build/**",
     "build:component": "cross-env NODE_ENV=production BABEL_ENV=esm babel --config-file ./babel.config.cjs ./src/components/global-status --out-dir ./build/esm/components/global-status --ignore \"./src/umd\" --ignore \"./src/core\" --ignore \"**/*.test.js\"",
-    "build:copy": "cp -R build/esm/* ./ && cp -R build/* ./ && rm -rf build && rm ./dnb-ui-*.min.*",
+    "build:copy": "cp -R build/esm/* ./ && cp -R build/* ./ && rm -rf build && rm -f ./dnb-ui-*.min.*",
     "build:es": "cross-env NODE_ENV=production BABEL_ENV=es babel --config-file ./babel.config.cjs ./src --out-dir ./build/es --ignore \"./src/umd\" --ignore \"./src/core\" --ignore \"**/*.test.js\"",
     "build:esm": "cross-env NODE_ENV=production BABEL_ENV=esm babel --config-file ./babel.config.cjs ./src --out-dir ./build/esm --ignore \"./src/umd\" --ignore \"./src/core\" --ignore \"**/*.test.js\"",
     "build:prebuild": "babel-node ./scripts/prepub/runPrepub.js",
@@ -145,6 +145,7 @@
     "color": "^3.1.2",
     "cross-env": "^7.0.2",
     "css-loader": "^3.5.2",
+    "current-git-branch": "^1.1.0",
     "del": "^5.1.0",
     "detect-port": "^1.3.0",
     "dotenv": "^8.2.0",