Skip to content

Commit

Permalink
Merge pull request #402 from dnbexperience/rc/v6
Browse files Browse the repository at this point in the history
release of v6.0.0-beta.17
  • Loading branch information
tujoworker authored Jan 20, 2020
2 parents d09eacf + 2d5e5e2 commit 13974d5
Show file tree
Hide file tree
Showing 70 changed files with 2,772 additions and 1,867 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -138,4 +138,4 @@ To upgrade to v6 with NPM, use:
$ npm i dnb-ui-lib@6
```

_December, 4. 2019_
_January, 20. 2019_
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,15 @@ class Example extends PureComponent {
label="Checkbox"
checked
status="Error message"
/>
`}
</ComponentBox>
<ComponentBox caption="Checkbox with suffix" scope={{ onChange }}>
{/* @jsx */ `
<Checkbox
label="Checkbox"
checked
suffix={<Modal title="Modal Title">Modal content</Modal>}
/>
`}
</ComponentBox>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,15 @@
draft: true
---

| Properties | Description |
| ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
| `checked` | _(optional)_ determine whether the checkbox is checked or not. Default will be `false`. |
| `default_state` | _(optional)_ boolean value. The state of the checkbox. Defaults to `false`. Set to `true` if otherwise. |
| `title` | _(optional)_ the `title` of the input - describing it a bit further for accessibility reasons. |
| `label` | _(optional)_ use either the `label` property or provide custom one. |
| `label_position` | _(optional)_ defines the position of the `label`. Use either `left` or `right`. Defaults to `right`. |
| `status` | _(optional)_ text with a status message. The style defaults to an error message. |
| `status_state` | _(optional)_ defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`. |
| `global_status_id` | _(optional)_ the `status_id` used for the target [GlobalStatus](/uilib/components/global-status). |
| [Space](/uilib/components/space#tab-properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. |
| Properties | Description |
| ----------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `checked` | _(optional)_ determine whether the checkbox is checked or not. Default will be `false`. |
| `default_state` | _(optional)_ boolean value. The state of the checkbox. Defaults to `false`. Set to `true` if otherwise. |
| `title` | _(optional)_ the `title` of the input - describing it a bit further for accessibility reasons. |
| `label` | _(optional)_ use either the `label` property or provide custom one. |
| `label_position` | _(optional)_ defines the position of the `label`. Use either `left` or `right`. Defaults to `right`. |
| `status` | _(optional)_ text with a status message. The style defaults to an error message. |
| `status_state` | _(optional)_ defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`. |
| `global_status_id` | _(optional)_ the `status_id` used for the target [GlobalStatus](/uilib/components/global-status). |
| `suffix` | _(optional)_ text describing the content of the Checkbox more than the label. You can also send in a React component, so it gets wrapped inside the Checkbox component. |
| [Space](/uilib/components/space#tab-properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. |
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,16 @@ class Example extends PureComponent {
/>
`}
</ComponentBox>
<ComponentBox>
{/* @jsx */ `
<DatePicker
label="With suffix:"
date={new Date()}
show_input
suffix={<Modal title="Modal Title">Modal content</Modal>}
/>
`}
</ComponentBox>

<ScreenshotTests />
</Fragment>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ draft: true
| `hide_last_week` | _(optional)_ use `true` to only show the last week in the current month, if it needs to be shows. The result is that there will mainly be shows five (5) weeks (rows) instead of six (6). Defaults to `false`. |
| `label` | _(optional)_ a prepending label in sync with the date input field. |
| `label_direction` | _(optional)_ use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal`. |
| `suffix` | _(optional)_ text describing the content of the DatePicker more than the label. You can also send in a React component, so it gets wrapped inside the DatePicker component. |
| `label_sr_only` | _(optional)_ use `true` to make the label only readable by screen readers. |
| `shortcuts` | _(optional)_ gives you the possibility to set predefined dates and date ranges so the user can select these by one click. Define either a JSON or an object with the defiend shortcuts. More info below. |
| `addon_element` | _(optional)_ gives you the possibility to inject a React element showing up over the footer. Use it to customize `shortcuts`. |
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -167,6 +167,15 @@ render(
<Dropdown disabled data={['Disabled Dropdown']} label="Label:" />
`}
</ComponentBox>
<ComponentBox caption="Dropdown with suffix" scope={{ data }}>
{/* @jsx */ `
<Dropdown
data={['Dropdown with suffix']}
label="Label:"
suffix={<Modal title="Modal Title">Modal content</Modal>}
/>
`}
</ComponentBox>
<ComponentBox
caption="Dropdown with status and vertical label layout"
data-dnb-test="dropdown-status-error"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import { Data } from 'Pages/uilib/components/dropdown/Examples'
| `global_status_id` | _(optional)_ the `status_id` used for the target [GlobalStatus](/uilib/components/global-status). |
| `label` | _(optional)_ prepends the Form Label component. If no ID is provided, a random ID is created. |
| `label_direction` | _(optional)_ use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal` |
| `suffix` | _(optional)_ text describing the content of the Dropdown more than the label. You can also send in a React component, so it gets wrapped inside the Dropdown component. |
| `label_sr_only` | _(optional)_ use `true` to make the label only readable by screen readers. |
| [Space](/uilib/components/space#tab-properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. |

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,28 @@ class Example extends PureComponent {
value="third"
checked
/>
</Radio.Group>
`}
</ComponentBox>
<ComponentBox caption="Radio Buttons with suffix">
{/* @jsx */ `
<Radio.Group
label="With suffixes:"
label_position="left"
>
<Radio label="First" value="first" />
<Radio
label="Second"
value="second"
suffix={<Modal title="Modal Title">Modal content</Modal>}
/>
<Radio
label="Third"
value="third"
status="Error message"
suffix={<Modal title="Modal Title">Modal content</Modal>}
checked
/>
</Radio.Group>
`}
</ComponentBox>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,17 @@ const VerticalWrapper = styled.div\`
render(<Component />)
`}
</ComponentBox>
<ComponentBox caption="Slider with suffix">
{/* @jsx */ `
<Slider
min={0}
max={100}
value={70}
label="Slider with suffix:"
suffix={<Modal title="Modal Title">Modal content</Modal>}
/>
`}
</ComponentBox>
<ComponentBox caption="Native Range Slider. In order to get the styles, import also: `dnb-ui-lib/components/slider/style/dnb-range.min.css`">
{/* @jsx */ `
<FormRow>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,23 +4,24 @@ draft: true

## Properties

| Properties | Description |
| ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
| `value` | _(mandatory)_ the `vlaue` of the slider. Also the event callback result. |
| `min` | _(optional)_ the minimum value. Defaults to `0`. |
| `max` | _(optional)_ the maxium value. Defaults to `100` |
| `step` | _(optional)_ the steps the slider takes on changing the value. Defaults to `null` |
| `vertical` | _(optional)_ show the slider vertically. Defaults to `false`. |
| `reverse` | _(optional)_ show the slider reversed. Defaults to `false`. |
| `hide_buttons` | _(optional)_ removes the helper buttons. Defaults to `false`. |
| `use_scrollwheel` | _(optional)_ enable mouse scroll-wheel support. Defaults to `false`. |
| `thump_title` | _(optional)_ give the slider thump button a title for accessibility reason. Defaults to `null`. |
| `subtract_title` | _(optional)_ give the subtract button a title for accessibility reason. Defaults to ``. |
| `add_title` | _(optional)_ give the add button a title for accessibility reason. Defaults to `+`. |
| `label` | _(optional)_ prepends the Form Label component. If no ID is provided, a random ID is created. |
| `label_direction` | _(optional)_ use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal`. |
| `label_sr_only` | _(optional)_ use `true` to make the label only readable by screen readers. |
| `status` | _(optional)_ text with a status message. The style defaults to an error message. |
| `status_state` | _(optional)_ defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`. |
| `global_status_id` | _(optional)_ the `status_id` used for the target [GlobalStatus](/uilib/components/global-status). |
| [Space](/uilib/components/space#tab-properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. |
| Properties | Description |
| ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `value` | _(mandatory)_ the `vlaue` of the slider. Also the event callback result. |
| `min` | _(optional)_ the minimum value. Defaults to `0`. |
| `max` | _(optional)_ the maxium value. Defaults to `100` |
| `step` | _(optional)_ the steps the slider takes on changing the value. Defaults to `null` |
| `vertical` | _(optional)_ show the slider vertically. Defaults to `false`. |
| `reverse` | _(optional)_ show the slider reversed. Defaults to `false`. |
| `hide_buttons` | _(optional)_ removes the helper buttons. Defaults to `false`. |
| `use_scrollwheel` | _(optional)_ enable mouse scroll-wheel support. Defaults to `false`. |
| `thump_title` | _(optional)_ give the slider thump button a title for accessibility reason. Defaults to `null`. |
| `subtract_title` | _(optional)_ give the subtract button a title for accessibility reason. Defaults to ``. |
| `add_title` | _(optional)_ give the add button a title for accessibility reason. Defaults to `+`. |
| `label` | _(optional)_ prepends the Form Label component. If no ID is provided, a random ID is created. |
| `label_direction` | _(optional)_ use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal`. |
| `label_sr_only` | _(optional)_ use `true` to make the label only readable by screen readers. |
| `status` | _(optional)_ text with a status message. The style defaults to an error message. |
| `status_state` | _(optional)_ defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`. |
| `global_status_id` | _(optional)_ the `status_id` used for the target [GlobalStatus](/uilib/components/global-status). |
| `suffix` | _(optional)_ text describing the content of the Slider more than the label. You can also send in a React component, so it gets wrapped inside the Slider component. |
| [Space](/uilib/components/space#tab-properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. |
Loading

0 comments on commit 13974d5

Please sign in to comment.