Merge branch 'main' into 10273-breadcrumb-tests

.eslintignore

@@ -37,6 +37,7 @@ packages/components/src/globals/scss/vendor/**
 
 # Upgrade
 **/__testfixtures__/**
+packages/upgrade/cli.js
 
 # React
 **/storybook-static/**

.github/workflows/dco.yml

@@ -11,7 +11,7 @@ jobs:
     steps:
       - name: "DCO Assistant"
         if: (github.event.comment.body == 'recheck' || github.event.comment.body == 'I have read the DCO document and I hereby sign the DCO.') || github.event_name == 'pull_request_target'
-        uses: cla-assistant/[email protected].2-beta
+        uses: cla-assistant/[email protected].3-beta
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           PERSONAL_ACCESS_TOKEN: ${{ secrets.PERSONAL_ACCESS_TOKEN }}

.github/workflows/release.yml

@@ -11,7 +11,7 @@ jobs:
     name: Create Release
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v2
 
       - name: Use Node.js 16.x
         uses: actions/[email protected]

.github/workflows/sync-generated-files.yml

@@ -7,7 +7,7 @@ jobs:
   release:
     runs-on: macOS-latest
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v2
       - name: Use Node.js 16.x
         uses: actions/[email protected]
         with:

.prettierignore

@@ -58,3 +58,6 @@ packages/icons-react/next/**
 
 # Nextjs
 .next
+
+# Upgrade
+packages/upgrade/cli.js

config/jest-config-carbon/index.js

@@ -20,7 +20,7 @@ module.exports = {
     '<rootDir>/**/*-(spec|test).js?(x)',
   ],
   transform: {
-    '^.+\\.(js|jsx)$': require.resolve('./transform/jsTransform.js'),
+    '^.+\\.(mjs|cjs|js|jsx)$': require.resolve('./transform/jsTransform.js'),
     '^.+\\.s?css$': require.resolve('./transform/cssTransform.js'),
     '^(?!.*\\.(js|jsx|css|json)$)': require.resolve(
       './transform/fileTransform.js'

packages/react/src/components/DatePicker/index.js

@@ -5,5 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import * as FeatureFlags from '@carbon/feature-flags';
+import { default as DatePickerNext } from './next/DatePicker';
+import { default as DatePickerClassic } from './DatePicker';
+
+const DatePicker = FeatureFlags.enabled('enable-v11-release')
+  ? DatePickerNext
+  : DatePickerClassic;
+
+export default DatePicker;
 export { default as DatePickerSkeleton } from './DatePicker.Skeleton';
-export default from './DatePicker';

packages/react/src/components/DatePicker/next/DatePicker-test.js

@@ -0,0 +1,228 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import DatePicker from './DatePicker';
+import { mount } from 'enzyme';
+import DatePickerInput from '../../DatePickerInput/next/DatePickerInput';
+
+const prefix = 'bx';
+
+function getFlatpickrCalendar() {
+  return document.querySelector(`.${prefix}--date-picker__calendar`);
+}
+
+describe('DatePicker', () => {
+  describe('Renders as expected', () => {
+    let wrapper;
+    let datepicker;
+
+    beforeEach(() => {
+      wrapper = mount(
+        <DatePicker
+          onChange={() => {}}
+          className="extra-class"
+          dateFormat="m/d/Y">
+          <DatePickerInput
+            id="date-picker-input-id-start"
+            placeholder="mm/dd/yyyy"
+            labelText="Start date"
+          />
+          <DatePickerInput
+            id="date-picker-input-id-finish"
+            placeholder="mm/dd/yyyy"
+            labelText="End date"
+          />
+        </DatePicker>
+      );
+      datepicker = wrapper.childAt(0);
+    });
+
+    it('should add extra classes that are passed via className', () => {
+      expect(datepicker.hasClass('extra-class')).toBe(true);
+    });
+
+    it('should add the date picker type as expected', () => {
+      expect(wrapper.props().datePickerType).toEqual(undefined);
+      wrapper.setProps({ datePickerType: 'simple' });
+      expect(wrapper.props().datePickerType).toEqual('simple');
+    });
+
+    it('should add the date format as expected', () => {
+      expect(wrapper.props().dateFormat).toEqual('m/d/Y');
+      wrapper.setProps({ dateFormat: 'd/m/Y' });
+      expect(wrapper.props().dateFormat).toEqual('d/m/Y');
+    });
+
+    it('has the value as expected', () => {
+      expect(wrapper.props().value).toEqual(undefined);
+      wrapper.setProps({ value: '11/08/2017' });
+      expect(wrapper.props().value).toEqual('11/08/2017');
+    });
+
+    it('should render the children as expected', () => {
+      expect(wrapper.props().children.length).toEqual(2);
+    });
+  });
+
+  describe('Simple date picker', () => {
+    let wrapper;
+
+    beforeEach(() => {
+      wrapper = mount(
+        <DatePicker datePickerType="simple" className="extra-class">
+          <DatePickerInput
+            placeholder="mm/dd/yyyy"
+            labelText="Date Picker label"
+            id="date-picker-single"
+          />
+        </DatePicker>
+      );
+    });
+
+    it('has the value as expected', () => {
+      expect(wrapper.props().value).toEqual(undefined);
+      wrapper.setProps({ value: '11/08/2017' });
+      expect(wrapper.props().value).toEqual('11/08/2017');
+    });
+
+    it('should not initialize a calendar', () => {
+      expect(getFlatpickrCalendar()).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Single date picker', () => {
+    let wrapper;
+    beforeEach(() => {
+      wrapper = mount(
+        <DatePicker
+          onChange={() => {}}
+          datePickerType="single"
+          className="extra-class">
+          <DatePickerInput
+            placeholder="mm/dd/yyyy"
+            labelText="Date Picker label"
+            id="date-picker-single"
+          />
+        </DatePicker>
+      );
+    });
+
+    it('should initialize a calendar', () => {
+      expect(getFlatpickrCalendar()).toBeInTheDocument();
+    });
+
+    it('should update the classnames', () => {
+      expect(
+        getFlatpickrCalendar().classList.contains(
+          `${prefix}--date-picker__calendar`
+        )
+      ).toBe(true);
+    });
+
+    it('has the value as expected', () => {
+      expect(wrapper.props().value).toEqual(undefined);
+      wrapper.setProps({ value: '11/08/2017' });
+      expect(wrapper.props().value).toEqual('11/08/2017');
+    });
+  });
+
+  describe('Date picker with locale', () => {
+    let wrapper;
+    let wrapperNoLocale;
+    beforeEach(() => {
+      wrapper = mount(
+        <DatePicker
+          onChange={() => {}}
+          datePickerType="range"
+          className="extra-class"
+          locale="es">
+          <DatePickerInput
+            id="date-picker-input-id-start"
+            placeholder="mm/dd/yyyy"
+            labelText="Start date"
+          />
+          <DatePickerInput
+            id="date-picker-input-id-finish"
+            placeholder="mm/dd/yyyy"
+            labelText="End date"
+          />
+        </DatePicker>
+      );
+
+      wrapperNoLocale = mount(
+        <DatePicker
+          onChange={() => {}}
+          datePickerType="range"
+          className="extra-class">
+          <DatePickerInput
+            id="date-picker-input-id-start"
+            placeholder="mm/dd/yyyy"
+            labelText="Start date"
+          />
+          <DatePickerInput
+            id="date-picker-input-id-finish"
+            placeholder="mm/dd/yyyy"
+            labelText="End date"
+          />
+        </DatePicker>
+      );
+    });
+
+    it('has the range date picker locale', () => {
+      const datepicker = wrapper.find('DatePicker');
+      expect(datepicker.props().locale).toBe('es');
+    });
+
+    it('has the range date picker without locale defined', () => {
+      const datepicker = wrapperNoLocale.find('DatePicker');
+      expect(datepicker.props().locale).toBe(undefined);
+    });
+  });
+
+  describe('Date picker with minDate and maxDate', () => {
+    let mockConsoleError;
+    let wrapper;
+
+    beforeEach(() => {
+      mockConsoleError = jest.spyOn(console, 'error');
+      wrapper = mount(
+        <DatePicker
+          onChange={() => {}}
+          datePickerType="range"
+          className="extra-class"
+          minDate="01/01/2018"
+          maxDate="01/30/2018">
+          <DatePickerInput
+            id="date-picker-input-id-start"
+            placeholder="mm/dd/yyyy"
+            labelText="Start date"
+          />
+          <DatePickerInput
+            id="date-picker-input-id-finish"
+            placeholder="mm/dd/yyyy"
+            labelText="End date"
+          />
+        </DatePicker>
+      );
+    });
+
+    afterEach(() => {
+      mockConsoleError.mockRestore();
+    });
+
+    it('has the range date picker with min and max dates', () => {
+      const datepicker = wrapper.find('DatePicker');
+      expect(datepicker.props().minDate).toBe('01/01/2018');
+      expect(datepicker.props().maxDate).toBe('01/30/2018');
+    });
+
+    it('should not have "console.error" being created', () => {
+      expect(mockConsoleError).not.toHaveBeenCalled();
+    });
+  });
+});