From 36351df262c74e163d4e64806baf59f53b2773b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Tue, 2 May 2023 14:02:47 +0200 Subject: [PATCH] Add file extension to react-dates import (#2079) --- .changeset/odd-ducks-jog.md | 5 +++++ .storybook/components/Statuses.tsx | 8 ++++---- packages/circuit-ui/components/Calendar/RangePicker.tsx | 2 +- .../components/Calendar/RangePickerController.tsx | 2 +- .../circuit-ui/components/Calendar/SingleDayPicker.tsx | 2 +- .../circuit-ui/components/CalendarTag/CalendarTag.tsx | 3 +-- .../components/CalendarTagTwoStep/CalendarTagTwoStep.tsx | 4 +--- 7 files changed, 14 insertions(+), 12 deletions(-) create mode 100644 .changeset/odd-ducks-jog.md diff --git a/.changeset/odd-ducks-jog.md b/.changeset/odd-ducks-jog.md new file mode 100644 index 0000000000..01978f3648 --- /dev/null +++ b/.changeset/odd-ducks-jog.md @@ -0,0 +1,5 @@ +--- +'@sumup/circuit-ui': patch +--- + +Added file extensions to imports from `react-dates`. diff --git a/.storybook/components/Statuses.tsx b/.storybook/components/Statuses.tsx index 3cb07af623..fc744034ff 100644 --- a/.storybook/components/Statuses.tsx +++ b/.storybook/components/Statuses.tsx @@ -31,10 +31,10 @@ const descriptionStyles = css` `; const variants = { - stable: { variant: 'confirm', label: 'Stable' }, - deprecated: { variant: 'alert', label: 'Deprecated' }, - inReview: { variant: 'notify', label: 'In Review' }, - experimental: { variant: 'notify', label: 'Experimental' }, + stable: { variant: 'success', label: 'Stable' }, + deprecated: { variant: 'danger', label: 'Deprecated' }, + inReview: { variant: 'warning', label: 'In Review' }, + experimental: { variant: 'warning', label: 'Experimental' }, } as const; const Status = ({ variant: status = 'stable', children }: StatusProps) => { diff --git a/packages/circuit-ui/components/Calendar/RangePicker.tsx b/packages/circuit-ui/components/Calendar/RangePicker.tsx index b993830f5a..036504bdc8 100644 --- a/packages/circuit-ui/components/Calendar/RangePicker.tsx +++ b/packages/circuit-ui/components/Calendar/RangePicker.tsx @@ -17,7 +17,7 @@ import { css } from '@emotion/react'; import { ArrowRight, ArrowLeft, Close } from '@sumup/icons'; import { DateRangePicker } from 'react-dates'; import type { DateRangePickerShape } from 'react-dates'; -import 'react-dates/initialize'; +import 'react-dates/initialize.js'; import styled from '../../styles/styled.js'; diff --git a/packages/circuit-ui/components/Calendar/RangePickerController.tsx b/packages/circuit-ui/components/Calendar/RangePickerController.tsx index f8d52f10c4..2cb4f86f48 100644 --- a/packages/circuit-ui/components/Calendar/RangePickerController.tsx +++ b/packages/circuit-ui/components/Calendar/RangePickerController.tsx @@ -16,7 +16,7 @@ import { ArrowRight, ArrowLeft } from '@sumup/icons'; import { DayPickerRangeController } from 'react-dates'; import type { DayPickerRangeControllerShape } from 'react-dates'; -import 'react-dates/initialize'; +import 'react-dates/initialize.js'; import { CalendarWrapper } from './components/index.js'; diff --git a/packages/circuit-ui/components/Calendar/SingleDayPicker.tsx b/packages/circuit-ui/components/Calendar/SingleDayPicker.tsx index 28e9ff7102..17cbeef8ab 100644 --- a/packages/circuit-ui/components/Calendar/SingleDayPicker.tsx +++ b/packages/circuit-ui/components/Calendar/SingleDayPicker.tsx @@ -16,7 +16,7 @@ import { ArrowRight, ArrowLeft, Close } from '@sumup/icons'; import { SingleDatePicker } from 'react-dates'; import type { SingleDatePickerShape } from 'react-dates'; -import 'react-dates/initialize'; +import 'react-dates/initialize.js'; import styled from '../../styles/styled.js'; diff --git a/packages/circuit-ui/components/CalendarTag/CalendarTag.tsx b/packages/circuit-ui/components/CalendarTag/CalendarTag.tsx index 2cc8328d03..1f2bd4ac5c 100644 --- a/packages/circuit-ui/components/CalendarTag/CalendarTag.tsx +++ b/packages/circuit-ui/components/CalendarTag/CalendarTag.tsx @@ -20,6 +20,7 @@ import type { ClickEvent } from '../../types/events.js'; import styled from '../../styles/styled.js'; import { RangePickerController } from '../Calendar/index.js'; import Tag from '../Tag/index.js'; +import { START_DATE } from '../Calendar/constants.js'; export interface CalendarTagProps { /** @@ -43,8 +44,6 @@ type DateRange = { }; type FocusedInput = 'startDate' | 'endDate' | null; -const START_DATE = 'startDate'; - const CalendarWrap = styled.div` margin-top: ${({ theme }) => theme.spacings.byte}; `; diff --git a/packages/circuit-ui/components/CalendarTagTwoStep/CalendarTagTwoStep.tsx b/packages/circuit-ui/components/CalendarTagTwoStep/CalendarTagTwoStep.tsx index cd61ca1330..37a7f9ee66 100644 --- a/packages/circuit-ui/components/CalendarTagTwoStep/CalendarTagTwoStep.tsx +++ b/packages/circuit-ui/components/CalendarTagTwoStep/CalendarTagTwoStep.tsx @@ -22,6 +22,7 @@ import styled from '../../styles/styled.js'; import { RangePickerController } from '../Calendar/index.js'; import Tag from '../Tag/index.js'; import ButtonGroup from '../ButtonGroup/index.js'; +import { END_DATE, START_DATE } from '../Calendar/constants.js'; export interface CalendarTagTwoStepProps { /** @@ -54,9 +55,6 @@ type DateRange = { }; type FocusedInput = 'startDate' | 'endDate' | null; -const START_DATE = 'startDate'; -const END_DATE = 'endDate'; - const buttonGroupStyles = () => css` /* based on react dates */ padding: 0 23px 18px 0;