From 727adb267420572a6301174510bc1e804e3b9728 Mon Sep 17 00:00:00 2001 From: Gustav Hansen Date: Mon, 29 Aug 2022 11:24:29 +0200 Subject: [PATCH 1/5] DatePicker: Allow to pass in a locale --- .../strapi-design-system/src/DatePicker/DatePicker.js | 10 +++++++--- .../src/DatePicker/utils/formatDate.js | 4 ++-- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/strapi-design-system/src/DatePicker/DatePicker.js b/packages/strapi-design-system/src/DatePicker/DatePicker.js index e215d617e..33f618e66 100644 --- a/packages/strapi-design-system/src/DatePicker/DatePicker.js +++ b/packages/strapi-design-system/src/DatePicker/DatePicker.js @@ -1,4 +1,4 @@ -import React, { useRef, useState } from 'react'; +import React, { useRef, useState, useMemo } from 'react'; import PropTypes from 'prop-types'; import CalendarIcon from '@strapi/icons/Calendar'; import Cross from '@strapi/icons/Cross'; @@ -8,6 +8,7 @@ import { DatePickerButton, DatePickerWrapper, IconBox } from './components'; import { DatePickerCalendar } from './DatePickerCalendar'; import { formatDate } from './utils/formatDate'; import { useId } from '../helpers/useId'; +import { getDefaultLocale } from '../helpers/getDefaultLocale'; export const DatePicker = ({ ariaLabel, @@ -15,6 +16,7 @@ export const DatePicker = ({ selectedDate, onChange, label, + locale: defaultLocale, selectedDateLabel, onClear, clearLabel, @@ -26,7 +28,8 @@ export const DatePicker = ({ const [visible, setVisible] = useState(false); const inputRef = useRef(null); const datePickerButtonRef = useRef(null); - const formattedDate = selectedDate ? formatDate(selectedDate) : ''; + const locale = useMemo(() => defaultLocale || getDefaultLocale(), [locale]); + const formattedDate = selectedDate ? formatDate(selectedDate, locale) : ''; const toggleVisibility = () => { if (disabled) return; @@ -61,7 +64,7 @@ export const DatePicker = ({ @@ -117,6 +120,7 @@ DatePicker.propTypes = { id: PropTypes.string, initialDate: PropTypes.instanceOf(Date), label: PropTypes.string, + locale: PropTypes.string, maxDate: PropTypes.instanceOf(Date), minDate: PropTypes.instanceOf(Date), onChange: PropTypes.func.isRequired, diff --git a/packages/strapi-design-system/src/DatePicker/utils/formatDate.js b/packages/strapi-design-system/src/DatePicker/utils/formatDate.js index 483419328..1a6149748 100644 --- a/packages/strapi-design-system/src/DatePicker/utils/formatDate.js +++ b/packages/strapi-design-system/src/DatePicker/utils/formatDate.js @@ -1,5 +1,5 @@ -export const formatDate = (date) => { - const langFormatter = new Intl.DateTimeFormat(); +export const formatDate = (date, locale) => { + const langFormatter = new Intl.DateTimeFormat(locale); return langFormatter.format(date); }; From 60bef07385717b04757283ca9ff9a51fa5203359 Mon Sep 17 00:00:00 2001 From: Josh <37798644+joshuaellis@users.noreply.github.com> Date: Mon, 26 Sep 2022 09:42:02 +0100 Subject: [PATCH 2/5] refactor: remove useMemo --- packages/strapi-design-system/src/DatePicker/DatePicker.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/strapi-design-system/src/DatePicker/DatePicker.js b/packages/strapi-design-system/src/DatePicker/DatePicker.js index 33f618e66..d621ee754 100644 --- a/packages/strapi-design-system/src/DatePicker/DatePicker.js +++ b/packages/strapi-design-system/src/DatePicker/DatePicker.js @@ -1,4 +1,4 @@ -import React, { useRef, useState, useMemo } from 'react'; +import React, { useRef, useState } from 'react'; import PropTypes from 'prop-types'; import CalendarIcon from '@strapi/icons/Calendar'; import Cross from '@strapi/icons/Cross'; @@ -28,7 +28,7 @@ export const DatePicker = ({ const [visible, setVisible] = useState(false); const inputRef = useRef(null); const datePickerButtonRef = useRef(null); - const locale = useMemo(() => defaultLocale || getDefaultLocale(), [locale]); + const locale = defaultLocale || getDefaultLocale(); const formattedDate = selectedDate ? formatDate(selectedDate, locale) : ''; const toggleVisibility = () => { From b4e79bf23178a89f0701a506f4408bb8c383ee92 Mon Sep 17 00:00:00 2001 From: Josh <37798644+joshuaellis@users.noreply.github.com> Date: Mon, 26 Sep 2022 10:30:55 +0100 Subject: [PATCH 3/5] test: add tests to DatePicker around locale prop --- .../src/DatePicker/DatePicker.stories.mdx | 25 ++++++++++++ .../DatePicker/__tests__/DatePicker.spec.js | 39 +++++++++++++++++++ 2 files changed, 64 insertions(+) create mode 100644 packages/strapi-design-system/src/DatePicker/__tests__/DatePicker.spec.js diff --git a/packages/strapi-design-system/src/DatePicker/DatePicker.stories.mdx b/packages/strapi-design-system/src/DatePicker/DatePicker.stories.mdx index 8d87af0c1..b77429d26 100644 --- a/packages/strapi-design-system/src/DatePicker/DatePicker.stories.mdx +++ b/packages/strapi-design-system/src/DatePicker/DatePicker.stories.mdx @@ -142,6 +142,31 @@ By passing in `minDate` or `maxDate` it is possible to define the range of years +## Locales + + + + {() => { + const [date, setDate] = useState(); + return ( + setDate(undefined)} + placeholder="03/01/1970" + locale="de" + selectedDateLabel={(formattedDate) => `Date picker, current is ${formattedDate}`} + minDate={new Date(2000, 1, 1)} + maxDate={new Date(2040, 1, 1)} + /> + ); + }} + + + ## Props diff --git a/packages/strapi-design-system/src/DatePicker/__tests__/DatePicker.spec.js b/packages/strapi-design-system/src/DatePicker/__tests__/DatePicker.spec.js new file mode 100644 index 000000000..ad7016b65 --- /dev/null +++ b/packages/strapi-design-system/src/DatePicker/__tests__/DatePicker.spec.js @@ -0,0 +1,39 @@ +import * as React from 'react'; +import { render, screen } from '@testing-library/react'; + +import { DatePicker } from '../DatePicker'; + +import { lightTheme } from '../../themes'; +import { ThemeProvider } from '../../ThemeProvider'; + +describe('DatePicker', () => { + describe('Locale prop', () => { + const renderDate = (locale) => + render( + + `Date picker, current is ${formattedDate}`} + selectedDate={new Date('Tue Sep 06 2022 00:00:00 GMT+0100 (British Summer Time)')} + /> + , + ); + + it('should format by EN locale by default', () => { + renderDate(); + + const input = screen.getByRole('textbox'); + + expect(input.value).toMatchInlineSnapshot('"9/6/2022"'); + }); + + it('should format by the DE locale when passed', () => { + renderDate('de-DE'); + + const input = screen.getByRole('textbox'); + + expect(input.value).toMatchInlineSnapshot('"6.9.2022"'); + }); + }); +}); From e6ca4c276c07f7a232f5f8c49c09358be6fa9449 Mon Sep 17 00:00:00 2001 From: Josh <37798644+joshuaellis@users.noreply.github.com> Date: Mon, 26 Sep 2022 10:55:21 +0100 Subject: [PATCH 4/5] Update storyshots.spec.js.snap --- .../__snapshots__/storyshots.spec.js.snap | 702 ++++++++++++------ 1 file changed, 473 insertions(+), 229 deletions(-) diff --git a/packages/strapi-design-system/tests/__snapshots__/storyshots.spec.js.snap b/packages/strapi-design-system/tests/__snapshots__/storyshots.spec.js.snap index 99d49b564..3d4cd1f9d 100644 --- a/packages/strapi-design-system/tests/__snapshots__/storyshots.spec.js.snap +++ b/packages/strapi-design-system/tests/__snapshots__/storyshots.spec.js.snap @@ -13073,7 +13073,7 @@ exports[`Storyshots Design System/Components/DatePicker disabled 1`] = ` `; -exports[`Storyshots Design System/Components/DatePicker min/ max date 1`] = ` +exports[`Storyshots Design System/Components/DatePicker locales 1`] = ` .c1 { border: 0; -webkit-clip: rect(0 0 0 0); @@ -13317,6 +13317,250 @@ exports[`Storyshots Design System/Components/DatePicker min/ max date 1`] = ` `; +exports[`Storyshots Design System/Components/DatePicker min/ max date 1`] = ` +.c1 { + border: 0; + -webkit-clip: rect(0 0 0 0); + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +.c0 { + background: #ffffff; + padding: 8px; +} + +.c2 { + padding: 8px; + height: 100%; +} + +.c9 { + padding-right: 8px; + padding-left: 12px; +} + +.c5 { + font-weight: 600; + color: #32324d; + font-size: 0.75rem; + line-height: 1.33; +} + +.c3 { + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c6 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} + +.c7 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c4 > * { + margin-top: 0; + margin-bottom: 0; +} + +.c4 > * + * { + margin-top: 4px; +} + +.c11 { + border: none; + border-radius: 4px; + padding-bottom: 0.65625rem; + padding-left: 0; + padding-right: 16px; + padding-top: 0.65625rem; + color: #32324d; + font-weight: 400; + font-size: 0.875rem; + display: block; + width: 100%; + background: inherit; +} + +.c11::-webkit-input-placeholder { + color: #8e8ea9; + opacity: 1; +} + +.c11::-moz-placeholder { + color: #8e8ea9; + opacity: 1; +} + +.c11:-ms-input-placeholder { + color: #8e8ea9; + opacity: 1; +} + +.c11::placeholder { + color: #8e8ea9; + opacity: 1; +} + +.c11[aria-disabled='true'] { + color: inherit; +} + +.c11:focus { + outline: none; + box-shadow: none; +} + +.c8 { + border: 1px solid #dcdce4; + border-radius: 4px; + background: #ffffff; + outline: none; + box-shadow: 0; + -webkit-transition-property: border-color,box-shadow,fill; + transition-property: border-color,box-shadow,fill; + -webkit-transition-duration: 0.2s; + transition-duration: 0.2s; +} + +.c8:focus-within { + border: 1px solid #4945ff; + box-shadow: #4945ff 0px 0px 0px 2px; +} + +.c10 { + border: none; + background: transparent; + border-radius: 4px; +} + +.c10 svg path { + fill: #8e8ea9; +} + +
+
+
+

+ Storybook story +

+
+
+
+
+
+
+ +
+
+ +
+ +
+
+
+
+
+
+
+
+`; + exports[`Storyshots Design System/Components/DatePicker size S 1`] = ` .c1 { border: 0; @@ -13511,7 +13755,7 @@ exports[`Storyshots Design System/Components/DatePicker size S 1`] = ` >