@atlaskit/eslint-plugin-design-system 8.31.0 → 8.32.1

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

@@ -17,6 +17,7 @@ var _noDeprecatedImports = _interopRequireDefault(require("./no-deprecated-impor
 var _noEmptyStyledExpression = _interopRequireDefault(require("./no-empty-styled-expression"));
 var _noExportedCss = _interopRequireDefault(require("./no-exported-css"));
 var _noExportedKeyframes = _interopRequireDefault(require("./no-exported-keyframes"));
+var _noHtmlButtonElement = _interopRequireDefault(require("./no-html-button-element"));
 var _noInvalidCssMap = _interopRequireDefault(require("./no-invalid-css-map"));
 var _noKeyframesTaggedTemplateExpression = _interopRequireDefault(require("./no-keyframes-tagged-template-expression"));
 var _noMargin = _interopRequireDefault(require("./no-margin"));
@@ -36,7 +37,7 @@ var _usePrimitivesText = _interopRequireDefault(require("./use-primitives-text")
 var _useVisuallyHidden = _interopRequireDefault(require("./use-visually-hidden"));
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::7d840a5791dae4a9dfc4dda8ec00dcf9>>
+ * @codegen <<SignedSource::23062a8759ba919facf30a402e5546bd>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -52,6 +53,7 @@ var _default = exports.default = {
   'no-empty-styled-expression': _noEmptyStyledExpression.default,
   'no-exported-css': _noExportedCss.default,
   'no-exported-keyframes': _noExportedKeyframes.default,
+  'no-html-button-element': _noHtmlButtonElement.default,
   'no-invalid-css-map': _noInvalidCssMap.default,
   'no-keyframes-tagged-template-expression': _noKeyframesTaggedTemplateExpression.default,
   'no-margin': _noMargin.default,

package/dist/cjs/rules/no-html-button-element/index.js

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _createRule = require("../utils/create-rule");
+var _utils = require("./utils");
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+var buttonDocsUrl = 'https://atlassian.design/components/button';
+var pressableDocsUrl = 'https://atlassian.design/components/primitives/pressable/';
+var rule = (0, _createRule.createLintRule)({
+  meta: {
+    name: 'no-html-button-element',
+    type: 'suggestion',
+    hasSuggestions: false,
+    docs: {
+      description: 'Prevent direct usage of HTML button elements and enforce usage of Button and Pressable.',
+      recommended: false,
+      severity: 'warn'
+    },
+    messages: {
+      noHtmlButtonElement: "This \"{{element}}\" should be replaced with a Button component. If beyond the capabilities of the Button component, use the Pressable primitive. See ".concat(buttonDocsUrl, " and ").concat(pressableDocsUrl, " for guidance.")
+    }
+  },
+  create: function create(context) {
+    return {
+      // Look for <button> HTML elements
+      // Look for styled calls/templates - styled.button(...)
+      JSXOpeningElement: function JSXOpeningElement(node) {
+        if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'JSXOpeningElement')) {
+          return;
+        }
+        if (!(0, _eslintCodemodUtils.isNodeOfType)(node.name, 'JSXIdentifier')) {
+          return;
+        }
+        var suggest = (0, _utils.shouldSuggest)(node === null || node === void 0 ? void 0 : node.parent);
+        if (suggest) {
+          context.report({
+            node: node,
+            messageId: 'noHtmlButtonElement',
+            data: {
+              element: node.name.name
+            }
+          });
+        }
+      },
+      // styled.button`` | styled2.button`` | styled.button()
+      'MemberExpression[object.name="styled"],MemberExpression[object.name="styled2"]': function MemberExpressionObjectNameStyledMemberExpressionObjectNameStyled2(node) {
+        if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'MemberExpression')) {
+          return;
+        }
+
+        // styled.button``
+        if ((0, _eslintCodemodUtils.isNodeOfType)(node.property, 'Identifier')) {
+          if (node.property.name === 'button') {
+            var styledIdentifier = node.object.name;
+            var elementName = node.property.name;
+
+            // Including the `styled.` portion in the message to help makers understand it's not just the `button` element that should be replaced
+            var reportName = "".concat(styledIdentifier, ".").concat(elementName); // styled.button
+
+            context.report({
+              node: node,
+              messageId: 'noHtmlButtonElement',
+              data: {
+                element: reportName
+              }
+            });
+          }
+        }
+      },
+      // styled(X)``
+      'CallExpression[callee.name="styled"]': function CallExpressionCalleeNameStyled(node) {
+        if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression')) {
+          return;
+        }
+
+        // styled('button')`` - We only care about 'button', ignore extending other components
+        if ((0, _eslintCodemodUtils.isNodeOfType)(node.arguments[0], 'Literal')) {
+          var argValue = node.arguments[0].raw;
+          if (typeof argValue === 'string') {
+            var suggest = argValue.replaceAll("'", '') === 'button';
+            if (suggest) {
+              var styledIdentifier = node.callee.name;
+              var elementName = argValue;
+
+              // Including the `styled()` portion in the message to help makers understand it's not just the `button` element that should be replaced
+              var reportName = "".concat(styledIdentifier, "(").concat(elementName, ")"); // styled('button')
+
+              context.report({
+                node: node,
+                messageId: 'noHtmlButtonElement',
+                data: {
+                  element: reportName
+                }
+              });
+            }
+          }
+        }
+      }
+    };
+  }
+});
+var _default = exports.default = rule;

package/dist/cjs/rules/no-html-button-element/utils.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shouldSuggest = void 0;
+var isButtonHtmlElement = function isButtonHtmlElement(node) {
+  return node.openingElement.name.name === 'button';
+};
+var shouldSuggest = exports.shouldSuggest = function shouldSuggest(node) {
+  if (!node) {
+    return false;
+  }
+  if (!isButtonHtmlElement(node)) {
+    return false;
+  }
+  return true;
+};

package/dist/cjs/rules/prefer-primitives/utils.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.validPrimitiveElements = exports.shouldSuggest = void 0;
 var _eslintCodemodUtils = require("eslint-codemod-utils");
-var validPrimitiveElements = exports.validPrimitiveElements = new Set(['div', 'span', 'article', 'aside', 'dialog', 'footer', 'header', 'li', 'main', 'nav', 'ol', 'section', 'ul']);
+var validPrimitiveElements = exports.validPrimitiveElements = new Set(['div', 'span', 'article', 'aside', 'dialog', 'footer', 'header', 'li', 'main', 'nav', 'ol', 'section', 'ul', 'button']);
 var getChildrenByType = function getChildrenByType(node, types) {
   return node.children.filter(function (child) {
     return types.find(function (type) {

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::aa64b4343b8763cfa5aa66230faea408>>
+ * @codegen <<SignedSource::bcb633b9d5c2def00d43b11139433c5c>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -18,6 +18,7 @@ export default {
     '@atlaskit/design-system/no-empty-styled-expression': 'warn',
     '@atlaskit/design-system/no-exported-css': 'warn',
     '@atlaskit/design-system/no-exported-keyframes': 'warn',
+    '@atlaskit/design-system/no-html-button-element': 'warn',
     '@atlaskit/design-system/no-invalid-css-map': 'error',
     '@atlaskit/design-system/no-keyframes-tagged-template-expression': 'error',
     '@atlaskit/design-system/no-margin': 'warn',