@atlaskit/eslint-plugin-design-system 10.4.5 → 10.6.0

package/dist/es2019/rules/no-legacy-icons/index.js

@@ -0,0 +1,133 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { createLintRule } from '../utils/create-rule';
+const rule = createLintRule({
+  meta: {
+    name: 'no-legacy-icons',
+    type: 'problem',
+    docs: {
+      description: 'Enforces no legacy icons are used.',
+      recommended: false,
+      severity: 'warn'
+    },
+    messages: {
+      noLegacyIcons: `Legacy icon '{{iconName}}', is being rendered from import '{{importSource}}'. Migrate to an icon from '@atlaskit/icon/(core|utility)', or '@atlaskit/icon-labs/(core|utility)'.
+Learn more in our [code migration guide](https://hello.atlassian.net/wiki/spaces/DST/pages/3748692796/New+ADS+iconography+-+Code+migration+guide).`
+    }
+  },
+  create(context) {
+    const legacyIconImports = {};
+    return {
+      ImportDeclaration(node) {
+        const moduleSource = node.source.value;
+        if (typeof moduleSource === 'string' && ['@atlaskit/icon/glyph/', '@atlaskit/icon-object/glyph/'].find(val => moduleSource.startsWith(val)) && node.specifiers.length) {
+          const defaultImport = node.specifiers.find(spec => spec.type === 'ImportDefaultSpecifier');
+          if (!defaultImport) {
+            return;
+          }
+          const defaultImportName = defaultImport.local.name;
+          legacyIconImports[defaultImportName] = moduleSource;
+        }
+      },
+      VariableDeclaration(node) {
+        if (isNodeOfType(node, 'VariableDeclaration')) {
+          for (const decl of node.declarations) {
+            if (isNodeOfType(decl, 'VariableDeclarator') && 'init' in decl && 'id' in decl && decl.init && decl.id && 'name' in decl.id && decl.id.name && isNodeOfType(decl.init, 'Identifier') && decl.init.name in legacyIconImports) {
+              legacyIconImports[decl.id.name] = legacyIconImports[decl.init.name];
+            }
+          }
+        }
+      },
+      ExportDefaultDeclaration(node) {
+        if ('declaration' in node && node.declaration && isNodeOfType(node.declaration, 'Identifier') && node.declaration.name in legacyIconImports) {
+          context.report({
+            node,
+            messageId: 'noLegacyIcons',
+            data: {
+              importSource: legacyIconImports[node.declaration.name],
+              iconName: node.declaration.name
+            }
+          });
+        }
+      },
+      ExportNamedDeclaration(node) {
+        if ('source' in node && node.source && isNodeOfType(node.source, 'Literal') && 'value' in node.source) {
+          const moduleSource = node.source.value;
+          if (typeof moduleSource === 'string' && ['@atlaskit/icon/glyph/', '@atlaskit/icon-object/glyph/'].find(val => moduleSource.startsWith(val)) && node.specifiers.length) {
+            context.report({
+              node,
+              messageId: 'noLegacyIcons',
+              data: {
+                importSource: moduleSource,
+                iconName: node.specifiers[0].exported.name
+              }
+            });
+          }
+        } else if ('declaration' in node && node.declaration && isNodeOfType(node.declaration, 'VariableDeclaration')) {
+          for (const decl of node.declaration.declarations) {
+            if (isNodeOfType(decl, 'VariableDeclarator') && 'init' in decl && decl.init && isNodeOfType(decl.init, 'Identifier') && decl.init.name in legacyIconImports) {
+              context.report({
+                node,
+                messageId: 'noLegacyIcons',
+                data: {
+                  importSource: legacyIconImports[decl.init.name],
+                  iconName: decl.init.name
+                }
+              });
+            }
+          }
+        }
+      },
+      JSXAttribute(node) {
+        if (!isNodeOfType(node.value, 'JSXExpressionContainer')) {
+          return;
+        }
+        if (isNodeOfType(node.value.expression, 'Identifier') && node.value.expression.name in legacyIconImports && isNodeOfType(node.name, 'JSXIdentifier') && !node.name.name.startsWith('LEGACY_')) {
+          context.report({
+            node,
+            messageId: 'noLegacyIcons',
+            data: {
+              importSource: legacyIconImports[node.value.expression.name],
+              iconName: node.value.expression.name
+            }
+          });
+        }
+      },
+      JSXElement(node) {
+        if (!isNodeOfType(node, 'JSXElement')) {
+          return;
+        }
+        if (!isNodeOfType(node.openingElement.name, 'JSXIdentifier')) {
+          return;
+        }
+        const name = node.openingElement.name.name;
+        if (name in legacyIconImports) {
+          context.report({
+            node,
+            messageId: 'noLegacyIcons',
+            data: {
+              importSource: legacyIconImports[name],
+              iconName: name
+            }
+          });
+        }
+      },
+      CallExpression(node) {
+        if ('arguments' in node && node.arguments.length) {
+          for (const arg of node.arguments) {
+            if (isNodeOfType(arg, 'Identifier') && arg.name in legacyIconImports) {
+              context.report({
+                node: arg,
+                messageId: 'noLegacyIcons',
+                data: {
+                  importSource: legacyIconImports[arg.name],
+                  iconName: arg.name
+                }
+              });
+            }
+          }
+        }
+      }
+    };
+  }
+});
+export default rule;

