@atlaskit/eslint-plugin-design-system 15.3.0 → 15.5.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 15.5.0
+
+### Minor Changes
+
+- [`62b5aa6adc358`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/62b5aa6adc358) -
+  Completes deprecation guidance for the legacy WidthDetector default export.
+
+  Use `WidthObserver` from `@atlaskit/width-detector/width-observer` instead.
+
+## 15.4.0
+
+### Minor Changes
+
+- [`0af52c9020b98`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0af52c9020b98) -
+  Add `expand-motion-shorthand` rule to `@atlaskit/eslint-plugin-design-system` so it is documented
+  on the design system website. Expands `transition` and `animation` CSS shorthand properties into
+  their individual sub-properties so values can be replaced with motion tokens.
+
+  Deprecate the `compiled/expand-motion-shorthand` rule in `@atlaskit/eslint-plugin-platform` in
+  favour of `@atlaskit/design-system/expand-motion-shorthand`.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 15.3.0
 
 ### Minor Changes

package/README.md

@@ -56,6 +56,7 @@ module.exports = {
 | <a href="./src/rules/ensure-design-token-usage-preview/README.md">ensure-design-token-usage/preview</a>                       | Enforces usage of pre-release design tokens rather than hard-coded values.                                                                                                                                                                                                                                          |             | Yes     | Yes         |
 | <a href="./src/rules/ensure-icon-color/README.md">ensure-icon-color</a>                                                       | Enforces that upcoming icon components have a color prop set, to enable a migration of the default value.                                                                                                                                                                                                           |             |         |             |
 | <a href="./src/rules/ensure-proper-xcss-usage/README.md">ensure-proper-xcss-usage</a>                                         | Enforces proper xcss usage: migrate from xcss() to cssMap() and use cssMap objects with specific keys.                                                                                                                                                                                                              |             |         |             |
+| <a href="./src/rules/expand-motion-shorthand/README.md">expand-motion-shorthand</a>                                           | Expands `transition` and `animation` CSS shorthand properties into their individual sub-properties, so individual values can be replaced with motion tokens.                                                                                                                                                        |             | 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/lozenge-badge-tag-labelling-system-migration/README.md">lozenge-badge-tag-labelling-system-migration</a> | Helps migrate Lozenge isBold prop, Badge appearance values, and SimpleTag/RemovableTag components as part of the Labelling System Phase 1 migration.                                                                                                                                                                |             | Yes     |             |
 | <a href="./src/rules/no-banned-imports/README.md">no-banned-imports</a>                                                       | Disallow importing banned modules.                                                                                                                                                                                                                                                                                  | Yes         |         |             |

package/compass.yml

@@ -1,7 +1,7 @@
 configVersion: 1
 id: ari:cloud:compass:a436116f-02ce-4520-8fbb-7301462a1674:component/c5751cc6-3513-4070-9deb-af31e86aed34/edf84219-0964-4453-82d0-ce6989586011
 name: '@atlaskit/eslint-plugin-design-system'
-ownerId: ari:cloud:identity::team/og-7ea5b0e8-d37c-4003-aae2-0bb5c4b00147 # Design System Team
+ownerId: ari:cloud:identity::team/be19136e-6275-419f-be0c-fcee844b8684 # Design System Engineers
 labels:
   - platform-code
   - platform-afm
@@ -32,7 +32,7 @@ customFields:
     value: true
   - name: Reviewer Selection Mechanism
     type: text
-    value: random(2)
+    value: random(3)
   - name: Required Reviewer Approvals
     type: number
     value: 1

package/configs/deprecated.json

@@ -100,6 +100,17 @@
 		"@atlaskit/item": {
 			"message": "item is deprecated. Please use '@atlaskit/menu' instead."
 		},
+		"@atlaskit/width-detector": {
+			"importSpecifiers": [
+				{
+					"importName": "default",
+					"message": "WidthDetector is deprecated. Please use WidthObserver from '@atlaskit/width-detector/width-observer' instead."
+				}
+			]
+		},
+		"@atlaskit/width-detector/width-detector": {
+			"message": "WidthDetector is deprecated. Please use WidthObserver from '@atlaskit/width-detector/width-observer' instead."
+		},
 		"@atlaskit/theme/elevation": {
 			"importSpecifiers": [
 				{

package/dist/cjs/presets/all-flat.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::5a52fa9f987063b4d0d9e825b02a6067>>
+ * @codegen <<SignedSource::22c8677c3fc921ba33acd505671124a2>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -21,6 +21,7 @@ var rules = {
     '@atlaskit/design-system/ensure-design-token-usage/preview': 'warn',
     '@atlaskit/design-system/ensure-icon-color': 'error',
     '@atlaskit/design-system/ensure-proper-xcss-usage': 'error',
+    '@atlaskit/design-system/expand-motion-shorthand': 'warn',
     '@atlaskit/design-system/icon-label': 'warn',
     '@atlaskit/design-system/lozenge-badge-tag-labelling-system-migration': 'warn',
     '@atlaskit/design-system/no-banned-imports': 'error',

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::458994db7ee4b74c7fcbd2157dc4496e>>
+ * @codegen <<SignedSource::2e8702ed4d2cd2902fed7fc5a895ea6e>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -20,6 +20,7 @@ var rules = {
     '@atlaskit/design-system/ensure-design-token-usage/preview': 'warn',
     '@atlaskit/design-system/ensure-icon-color': 'error',
     '@atlaskit/design-system/ensure-proper-xcss-usage': 'error',
+    '@atlaskit/design-system/expand-motion-shorthand': 'warn',
     '@atlaskit/design-system/icon-label': 'warn',
     '@atlaskit/design-system/lozenge-badge-tag-labelling-system-migration': 'warn',
     '@atlaskit/design-system/no-banned-imports': 'error',

package/dist/cjs/rules/expand-motion-shorthand/index.js

@@ -0,0 +1,285 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _createLintRule = require("../utils/create-lint-rule");
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+var EASING_KEYWORDS = ['ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear', 'step-start', 'step-end'];
+var KEYWORD_VALUES = ['none', 'all', 'inherit', 'initial', 'unset'];
+var isDuration = function isDuration(token) {
+  return /^(?:0|\d+(?:\.\d+)?m?s)$/.test(token);
+};
+var isEasing = function isEasing(token) {
+  return EASING_KEYWORDS.includes(token) || token.startsWith('cubic-bezier(') || token.startsWith('steps(');
+};
+/**
+ * Tokenizes a CSS shorthand value string, respecting function boundaries.
+ * e.g. 'opacity 200ms cubic-bezier(0.4, 0, 0, 1) 0ms' →
+ *      ['opacity', '200ms', 'cubic-bezier(0.4, 0, 0, 1)', '0ms']
+ * Splits on whitespace only when not inside parentheses.
+ */
+var tokenizeShorthand = function tokenizeShorthand(value) {
+  var tokens = [];
+  var depth = 0;
+  var current = '';
+  for (var i = 0; i < value.length; i++) {
+    var ch = value[i];
+    if (ch === '(') {
+      depth++;
+      current += ch;
+    } else if (ch === ')') {
+      depth--;
+      current += ch;
+    } else if (/\s/.test(ch) && depth === 0) {
+      if (current.length > 0) {
+        tokens.push(current);
+        current = '';
+      }
+    } else {
+      current += ch;
+    }
+  }
+  if (current.length > 0) {
+    tokens.push(current);
+  }
+  return tokens;
+};
+
+// Splits on top-level commas (outside function parens) — preserves cubic-bezier(...) commas.
+var splitOnTopLevelCommas = function splitOnTopLevelCommas(value) {
+  var parts = [];
+  var depth = 0;
+  var current = '';
+  var _iterator = _createForOfIteratorHelper(value),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var ch = _step.value;
+      if (ch === '(') {
+        depth++;
+        current += ch;
+      } else if (ch === ')') {
+        depth--;
+        current += ch;
+      } else if (ch === ',' && depth === 0) {
+        parts.push(current.trim());
+        current = '';
+      } else {
+        current += ch;
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  if (current.trim().length > 0) {
+    parts.push(current.trim());
+  }
+  return parts;
+};
+var parseTransition = function parseTransition(value) {
+  var parts = tokenizeShorthand(value.trim());
+  var result = {};
+  var durationCount = 0;
+  var _iterator2 = _createForOfIteratorHelper(parts),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var part = _step2.value;
+      if (isDuration(part)) {
+        if (durationCount === 0) {
+          result.transitionDuration = part;
+        } else {
+          result.transitionDelay = part;
+        }
+        durationCount++;
+      } else if (isEasing(part)) {
+        result.transitionTimingFunction = part;
+      } else {
+        result.transitionProperty = part;
+      }
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  return result;
+};
+var parseAnimation = function parseAnimation(value) {
+  var parts = tokenizeShorthand(value.trim());
+  var result = {};
+  var durationCount = 0;
+  var _iterator3 = _createForOfIteratorHelper(parts),
+    _step3;
+  try {
+    for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+      var part = _step3.value;
+      if (isDuration(part)) {
+        if (durationCount === 0) {
+          result.animationDuration = part;
+        } else {
+          result.animationDelay = part;
+        }
+        durationCount++;
+      } else if (isEasing(part)) {
+        result.animationTimingFunction = part;
+      } else if (part === 'infinite' || /^\d+(\.\d+)?$/.test(part)) {
+        result.animationIterationCount = part;
+      } else if (['normal', 'reverse', 'alternate', 'alternate-reverse'].includes(part)) {
+        result.animationDirection = part;
+      } else if (['none', 'forwards', 'backwards', 'both'].includes(part)) {
+        result.animationFillMode = part;
+      } else if (['running', 'paused'].includes(part)) {
+        result.animationPlayState = part;
+      } else {
+        result.animationName = part;
+      }
+    }
+  } catch (err) {
+    _iterator3.e(err);
+  } finally {
+    _iterator3.f();
+  }
+  return result;
+};
+
+// Combine sub-property values across comma-separated transitions/animations.
+// If no segment explicitly set this sub-property, omit it entirely.
+// Otherwise, fill missing slots with the CSS spec default to preserve positional alignment.
+var combineSubPropertyValues = function combineSubPropertyValues(segments, subProperty, defaultValue) {
+  if (segments.every(function (s) {
+    return s[subProperty] === undefined;
+  })) {
+    return undefined;
+  }
+  return segments.map(function (s) {
+    var _s$subProperty;
+    return (_s$subProperty = s[subProperty]) !== null && _s$subProperty !== void 0 ? _s$subProperty : defaultValue;
+  }).join(', ');
+};
+var buildTransitionFix = function buildTransitionFix(segments, indent) {
+  var lines = [];
+  var property = combineSubPropertyValues(segments, 'transitionProperty', 'all');
+  var duration = combineSubPropertyValues(segments, 'transitionDuration', '0s');
+  var timing = combineSubPropertyValues(segments, 'transitionTimingFunction', 'ease');
+  var delay = combineSubPropertyValues(segments, 'transitionDelay', '0s');
+  if (property !== undefined) lines.push("transitionProperty: '".concat(property, "'"));
+  if (duration !== undefined) lines.push("transitionDuration: '".concat(duration, "'"));
+  if (timing !== undefined) lines.push("transitionTimingFunction: '".concat(timing, "'"));
+  if (delay !== undefined) lines.push("transitionDelay: '".concat(delay, "'"));
+  return lines.join(",\n".concat(indent));
+};
+var buildAnimationFix = function buildAnimationFix(segments, indent) {
+  var lines = [];
+  var name = combineSubPropertyValues(segments, 'animationName', 'none');
+  var duration = combineSubPropertyValues(segments, 'animationDuration', '0s');
+  var timing = combineSubPropertyValues(segments, 'animationTimingFunction', 'ease');
+  var delay = combineSubPropertyValues(segments, 'animationDelay', '0s');
+  var iter = combineSubPropertyValues(segments, 'animationIterationCount', '1');
+  var direction = combineSubPropertyValues(segments, 'animationDirection', 'normal');
+  var fill = combineSubPropertyValues(segments, 'animationFillMode', 'none');
+  var playState = combineSubPropertyValues(segments, 'animationPlayState', 'running');
+  if (name !== undefined) lines.push("animationName: '".concat(name, "'"));
+  if (duration !== undefined) lines.push("animationDuration: '".concat(duration, "'"));
+  if (timing !== undefined) lines.push("animationTimingFunction: '".concat(timing, "'"));
+  if (delay !== undefined) lines.push("animationDelay: '".concat(delay, "'"));
+  if (iter !== undefined) lines.push("animationIterationCount: '".concat(iter, "'"));
+  if (direction !== undefined) lines.push("animationDirection: '".concat(direction, "'"));
+  if (fill !== undefined) lines.push("animationFillMode: '".concat(fill, "'"));
+  if (playState !== undefined) lines.push("animationPlayState: '".concat(playState, "'"));
+  return lines.join(",\n".concat(indent));
+};
+var TRANSITION_SUB_PROPERTIES = ['transitionProperty', 'transitionDuration', 'transitionTimingFunction', 'transitionDelay'];
+var ANIMATION_SUB_PROPERTIES = ['animationName', 'animationDuration', 'animationTimingFunction', 'animationDelay', 'animationIterationCount', 'animationDirection', 'animationFillMode', 'animationPlayState'];
+var executeExpandTransitionRule = function executeExpandTransitionRule(context, node, property) {
+  var _context$sourceCode, _node$loc;
+  if (node.value.type === 'CallExpression') {
+    return;
+  }
+  if (node.value.type === 'TemplateLiteral') {
+    return;
+  }
+  if (node.value.type !== 'Literal' || typeof node.value.value !== 'string') {
+    return;
+  }
+  var rawValue = node.value.value;
+  if (KEYWORD_VALUES.includes(rawValue)) {
+    return;
+  }
+  var subProperties = property === 'transition' ? TRANSITION_SUB_PROPERTIES : ANIMATION_SUB_PROPERTIES;
+
+  // Extract leading whitespace to preserve indentation style (tabs vs spaces)
+  var sourceCode = (_context$sourceCode = context.sourceCode) !== null && _context$sourceCode !== void 0 ? _context$sourceCode : context.getSourceCode();
+  var nodeStart = (_node$loc = node.loc) === null || _node$loc === void 0 ? void 0 : _node$loc.start;
+  var indent = '\t';
+  if (nodeStart) {
+    var _sourceCode$lines;
+    var lineText = (_sourceCode$lines = sourceCode.lines[nodeStart.line - 1]) !== null && _sourceCode$lines !== void 0 ? _sourceCode$lines : '';
+    var leadingWhitespace = lineText.match(/^(\s*)/);
+    if (leadingWhitespace) {
+      indent = leadingWhitespace[1];
+    }
+  }
+  var segmentStrings = splitOnTopLevelCommas(rawValue);
+  if (property === 'transition') {
+    var segments = segmentStrings.map(parseTransition);
+    var fixText = buildTransitionFix(segments, indent);
+    context.report({
+      node: node,
+      messageId: 'expandTransitionShorthand',
+      data: {
+        property: property,
+        subProperties: subProperties.join(', ')
+      },
+      fix: function fix(fixer) {
+        return fixer.replaceText(node, fixText);
+      }
+    });
+  } else {
+    var _segments = segmentStrings.map(parseAnimation);
+    var _fixText = buildAnimationFix(_segments, indent);
+    context.report({
+      node: node,
+      messageId: 'expandTransitionShorthand',
+      data: {
+        property: property,
+        subProperties: subProperties.join(', ')
+      },
+      fix: function fix(fixer) {
+        return fixer.replaceText(node, _fixText);
+      }
+    });
+  }
+};
+var rule = (0, _createLintRule.createLintRule)({
+  meta: {
+    name: 'expand-motion-shorthand',
+    type: 'suggestion',
+    fixable: 'code',
+    docs: {
+      description: 'Expands `transition` and `animation` CSS shorthand properties into their individual sub-properties, so individual values can be replaced with motion tokens.',
+      recommended: false,
+      severity: 'warn'
+    },
+    messages: {
+      expandTransitionShorthand: "Use {{ subProperties }} instead of the '{{ property }}' shorthand so that individual values can be replaced with motion tokens."
+    }
+  },
+  create: function create(context) {
+    return {
+      'Property[key.name="transition"]': function PropertyKeyNameTransition(node) {
+        executeExpandTransitionRule(context, node, 'transition');
+      },
+      'Property[key.name="animation"]': function PropertyKeyNameAnimation(node) {
+        executeExpandTransitionRule(context, node, 'animation');
+      }
+    };
+  }
+});
+var _default = exports.default = rule;

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

@@ -12,6 +12,7 @@ var _ensureDesignTokenUsage = _interopRequireDefault(require("./ensure-design-to
 var _ensureDesignTokenUsagePreview = _interopRequireDefault(require("./ensure-design-token-usage-preview"));
 var _ensureIconColor = _interopRequireDefault(require("./ensure-icon-color"));
 var _ensureProperXcssUsage = _interopRequireDefault(require("./ensure-proper-xcss-usage"));
+var _expandMotionShorthand = _interopRequireDefault(require("./expand-motion-shorthand"));
 var _iconLabel = _interopRequireDefault(require("./icon-label"));
 var _lozengeBadgeTagLabellingSystemMigration = _interopRequireDefault(require("./lozenge-badge-tag-labelling-system-migration"));
 var _noBannedImports = _interopRequireDefault(require("./no-banned-imports"));
@@ -85,7 +86,7 @@ var _useTokensTypography = _interopRequireDefault(require("./use-tokens-typograp
 var _useVisuallyHidden = _interopRequireDefault(require("./use-visually-hidden"));
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::d527850500d4518cc654415fd5f4fbc0>>
+ * @codegen <<SignedSource::56038bd879a1d1c73de3addd961ade97>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -97,6 +98,7 @@ var rules = exports.rules = {
   'ensure-design-token-usage/preview': _ensureDesignTokenUsagePreview.default,
   'ensure-icon-color': _ensureIconColor.default,
   'ensure-proper-xcss-usage': _ensureProperXcssUsage.default,
+  'expand-motion-shorthand': _expandMotionShorthand.default,
   'icon-label': _iconLabel.default,
   'lozenge-badge-tag-labelling-system-migration': _lozengeBadgeTagLabellingSystemMigration.default,
   'no-banned-imports': _noBannedImports.default,

package/dist/cjs/rules/no-to-match-snapshot/index.js

@@ -6,6 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.name = exports.default = void 0;
 var _eslintCodemodUtils = require("eslint-codemod-utils");
 var _createLintRule = require("../utils/create-lint-rule");
+/* eslint-disable
+  @atlaskit/design-system/no-to-match-snapshot,
+  @atlaskit/design-system/no-unsafe-inline-snapshot
+  -- TODO(IND-4952): existing snapshot tests will be removed in a follow-up cleanup PR.
+  See https://hello.atlassian.net/wiki/spaces/afm/pages/7146174189/LDR+Unit+Tests+-+Ban+Snapshot+tests+in+Platform
+  and raise concerns in https://atlassian.enterprise.slack.com/archives/C0BD4K40BLH
+*/
+
 var name = exports.name = 'no-to-match-snapshot';
 var rule = (0, _createLintRule.createLintRule)({
   meta: {

package/dist/configs/deprecated.json

@@ -100,6 +100,17 @@
 		"@atlaskit/item": {
 			"message": "item is deprecated. Please use '@atlaskit/menu' instead."
 		},
+		"@atlaskit/width-detector": {
+			"importSpecifiers": [
+				{
+					"importName": "default",
+					"message": "WidthDetector is deprecated. Please use WidthObserver from '@atlaskit/width-detector/width-observer' instead."
+				}
+			]
+		},
+		"@atlaskit/width-detector/width-detector": {
+			"message": "WidthDetector is deprecated. Please use WidthObserver from '@atlaskit/width-detector/width-observer' instead."
+		},
 		"@atlaskit/theme/elevation": {
 			"importSpecifiers": [
 				{

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::5a52fa9f987063b4d0d9e825b02a6067>>
+ * @codegen <<SignedSource::22c8677c3fc921ba33acd505671124a2>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -15,6 +15,7 @@ const rules = {
     '@atlaskit/design-system/ensure-design-token-usage/preview': 'warn',
     '@atlaskit/design-system/ensure-icon-color': 'error',
     '@atlaskit/design-system/ensure-proper-xcss-usage': 'error',
+    '@atlaskit/design-system/expand-motion-shorthand': 'warn',
     '@atlaskit/design-system/icon-label': 'warn',
     '@atlaskit/design-system/lozenge-badge-tag-labelling-system-migration': 'warn',
     '@atlaskit/design-system/no-banned-imports': 'error',

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::458994db7ee4b74c7fcbd2157dc4496e>>
+ * @codegen <<SignedSource::2e8702ed4d2cd2902fed7fc5a895ea6e>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -14,6 +14,7 @@ const rules = {
     '@atlaskit/design-system/ensure-design-token-usage/preview': 'warn',
     '@atlaskit/design-system/ensure-icon-color': 'error',
     '@atlaskit/design-system/ensure-proper-xcss-usage': 'error',
+    '@atlaskit/design-system/expand-motion-shorthand': 'warn',
     '@atlaskit/design-system/icon-label': 'warn',
     '@atlaskit/design-system/lozenge-badge-tag-labelling-system-migration': 'warn',
     '@atlaskit/design-system/no-banned-imports': 'error',

package/dist/es2019/rules/expand-motion-shorthand/index.js

@@ -0,0 +1,243 @@
+import { createLintRule } from '../utils/create-lint-rule';
+const EASING_KEYWORDS = ['ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear', 'step-start', 'step-end'];
+const KEYWORD_VALUES = ['none', 'all', 'inherit', 'initial', 'unset'];
+const isDuration = token => /^(?:0|\d+(?:\.\d+)?m?s)$/.test(token);
+const isEasing = token => EASING_KEYWORDS.includes(token) || token.startsWith('cubic-bezier(') || token.startsWith('steps(');
+/**
+ * Tokenizes a CSS shorthand value string, respecting function boundaries.
+ * e.g. 'opacity 200ms cubic-bezier(0.4, 0, 0, 1) 0ms' →
+ *      ['opacity', '200ms', 'cubic-bezier(0.4, 0, 0, 1)', '0ms']
+ * Splits on whitespace only when not inside parentheses.
+ */
+const tokenizeShorthand = value => {
+  const tokens = [];
+  let depth = 0;
+  let current = '';
+  for (let i = 0; i < value.length; i++) {
+    const ch = value[i];
+    if (ch === '(') {
+      depth++;
+      current += ch;
+    } else if (ch === ')') {
+      depth--;
+      current += ch;
+    } else if (/\s/.test(ch) && depth === 0) {
+      if (current.length > 0) {
+        tokens.push(current);
+        current = '';
+      }
+    } else {
+      current += ch;
+    }
+  }
+  if (current.length > 0) {
+    tokens.push(current);
+  }
+  return tokens;
+};
+
+// Splits on top-level commas (outside function parens) — preserves cubic-bezier(...) commas.
+const splitOnTopLevelCommas = value => {
+  const parts = [];
+  let depth = 0;
+  let current = '';
+  for (const ch of value) {
+    if (ch === '(') {
+      depth++;
+      current += ch;
+    } else if (ch === ')') {
+      depth--;
+      current += ch;
+    } else if (ch === ',' && depth === 0) {
+      parts.push(current.trim());
+      current = '';
+    } else {
+      current += ch;
+    }
+  }
+  if (current.trim().length > 0) {
+    parts.push(current.trim());
+  }
+  return parts;
+};
+const parseTransition = value => {
+  const parts = tokenizeShorthand(value.trim());
+  const result = {};
+  let durationCount = 0;
+  for (const part of parts) {
+    if (isDuration(part)) {
+      if (durationCount === 0) {
+        result.transitionDuration = part;
+      } else {
+        result.transitionDelay = part;
+      }
+      durationCount++;
+    } else if (isEasing(part)) {
+      result.transitionTimingFunction = part;
+    } else {
+      result.transitionProperty = part;
+    }
+  }
+  return result;
+};
+const parseAnimation = value => {
+  const parts = tokenizeShorthand(value.trim());
+  const result = {};
+  let durationCount = 0;
+  for (const part of parts) {
+    if (isDuration(part)) {
+      if (durationCount === 0) {
+        result.animationDuration = part;
+      } else {
+        result.animationDelay = part;
+      }
+      durationCount++;
+    } else if (isEasing(part)) {
+      result.animationTimingFunction = part;
+    } else if (part === 'infinite' || /^\d+(\.\d+)?$/.test(part)) {
+      result.animationIterationCount = part;
+    } else if (['normal', 'reverse', 'alternate', 'alternate-reverse'].includes(part)) {
+      result.animationDirection = part;
+    } else if (['none', 'forwards', 'backwards', 'both'].includes(part)) {
+      result.animationFillMode = part;
+    } else if (['running', 'paused'].includes(part)) {
+      result.animationPlayState = part;
+    } else {
+      result.animationName = part;
+    }
+  }
+  return result;
+};
+
+// Combine sub-property values across comma-separated transitions/animations.
+// If no segment explicitly set this sub-property, omit it entirely.
+// Otherwise, fill missing slots with the CSS spec default to preserve positional alignment.
+const combineSubPropertyValues = (segments, subProperty, defaultValue) => {
+  if (segments.every(s => s[subProperty] === undefined)) {
+    return undefined;
+  }
+  return segments.map(s => {
+    var _s$subProperty;
+    return (_s$subProperty = s[subProperty]) !== null && _s$subProperty !== void 0 ? _s$subProperty : defaultValue;
+  }).join(', ');
+};
+const buildTransitionFix = (segments, indent) => {
+  const lines = [];
+  const property = combineSubPropertyValues(segments, 'transitionProperty', 'all');
+  const duration = combineSubPropertyValues(segments, 'transitionDuration', '0s');
+  const timing = combineSubPropertyValues(segments, 'transitionTimingFunction', 'ease');
+  const delay = combineSubPropertyValues(segments, 'transitionDelay', '0s');
+  if (property !== undefined) lines.push(`transitionProperty: '${property}'`);
+  if (duration !== undefined) lines.push(`transitionDuration: '${duration}'`);
+  if (timing !== undefined) lines.push(`transitionTimingFunction: '${timing}'`);
+  if (delay !== undefined) lines.push(`transitionDelay: '${delay}'`);
+  return lines.join(`,\n${indent}`);
+};
+const buildAnimationFix = (segments, indent) => {
+  const lines = [];
+  const name = combineSubPropertyValues(segments, 'animationName', 'none');
+  const duration = combineSubPropertyValues(segments, 'animationDuration', '0s');
+  const timing = combineSubPropertyValues(segments, 'animationTimingFunction', 'ease');
+  const delay = combineSubPropertyValues(segments, 'animationDelay', '0s');
+  const iter = combineSubPropertyValues(segments, 'animationIterationCount', '1');
+  const direction = combineSubPropertyValues(segments, 'animationDirection', 'normal');
+  const fill = combineSubPropertyValues(segments, 'animationFillMode', 'none');
+  const playState = combineSubPropertyValues(segments, 'animationPlayState', 'running');
+  if (name !== undefined) lines.push(`animationName: '${name}'`);
+  if (duration !== undefined) lines.push(`animationDuration: '${duration}'`);
+  if (timing !== undefined) lines.push(`animationTimingFunction: '${timing}'`);
+  if (delay !== undefined) lines.push(`animationDelay: '${delay}'`);
+  if (iter !== undefined) lines.push(`animationIterationCount: '${iter}'`);
+  if (direction !== undefined) lines.push(`animationDirection: '${direction}'`);
+  if (fill !== undefined) lines.push(`animationFillMode: '${fill}'`);
+  if (playState !== undefined) lines.push(`animationPlayState: '${playState}'`);
+  return lines.join(`,\n${indent}`);
+};
+const TRANSITION_SUB_PROPERTIES = ['transitionProperty', 'transitionDuration', 'transitionTimingFunction', 'transitionDelay'];
+const ANIMATION_SUB_PROPERTIES = ['animationName', 'animationDuration', 'animationTimingFunction', 'animationDelay', 'animationIterationCount', 'animationDirection', 'animationFillMode', 'animationPlayState'];
+const executeExpandTransitionRule = (context, node, property) => {
+  var _context$sourceCode, _node$loc;
+  if (node.value.type === 'CallExpression') {
+    return;
+  }
+  if (node.value.type === 'TemplateLiteral') {
+    return;
+  }
+  if (node.value.type !== 'Literal' || typeof node.value.value !== 'string') {
+    return;
+  }
+  const rawValue = node.value.value;
+  if (KEYWORD_VALUES.includes(rawValue)) {
+    return;
+  }
+  const subProperties = property === 'transition' ? TRANSITION_SUB_PROPERTIES : ANIMATION_SUB_PROPERTIES;
+
+  // Extract leading whitespace to preserve indentation style (tabs vs spaces)
+  const sourceCode = (_context$sourceCode = context.sourceCode) !== null && _context$sourceCode !== void 0 ? _context$sourceCode : context.getSourceCode();
+  const nodeStart = (_node$loc = node.loc) === null || _node$loc === void 0 ? void 0 : _node$loc.start;
+  let indent = '\t';
+  if (nodeStart) {
+    var _sourceCode$lines;
+    const lineText = (_sourceCode$lines = sourceCode.lines[nodeStart.line - 1]) !== null && _sourceCode$lines !== void 0 ? _sourceCode$lines : '';
+    const leadingWhitespace = lineText.match(/^(\s*)/);
+    if (leadingWhitespace) {
+      indent = leadingWhitespace[1];
+    }
+  }
+  const segmentStrings = splitOnTopLevelCommas(rawValue);
+  if (property === 'transition') {
+    const segments = segmentStrings.map(parseTransition);
+    const fixText = buildTransitionFix(segments, indent);
+    context.report({
+      node,
+      messageId: 'expandTransitionShorthand',
+      data: {
+        property,
+        subProperties: subProperties.join(', ')
+      },
+      fix(fixer) {
+        return fixer.replaceText(node, fixText);
+      }
+    });
+  } else {
+    const segments = segmentStrings.map(parseAnimation);
+    const fixText = buildAnimationFix(segments, indent);
+    context.report({
+      node,
+      messageId: 'expandTransitionShorthand',
+      data: {
+        property,
+        subProperties: subProperties.join(', ')
+      },
+      fix(fixer) {
+        return fixer.replaceText(node, fixText);
+      }
+    });
+  }
+};
+const rule = createLintRule({
+  meta: {
+    name: 'expand-motion-shorthand',
+    type: 'suggestion',
+    fixable: 'code',
+    docs: {
+      description: 'Expands `transition` and `animation` CSS shorthand properties into their individual sub-properties, so individual values can be replaced with motion tokens.',
+      recommended: false,
+      severity: 'warn'
+    },
+    messages: {
+      expandTransitionShorthand: "Use {{ subProperties }} instead of the '{{ property }}' shorthand so that individual values can be replaced with motion tokens."
+    }
+  },
+  create(context) {
+    return {
+      'Property[key.name="transition"]': function (node) {
+        executeExpandTransitionRule(context, node, 'transition');
+      },
+      'Property[key.name="animation"]': function (node) {
+        executeExpandTransitionRule(context, node, 'animation');
+      }
+    };
+  }
+});
+export default rule;

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::d527850500d4518cc654415fd5f4fbc0>>
+ * @codegen <<SignedSource::56038bd879a1d1c73de3addd961ade97>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -11,6 +11,7 @@ import ensureDesignTokenUsage from './ensure-design-token-usage';
 import ensureDesignTokenUsagePreview from './ensure-design-token-usage-preview';
 import ensureIconColor from './ensure-icon-color';
 import ensureProperXcssUsage from './ensure-proper-xcss-usage';
+import expandMotionShorthand from './expand-motion-shorthand';
 import iconLabel from './icon-label';
 import lozengeBadgeTagLabellingSystemMigration from './lozenge-badge-tag-labelling-system-migration';
 import noBannedImports from './no-banned-imports';
@@ -90,6 +91,7 @@ export const rules = {
   'ensure-design-token-usage/preview': ensureDesignTokenUsagePreview,
   'ensure-icon-color': ensureIconColor,
   'ensure-proper-xcss-usage': ensureProperXcssUsage,
+  'expand-motion-shorthand': expandMotionShorthand,
   'icon-label': iconLabel,
   'lozenge-badge-tag-labelling-system-migration': lozengeBadgeTagLabellingSystemMigration,
   'no-banned-imports': noBannedImports,

package/dist/es2019/rules/no-to-match-snapshot/index.js

@@ -1,3 +1,11 @@
+/* eslint-disable
+  @atlaskit/design-system/no-to-match-snapshot,
+  @atlaskit/design-system/no-unsafe-inline-snapshot
+  -- TODO(IND-4952): existing snapshot tests will be removed in a follow-up cleanup PR.
+  See https://hello.atlassian.net/wiki/spaces/afm/pages/7146174189/LDR+Unit+Tests+-+Ban+Snapshot+tests+in+Platform
+  and raise concerns in https://atlassian.enterprise.slack.com/archives/C0BD4K40BLH
+*/
+
 import { isNodeOfType } from 'eslint-codemod-utils';
 import { createLintRule } from '../utils/create-lint-rule';
 export const name = 'no-to-match-snapshot';

package/dist/esm/presets/all-flat.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::5a52fa9f987063b4d0d9e825b02a6067>>
+ * @codegen <<SignedSource::22c8677c3fc921ba33acd505671124a2>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -15,6 +15,7 @@ var rules = {
     '@atlaskit/design-system/ensure-design-token-usage/preview': 'warn',
     '@atlaskit/design-system/ensure-icon-color': 'error',
     '@atlaskit/design-system/ensure-proper-xcss-usage': 'error',
+    '@atlaskit/design-system/expand-motion-shorthand': 'warn',
     '@atlaskit/design-system/icon-label': 'warn',
     '@atlaskit/design-system/lozenge-badge-tag-labelling-system-migration': 'warn',
     '@atlaskit/design-system/no-banned-imports': 'error',

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::458994db7ee4b74c7fcbd2157dc4496e>>
+ * @codegen <<SignedSource::2e8702ed4d2cd2902fed7fc5a895ea6e>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -14,6 +14,7 @@ var rules = {
     '@atlaskit/design-system/ensure-design-token-usage/preview': 'warn',
     '@atlaskit/design-system/ensure-icon-color': 'error',
     '@atlaskit/design-system/ensure-proper-xcss-usage': 'error',
+    '@atlaskit/design-system/expand-motion-shorthand': 'warn',
     '@atlaskit/design-system/icon-label': 'warn',
     '@atlaskit/design-system/lozenge-badge-tag-labelling-system-migration': 'warn',
     '@atlaskit/design-system/no-banned-imports': 'error',

package/dist/esm/rules/expand-motion-shorthand/index.js

@@ -0,0 +1,279 @@
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+import { createLintRule } from '../utils/create-lint-rule';
+var EASING_KEYWORDS = ['ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear', 'step-start', 'step-end'];
+var KEYWORD_VALUES = ['none', 'all', 'inherit', 'initial', 'unset'];
+var isDuration = function isDuration(token) {
+  return /^(?:0|\d+(?:\.\d+)?m?s)$/.test(token);
+};
+var isEasing = function isEasing(token) {
+  return EASING_KEYWORDS.includes(token) || token.startsWith('cubic-bezier(') || token.startsWith('steps(');
+};
+/**
+ * Tokenizes a CSS shorthand value string, respecting function boundaries.
+ * e.g. 'opacity 200ms cubic-bezier(0.4, 0, 0, 1) 0ms' →
+ *      ['opacity', '200ms', 'cubic-bezier(0.4, 0, 0, 1)', '0ms']
+ * Splits on whitespace only when not inside parentheses.
+ */
+var tokenizeShorthand = function tokenizeShorthand(value) {
+  var tokens = [];
+  var depth = 0;
+  var current = '';
+  for (var i = 0; i < value.length; i++) {
+    var ch = value[i];
+    if (ch === '(') {
+      depth++;
+      current += ch;
+    } else if (ch === ')') {
+      depth--;
+      current += ch;
+    } else if (/\s/.test(ch) && depth === 0) {
+      if (current.length > 0) {
+        tokens.push(current);
+        current = '';
+      }
+    } else {
+      current += ch;
+    }
+  }
+  if (current.length > 0) {
+    tokens.push(current);
+  }
+  return tokens;
+};
+
+// Splits on top-level commas (outside function parens) — preserves cubic-bezier(...) commas.
+var splitOnTopLevelCommas = function splitOnTopLevelCommas(value) {
+  var parts = [];
+  var depth = 0;
+  var current = '';
+  var _iterator = _createForOfIteratorHelper(value),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var ch = _step.value;
+      if (ch === '(') {
+        depth++;
+        current += ch;
+      } else if (ch === ')') {
+        depth--;
+        current += ch;
+      } else if (ch === ',' && depth === 0) {
+        parts.push(current.trim());
+        current = '';
+      } else {
+        current += ch;
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  if (current.trim().length > 0) {
+    parts.push(current.trim());
+  }
+  return parts;
+};
+var parseTransition = function parseTransition(value) {
+  var parts = tokenizeShorthand(value.trim());
+  var result = {};
+  var durationCount = 0;
+  var _iterator2 = _createForOfIteratorHelper(parts),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var part = _step2.value;
+      if (isDuration(part)) {
+        if (durationCount === 0) {
+          result.transitionDuration = part;
+        } else {
+          result.transitionDelay = part;
+        }
+        durationCount++;
+      } else if (isEasing(part)) {
+        result.transitionTimingFunction = part;
+      } else {
+        result.transitionProperty = part;
+      }
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  return result;
+};
+var parseAnimation = function parseAnimation(value) {
+  var parts = tokenizeShorthand(value.trim());
+  var result = {};
+  var durationCount = 0;
+  var _iterator3 = _createForOfIteratorHelper(parts),
+    _step3;
+  try {
+    for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+      var part = _step3.value;
+      if (isDuration(part)) {
+        if (durationCount === 0) {
+          result.animationDuration = part;
+        } else {
+          result.animationDelay = part;
+        }
+        durationCount++;
+      } else if (isEasing(part)) {
+        result.animationTimingFunction = part;
+      } else if (part === 'infinite' || /^\d+(\.\d+)?$/.test(part)) {
+        result.animationIterationCount = part;
+      } else if (['normal', 'reverse', 'alternate', 'alternate-reverse'].includes(part)) {
+        result.animationDirection = part;
+      } else if (['none', 'forwards', 'backwards', 'both'].includes(part)) {
+        result.animationFillMode = part;
+      } else if (['running', 'paused'].includes(part)) {
+        result.animationPlayState = part;
+      } else {
+        result.animationName = part;
+      }
+    }
+  } catch (err) {
+    _iterator3.e(err);
+  } finally {
+    _iterator3.f();
+  }
+  return result;
+};
+
+// Combine sub-property values across comma-separated transitions/animations.
+// If no segment explicitly set this sub-property, omit it entirely.
+// Otherwise, fill missing slots with the CSS spec default to preserve positional alignment.
+var combineSubPropertyValues = function combineSubPropertyValues(segments, subProperty, defaultValue) {
+  if (segments.every(function (s) {
+    return s[subProperty] === undefined;
+  })) {
+    return undefined;
+  }
+  return segments.map(function (s) {
+    var _s$subProperty;
+    return (_s$subProperty = s[subProperty]) !== null && _s$subProperty !== void 0 ? _s$subProperty : defaultValue;
+  }).join(', ');
+};
+var buildTransitionFix = function buildTransitionFix(segments, indent) {
+  var lines = [];
+  var property = combineSubPropertyValues(segments, 'transitionProperty', 'all');
+  var duration = combineSubPropertyValues(segments, 'transitionDuration', '0s');
+  var timing = combineSubPropertyValues(segments, 'transitionTimingFunction', 'ease');
+  var delay = combineSubPropertyValues(segments, 'transitionDelay', '0s');
+  if (property !== undefined) lines.push("transitionProperty: '".concat(property, "'"));
+  if (duration !== undefined) lines.push("transitionDuration: '".concat(duration, "'"));
+  if (timing !== undefined) lines.push("transitionTimingFunction: '".concat(timing, "'"));
+  if (delay !== undefined) lines.push("transitionDelay: '".concat(delay, "'"));
+  return lines.join(",\n".concat(indent));
+};
+var buildAnimationFix = function buildAnimationFix(segments, indent) {
+  var lines = [];
+  var name = combineSubPropertyValues(segments, 'animationName', 'none');
+  var duration = combineSubPropertyValues(segments, 'animationDuration', '0s');
+  var timing = combineSubPropertyValues(segments, 'animationTimingFunction', 'ease');
+  var delay = combineSubPropertyValues(segments, 'animationDelay', '0s');
+  var iter = combineSubPropertyValues(segments, 'animationIterationCount', '1');
+  var direction = combineSubPropertyValues(segments, 'animationDirection', 'normal');
+  var fill = combineSubPropertyValues(segments, 'animationFillMode', 'none');
+  var playState = combineSubPropertyValues(segments, 'animationPlayState', 'running');
+  if (name !== undefined) lines.push("animationName: '".concat(name, "'"));
+  if (duration !== undefined) lines.push("animationDuration: '".concat(duration, "'"));
+  if (timing !== undefined) lines.push("animationTimingFunction: '".concat(timing, "'"));
+  if (delay !== undefined) lines.push("animationDelay: '".concat(delay, "'"));
+  if (iter !== undefined) lines.push("animationIterationCount: '".concat(iter, "'"));
+  if (direction !== undefined) lines.push("animationDirection: '".concat(direction, "'"));
+  if (fill !== undefined) lines.push("animationFillMode: '".concat(fill, "'"));
+  if (playState !== undefined) lines.push("animationPlayState: '".concat(playState, "'"));
+  return lines.join(",\n".concat(indent));
+};
+var TRANSITION_SUB_PROPERTIES = ['transitionProperty', 'transitionDuration', 'transitionTimingFunction', 'transitionDelay'];
+var ANIMATION_SUB_PROPERTIES = ['animationName', 'animationDuration', 'animationTimingFunction', 'animationDelay', 'animationIterationCount', 'animationDirection', 'animationFillMode', 'animationPlayState'];
+var executeExpandTransitionRule = function executeExpandTransitionRule(context, node, property) {
+  var _context$sourceCode, _node$loc;
+  if (node.value.type === 'CallExpression') {
+    return;
+  }
+  if (node.value.type === 'TemplateLiteral') {
+    return;
+  }
+  if (node.value.type !== 'Literal' || typeof node.value.value !== 'string') {
+    return;
+  }
+  var rawValue = node.value.value;
+  if (KEYWORD_VALUES.includes(rawValue)) {
+    return;
+  }
+  var subProperties = property === 'transition' ? TRANSITION_SUB_PROPERTIES : ANIMATION_SUB_PROPERTIES;
+
+  // Extract leading whitespace to preserve indentation style (tabs vs spaces)
+  var sourceCode = (_context$sourceCode = context.sourceCode) !== null && _context$sourceCode !== void 0 ? _context$sourceCode : context.getSourceCode();
+  var nodeStart = (_node$loc = node.loc) === null || _node$loc === void 0 ? void 0 : _node$loc.start;
+  var indent = '\t';
+  if (nodeStart) {
+    var _sourceCode$lines;
+    var lineText = (_sourceCode$lines = sourceCode.lines[nodeStart.line - 1]) !== null && _sourceCode$lines !== void 0 ? _sourceCode$lines : '';
+    var leadingWhitespace = lineText.match(/^(\s*)/);
+    if (leadingWhitespace) {
+      indent = leadingWhitespace[1];
+    }
+  }
+  var segmentStrings = splitOnTopLevelCommas(rawValue);
+  if (property === 'transition') {
+    var segments = segmentStrings.map(parseTransition);
+    var fixText = buildTransitionFix(segments, indent);
+    context.report({
+      node: node,
+      messageId: 'expandTransitionShorthand',
+      data: {
+        property: property,
+        subProperties: subProperties.join(', ')
+      },
+      fix: function fix(fixer) {
+        return fixer.replaceText(node, fixText);
+      }
+    });
+  } else {
+    var _segments = segmentStrings.map(parseAnimation);
+    var _fixText = buildAnimationFix(_segments, indent);
+    context.report({
+      node: node,
+      messageId: 'expandTransitionShorthand',
+      data: {
+        property: property,
+        subProperties: subProperties.join(', ')
+      },
+      fix: function fix(fixer) {
+        return fixer.replaceText(node, _fixText);
+      }
+    });
+  }
+};
+var rule = createLintRule({
+  meta: {
+    name: 'expand-motion-shorthand',
+    type: 'suggestion',
+    fixable: 'code',
+    docs: {
+      description: 'Expands `transition` and `animation` CSS shorthand properties into their individual sub-properties, so individual values can be replaced with motion tokens.',
+      recommended: false,
+      severity: 'warn'
+    },
+    messages: {
+      expandTransitionShorthand: "Use {{ subProperties }} instead of the '{{ property }}' shorthand so that individual values can be replaced with motion tokens."
+    }
+  },
+  create: function create(context) {
+    return {
+      'Property[key.name="transition"]': function PropertyKeyNameTransition(node) {
+        executeExpandTransitionRule(context, node, 'transition');
+      },
+      'Property[key.name="animation"]': function PropertyKeyNameAnimation(node) {
+        executeExpandTransitionRule(context, node, 'animation');
+      }
+    };
+  }
+});
+export default rule;

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::d527850500d4518cc654415fd5f4fbc0>>
+ * @codegen <<SignedSource::56038bd879a1d1c73de3addd961ade97>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -11,6 +11,7 @@ import ensureDesignTokenUsage from './ensure-design-token-usage';
 import ensureDesignTokenUsagePreview from './ensure-design-token-usage-preview';
 import ensureIconColor from './ensure-icon-color';
 import ensureProperXcssUsage from './ensure-proper-xcss-usage';
+import expandMotionShorthand from './expand-motion-shorthand';
 import iconLabel from './icon-label';
 import lozengeBadgeTagLabellingSystemMigration from './lozenge-badge-tag-labelling-system-migration';
 import noBannedImports from './no-banned-imports';
@@ -90,6 +91,7 @@ export var rules = {
   'ensure-design-token-usage/preview': ensureDesignTokenUsagePreview,
   'ensure-icon-color': ensureIconColor,
   'ensure-proper-xcss-usage': ensureProperXcssUsage,
+  'expand-motion-shorthand': expandMotionShorthand,
   'icon-label': iconLabel,
   'lozenge-badge-tag-labelling-system-migration': lozengeBadgeTagLabellingSystemMigration,
   'no-banned-imports': noBannedImports,

package/dist/esm/rules/no-to-match-snapshot/index.js

@@ -1,3 +1,11 @@
+/* eslint-disable
+  @atlaskit/design-system/no-to-match-snapshot,
+  @atlaskit/design-system/no-unsafe-inline-snapshot
+  -- TODO(IND-4952): existing snapshot tests will be removed in a follow-up cleanup PR.
+  See https://hello.atlassian.net/wiki/spaces/afm/pages/7146174189/LDR+Unit+Tests+-+Ban+Snapshot+tests+in+Platform
+  and raise concerns in https://atlassian.enterprise.slack.com/archives/C0BD4K40BLH
+*/
+
 import { isNodeOfType } from 'eslint-codemod-utils';
 import { createLintRule } from '../utils/create-lint-rule';
 export var name = 'no-to-match-snapshot';

package/dist/types/presets/all-flat.codegen.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::5a52fa9f987063b4d0d9e825b02a6067>>
+ * @codegen <<SignedSource::22c8677c3fc921ba33acd505671124a2>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { Linter } from 'eslint';

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::458994db7ee4b74c7fcbd2157dc4496e>>
+ * @codegen <<SignedSource::2e8702ed4d2cd2902fed7fc5a895ea6e>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { ESLint } from 'eslint';

package/dist/types/rules/expand-motion-shorthand/index.d.ts

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

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::d527850500d4518cc654415fd5f4fbc0>>
+ * @codegen <<SignedSource::56038bd879a1d1c73de3addd961ade97>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { Rule } from 'eslint';

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": "15.3.0",
+	"version": "15.5.0",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
 	"publishConfig": {
@@ -31,9 +31,9 @@
 	},
 	"dependencies": {
 		"@atlaskit/eslint-utils": "^3.0.0",
-		"@atlaskit/icon": "^36.1.0",
-		"@atlaskit/icon-lab": "^7.2.0",
-		"@atlaskit/tokens": "^15.3.0",
+		"@atlaskit/icon": "^36.2.0",
+		"@atlaskit/icon-lab": "^7.3.0",
+		"@atlaskit/tokens": "^15.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@typescript-eslint/utils": "^7.1.0",
 		"ajv": "^6.12.6",