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

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

@@ -1,6 +1,6 @@
 /**
  * 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
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
@@ -15,6 +15,7 @@ import noDeprecatedImports from './no-deprecated-imports';
 import noEmptyStyledExpression from './no-empty-styled-expression';
 import noExportedCss from './no-exported-css';
 import noExportedKeyframes from './no-exported-keyframes';
+import noHtmlButtonElement from './no-html-button-element';
 import noInvalidCssMap from './no-invalid-css-map';
 import noKeyframesTaggedTemplateExpression from './no-keyframes-tagged-template-expression';
 import noMargin from './no-margin';
@@ -45,6 +46,7 @@ export default {
   'no-empty-styled-expression': noEmptyStyledExpression,
   'no-exported-css': noExportedCss,
   'no-exported-keyframes': noExportedKeyframes,
+  'no-html-button-element': noHtmlButtonElement,
   'no-invalid-css-map': noInvalidCssMap,
   'no-keyframes-tagged-template-expression': noKeyframesTaggedTemplateExpression,
   'no-margin': noMargin,

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

@@ -0,0 +1,101 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { createLintRule } from '../utils/create-rule';
+import { shouldSuggest } from './utils';
+var buttonDocsUrl = 'https://atlassian.design/components/button';
+var pressableDocsUrl = 'https://atlassian.design/components/primitives/pressable/';
+var rule = 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 (!isNodeOfType(node, 'JSXOpeningElement')) {
+          return;
+        }
+        if (!isNodeOfType(node.name, 'JSXIdentifier')) {
+          return;
+        }
+        var suggest = 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 (!isNodeOfType(node, 'MemberExpression')) {
+          return;
+        }
+
+        // styled.button``
+        if (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 (!isNodeOfType(node, 'CallExpression')) {
+          return;
+        }
+
+        // styled('button')`` - We only care about 'button', ignore extending other components
+        if (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
+                }
+              });
+            }
+          }
+        }
+      }
+    };
+  }
+});
+export default rule;

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

@@ -0,0 +1,12 @@
+var isButtonHtmlElement = function isButtonHtmlElement(node) {
+  return node.openingElement.name.name === 'button';
+};
+export var shouldSuggest = function shouldSuggest(node) {
+  if (!node) {
+    return false;
+  }
+  if (!isButtonHtmlElement(node)) {
+    return false;
+  }
+  return true;
+};

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

@@ -1,5 +1,5 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
-export var validPrimitiveElements = new Set(['div', 'span', 'article', 'aside', 'dialog', 'footer', 'header', 'li', 'main', 'nav', 'ol', 'section', 'ul']);
+export var 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/types/index.codegen.d.ts

@@ -15,6 +15,7 @@ export declare const configs: {
             '@atlaskit/design-system/no-empty-styled-expression': string;
             '@atlaskit/design-system/no-exported-css': string;
             '@atlaskit/design-system/no-exported-keyframes': string;
+            '@atlaskit/design-system/no-html-button-element': string;
             '@atlaskit/design-system/no-invalid-css-map': string;
             '@atlaskit/design-system/no-keyframes-tagged-template-expression': string;
             '@atlaskit/design-system/no-margin': string;

package/dist/types/presets/all.codegen.d.ts

@@ -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
  */
 declare const _default: {
@@ -18,6 +18,7 @@ declare const _default: {
         '@atlaskit/design-system/no-empty-styled-expression': string;
         '@atlaskit/design-system/no-exported-css': string;
         '@atlaskit/design-system/no-exported-keyframes': string;
+        '@atlaskit/design-system/no-html-button-element': string;
         '@atlaskit/design-system/no-invalid-css-map': string;
         '@atlaskit/design-system/no-keyframes-tagged-template-expression': string;
         '@atlaskit/design-system/no-margin': string;

package/dist/types/rules/index.codegen.d.ts

@@ -15,6 +15,7 @@ declare const _default: {
     'no-empty-styled-expression': import("eslint").Rule.RuleModule;
     'no-exported-css': import("eslint").Rule.RuleModule;
     'no-exported-keyframes': import("eslint").Rule.RuleModule;
+    'no-html-button-element': import("eslint").Rule.RuleModule;
     'no-invalid-css-map': import("eslint").Rule.RuleModule;
     'no-keyframes-tagged-template-expression': import("eslint").Rule.RuleModule;
     'no-margin': import("eslint").Rule.RuleModule;

package/dist/types/rules/no-html-button-element/index.d.ts

@@ -0,0 +1,3 @@
+import type { Rule } from 'eslint';
+declare const rule: Rule.RuleModule;
+export default rule;

package/dist/types/rules/no-html-button-element/utils.d.ts

@@ -0,0 +1,2 @@
+import { type JSXElement } from 'eslint-codemod-utils';
+export declare const shouldSuggest: (node: JSXElement) => boolean;

package/dist/types-ts4.5/index.codegen.d.ts

@@ -15,6 +15,7 @@ export declare const configs: {
             '@atlaskit/design-system/no-empty-styled-expression': string;
             '@atlaskit/design-system/no-exported-css': string;
             '@atlaskit/design-system/no-exported-keyframes': string;
+            '@atlaskit/design-system/no-html-button-element': string;
             '@atlaskit/design-system/no-invalid-css-map': string;
             '@atlaskit/design-system/no-keyframes-tagged-template-expression': string;
             '@atlaskit/design-system/no-margin': string;

package/dist/types-ts4.5/presets/all.codegen.d.ts

@@ -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
  */
 declare const _default: {
@@ -18,6 +18,7 @@ declare const _default: {
         '@atlaskit/design-system/no-empty-styled-expression': string;
         '@atlaskit/design-system/no-exported-css': string;
         '@atlaskit/design-system/no-exported-keyframes': string;
+        '@atlaskit/design-system/no-html-button-element': string;
         '@atlaskit/design-system/no-invalid-css-map': string;
         '@atlaskit/design-system/no-keyframes-tagged-template-expression': string;
         '@atlaskit/design-system/no-margin': string;

package/dist/types-ts4.5/rules/index.codegen.d.ts

@@ -19,6 +19,7 @@ declare const _default: {
     'no-empty-styled-expression': import("eslint").Rule.RuleModule;
     'no-exported-css': import("eslint").Rule.RuleModule;
     'no-exported-keyframes': import("eslint").Rule.RuleModule;
+    'no-html-button-element': import("eslint").Rule.RuleModule;
     'no-invalid-css-map': import("eslint").Rule.RuleModule;
     'no-keyframes-tagged-template-expression': import("eslint").Rule.RuleModule;
     'no-margin': import("eslint").Rule.RuleModule;

package/dist/types-ts4.5/rules/no-html-button-element/index.d.ts

@@ -0,0 +1,3 @@
+import type { Rule } from 'eslint';
+declare const rule: Rule.RuleModule;
+export default rule;

package/dist/types-ts4.5/rules/no-html-button-element/utils.d.ts

@@ -0,0 +1,2 @@
+import { type JSXElement } from 'eslint-codemod-utils';
+export declare const shouldSuggest: (node: JSXElement) => boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atlaskit/eslint-plugin-design-system",
   "description": "The essential plugin for use with the Atlassian Design System.",
-  "version": "8.31.0",
+  "version": "8.32.1",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"