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

package/dist/es2019/rules/use-primitives-text/transformers/span-elements.js

@@ -0,0 +1,77 @@
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+import * as ast from '../../../ast-nodes';
+import { upsertImportDeclaration } from '../../use-primitives/transformers/emotion-css/upsert-import-declaration';
+import { allowedAttrs, hasTextChildrenOnly, updateTestIdAttributeFix } from './common';
+export const SpanElements = {
+  lint(node, {
+    context,
+    config
+  }) {
+    if (!isNodeOfType(node, 'JSXElement')) {
+      return;
+    }
+
+    // Check whether all criteria needed to make a transformation are met
+    if (!SpanElements._check(node, {
+      context,
+      config
+    })) {
+      return;
+    }
+    context.report({
+      node: node.openingElement,
+      messageId: 'preferPrimitivesText',
+      suggest: [{
+        desc: `Convert to Text`,
+        fix: SpanElements._fix(node, {
+          context
+        })
+      }]
+    });
+  },
+  _check(node, {
+    context,
+    config
+  }) {
+    if (!config.patterns.includes('span-elements')) {
+      return false;
+    }
+    const elementName = ast.JSXElement.getName(node);
+    if (elementName !== 'span') {
+      return false;
+    }
+
+    // Element has no unallowed props
+    if (!ast.JSXElement.hasAllowedAttrsOnly(node, allowedAttrs)) {
+      return false;
+    }
+
+    // Only allow elements with strings as children
+    if (!hasTextChildrenOnly(node)) {
+      return false;
+    }
+    const 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 false;
+    }
+    return true;
+  },
+  _fix(node, {
+    context
+  }) {
+    return fixer => {
+      const importFix = upsertImportDeclaration({
+        module: '@atlaskit/primitives',
+        specifiers: ['Text']
+      }, context, fixer);
+      const elementNameFixes = ast.JSXElement.updateName(node, 'Text', fixer);
+      const variantAttributeFix = ast.JSXElement.addAttribute(node, 'variant', 'ui', fixer);
+      const testAttributeFix = updateTestIdAttributeFix(node, fixer);
+      return [importFix, ...elementNameFixes, variantAttributeFix, testAttributeFix].filter(fix => Boolean(fix)); // Some of the transformers can return arrays with undefined, so filter them out
+    };
+  }
+};

package/dist/es2019/rules/use-primitives-text/transformers/strong-elements.js

@@ -0,0 +1,72 @@
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+import * as ast from '../../../ast-nodes';
+import { upsertImportDeclaration } from '../../use-primitives/transformers/emotion-css/upsert-import-declaration';
+import { allowedAttrs, updateTestIdAttributeFix } from './common';
+export const StrongElements = {
+  lint(node, {
+    context,
+    config
+  }) {
+    if (!isNodeOfType(node, 'JSXElement')) {
+      return;
+    }
+
+    // Check whether all criteria needed to make a transformation are met
+    if (!StrongElements._check(node, {
+      context,
+      config
+    })) {
+      return;
+    }
+    context.report({
+      node: node.openingElement,
+      messageId: 'preferPrimitivesText',
+      suggest: [{
+        desc: `Convert to Text`,
+        fix: StrongElements._fix(node, {
+          context
+        })
+      }]
+    });
+  },
+  _check(node, {
+    context,
+    config
+  }) {
+    if (!config.patterns.includes('strong-elements')) {
+      return false;
+    }
+    const elementName = ast.JSXElement.getName(node);
+    if (elementName !== 'strong') {
+      return false;
+    }
+
+    // Element has no unallowed props
+    if (!ast.JSXElement.hasAllowedAttrsOnly(node, allowedAttrs)) {
+      return false;
+    }
+
+    // If there is more than one `@atlaskit/primitives` import, then it becomes difficult to determine which import to transform
+    const importDeclaration = ast.Root.findImportsByModule(context.getSourceCode().ast.body, '@atlaskit/primitives');
+    if (importDeclaration.length > 1) {
+      return false;
+    }
+    return true;
+  },
+  _fix(node, {
+    context
+  }) {
+    return fixer => {
+      const importFix = upsertImportDeclaration({
+        module: '@atlaskit/primitives',
+        specifiers: ['Text']
+      }, context, fixer);
+      const elementNameFixes = ast.JSXElement.updateName(node, 'Text', fixer);
+      const asAttributeFix = ast.JSXElement.addAttribute(node, 'as', 'strong', fixer);
+      const testAttributeFix = updateTestIdAttributeFix(node, fixer);
+      return [importFix, ...elementNameFixes, asAttributeFix, testAttributeFix].filter(fix => Boolean(fix)); // Some of the transformers can return arrays with undefined, so filter them out
+    };
+  }
+};

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

