Merge pull request #677 from dnbexperience/rc/v7.2-beta

release of v7.2.0-beta.28

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

@@ -21,12 +21,12 @@ const plugins = [
       icon: './static/apple-touch-icon.png', // This path is relative to the root of the site.
       icons: [
         {
-          src: './android-chrome-192x192.png',
+          src: '/android-chrome-192x192.png',
           sizes: '192x192',
           type: 'image/png'
         },
         {
-          src: './android-chrome-512x512.png',
+          src: '/android-chrome-512x512.png',
           sizes: '512x512',
           type: 'image/png'
         }

packages/dnb-design-system-portal/src/core/ChangeLocale.js

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Dropdown } from 'dnb-ui-lib/src'
+import { ToggleButton } from 'dnb-ui-lib/src'
+// import { Dropdown } from 'dnb-ui-lib/src'
 
 import Context from 'dnb-ui-lib/src/shared/Context'
 import { setLang } from './portalProviders'
@@ -8,14 +9,28 @@ export default function ChangeLocale(props) {
   const { locale, setLocale } = React.useContext(Context)
 
   return (
-    <Dropdown
+    <ToggleButton.Group
       value={locale}
-      data={{ 'en-US': 'English', 'nb-NO': 'Norsk' }}
-      on_change={({ data: { selected_key } }) => {
-        setLocale(selected_key)
-        setLang(selected_key)
+      on_change={({ value }) => {
+        setLocale(value)
+        setLang(value)
       }}
       {...props}
-    />
+    >
+      <ToggleButton value="nb-NO">Norsk</ToggleButton>
+      <ToggleButton value="en-US">English</ToggleButton>
+    </ToggleButton.Group>
   )
+
+  // return (
+  //   <Dropdown
+  //     value={locale}
+  //     data={{ 'en-US': 'English', 'nb-NO': 'Norsk' }}
+  //     on_change={({ data: { value } }) => {
+  //       setLocale(value)
+  //       setLang(value)
+  //     }}
+  //     {...props}
+  //   />
+  // )
 }

packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/events.md

@@ -4,12 +4,12 @@ showTabs: true
 
 ## Events
 
-| Events      | Description                                                                                                                                                                                                                                                                             |
-| ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `on_change` | _(optional)_ will be called on state changes made by the user. Returns an object with the new selected `data` item `{ data, event, attributes, value }`.                                                                                                                                |
-| `on_select` | _(optional)_ will be called once the users selects an item by a click or keyboard navigation. Returns an object with the new selected `data` item `{ data, event, attributes, value, active_item }`. The **active_item** property is the currently selected item by keyboard navigation |
-| `on_show`   | _(optional)_ will be called once the user presses the dropdown. Returns the data item `{ data, attributes }`.                                                                                                                                                                           |
-| `on_hide`   | _(optional)_ will be called once the user presses the dropdown again, or clicks somewhere else. Returns the data item `{ data, attributes }`.                                                                                                                                           |
+| Events      | Description                                                                                                                                                                                                                                                                                           |
+| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `on_change` | _(optional)_ will be called on state changes made by the user. Returns an object with the new selected `data` item `{ data, event, attributes, selected_key, value }`.                                                                                                                                |
+| `on_select` | _(optional)_ will be called once the users selects an item by a click or keyboard navigation. Returns an object with the new selected `data` item `{ data, event, attributes, selected_key, value, active_item }`. The **active_item** property is the currently selected item by keyboard navigation |
+| `on_show`   | _(optional)_ will be called once the user presses the dropdown. Returns the data item `{ data, attributes }`.                                                                                                                                                                                         |
+| `on_hide`   | _(optional)_ will be called once the user presses the dropdown again, or clicks somewhere else. Returns the data item `{ data, attributes }`.                                                                                                                                                         |
 
 ### The `on_change` vs `on_select` difference
 

packages/dnb-design-system-portal/src/docs/uilib/components/number/properties.md

@@ -21,6 +21,7 @@ showTabs: true
 | `prefix`                                    | _(optional)_ add a string or React component before the number, including a white space.                                                                                                                                                                                                      |
 | `suffix`                                    | _(optional)_ appends a string or React component after the number, including a white space.                                                                                                                                                                                                   |
 | `selectall`                                 | _(optional)_ use `false` to disable the auto select all on first click. Defaults to `true`.                                                                                                                                                                                                   |
+| `copy_selection`                            | _(optional)_ use `false` to disable the auto copy feature. Defaults to `true`.                                                                                                                                                                                                                |
 | `link`                                      | _(optional)_ use `tel` or `sms` to enable a clickable / touchable anchor link.                                                                                                                                                                                                                |
 | `element`                                   | _(optional)_ define what HTML element should be used. Defaults to `<span>`.                                                                                                                                                                                                                   |
 | `[number options]`                          | _(optional)_ accepts all [number.toLocaleString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString) options as an object - can also be a JSON given as the parameter e.g. `options='{"minimumFractionDigits":"2"}'`.                     |

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

@@ -74,8 +74,8 @@ const ChangeLocale = () => {
   return <Dropdown
     value={locale}
     data={{ 'en-US': 'English', 'nb-NO': 'Norsk' }}
-    on_change={({ data: { selected_key } }) => {
-      setLocale(selected_key)
+    on_change={({ data: { value } }) => {
+      setLocale(value)
     }}
   />
 }

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

@@ -25,8 +25,8 @@ const ChangeLocale = () => {
     <Dropdown
       value={locale}
       data={{ 'en-US': 'English', 'nb-NO': 'Norsk' }}
-      on_change={({ data: { selected_key } }) => {
-        setLocale(selected_key)
+      on_change={({ data: { value } }) => {
+        setLocale(value)
       }}
     />
   )

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

@@ -9,17 +9,14 @@ import classnames from 'classnames'
 import styled from '@emotion/styled'
 import {
   IS_IOS,
-  // copyToClipboard,
+  copyWithEffect,
   hasSelectedText
 } from 'dnb-ui-lib/src/shared/helpers'
 import {
   convertJsxToString,
   warn
 } from 'dnb-ui-lib/src/shared/component-helper'
-import {
-  copyNumber,
-  runIOSSelectionFix
-} from 'dnb-ui-lib/src/components/Number'
+import { runIOSSelectionFix } from 'dnb-ui-lib/src/components/Number'
 
 // we may use this one, but for now, we just keep the build in mdx support
 // import ReactMarkdown from 'react-markdown'
@@ -54,30 +51,16 @@ const Copy = ({ children, className, ...rest }) => {
           selection.removeAllRanges()
           selection.addRange(range)
 
-          // copyToClipboard(str)
-          copyNumber(str) // use copyNumber only to use the nice effect / animation
+          copyWithEffect(str) // use copyWithEffect only to use the nice effect / animation
         }
       } catch (e) {
         warn(e)
       }
     }
   }
 
-  // const onMouseDownHandler = () => {
-  //   if (hasSelectedText()) {
-  //     try {
-  //       const selection = window.getSelection()
-  //       selection.removeAllRanges()
-  //     } catch (e) {
-  //       warn(e)
-  //     }
-  //   }
-  // }
-
   const params = {
     onClick: onClickHandler
-    // onMouseDown: onMouseDownHandler,
-    // onTouchStart: onMouseDownHandler
   }
 
   return (

packages/dnb-ui-lib/assets/browser/site.webmanifest

@@ -4,12 +4,12 @@
   "start_url": "/",
   "icons": [
     {
-      "src": "./android-chrome-192x192.png",
+      "src": "/android-chrome-192x192.png",
       "sizes": "192x192",
       "type": "image/png"
     },
     {
-      "src": "./android-chrome-512x512.png",
+      "src": "/android-chrome-512x512.png",
       "sizes": "512x512",
       "type": "image/png"
     }

packages/dnb-ui-lib/scripts/release/prepareForRelease.js

@@ -23,7 +23,18 @@ export default async function prepareForRelease() {
     filepath
   })
   await fs.writeFile(dest, formattedPackageJson)
-  await writeLibVersion()
+
+  /**
+   * TODO:
+   *
+   * 1. Because "prepareForRelease" runs before the version is set,
+   * We could have to run a API provided by semantic-release,
+   * That can give us the next calculated version, so we can write it, before release.
+   *
+   * 2. We also would have to find a different method to make that available.
+   * Because in production, it looks like the "window.Eufemia" is not accessible.
+   */
+  // await writeLibVersion({ version: ...})
 }
 
 // export for testing

packages/dnb-ui-lib/src/components/accordion/Accordion.js

@@ -234,8 +234,8 @@ export default class Accordion extends React.PureComponent {
       !isTrue(this.context.flush_remembered_state)
     ) {
       const expanded = this.store.getState()
-      if (typeof expanded === 'boolean') {
-        this.setExpandedState(expanded)
+      if (expanded) {
+        this.setExpandedState(true)
       }
     }
   }
@@ -271,20 +271,10 @@ export default class Accordion extends React.PureComponent {
   }
 
   setExpandedState(expanded) {
-    if (expanded !== null) {
-      this.setState({
-        expanded,
-        no_animation: true,
-        _listenForPropChanges: false
-      })
-      const no_animation = this.state.no_animation
-      this._animationState = setTimeout(() => {
-        this.setState({
-          no_animation,
-          _listenForPropChanges: false
-        })
-      }, 600)
-    }
+    this.setState({
+      expanded,
+      _listenForPropChanges: false
+    })
   }
 
   close() {

packages/dnb-ui-lib/src/components/accordion/AccordionContent.js

@@ -266,28 +266,35 @@ class HeightAnim {
       window.removeEventListener('resize', this.onResize)
     }
   }
-  getOpenHeight() {
-    const position = window.getComputedStyle(this.elem.parentElement)
+  getCloseHeight() {
+    return parseFloat(this.elem.clientHeight)
+  }
+  getOpenHeight(state) {
+    const currentHeight = window.getComputedStyle(this.elem).height
+    const currentPosition = window.getComputedStyle(this.elem).position
+    const parentPosition = window.getComputedStyle(this.elem.parentElement)
       .position
 
     this.elem.parentElement.style.position = 'relative'
     this.elem.style.position = 'absolute'
     this.elem.style.visibility = 'hidden'
     this.elem.style.height = 'auto'
 
-    const openHeight = parseFloat(this.elem.clientHeight)
+    const height = parseFloat(this.elem.clientHeight)
 
     this.elem.parentElement.style.position =
-      position !== 'static' ? position : ''
-    this.elem.style.position = ''
-    this.elem.style.height = '0'
-    this.elem.style.opacity = '0'
+      parentPosition !== 'static' ? parentPosition : ''
+    this.elem.style.position = currentPosition
     this.elem.style.visibility = 'visible'
 
-    return openHeight
-  }
-  getCloseHeight() {
-    return parseFloat(this.elem.clientHeight)
+    switch (state) {
+      case 'open':
+        this.elem.style.height =
+          this.state === 'init' ? '0' : currentHeight
+        break
+    }
+
+    return height
   }
   onStart(fn) {
     this.onStartStack.push(fn)
@@ -298,26 +305,22 @@ class HeightAnim {
   callOnEnd() {
     this.isAnimating = false
     this.removeEndEvents()
-
-    if (this.transitionDuration) {
-      this.elem.style.transitionDuration = this.transitionDuration
-      this.transitionDuration = null
-    }
+    this.resetSuppressAnimation()
 
     this.onEndStack.forEach((fn) => {
       if (typeof fn === 'function') {
         fn(this.state)
       }
     })
   }
-  start(height = 0, before = '0px', { animate = true } = {}) {
+  start(newHeight = 0, oldHeight = 0, { animate }) {
     if (typeof window !== 'undefined' && window.requestAnimationFrame) {
       this.stop()
 
       this.isAnimating = true
 
       if (animate === false) {
-        this.oppressAnimation()
+        this.suppressAnimation()
       }
 
       // call the callbacks here, because then we do not call this during startup. This way we get an instant startup
@@ -329,18 +332,15 @@ class HeightAnim {
 
       // make the animation
       this.reqId1 = window.requestAnimationFrame(() => {
-        if (before) {
-          this.elem.style.height = `${before}px`
-          this.elem.style.opacity = String(before > 0 ? 1 : 0)
+        this.elem.style.height = `${oldHeight}px`
 
-          if (this.container) {
-            this.container.style.minHeight = `${before}px`
-          }
+        if (this.container) {
+          this.container.style.minHeight = `${oldHeight}px`
         }
+
         this.reqId2 = window.requestAnimationFrame(() => {
-          this.elem.style.height = `${height}px`
+          this.elem.style.height = `${newHeight}px`
           this.setContainerHeight()
-          this.elem.style.opacity = String(height > 0 ? 1 : 0)
         })
       })
     }
@@ -362,17 +362,25 @@ class HeightAnim {
       window.cancelAnimationFrame(this.reqId2)
     }
   }
-  oppressAnimation() {
+  suppressAnimation() {
     this.transitionDuration = window.getComputedStyle(
       this.elem
     ).transitionDuration
     this.elem.style.transitionDuration = '1ms'
   }
-  open(animate = true) {
+  resetSuppressAnimation() {
+    if (this.transitionDuration) {
+      this.elem.style.transitionDuration = this.transitionDuration
+      this.transitionDuration = null
+    }
+  }
+  open({ animate = true } = {}) {
     if (this.state === 'opened' || this.state === 'opening') {
       return
     }
 
+    const height = this.getOpenHeight('open')
+
     this.state = 'opening'
     this.removeEndEvents() // also, remove events on every open (but not on close!)
 
@@ -391,10 +399,9 @@ class HeightAnim {
       )
     }
 
-    const height = this.getOpenHeight()
     this.start(height, 0, { animate })
   }
-  close(animate = true) {
+  close({ animate = true } = {}) {
     if (this.state === 'closed' || this.state === 'closing') {
       return
     }

packages/dnb-ui-lib/src/components/accordion/AccordionProvider.js

@@ -77,7 +77,6 @@ export default class AccordionGroup extends React.PureComponent {
   }
 
   onChangeHandler = (event) => {
-    // console.log('this.context', this.context)
     dispatchCustomElementEvent(this, 'on_change', {
       id: event.id,
       expanded: event.expanded,