package/dist/es2019/rules/use-menu-section-title/index.js

@@ -0,0 +1,79 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { createLintRule } from '../utils/create-rule';
+const elementsAccessibleNameProps = ['title', 'titleId'];
+const rule = createLintRule({
+  meta: {
+    name: 'use-menu-section-title',
+    type: 'suggestion',
+    docs: {
+      description: 'Encourages makers to provide accessible title for Atlassian Design System Menu Section component.',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      missingTitleProp: 'Missing accessible title. If there is no visible content to associate use `title` prop, otherwise pass id of element to `titleId` prop to be associated as label.',
+      titlePropShouldHaveContents: 'Define the string that labels the interactive element.',
+      titleIdShouldHaveValue: '`titleId` should reference the id of the element that defines the accessible name.',
+      noBothPropsUsage: 'Do not include both `titleId` and `title` properties. Use `titleId` if the label text is available in the DOM to reference it, otherwise use `title` to provide accessible name explicitly.'
+    },
+    hasSuggestions: true
+  },
+  create(context) {
+    const contextLocalIdentifier = [];
+    return {
+      ImportDeclaration(node) {
+        var _node$specifiers;
+        const menuSectionIdentifier = (_node$specifiers = node.specifiers) === null || _node$specifiers === void 0 ? void 0 : _node$specifiers.filter(spec => {
+          if (node.source.value === '@atlaskit/menu') {
+            var _spec$imported;
+            return spec.type === 'ImportSpecifier' && ((_spec$imported = spec.imported) === null || _spec$imported === void 0 ? void 0 : _spec$imported.name) === 'Section';
+          } else if (node.source.value === '@atlaskit/menu/section') {
+            return spec.type === 'ImportDefaultSpecifier';
+          }
+        });
+        if (menuSectionIdentifier !== null && menuSectionIdentifier !== void 0 && menuSectionIdentifier.length) {
+          const {
+            local
+          } = menuSectionIdentifier[0];
+          contextLocalIdentifier.push(local.name);
+        }
+      },
+      JSXElement(node) {
+        if (!isNodeOfType(node, 'JSXElement')) {
+          return;
+        }
+        if (!isNodeOfType(node.openingElement.name, 'JSXIdentifier')) {
+          return;
+        }
+        const name = node.openingElement.name.name;
+        if (contextLocalIdentifier.includes(name)) {
+          const componentLabelProps = node.openingElement.attributes.filter(attr => isNodeOfType(attr, 'JSXAttribute') && isNodeOfType(attr.name, 'JSXIdentifier') && elementsAccessibleNameProps.includes(attr.name.name));
+          if (componentLabelProps.length === 1) {
+            const prop = componentLabelProps[0];
+            if ('value' in prop && prop.value) {
+              if (isNodeOfType(prop.value, 'Literal') && !prop.value.value || isNodeOfType(prop.value, 'JSXExpressionContainer') && !prop.value.expression) {
+                context.report({
+                  node: prop,
+                  messageId: prop.name.name === 'title' ? 'titlePropShouldHaveContents' : 'titleIdShouldHaveValue'
+                });
+              }
+            }
+          } else if (componentLabelProps.length > 1) {
+            context.report({
+              node: node.openingElement,
+              messageId: 'noBothPropsUsage'
+            });
+          } else {
+            context.report({
+              node: node.openingElement,
+              messageId: 'missingTitleProp'
+            });
+          }
+        }
+      }
+    };
+  }
+});
+export default rule;

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::ed09a41b825250124299d53a17b16b74>>
+ * @codegen <<SignedSource::837556032f39113ae86785a120bb9ccb>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -23,6 +23,7 @@ export default {
     '@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-legacy-icons': 'warn',
     '@atlaskit/design-system/no-margin': 'warn',
     '@atlaskit/design-system/no-nested-styles': 'error',
     '@atlaskit/design-system/no-physical-properties': 'error',
@@ -37,6 +38,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-latest-xcss-syntax': 'error',
+    '@atlaskit/design-system/use-menu-section-title': 'warn',
     '@atlaskit/design-system/use-popup-label': 'warn',
     '@atlaskit/design-system/use-primitives': 'warn',
     '@atlaskit/design-system/use-primitives-text': 'warn',

package/dist/esm/presets/recommended.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::f5a2e39689cb7db642a65999cdc6f03a>>
+ * @codegen <<SignedSource::b7ed527a03208f0bc68f9d34e4ef2260>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -28,6 +28,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-latest-xcss-syntax': 'error',
+    '@atlaskit/design-system/use-menu-section-title': 'warn',
     '@atlaskit/design-system/use-popup-label': '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::920113eedc2218488bff48b528364867>>
+ * @codegen <<SignedSource::287628b11d396c2bcbcf6f4a175a3d3a>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
@@ -20,6 +20,7 @@ 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 noLegacyIcons from './no-legacy-icons';
 import noMargin from './no-margin';
 import noNestedStyles from './no-nested-styles';
 import noPhysicalProperties from './no-physical-properties';
@@ -34,6 +35,7 @@ import useHeading from './use-heading';
 import useHeadingLevelInSpotlightCard from './use-heading-level-in-spotlight-card';
 import useHrefInLinkItem from './use-href-in-link-item';
 import useLatestXcssSyntax from './use-latest-xcss-syntax';
+import useMenuSectionTitle from './use-menu-section-title';
 import usePopupLabel from './use-popup-label';
 import usePrimitives from './use-primitives';
 import usePrimitivesText from './use-primitives-text';
@@ -58,6 +60,7 @@ export default {
   'no-html-button': noHtmlButton,
   'no-invalid-css-map': noInvalidCssMap,
   'no-keyframes-tagged-template-expression': noKeyframesTaggedTemplateExpression,
+  'no-legacy-icons': noLegacyIcons,
   'no-margin': noMargin,
   'no-nested-styles': noNestedStyles,
   'no-physical-properties': noPhysicalProperties,
@@ -72,6 +75,7 @@ export default {
   'use-heading-level-in-spotlight-card': useHeadingLevelInSpotlightCard,
   'use-href-in-link-item': useHrefInLinkItem,
   'use-latest-xcss-syntax': useLatestXcssSyntax,
+  'use-menu-section-title': useMenuSectionTitle,
   'use-popup-label': usePopupLabel,
   'use-primitives': usePrimitives,
   'use-primitives-text': usePrimitivesText,

package/dist/esm/rules/no-legacy-icons/index.js

@@ -0,0 +1,168 @@
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { createLintRule } from '../utils/create-rule';
+var rule = createLintRule({
+  meta: {
+    name: 'no-legacy-icons',
+    type: 'problem',
+    docs: {
+      description: 'Enforces no legacy icons are used.',
+      recommended: false,
+      severity: 'warn'
+    },
+    messages: {
+      noLegacyIcons: "Legacy icon '{{iconName}}', is being rendered from import '{{importSource}}'. Migrate to an icon from '@atlaskit/icon/(core|utility)', or '@atlaskit/icon-labs/(core|utility)'.\nLearn more in our [code migration guide](https://hello.atlassian.net/wiki/spaces/DST/pages/3748692796/New+ADS+iconography+-+Code+migration+guide)."
+    }
+  },
+  create: function create(context) {
+    var legacyIconImports = {};
+    return {
+      ImportDeclaration: function ImportDeclaration(node) {
+        var moduleSource = node.source.value;
+        if (typeof moduleSource === 'string' && ['@atlaskit/icon/glyph/', '@atlaskit/icon-object/glyph/'].find(function (val) {
+          return moduleSource.startsWith(val);
+        }) && node.specifiers.length) {
+          var defaultImport = node.specifiers.find(function (spec) {
+            return spec.type === 'ImportDefaultSpecifier';
+          });
+          if (!defaultImport) {
+            return;
+          }
+          var defaultImportName = defaultImport.local.name;
+          legacyIconImports[defaultImportName] = moduleSource;
+        }
+      },
+      VariableDeclaration: function VariableDeclaration(node) {
+        if (isNodeOfType(node, 'VariableDeclaration')) {
+          var _iterator = _createForOfIteratorHelper(node.declarations),
+            _step;
+          try {
+            for (_iterator.s(); !(_step = _iterator.n()).done;) {
+              var decl = _step.value;
+              if (isNodeOfType(decl, 'VariableDeclarator') && 'init' in decl && 'id' in decl && decl.init && decl.id && 'name' in decl.id && decl.id.name && isNodeOfType(decl.init, 'Identifier') && decl.init.name in legacyIconImports) {
+                legacyIconImports[decl.id.name] = legacyIconImports[decl.init.name];
+              }
+            }
+          } catch (err) {
+            _iterator.e(err);
+          } finally {
+            _iterator.f();
+          }
+        }
+      },
+      ExportDefaultDeclaration: function ExportDefaultDeclaration(node) {
+        if ('declaration' in node && node.declaration && isNodeOfType(node.declaration, 'Identifier') && node.declaration.name in legacyIconImports) {
+          context.report({
+            node: node,
+            messageId: 'noLegacyIcons',
+            data: {
+              importSource: legacyIconImports[node.declaration.name],
+              iconName: node.declaration.name
+            }
+          });
+        }
+      },
+      ExportNamedDeclaration: function ExportNamedDeclaration(node) {
+        if ('source' in node && node.source && isNodeOfType(node.source, 'Literal') && 'value' in node.source) {
+          var moduleSource = node.source.value;
+          if (typeof moduleSource === 'string' && ['@atlaskit/icon/glyph/', '@atlaskit/icon-object/glyph/'].find(function (val) {
+            return moduleSource.startsWith(val);
+          }) && node.specifiers.length) {
+            context.report({
+              node: node,
+              messageId: 'noLegacyIcons',
+              data: {
+                importSource: moduleSource,
+                iconName: node.specifiers[0].exported.name
+              }
+            });
+          }
+        } else if ('declaration' in node && node.declaration && isNodeOfType(node.declaration, 'VariableDeclaration')) {
+          var _iterator2 = _createForOfIteratorHelper(node.declaration.declarations),
+            _step2;
+          try {
+            for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+              var decl = _step2.value;
+              if (isNodeOfType(decl, 'VariableDeclarator') && 'init' in decl && decl.init && isNodeOfType(decl.init, 'Identifier') && decl.init.name in legacyIconImports) {
+                context.report({
+                  node: node,
+                  messageId: 'noLegacyIcons',
+                  data: {
+                    importSource: legacyIconImports[decl.init.name],
+                    iconName: decl.init.name
+                  }
+                });
+              }
+            }
+          } catch (err) {
+            _iterator2.e(err);
+          } finally {
+            _iterator2.f();
+          }
+        }
+      },
+      JSXAttribute: function JSXAttribute(node) {
+        if (!isNodeOfType(node.value, 'JSXExpressionContainer')) {
+          return;
+        }
+        if (isNodeOfType(node.value.expression, 'Identifier') && node.value.expression.name in legacyIconImports && isNodeOfType(node.name, 'JSXIdentifier') && !node.name.name.startsWith('LEGACY_')) {
+          context.report({
+            node: node,
+            messageId: 'noLegacyIcons',
+            data: {
+              importSource: legacyIconImports[node.value.expression.name],
+              iconName: node.value.expression.name
+            }
+          });
+        }
+      },
+      JSXElement: function JSXElement(node) {
+        if (!isNodeOfType(node, 'JSXElement')) {
+          return;
+        }
+        if (!isNodeOfType(node.openingElement.name, 'JSXIdentifier')) {
+          return;
+        }
+        var name = node.openingElement.name.name;
+        if (name in legacyIconImports) {
+          context.report({
+            node: node,
+            messageId: 'noLegacyIcons',
+            data: {
+              importSource: legacyIconImports[name],
+              iconName: name
+            }
+          });
+        }
+      },
+      CallExpression: function CallExpression(node) {
+        if ('arguments' in node && node.arguments.length) {
+          var _iterator3 = _createForOfIteratorHelper(node.arguments),
+            _step3;
+          try {
+            for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+              var arg = _step3.value;
+              if (isNodeOfType(arg, 'Identifier') && arg.name in legacyIconImports) {
+                context.report({
+                  node: arg,
+                  messageId: 'noLegacyIcons',
+                  data: {
+                    importSource: legacyIconImports[arg.name],
+                    iconName: arg.name
+                  }
+                });
+              }
+            }
+          } catch (err) {
+            _iterator3.e(err);
+          } finally {
+            _iterator3.f();
+          }
+        }
+      }
+    };
+  }
+});
+export default rule;

package/dist/esm/rules/use-menu-section-title/index.js

@@ -0,0 +1,79 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { createLintRule } from '../utils/create-rule';
+var elementsAccessibleNameProps = ['title', 'titleId'];
+var rule = createLintRule({
+  meta: {
+    name: 'use-menu-section-title',
+    type: 'suggestion',
+    docs: {
+      description: 'Encourages makers to provide accessible title for Atlassian Design System Menu Section component.',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      missingTitleProp: 'Missing accessible title. If there is no visible content to associate use `title` prop, otherwise pass id of element to `titleId` prop to be associated as label.',
+      titlePropShouldHaveContents: 'Define the string that labels the interactive element.',
+      titleIdShouldHaveValue: '`titleId` should reference the id of the element that defines the accessible name.',
+      noBothPropsUsage: 'Do not include both `titleId` and `title` properties. Use `titleId` if the label text is available in the DOM to reference it, otherwise use `title` to provide accessible name explicitly.'
+    },
+    hasSuggestions: true
+  },
+  create: function create(context) {
+    var contextLocalIdentifier = [];
+    return {
+      ImportDeclaration: function ImportDeclaration(node) {
+        var _node$specifiers;
+        var menuSectionIdentifier = (_node$specifiers = node.specifiers) === null || _node$specifiers === void 0 ? void 0 : _node$specifiers.filter(function (spec) {
+          if (node.source.value === '@atlaskit/menu') {
+            var _spec$imported;
+            return spec.type === 'ImportSpecifier' && ((_spec$imported = spec.imported) === null || _spec$imported === void 0 ? void 0 : _spec$imported.name) === 'Section';
+          } else if (node.source.value === '@atlaskit/menu/section') {
+            return spec.type === 'ImportDefaultSpecifier';
+          }
+        });
+        if (menuSectionIdentifier !== null && menuSectionIdentifier !== void 0 && menuSectionIdentifier.length) {
+          var local = menuSectionIdentifier[0].local;
+          contextLocalIdentifier.push(local.name);
+        }
+      },
+      JSXElement: function JSXElement(node) {
+        if (!isNodeOfType(node, 'JSXElement')) {
+          return;
+        }
+        if (!isNodeOfType(node.openingElement.name, 'JSXIdentifier')) {
+          return;
+        }
+        var name = node.openingElement.name.name;
+        if (contextLocalIdentifier.includes(name)) {
+          var componentLabelProps = node.openingElement.attributes.filter(function (attr) {
+            return isNodeOfType(attr, 'JSXAttribute') && isNodeOfType(attr.name, 'JSXIdentifier') && elementsAccessibleNameProps.includes(attr.name.name);
+          });
+          if (componentLabelProps.length === 1) {
+            var prop = componentLabelProps[0];
+            if ('value' in prop && prop.value) {
+              if (isNodeOfType(prop.value, 'Literal') && !prop.value.value || isNodeOfType(prop.value, 'JSXExpressionContainer') && !prop.value.expression) {
+                context.report({
+                  node: prop,
+                  messageId: prop.name.name === 'title' ? 'titlePropShouldHaveContents' : 'titleIdShouldHaveValue'
+                });
+              }
+            }
+          } else if (componentLabelProps.length > 1) {
+            context.report({
+              node: node.openingElement,
+              messageId: 'noBothPropsUsage'
+            });
+          } else {
+            context.report({
+              node: node.openingElement,
+              messageId: 'missingTitleProp'
+            });
+          }
+        }
+      }
+    };
+  }
+});
+export default rule;

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

@@ -20,6 +20,7 @@ export declare const configs: {
             '@atlaskit/design-system/no-html-button': string;
             '@atlaskit/design-system/no-invalid-css-map': string;
             '@atlaskit/design-system/no-keyframes-tagged-template-expression': string;
+            '@atlaskit/design-system/no-legacy-icons': string;
             '@atlaskit/design-system/no-margin': string;
             '@atlaskit/design-system/no-nested-styles': string;
             '@atlaskit/design-system/no-physical-properties': string;
@@ -34,6 +35,7 @@ export declare const configs: {
             '@atlaskit/design-system/use-heading-level-in-spotlight-card': string;
             '@atlaskit/design-system/use-href-in-link-item': string;
             '@atlaskit/design-system/use-latest-xcss-syntax': string;
+            '@atlaskit/design-system/use-menu-section-title': string;
             '@atlaskit/design-system/use-popup-label': string;
             '@atlaskit/design-system/use-primitives': string;
             '@atlaskit/design-system/use-primitives-text': string;
@@ -67,6 +69,7 @@ export declare const configs: {
             '@atlaskit/design-system/use-heading-level-in-spotlight-card': string;
             '@atlaskit/design-system/use-href-in-link-item': string;
             '@atlaskit/design-system/use-latest-xcss-syntax': string;
+            '@atlaskit/design-system/use-menu-section-title': string;
             '@atlaskit/design-system/use-popup-label': string;
             '@atlaskit/design-system/use-visually-hidden': 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::ed09a41b825250124299d53a17b16b74>>
+ * @codegen <<SignedSource::837556032f39113ae86785a120bb9ccb>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 declare const _default: {
@@ -23,6 +23,7 @@ declare const _default: {
         '@atlaskit/design-system/no-html-button': string;
         '@atlaskit/design-system/no-invalid-css-map': string;
         '@atlaskit/design-system/no-keyframes-tagged-template-expression': string;
+        '@atlaskit/design-system/no-legacy-icons': string;
         '@atlaskit/design-system/no-margin': string;
         '@atlaskit/design-system/no-nested-styles': string;
         '@atlaskit/design-system/no-physical-properties': string;
@@ -37,6 +38,7 @@ declare const _default: {
         '@atlaskit/design-system/use-heading-level-in-spotlight-card': string;
         '@atlaskit/design-system/use-href-in-link-item': string;
         '@atlaskit/design-system/use-latest-xcss-syntax': string;
+        '@atlaskit/design-system/use-menu-section-title': string;
         '@atlaskit/design-system/use-popup-label': string;
         '@atlaskit/design-system/use-primitives': string;
         '@atlaskit/design-system/use-primitives-text': string;

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::f5a2e39689cb7db642a65999cdc6f03a>>
+ * @codegen <<SignedSource::b7ed527a03208f0bc68f9d34e4ef2260>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 declare const _default: {
@@ -28,6 +28,7 @@ declare const _default: {
         '@atlaskit/design-system/use-heading-level-in-spotlight-card': string;
         '@atlaskit/design-system/use-href-in-link-item': string;
         '@atlaskit/design-system/use-latest-xcss-syntax': string;
+        '@atlaskit/design-system/use-menu-section-title': string;
         '@atlaskit/design-system/use-popup-label': string;
         '@atlaskit/design-system/use-visually-hidden': string;
     };

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

@@ -20,6 +20,7 @@ declare const _default: {
     'no-html-button': import("eslint").Rule.RuleModule;
     'no-invalid-css-map': import("eslint").Rule.RuleModule;
     'no-keyframes-tagged-template-expression': import("eslint").Rule.RuleModule;
+    'no-legacy-icons': import("eslint").Rule.RuleModule;
     'no-margin': import("eslint").Rule.RuleModule;
     'no-nested-styles': import("eslint").Rule.RuleModule;
     'no-physical-properties': import("eslint").Rule.RuleModule;
@@ -34,6 +35,7 @@ declare const _default: {
     'use-heading-level-in-spotlight-card': import("eslint").Rule.RuleModule;
     'use-href-in-link-item': import("eslint").Rule.RuleModule;
     'use-latest-xcss-syntax': import("eslint").Rule.RuleModule;
+    'use-menu-section-title': import("eslint").Rule.RuleModule;
     'use-popup-label': import("eslint").Rule.RuleModule;
     'use-primitives': import("eslint").Rule.RuleModule;
     'use-primitives-text': import("eslint").Rule.RuleModule;

package/dist/types/rules/no-legacy-icons/index.d.ts

@@ -0,0 +1,2 @@
+declare const rule: import("eslint").Rule.RuleModule;
+export default rule;

package/dist/types/rules/use-menu-section-title/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/index.codegen.d.ts

@@ -20,6 +20,7 @@ export declare const configs: {
             '@atlaskit/design-system/no-html-button': string;
             '@atlaskit/design-system/no-invalid-css-map': string;
             '@atlaskit/design-system/no-keyframes-tagged-template-expression': string;
+            '@atlaskit/design-system/no-legacy-icons': string;
             '@atlaskit/design-system/no-margin': string;
             '@atlaskit/design-system/no-nested-styles': string;
             '@atlaskit/design-system/no-physical-properties': string;
@@ -34,6 +35,7 @@ export declare const configs: {
             '@atlaskit/design-system/use-heading-level-in-spotlight-card': string;
             '@atlaskit/design-system/use-href-in-link-item': string;
             '@atlaskit/design-system/use-latest-xcss-syntax': string;
+            '@atlaskit/design-system/use-menu-section-title': string;
             '@atlaskit/design-system/use-popup-label': string;
             '@atlaskit/design-system/use-primitives': string;
             '@atlaskit/design-system/use-primitives-text': string;
@@ -67,6 +69,7 @@ export declare const configs: {
             '@atlaskit/design-system/use-heading-level-in-spotlight-card': string;
             '@atlaskit/design-system/use-href-in-link-item': string;
             '@atlaskit/design-system/use-latest-xcss-syntax': string;
+            '@atlaskit/design-system/use-menu-section-title': string;
             '@atlaskit/design-system/use-popup-label': string;
             '@atlaskit/design-system/use-visually-hidden': string;
         };