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

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::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/es2019/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';
+const buttonDocsUrl = 'https://atlassian.design/components/button';
+const pressableDocsUrl = 'https://atlassian.design/components/primitives/pressable/';
+const 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 ${buttonDocsUrl} and ${pressableDocsUrl} for guidance.`
+    }
+  },
+  create(context) {
+    return {
+      // Look for <button> HTML elements
+      // Look for styled calls/templates - styled.button(...)
+      JSXOpeningElement(node) {
+        if (!isNodeOfType(node, 'JSXOpeningElement')) {
+          return;
+        }
+        if (!isNodeOfType(node.name, 'JSXIdentifier')) {
+          return;
+        }
+        const 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"]': node => {
+        if (!isNodeOfType(node, 'MemberExpression')) {
+          return;
+        }
+
+        // styled.button``
+        if (isNodeOfType(node.property, 'Identifier')) {
+          if (node.property.name === 'button') {
+            const styledIdentifier = node.object.name;
+            const 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
+            const reportName = `${styledIdentifier}.${elementName}`; // styled.button
+
+            context.report({
+              node: node,
+              messageId: 'noHtmlButtonElement',
+              data: {
+                element: reportName
+              }
+            });
+          }
+        }
+      },
+      // styled(X)``
+      'CallExpression[callee.name="styled"]': node => {
+        if (!isNodeOfType(node, 'CallExpression')) {
+          return;
+        }
+
+        // styled('button')`` - We only care about 'button', ignore extending other components
+        if (isNodeOfType(node.arguments[0], 'Literal')) {
+          const argValue = node.arguments[0].raw;
+          if (typeof argValue === 'string') {
+            const suggest = argValue.replaceAll(`'`, '') === 'button';
+            if (suggest) {
+              const styledIdentifier = node.callee.name;
+              const elementName = argValue;
+
+              // Including the `styled()` portion in the message to help makers understand it's not just the `button` element that should be replaced
+              const reportName = `${styledIdentifier}(${elementName})`; // styled('button')
+
+              context.report({
+                node: node,
+                messageId: 'noHtmlButtonElement',
+                data: {
+                  element: reportName
+                }
+              });
+            }
+          }
+        }
+      }
+    };
+  }
+});
+export default rule;

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

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

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

@@ -1,5 +1,5 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
-export const validPrimitiveElements = new Set(['div', 'span', 'article', 'aside', 'dialog', 'footer', 'header', 'li', 'main', 'nav', 'ol', 'section', 'ul']);
+export const validPrimitiveElements = new Set(['div', 'span', 'article', 'aside', 'dialog', 'footer', 'header', 'li', 'main', 'nav', 'ol', 'section', 'ul', 'button']);
 const getChildrenByType = (node, types) => {
   return node.children.filter(child => {
     return types.find(type => isNodeOfType(child, type));

package/dist/esm/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',