@atlaskit/eslint-plugin-design-system 8.17.0 → 8.18.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 8.18.0
+
+### Minor Changes
+
+- [#65123](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/65123) [`f3b62a2c6bdd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f3b62a2c6bdd) - Add new rule to warn of rollout of required `headingLevel` prop in the `SpotlightCard` component of the onboarding package.
+
 ## 8.17.0
 
 ### Minor Changes

package/README.md

@@ -65,6 +65,7 @@ module.exports = {
 | <a href="./src/rules/no-unsupported-drag-and-drop-libraries/README.md">no-unsupported-drag-and-drop-libraries</a> | Disallow importing unsupported drag and drop modules.                                                                                                                                                                                                                                                               | Yes         |         |             |
 | <a href="./src/rules/prefer-primitives/README.md">prefer-primitives</a>                                           | Increase awareness of primitive components via code hints. Strictly used for education purposes and discoverability. To enforce usage please refer to the `use-primitives` rule.                                                                                                                                    |             |         |             |
 | <a href="./src/rules/use-drawer-label/README.md">use-drawer-label</a>                                             | Encourages to provide accessible name for Atlassian Design System Drawer component.                                                                                                                                                                                                                                 | Yes         |         | Yes         |
+| <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-visually-hidden/README.md">use-visually-hidden</a>                                       | Enforce usage of the visually hidden component.                                                                                                                                                                                                                                                                     | Yes         | Yes     |             |

package/constellation/index/usage.mdx

@@ -29,6 +29,7 @@ This plugin contains rules that should be used when working with the [Atlassian
 | <a href="#no-unsupported-drag-and-drop-libraries">no-unsupported-drag-and-drop-libraries</a> | Disallow importing unsupported drag and drop modules.                                                                                                                                                                                                                                                               | Yes         |         |             |
 | <a href="#prefer-primitives">prefer-primitives</a>                                           | Increase awareness of primitive components via code hints. Strictly used for education purposes and discoverability. To enforce usage please refer to the `use-primitives` rule.                                                                                                                                    |             |         |             |
 | <a href="#use-drawer-label">use-drawer-label</a>                                             | Encourages to provide accessible name for Atlassian Design System Drawer component.                                                                                                                                                                                                                                 | Yes         |         | Yes         |
+| <a href="#use-heading-level-in-spotlight-card">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">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">use-primitives</a>                                                 | Encourage the usage of primitives components.                                                                                                                                                                                                                                                                       |             | Yes     | Yes         |
 | <a href="#use-visually-hidden">use-visually-hidden</a>                                       | Enforce usage of the visually hidden component.                                                                                                                                                                                                                                                                     | Yes         | Yes     |             |
@@ -769,6 +770,27 @@ This rule will indicate user with warning to strongly recommend usage of either
 </Drawer>
 ```
 
+## use-heading-level-in-spotlight-card
+
+The `SpotlightCard` component in `@atlaskit/onboarding` will be requiring the `headingLevel` prop in future releases.
+
+<h3>Examples</h3>
+
+#### Incorrect
+
+```tsx
+<SpotlightCard heading="Heading">Spotlight card contents</SpotlightCard>
+ ^^^^^^^^^^^^^
+```
+
+#### Correct
+
+```tsx
+<SpotlightCard heading="Heading" headingLevel={2}>
+  Spotlight card contents
+</SpotlightCard>
+```
+
 ## use-href-in-link-item
 
 The `LinkItem` component in `@atlaskit/menu` will be requiring the `href` prop in future releases. If no valid `href` prop is required, consider using the `ButtonItem` component.

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::594898d8c5dc8b9a5610d62e7f300a53>>
+ * @codegen <<SignedSource::37a857efd0971ab26170d5f1f526279b>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -28,6 +28,7 @@ var _default = exports.default = {
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/prefer-primitives': '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',
     '@atlaskit/design-system/use-primitives': 'warn',
     '@atlaskit/design-system/use-visually-hidden': 'error'

package/dist/cjs/presets/recommended.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::240c678d4f10d97618541f35d79e1c71>>
+ * @codegen <<SignedSource::b3bce8efb2db1fed84370af608ca0d4c>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -23,6 +23,7 @@ var _default = exports.default = {
     '@atlaskit/design-system/no-unsafe-design-token-usage': 'error',
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@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',
     '@atlaskit/design-system/use-visually-hidden': 'error'
   }

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

@@ -21,12 +21,13 @@ var _noUnsafeDesignTokenUsage = _interopRequireDefault(require("./no-unsafe-desi
 var _noUnsupportedDragAndDropLibraries = _interopRequireDefault(require("./no-unsupported-drag-and-drop-libraries"));
 var _preferPrimitives = _interopRequireDefault(require("./prefer-primitives"));
 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 _useVisuallyHidden = _interopRequireDefault(require("./use-visually-hidden"));
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::8927e5adaec5639c9712dbfb26968de4>>
+ * @codegen <<SignedSource::e2cc357c90120dbbd89b2928dba968c0>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -46,6 +47,7 @@ var _default = exports.default = {
   'no-unsupported-drag-and-drop-libraries': _noUnsupportedDragAndDropLibraries.default,
   'prefer-primitives': _preferPrimitives.default,
   'use-drawer-label': _useDrawerLabel.default,
+  'use-heading-level-in-spotlight-card': _useHeadingLevelInSpotlightCard.default,
   'use-href-in-link-item': _useHrefInLinkItem.default,
   'use-primitives': _usePrimitives.default,
   'use-visually-hidden': _useVisuallyHidden.default

package/dist/cjs/rules/use-heading-level-in-spotlight-card/index.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.headingLevelRequiredSuggestionText = exports.default = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _createRule = require("../utils/create-rule");
+var _getImportName = require("../utils/get-import-name");
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+var headingLevelRequiredSuggestionText = exports.headingLevelRequiredSuggestionText = 'Add a `headingLevel` that is of a contextually relevant level.';
+var rule = (0, _createRule.createLintRule)({
+  meta: {
+    name: 'use-heading-level-in-spotlight-card',
+    type: 'suggestion',
+    fixable: 'code',
+    docs: {
+      description: 'Inform developers of eventual requirement of `headingLevel` prop in `SpotlightCard` component. The heading level should be the appropriate level according to the surrounding context.',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      headingLevelRequired: headingLevelRequiredSuggestionText
+    }
+  },
+  create: function create(context) {
+    return {
+      JSXElement: function JSXElement(node) {
+        if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'JSXElement')) {
+          return;
+        }
+        if (!(0, _eslintCodemodUtils.isNodeOfType)(node.openingElement.name, 'JSXIdentifier')) {
+          return;
+        }
+
+        // Get the name of the SpotlightCard import
+        var spotlightCardImportName = (0, _getImportName.getImportName)(context.getScope(), '@atlaskit/onboarding', 'SpotlightCard');
+        if (node.openingElement.name.name === spotlightCardImportName) {
+          // and if `heading` exists and `headingLevel` prop does not exist
+          var spotlightCardProps = node.openingElement.attributes.filter(function (attr) {
+            return (0, _eslintCodemodUtils.isNodeOfType)(attr, 'JSXAttribute');
+          }).filter(function (attr) {
+            return attr.name.type === 'JSXIdentifier';
+          });
+          var heading = spotlightCardProps.find(function (attr) {
+            return attr.name.name === 'heading';
+          });
+          var headingLevel = spotlightCardProps.find(function (attr) {
+            return attr.name.name === 'headingLevel';
+          });
+          if (heading && !headingLevel) {
+            context.report({
+              node: node,
+              messageId: 'headingLevelRequired'
+            });
+          }
+        }
+      }
+    };
+  }
+});
+var _default = exports.default = rule;

package/dist/cjs/rules/use-href-in-link-item/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.hrefRequiredSuggestionText = exports.default = void 0;
 var _eslintCodemodUtils = require("eslint-codemod-utils");
 var _createRule = require("../utils/create-rule");
+var _getImportName = require("../utils/get-import-name");
 var _utils = require("./utils");
 // eslint-disable-next-line import/no-extraneous-dependencies
 
@@ -52,7 +53,7 @@ var rule = (0, _createRule.createLintRule)({
         }
 
         // Get the name of the LinkItem import
-        var linkItemImportName = customDefaultLinkItemSpecifier || (0, _utils.getLinkItemImportName)(context.getScope());
+        var linkItemImportName = customDefaultLinkItemSpecifier || (0, _getImportName.getImportName)(context.getScope(), '@atlaskit/menu', 'LinkItem');
         if (node.openingElement.name.name === linkItemImportName) {
           // and if href prop does not exist
           var linkProps = node.openingElement.attributes.filter(function (attr) {

package/dist/cjs/rules/use-href-in-link-item/utils.js

@@ -3,35 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.insertButtonItemImport = exports.insertButtonItemDefaultImport = exports.hrefHasInvalidValue = exports.hasImportOfName = exports.getUniqueButtonItemName = exports.getLinkItemImportName = void 0;
+exports.insertButtonItemImport = exports.insertButtonItemDefaultImport = exports.hrefHasInvalidValue = exports.hasImportOfName = exports.getUniqueButtonItemName = void 0;
 var _eslintCodemodUtils = require("eslint-codemod-utils");
 var _findInParent = require("../utils/find-in-parent");
 // eslint-disable-next-line import/no-extraneous-dependencies
 
-var getLinkItemImportName = exports.getLinkItemImportName = function getLinkItemImportName(scope) {
-  var traversingScope = scope;
-  var matchedVariable;
-  while (traversingScope && traversingScope.type !== 'global') {
-    matchedVariable = traversingScope.variables.find(function (variable) {
-      var _variable$defs;
-      var def = (_variable$defs = variable.defs) === null || _variable$defs === void 0 ? void 0 : _variable$defs[0];
-      if (!def || !(def !== null && def !== void 0 && def.node) || !(0, _eslintCodemodUtils.isNodeOfType)(def.node, 'ImportSpecifier') || !def.parent || !(0, _eslintCodemodUtils.isNodeOfType)(def.parent, 'ImportDeclaration')) {
-        return;
-      }
-      return def.parent.source.value === '@atlaskit/menu' && def.node.imported.name === 'LinkItem';
-    });
-    if (matchedVariable) {
-      break;
-    }
-    traversingScope = traversingScope.upper;
-  }
-  if (!matchedVariable) {
-    return null;
-  } else {
-    var _matchedVariable$defs;
-    return (_matchedVariable$defs = matchedVariable.defs) === null || _matchedVariable$defs === void 0 ? void 0 : _matchedVariable$defs[0].node.local.name;
-  }
-};
 var invalidHrefValues = ['', '#', null, undefined];
 var hrefHasInvalidValue = exports.hrefHasInvalidValue = function hrefHasInvalidValue(scope, href) {
   // If doesn't exist,

package/dist/cjs/rules/utils/get-import-name.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getImportName = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var getImportName = exports.getImportName = function getImportName(scope, packageName, componentName) {
+  var traversingScope = scope;
+  var matchedVariable;
+  while (traversingScope && traversingScope.type !== 'global') {
+    matchedVariable = traversingScope.variables.find(function (variable) {
+      var _variable$defs;
+      var def = (_variable$defs = variable.defs) === null || _variable$defs === void 0 ? void 0 : _variable$defs[0];
+      if (!def || !def.node || !(0, _eslintCodemodUtils.isNodeOfType)(def.node, 'ImportSpecifier') || !def.parent || !(0, _eslintCodemodUtils.isNodeOfType)(def.parent, 'ImportDeclaration')) {
+        return;
+      }
+      return def.parent.source.value === packageName && def.node.imported.name === componentName;
+    });
+    if (matchedVariable) {
+      break;
+    }
+    traversingScope = traversingScope.upper;
+  }
+  if (!matchedVariable) {
+    return null;
+  } else {
+    return matchedVariable.defs[0].node.local.name;
+  }
+};

package/dist/es2019/presets/all.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::594898d8c5dc8b9a5610d62e7f300a53>>
+ * @codegen <<SignedSource::37a857efd0971ab26170d5f1f526279b>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -22,6 +22,7 @@ export default {
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/prefer-primitives': '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',
     '@atlaskit/design-system/use-primitives': 'warn',
     '@atlaskit/design-system/use-visually-hidden': 'error'

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::240c678d4f10d97618541f35d79e1c71>>
+ * @codegen <<SignedSource::b3bce8efb2db1fed84370af608ca0d4c>>
  * @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-unsupported-drag-and-drop-libraries': 'error',
     '@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',
     '@atlaskit/design-system/use-visually-hidden': 'error'
   }

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::8927e5adaec5639c9712dbfb26968de4>>
+ * @codegen <<SignedSource::e2cc357c90120dbbd89b2928dba968c0>>
  * @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 noUnsupportedDragAndDropLibraries from './no-unsupported-drag-and-drop-libraries';
 import preferPrimitives from './prefer-primitives';
 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 useVisuallyHidden from './use-visually-hidden';
@@ -39,6 +40,7 @@ export default {
   'no-unsupported-drag-and-drop-libraries': noUnsupportedDragAndDropLibraries,
   'prefer-primitives': preferPrimitives,
   'use-drawer-label': useDrawerLabel,
+  'use-heading-level-in-spotlight-card': useHeadingLevelInSpotlightCard,
   'use-href-in-link-item': useHrefInLinkItem,
   'use-primitives': usePrimitives,
   'use-visually-hidden': useVisuallyHidden

package/dist/es2019/rules/use-heading-level-in-spotlight-card/index.js

@@ -0,0 +1,49 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { createLintRule } from '../utils/create-rule';
+import { getImportName } from '../utils/get-import-name';
+export const headingLevelRequiredSuggestionText = 'Add a `headingLevel` that is of a contextually relevant level.';
+const rule = createLintRule({
+  meta: {
+    name: 'use-heading-level-in-spotlight-card',
+    type: 'suggestion',
+    fixable: 'code',
+    docs: {
+      description: 'Inform developers of eventual requirement of `headingLevel` prop in `SpotlightCard` component. The heading level should be the appropriate level according to the surrounding context.',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      headingLevelRequired: headingLevelRequiredSuggestionText
+    }
+  },
+  create(context) {
+    return {
+      JSXElement(node) {
+        if (!isNodeOfType(node, 'JSXElement')) {
+          return;
+        }
+        if (!isNodeOfType(node.openingElement.name, 'JSXIdentifier')) {
+          return;
+        }
+
+        // Get the name of the SpotlightCard import
+        const spotlightCardImportName = getImportName(context.getScope(), '@atlaskit/onboarding', 'SpotlightCard');
+        if (node.openingElement.name.name === spotlightCardImportName) {
+          // and if `heading` exists and `headingLevel` prop does not exist
+          const spotlightCardProps = node.openingElement.attributes.filter(attr => isNodeOfType(attr, 'JSXAttribute')).filter(attr => attr.name.type === 'JSXIdentifier');
+          const heading = spotlightCardProps.find(attr => attr.name.name === 'heading');
+          const headingLevel = spotlightCardProps.find(attr => attr.name.name === 'headingLevel');
+          if (heading && !headingLevel) {
+            context.report({
+              node: node,
+              messageId: 'headingLevelRequired'
+            });
+          }
+        }
+      }
+    };
+  }
+});
+export default rule;

package/dist/es2019/rules/use-href-in-link-item/index.js

@@ -2,7 +2,8 @@
 
 import { isNodeOfType } from 'eslint-codemod-utils';
 import { createLintRule } from '../utils/create-rule';
-import { getLinkItemImportName, getUniqueButtonItemName, hasImportOfName, hrefHasInvalidValue, insertButtonItemDefaultImport, insertButtonItemImport } from './utils';
+import { getImportName } from '../utils/get-import-name';
+import { getUniqueButtonItemName, hasImportOfName, hrefHasInvalidValue, insertButtonItemDefaultImport, insertButtonItemImport } from './utils';
 export const hrefRequiredSuggestionText = 'Convert LinkItem to ButtonItem';
 const rule = createLintRule({
   meta: {
@@ -46,7 +47,7 @@ const rule = createLintRule({
         }
 
         // Get the name of the LinkItem import
-        const linkItemImportName = customDefaultLinkItemSpecifier || getLinkItemImportName(context.getScope());
+        const linkItemImportName = customDefaultLinkItemSpecifier || getImportName(context.getScope(), '@atlaskit/menu', 'LinkItem');
         if (node.openingElement.name.name === linkItemImportName) {
           // and if href prop does not exist
           const linkProps = node.openingElement.attributes.filter(attr => isNodeOfType(attr, 'JSXAttribute')).filter(attr => attr.name.type === 'JSXIdentifier');

package/dist/es2019/rules/use-href-in-link-item/utils.js

@@ -2,30 +2,6 @@
 
 import { isNodeOfType } from 'eslint-codemod-utils';
 import { findIdentifierInParentScope } from '../utils/find-in-parent';
-export const getLinkItemImportName = scope => {
-  let traversingScope = scope;
-  let matchedVariable;
-  while (traversingScope && traversingScope.type !== 'global') {
-    matchedVariable = traversingScope.variables.find(variable => {
-      var _variable$defs;
-      const def = (_variable$defs = variable.defs) === null || _variable$defs === void 0 ? void 0 : _variable$defs[0];
-      if (!def || !(def !== null && def !== void 0 && def.node) || !isNodeOfType(def.node, 'ImportSpecifier') || !def.parent || !isNodeOfType(def.parent, 'ImportDeclaration')) {
-        return;
-      }
-      return def.parent.source.value === '@atlaskit/menu' && def.node.imported.name === 'LinkItem';
-    });
-    if (matchedVariable) {
-      break;
-    }
-    traversingScope = traversingScope.upper;
-  }
-  if (!matchedVariable) {
-    return null;
-  } else {
-    var _matchedVariable$defs;
-    return (_matchedVariable$defs = matchedVariable.defs) === null || _matchedVariable$defs === void 0 ? void 0 : _matchedVariable$defs[0].node.local.name;
-  }
-};
 const invalidHrefValues = ['', '#', null, undefined];
 export const hrefHasInvalidValue = (scope, href) => {
   // If doesn't exist,

package/dist/es2019/rules/utils/get-import-name.js

@@ -0,0 +1,24 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+export const getImportName = (scope, packageName, componentName) => {
+  let traversingScope = scope;
+  let matchedVariable;
+  while (traversingScope && traversingScope.type !== 'global') {
+    matchedVariable = traversingScope.variables.find(variable => {
+      var _variable$defs;
+      const def = (_variable$defs = variable.defs) === null || _variable$defs === void 0 ? void 0 : _variable$defs[0];
+      if (!def || !def.node || !isNodeOfType(def.node, 'ImportSpecifier') || !def.parent || !isNodeOfType(def.parent, 'ImportDeclaration')) {
+        return;
+      }
+      return def.parent.source.value === packageName && def.node.imported.name === componentName;
+    });
+    if (matchedVariable) {
+      break;
+    }
+    traversingScope = traversingScope.upper;
+  }
+  if (!matchedVariable) {
+    return null;
+  } else {
+    return matchedVariable.defs[0].node.local.name;
+  }
+};

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::594898d8c5dc8b9a5610d62e7f300a53>>
+ * @codegen <<SignedSource::37a857efd0971ab26170d5f1f526279b>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -22,6 +22,7 @@ export default {
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/prefer-primitives': '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',
     '@atlaskit/design-system/use-primitives': 'warn',
     '@atlaskit/design-system/use-visually-hidden': 'error'

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::240c678d4f10d97618541f35d79e1c71>>
+ * @codegen <<SignedSource::b3bce8efb2db1fed84370af608ca0d4c>>
  * @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-unsupported-drag-and-drop-libraries': 'error',
     '@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',
     '@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::8927e5adaec5639c9712dbfb26968de4>>
+ * @codegen <<SignedSource::e2cc357c90120dbbd89b2928dba968c0>>
  * @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 noUnsupportedDragAndDropLibraries from './no-unsupported-drag-and-drop-libraries';
 import preferPrimitives from './prefer-primitives';
 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 useVisuallyHidden from './use-visually-hidden';
@@ -39,6 +40,7 @@ export default {
   'no-unsupported-drag-and-drop-libraries': noUnsupportedDragAndDropLibraries,
   'prefer-primitives': preferPrimitives,
   'use-drawer-label': useDrawerLabel,
+  'use-heading-level-in-spotlight-card': useHeadingLevelInSpotlightCard,
   'use-href-in-link-item': useHrefInLinkItem,
   'use-primitives': usePrimitives,
   'use-visually-hidden': useVisuallyHidden

package/dist/esm/rules/use-heading-level-in-spotlight-card/index.js

@@ -0,0 +1,57 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { createLintRule } from '../utils/create-rule';
+import { getImportName } from '../utils/get-import-name';
+export var headingLevelRequiredSuggestionText = 'Add a `headingLevel` that is of a contextually relevant level.';
+var rule = createLintRule({
+  meta: {
+    name: 'use-heading-level-in-spotlight-card',
+    type: 'suggestion',
+    fixable: 'code',
+    docs: {
+      description: 'Inform developers of eventual requirement of `headingLevel` prop in `SpotlightCard` component. The heading level should be the appropriate level according to the surrounding context.',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      headingLevelRequired: headingLevelRequiredSuggestionText
+    }
+  },
+  create: function create(context) {
+    return {
+      JSXElement: function JSXElement(node) {
+        if (!isNodeOfType(node, 'JSXElement')) {
+          return;
+        }
+        if (!isNodeOfType(node.openingElement.name, 'JSXIdentifier')) {
+          return;
+        }
+
+        // Get the name of the SpotlightCard import
+        var spotlightCardImportName = getImportName(context.getScope(), '@atlaskit/onboarding', 'SpotlightCard');
+        if (node.openingElement.name.name === spotlightCardImportName) {
+          // and if `heading` exists and `headingLevel` prop does not exist
+          var spotlightCardProps = node.openingElement.attributes.filter(function (attr) {
+            return isNodeOfType(attr, 'JSXAttribute');
+          }).filter(function (attr) {
+            return attr.name.type === 'JSXIdentifier';
+          });
+          var heading = spotlightCardProps.find(function (attr) {
+            return attr.name.name === 'heading';
+          });
+          var headingLevel = spotlightCardProps.find(function (attr) {
+            return attr.name.name === 'headingLevel';
+          });
+          if (heading && !headingLevel) {
+            context.report({
+              node: node,
+              messageId: 'headingLevelRequired'
+            });
+          }
+        }
+      }
+    };
+  }
+});
+export default rule;

package/dist/esm/rules/use-href-in-link-item/index.js

@@ -2,7 +2,8 @@
 
 import { isNodeOfType } from 'eslint-codemod-utils';
 import { createLintRule } from '../utils/create-rule';
-import { getLinkItemImportName, getUniqueButtonItemName, hasImportOfName, hrefHasInvalidValue, insertButtonItemDefaultImport, insertButtonItemImport } from './utils';
+import { getImportName } from '../utils/get-import-name';
+import { getUniqueButtonItemName, hasImportOfName, hrefHasInvalidValue, insertButtonItemDefaultImport, insertButtonItemImport } from './utils';
 export var hrefRequiredSuggestionText = 'Convert LinkItem to ButtonItem';
 var rule = createLintRule({
   meta: {
@@ -46,7 +47,7 @@ var rule = createLintRule({
         }
 
         // Get the name of the LinkItem import
-        var linkItemImportName = customDefaultLinkItemSpecifier || getLinkItemImportName(context.getScope());
+        var linkItemImportName = customDefaultLinkItemSpecifier || getImportName(context.getScope(), '@atlaskit/menu', 'LinkItem');
         if (node.openingElement.name.name === linkItemImportName) {
           // and if href prop does not exist
           var linkProps = node.openingElement.attributes.filter(function (attr) {

package/dist/esm/rules/use-href-in-link-item/utils.js

@@ -2,30 +2,6 @@
 
 import { isNodeOfType } from 'eslint-codemod-utils';
 import { findIdentifierInParentScope } from '../utils/find-in-parent';
-export var getLinkItemImportName = function getLinkItemImportName(scope) {
-  var traversingScope = scope;
-  var matchedVariable;
-  while (traversingScope && traversingScope.type !== 'global') {
-    matchedVariable = traversingScope.variables.find(function (variable) {
-      var _variable$defs;
-      var def = (_variable$defs = variable.defs) === null || _variable$defs === void 0 ? void 0 : _variable$defs[0];
-      if (!def || !(def !== null && def !== void 0 && def.node) || !isNodeOfType(def.node, 'ImportSpecifier') || !def.parent || !isNodeOfType(def.parent, 'ImportDeclaration')) {
-        return;
-      }
-      return def.parent.source.value === '@atlaskit/menu' && def.node.imported.name === 'LinkItem';
-    });
-    if (matchedVariable) {
-      break;
-    }
-    traversingScope = traversingScope.upper;
-  }
-  if (!matchedVariable) {
-    return null;
-  } else {
-    var _matchedVariable$defs;
-    return (_matchedVariable$defs = matchedVariable.defs) === null || _matchedVariable$defs === void 0 ? void 0 : _matchedVariable$defs[0].node.local.name;
-  }
-};
 var invalidHrefValues = ['', '#', null, undefined];
 export var hrefHasInvalidValue = function hrefHasInvalidValue(scope, href) {
   // If doesn't exist,

package/dist/esm/rules/utils/get-import-name.js

@@ -0,0 +1,24 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+export var getImportName = function getImportName(scope, packageName, componentName) {
+  var traversingScope = scope;
+  var matchedVariable;
+  while (traversingScope && traversingScope.type !== 'global') {
+    matchedVariable = traversingScope.variables.find(function (variable) {
+      var _variable$defs;
+      var def = (_variable$defs = variable.defs) === null || _variable$defs === void 0 ? void 0 : _variable$defs[0];
+      if (!def || !def.node || !isNodeOfType(def.node, 'ImportSpecifier') || !def.parent || !isNodeOfType(def.parent, 'ImportDeclaration')) {
+        return;
+      }
+      return def.parent.source.value === packageName && def.node.imported.name === componentName;
+    });
+    if (matchedVariable) {
+      break;
+    }
+    traversingScope = traversingScope.upper;
+  }
+  if (!matchedVariable) {
+    return null;
+  } else {
+    return matchedVariable.defs[0].node.local.name;
+  }
+};

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

@@ -19,6 +19,7 @@ export declare const configs: {
             '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': string;
             '@atlaskit/design-system/prefer-primitives': 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;
             '@atlaskit/design-system/use-primitives': string;
             '@atlaskit/design-system/use-visually-hidden': string;
@@ -38,6 +39,7 @@ export declare const configs: {
             '@atlaskit/design-system/no-unsafe-design-token-usage': string;
             '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 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;
             '@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::594898d8c5dc8b9a5610d62e7f300a53>>
+ * @codegen <<SignedSource::37a857efd0971ab26170d5f1f526279b>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 declare const _default: {
@@ -22,6 +22,7 @@ declare const _default: {
         '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': string;
         '@atlaskit/design-system/prefer-primitives': 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;
         '@atlaskit/design-system/use-primitives': string;
         '@atlaskit/design-system/use-visually-hidden': 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::240c678d4f10d97618541f35d79e1c71>>
+ * @codegen <<SignedSource::b3bce8efb2db1fed84370af608ca0d4c>>
  * @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-unsupported-drag-and-drop-libraries': 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;
         '@atlaskit/design-system/use-visually-hidden': string;
     };

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

@@ -19,6 +19,7 @@ declare const _default: {
     'no-unsupported-drag-and-drop-libraries': import("eslint").Rule.RuleModule;
     'prefer-primitives': 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;
     'use-primitives': import("eslint").Rule.RuleModule;
     'use-visually-hidden': import("eslint").Rule.RuleModule;

package/dist/types/rules/use-heading-level-in-spotlight-card/index.d.ts

@@ -0,0 +1,4 @@
+import type { Rule } from 'eslint';
+export declare const headingLevelRequiredSuggestionText = "Add a `headingLevel` that is of a contextually relevant level.";
+declare const rule: Rule.RuleModule;
+export default rule;

package/dist/types/rules/use-href-in-link-item/utils.d.ts

@@ -1,6 +1,5 @@
 import type { Rule, Scope } from 'eslint';
 import { ImportDeclaration, JSXAttribute } from 'eslint-codemod-utils';
-export declare const getLinkItemImportName: (scope: Scope.Scope) => string | null;
 export declare const hrefHasInvalidValue: (scope: Scope.Scope, href: JSXAttribute | undefined) => boolean;
 export declare const hasImportOfName: (node: ImportDeclaration, name: string) => boolean;
 export declare const insertButtonItemDefaultImport: (fixer: Rule.RuleFixer, node: ImportDeclaration) => Rule.Fix;

package/dist/types/rules/utils/get-import-name.d.ts

@@ -0,0 +1,2 @@
+import type { Scope } from 'eslint';
+export declare const getImportName: (scope: Scope.Scope, packageName: string, componentName: string) => string | null;

package/dist/types-ts4.5/index.codegen.d.ts

@@ -19,6 +19,7 @@ export declare const configs: {
             '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': string;
             '@atlaskit/design-system/prefer-primitives': 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;
             '@atlaskit/design-system/use-primitives': string;
             '@atlaskit/design-system/use-visually-hidden': string;
@@ -38,6 +39,7 @@ export declare const configs: {
             '@atlaskit/design-system/no-unsafe-design-token-usage': string;
             '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 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;
             '@atlaskit/design-system/use-visually-hidden': string;
         };

package/dist/types-ts4.5/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::594898d8c5dc8b9a5610d62e7f300a53>>
+ * @codegen <<SignedSource::37a857efd0971ab26170d5f1f526279b>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 declare const _default: {
@@ -22,6 +22,7 @@ declare const _default: {
         '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': string;
         '@atlaskit/design-system/prefer-primitives': 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;
         '@atlaskit/design-system/use-primitives': string;
         '@atlaskit/design-system/use-visually-hidden': string;

package/dist/types-ts4.5/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::240c678d4f10d97618541f35d79e1c71>>
+ * @codegen <<SignedSource::b3bce8efb2db1fed84370af608ca0d4c>>
  * @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-unsupported-drag-and-drop-libraries': 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;
         '@atlaskit/design-system/use-visually-hidden': string;
     };

package/dist/types-ts4.5/rules/index.codegen.d.ts

@@ -23,6 +23,7 @@ declare const _default: {
     'no-unsupported-drag-and-drop-libraries': import("eslint").Rule.RuleModule;
     'prefer-primitives': 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;
     'use-primitives': import("eslint").Rule.RuleModule;
     'use-visually-hidden': import("eslint").Rule.RuleModule;

package/dist/types-ts4.5/rules/use-heading-level-in-spotlight-card/index.d.ts

@@ -0,0 +1,4 @@
+import type { Rule } from 'eslint';
+export declare const headingLevelRequiredSuggestionText = "Add a `headingLevel` that is of a contextually relevant level.";
+declare const rule: Rule.RuleModule;
+export default rule;

package/dist/types-ts4.5/rules/use-href-in-link-item/utils.d.ts

@@ -1,6 +1,5 @@
 import type { Rule, Scope } from 'eslint';
 import { ImportDeclaration, JSXAttribute } from 'eslint-codemod-utils';
-export declare const getLinkItemImportName: (scope: Scope.Scope) => string | null;
 export declare const hrefHasInvalidValue: (scope: Scope.Scope, href: JSXAttribute | undefined) => boolean;
 export declare const hasImportOfName: (node: ImportDeclaration, name: string) => boolean;
 export declare const insertButtonItemDefaultImport: (fixer: Rule.RuleFixer, node: ImportDeclaration) => Rule.Fix;

package/dist/types-ts4.5/rules/utils/get-import-name.d.ts

@@ -0,0 +1,2 @@
+import type { Scope } from 'eslint';
+export declare const getImportName: (scope: Scope.Scope, packageName: string, componentName: string) => string | null;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atlaskit/eslint-plugin-design-system",
   "description": "The essential plugin for use with the Atlassian Design System.",
-  "version": "8.17.0",
+  "version": "8.18.0",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"