@atlaskit/eslint-plugin-design-system 4.20.0 → 5.0.1

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 5.0.1
+
+### Patch Changes
+
+- [`31ebca384fa`](https://bitbucket.org/atlassian/atlassian-frontend/commits/31ebca384fa) - Improved behaviour of `ensure-design-token-usage-spacing` rule to not report on or replace 0, auto, and calc within spacing properties.
+
+## 5.0.0
+
+### Major Changes
+
+- [`b910bbe6130`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b910bbe6130) - The following rules are now included in the recommended preset as errors:
+
+  - ensure-design-token-usage
+  - no-deprecated-apis
+  - no-deprecated-imports
+  - no-unsafe-design-token-usage
+
+  The following rules are now included in the recommended preset as warnings:
+
+  - no-deprecated-design-token-usage
+
+### Minor Changes
+
+- [`b689e24847d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b689e24847d) - All lint rule violations in IDEs now point to their corresponding documentation on https://atlassian.design.
+
 ## 4.20.0
 
 ### Minor Changes

package/README.md

@@ -49,15 +49,15 @@ module.exports = {
 
 | Rule                                                                                                    | Description                                                                                     | Recommended | Fixable | Suggestions |
 | ------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | ----------- | ------- | ----------- |
-| <a href="./src/rules/ensure-design-token-usage/README.md">ensure-design-token-usage</a>                 | Enforces usage of design tokens.                                                                |             | Yes     | Yes         |
+| <a href="./src/rules/ensure-design-token-usage/README.md">ensure-design-token-usage</a>                 | Enforces usage of design tokens.                                                                | Yes         | Yes     | Yes         |
 | <a href="./src/rules/ensure-design-token-usage-spacing/README.md">ensure-design-token-usage-spacing</a> | Enforces usage of spacing design tokens rather than hard-coded values.                          |             | Yes     |             |
 | <a href="./src/rules/icon-label/README.md">icon-label</a>                                               | Enforces accessible usage of icon labels when composed with Atlassian Design System components. | Yes         | Yes     |             |
 | <a href="./src/rules/no-banned-imports/README.md">no-banned-imports</a>                                 | Disallow importing banned modules.                                                              | Yes         |         |             |
 | <a href="./src/rules/no-deprecated-apis/README.md">no-deprecated-apis</a>                               | Disallow using deprecated APIs.                                                                 | Yes         |         |             |
-| <a href="./src/rules/no-deprecated-design-token-usage/README.md">no-deprecated-design-token-usage</a>   | Disallow using deprecated design tokens.                                                        |             | Yes     |             |
+| <a href="./src/rules/no-deprecated-design-token-usage/README.md">no-deprecated-design-token-usage</a>   | Disallow using deprecated design tokens.                                                        | Yes         | Yes     |             |
 | <a href="./src/rules/no-deprecated-imports/README.md">no-deprecated-imports</a>                         | Disallow importing deprecated modules.                                                          | Yes         |         |             |
 | <a href="./src/rules/no-margin/README.md">no-margin</a>                                                 | Disallow using the margin CSS property.                                                         |             |         |             |
-| <a href="./src/rules/no-unsafe-design-token-usage/README.md">no-unsafe-design-token-usage</a>           | Enforces design token usage is statically and locally analyzable.                               |             | Yes     |             |
+| <a href="./src/rules/no-unsafe-design-token-usage/README.md">no-unsafe-design-token-usage</a>           | Enforces design token usage is statically and locally analyzable.                               | Yes         | Yes     |             |
 | <a href="./src/rules/use-primitives/README.md">use-primitives</a>                                       | Encourage the usage of primitives components.                                                   |             | 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

@@ -13,15 +13,15 @@ This plugin contains rules that should be used when working with the [Atlassian
 
 | Rule                                                                               | Description                                                                                     | Recommended | Fixable | Suggestions |
 | ---------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | ----------- | ------- | ----------- |
-| <a href="#ensure-design-token-usage">ensure-design-token-usage</a>                 | Enforces usage of design tokens.                                                                |             | Yes     | Yes         |
+| <a href="#ensure-design-token-usage">ensure-design-token-usage</a>                 | Enforces usage of design tokens.                                                                | Yes         | Yes     | Yes         |
 | <a href="#ensure-design-token-usage-spacing">ensure-design-token-usage-spacing</a> | Enforces usage of spacing design tokens rather than hard-coded values.                          |             | Yes     |             |
 | <a href="#icon-label">icon-label</a>                                               | Enforces accessible usage of icon labels when composed with Atlassian Design System components. | Yes         | Yes     |             |
 | <a href="#no-banned-imports">no-banned-imports</a>                                 | Disallow importing banned modules.                                                              | Yes         |         |             |
 | <a href="#no-deprecated-apis">no-deprecated-apis</a>                               | Disallow using deprecated APIs.                                                                 | Yes         |         |             |
-| <a href="#no-deprecated-design-token-usage">no-deprecated-design-token-usage</a>   | Disallow using deprecated design tokens.                                                        |             | Yes     |             |
+| <a href="#no-deprecated-design-token-usage">no-deprecated-design-token-usage</a>   | Disallow using deprecated design tokens.                                                        | Yes         | Yes     |             |
 | <a href="#no-deprecated-imports">no-deprecated-imports</a>                         | Disallow importing deprecated modules.                                                          | Yes         |         |             |
 | <a href="#no-margin">no-margin</a>                                                 | Disallow using the margin CSS property.                                                         |             |         |             |
-| <a href="#no-unsafe-design-token-usage">no-unsafe-design-token-usage</a>           | Enforces design token usage is statically and locally analyzable.                               |             | Yes     |             |
+| <a href="#no-unsafe-design-token-usage">no-unsafe-design-token-usage</a>           | Enforces design token usage is statically and locally analyzable.                               | Yes         | Yes     |             |
 | <a href="#use-primitives">use-primitives</a>                                       | Encourage the usage of primitives components.                                                   |             | Yes     |             |
 | <a href="#use-visually-hidden">use-visually-hidden</a>                             | Enforce usage of the visually hidden component.                                                 | Yes         | Yes     |             |
 
@@ -48,7 +48,7 @@ import { B100 } from '@atlaskit/theme/colors';
 css({ color: 'red' });
               ^^^
 css({ boxShadow: '0px 1px 1px #161A1D32' });
-                          ^^^^^^^^^
+                              ^^^^^^^^^
 css`${e100};`;
       ^^^^
 css({ color: B100 });
@@ -60,6 +60,8 @@ css({ color: B100 });
 ```js
 import { token } from '@atlaskit/tokens';
 
+css({ color: token('color.text.danger') });
+
 css({ boxShadow: token('elevation.shadow.card') });
 ```
 

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

@@ -6,16 +6,19 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::bd61b874ee0323855e0ad920b54e84cc>>
+ * @codegen <<SignedSource::b3d2f24d8d37a87fc2bbd964dfdcb87c>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = {
   plugins: ['@atlaskit/design-system'],
   rules: {
+    '@atlaskit/design-system/ensure-design-token-usage': 'error',
     '@atlaskit/design-system/icon-label': 'warn',
     '@atlaskit/design-system/no-banned-imports': 'error',
-    '@atlaskit/design-system/no-deprecated-apis': 'warn',
-    '@atlaskit/design-system/no-deprecated-imports': 'warn',
+    '@atlaskit/design-system/no-deprecated-apis': 'error',
+    '@atlaskit/design-system/no-deprecated-design-token-usage': 'warn',
+    '@atlaskit/design-system/no-deprecated-imports': 'error',
+    '@atlaskit/design-system/no-unsafe-design-token-usage': 'error',
     '@atlaskit/design-system/use-visually-hidden': 'error'
   }
 };

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _createRule = require("../utils/create-rule");
 var _getIsException = require("../utils/get-is-exception");
 var _isColor = require("../utils/is-color");
 var _isElevation = require("../utils/is-elevation");
@@ -34,19 +35,19 @@ var filterSuggestion = function filterSuggestion(_ref) {
   var shouldReturnSuggestion = _ref.shouldReturnSuggestion;
   return shouldReturnSuggestion;
 };
-var rule = {
+var rule = (0, _createRule.createLintRule)({
   meta: {
-    // We need to upgrade the version of ESLint.
+    name: 'ensure-design-token-usage',
     hasSuggestions: true,
     docs: {
       description: 'Enforces usage of design tokens.',
-      recommended: false
+      recommended: 'error'
     },
     fixable: 'code',
     type: 'problem',
     messages: {
-      legacyElevation: "Elevations can be sourced from the global theme using the token function made of both a background and shadow. Use \"card\" for card elevations, and \"overlay\" for anything else that should appear elevated.\n\n{{example}}\n",
-      hardCodedColor: "Colors can be sourced from the global theme using the token function.\n\n```\nimport { token } from '@atlaskit/tokens';\n\ntoken('color.background.blanket');\n```\n"
+      legacyElevation: "Elevations can be sourced from the global theme using the token function made of both a background and shadow. Use \"card\" for card elevations, and \"overlay\" for anything else that should appear elevated.",
+      hardCodedColor: "Colors can be sourced from the global theme using the token function."
     }
   },
   create: function create(context) {
@@ -192,6 +193,6 @@ var rule = {
       }
     };
   }
-};
+});
 var _default = rule;
 exports.default = _default;

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

@@ -118,6 +118,11 @@ var rule = (0, _createRule.createRule)({
             });
             return;
           }
+
+          // Don't report on CSS calc function
+          if (node.value.type === 'Literal' && (0, _utils.isCalc)(node.value.value)) {
+            return;
+          }
           var propertyName = node.key.name;
           var isFontFamily = /fontFamily/.test(propertyName);
           var value = (0, _utils.getValue)(node.value, context);
@@ -139,6 +144,11 @@ var rule = (0, _createRule.createRule)({
           if (values.length === 1 || isFontFamily) {
             var _values = (0, _slicedToArray2.default)(values, 1),
               _value = _values[0];
+
+            // Do not report or suggest a token to replace `0`
+            if ((0, _utils.isZero)(_value)) {
+              return;
+            }
             var pixelValue = isFontFamily ? _value : (0, _utils.emToPixels)(_value, fontSize);
             return context.report({
               node: node,
@@ -170,17 +180,22 @@ var rule = (0, _createRule.createRule)({
            * estree node.
            *
            * @example
-           * { padding: '8px 0px' } // two values we don't try and apply the fixer
+           * { padding: '8px 0px' }
            */
           values.forEach(function (val, index) {
             var pixelValue = (0, _utils.emToPixels)(val, fontSize);
+
+            // Do not report or suggest a token to replace `0`
+            if ((0, _utils.isZero)(val) || val === 'auto') {
+              return;
+            }
             context.report({
               node: node,
               messageId: 'noRawSpacingValues',
               data: {
                 payload: "".concat(propertyName, ":").concat(pixelValue)
               },
-              fix: index === 0 ? function (fixer) {
+              fix: function fix(fixer) {
                 var allResolvableValues = values.every(function (value) {
                   return !Number.isNaN((0, _utils.emToPixels)(value, fontSize));
                 });
@@ -189,6 +204,8 @@ var rule = (0, _createRule.createRule)({
                 }
                 var valuesWithTokenReplacement = values.filter(function (value) {
                   return (0, _utils.findTokenNameByPropertyValue)(propertyName, value);
+                }).filter(function (value) {
+                  return value !== 0;
                 });
                 if (valuesWithTokenReplacement.length === 0) {
                   // all values could be replaceable but that just means they're numeric
@@ -211,12 +228,16 @@ var rule = (0, _createRule.createRule)({
                   return null;
                 }
                 return (!tokenNode && ruleConfig.applyImport ? [(0, _utils.insertTokensImport)(fixer)] : []).concat([fixer.replaceText(node.value, "`".concat(values.map(function (value, index) {
+                  if ((0, _utils.isZero)(value)) {
+                    return originalValues[index];
+                  }
                   var pixelValue = (0, _utils.emToPixels)(value, fontSize);
                   var pixelValueString = "".concat(pixelValue, "px");
                   // if there is a token we take it, otherwise we go with the original value
+
                   return (0, _utils.findTokenNameByPropertyValue)(propertyName, value) ? "${".concat((0, _utils.getTokenNodeForValue)(propertyName, pixelValueString), "}") : originalValues[index];
                 }).join(' '), "`"))]);
