@transferwise/components 0.0.0-experimental-35d02b6 → 0.0.0-experimental-8f9699a
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.
- package/build/index.esm.js +11 -14
- package/build/index.esm.js.map +1 -1
- package/build/index.js +11 -14
- package/build/index.js.map +1 -1
- package/build/main.css +1 -1
- package/build/styles/dateLookup/DateLookup.css +1 -1
- package/build/styles/main.css +1 -1
- package/build/types/dateLookup/tableLink/TableLink.d.ts +2 -6
- package/build/types/dateLookup/tableLink/TableLink.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/dateLookup/DateLookup.css +1 -1
- package/src/dateLookup/DateLookup.less +4 -11
- package/src/dateLookup/dayCalendar/table/DayCalendarTable.js +9 -2
- package/src/dateLookup/tableLink/TableLink.spec.js +6 -15
- package/src/dateLookup/tableLink/TableLink.tsx +6 -7
- package/src/dateLookup/yearCalendar/table/YearCalendarTable.js +3 -3
- package/src/main.css +1 -1
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { IntlShape } from 'react-intl';
|
|
3
2
|
interface TableLinkProps {
|
|
4
3
|
item: number;
|
|
5
4
|
type: 'day' | 'month' | 'year';
|
|
@@ -10,10 +9,7 @@ interface TableLinkProps {
|
|
|
10
9
|
today: boolean;
|
|
11
10
|
autofocus?: boolean;
|
|
12
11
|
onClick: (item: number) => void;
|
|
13
|
-
intl: IntlShape;
|
|
14
12
|
}
|
|
15
|
-
declare const
|
|
16
|
-
|
|
17
|
-
};
|
|
18
|
-
export default _default;
|
|
13
|
+
declare const TableLink: ({ item, type, title, longTitle, active, disabled, today, autofocus, onClick, }: TableLinkProps) => import("react").JSX.Element;
|
|
14
|
+
export default TableLink;
|
|
19
15
|
//# sourceMappingURL=TableLink.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableLink.d.ts","sourceRoot":"","sources":["../../../../src/dateLookup/tableLink/TableLink.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"TableLink.d.ts","sourceRoot":"","sources":["../../../../src/dateLookup/tableLink/TableLink.tsx"],"names":[],"mappings":";AAMA,UAAU,cAAc;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAED,QAAA,MAAM,SAAS,mFAUZ,cAAc,gCAgDhB,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.tw-date-lookup-menu{width:400px}.tw-date-lookup-calendar{background-color:inherit;min-width:300px;table-layout:fixed;text-align:center}.tw-date-lookup-calendar>tbody>tr>td
|
|
1
|
+
.tw-date-lookup-menu{width:400px}.tw-date-lookup-calendar{background-color:inherit;min-width:300px;table-layout:fixed;text-align:center}.tw-date-lookup-calendar>tbody>tr>td.weekend button{color:#5d7079;color:var(--color-content-secondary)}.tw-date-lookup-calendar>tbody>tr>td{padding:4px;padding:var(--size-4)}@media (max-width:320px){.tw-date-lookup-calendar>tbody>tr>td{padding:0}}.tw-date-lookup-calendar>tbody>tr>td:has(.tw-date-lookup-day-option){padding:1px}.tw-date-lookup-calendar>tbody>tr>td button{background-color:transparent;border:transparent;border-radius:10px;border-radius:var(--radius-small);color:#0097c7;color:var(--color-content-accent);color:#37517e;color:var(--color-content-primary);font-weight:600;font-weight:var(--font-weight-semi-bold);padding:4px 0;padding:var(--size-4) 0;width:100%}@media (max-width:320px){.tw-date-lookup-calendar>tbody>tr>td button{padding:0}}.tw-date-lookup-calendar>tbody>tr>td button.tw-date-lookup-day-option{align-items:center;border-radius:9999px;border-radius:var(--radius-full);display:inline-flex;height:40px;height:var(--size-40);justify-content:center;line-height:40px;line-height:var(--size-40);padding:0;width:40px;width:var(--size-40)}.tw-date-lookup-calendar>tbody>tr>td button.tw-date-lookup-day-option.today{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}.tw-date-lookup-calendar>tbody>tr>td:hover button:not(.disabled,:disabled),.tw-date-lookup-calendar>tbody>tr>td:not(.disabled,:disabled) button.show-focus{background-color:var(--color-background-screen-hover)}.tw-date-lookup-calendar>tbody>tr>td:not(.disabled,:disabled) button.active{background-color:var(--color-interactive-primary);color:var(--color-interactive-contrast)}.tw-date-lookup-calendar abbr{text-decoration:none}.tw-date-lookup-header-current-container{display:inline}.np-theme-personal .tw-date-lookup-menu .table-bordered,.np-theme-personal.tw-date-lookup-menu .table-bordered{border:none}.np-theme-personal .tw-date-lookup-menu thead,.np-theme-personal.tw-date-lookup-menu thead{background-color:unset}.np-theme-personal .tw-date-lookup-menu td,.np-theme-personal.tw-date-lookup-menu td{border:none}.np-theme-personal .tw-date-lookup-menu .tw-date-lookup-header-current,.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-header-current{color:#37517e;color:var(--color-content-primary)}
|
|
@@ -9,12 +9,9 @@
|
|
|
9
9
|
text-align: center;
|
|
10
10
|
table-layout: fixed;
|
|
11
11
|
|
|
12
|
-
>
|
|
13
|
-
> thead > tr > th:nth-child(7n+7),
|
|
14
|
-
> tbody > tr > td:nth-child(7n+6) button,
|
|
15
|
-
> tbody > tr > td:nth-child(7n+7) button {
|
|
12
|
+
> tbody > tr > td.weekend button {
|
|
16
13
|
color: var(--color-content-secondary);
|
|
17
|
-
|
|
14
|
+
&:extend(.np-text-body-default);
|
|
18
15
|
}
|
|
19
16
|
|
|
20
17
|
> tbody > tr > td {
|
|
@@ -42,7 +39,7 @@
|
|
|
42
39
|
|
|
43
40
|
&.tw-date-lookup-day-option {
|
|
44
41
|
height: var(--size-40);
|
|
45
|
-
border-radius:
|
|
42
|
+
border-radius: var(--radius-full);
|
|
46
43
|
line-height: var(--size-40);
|
|
47
44
|
width: var(--size-40);
|
|
48
45
|
padding: 0;
|
|
@@ -65,7 +62,7 @@
|
|
|
65
62
|
|
|
66
63
|
&:not(.disabled, :disabled) button.active {
|
|
67
64
|
background-color: var(--color-interactive-primary);
|
|
68
|
-
color: var(--color-interactive-
|
|
65
|
+
color: var(--color-interactive-contrast);
|
|
69
66
|
}
|
|
70
67
|
}
|
|
71
68
|
|
|
@@ -80,10 +77,6 @@
|
|
|
80
77
|
display: inline;
|
|
81
78
|
}
|
|
82
79
|
|
|
83
|
-
.tw-date-lookup-header-current {
|
|
84
|
-
font-weight: var(--font-weight-bold);
|
|
85
|
-
}
|
|
86
|
-
|
|
87
80
|
.np-theme-personal {
|
|
88
81
|
&.tw-date-lookup-menu,
|
|
89
82
|
.tw-date-lookup-menu {
|
|
@@ -94,7 +94,14 @@ class DayCalendarTable extends PureComponent {
|
|
|
94
94
|
<thead>
|
|
95
95
|
<tr>
|
|
96
96
|
{this.days.map((day, index) => (
|
|
97
|
-
<th
|
|
97
|
+
<th
|
|
98
|
+
key={day}
|
|
99
|
+
className={
|
|
100
|
+
index > 4
|
|
101
|
+
? 'text-xs-center np-text-body-default'
|
|
102
|
+
: 'text-xs-center np-text-body-default-bold'
|
|
103
|
+
}
|
|
104
|
+
>
|
|
98
105
|
<span className="hidden-xs">
|
|
99
106
|
<abbr title={this.daysLong[index]}>{day.slice(0, 3)}</abbr>
|
|
100
107
|
</span>
|
|
@@ -110,7 +117,7 @@ class DayCalendarTable extends PureComponent {
|
|
|
110
117
|
{weeks.map((week, weekIndex) => (
|
|
111
118
|
<tr key={weekIndex}>
|
|
112
119
|
{week.map((day, dayIndex) => (
|
|
113
|
-
<td key={dayIndex} className={dayIndex > 4 ? '
|
|
120
|
+
<td key={dayIndex} className={dayIndex > 4 ? 'weekend' : ''}>
|
|
114
121
|
{day && (
|
|
115
122
|
<TableLink
|
|
116
123
|
item={day}
|
|
@@ -1,15 +1,9 @@
|
|
|
1
1
|
import { shallow } from 'enzyme';
|
|
2
|
+
import { useIntl } from 'react-intl';
|
|
2
3
|
|
|
3
4
|
import TableLink from '.';
|
|
4
5
|
|
|
5
|
-
|
|
6
|
-
jest.mock('react-intl', () => ({
|
|
7
|
-
injectIntl: (Component) =>
|
|
8
|
-
function (props) {
|
|
9
|
-
return <Component {...props} intl={{ formatMessage }} />;
|
|
10
|
-
},
|
|
11
|
-
defineMessages: (translations) => translations,
|
|
12
|
-
}));
|
|
6
|
+
jest.mock('react-intl');
|
|
13
7
|
|
|
14
8
|
jest.mock('../DateLookup.messages', () => ({
|
|
15
9
|
selected: {
|
|
@@ -29,18 +23,15 @@ jest.mock('../DateLookup.messages', () => ({
|
|
|
29
23
|
defaultMessage: 'year',
|
|
30
24
|
},
|
|
31
25
|
}));
|
|
32
|
-
jest.mock('react-intl', () => ({
|
|
33
|
-
injectIntl: (Component) =>
|
|
34
|
-
function (props) {
|
|
35
|
-
return <Component {...props} intl={{ formatMessage }} />;
|
|
36
|
-
},
|
|
37
|
-
}));
|
|
38
26
|
|
|
39
27
|
describe('TableLink', () => {
|
|
40
28
|
let component;
|
|
41
29
|
let props;
|
|
42
30
|
|
|
43
31
|
beforeEach(() => {
|
|
32
|
+
useIntl.mockReturnValue({
|
|
33
|
+
formatMessage: (message) => message.defaultMessage,
|
|
34
|
+
});
|
|
44
35
|
props = {
|
|
45
36
|
item: 12,
|
|
46
37
|
type: 'day',
|
|
@@ -51,7 +42,7 @@ describe('TableLink', () => {
|
|
|
51
42
|
title: '12',
|
|
52
43
|
longTitle: '12/12/1212',
|
|
53
44
|
};
|
|
54
|
-
component = shallow(<TableLink {...props} />)
|
|
45
|
+
component = shallow(<TableLink {...props} />);
|
|
55
46
|
});
|
|
56
47
|
|
|
57
48
|
it('shows item value', () => {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import classNames from 'classnames';
|
|
2
2
|
import { useEffect, useRef } from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { useIntl } from 'react-intl';
|
|
4
4
|
|
|
5
5
|
import messages from '../DateLookup.messages';
|
|
6
6
|
|
|
@@ -14,7 +14,6 @@ interface TableLinkProps {
|
|
|
14
14
|
today: boolean;
|
|
15
15
|
autofocus?: boolean;
|
|
16
16
|
onClick: (item: number) => void;
|
|
17
|
-
intl: IntlShape;
|
|
18
17
|
}
|
|
19
18
|
|
|
20
19
|
const TableLink = ({
|
|
@@ -27,9 +26,9 @@ const TableLink = ({
|
|
|
27
26
|
today,
|
|
28
27
|
autofocus,
|
|
29
28
|
onClick,
|
|
30
|
-
intl: { formatMessage },
|
|
31
29
|
}: TableLinkProps) => {
|
|
32
30
|
const buttonRef = useRef<HTMLButtonElement>(null);
|
|
31
|
+
const intl = useIntl();
|
|
33
32
|
|
|
34
33
|
useEffect(() => {
|
|
35
34
|
if (autofocus) {
|
|
@@ -48,9 +47,9 @@ const TableLink = ({
|
|
|
48
47
|
|
|
49
48
|
const calculateAriaLabel = () => {
|
|
50
49
|
if (active) {
|
|
51
|
-
return `${longTitle || title || ''}, ${
|
|
52
|
-
messages
|
|
53
|
-
)}`;
|
|
50
|
+
return `${longTitle || title || ''}, ${intl.formatMessage(
|
|
51
|
+
messages.selected,
|
|
52
|
+
)} ${intl.formatMessage(messages[type])}`;
|
|
54
53
|
}
|
|
55
54
|
return longTitle || title;
|
|
56
55
|
};
|
|
@@ -77,4 +76,4 @@ const TableLink = ({
|
|
|
77
76
|
);
|
|
78
77
|
};
|
|
79
78
|
|
|
80
|
-
export default
|
|
79
|
+
export default TableLink;
|
|
@@ -18,9 +18,9 @@ const YearCalendarTable = ({ selectedDate, min, max, viewYear, placeholder, onSe
|
|
|
18
18
|
item={year}
|
|
19
19
|
type="year"
|
|
20
20
|
title={formatDate(new Date(year, 0), locale, YEAR_ONLY_FORMAT)}
|
|
21
|
-
active={
|
|
21
|
+
active={isActive(year)}
|
|
22
22
|
disabled={isDisabled(year)}
|
|
23
|
-
today={year
|
|
23
|
+
today={isThisYear(year)}
|
|
24
24
|
autofocus={autofocusYear === year}
|
|
25
25
|
onClick={onSelect}
|
|
26
26
|
/>
|
|
@@ -28,7 +28,7 @@ const YearCalendarTable = ({ selectedDate, min, max, viewYear, placeholder, onSe
|
|
|
28
28
|
};
|
|
29
29
|
|
|
30
30
|
const isActive = (year) => {
|
|
31
|
-
return selectedDate && year === selectedDate.getFullYear();
|
|
31
|
+
return !!(selectedDate && year === selectedDate.getFullYear());
|
|
32
32
|
};
|
|
33
33
|
|
|
34
34
|
const isThisYear = (year) => {
|