eslint-plugin-primer-react 5.1.0 → 5.2.0-rc.dc08e82

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-primer-react",
-  "version": "5.1.0",
+  "version": "5.2.0-rc.dc08e82",
   "description": "ESLint rules for Primer React",
   "main": "src/index.js",
   "scripts": {
@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "@styled-system/props": "^5.1.5",
-    "eslint-plugin-github": "^4.10.1",
+    "eslint-plugin-github": "^5.0.1",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-traverse": "^1.0.0",
     "lodash": "^4.17.21",

package/src/index.js

@@ -7,6 +7,7 @@ module.exports = {
     'new-color-css-vars': require('./rules/new-color-css-vars'),
     'a11y-explicit-heading': require('./rules/a11y-explicit-heading'),
     'no-deprecated-props': require('./rules/no-deprecated-props'),
+    'a11y-link-in-text-block': require('./rules/a11y-link-in-text-block'),
   },
   configs: {
     recommended: require('./configs/recommended'),

package/src/rules/__tests__/a11y-link-in-text-block.test.js

@@ -0,0 +1,161 @@
+const rule = require('../a11y-link-in-text-block')
+const {RuleTester} = require('eslint')
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+})
+
+ruleTester.run('a11y-link-in-text-block', rule, {
+  valid: [
+    `import {Link} from '@primer/react';
+    <Box>
+  
+    <Link href="something">
+      Blah blah
+    </Link>{' '}
+    . 
+    </Box>
+  `,
+    `import {Text, Link} from '@primer/react';
+  <Something>
+    <Link href='blah'>
+      blah
+    </Link>
+  </Something>
+  `,
+    `import {Link} from '@primer/react';
+    <p>bla blah <Link inline={true}>Link level 1</Link></p>;
+  `,
+    `import {Link} from '@primer/react';
+    <p>bla blah<Link inline>Link level 1</Link></p>;
+  `,
+    `import {Link} from '@primer/react';
+    <><span>something</span><Link inline={true}>Link level 1</Link></>;
+  `,
+    `import {Link} from '@primer/react';
+   <Link>Link level 1</Link>;
+`,
+    `import {Heading, Link} from '@primer/react';
+      <Heading>
+        <Link>Link level 1</Link>
+        hello
+      </Heading>
+`,
+    `import {Heading, Link} from '@primer/react';
+    <Heading as="h2">
+      <Link href={somePath}>
+        Breadcrumb
+      </Link>
+      Create a thing
+    </Heading>
+`,
+    `import {Link} from '@primer/react';
+    <div>
+    <h2>
+    <Link href={somePath}>
+      Breadcrumb
+    </Link>
+    </h2>
+    Create a thing
+    </div>
+`,
+    `import {Link} from '@primer/react';
+    <div>
+    <Link href={somePath}>
+      <GitHubAvatar />{owner}
+    </Link>{' '}
+    last edited{' '}
+    </div>
+`,
+    `import {Link} from '@primer/react';
+    <span>
+    by
+    <Link href="something" sx={{p: 2, fontWeight: 'bold'}}>
+      Blah blah
+    </Link>
+    </span>
+`,
+    `import {Link} from '@primer/react';
+    <span>
+    by
+    <Link href="something" sx={{fontWeight: 'bold'}}>
+      Blah blah
+    </Link>
+    </span>
+`,
+    `import {Link} from '@primer/react';
+  <span>
+  by
+  <Link href="something" sx={{fontFamily: 'mono'}}>
+    Blah blah
+  </Link>
+  </span>
+  `,
+    `import {Link} from '@primer/react';
+    <Box>
+
+    <Link href="something">
+      Blah blah
+    </Link>{' '}
+    .
+    </Box>
+`,
+    `import {Link} from '@primer/react';
+<Heading sx={{fontSize: 1, mb: 3}} as="h3">
+          In addition,{' '}
+          <Link href="https://github.com/pricing" target="_blank">
+            GitHub Team
+          </Link>{' '}
+          includes:
+        </Heading>
+`,
+  ],
+  invalid: [
+    {
+      code: `import {Link} from '@primer/react';
+      <p>bla blah<Link>Link level 1</Link></p>
+    `,
+      errors: [{messageId: 'linkInTextBlock'}],
+    },
+    {
+      code: `import {Link} from '@primer/react';
+      <p><Link>Link level 1</Link> something something</p>
+    `,
+      errors: [{messageId: 'linkInTextBlock'}],
+    },
+    {
+      code: `import {Link} from '@primer/react';
+      <p>bla blah<Link inline={false}>Link level 1</Link></p>
+    `,
+      errors: [{messageId: 'linkInTextBlock'}],
+    },
+    {
+      code: `import {Link} from '@primer/react';
+      <Box>Something something{' '}
+        <Link>Link level 1</Link>
+      </Box>
+    `,
+      errors: [{messageId: 'linkInTextBlock'}],
+    },
+    {
+      code: `import {Link} from '@primer/react';
+      <>blah blah blah{' '}
+      <Link>Link level 1</Link></>;
+    `,
+      errors: [{messageId: 'linkInTextBlock'}],
+    },
+    {
+      code: `import {Link} from '@primer/react';
+      <>blah blah blah{' '}
+      <Link underline>Link level 1</Link></>;
+    `,
+      errors: [{messageId: 'linkInTextBlock'}],
+    },
+  ],
+})

