@atlaskit/eslint-plugin-design-system 4.0.0 → 4.2.0

package/dist/es2019/rules/no-deprecated-imports/index.js

@@ -44,17 +44,24 @@ const rule = {
   },
 
   create(context) {
-    const sourceCode = context.getSourceCode();
     const restrictedPathMessages = restrictedPaths.reduce((memo, importSource) => {
       if (typeof importSource === 'string') {
         memo[importSource] = {
           message: ''
         };
       } else {
-        memo[importSource.name] = {
-          message: importSource.message // importNames: importSource.importNames
+        if ('message' in importSource) {
+          memo[importSource.path] = {
+            message: importSource.message
+          };
+        }
 
-        };
+        if ('imports' in importSource) {
+          memo[importSource.path] = {
+            // @ts-ignore
+            imports: importSource.imports
+          };
+        }
       }
 
       return memo;
@@ -62,26 +69,45 @@ const rule = {
     /**
      * Report a restricted path.
      * @param {string} importSource path of the import
-     * @param {Map<string,Object[]>} importNames Map of import names that are being imported
      * @param {node} node representing the restricted path reference
+     * @param {Map<string,Rule.Node>} importNames Map of import names that are being imported
      * @returns {void}
      * @private
      */
 
-    function checkRestrictedPathAndReport(importSource, importNames, node) {
+    function checkRestrictedPathAndReport(importSource, node, importNames) {
       if (!Object.prototype.hasOwnProperty.call(restrictedPathMessages, importSource)) {
         return;
       }
 
-      const customMessage = restrictedPathMessages[importSource].message;
-      context.report({
-        node,
-        messageId: customMessage ? 'pathWithCustomMessage' : 'path',
-        data: {
-          importSource,
-          customMessage
-        }
-      });
+      const config = restrictedPathMessages[importSource]; // The message will only exist if the import is completely banned,
+      // eg a deprecated package
+
+      if ('message' in config) {
+        context.report({
+          node,
+          messageId: config.message ? 'pathWithCustomMessage' : 'path',
+          data: {
+            importSource,
+            customMessage: config.message
+          }
+        });
+      } // if there are specific named exports that are banned,
+      // iterate through and check if they're being imported
+
+
+      if ('imports' in config) {
+        var _config$imports;
+
+        (_config$imports = config.imports) === null || _config$imports === void 0 ? void 0 : _config$imports.forEach(restrictedImport => {
+          if (importNames.has(restrictedImport.importName)) {
+            context.report({
+              node: importNames.get(restrictedImport.importName),
+              message: restrictedImport.message
+            });
+          }
+        });
+      }
     }
     /**
      * Checks a node to see if any problems should be reported.
@@ -95,18 +121,10 @@ const rule = {
       const importSource = node.source.value.trim();
       const importNames = new Map();
 
-      if (node.type === 'ExportAllDeclaration') {
-        const starToken = sourceCode.getFirstToken(node, 1);
-        importNames.set('*', [{
-          loc: starToken === null || starToken === void 0 ? void 0 : starToken.loc
-        }]);
-      } else if ('specifiers' in node) {
+      if ('specifiers' in node) {
         // @ts-ignore
         for (const specifier of node.specifiers) {
           let name;
-          const specifierData = {
-            loc: specifier.loc
-          };
 
           if (specifier.type === 'ImportDefaultSpecifier') {
             name = 'default';
@@ -119,16 +137,12 @@ const rule = {
           }
 
           if (name) {
-            if (importNames.has(name)) {
-              importNames.get(name).push(specifierData);
-            } else {
-              importNames.set(name, [specifierData]);
-            }
+            importNames.set(name, specifier);
           }
         }
       }
 
-      checkRestrictedPathAndReport(importSource, importNames, node);
+      checkRestrictedPathAndReport(importSource, node, importNames);
     };
 
     return {
@@ -138,9 +152,8 @@ const rule = {
         if (node.source) {
           checkNode(node);
         }
-      },
+      }
 
-      ExportAllDeclaration: checkNode
     };
   }
 

package/dist/es2019/rules/no-deprecated-imports/paths.js

@@ -1,43 +1,70 @@
+export const namedThemeExports = [{
+  importName: 'assistive',
+  message: 'The assistive mixin is deprecated. Please use `@atlaskit/visually-hidden` instead.'
+}, {
+  importName: 'visuallyHidden',
+  message: 'The visuallyHidden mixin is deprecated. Please use `@atlaskit/visually-hidden` instead.'
+}, {
+  importName: 'focusRing',
+  message: 'The focusRing mixin is deprecated. Please use `@atlaskit/visually-hidden` instead.'
+}];
 export const restrictedPaths = [{
-  name: '@atlaskit/navigation-next',
+  path: '@atlaskit/navigation-next',
   message: `navigation-next is deprecated. Please use '@atlaskit/atlassian-navigation' instead.`
 }, {
-  name: '@atlaskit/field-base',
+  path: '@atlaskit/field-base',
   message: `field-base is deprecated. Please use the '@atlaskit/form' package instead.`
 }, {
-  name: '@atlaskit/field-radio-group',
+  path: '@atlaskit/field-radio-group',
   message: `field-radio-group is deprecated. Please use '@atlaskit/radio' instead, and check the migration guide.`
 }, {
-  name: '@atlaskit/field-range',
+  path: '@atlaskit/field-range',
   message: `field-range is deprecated. Please use '@atlaskit/range' instead.`
 }, {
-  name: '@atlaskit/field-text',
+  path: '@atlaskit/field-text',
   message: `field-text is deprecated. Please use '@atlaskit/textfield' instead.`
 }, {
-  name: '@atlaskit/field-text-area',
+  path: '@atlaskit/field-text-area',
   message: `field-text-area is deprecated. Please use '@atlaskit/textarea' instead.`
 }, {
-  name: '@atlaskit/navigation',
+  path: '@atlaskit/navigation',
   message: `navigation is deprecated. Please use '@atlaskit/atlassian-navigation' instead.`
 }, {
-  name: '@atlaskit/global-navigation',
+  path: '@atlaskit/global-navigation',
   message: `global-navigation is deprecated. Please use '@atlaskit/atlassian-navigation' for the horizontal nav bar, '@atlaskit/side-navigation' for the side nav, and '@atlaskit/page-layout' to layout your application.`
 }, {
-  name: '@atlaskit/input',
+  path: '@atlaskit/input',
   message: 'input is deprecated. This was an internal component and should not be used directly.'
 }, {
-  name: '@atlaskit/layer',
+  path: '@atlaskit/layer',
   message: 'layer is deprecated. This was an internal component and should not be used directly.'
 }, {
-  name: '@atlaskit/single-select',
+  path: '@atlaskit/single-select',
   message: `single-select is deprecated. Please use '@atlaskit/select' instead.`
 }, {
-  name: '@atlaskit/multi-select',
+  path: '@atlaskit/multi-select',
   message: `multi-select is deprecated. Please use '@atlaskit/select' instead.`
 }, {
-  name: '@atlaskit/droplist',
+  path: '@atlaskit/droplist',
   message: `droplist is deprecated. For the pop-up behaviour please use '@atlaskit/popup' and for common menu components please use '@atlaskit/menu'.`
 }, {
-  name: '@atlaskit/item',
+  path: '@atlaskit/item',
   message: `item is deprecated. Please use '@atlaskit/menu' instead.`
+}, // TODO uncomment me when we formally deprecate typography
+// {
+//   path: '@atlaskit/theme/typography',
+//   message: 'The typography mixins are deprecated. Please use `@atlaskit/heading` instead.',
+// },
+{
+  path: '@atlaskit/theme/constants',
+  imports: namedThemeExports
+}, {
+  path: '@atlaskit/theme',
+  imports: namedThemeExports // .concat(
+  //   { importName: 'typography', message: 'The typography mixins are deprecated. Please use `@atlaskit/heading` instead.',}
+  // )
+
+}, {
+  path: '@atlaskit/icon-priority',
+  message: `icon-priority is deprecated due to limited usage in Cloud products. It will be deleted after 21 April 2022.`
 }];

package/dist/es2019/rules/no-unsafe-design-token-usage/index.js

@@ -2,6 +2,9 @@ import renameMapping from '@atlaskit/tokens/rename-mapping';
 import tokens from '@atlaskit/tokens/token-names';
 import { isDecendantOfStyleBlock, isDecendantOfStyleJsxAttribute } from '../utils/is-node';
 import { isToken } from '../utils/is-token';
+
+const getCleanPathId = path => path.split('.').filter(el => el !== '[default]').join('.');
+
 const defaultConfig = {
   shouldEnforceFallbacks: false
 };
@@ -28,7 +31,7 @@ token('color.background.blanket');
 \`\`\`
 `,
       invalidToken: 'The token "{{name}}" does not exist.',
-      tokenRenamed: 'The token "{{name}}" has been renamed.',
+      tokenRemoved: 'The token "{{name}}" is removed in favour of "{{replacement}}".',
       tokenFallbackEnforced: `Token function requires a fallback, preferably something that best matches the light/default theme in case tokens aren't present.
 
 \`\`\`
@@ -136,14 +139,18 @@ token('color.background.blanket');
           return;
         }
 
-        if (typeof tokenKey === 'string' && tokenKey in renameMapping) {
+        const migrationMeta = renameMapping.filter(t => t.state === 'deleted').find(t => t.path === tokenKey);
+
+        if (typeof tokenKey === 'string' && migrationMeta) {
+          const cleanTokenKey = getCleanPathId(migrationMeta.replacement);
           context.report({
-            messageId: 'tokenRenamed',
+            messageId: 'tokenRemoved',
             node,
             data: {
-              name: tokenKey
+              name: tokenKey,
+              replacement: cleanTokenKey
             },
-            fix: fixer => fixer.replaceText(node.arguments[0], `'${renameMapping[tokenKey]}'`)
+            fix: fixer => fixer.replaceText(node.arguments[0], `'${cleanTokenKey}'`)
           });
           return;
         }

package/dist/es2019/rules/use-visually-hidden/constants.js

@@ -0,0 +1,3 @@
+export const IMPORT_NAME = 'AKVisuallyHidden';
+export const VISUALLY_HIDDEN_SOURCE = '@atlaskit/visually-hidden';
+export const VISUALLY_HIDDEN_IMPORT = `import ${IMPORT_NAME} from '${VISUALLY_HIDDEN_SOURCE}';\n`;

package/dist/es2019/rules/use-visually-hidden/fix-jsx.js

@@ -0,0 +1,24 @@
+import { getImportedNodeBySource } from '../utils/get-import-node-by-source';
+import { getClosestNodeOfType } from '../utils/is-node';
+import { IMPORT_NAME, VISUALLY_HIDDEN_IMPORT, VISUALLY_HIDDEN_SOURCE } from './constants';
+import { getFirstImport } from './utils';
+export default ((source, node) => fixer => {
+  const fixes = [];
+  const importedNode = getFirstImport(source);
+  const visuallyHiddenNode = getImportedNodeBySource(source, VISUALLY_HIDDEN_SOURCE);
+
+  if (!importedNode) {
+    return [];
+  }
+
+  const jsxOpeningElement = getClosestNodeOfType(node, 'JSXOpeningElement');
+
+  if (visuallyHiddenNode) {
+    fixes.push(fixer.replaceText(jsxOpeningElement, visuallyHiddenNode.specifiers[0].local.name));
+  } else {
+    fixes.push(fixer.insertTextBefore(importedNode, VISUALLY_HIDDEN_IMPORT));
+    fixes.push(fixer.replaceText(jsxOpeningElement, `<${IMPORT_NAME} />`));
+  }
+
+  return fixes;
+});

package/dist/es2019/rules/use-visually-hidden/fix-vanilla.js

@@ -0,0 +1,21 @@
+import { getImportedNodeBySource } from '../utils/get-import-node-by-source';
+import { IMPORT_NAME, VISUALLY_HIDDEN_IMPORT, VISUALLY_HIDDEN_SOURCE } from './constants';
+import { getFirstImport } from './utils';
+export default ((source, node) => fixer => {
+  const fixes = [];
+  const importedNode = getFirstImport(source);
+  const visuallyHiddenNode = getImportedNodeBySource(source, VISUALLY_HIDDEN_SOURCE);
+
+  if (!importedNode) {
+    return [];
+  }
+
+  if (visuallyHiddenNode) {
+    fixes.push(fixer.replaceText(node, visuallyHiddenNode.specifiers[0].local.name));
+  } else {
+    fixes.push(fixer.insertTextBefore(importedNode, VISUALLY_HIDDEN_IMPORT));
+    fixes.push(fixer.replaceText(node, IMPORT_NAME));
+  }
+
+  return fixes;
+});

package/dist/es2019/rules/use-visually-hidden/index.js

@@ -0,0 +1,169 @@
+/* eslint-disable @atlaskit/design-system/use-visually-hidden */
+import { getClosestNodeOfType, isStyledObjectNode, isStyledTemplateNode } from '../utils/is-node';
+import fixJsx from './fix-jsx';
+import fixVanilla from './fix-vanilla';
+import { countMatchingKeyValues, getObjectLikeness, makeTemplateLiteralIntoEntries } from './utils';
+const THEME_IMPORT_NAMES = ['visuallyHidden', 'assistive'];
+const rule = {
+  meta: {
+    type: 'suggestion',
+    fixable: 'code',
+    docs: {
+      description: 'Suggest usage of the `@atlaskit/visually-hidden` component instead of either the `@atlaskit/theme` mixins or just something the user has rolled themselves.',
+      recommended: true
+    },
+    messages: {
+      noDeprecatedUsage: 'Using the export `{{local}}` from `{{import}}` as a mixin is discouraged. Please use `@atlaskit/visually-hidden` instead.',
+      noDeprecated: 'The export `{{local}}` from `{{import}}` is deprecated. Please use `@atlaskit/visually-hidden` instead.',
+      suggestion: 'This CSS closely matches the implementation of a visually hidden element. You should consider using the `@atlaskit/visually-hidden` component instead.'
+    }
+  },
+
+  create(context) {
+    const source = context.getSourceCode();
+    return {
+      ImportDeclaration(node) {
+        const isThemeNode = node.source.value === '@atlaskit/theme' || node.source.value === '@atlaskit/theme/constants';
+
+        if (!isThemeNode) {
+          return;
+        }
+
+        const visuallyHiddenOrAssistive = node.specifiers.filter(specifier => specifier.type === 'ImportSpecifier').find(specifier => THEME_IMPORT_NAMES.includes(specifier.imported.name));
+
+        if (!visuallyHiddenOrAssistive) {
+          return;
+        }
+
+        context.getDeclaredVariables(visuallyHiddenOrAssistive).forEach(someNode => {
+          someNode.references.map(innerNode => innerNode.identifier).forEach(idNode => {
+            // @ts-ignore JSX is not typed correctly in eslint
+            if ((idNode === null || idNode === void 0 ? void 0 : idNode.parent.type) === 'JSXExpressionContainer') {
+              context.report({
+                node: idNode.parent,
+                messageId: 'noDeprecatedUsage',
+                data: {
+                  import: `${node.source.value}`,
+                  local: visuallyHiddenOrAssistive.local.name
+                },
+                fix: fixJsx(source, idNode)
+              }); // this is either a styled usage OR mixin usage in a styled usage
+            } else if (idNode.parent.type === 'CallExpression') {
+              if (isStyledObjectNode(idNode.parent) || isStyledTemplateNode(idNode.parent)) {
+                context.report({
+                  node: idNode.parent,
+                  messageId: 'noDeprecatedUsage',
+                  data: {
+                    import: `${node.source.value}`,
+                    local: visuallyHiddenOrAssistive.local.name
+                  },
+                  fix: fixVanilla(source, idNode.parent)
+                });
+              }
+
+              if (idNode.parent.callee === idNode) {
+                context.report({
+                  node: idNode.parent,
+                  messageId: 'noDeprecatedUsage',
+                  data: {
+                    import: `${node.source.value}`,
+                    local: visuallyHiddenOrAssistive.local.name
+                  },
+                  fix: fixVanilla(source, getClosestNodeOfType(idNode.parent, 'TaggedTemplateExpression'))
+                });
+              }
+            }
+          });
+        });
+        return context.report({
+          node: visuallyHiddenOrAssistive,
+          messageId: 'noDeprecated',
+          data: {
+            import: `${node.source.value}`,
+            local: visuallyHiddenOrAssistive.local.name
+          }
+        });
+      },
+
+      CallExpression(node) {
+        var _node$arguments$;
+
+        if (node.type !== 'CallExpression') {
+          return;
+        }
+
+        if (!(node.callee.type === 'MemberExpression' || node.callee.type === 'Identifier')) {
+          return;
+        }
+
+        const isStyled = isStyledObjectNode(node);
+
+        if (node.callee.type === 'MemberExpression' && node.callee.object.type === 'Identifier' && node.callee.object.name !== 'styled') {
+          return;
+        }
+
+        if (node.callee.type === 'Identifier' && node.callee.name !== 'css') {
+          return;
+        } // This is an object style (probably)
+
+
+        if (node.arguments && ((_node$arguments$ = node.arguments[0]) === null || _node$arguments$ === void 0 ? void 0 : _node$arguments$.type) === 'ObjectExpression') {
+          const matchingScore = getObjectLikeness(node.arguments[0]);
+
+          if (matchingScore > 0.8) {
+            return context.report({
+              node: node.parent,
+              messageId: 'suggestion',
+              fix: isStyled ? fixVanilla(source, node) : undefined
+            });
+          }
+        }
+
+        return null;
+      },
+
+      ObjectExpression(node) {
+        if (node.parent.type === 'CallExpression') {
+          return;
+        }
+
+        const matchingScore = getObjectLikeness(node);
+
+        if (matchingScore > 0.8) {
+          return context.report({
+            node: node,
+            messageId: 'suggestion'
+          });
+        }
+      },
+
+      'TaggedTemplateExpression[tag.name="css"],TaggedTemplateExpression[tag.object.name="styled"]': node => {
+        if (node.type !== 'TaggedTemplateExpression') {
+          return;
+        }
+
+        const templateString = node.quasi.quasis.map(q => q.value.raw).join('');
+        const styleEntries = makeTemplateLiteralIntoEntries(templateString);
+
+        if (!styleEntries) {
+          return;
+        }
+
+        const count = countMatchingKeyValues(styleEntries.map(([key, value]) => ({
+          key,
+          value
+        })));
+
+        if (count > 0.8) {
+          return context.report({
+            node,
+            messageId: 'suggestion',
+            fix: node.tag.type !== 'Identifier' ? fixVanilla(source, node) : undefined
+          });
+        }
+      }
+    };
+  }
+
+};
+export default rule;

package/dist/es2019/rules/use-visually-hidden/utils.js

@@ -0,0 +1,62 @@
+// eslint-disable-next-line import/no-unresolved
+// eslint-disable-next-line @atlaskit/design-system/use-visually-hidden
+const referenceObject = {
+  width: '1px',
+  height: '1px',
+  padding: '0',
+  position: 'absolute',
+  border: '0',
+  clip: 'rect(1px, 1px, 1px, 1px)',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap'
+};
+
+/**
+ * Returns the first import in the esprima AST.
+ */
+export const getFirstImport = source => {
+  return source.ast.body.find(node => node.type === 'ImportDeclaration');
+};
+/**
+ * Takes a template literal and returns [key, value] array of the css properties
+ */
+
+export const makeTemplateLiteralIntoEntries = templateString => {
+  return templateString.replace(/\n/g, '').split(/;|{|}/).filter(el => !el.match(/\@/)).map(el => el.trim().split(':').map(e => e.trim()));
+};
+/**
+ * Given a node, translate the node into css key-value pairs and
+ * compare the output to the reference styles required to make a
+ * visually hidden element.
+ *
+ * @returns {number} A fraction between 0-1 depending on the object's likeness.
+ */
+
+export const getObjectLikeness = node => {
+  const styleEntries = node.properties.map(({
+    type,
+    key,
+    value
+  }) => {
+    if (type === 'Property' && key.type === 'Identifier') {
+      return {
+        key: key.name,
+        value: value.type === 'Literal' && value.value
+      };
+    }
+
+    return null;
+  }).filter(node => Boolean(node));
+  return countMatchingKeyValues(styleEntries);
+};
+export const countMatchingKeyValues = styleEntries => {
+  const matchingStyleEntries = styleEntries.filter(entry => {
+    return entry.key in referenceObject;
+  });
+
+  if (styleEntries.length < 5) {
+    return 0;
+  }
+
+  return matchingStyleEntries.reduce((acc, curr) => acc + (referenceObject[curr === null || curr === void 0 ? void 0 : curr.key] === (curr === null || curr === void 0 ? void 0 : curr.value) ? 1.5 : 0.75), 0) / styleEntries.length;
+};

package/dist/es2019/rules/utils/get-import-node-by-source.js

@@ -0,0 +1,10 @@
+/* eslint-disable import/no-unresolved */
+
+/**
+ * @param {SourceCode} source The eslint source
+ * @param {string} path The path specified to find
+ * @returns {ImportDeclaration}
+ */
+export const getImportedNodeBySource = (source, path) => {
+  return source.ast.body.filter(node => node.type === 'ImportDeclaration').find(node => node.source.value === path);
+};

package/dist/es2019/rules/utils/is-color.js

@@ -37,7 +37,8 @@ export const isHardCodedColor = value => {
     return true;
   }
 
-  if (value.startsWith('#') && (value.length === 4 || value.length === 7 || value.length === 9)) {
+  if (value.startsWith('#') && ( // short hex, hex, or hex with alpha
+  value.length === 4 || value.length === 7 || value.length === 9)) {
     return true;
   }
 

package/dist/es2019/rules/utils/is-node.js

@@ -32,6 +32,8 @@ export const isDecendantOfStyleJsxAttribute = node => {
 
   return false;
 };
+export const isStyledTemplateNode = node => (node === null || node === void 0 ? void 0 : node.type) === 'TaggedTemplateExpression' && node.tag.type === 'MemberExpression' && node.tag.object.type === 'Identifier' && node.tag.object.name === 'styled';
+export const isStyledObjectNode = node => (node === null || node === void 0 ? void 0 : node.type) === 'CallExpression' && node.callee.type === 'MemberExpression' && node.callee.object.type === 'Identifier' && node.callee.object.name === 'styled';
 export const isDecendantOfStyleBlock = node => {
   if (node.type === 'VariableDeclarator') {
     if (node.id.type !== 'Identifier') {
@@ -59,7 +61,7 @@ export const isDecendantOfStyleBlock = node => {
     return true;
   }
 
-  if (node.type === 'TaggedTemplateExpression' && node.tag.type === 'MemberExpression' && node.tag.object.type === 'Identifier' && node.tag.object.name === 'styled') {
+  if (isStyledTemplateNode(node)) {
     return true;
   }
 
@@ -73,4 +75,19 @@ export const isDecendantOfStyleBlock = node => {
 
   return false;
 };
-export const isChildOfType = (node, type) => node.parent.type === type;
+export const isChildOfType = (node, type) => node.parent.type === type;
+/**
+ * Given a node, walk up the tree until there is no parent OR a common ancestor of the correct type is found
+ */
+
+export const getClosestNodeOfType = (node, type) => {
+  if (!node) {
+    return node;
+  }
+
+  if (node.type === type) {
+    return node;
+  }
+
+  return getClosestNodeOfType(node.parent, type);
+};

package/dist/es2019/rules/utils/remove-named-import.js

@@ -0,0 +1,16 @@
+/* eslint-disable import/no-unresolved */
+
+/**
+ * @param {SourceCode} source The eslint source
+ * @param {string} path The path specified to find
+ * @returns FixerObject
+ */
+export const removeNamedImport = (fixer, importNode, name) => {
+  const filteredSpecifers = importNode.specifiers.filter(node => node.type === 'ImportSpecifier' && node.imported.name !== name);
+
+  if (filteredSpecifers.length) {
+    return fixer.remove(importNode.specifiers.find(node => node.type === 'ImportSpecifier' && node.imported.name === name));
+  }
+
+  return fixer.remove(importNode);
+};

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/eslint-plugin-design-system",
-	"version": "4.0.0",
+	"version": "4.2.0",
 	"sideEffects": false
 }

package/dist/esm/index.js

@@ -1,16 +1,24 @@
 import ensureTokenUsage from './rules/ensure-design-token-usage';
+import noDeprecatedAPIs from './rules/no-deprecated-apis';
+import noDeprecatedUsage from './rules/no-deprecated-design-token-usage';
 import noDeprecatedImports from './rules/no-deprecated-imports';
 import noUnsafeUsage from './rules/no-unsafe-design-token-usage';
+import useVisuallyHidden from './rules/use-visually-hidden';
 export var rules = {
   'ensure-design-token-usage': ensureTokenUsage,
   'no-unsafe-design-token-usage': noUnsafeUsage,
-  'no-deprecated-imports': noDeprecatedImports
+  'no-deprecated-design-token-usage': noDeprecatedUsage,
+  'no-deprecated-imports': noDeprecatedImports,
+  'no-deprecated-apis': noDeprecatedAPIs,
+  'use-visually-hidden': useVisuallyHidden
 };
 export var configs = {
   recommended: {
     plugins: ['@atlaskit/design-system'],
     rules: {
-      '@atlaskit/design-system/no-deprecated-imports': 'error'
+      '@atlaskit/design-system/no-deprecated-imports': 'error',
+      '@atlaskit/design-system/use-visually-hidden': 'error',
+      '@atlaskit/design-system/no-deprecated-apis': 'warn'
     }
   }
 };

package/dist/esm/rules/ensure-design-token-usage/index.js

@@ -33,6 +33,9 @@ var filterSuggestion = function filterSuggestion(_ref) {
 
 var rule = {
   meta: {
+    // We need to upgrade the version of ESLint.
+    // @ts-expect-error
+    hasSuggestions: true,
     docs: {
       recommended: true
     },