@sb1/ffe-datepicker-react 100.8.3 → 100.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +147 -26
  2. package/package.json +8 -8
package/README.md CHANGED
@@ -1,46 +1,169 @@
1
1
  # @sb1/ffe-datepicker-react
2
2
 
3
- ## Install
3
+ ## Beskrivelse
4
4
 
5
- ```
5
+ Komponenter for dato-inntasting og kalender. `Datepicker` kombinerer input-felt med kalender, `DateInput` er kun input-feltet, og `Calendar` er en frittstående kalenderkomponent.
6
+
7
+ ## Installasjon
8
+
9
+ ```bash
6
10
  npm install --save @sb1/ffe-datepicker-react
7
11
  ```
8
12
 
9
- ## Usage
13
+ ## Bruk
10
14
 
11
- Full documentation on datepicker usage is available at https://design.sparebank1.no/komponenter/skjemaelementer/#datepicker.
15
+ Full dokumentasjon: https://sparebank1.github.io/designsystem/
12
16
 
13
- This package depends on `@sb1/ffe-form-react` and `@sb1/ffe-icons-react`.
14
- Make sure you import the less-files from these packages.
17
+ ### Importere CSS
15
18
 
16
- ## Requirements
19
+ ```css
20
+ @import '@sb1/ffe-datepicker/css/datepicker.css';
21
+ @import '@sb1/ffe-form/css/form.css';
22
+ @import '@sb1/ffe-icons/css/ffe-icons.css';
23
+ ```
17
24
 
18
- - ~~i18n~~
19
- - ~~Show calendar on focus~~
20
- - ~~Handle various input-formats (see simpledate.test.js)~~
21
- - Validate on blur on the whole component (both the input and the calendar)
25
+ ## Eksempler
22
26
 
23
- ### a11y
27
+ ### Datepicker (input + kalender)
24
28
 
25
- Requirements for full a11y-compliance:
29
+ Krever `labelId`-prop som peker til en ekstern label. Bruk `InputGroup` fra `@sb1/ffe-form-react`.
26
30
 
27
- - https://www.w3.org/TR/wai-aria-practices/#datepicker
31
+ ```tsx
32
+ import { useState } from 'react';
33
+ import { Datepicker } from '@sb1/ffe-datepicker-react';
34
+ import { InputGroup } from '@sb1/ffe-form-react';
28
35
 
29
- Examples:
36
+ function MyComponent() {
37
+ const [value, setValue] = useState('01.12.2024');
30
38
 
31
- - https://hanshillen.github.io/jqtest/#goto_datepicker
39
+ return (
40
+ <InputGroup label="Velg dato" labelId="datepicker-label">
41
+ <Datepicker
42
+ value={value}
43
+ onChange={setValue}
44
+ locale="nb"
45
+ labelId="datepicker-label"
46
+ />
47
+ </InputGroup>
48
+ );
49
+ }
50
+ ```
32
51
 
33
- ## Other
52
+ #### Datepicker med validering og begrensninger
53
+
54
+ ```tsx
55
+ import { useState } from 'react';
56
+ import { Datepicker } from '@sb1/ffe-datepicker-react';
57
+ import { InputGroup } from '@sb1/ffe-form-react';
58
+
59
+ function MyComponent() {
60
+ const [value, setValue] = useState('');
61
+ const [error, setError] = useState<string | null>(null);
62
+
63
+ return (
64
+ <InputGroup
65
+ label="Fødselsdato"
66
+ labelId="fodselsdato-label"
67
+ aria-invalid={!!error}
68
+ fieldMessage={error}
69
+ >
70
+ <Datepicker
71
+ value={value}
72
+ onChange={setValue}
73
+ locale="nb"
74
+ labelId="fodselsdato-label"
75
+ minDate="01.01.1900"
76
+ maxDate="31.12.2024"
77
+ disabledDates={['24.12.2024', '25.12.2024']}
78
+ dropdownCaption={true}
79
+ />
80
+ </InputGroup>
81
+ );
82
+ }
83
+ ```
34
84
 
35
- Evaluated implementations:
85
+ ### DateInput (kun input-felt)
86
+
87
+ Lavnivå-komponent som kun tilbyr et formatert input-felt. For de fleste bruksområder bør du bruke `Datepicker`.
88
+
89
+ ```tsx
90
+ import { useState, ChangeEvent } from 'react';
91
+ import { DateInput } from '@sb1/ffe-datepicker-react';
92
+
93
+ function MyComponent() {
94
+ const [value, setValue] = useState('');
95
+
96
+ return (
97
+ <div>
98
+ <label htmlFor="date-input">Dato</label>
99
+ <DateInput
100
+ id="date-input"
101
+ value={value}
102
+ onChange={(e: ChangeEvent<HTMLInputElement>) =>
103
+ setValue(e.target.value)
104
+ }
105
+ locale="nb"
106
+ ariaInvalid="false"
107
+ />
108
+ </div>
109
+ );
110
+ }
111
+ ```
36
112
 
37
- - Pickaday (or variants of it): Not a11y compliant. Lacks ARIA-roles and keyboard navigation
38
- - http://jquense.github.io/react-widgets/docs/#/datetime-picker : Lacks keyboard navigation
39
- - https://hacker0x01.github.io/react-datepicker/ : Lacks keyboard navigation
113
+ ### Calendar (frittstående kalender)
114
+
115
+ Frittstående kalenderkomponent. Datoer representeres som strenger i format 'dd.mm.yyyy'.
116
+
117
+ ```tsx
118
+ import { useState } from 'react';
119
+ import { Calendar } from '@sb1/ffe-datepicker-react';
120
+
121
+ function MyComponent() {
122
+ const [selectedDate, setSelectedDate] = useState<string | null>(
123
+ '17.12.2024',
124
+ );
125
+
126
+ return (
127
+ <Calendar
128
+ selectedDate={selectedDate}
129
+ onDatePicked={setSelectedDate}
130
+ locale="nb"
131
+ minDate="01.01.2024"
132
+ maxDate="31.12.2025"
133
+ disabledDates={['01.05.2025', '17.05.2025']}
134
+ />
135
+ );
136
+ }
137
+ ```
40
138
 
41
- ## Development
139
+ ## Testing
140
+
141
+ ```tsx
142
+ import { render } from '@testing-library/react';
143
+ import {
144
+ Datepicker,
145
+ getDatepickerByLabelText,
146
+ } from '@sb1/ffe-datepicker-react';
147
+ import { InputGroup } from '@sb1/ffe-form-react';
148
+
149
+ test('kan sette dato', async () => {
150
+ render(
151
+ <InputGroup label="Dato" labelId="test-label">
152
+ <Datepicker
153
+ value=""
154
+ onChange={jest.fn()}
155
+ locale="nb"
156
+ labelId="test-label"
157
+ />
158
+ </InputGroup>,
159
+ );
160
+
161
+ const datepicker = getDatepickerByLabelText('Dato');
162
+ // Bruk datepicker.day, datepicker.month, datepicker.year for å interagere med feltene
163
+ });
164
+ ```
42
165
 
43
- To start a local development server, run the following from the designsystem root folder:
166
+ ## Utvikling
44
167
 
45
168
  ```bash
