@atlaskit/eslint-plugin-design-system 8.12.1 → 8.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/README.md +1 -0
  3. package/constellation/index/usage.mdx +55 -0
  4. package/dist/cjs/presets/all.codegen.js +2 -1
  5. package/dist/cjs/presets/recommended.codegen.js +2 -1
  6. package/dist/cjs/rules/index.codegen.js +3 -1
  7. package/dist/cjs/rules/use-drawer-label/index.js +79 -0
  8. package/dist/es2019/presets/all.codegen.js +2 -1
  9. package/dist/es2019/presets/recommended.codegen.js +2 -1
  10. package/dist/es2019/rules/index.codegen.js +3 -1
  11. package/dist/es2019/rules/use-drawer-label/index.js +71 -0
  12. package/dist/esm/presets/all.codegen.js +2 -1
  13. package/dist/esm/presets/recommended.codegen.js +2 -1
  14. package/dist/esm/rules/index.codegen.js +3 -1
  15. package/dist/esm/rules/use-drawer-label/index.js +73 -0
  16. package/dist/types/index.codegen.d.ts +2 -0
  17. package/dist/types/presets/all.codegen.d.ts +2 -1
  18. package/dist/types/presets/recommended.codegen.d.ts +2 -1
  19. package/dist/types/rules/index.codegen.d.ts +1 -0
  20. package/dist/types/rules/use-drawer-label/index.d.ts +3 -0
  21. package/dist/types-ts4.5/index.codegen.d.ts +2 -0
  22. package/dist/types-ts4.5/presets/all.codegen.d.ts +2 -1
  23. package/dist/types-ts4.5/presets/recommended.codegen.d.ts +2 -1
  24. package/dist/types-ts4.5/rules/index.codegen.d.ts +1 -0
  25. package/dist/types-ts4.5/rules/use-drawer-label/index.d.ts +3 -0
  26. package/package.json +2 -1
  27. package/report.api.md +3 -0
  28. package/tmp/api-report-tmp.d.ts +3 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/eslint-plugin-design-system
2
2
 
3
+ ## 8.13.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#41825](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41825) [`f9641b28ed5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f9641b28ed5) - Introducing new rule to encourage adding/referencing accessible name to a Drawer component.
8
+
3
9
  ## 8.12.1
4
10
 
5
11
  ### Patch Changes
