Merge pull request #238 from dnbexperience/develop

release div features

.drone.yml

@@ -168,9 +168,9 @@ steps:
       link_names: true
       template: >
         {{#success build.status}}
-          <@channel> *success* <{{build.link}}> ({{build.branch}} {{build.number}}{{build.tag}}) by <@{{build.author}}>.
+          <@tujoworker> success on *{{build.branch}}* <{{build.link}}> by {{build.author}}
         {{else}}
-          <@channel> *failure* <{{build.link}}> ({{build.branch}} {{build.number}}{{build.tag}}) by <@{{build.author}}>.
+          <@tujoworker> failure on *{{build.branch}}* <{{build.link}}> by {{build.author}}
         {{/success}}
       username: DroneCI
     when:

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

@@ -13,7 +13,7 @@ import AllComponents from 'dnb-ui-lib/src/components/form-row/AllComponents'
 // import AllComponents from './AllComponents'
 
 const TestStyles = styled.div`
-  /* // make sure our input gets an explicit width, because of mac/linux rendering differences */
+  /* make sure our input gets an explicit width, because of mac/linux rendering differences */
   :not(.dnb-input--stretch) .dnb-input__input {
     width: 12rem;
   }
@@ -33,7 +33,11 @@ class Example extends PureComponent {
         >
           {/* @jsx */ `
 <FormRow
-    label="Vertical legend label:"
+    label={
+      <Ingress top="0" bottom="small">
+        Custom legend:
+      </Ingress>
+    }
     label_direction="vertical"
 >
   <Input label="Label A:" value="Input A" right="small" />
@@ -68,7 +72,14 @@ class Example extends PureComponent {
           data-dnb-test="form-row-combined"
         >
           {/* @jsx */ `
-<FormRow label="Vertical legend:" vertical>
+<FormRow
+  label={
+    <H2 top={false} bottom="large">
+      Custom vertical legend:
+    </H2>
+  }
+  vertical
+>
   <Input label="Vertical input A" />
   <Input label="Vertical input B" top="medium" />
   <FormRow
@@ -126,6 +137,29 @@ render(
 </FormRow>
           `}
         </ComponentBox>
+        <ComponentBox
+          caption="Vertical label direction in combination with a button"
+          data-dnb-test="form-row-vertical-label-button"
+          useRender
+        >
+          {/* @jsx */ `
+const CustomRow = styled(FormRow)\`
+  .dnb-form-row__content .dnb-button {
+    align-self: flex-end;
+    transform: translateY(0.25rem); /* 4px down */
+  }
+\`
+render(
+<CustomRow
+  label={ <H2 top="0">Legend</H2> }
+  label_direction="vertical"
+>
+  <Input label="Vertical input label" value="Input" right="small" />
+  <Button text="Button" />
+</CustomRow>
+)
+          `}
+        </ComponentBox>
         <ComponentBox
           caption="Several components inside a horizontal `FormRow` - not wrapping"
           data-dnb-test="form-row-horizontal-no_wrap"

packages/dnb-design-system-portal/src/docs/uilib/components/form-row/form-row-info.md

@@ -39,6 +39,21 @@ To give a FormRow space, properties from [Space](/uilib/components/space#tab-pro
 </FormRow>
 ```
 
+### Provider
+
+If You are using React, You can make use of a `Provider` to support properties for all nested `FormRow`s, like:
+
+```jsx
+import Provider from `dnb-ui-lib/shared/Provider`
+
+render(
+  <Provider formRow={{ vertical: true }}>
+    <FormRow>I am vertical now</FormRow>
+    <FormRow>I am vertical now</FormRow>
+  </Provider>
+)
+```
+
 ## Demos
 
 <Examples />

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

@@ -14,4 +14,5 @@ draft: true
 | `section_style`                                 | _(optional)_ to enable the visual helper `.dnb-section` class. Use a supported modifier from the [Section component](/uilib/components/section#tab-properties). Defaults to null.                                                                                                                                                                                          |
 | `section_spacing`                               | _(optional)_ to modify the `spacing`. Use a supported modifier from the [Section component](/uilib/components/section#tab-properties). Defaults to null.                                                                                                                                                                                                                   |
 | `no_fieldset`                                   | _(optional)_ if set to `true`, then the internal `legend` element will be a `label` instead, and no `<fieldset>` is used. Keep in mind, that `<legend>` and `<fieldset>` **is only used if a `label` is provided**. Defaults to `false`.                                                                                                                                   |
+| `label_class`                                   | _(optional)_ if You need to style the "legend", then You can either send in a custom Component, like `label={ <H2> }`, or define Your styling class with the `label_class` property.                                                                                                                                                                                       |
 | [Space](/uilib/components/space#tab-properties) | _(optional)_ spacing properties like `top` or `bottom` are supported.                                                                                                                                                                                                                                                                                                      |

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

@@ -49,16 +49,36 @@ class Example extends PureComponent {
           {/* @jsx */ `
 const CustomStatus = () => (
   <>
-    My info <Link href="/">with a link</Link> and more text
+    My info
+    <Link href="/">with a link</Link>
+    and more text
   </>
 )
 render(
   <Input
-    label="Input with custom content:"
+    label="Input with custom status:"
     status={ <CustomStatus /> }
     status_state="info"
     value="Input value"
   />
+)
+          `}
+        </ComponentBox>
+        <ComponentBox
+          caption="A form status with plain text/HTML"
+          useRender
+        >
+          {/* @jsx */ `
+const myHTML = \`
+  My HTML
+  <a class="dnb-anchor" href="/" target="_blank">with a link</a>
+  and more text
+\`
+const CustomStatus = () => <span dangerouslySetInnerHTML={{ __html: myHTML }} />
+render(
+  <FormStatus status="info">
+    <CustomStatus />
+  </FormStatus>
 )
           `}
         </ComponentBox>

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

@@ -10,11 +10,10 @@ import ComponentBox from '../../../../shared/tags/ComponentBox'
 import styled from '@emotion/styled'
 import { Space } from 'dnb-ui-lib/src/components'
 
-const IS_TEST = typeof window !== 'undefined' && window.IS_TEST
 const TestStyles = styled.div`
-  /* // make sure our input gets an explicit width, because of mac/linux rendering differences */
+  /* make sure our input gets an explicit width, because of mac/linux rendering differences */
   .dnb-input {
-    &__inner {
+    &__input {
       width: 8rem;
     }
   }
@@ -25,11 +24,12 @@ const TestStyles = styled.div`
 
 class Example extends PureComponent {
   render() {
+    const IS_TEST = typeof window !== 'undefined' && window.IS_TEST
     return (
       <TestStyles>
         <ComponentBox
           caption="Spacing method #1 - `Space` component"
-          data-dnb-test="spacing-method-1"
+          data-dnb-test="spacing-method-space"
           scope={{ VisualSpace, RedBox }}
         >
           {/* @jsx */ `
@@ -41,24 +41,9 @@ class Example extends PureComponent {
 </RedBox>
           `}
         </ComponentBox>
-        <ComponentBox
-          caption="All four values will result in a equivalent margin"
-          data-dnb-test="spacing-margins"
-        >
-          {/* @jsx */ `
-<Space top="large x-small" right="2.5" bottom="2.5rem" left="40px" >
-  <details>
-    <summary>
-      I have four <code className="dnb-code">2.5rem</code> margins!
-    </summary>
-    And this are my CSS classes: <code className="dnb-code">dnb-space dnb-space__top--large dnb-space__top--x-small dnb-space__right--large dnb-space__right--x-small dnb-space__bottom--large dnb-space__bottom--x-small dnb-space__left--large dnb-space__left--x-small</code>
-  </details>
-</Space>
-          `}
-        </ComponentBox>
         <ComponentBox
           caption="Spacing method #2 - `FormRow` component"
-          data-dnb-test="spacing-method-1"
+          data-dnb-test="spacing-method-form-row"
         >
           {/* @jsx */ `
 <FormRow>
@@ -71,7 +56,7 @@ class Example extends PureComponent {
         </ComponentBox>
         <ComponentBox
           caption="Spacing method #3 - Define the space directly"
-          data-dnb-test="spacing-method-1"
+          data-dnb-test="spacing-method-component"
         >
           {/* @jsx */ `
 <FormRow>
@@ -80,6 +65,35 @@ class Example extends PureComponent {
 </FormRow>
           `}
         </ComponentBox>
+        <ComponentBox
+          caption="Spacing with `collapse` set to false"
+          hideCode
+        >
+          {/* @jsx */ `
+<Space bottom="small" collapse={false}>
+  <div>I have <code className="dnb-code">bottom="small"</code></div>
+</Space>
+<Space top="large">
+  <div>I have <code className="dnb-code">top="large"</code></div>
+</Space>
+          `}
+        </ComponentBox>
+        <ComponentBox
+          caption="All four values will result in a equivalent margin"
+          data-dnb-test="spacing-margins"
+          hideCode
+        >
+          {/* @jsx */ `
+<Space top="large x-small" right="2.5" bottom="2.5rem" left="40px" >
+  <details>
+    <summary>
+      I have four <code className="dnb-code">2.5rem</code> margins!
+    </summary>
+    And this are my CSS classes: <code className="dnb-code">dnb-space dnb-space__top--large dnb-space__top--x-small dnb-space__right--large dnb-space__right--x-small dnb-space__bottom--large dnb-space__bottom--x-small dnb-space__left--large dnb-space__left--x-small</code>
+  </details>
+</Space>
+          `}
+        </ComponentBox>
         {false && IS_TEST && (
           <ComponentBox
             caption="All spacing patterns listed (screenshot tests)"
@@ -261,7 +275,11 @@ const MagicBox = ({ label, ...rest }) => {
   )
 }
 MagicBox.propTypes = {
-  label: PropTypes.string
+  label: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.func,
+    PropTypes.node
+  ])
 }
 MagicBox.defaultProps = {
   label: null
@@ -298,7 +316,11 @@ const VisualSpace = ({ label, children, ...rest }) => {
   )
 }
 VisualSpace.propTypes = {
-  label: PropTypes.string,
+  label: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.func,
+    PropTypes.node
+  ]),
   children: PropTypes.node
 }
 VisualSpace.defaultProps = {

packages/dnb-design-system-portal/src/docs/uilib/components/space/space-info.md

@@ -10,7 +10,7 @@ import SpacingTable from 'Pages/uilib/usage/layout/spacing-table.md'
 The `Space` component provides `margins` within the [provided spacing patterns](/uilib/usage/layout/spacing#spacing-helpers).
 
 The reason why this exists is to make Your Syntax as clean as possible.
-This way You see directly in words what the spacing is for every effected component.
+This way You see directly in words what the spacing is for every effected component
 
 ### Spacing Table
 
@@ -40,6 +40,16 @@ Every component supports the spacing patterns, so it's possible to send in the `
 <Button top="large x-small medium" />
 ```
 
+### Does it not work as expected?
+
+Is `margin` not giving the expected spacing? That may be the reason due to **Margin Collapsing**. Margins collapse in the following situations:
+
+- Adjacent siblings
+- Completely empty boxes
+- Parent and first or last child element
+
+The best solution is to only use once direction of margins e.g. `bottom`. Or You can set the [collapse property](/uilib/components/space#tab-properties) to `false`.
+
 ## Demos
 
 <Examples />

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

@@ -2,11 +2,31 @@
 draft: true
 ---
 
-| Properties | Description                                                                                                                                |
-| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
-| `top`      | _(optional)_ will use `margin-top`                                                                                                         |
-| `left`     | _(optional)_ will use `margin-left`                                                                                                        |
-| `bottom`   | _(optional)_ will use `margin-bottom`                                                                                                      |
-| `right`    | _(optional)_ will use `margin-right`                                                                                                       |
-| `element`  | _(optional)_ defines the HTML element used. Defaults to `div`.                                                                             |
-| `inline`   | _(optional)_ if set to `true`, then `display: inline-block;` is used, so the HTML elements gets aligned horizontally. Defaults to `false`. |
+| Properties | Description                                                                                                                                                                                            |
+| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `top`      | _(optional)_ will use `margin-top`                                                                                                                                                                     |
+| `left`     | _(optional)_ will use `margin-left`                                                                                                                                                                    |
+| `bottom`   | _(optional)_ will use `margin-bottom`                                                                                                                                                                  |
+| `right`    | _(optional)_ will use `margin-right`                                                                                                                                                                   |
+| `element`  | _(optional)_ defines the HTML element used. Defaults to `div`.                                                                                                                                         |
+| `inline`   | _(optional)_ if set to `true`, then `display: inline-block;` is used, so the HTML elements gets aligned horizontally. Defaults to `false`.                                                             |
+| `collapse` | _(optional)_ if set to `false`, then a wrapper with `display: flow-root;` is used. This way You avoid **Margin Collapsing**. Defaults to `true`. _Note:_ You can't use `inline="true"` in combination. |
+
+## Zero
+
+Use either `0` or `false` (as a number/boolean os string) to set a `margin` of 0.
+
+## Provider
+
+Also, Provider is supporting the `collapse` property.
+
+```jsx
+import Provider from `dnb-ui-lib/shared/Provider`
+
+render(
+  <Provider space={{ collapse: false }}>
+    <Space>I do not collapse</Space>
+    <Space>I do not collapse</Space>
+  </Provider>
+)
+```

packages/dnb-design-system-portal/src/docs/uilib/intro/09-layout.md

@@ -4,6 +4,8 @@ draft: true
 order: 9
 ---
 
+import ComponentBox from 'Tags/ComponentBox'
+
 <Intro>
 
 # Layout
@@ -20,13 +22,18 @@ Remember, everything should be in the **8px grid** (0.5rem) spacing - even it th
 
 ![UX layout spacing](../usage/assets/ux-layout-spacing.png)
 
-You may have a [look at the layout docs](!/uilib/usage/layout) as well as [the spacing helpers](!/uilib/usage/layout/spacing).
+You may have a [look at the layout docs](!/uilib/usage/layout) as well as [the spacing helpers](!/uilib/usage/layout/spacing) and the [Space](/uilib/components/space) component.
+
+But there is also support for basic spacing in every component:
 
 ### Example
 
-```css
-margin-top: var(--spacing-large);
-```
+<ComponentBox>
+{`
+<Input label="My Input" value="Input" right="small" />
+<Button text="Button" />
+`}
+</ComponentBox>
 
 ---
 

packages/dnb-design-system-portal/src/shared/parts/PortalStyle.js

@@ -252,6 +252,10 @@ export default css`
     line-height: 2rem;
   }
 
+  .gatsby-resp-image-background-image {
+    padding-bottom: 0 !important;
+  }
+
   /* Do not delete, this is used for screenshot testing */
   ${testWrapperStyle};
 `

packages/dnb-ui-lib/src/components/checkbox/Checkbox.js

@@ -26,7 +26,11 @@ const renderProps = {
 }
 
 export const propTypes = {
-  label: PropTypes.string,
+  label: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.func,
+    PropTypes.node
+  ]),
   label_position: PropTypes.oneOf(['left', 'right']),
   title: PropTypes.string,
   default_state: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),