@atlaskit/eslint-plugin-design-system 10.24.1 → 10.25.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 10.25.0
+
+### Minor Changes
+
+- [#165487](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/165487)
+  [`0e99fc2e1f211`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0e99fc2e1f211) -
+  Add new rule for `@atlaskit/datetime-picker`. Ensures that the calendar button is used when
+  possible to ensure the picker is accessible. Part of AUTOMAT campaign to migrate all AFM instances
+  of date picker and date time picker to use new `shouldShowCalendarButton` prop.
+
 ## 10.24.1
 
 ### Patch Changes

package/README.md

@@ -80,6 +80,7 @@ module.exports = {
 | <a href="./src/rules/no-unsupported-drag-and-drop-libraries/README.md">no-unsupported-drag-and-drop-libraries</a>           | Disallow importing unsupported drag and drop modules.                                                                                                                                                                                                                                                               | Yes         |         |             |
 | <a href="./src/rules/prefer-primitives/README.md">prefer-primitives</a>                                                     | Increase awareness of primitive components via code hints. Strictly used for education purposes and discoverability. To enforce usage please refer to the `use-primitives` rule.                                                                                                                                    |             |         |             |
 | <a href="./src/rules/use-button-group-label/README.md">use-button-group-label</a>                                           | Ensures button groups are described to assistive technology by a direct label or by another element.                                                                                                                                                                                                                | Yes         |         | Yes         |
+| <a href="./src/rules/use-datetime-picker-calendar-button/README.md">use-datetime-picker-calendar-button</a>                 | Encourages makers to use calendar button in Atlassian Design System's date picker and datetime picker components.                                                                                                                                                                                                   | Yes         | Yes     | Yes         |
 | <a href="./src/rules/use-drawer-label/README.md">use-drawer-label</a>                                                       | Encourages to provide accessible name for Atlassian Design System Drawer component.                                                                                                                                                                                                                                 | Yes         |         | Yes         |
 | <a href="./src/rules/use-heading/README.md">use-heading</a>                                                                 | Encourage the usage of heading components.                                                                                                                                                                                                                                                                          |             | Yes     | Yes         |
 | <a href="./src/rules/use-heading-level-in-spotlight-card/README.md">use-heading-level-in-spotlight-card</a>                 | Inform developers of eventual requirement of `headingLevel` prop in `SpotlightCard` component. The heading level should be the appropriate level according to the surrounding context.                                                                                                                              | Yes         | Yes     |             |

package/dist/cjs/ast-nodes/jsx-attribute.js

@@ -52,6 +52,14 @@ var HelperJSXAttribute = exports.JSXAttribute = {
       };
     }
 
+    // handle `css={true}`
+    if ((0, _eslintCodemodUtils.isNodeOfType)(node.value, 'JSXExpressionContainer') && (0, _eslintCodemodUtils.isNodeOfType)(node.value.expression, 'Literal')) {
+      return {
+        type: 'ExpressionStatement Literal',
+        value: node.value.expression.value
+      };
+    }
+
     // handle `css='myStyles'`
     if ((0, _eslintCodemodUtils.isNodeOfType)(node.value, 'Literal') && node.value.value) {
       var _node$value$value;

package/dist/cjs/presets/all-flat.codegen.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::838ffe48cf42aefaa64f561f5a912a5c>>
+ * @codegen <<SignedSource::72c978e91d268fe1463898bd263385bc>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -43,6 +43,7 @@ var _default = exports.default = {
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/prefer-primitives': 'warn',
     '@atlaskit/design-system/use-button-group-label': 'warn',
+    '@atlaskit/design-system/use-datetime-picker-calendar-button': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',
     '@atlaskit/design-system/use-heading': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',

package/dist/cjs/presets/all.codegen.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::d52bbfc25021c62c92de1956f1673f30>>
+ * @codegen <<SignedSource::5bfdac53d9eb0cc8f885ce996861719e>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -42,6 +42,7 @@ var _default = exports.default = {
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/prefer-primitives': 'warn',
     '@atlaskit/design-system/use-button-group-label': 'warn',
+    '@atlaskit/design-system/use-datetime-picker-calendar-button': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',
     '@atlaskit/design-system/use-heading': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',

package/dist/cjs/presets/recommended-flat.codegen.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::a8a9e1542951e74387ce967be430c7f5>>
+ * @codegen <<SignedSource::2c1f5cd2494143a83d590243d7ebf539>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -32,6 +32,7 @@ var _default = exports.default = {
     '@atlaskit/design-system/no-unsafe-style-overrides': 'warn',
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/use-button-group-label': 'warn',
+    '@atlaskit/design-system/use-datetime-picker-calendar-button': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
     '@atlaskit/design-system/use-href-in-link-item': 'warn',

package/dist/cjs/presets/recommended.codegen.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::a5d8dbdad2b84370a6e6889312752a98>>
+ * @codegen <<SignedSource::9aeb2fd0b5bde21f6ef61b407d0d32ab>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -31,6 +31,7 @@ var _default = exports.default = {
     '@atlaskit/design-system/no-unsafe-style-overrides': 'warn',
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/use-button-group-label': 'warn',
+    '@atlaskit/design-system/use-datetime-picker-calendar-button': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
     '@atlaskit/design-system/use-href-in-link-item': 'warn',

package/dist/cjs/rules/index.codegen.js

@@ -36,6 +36,7 @@ var _noUnsafeStyleOverrides = _interopRequireDefault(require("./no-unsafe-style-
 var _noUnsupportedDragAndDropLibraries = _interopRequireDefault(require("./no-unsupported-drag-and-drop-libraries"));
 var _preferPrimitives = _interopRequireDefault(require("./prefer-primitives"));
 var _useButtonGroupLabel = _interopRequireDefault(require("./use-button-group-label"));
+var _useDatetimePickerCalendarButton = _interopRequireDefault(require("./use-datetime-picker-calendar-button"));
 var _useDrawerLabel = _interopRequireDefault(require("./use-drawer-label"));
 var _useHeading = _interopRequireDefault(require("./use-heading"));
 var _useHeadingLevelInSpotlightCard = _interopRequireDefault(require("./use-heading-level-in-spotlight-card"));
@@ -53,7 +54,7 @@ var _useTokensTypography = _interopRequireDefault(require("./use-tokens-typograp
 var _useVisuallyHidden = _interopRequireDefault(require("./use-visually-hidden"));
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::4a19c51d51547e8f4e27f3785242c226>>
+ * @codegen <<SignedSource::50c700a7a1e85949b0e5136a8c576c72>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -89,6 +90,7 @@ var rules = exports.rules = {
   'no-unsupported-drag-and-drop-libraries': _noUnsupportedDragAndDropLibraries.default,
   'prefer-primitives': _preferPrimitives.default,
   'use-button-group-label': _useButtonGroupLabel.default,
+  'use-datetime-picker-calendar-button': _useDatetimePickerCalendarButton.default,
   'use-drawer-label': _useDrawerLabel.default,
   'use-heading': _useHeading.default,
   'use-heading-level-in-spotlight-card': _useHeadingLevelInSpotlightCard.default,

package/dist/cjs/rules/use-datetime-picker-calendar-button/index.js

@@ -0,0 +1,187 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setCalendarButtonPropertyToTrue = exports.setCalendarButtonPropToTrue = exports.default = exports.addCalendarButtonProperty = exports.addCalendarButtonProp = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _jsxAttribute = require("../../ast-nodes/jsx-attribute");
+var _jsxElement = require("../../ast-nodes/jsx-element");
+var _createRule = require("../utils/create-rule");
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+var DATE_PICKER = 'DatePicker';
+var DATETIME_PICKER = 'DateTimePicker';
+var PROP_NAME = 'shouldShowCalendarButton';
+
+// Lint rule message
+var message = '`shouldShowCalendarButton` should be set to `true` to make date picker accessible.';
+
+// Fix messages
+var addCalendarButtonProp = exports.addCalendarButtonProp = 'Add `shouldShowCalendarButton` prop.';
+var setCalendarButtonPropToTrue = exports.setCalendarButtonPropToTrue = 'Set `shouldShowCalendarButton` prop to `true`.';
+var addCalendarButtonProperty = exports.addCalendarButtonProperty = 'Add `shouldShowCalendarButton: true` to `datePickerProps`.';
+var setCalendarButtonPropertyToTrue = exports.setCalendarButtonPropertyToTrue = 'Set `shouldShowCalendarButton` property in `datePickerProps` to `true`.';
+var datePickerJSXElement = function datePickerJSXElement(node, context) {
+  var prop = _jsxElement.JSXElementHelper.getAttributeByName(node, PROP_NAME);
+
+  // If the prop exists
+  if (prop) {
+    var attrValue = _jsxAttribute.JSXAttribute.getValue(prop);
+    // If the value is a boolean with value `false`
+    if ((attrValue === null || attrValue === void 0 ? void 0 : attrValue.type) === 'ExpressionStatement Literal' && (attrValue === null || attrValue === void 0 ? void 0 : attrValue.value) === false) {
+      return context.report({
+        node: prop,
+        messageId: 'datePickerCalendarButtonShouldBeShown',
+        suggest: [{
+          desc: setCalendarButtonPropToTrue,
+          fix: function fix(fixer) {
+            return [fixer.replaceText(prop, PROP_NAME)];
+          }
+        }]
+      });
+    }
+    // If the prop does not exist
+  } else {
+    return context.report({
+      node: node.openingElement,
+      messageId: 'datePickerMissingCalendarButtonProp',
+      suggest: [{
+        desc: addCalendarButtonProp,
+        fix: function fix(fixer) {
+          return [fixer.insertTextAfter(node.openingElement.name, " ".concat(PROP_NAME))];
+        }
+      }]
+    });
+  }
+};
+var dateTimePickerJSXElement = function dateTimePickerJSXElement(node, context) {
+  var _datePickerProp$value, _expression$propertie;
+  var datePickerProp = _jsxElement.JSXElementHelper.getAttributeByName(node, 'datePickerProps');
+
+  // If the `datePickerProps` prop does not exist or is not an expression
+  // container (the latter being essentially unprecedented, against type
+  // guidelines, and useless)
+  if (!datePickerProp || ((_datePickerProp$value = datePickerProp.value) === null || _datePickerProp$value === void 0 ? void 0 : _datePickerProp$value.type) !== 'JSXExpressionContainer') {
+    return context.report({
+      node: node.openingElement,
+      messageId: 'dateTimePickerMissingCalendarButtonProp',
+      suggest: [{
+        desc: addCalendarButtonProperty,
+        fix: function fix(fixer) {
+          return [fixer.insertTextAfter(node.openingElement.name, " datePickerProps={{ ".concat(PROP_NAME, ": true }}"))];
+        }
+      }]
+    });
+  }
+
+  // Had to cast all these things because ESLint can't hang here. The
+  // types are just abjectly wrong from what I can log.
+  var expression = datePickerProp.value.expression;
+  // If it is not an analyzable expression, like a variable or something, skip
+  // it.
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(datePickerProp.value.expression, 'ObjectExpression')) {
+    return;
+  }
+  var prop = expression === null || expression === void 0 || (_expression$propertie = expression.properties) === null || _expression$propertie === void 0 ? void 0 : _expression$propertie.find(function (property) {
+    return property.type === 'Property' && property.key.name === PROP_NAME;
+  });
+
+  // If the `shouldShowCalendarButton` prop does not exist in `datePickerProps`
+  if (!prop) {
+    return context.report({
+      node: datePickerProp,
+      messageId: 'dateTimePickerMissingCalendarButtonProp',
+      suggest: [{
+        desc: addCalendarButtonProperty,
+        fix: function fix(fixer) {
+          // If it has existing properties
+          if (expression.properties.length > 0) {
+            // Needs following comma to not disrupt existing properties inside `datePickerProps`
+            return [fixer.insertTextBefore(expression.properties[0], "".concat(PROP_NAME, ": true,"))];
+            // Else it's an empty object
+          } else {
+            return [fixer.replaceText(expression, "{ ".concat(PROP_NAME, ": true }"))];
+          }
+        }
+      }]
+    });
+    // If the `shouldShowCalendarButton` property exists and it's value is `false`
+  } else if ((0, _eslintCodemodUtils.isNodeOfType)(prop.value, 'Literal') && prop.value.value !== true) {
+    return context.report({
+      node: datePickerProp,
+      messageId: 'dateTimePickerCalendarButtonShouldBeShown',
+      suggest: [{
+        desc: setCalendarButtonPropertyToTrue,
+        // Needs following comma to not disrupt existing properties inside `datePickerProps`
+        fix: function fix(fixer) {
+          return [fixer.replaceText(prop, "".concat(PROP_NAME, ": true,"))];
+        }
+      }]
+    });
+  }
+};
+var rule = (0, _createRule.createLintRule)({
+  meta: {
+    name: 'use-datetime-picker-calendar-button',
+    type: 'suggestion',
+    fixable: 'code',
+    hasSuggestions: true,
+    docs: {
+      description: "Encourages makers to use calendar button in Atlassian Design System's date picker and datetime picker components.",
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      dateTimePickerMissingCalendarButtonProp: "In `datePickerProps`, ".concat(message),
+      datePickerMissingCalendarButtonProp: message,
+      dateTimePickerCalendarButtonShouldBeShown: "In `datePickerProps`, ".concat(message),
+      datePickerCalendarButtonShouldBeShown: message
+    }
+  },
+  create: function create(context) {
+    // List of component's locally imported names that match
+    var contextLocalIdentifier = [];
+    var contextImportedIdentifier = [];
+    return {
+      // Only run rule in files where the package is imported
+      ImportDeclaration: function ImportDeclaration(node) {
+        var _node$specifiers;
+        var datetimePickerIdentifier = (_node$specifiers = node.specifiers) === null || _node$specifiers === void 0 ? void 0 : _node$specifiers.filter(function (spec) {
+          if (node.source.value === '@atlaskit/datetime-picker') {
+            var _spec$imported;
+            return (0, _eslintCodemodUtils.isNodeOfType)(spec, 'ImportSpecifier') && [DATE_PICKER, DATETIME_PICKER].includes((_spec$imported = spec.imported) === null || _spec$imported === void 0 ? void 0 : _spec$imported.name);
+          }
+        });
+        datetimePickerIdentifier.forEach(function (identifier) {
+          var imported = identifier.imported,
+            local = identifier.local;
+          contextLocalIdentifier.push(local.name);
+          contextImportedIdentifier.push(imported.name);
+        });
+      },
+      JSXElement: function JSXElement(node) {
+        if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'JSXElement')) {
+          return;
+        }
+        if (!(0, _eslintCodemodUtils.isNodeOfType)(node.openingElement.name, 'JSXIdentifier')) {
+          return;
+        }
+        var name = node.openingElement.name.name;
+        var localIndex = contextLocalIdentifier.indexOf(name);
+
+        // If this component does not match what we're looking for, quit early
+        if (localIndex === -1) {
+          return;
+        }
+        var importedName = contextImportedIdentifier[localIndex];
+        if (importedName === DATE_PICKER) {
+          return datePickerJSXElement(node, context);
+        } else if (importedName === DATETIME_PICKER) {
+          return dateTimePickerJSXElement(node, context);
+        }
+      }
+    };
+  }
+});
+var _default = exports.default = rule;

package/dist/es2019/ast-nodes/jsx-attribute.js

@@ -46,6 +46,14 @@ const HelperJSXAttribute = {
       };
     }
 
+    // handle `css={true}`
+    if (isNodeOfType(node.value, 'JSXExpressionContainer') && isNodeOfType(node.value.expression, 'Literal')) {
+      return {
+        type: 'ExpressionStatement Literal',
+        value: node.value.expression.value
+      };
+    }
+
     // handle `css='myStyles'`
     if (isNodeOfType(node.value, 'Literal') && node.value.value) {
       var _node$value$value;

package/dist/es2019/presets/all-flat.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::838ffe48cf42aefaa64f561f5a912a5c>>
+ * @codegen <<SignedSource::72c978e91d268fe1463898bd263385bc>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -37,6 +37,7 @@ export default {
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/prefer-primitives': 'warn',
     '@atlaskit/design-system/use-button-group-label': 'warn',
+    '@atlaskit/design-system/use-datetime-picker-calendar-button': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',
     '@atlaskit/design-system/use-heading': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',

package/dist/es2019/presets/all.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::d52bbfc25021c62c92de1956f1673f30>>
+ * @codegen <<SignedSource::5bfdac53d9eb0cc8f885ce996861719e>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -36,6 +36,7 @@ export default {
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/prefer-primitives': 'warn',
     '@atlaskit/design-system/use-button-group-label': 'warn',
+    '@atlaskit/design-system/use-datetime-picker-calendar-button': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',
     '@atlaskit/design-system/use-heading': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',

package/dist/es2019/presets/recommended-flat.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::a8a9e1542951e74387ce967be430c7f5>>
+ * @codegen <<SignedSource::2c1f5cd2494143a83d590243d7ebf539>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -26,6 +26,7 @@ export default {
     '@atlaskit/design-system/no-unsafe-style-overrides': 'warn',
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/use-button-group-label': 'warn',
+    '@atlaskit/design-system/use-datetime-picker-calendar-button': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
     '@atlaskit/design-system/use-href-in-link-item': 'warn',

package/dist/es2019/presets/recommended.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::a5d8dbdad2b84370a6e6889312752a98>>
+ * @codegen <<SignedSource::9aeb2fd0b5bde21f6ef61b407d0d32ab>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -25,6 +25,7 @@ export default {
     '@atlaskit/design-system/no-unsafe-style-overrides': 'warn',
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/use-button-group-label': 'warn',
+    '@atlaskit/design-system/use-datetime-picker-calendar-button': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
     '@atlaskit/design-system/use-href-in-link-item': 'warn',

package/dist/es2019/rules/index.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::4a19c51d51547e8f4e27f3785242c226>>
+ * @codegen <<SignedSource::50c700a7a1e85949b0e5136a8c576c72>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
@@ -34,6 +34,7 @@ import noUnsafeStyleOverrides from './no-unsafe-style-overrides';
 import noUnsupportedDragAndDropLibraries from './no-unsupported-drag-and-drop-libraries';
 import preferPrimitives from './prefer-primitives';
 import useButtonGroupLabel from './use-button-group-label';
+import useDatetimePickerCalendarButton from './use-datetime-picker-calendar-button';
 import useDrawerLabel from './use-drawer-label';
 import useHeading from './use-heading';
 import useHeadingLevelInSpotlightCard from './use-heading-level-in-spotlight-card';
@@ -81,6 +82,7 @@ export const rules = {
   'no-unsupported-drag-and-drop-libraries': noUnsupportedDragAndDropLibraries,
   'prefer-primitives': preferPrimitives,
   'use-button-group-label': useButtonGroupLabel,
+  'use-datetime-picker-calendar-button': useDatetimePickerCalendarButton,
   'use-drawer-label': useDrawerLabel,
   'use-heading': useHeading,
   'use-heading-level-in-spotlight-card': useHeadingLevelInSpotlightCard,

package/dist/es2019/rules/use-datetime-picker-calendar-button/index.js

@@ -0,0 +1,173 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { JSXAttribute } from '../../ast-nodes/jsx-attribute';
+import { JSXElementHelper } from '../../ast-nodes/jsx-element';
+import { createLintRule } from '../utils/create-rule';
+const DATE_PICKER = 'DatePicker';
+const DATETIME_PICKER = 'DateTimePicker';
+const PROP_NAME = 'shouldShowCalendarButton';
+
+// Lint rule message
+const message = '`shouldShowCalendarButton` should be set to `true` to make date picker accessible.';
+
+// Fix messages
+export const addCalendarButtonProp = 'Add `shouldShowCalendarButton` prop.';
+export const setCalendarButtonPropToTrue = 'Set `shouldShowCalendarButton` prop to `true`.';
+export const addCalendarButtonProperty = 'Add `shouldShowCalendarButton: true` to `datePickerProps`.';
+export const setCalendarButtonPropertyToTrue = 'Set `shouldShowCalendarButton` property in `datePickerProps` to `true`.';
+const datePickerJSXElement = (node, context) => {
+  const prop = JSXElementHelper.getAttributeByName(node, PROP_NAME);
+
+  // If the prop exists
+  if (prop) {
+    const attrValue = JSXAttribute.getValue(prop);
+    // If the value is a boolean with value `false`
+    if ((attrValue === null || attrValue === void 0 ? void 0 : attrValue.type) === 'ExpressionStatement Literal' && (attrValue === null || attrValue === void 0 ? void 0 : attrValue.value) === false) {
+      return context.report({
+        node: prop,
+        messageId: 'datePickerCalendarButtonShouldBeShown',
+        suggest: [{
+          desc: setCalendarButtonPropToTrue,
+          fix: fixer => [fixer.replaceText(prop, PROP_NAME)]
+        }]
+      });
+    }
+    // If the prop does not exist
+  } else {
+    return context.report({
+      node: node.openingElement,
+      messageId: 'datePickerMissingCalendarButtonProp',
+      suggest: [{
+        desc: addCalendarButtonProp,
+        fix: fixer => [fixer.insertTextAfter(node.openingElement.name, ` ${PROP_NAME}`)]
+      }]
+    });
+  }
+};
+const dateTimePickerJSXElement = (node, context) => {
+  var _datePickerProp$value, _expression$propertie;
+  const datePickerProp = JSXElementHelper.getAttributeByName(node, 'datePickerProps');
+
+  // If the `datePickerProps` prop does not exist or is not an expression
+  // container (the latter being essentially unprecedented, against type
+  // guidelines, and useless)
+  if (!datePickerProp || ((_datePickerProp$value = datePickerProp.value) === null || _datePickerProp$value === void 0 ? void 0 : _datePickerProp$value.type) !== 'JSXExpressionContainer') {
+    return context.report({
+      node: node.openingElement,
+      messageId: 'dateTimePickerMissingCalendarButtonProp',
+      suggest: [{
+        desc: addCalendarButtonProperty,
+        fix: fixer => [fixer.insertTextAfter(node.openingElement.name, ` datePickerProps={{ ${PROP_NAME}: true }}`)]
+      }]
+    });
+  }
+
+  // Had to cast all these things because ESLint can't hang here. The
+  // types are just abjectly wrong from what I can log.
+  const expression = datePickerProp.value.expression;
+  // If it is not an analyzable expression, like a variable or something, skip
+  // it.
+  if (!isNodeOfType(datePickerProp.value.expression, 'ObjectExpression')) {
+    return;
+  }
+  const prop = expression === null || expression === void 0 ? void 0 : (_expression$propertie = expression.properties) === null || _expression$propertie === void 0 ? void 0 : _expression$propertie.find(property => property.type === 'Property' && property.key.name === PROP_NAME);
+
+  // If the `shouldShowCalendarButton` prop does not exist in `datePickerProps`
+  if (!prop) {
+    return context.report({
+      node: datePickerProp,
+      messageId: 'dateTimePickerMissingCalendarButtonProp',
+      suggest: [{
+        desc: addCalendarButtonProperty,
+        fix: fixer => {
+          // If it has existing properties
+          if (expression.properties.length > 0) {
+            // Needs following comma to not disrupt existing properties inside `datePickerProps`
+            return [fixer.insertTextBefore(expression.properties[0], `${PROP_NAME}: true,`)];
+            // Else it's an empty object
+          } else {
+            return [fixer.replaceText(expression, `{ ${PROP_NAME}: true }`)];
+          }
+        }
+      }]
+    });
+    // If the `shouldShowCalendarButton` property exists and it's value is `false`
+  } else if (isNodeOfType(prop.value, 'Literal') && prop.value.value !== true) {
+    return context.report({
+      node: datePickerProp,
+      messageId: 'dateTimePickerCalendarButtonShouldBeShown',
+      suggest: [{
+        desc: setCalendarButtonPropertyToTrue,
+        // Needs following comma to not disrupt existing properties inside `datePickerProps`
+        fix: fixer => [fixer.replaceText(prop, `${PROP_NAME}: true,`)]
+      }]
+    });
+  }
+};
+const rule = createLintRule({
+  meta: {
+    name: 'use-datetime-picker-calendar-button',
+    type: 'suggestion',
+    fixable: 'code',
+    hasSuggestions: true,
+    docs: {
+      description: "Encourages makers to use calendar button in Atlassian Design System's date picker and datetime picker components.",
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      dateTimePickerMissingCalendarButtonProp: `In \`datePickerProps\`, ${message}`,
+      datePickerMissingCalendarButtonProp: message,
+      dateTimePickerCalendarButtonShouldBeShown: `In \`datePickerProps\`, ${message}`,
+      datePickerCalendarButtonShouldBeShown: message
+    }
+  },
+  create(context) {
+    // List of component's locally imported names that match
+    const contextLocalIdentifier = [];
+    const contextImportedIdentifier = [];
+    return {
+      // Only run rule in files where the package is imported
+      ImportDeclaration(node) {
+        var _node$specifiers;
+        const datetimePickerIdentifier = (_node$specifiers = node.specifiers) === null || _node$specifiers === void 0 ? void 0 : _node$specifiers.filter(spec => {
+          if (node.source.value === '@atlaskit/datetime-picker') {
+            var _spec$imported;
+            return isNodeOfType(spec, 'ImportSpecifier') && [DATE_PICKER, DATETIME_PICKER].includes((_spec$imported = spec.imported) === null || _spec$imported === void 0 ? void 0 : _spec$imported.name);
+          }
+        });
+        datetimePickerIdentifier.forEach(identifier => {
+          const {
+            imported,
+            local
+          } = identifier;
+          contextLocalIdentifier.push(local.name);
+          contextImportedIdentifier.push(imported.name);
+        });
+      },
+      JSXElement(node) {
+        if (!isNodeOfType(node, 'JSXElement')) {
+          return;
+        }
+        if (!isNodeOfType(node.openingElement.name, 'JSXIdentifier')) {
+          return;
+        }
+        const name = node.openingElement.name.name;
+        const localIndex = contextLocalIdentifier.indexOf(name);
+
+        // If this component does not match what we're looking for, quit early
+        if (localIndex === -1) {
+          return;
+        }
+        const importedName = contextImportedIdentifier[localIndex];
+        if (importedName === DATE_PICKER) {
+          return datePickerJSXElement(node, context);
+        } else if (importedName === DATETIME_PICKER) {
+          return dateTimePickerJSXElement(node, context);
+        }
+      }
+    };
+  }
+});
+export default rule;

package/dist/esm/ast-nodes/jsx-attribute.js

@@ -46,6 +46,14 @@ var HelperJSXAttribute = {
       };
     }
 
+    // handle `css={true}`
+    if (isNodeOfType(node.value, 'JSXExpressionContainer') && isNodeOfType(node.value.expression, 'Literal')) {
+      return {
+        type: 'ExpressionStatement Literal',
+        value: node.value.expression.value
+      };
+    }
+
     // handle `css='myStyles'`
     if (isNodeOfType(node.value, 'Literal') && node.value.value) {
       var _node$value$value;

package/dist/esm/presets/all-flat.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::838ffe48cf42aefaa64f561f5a912a5c>>
+ * @codegen <<SignedSource::72c978e91d268fe1463898bd263385bc>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -37,6 +37,7 @@ export default {
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/prefer-primitives': 'warn',
     '@atlaskit/design-system/use-button-group-label': 'warn',
+    '@atlaskit/design-system/use-datetime-picker-calendar-button': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',
     '@atlaskit/design-system/use-heading': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',