Merge pull request #403 from dnbexperience/rc/v6

release of v6.0.0-beta.18
dnbexperience · Jan 21, 2020 · ff4a2a3 · ff4a2a3
2 parents 13974d5 + 2cfb274
commit ff4a2a3
Show file tree

Hide file tree

Showing 37 changed files with 356 additions and 240 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,4 +1,4 @@
-## January, 20. 2020
+## January, 22. 2020
 
 ### New DNB font
 

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/v6-info.md b/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/v6-info.md
@@ -123,6 +123,8 @@ With v6 the `dnb-ui-lib` has it's own localization to be used both for component
 - [Blockquote](/uilib/elements/blockquote) is now up to date `dnb-blockquote--no-background` to display a quote without the contrast background, but rather a transparent.
 - New helper class: `dnb-responsive-component` Makes some component form components, like [Input](/uilib/components/input) react to mobile sized screens. But as this can have some negative effects to have this enabled by default, you can enable this optionally by using this helper class.
 - New [Table](/uilib/elements/tables#working-demo) style / icons on sorting buttons. Icon change: from `chevron` to `arrow`.
+- All form components now have a `suffix` property e.g. [Slider](/uilib/components/slider).
+- [GlobalStatus](/uilib/components/global-status) now supports visual type of info: `state="info"`.
 
 ## Resources package
 
@@ -138,4 +140,4 @@ To upgrade to v6 with NPM, use:
 $ npm i dnb-ui-lib@6
 ```
 
-_January, 20. 2019_
+_January, 22. 2019_
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/number/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/number/Examples.js
@@ -22,41 +22,51 @@ class Example extends PureComponent {
           data-dnb-test="number-default"
         >
           {/* @jsx */ `
-<Number value="12345" />
-<Number>-12345678.9</Number>
+<P>
+  <Number value="12345" />
+  <Number>-12345678.9</Number>
+</P>
           `}
         </ComponentBox>
         <ComponentBox caption="Currency" data-dnb-test="number-currency">
           {/* @jsx */ `
-<Number currency>12345</Number>
-<Number currency value={-12345678.9} />
-<Number currency value={-12345678.9} currency_display="code" />
+<P>
+  <Number currency>12345</Number>
+  <Number currency value={-12345678.9} />
+  <Number currency value={-12345678.9} currency_display="code" />
+</P>
           `}
         </ComponentBox>
         <ComponentBox caption="Phone number" data-dnb-test="number-phone">
           {/* @jsx */ `
-<Number value="99999999" phone />
-<Number value="4799999999" phone />
-<Number value="++4799999999" phone />
-<Number value="+4780022222" phone link="sms" />
-<Number value="+47116000" phone />
-<Number value="+4702000" phone />
+<P>
+  <Number value="99999999" phone />
+  <Number value="4799999999" phone />
+  <Number value="++4799999999" phone />
+  <Number value="+4780022222" phone link="sms" />
+  <Number value="+47116000" phone />
+  <Number value="+4702000" phone />
+</P>
           `}
         </ComponentBox>
         <ComponentBox
           caption="Bank Account number (Kontonummer)"
           data-dnb-test="number-ban"
         >
           {/* @jsx */ `
-<Number value="20001234567" ban />
+<P>
+  <Number value="20001234567" ban />
+</P>
           `}
         </ComponentBox>
         <ComponentBox
           caption="National Identification number (Fødselsnummer)"
           data-dnb-test="number-nin"
         >
           {/* @jsx */ `
-<Number value="18089212345" nin />
+<P>
+  <Number value="18089212345" nin />
+</P>
           `}
         </ComponentBox>
         <ComponentBox
@@ -65,18 +75,22 @@ class Example extends PureComponent {
         >
           {/* @jsx */ `
 <H3>Numbers</H3>
-<Number locale="nb-NO" value="-12345678.9" />
-<Number locale="en-US" value="-12345678.9" />
-<Number locale="de-DE" value="-12345678.9" />
-<Number locale="de-CH" value="-12345678.9" />
-<Number locale="fr-CH" value="-12345678.9" />
+<P>
+  <Number locale="nb-NO" value="-12345678.9" />
+  <Number locale="en-US" value="-12345678.9" />
+  <Number locale="de-DE" value="-12345678.9" />
+  <Number locale="de-CH" value="-12345678.9" />
+  <Number locale="fr-CH" value="-12345678.9" />
+</P>
 
 <H3>Currencies</H3>
-<Number locale="nb-NO" value="-12345.6" currency />
-<Number locale="en-US" value="-12345.6" currency />
-<Number locale="de-DE" value="-12345.6" currency />
-<Number locale="de-CH" value="-12345.6" currency />
-<Number locale="fr-CH" value="-12345.6" currency />
+<P>
+  <Number locale="nb-NO" value="-12345.6" currency />
+  <Number locale="en-US" value="-12345.6" currency />
+  <Number locale="de-DE" value="-12345.6" currency />
+  <Number locale="de-CH" value="-12345.6" currency />
+  <Number locale="fr-CH" value="-12345.6" currency />
+</P>
 
 <br/>
           `}

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/step-indicator/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/step-indicator/Examples.js
@@ -78,7 +78,7 @@ class Example extends PureComponent {
         >
           {`
 <StepIndicator
-  active_item="1"
+  active_item="0"
   active_url={active_url}
   data={[
     {
@@ -105,7 +105,6 @@ class Example extends PureComponent {
         >
           {/* @jsx */ `
 <StepIndicator
-  active_item="2"
   data={[
     {
       title: 'Om din nye bolig'
@@ -114,9 +113,22 @@ class Example extends PureComponent {
       title: 'Ditt lån og egenkapital'
     },
     {
-      title: 'Oppsummering'
+      title: 'Oppsummering',
+      is_current: true
     }
   ]}
+/>
+            `}
+        </ComponentBox>
+        <ComponentBox caption="Default StepIndicator with strings only">
+          {/* @jsx */ `
+<StepIndicator
+  active_item="1"
+  data={[
+    'Om din nye bolig',
+    'Ditt lån og egenkapital',
+    'Oppsummering'
+  ]}
 />
             `}
         </ComponentBox>

diff --git a/...em-portal/src/docs/uilib/components/step-indicator/step-indicator-properties.md b/...em-portal/src/docs/uilib/components/step-indicator/step-indicator-properties.md
@@ -17,13 +17,15 @@ draft: true
 
 ## Item Parameters
 
-| Parameters   | Description                                                                                                        |
-| ------------ | ------------------------------------------------------------------------------------------------------------------ |
-| `title`      | _(mandatory)_ the title showing on every step.                                                                     |
-| `url`        | _(optional)_ sets the url, showing on every step, if not `url_future` is set.                                      |
-| `url_future` | _(optional)_ sets the url, showing only on the future steps. Can be used to _reset_ the future steps individually. |
-| `url_passed` | _(optional)_ sets the url, showing only on the passed steps. Can be used to _reset_ the passed steps individually. |
-| `on_render`  | _(optional)_ callback function to manipulate or wrap a certain item. Has to return a React Node.                   |
+| Parameters   | Description                                                                                                                                                           |
+| ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title`      | _(mandatory)_ the title showing on every step.                                                                                                                        |
+| `url`        | _(optional)_ sets the url, showing on every step, if not `url_future` is set.                                                                                         |
+| `is_current` | _(optional)_ if set to `is_current="true"`, the current items will be selected as the current selected.                                                               |
+| `is_active`  | _(optional)_ if set to `is_active="true"`, the current items will be selected as the current active. This can be used instead of using `active_item` or `active_url`. |
+| `url_future` | _(optional)_ sets the url, showing only on the future steps. Can be used to _reset_ the future steps individually.                                                    |
+| `url_passed` | _(optional)_ sets the url, showing only on the passed steps. Can be used to _reset_ the passed steps individually.                                                    |
+| `on_render`  | _(optional)_ callback function to manipulate or wrap a certain item. Has to return a React Node.                                                                      |
 
 ## Item data structure
 

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/usage/accessibility/checklist.md b/packages/dnb-design-system-portal/src/docs/uilib/usage/accessibility/checklist.md
@@ -43,7 +43,7 @@ Example usage of HTML5 `landmarks` (e.g. `<nav>` or `<section>` etc.):
 
   <main>
 
-    <section>
+    <section aria-label="I'm now a region">
       <h1 class="dnb-h2">h1 styled as h2</h1>
       <p class="dnb-o">text</p>
     </section>
@@ -56,8 +56,10 @@ Example usage of HTML5 `landmarks` (e.g. `<nav>` or `<section>` etc.):
     </article>
 
     <article>
+      <header>I'm not a landmark anymore, because I'm inside article</header>
       <h2 class="dnb-h2">Another article h2</h2>
       ...
+      <footer>I'm not a landmark anymore, because I'm inside article</footer>
     </article>
 
   </main>
@@ -67,3 +69,11 @@ Example usage of HTML5 `landmarks` (e.g. `<nav>` or `<section>` etc.):
   <footer>Footer</footer>
 </body>
 ```
+
+Read more about [HTML landmarks and sectioning elements](https://www.w3.org/TR/wai-aria-practices/examples/landmarks/HTML5.html).
+
+## Practical Support of ARIA labels
+
+ARIA labels like `aria-label`, `aria-labelledby` and `aria-describedby` will mostly work on interactive HTML elements, and not on elements such as `div`, `span`, `p` or `ul`.
+
+Read more [about label-support in the w3 docs](https://www.w3.org/TR/using-aria/#label-support).
diff --git a/packages/dnb-design-system-portal/src/shared/menu/Card.js b/packages/dnb-design-system-portal/src/shared/menu/Card.js
@@ -221,7 +221,7 @@ export default class Card extends PureComponent {
               aria-current={this.isSelected()}
               onClick={closeMenu}
             >
-              <LinkInner {...textRole}>
+              <LinkInner>
                 <Box>
                   <Svg {...svgParams} />
                   <Header className="dnb-lead">{title}</Header>
@@ -247,5 +247,3 @@ export default class Card extends PureComponent {
 
 const random = (min, max) =>
   Math.floor(Math.random() * (max - min + 1) + min)
-
-const textRole = { role: 'text' }
diff --git a/packages/dnb-ui-lib/src/components/form-row/FormRow.js b/packages/dnb-ui-lib/src/components/form-row/FormRow.js
@@ -218,8 +218,9 @@ export default class FormRow extends PureComponent {
     validateDOMAttributes(this.props, params)
 
     // check if context has changed, if yes, then update the cache
-    if (hashSum(this._cachedContext) !== hashSum(this.context)) {
-      this._cachedContext = this.context
+    const cacheSum = { ...this.context, ...this.props }
+    if (hashSum(this._cachedContext) !== hashSum(cacheSum)) {
+      this._cachedContext = cacheSum
 
       const formRow = {
         useId: () => {

diff --git a/packages/dnb-ui-lib/src/components/form-row/__tests__/FormRow.test.js b/packages/dnb-ui-lib/src/components/form-row/__tests__/FormRow.test.js
@@ -86,6 +86,16 @@ describe('FormRow component', () => {
     expect(Comp.find('legend').exists()).toBe(false)
   })
 
+  it('should react correct on two states in row', () => {
+    const Comp = mount(
+      <Component {...props} disabled={false}>
+        <Input />
+      </Component>
+    )
+    Comp.setProps({ disabled: true })
+    expect(Comp.find('input').is('[disabled]')).toBe(true)
+  })
+
   it('should validate with ARIA rules', async () => {
     expect(await axeComponent(Comp)).toHaveNoViolations()
   })