46
169
  npm install
@@ -48,6 +171,4 @@ npm run build
48
171
  npm start
49
172
  ```
50
173
 
51
- A local instance of `Storybook` with live reloading will run at http://localhost:6006/.
52
-
53
- Example implementations using the latest versions of all components are also available at https://sparebank1.github.io/designsystem.
174
+ Storybook kjører på http://localhost:6006/. Dokumentasjon: https://sparebank1.github.io/designsystem
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-datepicker-react",
3
- "version": "100.8.3",
3
+ "version": "100.9.0",
4
4
  "license": "MIT",
5
5
  "author": "SpareBank 1",
6
6
  "files": [
@@ -24,11 +24,11 @@
24
24
  "test:watch": "ffe-buildtool jest --watch"
25
25
  },
26
26
  "dependencies": {
27
- "@sb1/ffe-datepicker": "^100.8.3",
28
- "@sb1/ffe-dropdown-react": "^100.8.3",
29
- "@sb1/ffe-form": "^100.8.3",
30
- "@sb1/ffe-form-react": "^100.8.3",
31
- "@sb1/ffe-icons-react": "^100.8.3",
27
+ "@sb1/ffe-datepicker": "^100.9.0",
28
+ "@sb1/ffe-dropdown-react": "^100.9.0",
29
+ "@sb1/ffe-form": "^100.9.0",
30
+ "@sb1/ffe-form-react": "^100.9.0",
31
+ "@sb1/ffe-icons-react": "^100.9.0",
32
32
  "@testing-library/react": "^16.0.0",
33
33
  "@types/lodash.debounce": "^4.0.9",
34
34
  "classnames": "^2.3.1",
@@ -36,7 +36,7 @@
36
36
  "uuid": "^9.0.0"
37
37
  },
38
38
  "devDependencies": {
39
- "@sb1/ffe-buildtool": "^100.8.3",
39
+ "@sb1/ffe-buildtool": "^100.9.0",
40
40
  "eslint": "^9.22.0",
41
41
  "react": "^18.2.0",
42
42
  "react-dom": "^18.2.0"
@@ -47,5 +47,5 @@
47
47
  "publishConfig": {
48
48
  "access": "public"
49
49
  },
50
- "gitHead": "f33cf64a467cb430540d1320e763a4f223a8012c"
50
+ "gitHead": "41f20cf10bec5ebe53036c282690983d2114fb45"
51
51
  }