-              } : undefined
+              }
             });
           });
         }
@@ -225,7 +246,7 @@ var rule = (0, _createRule.createRule)({
       // CSSTemplateLiteral and StyledTemplateLiteral
       // const cssTemplateLiteral = css`color: red; padding: 12px`;
       // const styledTemplateLiteral = styled.p`color: red; padding: 8px`;
-      'TaggedTemplateExpression[tag.name="css"],TaggedTemplateExpression[tag.object.name="styled"]': function TaggedTemplateExpressionTagNameCssTaggedTemplateExpressionTagObjectNameStyled(node) {
+      'TaggedTemplateExpression[tag.name="css"],TaggedTemplateExpression[tag.object.name="styled"],TaggedTemplateExpression[tag.callee.name="styled"]': function TaggedTemplateExpressionTagNameCssTaggedTemplateExpressionTagObjectNameStyledTaggedTemplateExpressionTagCalleeNameStyled(node) {
         if (node.type !== 'TaggedTemplateExpression') {
           return;
         }
@@ -282,17 +303,13 @@ var rule = (0, _createRule.createRule)({
               // if the value is already valid, nothing to report or replace
               return originalValue;
             }
-            if (isNaN(numericOrNanValue) && !isFontFamily) {
-              // this can be either a weird expression or a fontsize declaration
 
-              // we can't replace a NaN but we can alert what the offending value is
-              context.report({
-                node: node,
-                messageId: 'noRawSpacingValues',
-                data: {
-                  payload: "".concat(propertyName, ":").concat(originalValue)
-                }
-              });
+            // do not replace 0 with tokens
+            if ((0, _utils.isZero)(pxValue) || pxValue === 'auto') {
+              return originalValue;
+            }
+            if (isNaN(numericOrNanValue) && !isFontFamily) {
+              // do not report if we have nothing to replace with
               return originalValue;
             }
 

package/dist/cjs/rules/ensure-design-token-usage-spacing/utils.js

@@ -15,9 +15,9 @@ exports.getTokenNodeForValue = getTokenNodeForValue;
 exports.getTokenReplacement = getTokenReplacement;
 exports.getValueFromShorthand = exports.getValue = void 0;
 exports.insertTokensImport = insertTokensImport;
-exports.isSpacingProperty = void 0;
+exports.isSpacingProperty = exports.isCalc = void 0;
 exports.isTokenValueString = isTokenValueString;
-exports.onlyScaleTokens = exports.isValidSpacingValue = exports.isTypographyProperty = void 0;
+exports.onlyScaleTokens = exports.isZero = exports.isValidSpacingValue = exports.isTypographyProperty = void 0;
 exports.processCssNode = processCssNode;
 exports.removePixelSuffix = void 0;
 exports.shouldAnalyzeProperty = shouldAnalyzeProperty;
@@ -292,12 +292,11 @@ var emToPixels = function emToPixels(value, fontSize) {
   return value;
 };
 exports.emToPixels = emToPixels;
-var percentageOrEm = /(%$)|(\d+em$)/;
+var percentageOrEmOrAuto = /(%$)|(\d+em$)|(auto$)/;
 var removePixelSuffix = function removePixelSuffix(value) {
   var isString = typeof value === 'string';
-
   // @ts-ignore This shouldn't be a type error but CI is complaining
-  if (isString && percentageOrEm.test(value)) {
+  if (isString && percentageOrEmOrAuto.test(value)) {
     return value;
   }
 
@@ -305,7 +304,7 @@ var removePixelSuffix = function removePixelSuffix(value) {
   return Number(isString ? value.replace('px', '') : value);
 };
 exports.removePixelSuffix = removePixelSuffix;
-var invalidSpacingUnitRegex = /(%$)|(\d+rem$)|(^calc)|(vw$)|(vh$)/;
+var invalidSpacingUnitRegex = /(%$)|(\d+rem$)|(vw$)|(vh$)/;
 var isValidSpacingValue = function isValidSpacingValue(value, fontSize) {
   if (typeof value === 'string') {
     if (invalidSpacingUnitRegex.test(value)) {
@@ -324,9 +323,33 @@ var isValidSpacingValue = function isValidSpacingValue(value, fontSize) {
   }
   return true;
 };
+exports.isValidSpacingValue = isValidSpacingValue;
+var calcRegex = /(^calc)/;
+var isCalc = function isCalc(value) {
+  if (typeof value === 'string') {
+    if (calcRegex.test(value)) {
+      return true;
+    }
+  }
+  return false;
+};
+exports.isCalc = isCalc;
+var isZero = function isZero(value) {
+  if (typeof value === 'string') {
+    if (value === '0px' || value === '0') {
+      return true;
+    }
+  }
+  if (typeof value === 'number') {
+    if (value === 0) {
+      return true;
+    }
+  }
+  return false;
+};
 
 // convert line-height to lineHeight
-exports.isValidSpacingValue = isValidSpacingValue;
+exports.isZero = isZero;
 var convertHyphenatedNameToCamelCase = function convertHyphenatedNameToCamelCase(prop) {
   return prop.replace(/-./g, function (m) {
     return m[1].toUpperCase();

package/dist/cjs/rules/icon-label/index.js

@@ -5,18 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _createRule = require("../utils/create-rule");
 var _jsx = require("../utils/jsx");
 var elements = ['AkButton', 'AKButton', 'Button', 'MenuItem', 'ButtonItem', 'CustomItem', 'CustomThemeButton', 'LoadingButton', 'BreadcrumbsItem'];
 var elementsIconProps = ['iconBefore', 'iconAfter', 'icon'];
-var rule = {
+var rule = (0, _createRule.createLintRule)({
   meta: {
+    name: 'icon-label',
     fixable: 'code',
     type: 'suggestion',
     docs: {
-      url: 'http://go/adsc/icon/usage#accessibility-guidelines',
       description: 'Enforces accessible usage of icon labels when composed with Atlassian Design System components.',
-      // TODO: Move to createRule() api
-      // @ts-expect-error
       recommended: 'warn'
     },
     messages: {
@@ -117,6 +116,6 @@ var rule = {
       })
     };
   }
-};
+});
 var _default = rule;
 exports.default = _default;

package/dist/cjs/rules/no-banned-imports/index.js

@@ -5,13 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _createRule = require("../utils/create-rule");
 var _paths = require("./paths");
-var rule = {
+var rule = (0, _createRule.createLintRule)({
   meta: {
+    name: 'no-banned-imports',
     type: 'problem',
     docs: {
       description: 'Disallow importing banned modules.',
-      recommended: true
+      recommended: 'error'
     },
     messages: {
       path: "The '{{importSource}}' import is restricted from being used. {{customMessage}}"
@@ -45,6 +47,6 @@ var rule = {
       ExportDefaultDeclaration: checkNode
     };
   }
-};
+});
 var _default = rule;
 exports.default = _default;

package/dist/cjs/rules/no-deprecated-apis/index.js

@@ -39,7 +39,7 @@ var rule = (0, _createRule.createRule)({
     type: 'suggestion',
     docs: {
       description: 'Disallow using deprecated APIs.',
-      recommended: 'warn'
+      recommended: 'error'
     },
     messages: {
       noDeprecatedJSXAttributes: 'The JSX attribute {{propName}} has been deprecated.'

package/dist/cjs/rules/no-deprecated-design-token-usage/index.js

@@ -7,11 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _renameMapping = _interopRequireDefault(require("@atlaskit/tokens/rename-mapping"));
 var _tokenIds = require("@atlaskit/tokens/token-ids");
-var rule = {
+var _createRule = require("../utils/create-rule");
+var rule = (0, _createRule.createLintRule)({
   meta: {
+    name: 'no-deprecated-design-token-usage',
     docs: {
       description: 'Disallow using deprecated design tokens.',
-      recommended: false
+      recommended: 'warn'
     },
     fixable: 'code',
     type: 'problem',
@@ -58,6 +60,6 @@ var rule = {
       }
     };
   }
-};
+});
 var _default = rule;
 exports.default = _default;

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

@@ -52,7 +52,7 @@ var rule = (0, _createRule.createRule)({
     type: 'suggestion',
     docs: {
       description: 'Disallow importing deprecated modules.',
-      recommended: 'warn'
+      recommended: 'error'
     },
     messages: {
       pathWithCustomMessage: "'{{importSource}}' import is restricted from being used. {{customMessage}}",

package/dist/cjs/rules/no-margin/index.js

@@ -5,10 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _eslintCodemodUtils = require("eslint-codemod-utils");
-var rule = {
+var _createRule = require("../utils/create-rule");
+var rule = (0, _createRule.createLintRule)({
   meta: {
+    name: 'no-margin',
     type: 'problem',
     docs: {
+      recommended: false,
       description: 'Disallow using the margin CSS property.'
     },
     messages: {
@@ -78,6 +81,6 @@ var rule = {
       }
     };
   }
-};
+});
 var _default = rule;
 exports.default = _default;

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

@@ -9,16 +9,18 @@ var _eslintCodemodUtils = require("eslint-codemod-utils");
 var _renameMapping = _interopRequireDefault(require("@atlaskit/tokens/rename-mapping"));
 var _tokenIds = require("@atlaskit/tokens/token-ids");
 var _tokenNames = _interopRequireDefault(require("@atlaskit/tokens/token-names"));
+var _createRule = require("../utils/create-rule");
 var _isNode = require("../utils/is-node");
 var _isToken = require("../utils/is-token");
 var defaultConfig = {
   shouldEnforceFallbacks: false
 };
-var rule = {
+var rule = (0, _createRule.createLintRule)({
   meta: {
+    name: 'no-unsafe-design-token-usage',
     docs: {
       description: 'Enforces design token usage is statically and locally analyzable.',
-      recommended: false
+      recommended: 'error'
     },
     fixable: 'code',
     type: 'problem',
@@ -173,6 +175,6 @@ var rule = {
       }
     };
   }
-};
+});
 var _default = rule;
 exports.default = _default;

package/dist/cjs/rules/use-primitives/index.js

@@ -5,12 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _createRule = require("../utils/create-rule");
 var _utils = require("./utils");
 var boxDocsUrl = 'https://atlassian.design/components/primitves/box/examples';
 var inlineDocsUrl = 'https://atlassian.design/components/primitves/inline/examples';
 var stackDocsUrl = 'https://atlassian.design/components/primitves/stack/examples';
-var rule = {
+var rule = (0, _createRule.createLintRule)({
   meta: {
+    name: 'use-primitives',
     type: 'suggestion',
     fixable: 'code',
     docs: {
@@ -104,6 +106,6 @@ var rule = {
       }
     };
   }
-};
+});
 var _default = rule;
 exports.default = _default;

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

@@ -7,20 +7,20 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _createRule = require("../utils/create-rule");
 var _isNode = require("../utils/is-node");
 var _fixJsx = _interopRequireDefault(require("./fix-jsx"));
 var _fixVanilla = _interopRequireDefault(require("./fix-vanilla"));
 var _utils = require("./utils");
-/* eslint-disable @atlaskit/design-system/use-visually-hidden */
-
 var THEME_IMPORT_NAMES = ['visuallyHidden', 'assistive'];
-var rule = {
+var rule = (0, _createRule.createLintRule)({
   meta: {
+    name: 'use-visually-hidden',
     type: 'suggestion',
     fixable: 'code',
     docs: {
       description: 'Enforce usage of the visually hidden component.',
-      recommended: true
+      recommended: 'error'
     },
     messages: {
       noDeprecatedUsage: 'Using the export `{{local}}` from `{{import}}` as a mixin is discouraged. Please use `@atlaskit/visually-hidden` instead.',
@@ -166,6 +166,6 @@ var rule = {
       }
     };
   }
-};
+});
 var _default = rule;
 exports.default = _default;

package/dist/cjs/rules/utils/create-rule.js

@@ -3,9 +3,29 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createRule = void 0;
+exports.createRule = exports.createLintRule = void 0;
 var _utils = require("@typescript-eslint/utils");
+/**
+ * We are moving to our own small abstraction to create a lint rule that we have the power
+ * to change and mold to our own needs.
+ *
+ * @see createLintRule
+ *
+ * @private
+ * @deprecated
+ */
 var createRule = _utils.ESLintUtils.RuleCreator(function (name) {
-  return "https://atlassian.design/components/eslint-plugin-design-system/examples#".concat(name);
+  return "https://atlassian.design/components/eslint-plugin-design-system/usage#".concat(name);
 });
-exports.createRule = createRule;
+exports.createRule = createRule;
+/**
+ * Tiny wrapped over the ESLint rule module type that ensures
+ * there is a docs link to our ESLint plugin documentation page,
+ * as well as improving type support.
+ */
+var createLintRule = function createLintRule(rule) {
+  var url = "https://atlassian.design/components/eslint-plugin-design-system/usage#".concat(rule.meta.name);
+  rule.meta.docs.url = url;
+  return rule;
+};
+exports.createLintRule = createLintRule;

package/dist/cjs/version.json

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

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

@@ -1,15 +1,18 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::bd61b874ee0323855e0ad920b54e84cc>>
+ * @codegen <<SignedSource::b3d2f24d8d37a87fc2bbd964dfdcb87c>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
   plugins: ['@atlaskit/design-system'],
   rules: {
+    '@atlaskit/design-system/ensure-design-token-usage': 'error',
     '@atlaskit/design-system/icon-label': 'warn',
     '@atlaskit/design-system/no-banned-imports': 'error',
-    '@atlaskit/design-system/no-deprecated-apis': 'warn',
-    '@atlaskit/design-system/no-deprecated-imports': 'warn',
+    '@atlaskit/design-system/no-deprecated-apis': 'error',
+    '@atlaskit/design-system/no-deprecated-design-token-usage': 'warn',
+    '@atlaskit/design-system/no-deprecated-imports': 'error',
+    '@atlaskit/design-system/no-unsafe-design-token-usage': 'error',
     '@atlaskit/design-system/use-visually-hidden': 'error'
   }
 };