@strapi/design-system 1.3.0-beta.1 → 1.3.0-beta.3

package/src/DateTimePicker/DateTimePickerProps.js

@@ -1,85 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-export const DateTimePickerProps = (props) => <div {...props} />;
-
-export const dateTimePickerDefaultProps = {
-  ariaLabel: undefined,
-  clearLabel: 'clear',
-  disabled: false,
-  error: undefined,
-  hint: undefined,
-  label: undefined,
-  labelAction: undefined,
-  onClear: undefined,
-  required: false,
-  selectButtonTitle: 'select',
-  size: 'M',
-  step: 1,
-  value: undefined,
-};
-export const dateTimePickerPropTypes = {
-  /**
-   * Aria Label used by the DatePicker and the TimePicker inside the DateTimePicker component
-   */
-  ariaLabel: PropTypes.string,
-  /**
-   * Clear label used to define the `aria-label` of the clear buttons.
-   */
-  clearLabel: PropTypes.string,
-  /**
-   * Disabled attribute
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Error is the message shown under the DateTimePicker when something goes wrong.
-   */
-  error: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  /**
-   * This text is used to describe the DateTimePicker component.
-   */
-  hint: PropTypes.string,
-  /**
-   * Label used to describe the DateTimePicker component
-   */
-  label: PropTypes.string,
-  /**
-   * Label Action
-   */
-  labelAction: PropTypes.element,
-  /**
-   * Name, required
-   */
-  name: PropTypes.string.isRequired,
-  /**
-   * onChange function, passed from a parent component, it takes the actual date value and it is used inside the different handlers related to the change event for the DatePicker and the TimePicker and also the clear event for the TimePicker
-   */
-  onChange: PropTypes.func.isRequired,
-  /**
-   * onClear function
-   */
-  onClear: PropTypes.func,
-  /**
-   * Required field boolean
-   */
-  required: PropTypes.bool,
-  /**
-   * Text used to define the title of the button to open the select options (inside the TimePicker)
-   */
-  selectButtonTitle: PropTypes.string,
-  /**
-   * Size of the Field (possible values S and M)
-   */
-  size: PropTypes.oneOf(['S', 'M']),
-  /**
-   * Step value used inside the TimePicker to show the different options for it
-   */
-  step: PropTypes.number,
-  /**
-   * Value. The Date passed as value
-   */
-  value: PropTypes.instanceOf(Date),
-};
-
-DateTimePickerProps.defaultProps = dateTimePickerDefaultProps;
-DateTimePickerProps.propTypes = dateTimePickerPropTypes;

package/src/DateTimePicker/__tests__/DateTimePicker.e2e.js

@@ -1,103 +0,0 @@
-const { test, expect } = require('@playwright/test');
-
-test.describe.parallel('DateTimePicker', () => {
-  test.describe('without initial data', () => {
-    test.beforeEach(async ({ page }) => {
-      // This is the URL of the Storybook Iframe
-      await page.goto('/iframe.html?id=design-system-components-datetimepicker--base&viewMode=story');
-    });
-    test('change the date and see if also the time will be changed when both are empty', async ({
-      page,
-      browserName,
-    }) => {
-      test.skip(browserName === 'webkit', 'Still working on it');
-      await page.click('[aria-labelledby^="datetime-label"] > div > div:nth-child(2) > div > div');
-      await page.click('tr[aria-rowindex="4"] td[aria-colindex="4"]');
-      // check if the time is selected with 00:00
-      const timePickerValue = page.locator('button[data-testid="datetimepicker-time"] + div span');
-      expect(await timePickerValue.innerText()).toBe('00:00');
-    });
-    test('change the time and see if also the date will be changed when both are empty', async ({
-      page,
-      browserName,
-    }) => {
-      test.skip(browserName === 'webkit', 'Still working on it');
-      await page.click('button[data-testid="datetimepicker-time"]');
-      await page.click('div[data-react-portal="true"] li[data-strapi-value="00:03"]');
-      // check if the date is selected with the current date
-      const today = new Date().toLocaleDateString('en-US');
-      const datePickerValue = page.locator('[name="datetimepicker"]');
-      expect(await datePickerValue.inputValue()).toBe(today);
-    });
-  });
-  test.describe('with initial data', () => {
-    test.beforeEach(async ({ page }) => {
-      // This is the URL of the Storybook Iframe
-      await page.goto('/iframe.html?id=design-system-components-datetimepicker--initial-data&viewMode=story');
-    });
-    test('change the date and see if also the time will be changed when are both already initialized', async ({
-      page,
-      browserName,
-    }) => {
-      test.skip(browserName === 'webkit', 'Still working on it');
-      const timePickerInitialValue = await page
-        .locator('button[data-testid="datetimepicker-time"] + div span')
-        .innerText();
-      await page.click('[aria-labelledby^="datetime-label"] > div > div:nth-child(2) > div > div');
-      await page.click('tr[aria-rowindex="4"] td[aria-colindex="4"]');
-      // check if the time is selected with 12:00
-      const timePickerValue = page.locator('button[data-testid="datetimepicker-time"] + div span');
-      expect(await timePickerValue.innerText()).toBe(timePickerInitialValue);
-    });
-
-    test('change the time and see if also the date will be changed when are both already initialized', async ({
-      page,
-      browserName,
-    }) => {
-      test.skip(browserName === 'webkit', 'Still working on it');
-      await page.click('button[data-testid="datetimepicker-time"]');
-      await page.click('div[data-react-portal="true"] li[data-strapi-value="08:03"]');
-      const datePickerValue = page.locator('[name="datetimepicker"]');
-      expect(await datePickerValue.inputValue()).toBe('10/13/2021');
-    });
-
-    test('clear the date and see if also the time will be cleared when are both already initialized', async ({
-      page,
-      browserName,
-    }) => {
-      test.skip(browserName === 'webkit', 'Still working on it');
-      await page.focus('[aria-labelledby^="datetime-label"] > div > div:nth-child(2) > div');
-
-      await page.keyboard.press('Tab');
-      await page.keyboard.press('Tab');
-      await page.keyboard.press('Tab');
-      await page.keyboard.press('Enter');
-      const datePickerValue = page.locator('[name="datetimepicker"]');
-      expect(await datePickerValue.inputValue()).toBe('');
-      const timePickerValue = page.locator(
-        '[aria-labelledby^="datetime-label"] > div > div:nth-child(2) > div:nth-child(2) > div > div > div:nth-child(2) span',
-      );
-      expect(await timePickerValue.innerText()).toBe('--:--');
-    });
-    test('clear the time and see if the date remains the same when are both already initialized', async ({
-      page,
-      browserName,
-    }) => {
-      test.skip(browserName === 'webkit', 'Still working on it');
-      await page.focus('[aria-labelledby^="datetime-label"] > div > div:nth-child(2) > div');
-
-      await page.keyboard.press('Tab');
-      await page.keyboard.press('Tab');
-      await page.keyboard.press('Tab');
-      await page.keyboard.press('Tab');
-      await page.keyboard.press('Tab');
-      await page.keyboard.press('Enter');
-      const datePickerValue = page.locator('[name="datetimepicker"]');
-      expect(await datePickerValue.inputValue()).toBe('10/13/2021');
-      const timePickerValue = page.locator(
-        '[aria-labelledby^="datetime-label"] > div > div:nth-child(2) > div:nth-child(2) > div > div > div:nth-child(2) span',
-      );
-      expect(await timePickerValue.innerText()).toBe('00:00');
-    });
-  });
-});