package/README.md CHANGED
@@ -63,6 +63,7 @@ module.exports = {
63
63
  | <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 | |
64
64
  | <a href="./src/rules/no-unsupported-drag-and-drop-libraries/README.md">no-unsupported-drag-and-drop-libraries</a> | Disallow importing unsupported drag and drop modules. | Yes | | |
65
65
  | <a href="./src/rules/prefer-primitives/README.md">prefer-primitives</a> | Increase awareness of primitive components via code hints. Strictly used for education purposes and discoverability. To enforce usage please refer to the `use-primitives` rule. | | | |
66
+ | <a href="./src/rules/use-drawer-label/README.md">use-drawer-label</a> | Encourages to provide accessible name for Atlassian Design System Drawer component. | Yes | | Yes |
66
67
  | <a href="./src/rules/use-href-in-link-item/README.md">use-href-in-link-item</a> | Inform developers of eventual requirement of `href` prop in `LinkItem` component. Elements with a `link` role require an `href` attribute for users to properly navigate, particularly those using assistive technologies. If no valid `href` is required for your use case, consider using a `ButtonItem` instead. | Yes | Yes | Yes |
67
68
  | <a href="./src/rules/use-primitives/README.md">use-primitives</a> | Encourage the usage of primitives components. | | Yes | Yes |
68
69
  | <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 CHANGED
@@ -27,6 +27,7 @@ This plugin contains rules that should be used when working with the [Atlassian
27
27
  | <a href="#no-unsafe-design-token-usage">no-unsafe-design-token-usage</a> | Enforces design token usage is statically and locally analyzable. | Yes | Yes | |
28
28
  | <a href="#no-unsupported-drag-and-drop-libraries">no-unsupported-drag-and-drop-libraries</a> | Disallow importing unsupported drag and drop modules. | Yes | | |
29
29
  | <a href="#prefer-primitives">prefer-primitives</a> | Increase awareness of primitive components via code hints. Strictly used for education purposes and discoverability. To enforce usage please refer to the `use-primitives` rule. | | | |
30
+ | <a href="#use-drawer-label">use-drawer-label</a> | Encourages to provide accessible name for Atlassian Design System Drawer component. | Yes | | Yes |
30
31
  | <a href="#use-href-in-link-item">use-href-in-link-item</a> | Inform developers of eventual requirement of `href` prop in `LinkItem` component. Elements with a `link` role require an `href` attribute for users to properly navigate, particularly those using assistive technologies. If no valid `href` is required for your use case, consider using a `ButtonItem` instead. | Yes | Yes | Yes |
31
32
  | <a href="#use-primitives">use-primitives</a> | Encourage the usage of primitives components. | | Yes | Yes |
32
33
  | <a href="#use-visually-hidden">use-visually-hidden</a> | Enforce usage of the visually hidden component. | Yes | Yes | |
@@ -667,6 +668,60 @@ This rule marks code as violations when it may be able to be replaced with a pri
667
668
  </Component>
668
669
  ```
669
670
 
671
+ ## use-drawer-label
672
+
673
+ Drawer should have an accessible name or a reference to it, so that upon opening, users of assistive technologies could have contextual information of interaction with current element.
674
+
675
+ <h3>Examples</h3>
676
+
677
+ This rule will indicate user with warning to strongly recommend usage of either `label` or `titleId` prop.
678
+
679
+ #### Incorrect
680
+
681
+ ```tsx
682
+ <Drawer>
683
+ ^^^^^^ Missing either `label` or `titleId` prop.
684
+ Drawer content
685
+ </Drawer>
686
+
687
+ <Drawer label>
688
+ ^^^^^ `label` prop is missing value.
689
+ Drawer content
690
+ </Drawer>
691
+
692
+ <Drawer label="">
693
+ ^^^^^ `label` prop is missing accessible name value.
694
+ Drawer content
695
+ </Drawer>
696
+
697
+ <Drawer titleId>
698
+ ^^^^^^^ `titleId` prop is missing reference value.
699
+ <h1 id="drawer-title">Drawer content title</hi>
700
+ </Drawer>
701
+
702
+ <Drawer titleId="">
703
+ ^^^^^^^ `titleId` prop is missing reference value.
704
+ <h1 id="drawer-title">Drawer content title</hi>
705
+ </Drawer>
706
+
707
+ <Drawer titleId="drawer-title" label="">
708
+ ^^^^^^^ ^^^^^ Do not include both `titleId` and `label` properties. Use `titleId` if the label text is available in the DOM to reference it, otherwise use `label` to provide accessible name explicitly.
709
+ <h1 id="drawer-title">Drawer content title</hi>
710
+ </Drawer>
711
+ ```
712
+
713
+ #### Correct
714
+
715
+ ```tsx
716
+ <Drawer label="Drawer content title">
717
+ Drawer content
718
+ </Drawer>
719
+
720
+ <Drawer titleId="drawer-title">
721
+ <h1 id="drawer-title">Drawer content title</hi>
722
+ </Drawer>
723
+ ```
724
+
670
725
  ## use-href-in-link-item
671
726
 
672
727
  The `LinkItem` component in `@atlaskit/menu` will be requiring the `href` prop in future releases. If no valid `href` prop is required, consider using the `ButtonItem` component.
package/dist/cjs/presets/all.codegen.js CHANGED
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.default = void 0;
7
7
  /**
8
8
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
9
- * @codegen <<SignedSource::ee066c02e7f136b81900b0a8b5d17474>>
9
+ * @codegen <<SignedSource::a4007a35edc1c661f543508c2b005014>>
10
10
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
11
11
  */
12
12
  var _default = exports.default = {
@@ -26,6 +26,7 @@ var _default = exports.default = {
26
26
  '@atlaskit/design-system/no-unsafe-design-token-usage': 'error',
27
27
  '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
28
28
  '@atlaskit/design-system/prefer-primitives': 'warn',
29
+ '@atlaskit/design-system/use-drawer-label': 'warn',
29
30
  '@atlaskit/design-system/use-href-in-link-item': 'warn',
30
31
  '@atlaskit/design-system/use-primitives': 'warn',
31
32
  '@atlaskit/design-system/use-visually-hidden': 'error'
package/dist/cjs/presets/recommended.codegen.js CHANGED
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.default = void 0;
7
7
  /**
8
8
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
9
- * @codegen <<SignedSource::6fda4eb65fc8548707bea5505541300f>>
9
+ * @codegen <<SignedSource::240c678d4f10d97618541f35d79e1c71>>
10
10
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
11
11
  */
12
12
  var _default = exports.default = {
@@ -22,6 +22,7 @@ var _default = exports.default = {
22
22
  '@atlaskit/design-system/no-nested-styles': 'error',
23
23
  '@atlaskit/design-system/no-unsafe-design-token-usage': 'error',
24
24
  '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
25
+ '@atlaskit/design-system/use-drawer-label': 'warn',
25
26
  '@atlaskit/design-system/use-href-in-link-item': 'warn',
26
27
  '@atlaskit/design-system/use-visually-hidden': 'error'
27
28
  }
package/dist/cjs/rules/index.codegen.js CHANGED
@@ -19,12 +19,13 @@ var _noPhysicalProperties = _interopRequireDefault(require("./no-physical-proper
19
19
  var _noUnsafeDesignTokenUsage = _interopRequireDefault(require("./no-unsafe-design-token-usage"));
20
20
  var _noUnsupportedDragAndDropLibraries = _interopRequireDefault(require("./no-unsupported-drag-and-drop-libraries"));
21
21
  var _preferPrimitives = _interopRequireDefault(require("./prefer-primitives"));
22
+ var _useDrawerLabel = _interopRequireDefault(require("./use-drawer-label"));
22
23
  var _useHrefInLinkItem = _interopRequireDefault(require("./use-href-in-link-item"));
23
24
  var _usePrimitives = _interopRequireDefault(require("./use-primitives"));
24
25
  var _useVisuallyHidden = _interopRequireDefault(require("./use-visually-hidden"));
25
26
  /**
26
27
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
27
- * @codegen <<SignedSource::77c3fb2b0891614695791b558527948a>>
28
+ * @codegen <<SignedSource::c5844c54692156b8d604fd5994082abe>>
28
29
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
29
30
  */
30
31
  var _default = exports.default = {
@@ -42,6 +43,7 @@ var _default = exports.default = {
42
43
  'no-unsafe-design-token-usage': _noUnsafeDesignTokenUsage.default,
43
44
  'no-unsupported-drag-and-drop-libraries': _noUnsupportedDragAndDropLibraries.default,
44
45
  'prefer-primitives': _preferPrimitives.default,
46
+ 'use-drawer-label': _useDrawerLabel.default,
45
47
  'use-href-in-link-item': _useHrefInLinkItem.default,
46
48
  'use-primitives': _usePrimitives.default,
47
49
  'use-visually-hidden': _useVisuallyHidden.default
package/dist/cjs/rules/use-drawer-label/index.js ADDED
@@ -0,0 +1,79 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _eslintCodemodUtils = require("eslint-codemod-utils");
8
+ var _createRule = require("../utils/create-rule");
9
+ var elementsAccessibleNameProps = ['label', 'titleId'];
10
+ var rule = (0, _createRule.createLintRule)({
11
+ meta: {
12
+ name: 'use-drawer-label',
13
+ type: 'suggestion',
14
+ docs: {
15
+ description: 'Encourages to provide accessible name for Atlassian Design System Drawer component.',
16
+ recommended: true,
17
+ severity: 'warn'
18
+ },
19
+ messages: {
20
+ missingLabelProp: 'Missing accessible name. If there is no visible content to associate use `label` prop, otherwise pass id of element to `titleId` prop to be associated as label.',
21
+ labelPropShouldHaveContents: 'Define string that labels the interactive element.',
22
+ titleIdShouldHaveValue: '`titleId` should reference the id of element that define accessible name.',
23
+ noBothPropsUsage: 'Do not include both `titleId` and `label` properties. Use `titleId` if the label text is available in the DOM to reference it, otherwise use `label` to provide accessible name explicitly.'
24
+ },
25
+ hasSuggestions: true
26
+ },
27
+ create: function create(context) {
28
+ var contextLocalIdentifier = [];
29
+ return {
30
+ ImportDeclaration: function ImportDeclaration(node) {
31
+ if (node.source.value === '@atlaskit/drawer') {
32
+ if (node.specifiers.length) {
33
+ var defaultImport = node.specifiers.filter(function (spec) {
34
+ return spec.type === 'ImportDefaultSpecifier';
35
+ });
36
+ var local = defaultImport[0].local;
37
+ contextLocalIdentifier.push(local.name);
38
+ }
39
+ }
40
+ },
41
+ JSXElement: function JSXElement(node) {
42
+ if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'JSXElement')) {
43
+ return;
44
+ }
45
+ if (!(0, _eslintCodemodUtils.isNodeOfType)(node.openingElement.name, 'JSXIdentifier')) {
46
+ return;
47
+ }
48
+ var name = node.openingElement.name.name;
49
+ if (contextLocalIdentifier.includes(name)) {
50
+ var componentLabelProps = node.openingElement.attributes.filter(function (attr) {
51
+ return (0, _eslintCodemodUtils.isNodeOfType)(attr, 'JSXAttribute') && (0, _eslintCodemodUtils.isNodeOfType)(attr.name, 'JSXIdentifier') && elementsAccessibleNameProps.includes(attr.name.name);
52
+ });
53
+ if (componentLabelProps.length === 1) {
54
+ var prop = componentLabelProps[0];
55
+ if ('value' in prop && prop.value) {
56
+ if ((0, _eslintCodemodUtils.isNodeOfType)(prop.value, 'Literal') && !prop.value.value || (0, _eslintCodemodUtils.isNodeOfType)(prop.value, 'JSXExpressionContainer') && !prop.value.expression) {
57
+ context.report({
58
+ node: prop,
59
+ messageId: prop.name.name === 'label' ? 'labelPropShouldHaveContents' : 'titleIdShouldHaveValue'
60
+ });
61
+ }
62
+ }
63
+ } else if (componentLabelProps.length > 1) {
64
+ context.report({
65
+ node: node.openingElement,
66
+ messageId: 'noBothPropsUsage'
67
+ });
68
+ } else {
69
+ context.report({
70
+ node: node.openingElement,
71
+ messageId: 'missingLabelProp'
72
+ });
73
+ }
74
+ }
75
+ }
76
+ };
77
+ }
78
+ });
79
+ var _default = exports.default = rule;
package/dist/es2019/presets/all.codegen.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
- * @codegen <<SignedSource::ee066c02e7f136b81900b0a8b5d17474>>
3
+ * @codegen <<SignedSource::a4007a35edc1c661f543508c2b005014>>
4
4
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
5
5
  */
6
6
  export default {
@@ -20,6 +20,7 @@ export default {
20
20
  '@atlaskit/design-system/no-unsafe-design-token-usage': 'error',
21
21
  '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
22
22
  '@atlaskit/design-system/prefer-primitives': 'warn',
23
+ '@atlaskit/design-system/use-drawer-label': 'warn',
23
24
  '@atlaskit/design-system/use-href-in-link-item': 'warn',
24
25
  '@atlaskit/design-system/use-primitives': 'warn',
25
26
  '@atlaskit/design-system/use-visually-hidden': 'error'
package/dist/es2019/presets/recommended.codegen.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
- * @codegen <<SignedSource::6fda4eb65fc8548707bea5505541300f>>
3
+ * @codegen <<SignedSource::240c678d4f10d97618541f35d79e1c71>>
4
4
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
5
5
  */
6
6
  export default {
@@ -16,6 +16,7 @@ export default {
16
16
  '@atlaskit/design-system/no-nested-styles': 'error',
17
17
  '@atlaskit/design-system/no-unsafe-design-token-usage': 'error',
18
18
  '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
19
+ '@atlaskit/design-system/use-drawer-label': 'warn',
19
20
  '@atlaskit/design-system/use-href-in-link-item': 'warn',
20
21
  '@atlaskit/design-system/use-visually-hidden': 'error'
21
22
  }
package/dist/es2019/rules/index.codegen.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
- * @codegen <<SignedSource::77c3fb2b0891614695791b558527948a>>
3
+ * @codegen <<SignedSource::c5844c54692156b8d604fd5994082abe>>
4
4
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
5
5
  */
6
6
  import consistentCssPropUsage from './consistent-css-prop-usage';
@@ -17,6 +17,7 @@ import noPhysicalProperties from './no-physical-properties';
17
17
  import noUnsafeDesignTokenUsage from './no-unsafe-design-token-usage';
18
18
  import noUnsupportedDragAndDropLibraries from './no-unsupported-drag-and-drop-libraries';
19
19
  import preferPrimitives from './prefer-primitives';
20
+ import useDrawerLabel from './use-drawer-label';
20
21
  import useHrefInLinkItem from './use-href-in-link-item';
21
22
  import usePrimitives from './use-primitives';
22
23
  import useVisuallyHidden from './use-visually-hidden';
@@ -35,6 +36,7 @@ export default {
35
36
  'no-unsafe-design-token-usage': noUnsafeDesignTokenUsage,
36
37
  'no-unsupported-drag-and-drop-libraries': noUnsupportedDragAndDropLibraries,
37
38
  'prefer-primitives': preferPrimitives,
39
+ 'use-drawer-label': useDrawerLabel,
38
40
  'use-href-in-link-item': useHrefInLinkItem,
39
41
  'use-primitives': usePrimitives,
40
42
  'use-visually-hidden': useVisuallyHidden
package/dist/es2019/rules/use-drawer-label/index.js ADDED
@@ -0,0 +1,71 @@
1
+ import { isNodeOfType } from 'eslint-codemod-utils';
2
+ import { createLintRule } from '../utils/create-rule';
3
+ const elementsAccessibleNameProps = ['label', 'titleId'];
4
+ const rule = createLintRule({
5
+ meta: {
6
+ name: 'use-drawer-label',
7
+ type: 'suggestion',
8
+ docs: {
9
+ description: 'Encourages to provide accessible name for Atlassian Design System Drawer component.',
10
+ recommended: true,
11
+ severity: 'warn'
12
+ },
13
+ messages: {
14
+ missingLabelProp: 'Missing accessible name. If there is no visible content to associate use `label` prop, otherwise pass id of element to `titleId` prop to be associated as label.',
15
+ labelPropShouldHaveContents: 'Define string that labels the interactive element.',
16
+ titleIdShouldHaveValue: '`titleId` should reference the id of element that define accessible name.',
17
+ noBothPropsUsage: 'Do not include both `titleId` and `label` properties. Use `titleId` if the label text is available in the DOM to reference it, otherwise use `label` to provide accessible name explicitly.'
18
+ },
19
+ hasSuggestions: true
20
+ },
21
+ create(context) {
22
+ const contextLocalIdentifier = [];
23
+ return {
24
+ ImportDeclaration(node) {
25
+ if (node.source.value === '@atlaskit/drawer') {
26
+ if (node.specifiers.length) {
27
+ const defaultImport = node.specifiers.filter(spec => spec.type === 'ImportDefaultSpecifier');
28
+ const {
29
+ local
30
+ } = defaultImport[0];
31
+ contextLocalIdentifier.push(local.name);
32
+ }
33
+ }
34
+ },
35
+ JSXElement(node) {
36
+ if (!isNodeOfType(node, 'JSXElement')) {
37
+ return;
38
+ }
39
+ if (!isNodeOfType(node.openingElement.name, 'JSXIdentifier')) {
40
+ return;
41
+ }
42
+ const name = node.openingElement.name.name;
43
+ if (contextLocalIdentifier.includes(name)) {
44
+ const componentLabelProps = node.openingElement.attributes.filter(attr => isNodeOfType(attr, 'JSXAttribute') && isNodeOfType(attr.name, 'JSXIdentifier') && elementsAccessibleNameProps.includes(attr.name.name));
45
+ if (componentLabelProps.length === 1) {
46
+ const prop = componentLabelProps[0];
47
+ if ('value' in prop && prop.value) {
48
+ if (isNodeOfType(prop.value, 'Literal') && !prop.value.value || isNodeOfType(prop.value, 'JSXExpressionContainer') && !prop.value.expression) {
49
+ context.report({
50
+ node: prop,
51
+ messageId: prop.name.name === 'label' ? 'labelPropShouldHaveContents' : 'titleIdShouldHaveValue'
52
+ });
53
+ }
54
+ }
55
+ } else if (componentLabelProps.length > 1) {
56
+ context.report({
57
+ node: node.openingElement,
58
+ messageId: 'noBothPropsUsage'
59
+ });
60
+ } else {
61
+ context.report({
62
+ node: node.openingElement,
63
+ messageId: 'missingLabelProp'
64
+ });
65
+ }
66
+ }
67
+ }
68
+ };
69
+ }
70
+ });
71
+ export default rule;
package/dist/esm/presets/all.codegen.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
- * @codegen <<SignedSource::ee066c02e7f136b81900b0a8b5d17474>>
3
+ * @codegen <<SignedSource::a4007a35edc1c661f543508c2b005014>>
4
4
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
5
5
  */
6
6
  export default {
@@ -20,6 +20,7 @@ export default {
20
20
  '@atlaskit/design-system/no-unsafe-design-token-usage': 'error',
21
21
  '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
22
22
  '@atlaskit/design-system/prefer-primitives': 'warn',
23
+ '@atlaskit/design-system/use-drawer-label': 'warn',
23
24
  '@atlaskit/design-system/use-href-in-link-item': 'warn',
24
25
  '@atlaskit/design-system/use-primitives': 'warn',
25
26
  '@atlaskit/design-system/use-visually-hidden': 'error'
package/dist/esm/presets/recommended.codegen.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
- * @codegen <<SignedSource::6fda4eb65fc8548707bea5505541300f>>
3
+ * @codegen <<SignedSource::240c678d4f10d97618541f35d79e1c71>>
4
4
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
5
5
  */
6
6
  export default {
@@ -16,6 +16,7 @@ export default {
16
16
  '@atlaskit/design-system/no-nested-styles': 'error',
17
17
  '@atlaskit/design-system/no-unsafe-design-token-usage': 'error',
18
18
  '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
19
+ '@atlaskit/design-system/use-drawer-label': 'warn',
19
20
  '@atlaskit/design-system/use-href-in-link-item': 'warn',
20
21
  '@atlaskit/design-system/use-visually-hidden': 'error'
21
22
  }
package/dist/esm/rules/index.codegen.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
- * @codegen <<SignedSource::77c3fb2b0891614695791b558527948a>>
3
+ * @codegen <<SignedSource::c5844c54692156b8d604fd5994082abe>>
4
4
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
5
5
  */
6
6
  import consistentCssPropUsage from './consistent-css-prop-usage';
@@ -17,6 +17,7 @@ import noPhysicalProperties from './no-physical-properties';
17
17
  import noUnsafeDesignTokenUsage from './no-unsafe-design-token-usage';
18
18
  import noUnsupportedDragAndDropLibraries from './no-unsupported-drag-and-drop-libraries';
19
19
  import preferPrimitives from './prefer-primitives';
20
+ import useDrawerLabel from './use-drawer-label';
20
21
  import useHrefInLinkItem from './use-href-in-link-item';
21
22
  import usePrimitives from './use-primitives';
22
23
  import useVisuallyHidden from './use-visually-hidden';
@@ -35,6 +36,7 @@ export default {
35
36
  'no-unsafe-design-token-usage': noUnsafeDesignTokenUsage,
36
37
  'no-unsupported-drag-and-drop-libraries': noUnsupportedDragAndDropLibraries,
37
38
  'prefer-primitives': preferPrimitives,
39
+ 'use-drawer-label': useDrawerLabel,
38
40
  'use-href-in-link-item': useHrefInLinkItem,
39
41
  'use-primitives': usePrimitives,
40
42
  'use-visually-hidden': useVisuallyHidden
package/dist/esm/rules/use-drawer-label/index.js ADDED
@@ -0,0 +1,73 @@
1
+ import { isNodeOfType } from 'eslint-codemod-utils';
2
+ import { createLintRule } from '../utils/create-rule';
3
+ var elementsAccessibleNameProps = ['label', 'titleId'];
4
+ var rule = createLintRule({
5
+ meta: {
6
+ name: 'use-drawer-label',
7
+ type: 'suggestion',
8
+ docs: {
9
+ description: 'Encourages to provide accessible name for Atlassian Design System Drawer component.',
10
+ recommended: true,
11
+ severity: 'warn'
12
+ },
13
+ messages: {
14
+ missingLabelProp: 'Missing accessible name. If there is no visible content to associate use `label` prop, otherwise pass id of element to `titleId` prop to be associated as label.',
15
+ labelPropShouldHaveContents: 'Define string that labels the interactive element.',
16
+ titleIdShouldHaveValue: '`titleId` should reference the id of element that define accessible name.',
17
+ noBothPropsUsage: 'Do not include both `titleId` and `label` properties. Use `titleId` if the label text is available in the DOM to reference it, otherwise use `label` to provide accessible name explicitly.'
18
+ },
19
+ hasSuggestions: true
20
+ },
21
+ create: function create(context) {
22
+ var contextLocalIdentifier = [];
23
+ return {
24
+ ImportDeclaration: function ImportDeclaration(node) {
25
+ if (node.source.value === '@atlaskit/drawer') {
26
+ if (node.specifiers.length) {
27
+ var defaultImport = node.specifiers.filter(function (spec) {
28
+ return spec.type === 'ImportDefaultSpecifier';
29
+ });
30
+ var local = defaultImport[0].local;
31
+ contextLocalIdentifier.push(local.name);
32
+ }
33
+ }
34
+ },
35
+ JSXElement: function JSXElement(node) {
36
+ if (!isNodeOfType(node, 'JSXElement')) {
37
+ return;
38
+ }
39
+ if (!isNodeOfType(node.openingElement.name, 'JSXIdentifier')) {
40
+ return;
41
+ }
42
+ var name = node.openingElement.name.name;
43
+ if (contextLocalIdentifier.includes(name)) {
44
+ var componentLabelProps = node.openingElement.attributes.filter(function (attr) {
45
+ return isNodeOfType(attr, 'JSXAttribute') && isNodeOfType(attr.name, 'JSXIdentifier') && elementsAccessibleNameProps.includes(attr.name.name);
46
+ });
47
+ if (componentLabelProps.length === 1) {
48
+ var prop = componentLabelProps[0];
49
+ if ('value' in prop && prop.value) {
50
+ if (isNodeOfType(prop.value, 'Literal') && !prop.value.value || isNodeOfType(prop.value, 'JSXExpressionContainer') && !prop.value.expression) {
51
+ context.report({
52
+ node: prop,
53
+ messageId: prop.name.name === 'label' ? 'labelPropShouldHaveContents' : 'titleIdShouldHaveValue'
54
+ });
55
+ }
56
+ }
57
+ } else if (componentLabelProps.length > 1) {
58
+ context.report({
59
+ node: node.openingElement,
60
+ messageId: 'noBothPropsUsage'
61
+ });
62
+ } else {
63
+ context.report({
64
+ node: node.openingElement,
65
+ messageId: 'missingLabelProp'
66
+ });
67
+ }
68
+ }
69
+ }
70
+ };
71
+ }
72
+ });
73
+ export default rule;
package/dist/types/index.codegen.d.ts CHANGED
@@ -17,6 +17,7 @@ export declare const configs: {
17
17
  '@atlaskit/design-system/no-unsafe-design-token-usage': string;
18
18
  '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': string;
19
19
  '@atlaskit/design-system/prefer-primitives': string;
20
+ '@atlaskit/design-system/use-drawer-label': string;
20
21
  '@atlaskit/design-system/use-href-in-link-item': string;
21
22
  '@atlaskit/design-system/use-primitives': string;
22
23
  '@atlaskit/design-system/use-visually-hidden': string;
@@ -35,6 +36,7 @@ export declare const configs: {
35
36
  '@atlaskit/design-system/no-nested-styles': string;
36
37
  '@atlaskit/design-system/no-unsafe-design-token-usage': string;
37
38
  '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': string;
39
+ '@atlaskit/design-system/use-drawer-label': string;
38
40
  '@atlaskit/design-system/use-href-in-link-item': string;
39
41
  '@atlaskit/design-system/use-visually-hidden': string;
40
42
  };
package/dist/types/presets/all.codegen.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
- * @codegen <<SignedSource::ee066c02e7f136b81900b0a8b5d17474>>
3
+ * @codegen <<SignedSource::a4007a35edc1c661f543508c2b005014>>
4
4
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
5
5
  */
6
6
  declare const _default: {
@@ -20,6 +20,7 @@ declare const _default: {
20
20
  '@atlaskit/design-system/no-unsafe-design-token-usage': string;
21
21
  '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': string;
22
22
  '@atlaskit/design-system/prefer-primitives': string;
23
+ '@atlaskit/design-system/use-drawer-label': string;
23
24
  '@atlaskit/design-system/use-href-in-link-item': string;
24
25
  '@atlaskit/design-system/use-primitives': string;
25
26
  '@atlaskit/design-system/use-visually-hidden': string;
package/dist/types/presets/recommended.codegen.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
- * @codegen <<SignedSource::6fda4eb65fc8548707bea5505541300f>>
3
+ * @codegen <<SignedSource::240c678d4f10d97618541f35d79e1c71>>
4
4
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
5
5
  */
6
6
  declare const _default: {
@@ -16,6 +16,7 @@ declare const _default: {
16
16
  '@atlaskit/design-system/no-nested-styles': string;
17
17
  '@atlaskit/design-system/no-unsafe-design-token-usage': string;
18
18
  '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': string;
19
+ '@atlaskit/design-system/use-drawer-label': string;
19
20
  '@atlaskit/design-system/use-href-in-link-item': string;
20
21
  '@atlaskit/design-system/use-visually-hidden': string;
21
22
  };
package/dist/types/rules/index.codegen.d.ts CHANGED
@@ -17,6 +17,7 @@ declare const _default: {
17
17
  'no-unsafe-design-token-usage': import("eslint").Rule.RuleModule;
18
18
  'no-unsupported-drag-and-drop-libraries': import("eslint").Rule.RuleModule;
19
19
  'prefer-primitives': import("eslint").Rule.RuleModule;
20
+ 'use-drawer-label': import("eslint").Rule.RuleModule;
20
21
  'use-href-in-link-item': import("eslint").Rule.RuleModule;
21
22
  'use-primitives': import("eslint").Rule.RuleModule;
22
23
  'use-visually-hidden': import("eslint").Rule.RuleModule;
package/dist/types/rules/use-drawer-label/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import type { Rule } from 'eslint';
2
+ declare const rule: Rule.RuleModule;
3
+ export default rule;
package/dist/types-ts4.5/index.codegen.d.ts CHANGED
@@ -17,6 +17,7 @@ export declare const configs: {
17
17
  '@atlaskit/design-system/no-unsafe-design-token-usage': string;
18
18
  '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': string;
19
19
  '@atlaskit/design-system/prefer-primitives': string;
20
+ '@atlaskit/design-system/use-drawer-label': string;
20
21
  '@atlaskit/design-system/use-href-in-link-item': string;
21
22
  '@atlaskit/design-system/use-primitives': string;
22
23
  '@atlaskit/design-system/use-visually-hidden': string;
@@ -35,6 +36,7 @@ export declare const configs: {
35
36
  '@atlaskit/design-system/no-nested-styles': string;
36
37
  '@atlaskit/design-system/no-unsafe-design-token-usage': string;
37
38
  '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': string;
39
+ '@atlaskit/design-system/use-drawer-label': string;
38
40
  '@atlaskit/design-system/use-href-in-link-item': string;
39
41
  '@atlaskit/design-system/use-visually-hidden': string;
40
42
  };
package/dist/types-ts4.5/presets/all.codegen.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
- * @codegen <<SignedSource::ee066c02e7f136b81900b0a8b5d17474>>
3
+ * @codegen <<SignedSource::a4007a35edc1c661f543508c2b005014>>
4
4
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
5
5
  */
6
6
  declare const _default: {
@@ -20,6 +20,7 @@ declare const _default: {
20
20
  '@atlaskit/design-system/no-unsafe-design-token-usage': string;
21
21
  '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': string;
22
22
  '@atlaskit/design-system/prefer-primitives': string;
23
+ '@atlaskit/design-system/use-drawer-label': string;
23
24
  '@atlaskit/design-system/use-href-in-link-item': string;
24
25
  '@atlaskit/design-system/use-primitives': string;
25
26
  '@atlaskit/design-system/use-visually-hidden': string;
package/dist/types-ts4.5/presets/recommended.codegen.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
- * @codegen <<SignedSource::6fda4eb65fc8548707bea5505541300f>>
3
+ * @codegen <<SignedSource::240c678d4f10d97618541f35d79e1c71>>
4
4
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
5
5
  */
6
6
  declare const _default: {
@@ -16,6 +16,7 @@ declare const _default: {
16
16
  '@atlaskit/design-system/no-nested-styles': string;
17
17
  '@atlaskit/design-system/no-unsafe-design-token-usage': string;
18
18
  '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': string;
19
+ '@atlaskit/design-system/use-drawer-label': string;
19
20
  '@atlaskit/design-system/use-href-in-link-item': string;
20
21
  '@atlaskit/design-system/use-visually-hidden': string;
21
22
  };
package/dist/types-ts4.5/rules/index.codegen.d.ts CHANGED
@@ -21,6 +21,7 @@ declare const _default: {
21
21
  'no-unsafe-design-token-usage': import("eslint").Rule.RuleModule;
22
22
  'no-unsupported-drag-and-drop-libraries': import("eslint").Rule.RuleModule;
23
23
  'prefer-primitives': import("eslint").Rule.RuleModule;
24
+ 'use-drawer-label': import("eslint").Rule.RuleModule;
24
25
  'use-href-in-link-item': import("eslint").Rule.RuleModule;
25
26
  'use-primitives': import("eslint").Rule.RuleModule;
26
27
  'use-visually-hidden': import("eslint").Rule.RuleModule;
package/dist/types-ts4.5/rules/use-drawer-label/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import type { Rule } from 'eslint';
2
+ declare const rule: Rule.RuleModule;
3
+ export default rule;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@atlaskit/eslint-plugin-design-system",
3
3
  "description": "The essential plugin for use with the Atlassian Design System.",
4
- "version": "8.12.1",
4
+ "version": "8.13.0",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "publishConfig": {
7
7
  "registry": "https://registry.npmjs.org/"
@@ -52,6 +52,7 @@
52
52
  "@atlassian/eslint-utils": "^0.3.0",
53
53
  "@emotion/core": "^10.0.9",
54
54
  "@emotion/styled": "^11.0.0",
55
+ "@types/eslint": "^8.4.5",
55
56
  "eslint": "^7.7.0",
56
57
  "prettier": "^2.8.0",
57
58
  "react": "^16.8.0",
package/report.api.md CHANGED
@@ -38,6 +38,7 @@ export const configs: {
38
38
  '@atlaskit/design-system/no-unsafe-design-token-usage': string;
39
39
  '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': string;
40
40
  '@atlaskit/design-system/prefer-primitives': string;
41
+ '@atlaskit/design-system/use-drawer-label': string;
41
42
  '@atlaskit/design-system/use-href-in-link-item': string;
42
43
  '@atlaskit/design-system/use-primitives': string;
43
44
  '@atlaskit/design-system/use-visually-hidden': string;
@@ -56,6 +57,7 @@ export const configs: {
56
57
  '@atlaskit/design-system/no-nested-styles': string;
57
58
  '@atlaskit/design-system/no-unsafe-design-token-usage': string;
58
59
  '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': string;
60
+ '@atlaskit/design-system/use-drawer-label': string;
59
61
  '@atlaskit/design-system/use-href-in-link-item': string;
60
62
  '@atlaskit/design-system/use-visually-hidden': string;
61
63
  };
@@ -129,6 +131,7 @@ export const rules: {
129
131
  'no-unsafe-design-token-usage': Rule.RuleModule;
130
132
  'no-unsupported-drag-and-drop-libraries': Rule.RuleModule;
131
133
  'prefer-primitives': Rule.RuleModule;
134
+ 'use-drawer-label': Rule.RuleModule;
132
135
  'use-href-in-link-item': Rule.RuleModule;
133
136
  'use-primitives': Rule.RuleModule;
134
137
  'use-visually-hidden': Rule.RuleModule;
package/tmp/api-report-tmp.d.ts CHANGED
@@ -27,6 +27,7 @@ export const configs: {
27
27
  '@atlaskit/design-system/no-unsafe-design-token-usage': string;
28
28
  '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': string;
29
29
  '@atlaskit/design-system/prefer-primitives': string;
30
+ '@atlaskit/design-system/use-drawer-label': string;
30
31
  '@atlaskit/design-system/use-href-in-link-item': string;
31
32
  '@atlaskit/design-system/use-primitives': string;
32
33
  '@atlaskit/design-system/use-visually-hidden': string;
@@ -45,6 +46,7 @@ export const configs: {
45
46
  '@atlaskit/design-system/no-nested-styles': string;
46
47
  '@atlaskit/design-system/no-unsafe-design-token-usage': string;
47
48
  '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': string;
49
+ '@atlaskit/design-system/use-drawer-label': string;
48
50
  '@atlaskit/design-system/use-href-in-link-item': string;
49
51
  '@atlaskit/design-system/use-visually-hidden': string;
50
52
  };
@@ -103,6 +105,7 @@ export const rules: {
103
105
  'no-unsafe-design-token-usage': Rule.RuleModule;
104
106
  'no-unsupported-drag-and-drop-libraries': Rule.RuleModule;
105
107
  'prefer-primitives': Rule.RuleModule;
108
+ 'use-drawer-label': Rule.RuleModule;
106
109
  'use-href-in-link-item': Rule.RuleModule;
107
110
  'use-primitives': Rule.RuleModule;
108
111
  'use-visually-hidden': Rule.RuleModule;