@@ -1,4 +1,5 @@
 import { isNodeOfType, jsxIdentifier } from 'eslint-codemod-utils';
+import { JSXAttribute as HelperJSXAttribute } from './jsx-attribute';
 export var JSXElementHelper = {
   /**
    * Names of JSXElements can be any of:
@@ -6,8 +7,8 @@ export var 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) {
@@ -45,6 +46,36 @@ export var JSXElementHelper = {
     return node.openingElement.attributes.some(function (attr) {
       return 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 (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 (!isNodeOfType(attr, 'JSXAttribute')) {
+        return false;
+      }
+      var name = HelperJSXAttribute.getName(attr);
+      return allowedProps.includes(name);
+    });
   }
 };
 export { JSXElementHelper as JSXElement };

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::5647ce9c10ba880cffece66b5924fd6e>>
+ * @codegen <<SignedSource::98174f9eecc3be9d3a54506bcf2994ef>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -34,6 +34,7 @@ export 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/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::0a2813f0b87e94d23e1f6fc388539c70>>
+ * @codegen <<SignedSource::2687f4b835e076cef09f1fbbfdfc1b06>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
@@ -31,6 +31,7 @@ import useDrawerLabel from './use-drawer-label';
 import useHeadingLevelInSpotlightCard from './use-heading-level-in-spotlight-card';
 import useHrefInLinkItem from './use-href-in-link-item';
 import usePrimitives from './use-primitives';
+import usePrimitivesText from './use-primitives-text';
 import useVisuallyHidden from './use-visually-hidden';
 export default {
   'consistent-css-prop-usage': consistentCssPropUsage,
@@ -61,5 +62,6 @@ export default {
   'use-heading-level-in-spotlight-card': useHeadingLevelInSpotlightCard,
   'use-href-in-link-item': useHrefInLinkItem,
   'use-primitives': usePrimitives,
+  'use-primitives-text': usePrimitivesText,
   'use-visually-hidden': useVisuallyHidden
 };

package/dist/esm/rules/no-unsupported-drag-and-drop-libraries/paths.js

@@ -22,4 +22,7 @@ export var restrictedPaths = [{
 }, {
   path: '@dnd-kit',
   message: ''
+}, {
+  path: '@formkit/drag-and-drop',
+  message: ''
 }];

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

@@ -5,7 +5,6 @@ import { getIdentifierInParentScope, isNodeOfType } from 'eslint-codemod-utils';
 import * as ast from '../../../../ast-nodes';
 import { getVariableDefinitionValue, getVariableUsagesCount, isValidCssPropertiesToTransform } from '../../utils';
 import { cssToXcssTransformer } from '../css-to-xcss';
-import { containsOnlySupportedAttrs } from './contains-only-supported-attrs';
 import * as supported from './supported';
 import { upsertImportDeclaration } from './upsert-import-declaration';
 export var EmotionCSS = {
@@ -55,7 +54,7 @@ export var EmotionCSS = {
     }
 
     // Ignore elements that contain dangerous attributes like `id`.
-    if (!containsOnlySupportedAttrs(node)) {
+    if (!ast.JSXElement.hasAllowedAttrsOnly(node, supported.attributes)) {
       return false;
     }
 

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

@@ -0,0 +1,9 @@
+var defaults = {
+  patterns: ['paragraph-elements', 'span-elements', 'strong-elements', 'emphasis-elements']
+};
+export var 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/esm/rules/use-primitives-text/index.js

@@ -0,0 +1,51 @@
+import { createLintRule } from '../utils/create-rule';
+import { getConfig } from './config';
+import { EmphasisElements, ParagraphElements, SpanElements, StrongElements } from './transformers';
+var textDocsUrl = 'https://atlassian.design/components/primitives/text';
+var rule = 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 = getConfig(context.options[0]);
+    return {
+      'JSXElement[openingElement.name.name=span]': function JSXElementOpeningElementNameNameSpan(node) {
+        return SpanElements.lint(node, {
+          context: context,
+          config: config
+        });
+      },
+      'JSXElement[openingElement.name.name=p]': function JSXElementOpeningElementNameNameP(node) {
+        return ParagraphElements.lint(node, {
+          context: context,
+          config: config
+        });
+      },
+      'JSXElement[openingElement.name.name=strong]': function JSXElementOpeningElementNameNameStrong(node) {
+        return StrongElements.lint(node, {
+          context: context,
+          config: config
+        });
+      },
+      'JSXElement[openingElement.name.name=em]': function JSXElementOpeningElementNameNameEm(node) {
+        return EmphasisElements.lint(node, {
+          context: context,
+          config: config
+        });
+      }
+    };
+  }
+});
+export default rule;

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

@@ -0,0 +1,33 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import * as ast from '../../../ast-nodes';
+
+// Rename data-testid prop to testId if present
+export function updateTestIdAttributeFix(node, fixer) {
+  var testIdAttr = ast.JSXElement.getAttributeByName(node, 'data-testid');
+  if (testIdAttr) {
+    return ast.JSXAttribute.updateName(testIdAttr, 'testId', fixer);
+  }
+}
+export var 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
+export function hasTextChildrenOnly(node) {
+  var _node$children;
+  return (_node$children = node.children) === null || _node$children === void 0 ? void 0 : _node$children.every(function (child) {
+    if (isNodeOfType(child, 'JSXText')) {
+      return true;
+    }
+
+    // JSX child element <span><FormattedMessage /></span>
+    if (isNodeOfType(child, 'JSXElement') && ast.JSXElement.getName(child) === 'FormattedMessage') {
+      return true;
+    }
+
+    // JSX expression <span>{formatMessage(...)}</span>
+    if (isNodeOfType(child, 'JSXExpressionContainer') && isNodeOfType(child.expression, 'CallExpression')) {
+      return ast.FunctionCall.getName(child.expression) === 'formatMessage';
+    }
+    return false;
+  });
+}

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

@@ -0,0 +1,72 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+import * as ast from '../../../ast-nodes';
+import { upsertImportDeclaration } from '../../use-primitives/transformers/emotion-css/upsert-import-declaration';
+import { allowedAttrs, updateTestIdAttributeFix } from './common';
+export var EmphasisElements = {
+  lint: function lint(node, _ref) {
+    var context = _ref.context,
+      config = _ref.config;
+    if (!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, 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 = 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 = updateTestIdAttributeFix(node, fixer);
+      return [importFix].concat(_toConsumableArray(elementNameFixes), [asAttributeFix, testAttributeFix]).filter(function (fix) {
+        return Boolean(fix);
+      }); // Some of the transformers can return arrays with undefined, so filter them out
+    };
+  }
+};

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

@@ -0,0 +1,4 @@
+export { EmphasisElements } from './emphasis-elements';
+export { SpanElements } from './span-elements';
+export { StrongElements } from './strong-elements';
+export { ParagraphElements } from './paragraph-elements';

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

@@ -0,0 +1,186 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+import * as ast from '../../../ast-nodes';
+import { upsertImportDeclaration } from '../../use-primitives/transformers/emotion-css/upsert-import-declaration';
+import { allowedAttrs, updateTestIdAttributeFix } from './common';
+export var ParagraphElements = {
+  lint: function lint(node, _ref) {
+    var context = _ref.context,
+      config = _ref.config;
+    if (!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 (!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 (!isNodeOfType(child, 'JSXElement')) {
+          return false;
+        }
+        if (ast.JSXElement.getName(child) !== 'p') {
+          return false;
+        }
+        return ast.JSXElement.hasAllowedAttrsOnly(child, 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 = upsertImportDeclaration({
+        module: '@atlaskit/primitives',
+        specifiers: ['Text']
+      }, context, fixer);
+      var elementNameFixes = ast.JSXElement.updateName(node, 'Text', fixer);
+      var testAttributeFix = updateTestIdAttributeFix(node, fixer);
+      return [importFix].concat(_toConsumableArray(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 (!isNodeOfType(node.parent, 'JSXElement') || !node.parent.closingElement) {
+        return [];
+      }
+      var importFix = upsertImportDeclaration({
+        module: '@atlaskit/primitives',
+        specifiers: ['Text', 'Stack']
+      }, context, fixer);
+
+      // Update all siblings elements and their attributes
+      var siblingFixes = refs.siblings.map(function (sibling) {
+        if (isNodeOfType(sibling, 'JSXElement')) {
+          var elementNameFixes = ast.JSXElement.updateName(sibling, 'Text', fixer);
+          var testAttributeFix = updateTestIdAttributeFix(sibling, fixer);
+          return [].concat(_toConsumableArray(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(_toConsumableArray(siblingFixes), [wrapperOpenElementFix, wrapperCloseElementFix]).filter(function (fix) {
+        return Boolean(fix);
+      }); // Some of the transformers can return arrays with undefined, so filter them out
+    };
+  }
+};