package/src/DateTimePicker/__tests__/DateTimePicker.spec.js

@@ -1,89 +0,0 @@
-import * as React from 'react';
-import { render, screen } from '@testing-library/react';
-import { DateTimePicker } from '../DateTimePicker';
-import { ThemeProvider } from '../../ThemeProvider';
-import { lightTheme } from '../../themes';
-
-const setupComponent = (props) => (
-  <ThemeProvider theme={lightTheme}>
-    <DateTimePicker {...props} />
-  </ThemeProvider>
-);
-
-const sharedProps = {
-  onChange: () => {},
-  name: 'datetimepicker',
-  label: 'Date time picker',
-  hint: 'This is a super description',
-};
-
-const snapshotProps = {
-  value: new Date('2021-10-13T10:00:00.000Z'),
-  ...sharedProps,
-};
-
-const initializationProps = {
-  value: new Date('2021-10-13T15:45:00.000Z'),
-  step: 15,
-  ...sharedProps,
-};
-
-const withNewValueInitialProps = {
-  value: new Date('2021-10-13T13:43:00.000Z'),
-  step: 15,
-  ...sharedProps,
-};
-
-const withNewValueFinalProps = {
-  value: new Date('2021-10-04T13:00:00.000Z'),
-  step: 15,
-  ...sharedProps,
-};
-
-const withEmptyValuesInitialProps = {
-  value: new Date('2021-10-13T15:43:00.000Z'),
-  step: 15,
-  ...sharedProps,
-};
-
-const withEmptyValuesFinalProps = {
-  step: 15,
-  ...sharedProps,
-};
-
-describe('DateTimePicker', () => {
-  it('snapshots the component', () => {
-    const { container } = render(setupComponent(snapshotProps));
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  it('should initialize the two inputs', () => {
-    render(setupComponent(initializationProps));
-
-    expect(screen.getByText('15:45')).toBeInTheDocument();
-    const datepicker = screen.getByTestId('datetimepicker-date');
-
-    expect(datepicker.value).toBe('10/13/2021');
-  });
-
-  it('should rerender a new value passed as props', () => {
-    const { rerender } = render(setupComponent(withNewValueInitialProps));
-
-    rerender(setupComponent(withNewValueFinalProps));
-
-    const datepicker = screen.getByTestId('datetimepicker-date');
-
-    expect(datepicker.value).toBe('10/4/2021');
-  });
-
-  it('should rerender an empty value if it is passed as props', () => {
-    const { rerender } = render(setupComponent(withEmptyValuesInitialProps));
-
-    rerender(setupComponent(withEmptyValuesFinalProps));
-
-    const datepicker = screen.getByTestId('datetimepicker-date');
-
-    expect(datepicker.value).toBe('');
-  });
-});