@atlaskit/eslint-plugin-design-system 9.6.0 → 10.0.0

package/dist/cjs/rules/no-html-button/node-types/supported.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isSupportedForLint = isSupportedForLint;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var ast = _interopRequireWildcard(require("../../../ast-nodes"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var supportedElements = [{
+  name: 'button'
+}, {
+  name: 'input',
+  attributes: [{
+    name: 'type',
+    // Values from https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role#best_practices
+    values: ['submit', 'reset', 'button', 'image']
+  }]
+}, {
+  name: '*',
+  attributes: [{
+    name: 'role',
+    values: ['button']
+  }]
+}];
+
+/**
+ * Determines if the given JSX element is a supported element to lint with this rule.
+ */
+function isSupportedForLint(jsxNode, elementName) {
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(jsxNode, 'JSXElement')) {
+    return false;
+  }
+
+  // Allow passing in the element name because the jsxNode doesn't
+  // represent the element name with styled components
+  var elName = elementName || ast.JSXElement.getName(jsxNode);
+  if (!elName) {
+    return false;
+  }
+
+  // Only check native HTML elements, not components
+  if (elName[0] !== elName[0].toLowerCase()) {
+    return false;
+  }
+  var supportedElement = supportedElements.find(function (_ref) {
+    var name = _ref.name;
+    return name === elName;
+  });
+  if (!supportedElement) {
+    supportedElement = supportedElements.find(function (_ref2) {
+      var name = _ref2.name;
+      return name === '*';
+    });
+  }
+  if (!supportedElement) {
+    return false;
+  }
+
+  // Check if the element has any attributes that are not supported
+  var attributes = ast.JSXElement.getAttributes(jsxNode);
+  if (supportedElement.attributes && !supportedElement.attributes.every(function (_ref3) {
+    var name = _ref3.name,
+      values = _ref3.values;
+    return attributes.some(function (attribute) {
+      if (attribute.type === 'JSXSpreadAttribute') {
+        return false;
+      }
+      var isMatchingName = attribute.name.name === name;
+      var isMatchingValues = values && attribute.value && attribute.value.type === 'Literal' && typeof attribute.value.value === 'string' && (values === null || values === void 0 ? void 0 : values.includes(attribute.value.value));
+      return isMatchingName && isMatchingValues;
+    });
+  })) {
+    return false;
+  }
+  return true;
+}

package/dist/cjs/rules/no-html-button/utils/get-jsx-element-by-name.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getJsxElementByName = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+/**
+ * Given a component name finds its JSX usage
+ */
+var getJsxElementByName = exports.getJsxElementByName = function getJsxElementByName(componentName, scope) {
+  var _variableDeclaration$;
+  var variableDeclaration = scope.variables.find(function (v) {
+    return v.name === componentName;
+  });
+  if (!variableDeclaration) {
+    return;
+  }
+
+  // length here should be exactly 2 to indicate only two references:
+  // one being the variable declaration itself
+  // second being the JSX call site
+  // we might consider handling multiple local JSX call sites in the future
+  // but "this is good enough for now"™️
+  if (variableDeclaration.references.length !== 2) {
+    return;
+  }
+  var jsxUsage = (_variableDeclaration$ = variableDeclaration.references[1]) === null || _variableDeclaration$ === void 0 ? void 0 : _variableDeclaration$.identifier;
+  var _variableDeclaration$2 = variableDeclaration.references.map(function (ref) {
+      return ref === null || ref === void 0 ? void 0 : ref.identifier;
+    }),
+    _variableDeclaration$3 = (0, _slicedToArray2.default)(_variableDeclaration$2, 2),
+    firstIdentifier = _variableDeclaration$3[0],
+    secondIdentifier = _variableDeclaration$3[1];
+  // Check if the first reference is a JSXOpeningElement and the second is not or vice versa
+  if ((0, _eslintCodemodUtils.isNodeOfType)(firstIdentifier, 'JSXIdentifier') && !(0, _eslintCodemodUtils.isNodeOfType)(secondIdentifier, 'JSXIdentifier')) {
+    jsxUsage = firstIdentifier;
+  } else if ((0, _eslintCodemodUtils.isNodeOfType)(secondIdentifier, 'JSXIdentifier') && !(0, _eslintCodemodUtils.isNodeOfType)(firstIdentifier, 'JSXIdentifier')) {
+    jsxUsage = secondIdentifier;
+  } else {
+    return;
+  }
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(jsxUsage, 'JSXIdentifier')) {
+    return;
+  }
+  var jsxOpeningElement = jsxUsage.parent;
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(jsxOpeningElement, 'JSXOpeningElement')) {
+    return;
+  }
+  return jsxOpeningElement;
+};

