@transferwise/components 0.0.0-experimental-bb7ed4a → 0.0.0-experimental-f34234e

package/src/dateLookup/DateLookup.tests.story.tsx

@@ -1,31 +1,23 @@
-import type { ReactRenderer, Story } from '@storybook/react';
+import { ReactRenderer, Story } from '@storybook/react';
 import { expect, userEvent, within } from '@storybook/test';
-import type { PlayFunctionContext } from '@storybook/types';
+import { PlayFunctionContext } from '@storybook/types';
 import { useState } from 'react';
 
-import DateLookup, { type DateLookupProps } from './DateLookup';
+import DateLookup from './DateLookup';
 
 export default {
   component: DateLookup,
   title: 'Forms/DateLookup/Tests',
 };
 
-const props: DateLookupProps = {
-  value: new Date(1987, 0, 10, 12, 0, 0),
-  onChange: (value: Date | null) => {
-    console.log(value);
-  },
-};
-
-const Template: Story<DateLookupProps> = (args: DateLookupProps) => {
-  const [value, setValue] = useState<Date | null>(args.value);
+const Template: Story<DateLookup> = () => {
+  const [value, setValue] = useState<Date | null>(new Date(1987, 0, 10, 12, 0, 0));
 
   return (
     <DateLookup
-      {...args}
       value={value}
-      placeholder="placeholder"
       clearable
+      placeholder="placeholder"
       onChange={(v) => {
         setValue(v);
       }}
@@ -34,11 +26,11 @@ const Template: Story<DateLookupProps> = (args: DateLookupProps) => {
 };
 
 export const ClearSpace = Template.bind({});
-ClearSpace.args = { ...props };
+
 ClearSpace.play = async ({
   canvasElement,
   step,
-}: PlayFunctionContext<ReactRenderer, DateLookupProps>) => {
+}: PlayFunctionContext<ReactRenderer, DateLookup>) => {
   const canvas = within(canvasElement);
 
   await step('space can activate clear button', async () => {
@@ -56,11 +48,11 @@ ClearSpace.play = async ({
 };
 
 export const ClearEnter = Template.bind({});
-ClearEnter.args = { ...props };
+
 ClearEnter.play = async ({
   canvasElement,
   step,
-}: PlayFunctionContext<ReactRenderer, DateLookupProps>) => {
+}: PlayFunctionContext<ReactRenderer, DateLookup>) => {
   const canvas = within(canvasElement);
 
   await step('enter can activate clear button', async () => {
@@ -76,29 +68,3 @@ ClearEnter.play = async ({
     await expect(placeholder).toBeInTheDocument();
   });
 };
-
-export const FocusOnSelectedDay = Template.bind({});
-FocusOnSelectedDay.args = { ...props };
-FocusOnSelectedDay.play = async () => {
-  await userEvent.tab();
-  await userEvent.keyboard(' ');
-};
-
-export const FocusOnToday = Template.bind({});
-FocusOnToday.args = { ...props, value: null };
-FocusOnToday.play = async () => {
-  await userEvent.tab();
-  await userEvent.keyboard(' ');
-};
-
-export const FocusOnFirstNonDisabledDate = Template.bind({});
-FocusOnFirstNonDisabledDate.args = {
-  ...props,
-  value: null,
-  min: new Date(1987, 0, 10, 12, 0, 0),
-  max: new Date(1987, 0, 12, 12, 0, 0),
-};
-FocusOnFirstNonDisabledDate.play = async () => {
-  await userEvent.tab();
-  await userEvent.keyboard(' ');
-};

package/src/dateLookup/DateLookup.tsx

@@ -1,16 +1,16 @@
 import classNames from 'classnames';
-import { createRef, PureComponent, type KeyboardEvent } from 'react';
+import { createRef, PureComponent, KeyboardEvent } from 'react';
 
 import {
   Size,
   MonthFormat,
   Position,
   Breakpoint,
-  type SizeSmall,
-  type SizeMedium,
-  type SizeLarge,
+  SizeSmall,
+  SizeMedium,
+  SizeLarge,
 } from '../common';
-import { isWithinRange, moveToWithinRange, returnDateView } from '../common/dateUtils';
+import { isWithinRange, moveToWithinRange } from '../common/dateUtils';
 import ResponsivePanel from '../common/responsivePanel';
 
 import DateTrigger from './dateTrigger';
@@ -74,8 +74,8 @@ class DateLookup extends PureComponent<DateLookupProps, DateLookupState> {
       originalDate: null,
       min: getStartOfDay(props.min),
       max: getStartOfDay(props.max),
-      viewMonth: returnDateView(props.value, props.min, props.max).getMonth(),
-      viewYear: returnDateView(props.value, props.min, props.max).getFullYear(),
+      viewMonth: (props.value || new Date()).getMonth(),
+      viewYear: (props.value || new Date()).getFullYear(),
       open: false,
       mode: 'day',
       isMobile: false,
@@ -97,7 +97,8 @@ class DateLookup extends PureComponent<DateLookupProps, DateLookupState> {
         props.onChange(moveToWithinRange(selectedDate, min, max));
         return null;
       }
-      const viewDateThatIsWithinRange: Date = returnDateView(selectedDate, min, max);
+      const viewDateThatIsWithinRange: Date =
+        selectedDate || ((min || max) && moveToWithinRange(new Date(), min, max)) || new Date();
       const viewMonth = viewDateThatIsWithinRange.getMonth();
       const viewYear = viewDateThatIsWithinRange.getFullYear();
       return { selectedDate, min, max, viewMonth, viewYear };
@@ -205,7 +206,9 @@ class DateLookup extends PureComponent<DateLookupProps, DateLookupState> {
     } else {
       date = getStartOfDay(new Date());
     }
-    date &&= moveToWithinRange(date, min, max);
+    if (date) {
+      date = moveToWithinRange(date, min, max);
+    }
     if (date?.getTime() !== selectedDate?.getTime()) {
       this.props.onChange(date);
     }

package/src/dateLookup/dayCalendar/table/DayCalendarTable.tsx

@@ -1,6 +1,6 @@
 import { formatDate } from '@transferwise/formatting';
 import { PureComponent } from 'react';
-import { injectIntl, type WrappedComponentProps } from 'react-intl';
+import { injectIntl, WrappedComponentProps } from 'react-intl';
 
 import { getDayNames, isWithinRange } from '../../../common/dateUtils';
 import { getFocusableTime } from '../../getFocusableTime/getFocusableTime';
@@ -64,9 +64,6 @@ class DayCalendarTable extends PureComponent<DayCalendarTableProps> {
   };
 
   isDisabled = (day: number) => {
-    if (day === -1) {
-      return true;
-    }
     const { min, max, viewMonth, viewYear } = this.props;
     const date = new Date(viewYear, viewMonth, day);
 
@@ -75,7 +72,7 @@ class DayCalendarTable extends PureComponent<DayCalendarTableProps> {
 
   isActive = (day: number) => {
     const { selectedDate, viewMonth, viewYear } = this.props;
-    return !!(selectedDate && Number(new Date(viewYear, viewMonth, day)) === Number(selectedDate));
+    return !!(selectedDate && +new Date(viewYear, viewMonth, day) === +selectedDate);
   };
 
   isToday = (day: number) => {

package/src/i18n/hu.json

@@ -35,7 +35,7 @@
   "neptune.Upload.psProcessingText": "Feltöltés...",
   "neptune.Upload.usButtonText": "Vagy válaszd ki a fájlt",
   "neptune.Upload.usDropMessage": "Húzd ide a fájlokat a feltöltéshez",
-  "neptune.Upload.usPlaceholder": "Húzz ide egy legfeljebb {maxSize} MB méretű fájlt",
+  "neptune.Upload.usPlaceholder": "Húzz ide egy legfeljebb {maxSize}MB méretű fájlt",
   "neptune.UploadButton.allFileTypes": "Összes fájltípus",
   "neptune.UploadButton.dropFiles": "Húzd a fájlokat ide a feltöltéshez",
   "neptune.UploadButton.instructions": "{fileTypes}, legfeljebb {size}MB",

package/src/index.ts

@@ -6,6 +6,7 @@ export type { AvatarProps } from './avatar';
 export type { ActionOptionProps } from './actionOption';
 export type { AlertProps, AlertAction, AlertArrowPosition, AlertType } from './alert';
 export type { BadgeProps } from './badge';
+export type { CarouselProps } from './carousel';
 export type { CircularButtonProps } from './circularButton';
 export type { DecisionProps } from './decision/Decision';
 export type { EmphasisProps } from './emphasis';
@@ -82,6 +83,7 @@ export { default as AvatarWrapper } from './avatarWrapper';
 export { default as Badge } from './badge';
 export { default as BottomSheet } from './common/bottomSheet';
 export { default as Button } from './button';
+export { default as Carousel } from './carousel';
 export { default as Card } from './card';
 export { default as BaseCard } from './common/card';
 export { default as Checkbox } from './checkbox';

package/src/main.css

@@ -643,6 +643,132 @@ div.critical-comms .critical-comms-body {
   border-radius: 16px 16px 0 0;
   border-radius: var(--radius-medium) var(--radius-medium) 0 0;
 }
+.carousel {
+  display: flex;
+  align-items: center;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  gap: 16px;
+  gap: var(--size-16);
+}
+.carousel__header {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  min-height: 32px;
+  min-height: var(--size-32);
+  padding-bottom: 16px;
+  padding-bottom: var(--size-16);
+}
+.carousel__card,
+.carousel__card:hover,
+.carousel__card:focus {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+.carousel__card {
+  position: relative;
+  text-align: left;
+  border: none;
+  overflow: hidden;
+  background: rgba(134,167,189,0.10196);
+  background: var(--color-background-neutral);
+  border-radius: 16px;
+  border-radius: var(--size-16);
+  scroll-snap-align: center;
+  -webkit-scroll-snap-align: center;
+  transition: all 0.4s;
+}
+@media (min-width: 1200px) {
+  .carousel__card {
+    min-width: 280px;
+    width: 280px;
+    height: 280px;
+  }
+}
+@media (max-width: 1199px) {
+  .carousel__card {
+    min-width: 242px;
+    width: 242px;
+    height: 242px;
+  }
+}
+@media (max-width: 767px) {
+  .carousel__card {
+    min-width: 336px;
+    width: 336px;
+    height: 336px;
+    scroll-snap-stop: always;
+  }
+}
+.carousel__card:focus {
+  outline: 0;
+}
+.carousel__card:focus:after {
+  content: '';
+  position: absolute;
+  z-index: 4;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 16px;
+  border-radius: var(--size-16);
+  box-shadow: inset 0 0 0 2px var(--ring-outline-color);
+}
+.carousel__card:hover {
+  background-color: var(--color-background-neutral-hover);
+}
+.carousel__card:focus {
+  background-color: var(--color-background-neutral-hover);
+}
+.carousel__card-content {
+  height: 100%;
+  font-weight: normal;
+}
+.carousel__scroll-button {
+  width: 32px;
+  width: var(--size-32);
+  height: 32px;
+  height: var(--size-32);
+  align-items: center;
+  justify-content: center;
+}
+.carousel__indicators {
+  display: flex;
+  justify-content: center;
+  padding-top: 8px;
+  padding-top: var(--size-8);
+  gap: 8px;
+  gap: var(--size-8);
+}
+.carousel__indicator {
+  width: 12px;
+  width: var(--size-12);
+  height: 12px;
+  height: var(--size-12);
+  border-radius: 8px;
+  border-radius: var(--size-8);
+  background: #c9cbce;
+  background: var(--color-interactive-secondary);
+  border: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  transition: all 0.1s;
+}
+.carousel__indicator:hover {
+  width: 16px;
+  width: var(--size-16);
+}
+.carousel__indicator--selected,
+.carousel__indicator--selected:hover {
+  background: var(--color-interactive-primary);
+  width: 24px;
+  width: var(--size-24);
+}
 .np-checkbox-button input[type="checkbox"] {
   position: absolute;
   width: 24px;

package/src/main.less

@@ -5,6 +5,7 @@
 @import "./badge/Badge.less";
 @import "./button/Button.less";
 @import "./card/Card.less";
+@import "./carousel/Carousel.less";
 @import "./checkboxButton/CheckboxButton.less";
 @import "./chips/Chip.less";
 @import "./circularButton/CircularButton.less";

package/build/types/common/dateUtils/getDateView/getDateView.d.ts

@@ -1,2 +0,0 @@
-export declare const returnDateView: (selectedDate: Date | null, min: Date | null, max: Date | null) => Date;
-//# sourceMappingURL=getDateView.d.ts.map

package/build/types/common/dateUtils/getDateView/getDateView.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"getDateView.d.ts","sourceRoot":"","sources":["../../../../../src/common/dateUtils/getDateView/getDateView.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,iBAAkB,IAAI,GAAG,IAAI,OAAO,IAAI,GAAG,IAAI,OAAO,IAAI,GAAG,IAAI,SAE3F,CAAC"}

package/src/common/dateUtils/getDateView/getDateView.ts

@@ -1,5 +0,0 @@
-import { moveToWithinRange } from '../moveToWithinRange/moveToWithinRange';
-
-export const returnDateView = (selectedDate: Date | null, min: Date | null, max: Date | null) => {
-  return selectedDate || ((min || max) && moveToWithinRange(new Date(), min, max)) || new Date();
-};