package/src/rules/a11y-explicit-heading.js

@@ -46,12 +46,13 @@ module.exports = {
     },
   },
   create(context) {
+    const sourceCode = context.sourceCode ?? context.getSourceCode()
     return {
       JSXOpeningElement(jsxNode) {
         const skipImportCheck = context.options[0] ? context.options[0].skipImportCheck : false
 
         if (
-          (skipImportCheck || isPrimerComponent(jsxNode.name, context.getScope(jsxNode))) &&
+          (skipImportCheck || isPrimerComponent(jsxNode.name, sourceCode.getScope(jsxNode))) &&
           isHeadingComponent(jsxNode)
         ) {
           const error = isInvalid(jsxNode)

package/src/rules/a11y-link-in-text-block.js

@@ -0,0 +1,104 @@
+const {isPrimerComponent} = require('../utils/is-primer-component')
+const {getJSXOpeningElementName} = require('../utils/get-jsx-opening-element-name')
+const {getJSXOpeningElementAttribute} = require('../utils/get-jsx-opening-element-attribute')
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    schema: [
+      {
+        properties: {
+          skipImportCheck: {
+            type: 'boolean',
+          },
+        },
+      },
+    ],
+    messages: {
+      linkInTextBlock: '<Link>s that are used within a text block should have the inline prop.',
+    },
+  },
+  create(context) {
+    const sourceCode = context.sourceCode ?? context.getSourceCode()
+    return {
+      JSXElement(node) {
+        const name = getJSXOpeningElementName(node.openingElement)
+        if (
+          isPrimerComponent(node.openingElement.name, sourceCode.getScope(node)) &&
+          name === 'Link' &&
+          node.parent.children
+        ) {
+          let siblings = node.parent.children
+          const parentName = node.parent.openingElement?.name?.name
+          // Skip if Link is nested inside of a heading.
+          const parentsToSkip = ['Heading', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6']
+          if (parentsToSkip.includes(parentName)) return
+          if (siblings.length > 0) {
+            siblings = siblings.filter(childNode => {
+              return (
+                !(childNode.type === 'JSXText' && /^\s+$/.test(childNode.value)) &&
+                !(
+                  childNode.type === 'JSXExpressionContainer' &&
+                  childNode.expression.type === 'Literal' &&
+                  /^\s+$/.test(childNode.expression.value)
+                ) &&
+                !(childNode.type === 'Literal' && /^\s+$/.test(childNode.value))
+              )
+            })
+            const index = siblings.findIndex(childNode => {
+              return childNode.range === node.range
+            })
+            const prevSibling = siblings[index - 1]
+            const nextSibling = siblings[index + 1]
+
+            const prevSiblingIsText = prevSibling && prevSibling.type === 'JSXText'
+            const nextSiblingIsText = nextSibling && nextSibling.type === 'JSXText'
+            if (prevSiblingIsText || nextSiblingIsText) {
+              // Skip if the only text adjacent to the link is a period, then skip it.
+              if (!prevSiblingIsText && /^\s*\.+\s*$/.test(nextSibling.value)) {
+                return
+              }
+              const sxAttribute = getJSXOpeningElementAttribute(node.openingElement, 'sx')
+              const inlineAttribute = getJSXOpeningElementAttribute(node.openingElement, 'inline')
+
+              // Skip if Link child is a JSX element.
+              const jsxElementChildren = node.children.filter(child => {
+                return child.type === 'JSXElement'
+              })
+              if (jsxElementChildren.length > 0) return
+
+              // Skip if fontWeight or fontFamily is set via the sx prop since these may technically be considered sufficiently distinguishing styles that don't use color.
+              if (
+                sxAttribute &&
+                sxAttribute?.value?.expression &&
+                sxAttribute.value.expression.type === 'ObjectExpression' &&
+                sxAttribute.value.expression.properties &&
+                sxAttribute.value.expression.properties.length > 0
+              ) {
+                const fontStyleProperty = sxAttribute.value.expression.properties.filter(property => {
+                  return property.key.name === 'fontWeight' || property.key.name === 'fontFamily'
+                })
+                if (fontStyleProperty.length > 0) return
+              }
+              if (inlineAttribute) {
+                if (!inlineAttribute.value) {
+                  return
+                } else if (inlineAttribute.value.type === 'JSXExpressionContainer') {
+                  if (inlineAttribute.value.expression.type === 'Literal') {
+                    if (inlineAttribute.value.expression.value === true) {
+                      return
+                    }
+                  }
+                }
+              }
+              context.report({
+                node,
+                messageId: 'linkInTextBlock',
+              })
+            }
+          }
+        }
+      },
+    }
+  },
+}

package/src/rules/a11y-tooltip-interactive-trigger.js

@@ -152,13 +152,14 @@ module.exports = {
     },
   },
   create(context) {
+    const sourceCode = context.sourceCode ?? context.getSourceCode()
     return {
       JSXElement(jsxNode) {
         // If `skipImportCheck` is true, this rule will check for non-interactive element in any components (not just ones that are imported from `@primer/react`).
         const skipImportCheck = context.options[0] ? context.options[0].skipImportCheck : false
         const name = getJSXOpeningElementName(jsxNode.openingElement)
         if (
-          (skipImportCheck || isPrimerComponent(jsxNode.openingElement.name, context.getScope(jsxNode))) &&
+          (skipImportCheck || isPrimerComponent(jsxNode.openingElement.name, sourceCode.getScope(jsxNode))) &&
           name === 'Tooltip' &&
           jsxNode.children
         ) {

package/src/rules/direct-slot-children.js

@@ -45,6 +45,7 @@ module.exports = {
   },
   create(context) {
     const stack = []
+    const sourceCode = context.sourceCode ?? context.getSourceCode()
     return {
       JSXOpeningElement(jsxNode) {
         const name = getJSXOpeningElementName(jsxNode)
@@ -56,7 +57,7 @@ module.exports = {
         // If component is a Primer component and a slot child,
         // check if it's a direct child of the slot parent
         if (
-          (skipImportCheck || isPrimerComponent(jsxNode.name, context.getScope(jsxNode))) &&
+          (skipImportCheck || isPrimerComponent(jsxNode.name, sourceCode.getScope(jsxNode))) &&
           slotChildToParentMap[name]
         ) {
           const expectedParentNames = slotChildToParentMap[name]

package/src/rules/no-system-props.js

@@ -78,6 +78,8 @@ module.exports = {
       ...(includeUtilityComponents ? [] : utilityComponents),
     ])
 
+    const sourceCode = context.sourceCode ?? context.getSourceCode()
+
     return {
       JSXOpeningElement(jsxNode) {
         if (skipImportCheck) {
@@ -86,7 +88,7 @@ module.exports = {
           if (isHTMLElement(jsxNode)) return
         } else {
           // skip if component is not imported from primer/react
-          if (!isPrimerComponent(jsxNode.name, context.getScope(jsxNode))) return
+          if (!isPrimerComponent(jsxNode.name, sourceCode.getScope(jsxNode))) return
         }
 
         const componentName = getJSXOpeningElementName(jsxNode)