package/dist/cjs/rules/use-popup-label/index.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _createRule = require("../utils/create-rule");
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+var elementsAccessibleNameProps = ['label', 'titleId'];
+var rule = (0, _createRule.createLintRule)({
+  meta: {
+    name: 'use-popup-label',
+    type: 'suggestion',
+    docs: {
+      description: 'Encourages to provide accessible name for Atlassian Design System Popup component.',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      missingLabelProp: 'Missing accessible name. If there is no visible content to associate use `label` prop, otherwise pass id of element to `titleId` prop to be associated as label.',
+      labelPropShouldHaveContents: 'Define string that labels the interactive element.',
+      titleIdShouldHaveValue: '`titleId` should reference the id of element that define accessible name.',
+      noBothPropsUsage: 'Do not include both `titleId` and `label` properties. Use `titleId` if the label text is available in the DOM to reference it, otherwise use `label` to provide accessible name explicitly.'
+    },
+    hasSuggestions: true
+  },
+  create: function create(context) {
+    var contextLocalIdentifier = [];
+    return {
+      ImportDeclaration: function ImportDeclaration(node) {
+        if (node.source.value === '@atlaskit/popup') {
+          if (node.specifiers.length) {
+            var defaultImport = node.specifiers.filter(function (spec) {
+              return spec.type === 'ImportDefaultSpecifier';
+            });
+            if (defaultImport.length) {
+              var local = defaultImport[0].local;
+              contextLocalIdentifier.push(local.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;
+        if (contextLocalIdentifier.includes(name)) {
+          var componentRoleDialogProp = node.openingElement.attributes.find(function (attr) {
+            return (0, _eslintCodemodUtils.isNodeOfType)(attr, 'JSXAttribute') && (0, _eslintCodemodUtils.isNodeOfType)(attr.name, 'JSXIdentifier') && attr.value && (0, _eslintCodemodUtils.isNodeOfType)(attr.value, 'Literal') && attr.name.name === 'role' && attr.value.value === 'dialog';
+          });
+          var componentLabelProps = node.openingElement.attributes.filter(function (attr) {
+            return (0, _eslintCodemodUtils.isNodeOfType)(attr, 'JSXAttribute') && (0, _eslintCodemodUtils.isNodeOfType)(attr.name, 'JSXIdentifier') && elementsAccessibleNameProps.includes(attr.name.name);
+          });
+          if (componentLabelProps.length === 1) {
+            var prop = componentLabelProps[0];
+            if ('value' in prop && prop.value) {
+              if ((0, _eslintCodemodUtils.isNodeOfType)(prop.value, 'Literal') && !prop.value.value || (0, _eslintCodemodUtils.isNodeOfType)(prop.value, 'JSXExpressionContainer') && !prop.value.expression) {
+                context.report({
+                  node: prop,
+                  messageId: prop.name.name === 'label' ? 'labelPropShouldHaveContents' : 'titleIdShouldHaveValue'
+                });
+              }
+            }
+          } else if (componentLabelProps.length > 1) {
+            context.report({
+              node: node.openingElement,
+              messageId: 'noBothPropsUsage'
+            });
+          } else {
+            if (componentRoleDialogProp) {
+              context.report({
+                node: node.openingElement,
+                messageId: 'missingLabelProp'
+              });
+            } else {
+              return;
+            }
+          }
+        }
+      }
+    };
+  }
+});
+var _default = exports.default = rule;

package/dist/es2019/common/token-maps.partial.js

@@ -0,0 +1,42 @@
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::30c84f908843af1f250860b6f3deeea0>>
+ * @codegenId spacing
+ * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen-token-maps
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::55622b91aca9b3afac4bce440f222b71>>
+ */
+export const positiveSpaceMap = {
+  '0px': 'space.0',
+  '2px': 'space.025',
+  '4px': 'space.050',
+  '6px': 'space.075',
+  '8px': 'space.100',
+  '12px': 'space.150',
+  '16px': 'space.200',
+  '20px': 'space.250',
+  '24px': 'space.300',
+  '32px': 'space.400',
+  '40px': 'space.500',
+  '48px': 'space.600',
+  '64px': 'space.800',
+  '80px': 'space.1000'
+};
+export const negativeSpaceMap = {
+  '-2px': 'space.negative.025',
+  '-4px': 'space.negative.050',
+  '-6px': 'space.negative.075',
+  '-8px': 'space.negative.100',
+  '-12px': 'space.negative.150',
+  '-16px': 'space.negative.200',
+  '-20px': 'space.negative.250',
+  '-24px': 'space.negative.300',
+  '-32px': 'space.negative.400'
+};
+export const allSpaceMap = {
+  ...positiveSpaceMap,
+  ...negativeSpaceMap
+};
+
+/**
+ * @codegenEnd
+ */

package/dist/es2019/index.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::11fe367c1ab4107f7418a84fa435cc23>>
+ * @codegen <<SignedSource::a1bb0f17560603fa4895326b1d50744e>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import all from './presets/all.codegen';

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::1ab11547db880eba1206f334a9b2150f>>
+ * @codegen <<SignedSource::0be7639a95bf4c9bbfe00154d8193477>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -19,7 +19,8 @@ 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-html-anchor': 'warn',
+    '@atlaskit/design-system/no-html-button': 'warn',
     '@atlaskit/design-system/no-invalid-css-map': 'error',
     '@atlaskit/design-system/no-keyframes-tagged-template-expression': 'error',
     '@atlaskit/design-system/no-margin': 'warn',
@@ -35,6 +36,7 @@ export default {
     '@atlaskit/design-system/use-heading': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
     '@atlaskit/design-system/use-href-in-link-item': 'warn',
+    '@atlaskit/design-system/use-popup-label': 'warn',
     '@atlaskit/design-system/use-primitives': 'warn',
     '@atlaskit/design-system/use-primitives-text': 'warn',
     '@atlaskit/design-system/use-tokens-space': 'error',

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::05b4fe8f97edc4f7e46ded52b4917037>>
+ * @codegen <<SignedSource::73a3666b244b58cc221eebcda071161d>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -26,6 +26,7 @@ export default {
     '@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',
+    '@atlaskit/design-system/use-popup-label': 'warn',
     '@atlaskit/design-system/use-visually-hidden': 'error'
   }
 };

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::293575f7bd0150862f792e3fffc286c4>>
+ * @codegen <<SignedSource::9b934590b0ff7880e962fa4dd73bdb0b>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
@@ -16,7 +16,8 @@ import noDirectUseOfWebPlatformDragAndDrop from './no-direct-use-of-web-platform
 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 noHtmlAnchor from './no-html-anchor';
+import noHtmlButton from './no-html-button';
 import noInvalidCssMap from './no-invalid-css-map';
 import noKeyframesTaggedTemplateExpression from './no-keyframes-tagged-template-expression';
 import noMargin from './no-margin';
@@ -32,6 +33,7 @@ import useDrawerLabel from './use-drawer-label';
 import useHeading from './use-heading';
 import useHeadingLevelInSpotlightCard from './use-heading-level-in-spotlight-card';
 import useHrefInLinkItem from './use-href-in-link-item';
+import usePopupLabel from './use-popup-label';
 import usePrimitives from './use-primitives';
 import usePrimitivesText from './use-primitives-text';
 import useTokensSpace from './use-tokens-space';
@@ -51,7 +53,8 @@ export default {
   'no-empty-styled-expression': noEmptyStyledExpression,
   'no-exported-css': noExportedCss,
   'no-exported-keyframes': noExportedKeyframes,
-  'no-html-button-element': noHtmlButtonElement,
+  'no-html-anchor': noHtmlAnchor,
+  'no-html-button': noHtmlButton,
   'no-invalid-css-map': noInvalidCssMap,
   'no-keyframes-tagged-template-expression': noKeyframesTaggedTemplateExpression,
   'no-margin': noMargin,
@@ -67,6 +70,7 @@ export default {
   'use-heading': useHeading,
   'use-heading-level-in-spotlight-card': useHeadingLevelInSpotlightCard,
   'use-href-in-link-item': useHrefInLinkItem,
+  'use-popup-label': usePopupLabel,
   'use-primitives': usePrimitives,
   'use-primitives-text': usePrimitivesText,
   'use-tokens-space': useTokensSpace,

package/dist/es2019/rules/no-html-anchor/index.js

@@ -0,0 +1,33 @@
+import { createLintRule } from '../utils/create-rule';
+import { JSXElement, StyledComponent } from './node-types';
+const rule = createLintRule({
+  meta: {
+    name: 'no-html-anchor',
+    type: 'suggestion',
+    docs: {
+      description: 'Discourage direct usage of HTML anchor elements in favor of Atlassian Design System link components.',
+      recommended: false,
+      severity: 'warn'
+    },
+    messages: {
+      noHtmlAnchor: `This <{{ name }}> should be replaced with a link component from the Atlassian Design System, such as the "Link" or "LinkButton" component when suitable. For custom links use the "Anchor" primitive. ADS links include event tracking, automatic router configuration, ensure accessible implementations, and provide access to ADS styling features like design tokens.`
+    }
+  },
+  create(context) {
+    return {
+      // transforms styled.<anchor>(...) usages
+      CallExpression(node) {
+        StyledComponent.lint(node, {
+          context
+        });
+      },
+      // transforms <anchor css={...}> usages
+      JSXElement(node) {
+        JSXElement.lint(node, {
+          context
+        });
+      }
+    };
+  }
+});
+export default rule;

package/dist/es2019/rules/no-html-anchor/node-types/index.js

@@ -0,0 +1,2 @@
+export { StyledComponent } from './styled-component';
+export { JSXElement } from './jsx-element';

package/dist/es2019/rules/no-html-anchor/node-types/jsx-element/index.js

@@ -0,0 +1,20 @@
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+import * as ast from '../../../../ast-nodes';
+import { isSupportedForLint } from '../supported';
+export const JSXElement = {
+  lint(node, {
+    context
+  }) {
+    if (!isSupportedForLint(node)) {
+      return;
+    }
+    context.report({
+      node: node.openingElement,
+      messageId: 'noHtmlAnchor',
+      data: {
+        name: ast.JSXElement.getName(node)
+      }
+    });
+  }
+};

package/dist/es2019/rules/no-html-anchor/node-types/styled-component/get-styled-component-call.js

@@ -0,0 +1,42 @@
+import { closestOfType, isNodeOfType } from 'eslint-codemod-utils';
+
+/**
+ * Returns a styled component
+ */
+
+export const getStyledComponentCall = node => {
+  // halts unless we are dealing with a styled component
+  if (!isStyledCallExpression(node)) {
+    return;
+  }
+  // halts if the component is being exported directly
+  if (closestOfType(node, 'ExportNamedDeclaration')) {
+    return;
+  }
+  const styledComponentVariableRef = node.parent;
+  // halts if the styled component is not assigned to a variable immediately
+  if (!isNodeOfType(styledComponentVariableRef, 'VariableDeclarator')) {
+    return;
+  }
+  return styledComponentVariableRef;
+};
+
+/**
+ * Some verbose precondition checks but all it does is check
+ * a call expression is of form `styled.a` or `styled2.a`
+ */
+const isStyledCallExpression = call => {
+  if (!isNodeOfType(call, 'CallExpression')) {
+    return false;
+  }
+  if (!isNodeOfType(call.callee, 'MemberExpression')) {
+    return false;
+  }
+  if (!isNodeOfType(call.callee.object, 'Identifier') || !isNodeOfType(call.callee.property, 'Identifier')) {
+    return false;
+  }
+  if (/^styled2?$/.test(call.callee.object.name)) {
+    return true;
+  }
+  return false;
+};

package/dist/es2019/rules/no-html-anchor/node-types/styled-component/index.js

@@ -0,0 +1,32 @@
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { getJsxElementByName } from '../../utils/get-jsx-element-by-name';
+import { isSupportedForLint } from '../supported';
+import { getStyledComponentCall } from './get-styled-component-call';
+export const StyledComponent = {
+  lint(node, {
+    context
+  }) {
+    var _getJsxElementByName;
+    if (!isNodeOfType(node, 'CallExpression') || !isNodeOfType(node.callee, 'MemberExpression') || !isNodeOfType(node.callee.object, 'Identifier') || !isNodeOfType(node.callee.property, 'Identifier')) {
+      return;
+    }
+    const styles = getStyledComponentCall(node);
+    const elementName = node.callee.property.name;
+    if (!styles || !isNodeOfType(styles.id, 'Identifier')) {
+      return;
+    }
+    const jsxElement = (_getJsxElementByName = getJsxElementByName(styles.id.name, context.getScope())) === null || _getJsxElementByName === void 0 ? void 0 : _getJsxElementByName.parent;
+    if (jsxElement && !isSupportedForLint(jsxElement, elementName)) {
+      return;
+    }
+    context.report({
+      node: styles,
+      messageId: 'noHtmlAnchor',
+      data: {
+        name: node.callee.property.name
+      }
+    });
+  }
+};

package/dist/es2019/rules/no-html-anchor/node-types/supported.js

@@ -0,0 +1,56 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import * as ast from '../../../ast-nodes';
+const supportedElements = [{
+  name: 'a'
+}];
+
+/**
+ * Determines if the given JSX element is a supported element to lint with this rule.
+ */
+export function isSupportedForLint(jsxNode, elementName) {
+  if (!isNodeOfType(jsxNode, 'JSXElement')) {
+    return false;
+  }
+
+  // Allow passing in the element name because the jsxNode doesn't
+  // represent the element name with styled components
+  const elName = elementName || ast.JSXElement.getName(jsxNode);
+  if (!elName) {
+    return false;
+  }
+
+  // Only check native HTML elements, not components
+  if (elName[0] !== elName[0].toLowerCase()) {
+    return false;
+  }
+  let supportedElement = supportedElements.find(({
+    name
+  }) => name === elName);
+  if (!supportedElement) {
+    supportedElement = supportedElements.find(({
+      name
+    }) => name === '*');
+  }
+  if (!supportedElement) {
+    return false;
+  }
+
+  // Check if the element has any attributes that are not supported
+  const attributes = ast.JSXElement.getAttributes(jsxNode);
+  if (supportedElement.attributes && !supportedElement.attributes.every(({
+    name,
+    values
+  }) => {
+    return attributes.some(attribute => {
+      if (attribute.type === 'JSXSpreadAttribute') {
+        return false;
+      }
+      const isMatchingName = attribute.name.name === name;
+      const isMatchingValues = values && attribute.value && attribute.value.type === 'Literal' && typeof attribute.value.value === 'string' && (values === null || values === void 0 ? void 0 : values.includes(attribute.value.value));
+      return isMatchingName && isMatchingValues;
+    });
+  })) {
+    return false;
+  }
+  return true;
+}

package/dist/es2019/rules/no-html-anchor/utils/get-jsx-element-by-name.js

@@ -0,0 +1,39 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+
+/**
+ * Given a component name finds its JSX usage
+ */
+export const getJsxElementByName = (componentName, scope) => {
+  var _variableDeclaration$;
+  const variableDeclaration = scope.variables.find(v => v.name === componentName);
+  if (!variableDeclaration) {
+    return;
+  }
+
+  // length here should be exactly 2 to indicate only two references:
+  // one being the variable declaration itself
+  // second being the JSX call site
+  // we might consider handling multiple local JSX call sites in the future
+  // but "this is good enough for now"™️
+  if (variableDeclaration.references.length !== 2) {
+    return;
+  }
+  let jsxUsage = (_variableDeclaration$ = variableDeclaration.references[1]) === null || _variableDeclaration$ === void 0 ? void 0 : _variableDeclaration$.identifier;
+  const [firstIdentifier, secondIdentifier] = variableDeclaration.references.map(ref => ref === null || ref === void 0 ? void 0 : ref.identifier);
+  // Check if the first reference is a JSXOpeningElement and the second is not or vice versa
+  if (isNodeOfType(firstIdentifier, 'JSXIdentifier') && !isNodeOfType(secondIdentifier, 'JSXIdentifier')) {
+    jsxUsage = firstIdentifier;
+  } else if (isNodeOfType(secondIdentifier, 'JSXIdentifier') && !isNodeOfType(firstIdentifier, 'JSXIdentifier')) {
+    jsxUsage = secondIdentifier;
+  } else {
+    return;
+  }
+  if (!isNodeOfType(jsxUsage, 'JSXIdentifier')) {
+    return;
+  }
+  const jsxOpeningElement = jsxUsage.parent;
+  if (!isNodeOfType(jsxOpeningElement, 'JSXOpeningElement')) {
+    return;
+  }
+  return jsxOpeningElement;
+};

package/dist/es2019/rules/no-html-button/index.js

@@ -0,0 +1,33 @@
+import { createLintRule } from '../utils/create-rule';
+import { JSXElement, StyledComponent } from './node-types';
+const rule = createLintRule({
+  meta: {
+    name: 'no-html-button',
+    type: 'suggestion',
+    docs: {
+      description: 'Discourage direct usage of HTML button elements in favor of Atlassian Design System button components.',
+      recommended: false,
+      severity: 'warn'
+    },
+    messages: {
+      noHtmlButton: `This {{ name }} should be replaced with a button component from the Atlassian Design System, such as the "Button" component when suitable. For custom buttons use the "Pressable" primitive. ADS buttons include event tracking, ensure accessible implementations, and provide access to ADS styling features like design tokens.`
+    }
+  },
+  create(context) {
+    return {
+      // transforms styled.<button>(...) usages
+      CallExpression(node) {
+        StyledComponent.lint(node, {
+          context
+        });
+      },
+      // transforms <button css={...}> usages
+      JSXElement(node) {
+        JSXElement.lint(node, {
+          context
+        });
+      }
+    };
+  }
+});
+export default rule;

package/dist/es2019/rules/no-html-button/node-types/index.js

@@ -0,0 +1,2 @@
+export { StyledComponent } from './styled-component';
+export { JSXElement } from './jsx-element';

package/dist/es2019/rules/no-html-button/node-types/jsx-element/index.js

@@ -0,0 +1,20 @@
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+import * as ast from '../../../../ast-nodes';
+import { isSupportedForLint } from '../supported';
+export const JSXElement = {
+  lint(node, {
+    context
+  }) {
+    if (!isSupportedForLint(node)) {
+      return;
+    }
+    context.report({
+      node: node.openingElement,
+      messageId: 'noHtmlButton',
+      data: {
+        name: ast.JSXElement.getName(node)
+      }
+    });
+  }
+};