@transferwise/components 0.0.0-experimental-35d02b6 → 0.0.0-experimental-7025851

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 (15) hide show
  1. package/build/index.esm.js +6 -9
  2. package/build/index.esm.js.map +1 -1
  3. package/build/index.js +6 -9
  4. package/build/index.js.map +1 -1
  5. package/build/main.css +1 -1
  6. package/build/styles/dateLookup/DateLookup.css +1 -1
  7. package/build/styles/main.css +1 -1
  8. package/build/types/dateLookup/tableLink/TableLink.d.ts +2 -6
  9. package/build/types/dateLookup/tableLink/TableLink.d.ts.map +1 -1
  10. package/package.json +3 -3
  11. package/src/dateLookup/DateLookup.css +1 -1
  12. package/src/dateLookup/DateLookup.less +2 -6
  13. package/src/dateLookup/tableLink/TableLink.spec.js +6 -15
  14. package/src/dateLookup/tableLink/TableLink.tsx +6 -7
  15. package/src/main.css +1 -1
package/build/types/dateLookup/tableLink/TableLink.d.ts CHANGED
@@ -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 _default: import("react").FC<import("react-intl").WithIntlProps<TableLinkProps>> & {
16
- WrappedComponent: import("react").ComponentType<TableLinkProps>;
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
package/build/types/dateLookup/tableLink/TableLink.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TableLink.d.ts","sourceRoot":"","sources":["../../../../src/dateLookup/tableLink/TableLink.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAc,SAAS,EAAE,MAAM,YAAY,CAAC;AAInD,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;IAChC,IAAI,EAAE,SAAS,CAAC;CACjB;;;;AA8DD,wBAAqC"}
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,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-35d02b6",
3
+ "version": "0.0.0-experimental-7025851",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -78,8 +78,8 @@
78
78
  "rollup": "^3.28.1",
79
79
  "storybook": "^7.4.5",
80
80
  "@transferwise/less-config": "3.0.6",
81
- "@transferwise/neptune-css": "14.7.1",
82
- "@wise/components-theming": "0.8.4"
81
+ "@wise/components-theming": "0.8.4",
82
+ "@transferwise/neptune-css": "14.7.1"
83
83
  },
84
84
  "peerDependencies": {
85
85
  "@transferwise/icons": "^3.7.0",
package/src/dateLookup/DateLookup.css 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:nth-child(7n+6) button,.tw-date-lookup-calendar>tbody>tr>td:nth-child(7n+7) button,.tw-date-lookup-calendar>thead>tr>th:nth-child(7n+6),.tw-date-lookup-calendar>thead>tr>th:nth-child(7n+7){color:#5d7079;color:var(--color-content-secondary);font-weight:400;font-weight:var(--font-weight-regular)}.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:50%;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:#00a2dd;color:var(--color-interactive-accent)}.tw-date-lookup-calendar abbr{text-decoration:none}.tw-date-lookup-header-current-container{display:inline}.tw-date-lookup-header-current{font-weight:800;font-weight:var(--font-weight-bold)}.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)}
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:nth-child(7n+6) button,.tw-date-lookup-calendar>tbody>tr>td:nth-child(7n+7) button,.tw-date-lookup-calendar>thead>tr>th:nth-child(7n+6),.tw-date-lookup-calendar>thead>tr>th:nth-child(7n+7){color:#5d7079;color:var(--color-content-secondary);font-weight:400;font-weight:var(--font-weight-regular)}.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)}
package/src/dateLookup/DateLookup.less CHANGED
@@ -42,7 +42,7 @@
42
42
 
43
43
  &.tw-date-lookup-day-option {
44
44
  height: var(--size-40);
45
- border-radius: 50%;
45
+ border-radius: var(--radius-full);
46
46
  line-height: var(--size-40);
47
47
  width: var(--size-40);
48
48
  padding: 0;
@@ -65,7 +65,7 @@
65
65
 
66
66
  &:not(.disabled, :disabled) button.active {
67
67
  background-color: var(--color-interactive-primary);
68
- color: var(--color-interactive-accent);
68
+ color: var(--color-interactive-contrast);
69
69
  }
70
70
  }
71
71
 
@@ -80,10 +80,6 @@
80
80
  display: inline;
81
81
  }
82
82
 
83
- .tw-date-lookup-header-current {
84
- font-weight: var(--font-weight-bold);
85
- }
86
-
87
83
  .np-theme-personal {
88
84
  &.tw-date-lookup-menu,
89
85
  .tw-date-lookup-menu {
package/src/dateLookup/tableLink/TableLink.spec.js CHANGED
@@ -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
- const formatMessage = (id) => id.defaultMessage;
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} />).dive();
45
+ component = shallow(<TableLink {...props} />);
55
46
  });
56
47
 
57
48
  it('shows item value', () => {
package/src/dateLookup/tableLink/TableLink.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import classNames from 'classnames';
2
2
  import { useEffect, useRef } from 'react';
3
- import { injectIntl, IntlShape } from 'react-intl';
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 || ''}, ${formatMessage(messages.selected)} ${formatMessage(
52
- messages[type],
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 injectIntl(TableLink);
79
+ export default TableLink;