@atlaskit/eslint-plugin-design-system 8.20.0 → 8.22.0

package/dist/es2019/rules/consistent-css-prop-usage/index.js

@@ -3,8 +3,8 @@
 import { getIdentifierInParentScope, isNodeOfType } from 'eslint-codemod-utils';
 import assign from 'lodash/assign';
 import { createLintRule } from '../utils/create-rule';
-const declarationSuffix = 'Styles';
 function isCssCallExpression(node, cssFunctions) {
+  cssFunctions = [...cssFunctions, 'cssMap'];
   return !!(isNodeOfType(node, 'CallExpression') && node.callee && node.callee.type === 'Identifier' && cssFunctions.includes(node.callee.name) && node.arguments.length && node.arguments[0].type === 'ObjectExpression');
 }
 function findSpreadProperties(node) {
@@ -13,6 +13,42 @@ function findSpreadProperties(node) {
   // @ts-ignore
   property.type === 'ExperimentalSpreadProperty');
 }
+const getTopLevelNode = expression => {
+  while (expression.parent.type !== 'Program') {
+    expression = expression.parent;
+  }
+  return expression;
+};
+
+// TODO: This can be optimised by implementing a fixer at the very end (Program:exit) and handling all validations at once
+/**
+ * Generates the declarator string when fixing the cssOnTopOfModule/cssAtBottomOfModule cases.
+ * When `styles` already exists, `styles_1, styles_2, ..., styles_X` are incrementally created for each unhoisted style.
+ * The generated `styles` varibale declaration names must be manually modified to be more informative at the discretion of owning teams.
+ */
+const getDeclaratorString = context => {
+  let scope = context.getScope();
+
+  // Get to ModuleScope
+  while (scope && scope.upper && scope.upper.type !== 'global') {
+    var _scope;
+    scope = (_scope = scope) === null || _scope === void 0 ? void 0 : _scope.upper;
+  }
+  const variables = scope.variables.map(variable => variable.name);
+  let count = 2;
+  let declaratorName = 'styles';
+
+  // Base case
+  if (!variables.includes(declaratorName)) {
+    return declaratorName;
+  } else {
+    // If styles already exists, increment the number
+    while (variables.includes(`${declaratorName}_${count}`)) {
+      count++;
+    }
+  }
+  return `${declaratorName}_${count}`;
+};
 function analyzeIdentifier(context, sourceIdentifier, configuration) {
   var _getIdentifierInParen, _getIdentifierInParen2;
   const scope = context.getScope();
@@ -33,11 +69,14 @@ function analyzeIdentifier(context, sourceIdentifier, configuration) {
     // When variable is declared inside the component
     context.report({
       node: sourceIdentifier,
-      messageId: configuration.stylesPlacement === 'bottom' ? 'cssAtBottomOfModule' : 'cssOnTopOfModule'
+      messageId: configuration.stylesPlacement === 'bottom' ? 'cssAtBottomOfModule' : 'cssOnTopOfModule',
+      fix: fixer => {
+        return fixCssNotInModuleScope(fixer, context, configuration, identifier);
+      }
     });
     return;
   }
-  if (identifier.parent && identifier.parent.init && !isCssCallExpression(identifier.parent.init, [...configuration.cssFunctions, 'cssMap'])) {
+  if (identifier.parent && identifier.parent.init && !isCssCallExpression(identifier.parent.init, configuration.cssFunctions)) {
     // When variable value is not of type css({})
     context.report({
       node: identifier,
@@ -57,13 +96,50 @@ function analyzeIdentifier(context, sourceIdentifier, configuration) {
   }
 }
 
+/**
+ * Fixer for the cssOnTopOfModule/cssAtBottomOfModule violation cases.
+ * This deals with Identifiers and Expressions passed from the traverseExpressionWithConfig() function.
+ * @param fixer The ESLint RuleFixer object
+ * @param context The context of the node
+ * @param configuration The configuration of the rule, determining whether the fix is implmeneted at the top or bottom of the module
+ * @param node Either an IdentifierWithParent node. Expression, or SpreadElement that we handle
+ * @param cssAttributeName An optional parameter only added when we fix an ObjectExpression
+ */
+const fixCssNotInModuleScope = (fixer, context, configuration, node, cssAttributeName) => {
+  const sourceCode = context.getSourceCode();
+  const topLevelNode = getTopLevelNode(node);
+  let moduleString;
+  let implementFixer = [];
+  if (node.type === 'Identifier') {
+    const identifier = node;
+    const declarator = identifier.parent.parent;
+    moduleString = sourceCode.getText(declarator);
+    implementFixer.push(fixer.remove(declarator));
+  } else {
+    const declarator = getDeclaratorString(context);
+    const text = sourceCode.getText(node);
+
+    // If this has been passed, then we know it's an ObjectExpression
+    if (cssAttributeName) {
+      moduleString = `const ${declarator} = ${cssAttributeName}(${text});`;
+    } else {
+      moduleString = moduleString = `const ${declarator} = ${text};`;
+    }
+    implementFixer.push(fixer.replaceText(node, declarator));
+  }
+  return [...implementFixer,
+  // Insert the node either before or after
+  configuration.stylesPlacement === 'bottom' ? fixer.insertTextAfter(topLevelNode, '\n' + moduleString) : fixer.insertTextBefore(topLevelNode, moduleString + '\n')];
+};
+
 /**
  * Handle different cases based on what's been passed in the css-related JSXAttribute
  * @param context the context of the node
  * @param expression the expression of the JSXAttribute value
  * @param configuration what css-related functions to account for (eg. css, xcss, cssMap), and whether to detect bottom vs top expressions
+ * @param cssAttributeName used to encapsulate ObjectExpressions when cssOnTopOfModule/cssAtBottomOfModule violations are triggered
  */
-const traverseExpressionWithConfig = (context, expression, configuration) => {
+const traverseExpressionWithConfig = (context, expression, configuration, cssAttributeName) => {
   function traverseExpression(expression) {
     switch (expression.type) {
       case 'Identifier':
@@ -89,14 +165,24 @@ const traverseExpressionWithConfig = (context, expression, configuration) => {
         traverseExpression(expression.consequent);
         traverseExpression(expression.alternate);
         break;
-      case 'CallExpression':
       case 'ObjectExpression':
+      case 'CallExpression':
       case 'TaggedTemplateExpression':
       case 'TemplateLiteral':
         // We've found elements that shouldn't be here! Report an error.
         context.report({
           node: expression,
-          messageId: configuration.stylesPlacement === 'bottom' ? 'cssAtBottomOfModule' : 'cssOnTopOfModule'
+          messageId: configuration.stylesPlacement === 'bottom' ? 'cssAtBottomOfModule' : 'cssOnTopOfModule',
+          fix: fixer => {
+            // Don't fix CallExpressions unless they're from cssFunctions or cssMap
+            if (expression.type === 'CallExpression' && !isCssCallExpression(expression, configuration.cssFunctions)) {
+              return [];
+            }
+            if (expression.type === 'ObjectExpression') {
+              return fixCssNotInModuleScope(fixer, context, configuration, expression, cssAttributeName);
+            }
+            return fixCssNotInModuleScope(fixer, context, configuration, expression);
+          }
         });
         break;
       default:
@@ -131,6 +217,7 @@ const rule = createLintRule({
   },
   create(context) {
     const mergedConfig = assign({}, defaultConfig, context.options[0]);
+    const declarationSuffix = 'Styles';
     const callSelectorFunctions = [...mergedConfig.cssFunctions, 'cssMap'];
     const callSelector = callSelectorFunctions.map(fn => `CallExpression[callee.name=${fn}]`).join(',');
     return {
@@ -140,7 +227,7 @@ const rule = createLintRule({
           return;
         }
         const identifier = node.parent.id;
-        if (identifier.type === 'Identifier' && identifier.name.endsWith(declarationSuffix)) {
+        if (identifier.type === 'Identifier' && (identifier.name.endsWith(declarationSuffix) || identifier.name.startsWith(declarationSuffix.toLowerCase() + '_') || identifier.name === declarationSuffix.toLowerCase())) {
           // Already prefixed! Nothing to do.
           return;
         }
@@ -177,7 +264,7 @@ const rule = createLintRule({
             });
             return;
           }
-          traverseExpressionWithConfig(context, value.expression, mergedConfig);
+          traverseExpressionWithConfig(context, value.expression, mergedConfig, name.name);
         }
       }
     };

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::ab1f5b129d07027c228dbd79da5f3572>>
+ * @codegen <<SignedSource::14cdfdcbd8b999ee097a1a5b245d7117>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
@@ -19,6 +19,7 @@ import noUnsafeDesignTokenUsage from './no-unsafe-design-token-usage';
 import noUnsafeStyleOverrides from './no-unsafe-style-overrides';
 import noUnsupportedDragAndDropLibraries from './no-unsupported-drag-and-drop-libraries';
 import preferPrimitives from './prefer-primitives';
+import useButtonGroupLabel from './use-button-group-label';
 import useDrawerLabel from './use-drawer-label';
 import useHeadingLevelInSpotlightCard from './use-heading-level-in-spotlight-card';
 import useHrefInLinkItem from './use-href-in-link-item';
@@ -41,6 +42,7 @@ export default {
   'no-unsafe-style-overrides': noUnsafeStyleOverrides,
   'no-unsupported-drag-and-drop-libraries': noUnsupportedDragAndDropLibraries,
   'prefer-primitives': preferPrimitives,
+  'use-button-group-label': useButtonGroupLabel,
   'use-drawer-label': useDrawerLabel,
   'use-heading-level-in-spotlight-card': useHeadingLevelInSpotlightCard,
   'use-href-in-link-item': useHrefInLinkItem,

package/dist/es2019/rules/use-button-group-label/index.js

@@ -0,0 +1,75 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { createLintRule } from '../utils/create-rule';
+const elementsAccessibleNameProps = ['label', 'titleId'];
+const rule = createLintRule({
+  meta: {
+    name: 'use-button-group-label',
+    type: 'suggestion',
+    docs: {
+      description: 'Ensures button groups are described to assistive technology by a direct label or by another element.',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      missingLabelProp: 'Missing accessible name. If there is no visible content to associate use `label` prop, otherwise pass id of element to `titleId` prop to be associated as label.',
+      labelPropShouldHaveContents: 'Define string that labels the interactive element.',
+      titleIdShouldHaveValue: '`titleId` should reference the id of element that define accessible name.',
+      noBothPropsUsage: 'Do not include both `titleId` and `label` properties. Use `titleId` if the label text is available in the DOM to reference it, otherwise use `label` to provide accessible name explicitly.'
+    },
+    hasSuggestions: true
+  },
+  create(context) {
+    const contextLocalIdentifier = [];
+    return {
+      ImportDeclaration(node) {
+        if (node.source.value === '@atlaskit/button') {
+          if (node.specifiers.length) {
+            const defaultImport = node.specifiers.filter(spec => spec.type === 'ImportSpecifier');
+            if (defaultImport && defaultImport.length) {
+              const {
+                local
+              } = defaultImport[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 === 'label' ? 'labelPropShouldHaveContents' : 'titleIdShouldHaveValue'
+                });
+              }
+            }
+          } else if (componentLabelProps.length > 1) {
+            context.report({
+              node: node.openingElement,
+              messageId: 'noBothPropsUsage'
+            });
+          } else {
+            context.report({
+              node: node.openingElement,
+              messageId: 'missingLabelProp'
+            });
+          }
+        }
+      }
+    };
+  }
+});
+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::6efa1e48692b3e287d6dfcd500a5f0ab>>
+ * @codegen <<SignedSource::d1a459e1ea71650f65b2890dc86cc398>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -22,6 +22,7 @@ export default {
     '@atlaskit/design-system/no-unsafe-style-overrides': 'warn',
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/prefer-primitives': 'warn',
+    '@atlaskit/design-system/use-button-group-label': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
     '@atlaskit/design-system/use-href-in-link-item': 'warn',

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::be810d87ec2d253e3b053dc06ff1b99a>>
+ * @codegen <<SignedSource::3b93cfbbe0ea14514b9600509632394b>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -17,6 +17,7 @@ export default {
     '@atlaskit/design-system/no-unsafe-design-token-usage': 'error',
     '@atlaskit/design-system/no-unsafe-style-overrides': 'warn',
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
+    '@atlaskit/design-system/use-button-group-label': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
     '@atlaskit/design-system/use-href-in-link-item': 'warn',

package/dist/esm/rules/consistent-css-prop-usage/index.js

@@ -1,13 +1,13 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 // eslint-disable-next-line import/no-extraneous-dependencies
 
 import { getIdentifierInParentScope, isNodeOfType } from 'eslint-codemod-utils';
 import assign from 'lodash/assign';
 import { createLintRule } from '../utils/create-rule';
-var declarationSuffix = 'Styles';
 function isCssCallExpression(node, cssFunctions) {
+  cssFunctions = [].concat(_toConsumableArray(cssFunctions), ['cssMap']);
   return !!(isNodeOfType(node, 'CallExpression') && node.callee && node.callee.type === 'Identifier' && cssFunctions.includes(node.callee.name) && node.arguments.length && node.arguments[0].type === 'ObjectExpression');
 }
 function findSpreadProperties(node) {
@@ -18,6 +18,44 @@ function findSpreadProperties(node) {
     property.type === 'ExperimentalSpreadProperty';
   });
 }
+var getTopLevelNode = function getTopLevelNode(expression) {
+  while (expression.parent.type !== 'Program') {
+    expression = expression.parent;
+  }
+  return expression;
+};
+
+// TODO: This can be optimised by implementing a fixer at the very end (Program:exit) and handling all validations at once
+/**
+ * Generates the declarator string when fixing the cssOnTopOfModule/cssAtBottomOfModule cases.
+ * When `styles` already exists, `styles_1, styles_2, ..., styles_X` are incrementally created for each unhoisted style.
+ * The generated `styles` varibale declaration names must be manually modified to be more informative at the discretion of owning teams.
+ */
+var getDeclaratorString = function getDeclaratorString(context) {
+  var scope = context.getScope();
+
+  // Get to ModuleScope
+  while (scope && scope.upper && scope.upper.type !== 'global') {
+    var _scope;
+    scope = (_scope = scope) === null || _scope === void 0 ? void 0 : _scope.upper;
+  }
+  var variables = scope.variables.map(function (variable) {
+    return variable.name;
+  });
+  var count = 2;
+  var declaratorName = 'styles';
+
+  // Base case
+  if (!variables.includes(declaratorName)) {
+    return declaratorName;
+  } else {
+    // If styles already exists, increment the number
+    while (variables.includes("".concat(declaratorName, "_").concat(count))) {
+      count++;
+    }
+  }
+  return "".concat(declaratorName, "_").concat(count);
+};
 function analyzeIdentifier(context, sourceIdentifier, configuration) {
   var _getIdentifierInParen, _getIdentifierInParen2;
   var scope = context.getScope();
@@ -40,11 +78,14 @@ function analyzeIdentifier(context, sourceIdentifier, configuration) {
     // When variable is declared inside the component
     context.report({
       node: sourceIdentifier,
-      messageId: configuration.stylesPlacement === 'bottom' ? 'cssAtBottomOfModule' : 'cssOnTopOfModule'
+      messageId: configuration.stylesPlacement === 'bottom' ? 'cssAtBottomOfModule' : 'cssOnTopOfModule',
+      fix: function fix(fixer) {
+        return fixCssNotInModuleScope(fixer, context, configuration, identifier);
+      }
     });
     return;
   }
-  if (identifier.parent && identifier.parent.init && !isCssCallExpression(identifier.parent.init, [].concat(_toConsumableArray(configuration.cssFunctions), ['cssMap']))) {
+  if (identifier.parent && identifier.parent.init && !isCssCallExpression(identifier.parent.init, configuration.cssFunctions)) {
     // When variable value is not of type css({})
     context.report({
       node: identifier,
@@ -64,13 +105,50 @@ function analyzeIdentifier(context, sourceIdentifier, configuration) {
   }
 }
 
+/**
+ * Fixer for the cssOnTopOfModule/cssAtBottomOfModule violation cases.
+ * This deals with Identifiers and Expressions passed from the traverseExpressionWithConfig() function.
+ * @param fixer The ESLint RuleFixer object
+ * @param context The context of the node
+ * @param configuration The configuration of the rule, determining whether the fix is implmeneted at the top or bottom of the module
+ * @param node Either an IdentifierWithParent node. Expression, or SpreadElement that we handle
+ * @param cssAttributeName An optional parameter only added when we fix an ObjectExpression
+ */
+var fixCssNotInModuleScope = function fixCssNotInModuleScope(fixer, context, configuration, node, cssAttributeName) {
+  var sourceCode = context.getSourceCode();
+  var topLevelNode = getTopLevelNode(node);
+  var moduleString;
+  var implementFixer = [];
+  if (node.type === 'Identifier') {
+    var identifier = node;
+    var declarator = identifier.parent.parent;
+    moduleString = sourceCode.getText(declarator);
+    implementFixer.push(fixer.remove(declarator));
+  } else {
+    var _declarator = getDeclaratorString(context);
+    var text = sourceCode.getText(node);
+
+    // If this has been passed, then we know it's an ObjectExpression
+    if (cssAttributeName) {
+      moduleString = "const ".concat(_declarator, " = ").concat(cssAttributeName, "(").concat(text, ");");
+    } else {
+      moduleString = moduleString = "const ".concat(_declarator, " = ").concat(text, ";");
+    }
+    implementFixer.push(fixer.replaceText(node, _declarator));
+  }
+  return [].concat(implementFixer, [
+  // Insert the node either before or after
+  configuration.stylesPlacement === 'bottom' ? fixer.insertTextAfter(topLevelNode, '\n' + moduleString) : fixer.insertTextBefore(topLevelNode, moduleString + '\n')]);
+};
+
 /**
  * Handle different cases based on what's been passed in the css-related JSXAttribute
  * @param context the context of the node
  * @param expression the expression of the JSXAttribute value
  * @param configuration what css-related functions to account for (eg. css, xcss, cssMap), and whether to detect bottom vs top expressions
+ * @param cssAttributeName used to encapsulate ObjectExpressions when cssOnTopOfModule/cssAtBottomOfModule violations are triggered
  */
-var traverseExpressionWithConfig = function traverseExpressionWithConfig(context, expression, configuration) {
+var traverseExpressionWithConfig = function traverseExpressionWithConfig(context, expression, configuration, cssAttributeName) {
   function traverseExpression(expression) {
     switch (expression.type) {
       case 'Identifier':
@@ -98,14 +176,24 @@ var traverseExpressionWithConfig = function traverseExpressionWithConfig(context
         traverseExpression(expression.consequent);
         traverseExpression(expression.alternate);
         break;
-      case 'CallExpression':
       case 'ObjectExpression':
+      case 'CallExpression':
       case 'TaggedTemplateExpression':
       case 'TemplateLiteral':
         // We've found elements that shouldn't be here! Report an error.
         context.report({
           node: expression,
-          messageId: configuration.stylesPlacement === 'bottom' ? 'cssAtBottomOfModule' : 'cssOnTopOfModule'
+          messageId: configuration.stylesPlacement === 'bottom' ? 'cssAtBottomOfModule' : 'cssOnTopOfModule',
+          fix: function fix(fixer) {
+            // Don't fix CallExpressions unless they're from cssFunctions or cssMap
+            if (expression.type === 'CallExpression' && !isCssCallExpression(expression, configuration.cssFunctions)) {
+              return [];
+            }
+            if (expression.type === 'ObjectExpression') {
+              return fixCssNotInModuleScope(fixer, context, configuration, expression, cssAttributeName);
+            }
+            return fixCssNotInModuleScope(fixer, context, configuration, expression);
+          }
         });
         break;
       default:
@@ -141,6 +229,7 @@ var rule = createLintRule({
   create: function create(context) {
     var _ref3;
     var mergedConfig = assign({}, defaultConfig, context.options[0]);
+    var declarationSuffix = 'Styles';
     var callSelectorFunctions = [].concat(_toConsumableArray(mergedConfig.cssFunctions), ['cssMap']);
     var callSelector = callSelectorFunctions.map(function (fn) {
       return "CallExpression[callee.name=".concat(fn, "]");
@@ -151,7 +240,7 @@ var rule = createLintRule({
         return;
       }
       var identifier = node.parent.id;
-      if (identifier.type === 'Identifier' && identifier.name.endsWith(declarationSuffix)) {
+      if (identifier.type === 'Identifier' && (identifier.name.endsWith(declarationSuffix) || identifier.name.startsWith(declarationSuffix.toLowerCase() + '_') || identifier.name === declarationSuffix.toLowerCase())) {
         // Already prefixed! Nothing to do.
         return;
       }
@@ -189,7 +278,7 @@ var rule = createLintRule({
           });
           return;
         }
-        traverseExpressionWithConfig(context, value.expression, mergedConfig);
+        traverseExpressionWithConfig(context, value.expression, mergedConfig, name.name);
       }
     }), _ref3;
   }

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::ab1f5b129d07027c228dbd79da5f3572>>
+ * @codegen <<SignedSource::14cdfdcbd8b999ee097a1a5b245d7117>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
@@ -19,6 +19,7 @@ import noUnsafeDesignTokenUsage from './no-unsafe-design-token-usage';
 import noUnsafeStyleOverrides from './no-unsafe-style-overrides';
 import noUnsupportedDragAndDropLibraries from './no-unsupported-drag-and-drop-libraries';
 import preferPrimitives from './prefer-primitives';
+import useButtonGroupLabel from './use-button-group-label';
 import useDrawerLabel from './use-drawer-label';
 import useHeadingLevelInSpotlightCard from './use-heading-level-in-spotlight-card';
 import useHrefInLinkItem from './use-href-in-link-item';
@@ -41,6 +42,7 @@ export default {
   'no-unsafe-style-overrides': noUnsafeStyleOverrides,
   'no-unsupported-drag-and-drop-libraries': noUnsupportedDragAndDropLibraries,
   'prefer-primitives': preferPrimitives,
+  'use-button-group-label': useButtonGroupLabel,
   'use-drawer-label': useDrawerLabel,
   'use-heading-level-in-spotlight-card': useHeadingLevelInSpotlightCard,
   'use-href-in-link-item': useHrefInLinkItem,

package/dist/esm/rules/use-button-group-label/index.js

@@ -0,0 +1,77 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { createLintRule } from '../utils/create-rule';
+var elementsAccessibleNameProps = ['label', 'titleId'];
+var rule = createLintRule({
+  meta: {
+    name: 'use-button-group-label',
+    type: 'suggestion',
+    docs: {
+      description: 'Ensures button groups are described to assistive technology by a direct label or by another element.',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      missingLabelProp: 'Missing accessible name. If there is no visible content to associate use `label` prop, otherwise pass id of element to `titleId` prop to be associated as label.',
+      labelPropShouldHaveContents: 'Define string that labels the interactive element.',
+      titleIdShouldHaveValue: '`titleId` should reference the id of element that define accessible name.',
+      noBothPropsUsage: 'Do not include both `titleId` and `label` properties. Use `titleId` if the label text is available in the DOM to reference it, otherwise use `label` to provide accessible name explicitly.'
+    },
+    hasSuggestions: true
+  },
+  create: function create(context) {
+    var contextLocalIdentifier = [];
+    return {
+      ImportDeclaration: function ImportDeclaration(node) {
+        if (node.source.value === '@atlaskit/button') {
+          if (node.specifiers.length) {
+            var defaultImport = node.specifiers.filter(function (spec) {
+              return spec.type === 'ImportSpecifier';
+            });
+            if (defaultImport && defaultImport.length) {
+              var local = defaultImport[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 === 'label' ? 'labelPropShouldHaveContents' : 'titleIdShouldHaveValue'
+                });
+              }
+            }
+          } else if (componentLabelProps.length > 1) {
+            context.report({
+              node: node.openingElement,
+              messageId: 'noBothPropsUsage'
+            });
+          } else {
+            context.report({
+              node: node.openingElement,
+              messageId: 'missingLabelProp'
+            });
+          }
+        }
+      }
+    };
+  }
+});
+export default rule;

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

@@ -19,6 +19,7 @@ export declare const configs: {
             '@atlaskit/design-system/no-unsafe-style-overrides': string;
             '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': string;
             '@atlaskit/design-system/prefer-primitives': string;
+            '@atlaskit/design-system/use-button-group-label': string;
             '@atlaskit/design-system/use-drawer-label': string;
             '@atlaskit/design-system/use-heading-level-in-spotlight-card': string;
             '@atlaskit/design-system/use-href-in-link-item': string;
@@ -40,6 +41,7 @@ export declare const configs: {
             '@atlaskit/design-system/no-unsafe-design-token-usage': string;
             '@atlaskit/design-system/no-unsafe-style-overrides': string;
             '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': string;
+            '@atlaskit/design-system/use-button-group-label': string;
             '@atlaskit/design-system/use-drawer-label': string;
             '@atlaskit/design-system/use-heading-level-in-spotlight-card': string;
             '@atlaskit/design-system/use-href-in-link-item': 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::6efa1e48692b3e287d6dfcd500a5f0ab>>
+ * @codegen <<SignedSource::d1a459e1ea71650f65b2890dc86cc398>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 declare const _default: {
@@ -22,6 +22,7 @@ declare const _default: {
         '@atlaskit/design-system/no-unsafe-style-overrides': string;
         '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': string;
         '@atlaskit/design-system/prefer-primitives': string;
+        '@atlaskit/design-system/use-button-group-label': string;
         '@atlaskit/design-system/use-drawer-label': string;
         '@atlaskit/design-system/use-heading-level-in-spotlight-card': string;
         '@atlaskit/design-system/use-href-in-link-item': 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::be810d87ec2d253e3b053dc06ff1b99a>>
+ * @codegen <<SignedSource::3b93cfbbe0ea14514b9600509632394b>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 declare const _default: {
@@ -17,6 +17,7 @@ declare const _default: {
         '@atlaskit/design-system/no-unsafe-design-token-usage': string;
         '@atlaskit/design-system/no-unsafe-style-overrides': string;
         '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': string;
+        '@atlaskit/design-system/use-button-group-label': string;
         '@atlaskit/design-system/use-drawer-label': string;
         '@atlaskit/design-system/use-heading-level-in-spotlight-card': string;
         '@atlaskit/design-system/use-href-in-link-item': string;

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

@@ -19,6 +19,7 @@ declare const _default: {
     'no-unsafe-style-overrides': import("eslint").Rule.RuleModule;
     'no-unsupported-drag-and-drop-libraries': import("eslint").Rule.RuleModule;
     'prefer-primitives': import("eslint").Rule.RuleModule;
+    'use-button-group-label': import("eslint").Rule.RuleModule;
     'use-drawer-label': import("eslint").Rule.RuleModule;
     'use-heading-level-in-spotlight-card': import("eslint").Rule.RuleModule;
     'use-href-in-link-item': import("eslint").Rule.RuleModule;

package/dist/types/rules/use-button-group-label/index.d.ts

@@ -0,0 +1,3 @@
+import type { Rule } from 'eslint';
+declare const rule: Rule.RuleModule;
+export default rule;