Skip to content

Commit

Permalink
Merge pull request #195 from dnbexperience/develop
Browse files Browse the repository at this point in the history 
portal refactoring and release of small fixes/features
  • Loading branch information
@tujoworker
tujoworker authored Jun 5, 2019
2 parents 46856cb + 701a82e commit 7cd869a
Show file tree
Hide file tree
Showing 102 changed files with 1,978 additions and 1,412 deletions.
2 changes: 1 addition & 1 deletion .drone.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ steps:
- name: setup
image: tujoworker/docker-node-puppeteer
commands:
- curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.13.0
- curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.16.0
- export PATH="$HOME/.yarn/bin:$PATH"

- name: dependencies audit
Expand Down
8 changes: 6 additions & 2 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
## May, 27. 2019
## June, 5. 2019

- New corner radius (border-radius) on `Dropdown` and `DatePicker`: 4px (0.25rem)

## June, 3. 2019

- New component in the `dnb-ui-lib`: [Textarea](/uilib/components/textarea). Got also a wider corner radius by `16px (1rem)`.

## May, 27. 2019

- New component in the `dnb-ui-lib`: [Checkbox](/uilib/components/checkbox) and [Radio](/uilib/components/radio) button
- New components in the `dnb-ui-lib`: [Checkbox](/uilib/components/checkbox) and [Radio](/uilib/components/radio) button

