@atlaskit/eslint-plugin-design-system 8.29.1 → 8.30.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 8.30.0
+
+### Minor Changes
+
+- [#75603](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/75603) [`51cf4796aa02`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/51cf4796aa02) - Use primitives text component rule
+
 ## 8.29.1
 
 ### Patch Changes

package/README.md

@@ -77,6 +77,7 @@ module.exports = {
 | <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     |             |
 | <a href="./src/rules/use-href-in-link-item/README.md">use-href-in-link-item</a>                                     | Inform developers of eventual requirement of `href` prop in `LinkItem` component. Elements with a `link` role require an `href` attribute for users to properly navigate, particularly those using assistive technologies. If no valid `href` is required for your use case, consider using a `ButtonItem` instead. | Yes         | Yes     | Yes         |
 | <a href="./src/rules/use-primitives/README.md">use-primitives</a>                                                   | Encourage the usage of primitives components.                                                                                                                                                                                                                                                                       |             | Yes     | Yes         |
+| <a href="./src/rules/use-primitives-text/README.md">use-primitives-text</a>                                         | Encourage the usage of text components.                                                                                                                                                                                                                                                                             |             | Yes     | Yes         |
 | <a href="./src/rules/use-visually-hidden/README.md">use-visually-hidden</a>                                         | Enforce usage of the visually hidden component.                                                                                                                                                                                                                                                                     | Yes         | Yes     |             |
 
 <!-- END_RULE_TABLE_CODEGEN -->

package/constellation/index/usage.mdx

@@ -39,6 +39,7 @@ This plugin contains rules that should be used when working with the [Atlassian
 | <a href="use-heading-level-in-spotlight-card/usage">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     |             |
 | <a href="use-href-in-link-item/usage">use-href-in-link-item</a>                                     | Inform developers of eventual requirement of `href` prop in `LinkItem` component. Elements with a `link` role require an `href` attribute for users to properly navigate, particularly those using assistive technologies. If no valid `href` is required for your use case, consider using a `ButtonItem` instead. | Yes         | Yes     | Yes         |
 | <a href="use-primitives/usage">use-primitives</a>                                                   | Encourage the usage of primitives components.                                                                                                                                                                                                                                                                       |             | Yes     | Yes         |
+| <a href="use-primitives-text/usage">use-primitives-text</a>                                         | Encourage the usage of text components.                                                                                                                                                                                                                                                                             |             | Yes     | Yes         |
 | <a href="use-visually-hidden/usage">use-visually-hidden</a>                                         | Enforce usage of the visually hidden component.                                                                                                                                                                                                                                                                     | Yes         | Yes     |             |
 
 <!-- END_RULE_TABLE_CODEGEN -->

package/constellation/use-primitives-text/usage.mdx

@@ -0,0 +1,21 @@
+# use-primitives-text
+
+Using primitives allows you to delete bespoke component code and replace it with ready made solutions made by the Atlassian Design System Team.
+
+## Examples
+
+This rule marks code as violations when it can be replaced 1:1 with one or multiple primitive components.
+
+### Incorrect
+
+```jsx
+<span>^^^^^^^^^^^^^^^^^^^^^^ // ...</span>
+```
+
+### Correct
+
+```jsx
+<Text variant="ui">// ...</Text>
+```
+
+Currently, the rule is extremely defensive, only reporting on certain p, span, strong and em elements that don't have any props outside of `key`, `id` and `data-testid`.

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.JSXElementHelper = exports.JSXElement = void 0;
 var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _jsxAttribute = require("./jsx-attribute");
 var JSXElementHelper = exports.JSXElement = exports.JSXElementHelper = {
   /**
    * Names of JSXElements can be any of:
@@ -12,8 +13,8 @@ var JSXElementHelper = exports.JSXElement = exports.JSXElementHelper = {
    * `<MyComponents.Component></MyComponents.Component>` - `MyComponents` is a namespace (JSXNamespacedName)
    * `<MyComponents.Component></MyComponents.Component>` - `MyComponents` is an object (JSXMemberExpression)
    *
-   * Getting the name of a JSXMemberExpression is difficult, because object can contain objects, which is recursively defined in the AST.
-   * e.g. getting the name of `<MyComponents.PresentationLayer.LeftSideBar.Header />` would require `getName` to recursively resolve all parts of the name.
+   * getting the name of a JSXMemberExpression is difficult, because object can contain objects, which is recursively defined in the AST.
+   * e.g. Getting the name of `<MyComponents.PresentationLayer.LeftSideBar.Header />` would require `getName` to recursively resolve all parts of the name.
    * `getName` does not currently have this functionality. Add it if you need it.
    */
   getName: function getName(node) {
@@ -51,5 +52,35 @@ var JSXElementHelper = exports.JSXElement = exports.JSXElementHelper = {
     return node.openingElement.attributes.some(function (attr) {
       return (0, _eslintCodemodUtils.isNodeOfType)(attr, 'JSXSpreadAttribute');
     });
+  },
+  addAttribute: function addAttribute(node, name, value, fixer) {
+    var attributeString = " ".concat(name, "='").concat(value, "'");
+    var isSelfClosing = JSXElementHelper.isSelfClosing(node);
+    var start = node.openingElement.range ? node.openingElement.range[0] : 0;
+    var end = node.openingElement.range ? node.openingElement.range[1] - (isSelfClosing ? 3 : 1) : 0;
+    var range = [start, end];
+    var fix = fixer.insertTextAfterRange(range, attributeString);
+    return fix;
+  },
+  getChildren: function getChildren(node) {
+    // Filter out text children with whitespace characters only as JSX removes whitespace used for intendation
+    var filteredChildren = node.children.filter(function (child) {
+      if ((0, _eslintCodemodUtils.isNodeOfType)(child, 'JSXText')) {
+        var whiteSpaceChars = new RegExp('\\s', 'g');
+        return !whiteSpaceChars.test(child.value);
+      }
+      return true;
+    });
+    return filteredChildren;
+  },
+  hasAllowedAttrsOnly: function hasAllowedAttrsOnly(node, allowedProps) {
+    var attrs = JSXElementHelper.getAttributes(node);
+    return attrs.every(function (attr) {
+      if (!(0, _eslintCodemodUtils.isNodeOfType)(attr, 'JSXAttribute')) {
+        return false;
+      }
+      var name = _jsxAttribute.JSXAttribute.getName(attr);
+      return allowedProps.includes(name);
+    });
   }
 };

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::5647ce9c10ba880cffece66b5924fd6e>>
+ * @codegen <<SignedSource::98174f9eecc3be9d3a54506bcf2994ef>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -40,6 +40,7 @@ var _default = exports.default = {
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
     '@atlaskit/design-system/use-href-in-link-item': 'warn',
     '@atlaskit/design-system/use-primitives': 'warn',
+    '@atlaskit/design-system/use-primitives-text': 'warn',
     '@atlaskit/design-system/use-visually-hidden': 'error'
   }
 };

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

@@ -33,10 +33,11 @@ var _useDrawerLabel = _interopRequireDefault(require("./use-drawer-label"));
 var _useHeadingLevelInSpotlightCard = _interopRequireDefault(require("./use-heading-level-in-spotlight-card"));
 var _useHrefInLinkItem = _interopRequireDefault(require("./use-href-in-link-item"));
 var _usePrimitives = _interopRequireDefault(require("./use-primitives"));
+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::0a2813f0b87e94d23e1f6fc388539c70>>
+ * @codegen <<SignedSource::2687f4b835e076cef09f1fbbfdfc1b06>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -68,5 +69,6 @@ var _default = exports.default = {
   'use-heading-level-in-spotlight-card': _useHeadingLevelInSpotlightCard.default,
   'use-href-in-link-item': _useHrefInLinkItem.default,
   'use-primitives': _usePrimitives.default,
+  'use-primitives-text': _usePrimitivesText.default,
   'use-visually-hidden': _useVisuallyHidden.default
 };

package/dist/cjs/rules/use-primitives/transformers/emotion-css/index.js

@@ -11,7 +11,6 @@ var _eslintCodemodUtils = require("eslint-codemod-utils");
 var ast = _interopRequireWildcard(require("../../../../ast-nodes"));
 var _utils = require("../../utils");
 var _cssToXcss = require("../css-to-xcss");
-var _containsOnlySupportedAttrs = require("./contains-only-supported-attrs");
 var supported = _interopRequireWildcard(require("./supported"));
 var _upsertImportDeclaration = require("./upsert-import-declaration");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -65,7 +64,7 @@ var EmotionCSS = exports.EmotionCSS = {
     }
 
     // Ignore elements that contain dangerous attributes like `id`.
-    if (!(0, _containsOnlySupportedAttrs.containsOnlySupportedAttrs)(node)) {
+    if (!ast.JSXElement.hasAllowedAttrsOnly(node, supported.attributes)) {
       return false;
     }
 

package/dist/cjs/rules/use-primitives-text/config/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getConfig = void 0;
+var defaults = {
+  patterns: ['paragraph-elements', 'span-elements', 'strong-elements', 'emphasis-elements']
+};
+var getConfig = exports.getConfig = function getConfig(overrides) {
+  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
+  // start with an empty object, then merge in the defaults, then merge in overrides.
+  // The empty object is returned, as well as modified in place
+  return Object.assign({}, defaults, overrides);
+};

package/dist/cjs/rules/use-primitives-text/index.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _createRule = require("../utils/create-rule");
+var _config = require("./config");
+var _transformers = require("./transformers");
+var textDocsUrl = 'https://atlassian.design/components/primitives/text';
+var rule = (0, _createRule.createLintRule)({
+  meta: {
+    name: 'use-primitives-text',
+    type: 'suggestion',
+    fixable: 'code',
+    hasSuggestions: true,
+    docs: {
+      description: 'Encourage the usage of text components.',
+      recommended: false,
+      severity: 'warn'
+    },
+    messages: {
+      preferPrimitivesText: "This element can be replaced with a \"Text\" primitive. See ".concat(textDocsUrl, " for additional guidance."),
+      preferPrimitivesStackedText: "These paragraphs can be replaced with a \"Text\" and \"Stack\" primitives. See ".concat(textDocsUrl, " for additional guidance.")
+    }
+  },
+  create: function create(context) {
+    var config = (0, _config.getConfig)(context.options[0]);
+    return {
+      'JSXElement[openingElement.name.name=span]': function JSXElementOpeningElementNameNameSpan(node) {
+        return _transformers.SpanElements.lint(node, {
+          context: context,
+          config: config
+        });
+      },
+      'JSXElement[openingElement.name.name=p]': function JSXElementOpeningElementNameNameP(node) {
+        return _transformers.ParagraphElements.lint(node, {
+          context: context,
+          config: config
+        });
+      },
+      'JSXElement[openingElement.name.name=strong]': function JSXElementOpeningElementNameNameStrong(node) {
+        return _transformers.StrongElements.lint(node, {
+          context: context,
+          config: config
+        });
+      },
+      'JSXElement[openingElement.name.name=em]': function JSXElementOpeningElementNameNameEm(node) {
+        return _transformers.EmphasisElements.lint(node, {
+          context: context,
+          config: config
+        });
+      }
+    };
+  }
+});
+var _default = exports.default = rule;

package/dist/cjs/rules/use-primitives-text/transformers/common.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedAttrs = void 0;
+exports.hasTextChildrenOnly = hasTextChildrenOnly;
+exports.updateTestIdAttributeFix = updateTestIdAttributeFix;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var ast = _interopRequireWildcard(require("../../../ast-nodes"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+// Rename data-testid prop to testId if present
+function updateTestIdAttributeFix(node, fixer) {
+  var testIdAttr = ast.JSXElement.getAttributeByName(node, 'data-testid');
+  if (testIdAttr) {
+    return ast.JSXAttribute.updateName(testIdAttr, 'testId', fixer);
+  }
+}
+var allowedAttrs = exports.allowedAttrs = ['id', 'data-testid', 'key'];
+
+// Only allow elements with strings as children
+// The use of `FormattedMessage` component and `formatMessage` are allowed as these are used for i18n
+function hasTextChildrenOnly(node) {
+  var _node$children;
+  return (_node$children = node.children) === null || _node$children === void 0 ? void 0 : _node$children.every(function (child) {
+    if ((0, _eslintCodemodUtils.isNodeOfType)(child, 'JSXText')) {
+      return true;
+    }
+
+    // JSX child element <span><FormattedMessage /></span>
+    if ((0, _eslintCodemodUtils.isNodeOfType)(child, 'JSXElement') && ast.JSXElement.getName(child) === 'FormattedMessage') {
+      return true;
+    }
+
+    // JSX expression <span>{formatMessage(...)}</span>
+    if ((0, _eslintCodemodUtils.isNodeOfType)(child, 'JSXExpressionContainer') && (0, _eslintCodemodUtils.isNodeOfType)(child.expression, 'CallExpression')) {
+      return ast.FunctionCall.getName(child.expression) === 'formatMessage';
+    }
+    return false;
+  });
+}

package/dist/cjs/rules/use-primitives-text/transformers/emphasis-elements.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmphasisElements = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var ast = _interopRequireWildcard(require("../../../ast-nodes"));
+var _upsertImportDeclaration = require("../../use-primitives/transformers/emotion-css/upsert-import-declaration");
+var _common = require("./common");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+var EmphasisElements = exports.EmphasisElements = {
+  lint: function lint(node, _ref) {
+    var context = _ref.context,
+      config = _ref.config;
+    if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'JSXElement')) {
+      return;
+    }
+
+    // Check whether all criteria needed to make a transformation are met
+    if (!EmphasisElements._check(node, {
+      context: context,
+      config: config
+    })) {
+      return;
+    }
+    context.report({
+      node: node.openingElement,
+      messageId: 'preferPrimitivesText',
+      suggest: [{
+        desc: "Convert to Text",
+        fix: EmphasisElements._fix(node, {
+          context: context
+        })
+      }]
+    });
+  },
+  _check: function _check(node, _ref2) {
+    var context = _ref2.context,
+      config = _ref2.config;
+    if (!config.patterns.includes('emphasis-elements')) {
+      return false;
+    }
+    var elementName = ast.JSXElement.getName(node);
+    if (elementName !== 'em') {
+      return false;
+    }
+
+    // Element has no unallowed props
+    if (!ast.JSXElement.hasAllowedAttrsOnly(node, _common.allowedAttrs)) {
+      return false;
+    }
+
+    // If there is more than one `@atlaskit/primitives` import, then it becomes difficult to determine which import to transform
+    var importDeclaration = ast.Root.findImportsByModule(context.getSourceCode().ast.body, '@atlaskit/primitives');
+    if (importDeclaration.length > 1) {
+      return false;
+    }
+    return true;
+  },
+  _fix: function _fix(node, _ref3) {
+    var context = _ref3.context;
+    return function (fixer) {
+      var importFix = (0, _upsertImportDeclaration.upsertImportDeclaration)({
+        module: '@atlaskit/primitives',
+        specifiers: ['Text']
+      }, context, fixer);
+      var elementNameFixes = ast.JSXElement.updateName(node, 'Text', fixer);
+      var asAttributeFix = ast.JSXElement.addAttribute(node, 'as', 'em', fixer);
+      var testAttributeFix = (0, _common.updateTestIdAttributeFix)(node, fixer);
+      return [importFix].concat((0, _toConsumableArray2.default)(elementNameFixes), [asAttributeFix, testAttributeFix]).filter(function (fix) {
+        return Boolean(fix);
+      }); // Some of the transformers can return arrays with undefined, so filter them out
+    };
+  }
+};

package/dist/cjs/rules/use-primitives-text/transformers/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "EmphasisElements", {
+  enumerable: true,
+  get: function get() {
+    return _emphasisElements.EmphasisElements;
+  }
+});
+Object.defineProperty(exports, "ParagraphElements", {
+  enumerable: true,
+  get: function get() {
+    return _paragraphElements.ParagraphElements;
+  }
+});
+Object.defineProperty(exports, "SpanElements", {
+  enumerable: true,
+  get: function get() {
+    return _spanElements.SpanElements;
+  }
+});
+Object.defineProperty(exports, "StrongElements", {
+  enumerable: true,
+  get: function get() {
+    return _strongElements.StrongElements;
+  }
+});
+var _emphasisElements = require("./emphasis-elements");
+var _spanElements = require("./span-elements");
+var _strongElements = require("./strong-elements");
+var _paragraphElements = require("./paragraph-elements");

package/dist/cjs/rules/use-primitives-text/transformers/paragraph-elements.js

@@ -0,0 +1,196 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ParagraphElements = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var ast = _interopRequireWildcard(require("../../../ast-nodes"));
+var _upsertImportDeclaration = require("../../use-primitives/transformers/emotion-css/upsert-import-declaration");
+var _common = require("./common");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+var ParagraphElements = exports.ParagraphElements = {
+  lint: function lint(node, _ref) {
+    var context = _ref.context,
+      config = _ref.config;
+    if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'JSXElement')) {
+      return;
+    }
+
+    // Check whether all criteria needed to make a transformation are met
+    var _ParagraphElements$_c = ParagraphElements._check(node, {
+        context: context,
+        config: config
+      }),
+      success = _ParagraphElements$_c.success,
+      refs = _ParagraphElements$_c.refs;
+    if (!success) {
+      return;
+    }
+    if (refs.siblings.length > 1) {
+      var _refs$siblings$0$loc, _refs$siblings$loc;
+      /**
+       * Highlighting from first opening element to last closing element
+       * to indicate fix will change all p elements and wrap them in a Stack,
+       * falls back to first opening element.
+       */
+      var startLoc = (_refs$siblings$0$loc = refs.siblings[0].loc) === null || _refs$siblings$0$loc === void 0 ? void 0 : _refs$siblings$0$loc.start;
+      var endLoc = (_refs$siblings$loc = refs.siblings[refs.siblings.length - 1].loc) === null || _refs$siblings$loc === void 0 ? void 0 : _refs$siblings$loc.end;
+      context.report({
+        loc: startLoc && endLoc && {
+          start: startLoc,
+          end: endLoc
+        },
+        node: node.openingElement,
+        messageId: 'preferPrimitivesStackedText',
+        suggest: [{
+          desc: 'Convert to Text and Stack',
+          fix: ParagraphElements._fixMultiple(node, {
+            context: context,
+            refs: refs
+          })
+        }]
+      });
+    } else {
+      context.report({
+        node: node,
+        messageId: 'preferPrimitivesText',
+        suggest: [{
+          desc: 'Convert to Text',
+          fix: ParagraphElements._fixSingle(node, {
+            context: context
+          })
+        }]
+      });
+    }
+  },
+  _check: function _check(node, _ref2) {
+    var context = _ref2.context,
+      config = _ref2.config;
+    if (!config.patterns.includes('paragraph-elements')) {
+      return {
+        success: false,
+        refs: {
+          siblings: []
+        }
+      };
+    }
+    var elementName = ast.JSXElement.getName(node);
+    if (elementName !== 'p') {
+      return {
+        success: false,
+        refs: {
+          siblings: []
+        }
+      };
+    }
+
+    // All siblings have to be paragraph elements with no unallowed props
+    if (!(0, _eslintCodemodUtils.isNodeOfType)(node.parent, 'JSXElement')) {
+      return {
+        success: false,
+        refs: {
+          siblings: []
+        }
+      };
+    }
+    var siblings = ast.JSXElement.getChildren(node.parent);
+    if (siblings.length > 1) {
+      var _siblings$0$range, _node$range, _siblings$0$range2, _node$range2;
+      // Only report for the first p element by comparing node location
+      if (((_siblings$0$range = siblings[0].range) === null || _siblings$0$range === void 0 ? void 0 : _siblings$0$range[0]) !== ((_node$range = node.range) === null || _node$range === void 0 ? void 0 : _node$range[0]) || ((_siblings$0$range2 = siblings[0].range) === null || _siblings$0$range2 === void 0 ? void 0 : _siblings$0$range2[1]) !== ((_node$range2 = node.range) === null || _node$range2 === void 0 ? void 0 : _node$range2[1])) {
+        return {
+          success: false,
+          refs: {
+            siblings: siblings
+          }
+        };
+      }
+      // Only report when every sibling is a p element
+      var siblingsMatch = siblings.every(function (child) {
+        if (!(0, _eslintCodemodUtils.isNodeOfType)(child, 'JSXElement')) {
+          return false;
+        }
+        if (ast.JSXElement.getName(child) !== 'p') {
+          return false;
+        }
+        return ast.JSXElement.hasAllowedAttrsOnly(child, _common.allowedAttrs);
+      });
+      if (!siblingsMatch) {
+        return {
+          success: false,
+          refs: {
+            siblings: siblings
+          }
+        };
+      }
+    }
+    var importDeclaration = ast.Root.findImportsByModule(context.getSourceCode().ast.body, '@atlaskit/primitives');
+
+    // If there is more than one `@atlaskit/primitives` import, then it becomes difficult to determine which import to transform
+    if (importDeclaration.length > 1) {
+      return {
+        success: false,
+        refs: {
+          siblings: siblings
+        }
+      };
+    }
+    return {
+      success: true,
+      refs: {
+        siblings: siblings
+      }
+    };
+  },
+  _fixSingle: function _fixSingle(node, _ref3) {
+    var context = _ref3.context;
+    return function (fixer) {
+      var importFix = (0, _upsertImportDeclaration.upsertImportDeclaration)({
+        module: '@atlaskit/primitives',
+        specifiers: ['Text']
+      }, context, fixer);
+      var elementNameFixes = ast.JSXElement.updateName(node, 'Text', fixer);
+      var testAttributeFix = (0, _common.updateTestIdAttributeFix)(node, fixer);
+      return [importFix].concat((0, _toConsumableArray2.default)(elementNameFixes), [testAttributeFix]).filter(function (fix) {
+        return Boolean(fix);
+      }); // Some of the transformers can return arrays with undefined, so filter them out
+    };
+  },
+  _fixMultiple: function _fixMultiple(node, _ref4) {
+    var context = _ref4.context,
+      refs = _ref4.refs;
+    return function (fixer) {
+      if (!(0, _eslintCodemodUtils.isNodeOfType)(node.parent, 'JSXElement') || !node.parent.closingElement) {
+        return [];
+      }
+      var importFix = (0, _upsertImportDeclaration.upsertImportDeclaration)({
+        module: '@atlaskit/primitives',
+        specifiers: ['Text', 'Stack']
+      }, context, fixer);
+
+      // Update all siblings elements and their attributes
+      var siblingFixes = refs.siblings.map(function (sibling) {
+        if ((0, _eslintCodemodUtils.isNodeOfType)(sibling, 'JSXElement')) {
+          var elementNameFixes = ast.JSXElement.updateName(sibling, 'Text', fixer);
+          var testAttributeFix = (0, _common.updateTestIdAttributeFix)(sibling, fixer);
+          return [].concat((0, _toConsumableArray2.default)(elementNameFixes), [testAttributeFix]);
+        }
+        return undefined;
+      }).flat();
+
+      // Wrap in <Stack /> when more than 1 sibling
+      var wrapperOpenElementFix = fixer.insertTextAfter(node.parent.openingElement, "<Stack space='space.150'>");
+      var wrapperCloseElementFix = fixer.insertTextBefore(node.parent.closingElement, '</Stack>');
+      return [importFix].concat((0, _toConsumableArray2.default)(siblingFixes), [wrapperOpenElementFix, wrapperCloseElementFix]).filter(function (fix) {
+        return Boolean(fix);
+      }); // Some of the transformers can return arrays with undefined, so filter them out
+    };
+  }
+};