Skip to content

Commit

Permalink
feat(DatePicker): add size property to component (#1438)
Browse files Browse the repository at this point in the history
  • Loading branch information
@langz
langz authored Jun 10, 2022
1 parent 97eb78f commit 749a118
Show file tree
Hide file tree
Showing 14 changed files with 266 additions and 49 deletions.
39 changes: 39 additions & 0 deletions packages/dnb-design-system-portal/src/docs/uilib/components/date-picker/Examples.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -247,3 +247,42 @@ export const DatePickerCalendar = () => (
</ComponentBox>
</Wrapper>
)

export const DatePickerScreenshotTests = () => {
if (!global.IS_TEST) {
return null
}
return (
<Wrapper>
<ComponentBox data-visual-test="date-picker-sizes">
{() => /* jsx */ `
<FormRow vertical>
<DatePicker
label="DatePicker:"
date={new Date()}
show_input={true}
/>
<DatePicker
size="small"
label="DatePicker:"
date={new Date()}
show_input={true}
/>
<DatePicker
size="medium"
label="DatePicker:"
date={new Date()}
show_input={true}
/>
<DatePicker
size="large"
label="DatePicker:"
date={new Date()}
show_input={true}
/>
</FormRow>
`}
</ComponentBox>
</Wrapper>
)
}
3 changes: 3 additions & 0 deletions packages/dnb-design-system-portal/src/docs/uilib/components/date-picker/demos.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ DatePickerNoInputStatus,
DatePickerErrorMessage,
DatePickerErrorStatus,
DatePickerCalendar,
DatePickerScreenshotTests,
} from 'Docs/uilib/components/date-picker/Examples'
import ChangeLocale from 'dnb-design-system-portal/src/core/ChangeLocale'

Expand Down Expand Up @@ -80,3 +81,5 @@ import enUS from '@dnb/eufemia/shared/locales/en-US'
Also used for screenshot tests.

<DatePickerCalendar />

<DatePickerScreenshotTests />
17 changes: 9 additions & 8 deletions ...es/dnb-design-system-portal/src/docs/uilib/components/date-picker/properties.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,30 +23,31 @@ showTabs: true
| `mask_placeholder` | _(optional)_ to display the placeholder on input. Defaults to `dd/mm/åååå`. |
| `hide_navigation` | _(optional)_ if set to `true`, the navigation will be hidden. Defaults to `false`. |
| `hide_days` | _(optional)_ if set to `true`, the week days will be hidden. Defaults to `false`. |
| `show_submit_button` | _(optional)_ if set to `true`, a submit button will be shown. You can change the default text by using `submit_button_text="Ok"`. Defaults to `false`. If the `range` prop is `true`, then the submit button is shown. |
| `show_cancel_button` | _(optional)_ if set to `true`, a cancel button will be shown. You can change the default text by using `cancel_button_text="Avbryt"` Defaults to `false`. If the `range` prop is `true`, then the cancel button is shown. |
| `show_submit_button` | _(optional)_ if set to `true`, a submit button will be shown. You can change the default text by using `submit_button_text="Ok"`. Defaults to `false`. If the `range` prop is `true`, then the submit button is shown. |
| `show_cancel_button` | _(optional)_ if set to `true`, a cancel button will be shown. You can change the default text by using `cancel_button_text="Avbryt"` Defaults to `false`. If the `range` prop is `true`, then the cancel button is shown. |
| `show_reset_button` | _(optional)_ if set to `true`, a reset button will be shown. You can change the default text by using `reset_button_text="Tilbakestill"` Defaults to `false`. |
| `link` | _(optional)_ link both calendars, once to the user is navigating between months. Only meant to use if the range is set to true. Defaults to `false`. |
| `sync` | _(optional)_ sync input values with the calendars views. Once the input values get changed, the calendar changes its views in sync. Defaults to `true`. |
| `link` | _(optional)_ link both calendars, once to the user is navigating between months. Only meant to use if the range is set to true. Defaults to `false`. |
| `sync` | _(optional)_ sync input values with the calendars views. Once the input values get changed, the calendar changes its views in sync. Defaults to `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` **v2** locale object, like `import enLocale from 'date-fns/locale/en-GB'`. Defaults to `nb-NO`. |
| `align_picker` | _(optional)_ use `right` to change the calendar alignment direction. Defaults to `left`. |
| `only_month` | _(optional)_ use `true` to only show the defined month. Disables the month navigation possibility. Defaults to `false`. |
| `hide_last_week` | _(optional)_ use `true` to only show the last week in the current month if it needs to be shown. The result is that there will mainly be shows five (5) weeks (rows) instead of six (6). Defaults to `false`. |
| `hide_last_week` | _(optional)_ use `true` to only show the last week in the current month if it needs to be shown. The result is that there will mainly be shows five (5) weeks (rows) instead of six (6). Defaults to `false`. |
| `stretch` | _(optional)_ if set to `true`, then the date-picker input field will be 100% in `width`. |
| `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 defined shortcuts. More info is below. |
| `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 defined shortcuts. More info is below. |
| `addon_element` | _(optional)_ gives you the possibility to inject a React element showing up over the footer. Use it to customize `shortcuts`. |
| `input_element` | _(optional)_ gives you the possibility to use a plain/vanilla `<input />` HTML element by defining it as a string `input_element="input"`, a React element, or a render function `input_element={(internalProps) => (<Return />)}`. Can also be used in circumstances where the `react-text-mask` not should be used, e.g. in testing environments. Defaults to custom masked input. |
| `status` | _(optional)_ text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message. |
| `status_state` | _(optional)_ defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. |
| `status_state` | _(optional)_ defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. |
| `status_props` | _(optional)_ use an object to define additional FormStatus properties. |
| `disable_autofocus` | _(optional)_ once the date picker gets opened, there is a focus handling to ensure good accessibility. This can be disabled with this property. Defaults to `false`. |
| `global_status_id` | _(optional)_ the `status_id` used for the target [GlobalStatus](/uilib/components/global-status). |
| `skeleton` | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown. |
| `size` | _(optional)_ the sizes you can choose is `small` (1.5rem), `default` (2rem), `medium` (2.5rem) and `large` (3rem) are supported component sizes. Defaults to `default` / `null`. |
| [Space](/uilib/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. |

<!-- | `enable_keyboard_nav` | _(optional)_ Enables easy keyboard navigation inside the calendar dates. **NB!** this feature suppresses Screen Reader navigation on NVDA since we then use the arrow keys to navigate in the table of dates. Defaults to `false`. | -->
Expand Down Expand Up @@ -90,4 +91,4 @@ const shortcuts = [
]

<DatePicker shortcuts={shortcuts} />
```
```
4 changes: 2 additions & 2 deletions packages/dnb-design-system-portal/src/docs/uilib/components/input/Examples.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -284,8 +284,8 @@ export const InputExampleClear = () => (
</Wrapper>
)

export const ScreenshotTests = () => {
if (!global.IS_TEST) {
export const InputScreenshotTests = () => {
if (!globalThis.IS_TEST) {
return null
}
return (
Expand Down
4 changes: 2 additions & 2 deletions packages/dnb-design-system-portal/src/docs/uilib/components/input/demos.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ showTabs: true
---

import {
ScreenshotTests,
InputScreenshotTests,
InputExampleDefault,
InputExampleSearch,
InputExampleMedium,
Expand Down Expand Up @@ -89,4 +89,4 @@ import InputPassword from '@dnb/eufemia/components/input/InputPassword'

<InputExamplePassword />

<ScreenshotTests />
<InputScreenshotTests />
Loading

0 comments on commit 749a118

Please sign in to comment.