## May, 19. 2019

Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
"test-ci-screenshots": "yarn workspace dnb-ui-lib test-ci-screenshots"
},
"devDependencies": {
"husky": "^1.3.1"
"husky": "^2.3.0"
},
"release": {
"analyzeCommits": "simple-commit-message"
Expand Down
4 changes: 2 additions & 2 deletions packages/dnb-design-system-portal/gatsby-config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,8 +53,8 @@ module.exports = {
{
resolve: 'gatsby-remark-images',
options: {
maxWidth: 1024,
showCaptions: true
maxWidth: 1024
// showCaptions: true
// sizeByPixelDensity: true
// linkImagesToOriginal: true
// wrapperStyle: {}
Expand Down
2 changes: 1 addition & 1 deletion packages/dnb-design-system-portal/gatsby-node.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ exports.onCreateNode = ({ node, getNode, actions }) => {
createNodeField({
name: 'slug',
node,
value: `/${slug}`
value: slug
})

createNodeField({
Expand Down
16 changes: 8 additions & 8 deletions packages/dnb-design-system-portal/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,20 +65,20 @@
"ci-info": "^2.0.0",
"classnames": "^2.2.6",
"clean-html": "^1.5.0",
"color": "^3.1.1",
"color": "^3.1.2",
"cross-env": "^5.2.0",
"del": "^4.1.1",
"emotion": "^10.0.9",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.13.2",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
"enzyme-to-json": "^3.3.5",
"eslint": "^5.16.0",
"eslint-plugin-import": "^2.17.3",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.13.0",
"front-matter": "^3.0.2",
"fs-extra": "^8.0.1",
"gatsby": "^2.7.1",
"gatsby": "^2.8.2",
"gatsby-link": "^2.1.1",
"gatsby-mdx": "^0.6.3",
"gatsby-plugin-catch-links": "^2.0.15",
Expand All @@ -88,9 +88,9 @@
"gatsby-plugin-postcss": "^2.0.7",
"gatsby-plugin-react-helmet": "^3.0.12",
"gatsby-plugin-sass": "^2.0.11",
"gatsby-plugin-sharp": "^2.1.1",
"gatsby-remark-images": "^3.0.13",
"gatsby-source-filesystem": "^2.0.37",
"gatsby-plugin-sharp": "^2.1.3",
"gatsby-remark-images": "^3.0.14",
"gatsby-source-filesystem": "^2.0.38",
"gh-pages": "^2.0.1",
"github-slugger": "^1.2.1",
"jest": "^24.8.0",
Expand All @@ -114,7 +114,7 @@
"react-markdown": "^4.0.8",
"stylelint": "^10.0.1",
"stylelint-config-styled-components": "^0.1.1",
"stylelint-processor-styled-components": "^1.7.0"
"stylelint-processor-styled-components": "^1.8.0"
},
"buildVersion": "[LOCAL BUILD]"
}
20 changes: 11 additions & 9 deletions ...design-system-portal/src/pages/uilib/components/checkbox/checkbox-properties.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,14 @@
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. |
| `status` | _(optional)_ uses the `form-status` component to show failure messages. |
| `id` | _(optional)_ the `id` of the input. Default will be a random id. |
| `disabled` | _(optional)_ to disable/enable the checkbox. |
| 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`. |
| `id` | _(optional)_ the `id` of the input. Default will be a random id. |
| `disabled` | _(optional)_ to disable/enable the checkbox. |
| `status` | _(optional)_ text with a status message. The style defaults to an error message. |
| `status_state` | _(optional)_ defines the state of the status. Currently are two statuses `[error, info]`. Defaults to `error`. |
144 changes: 104 additions & 40 deletions packages/dnb-design-system-portal/src/pages/uilib/components/date-picker/Examples.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,16 @@

import React, { PureComponent, Fragment } from 'react'
import ComponentBox from '../../../../shared/tags/ComponentBox'
import DatePickerRange from 'dnb-ui-lib/src/components/date-picker/DatePickerRange'
import styled from '@emotion/styled'

class Example extends PureComponent {
render() {
const IS_TEST = typeof window !== 'undefined' && window.IS_TEST
if (IS_TEST) {
return <ScreenshotTests />
}
return (
<Fragment>
<ComponentBox data-dnb-test={IS_TEST && 'date-picker-input'}>
{/* @jsx */ `
<DatePicker
label="Range DatePicker:"
range={true}
show_input={true}
/>
`}
</ComponentBox>
<ComponentBox>
{/* @jsx */ `
<DatePicker
Expand All @@ -44,7 +38,7 @@ class Example extends PureComponent {
<ComponentBox>
{/* @jsx */ `
<DatePicker
label="Defualt DatePicker with Input:"
label="Default DatePicker with Input:"
date={new Date()}
show_input={true}
show_cancel_button={true}
Expand All @@ -59,21 +53,6 @@ class Example extends PureComponent {
</ComponentBox>
<ComponentBox>
{/* @jsx */ `
<DatePicker
label="Defualt DatePicker:"
date="2019-05-05"
return_format="DD-MM-YYYY"
on_change={({ date }) => {
console.log('on_change', date)
}}
on_show={({ date }) => {
console.log('on_show', date)
}}
/>
`}
</ComponentBox>
<ComponentBox>
{/* @jsx */ `
<DatePicker
label="Hidden Nav:"
date="2019/05/05"
Expand All @@ -98,24 +77,109 @@ class Example extends PureComponent {
/>
`}
</ComponentBox>
<ComponentBox>
{/* @jsx */ `
<DatePicker
label="DatePicker with error message:"
date={new Date()}
show_input={true}
show_submit_button={true}
status="Please select a valid date"
/>
`}
</ComponentBox>
<ComponentBox>
{/* @jsx */ `
<DatePicker
label="DatePicker with error status:"
date={new Date()}
hide_navigation={true}
status="error"
/>
`}
</ComponentBox>
<ComponentBox>
{/* @jsx */ `
<DatePicker
label="Disabled with info message:"
date={new Date()}
show_input={true}
status="Please select a valid date"
status_state="info"
disabled
/>
`}
</ComponentBox>

<div className="example-box">
<div data-dnb-test="date-picker-calendar">
<DatePickerRange
range={true}
startDate={new Date('2019-05-05')}
endDate={new Date('2019-06-05')}
firstDayOfWeek={'monday'}
/>
</div>
<p className="example-caption">
Example styling of range calendar (also used for screenshot
tests)
</p>
</div>
<ScreenshotTests />
</Fragment>
)
}
}

export default Example

const ScreenshotTests = () => {
return (
<Wrapper>
<ComponentBox data-dnb-test="date-picker-trigger-default">
{/* @jsx */ `
<DatePicker
label="Default DatePicker:"
date="2019-05-05"
return_format="DD-MM-YYYY"
on_change={({ date }) => {
console.log('on_change', date)
}}
on_show={({ date }) => {
console.log('on_show', date)
}}
/>
`}
</ComponentBox>
<ComponentBox data-dnb-test="date-picker-input">
{/* @jsx */ `
<DatePicker
label="Range DatePicker:"
range={true}
show_input={true}
/>
`}
</ComponentBox>
<ComponentBox data-dnb-test="date-picker-trigger-error">
{/* @jsx */ `
<DatePicker
label="DatePicker with error status:"
date={new Date()}
hide_navigation={true}
status="Please select a valid date"
/>
`}
</ComponentBox>
<ComponentBox
data-dnb-test="date-picker-calendar"
caption="Opened DatePicker (also used for screenshot tests)"
>
{/* @jsx */ `
<DatePicker
opened="true"
range="true"
start_date="2019-05-05"
end_date="2019-06-05"
/>
`}
</ComponentBox>
</Wrapper>
)
}

const Wrapper = styled.div`
[data-dnb-test='date-picker-calendar'] .dnb-date-picker__container {
display: block;
position: relative;
top: 0;
}
[data-dnb-test='date-picker-calendar'] .dnb-date-picker {
margin-left: 1rem;
}
`
4 changes: 3 additions & 1 deletion ...-system-portal/src/pages/uilib/components/date-picker/date-picker-properties.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ draft: true
| `end_month` | _(optional)_ to display what month should be shows in the second calendar by default. Defaults to the `date` respective `start_date`. |
| `min_date` | _(optional)_ to limit a date range to a minimum `start_date`. Defaults to null. `start_date`. |
| `max_date` | _(optional)_ to limit a date range to a maximum `end_date`. Defaults to null. `start_date`. |
| `return_format` | _(optional)_ Defines how the returned date, as a string, should be formatted as. Defualts to `YYYY-MM-DD`. |
| `return_format` | _(optional)_ Defines how the returned date, as a string, should be formatted as. Defaults to `YYYY-MM-DD`. |
| `range` | _(optional)_ if the date picker should support a range of two dates (starting and ending date). Defaults to `false`. |
| `show_input` | _(optional)_ if the input fields with the mask should be visible. Defaults to `false`. |
| `mask_order` | _(optional)_ to define the order of the masked placeholder input fields. Defaults to `dd/mm/yyyy` |
Expand All @@ -29,3 +29,5 @@ draft: true
| `first_day` | _(optional)_ to define the first day of the week. Defaults to `monday`. |
| `locale` | _(optional)_ to define the locale used in the calendar. Needs to be an `date-fns` locale object, like `import nbLocale from 'date-fns/locale/nb'`. Defaults to `nb`. |
| `label` | _(optional)_ a prepending label in sync with the date input field. |
| `status` | _(optional)_ text with a status message. The style defaults to an error message. |
| `status_state` | _(optional)_ defines the state of the status. Currently are two statuses `[error, info]`. Defaults to `error`. |
4 changes: 3 additions & 1 deletion ...design-system-portal/src/pages/uilib/components/dropdown/dropdown-properties.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,9 @@ import { Data } from 'Pages/uilib/components/dropdown/Examples'
| `scrollable` | _(optional)_ defines if the options list should be scrollable (the `max-height` is set by default to `50vh`). Defaults to `true`. |
| `no_scroll_animation` | _(optional)_ to disable scrolling animation. Defaults to `false`. |
| `no_animation` | _(optional)_ to disable appear/disappear (show/hide) animation. Defaults to `false`. |
| `max_height` | _(optional)_ defines if the height (in `rem`) of the options list. Defualts to null, as this is set automatically by default. |
| `max_height` | _(optional)_ defines if the height (in `rem`) of the options list. Defaults to null, as this is set automatically by default. |
| `status` | _(optional)_ text with a status message. The style defaults to an error message. |
| `status_state` | _(optional)_ defines the state of the status. Currently are two statuses `[error, info]`. Defaults to `error`. |

## Data structure

Expand Down
5 changes: 3 additions & 2 deletions packages/dnb-design-system-portal/src/pages/uilib/components/progress-indicator/Examples.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,14 +50,15 @@ class Example extends PureComponent {
`}
</ComponentBox>
<ComponentBox
caption="ProgressIndicator with on_complete callback"
caption="ProgressIndicator with random `on_complete` callback"
noFragments={false}
>
{/* @jsx */ `
() => {
const random = (min, max) => (Math.floor( Math.random () * (max - min + 1)) + min)
const [visible, setVisibe] = useState(true)
useEffect(() => {
const timer = setInterval(() => setVisibe(!visible), 2400)
const timer = setInterval(() => setVisibe(!visible), random(2400, 4200))
return () => clearTimeout(timer)
})
return (
Expand Down
4 changes: 3 additions & 1 deletion ...s/dnb-design-system-portal/src/pages/uilib/components/radio/radio-properties.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,11 @@ draft: true
| `group` | _(optional)_ use a unique group identifier to define the Radio buttons who belongs together. |
| `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)_ uses the `form-status` component to show failure messages. |
| `id` | _(optional)_ the `id` of the input. Default will be a random id. |
| `disabled` | _(optional)_ to disable/enable the radio. |
| `status` | _(optional)_ text with a status message. The style defaults to an error message. |
| `status_state` | _(optional)_ defines the state of the status. Currently are two statuses `[error, info]`. Defaults to `error`. |
| | |

## Radio group

Expand Down
19 changes: 10 additions & 9 deletions ...dnb-design-system-portal/src/pages/uilib/components/switch/switch-properties.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,13 @@
draft: true
---

| Properties | Description |
| --------------- | ----------------------------------------------------------------------------------------------------- |
| `checked` | _(optional)_ determine whether the switch is checked or not. Default will be `false`. |
| `default_state` | _(optional)_ boolean value. The state of the switch. Defaults to `false`. Set to `true` if otherwise. |
| `title` | _(mandatory)_ the `title` of the input - describing it a bit further for accessibility reasons. |
| `label` | _(optional)_ use either the `label` property or provide custom one. |
| `status` | _(optional)_ uses the `form-status` component to show failure messages. |
| `id` | _(optional)_ the `id` of the input. Default will be a random id. |
| `disabled` | _(optional)_ to disable/enable the switch. |
| Properties | Description |
| --------------- | -------------------------------------------------------------------------------------------------------------- |
| `checked` | _(optional)_ determine whether the switch is checked or not. Default will be `false`. |
| `default_state` | _(optional)_ boolean value. The state of the switch. Defaults to `false`. Set to `true` if otherwise. |
| `title` | _(mandatory)_ the `title` of the input - describing it a bit further for accessibility reasons. |
| `label` | _(optional)_ use either the `label` property or provide custom one. |
| `id` | _(optional)_ the `id` of the input. Default will be a random id. |
| `disabled` | _(optional)_ to disable/enable the switch. |
| `status` | _(optional)_ text with a status message. The style defaults to an error message. |
| `status_state` | _(optional)_ defines the state of the status. Currently are two statuses `[error, info]`. Defaults to `error`. |
Loading

0 comments on commit 7cd869a

Please sign in to comment.