eslint-plugin-smarthr 2.0.0 → 2.2.0

package/rules/design-system-guideline-prohibit-double-icons/index.js

@@ -1,7 +1,5 @@
 const SCHEMA = []
 
-const REGEX_PATTERN = /(Button|Link)$/
-
 /**
  * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
  */
@@ -12,35 +10,12 @@ module.exports = {
   },
   create(context) {
     return {
-      JSXOpeningElement: (node) => {
-        const nodeName = node.name.name
-
-        if (REGEX_PATTERN.test(nodeName)) {
-          let prefix = null
-          let suffix = null
-
-          for (const attr of node.attributes) {
-            switch (attr.name.name) {
-              case 'prefix':
-                prefix = attr
-                break
-              case 'suffix':
-                suffix = attr
-                break
-            }
-
-            if(prefix && suffix) {
-              context.report({
-                node,
-                message: `${nodeName} には prefix と suffix は同時に設定できません。
- - prefix または suffix のみを設定してください。
- - どちらにもアイコンをつけられそうな場合は、アイコン付き（右）（サフィックス）を優先し、アイコン付き（左）（プレフィックス）には指定しないでください。
- - 両方設定したい場合は、'eslint-disable-next-line' 等を利用して、このルールを無効化してください。`,
-              })
-              break
-            }
-          }
-        }
+      'JSXOpeningElement[name.name=/(Button|Link)$/]:has(JSXAttribute[name.name="prefix"]):has(JSXAttribute[name.name="suffix"])': (node) => {
+        context.report({
+          node,
+          message: `${node.name.name} には prefix と suffix は同時に設定できません。
+ - どちらにもアイコンをつけられそうな場合は、prefixを優先してください。`,
+        })
       }
     }
   },

package/rules/prohibit-export-array-type/index.js

@@ -7,18 +7,15 @@ module.exports = {
     schema: [],
   },
   create(context) {
-    const checker = (node) => {
-      if (node.declaration?.typeAnnotation?.type === 'TSArrayType') {
+    return {
+      ':matches(TSTypeReference,ExportNamedDeclaration):matches([declaration.typeAnnotation.type="TSArrayType"],[declaration.typeAnnotation.typeName.name="Array"])': (node) => {
         context.report({
           node,
-          message: '利用する際、配列かどうかわかりにくいため、配列ではない状態でexportしてください',
+          message: `型をexportする際、配列ではなくアイテムの型をexportしてください。
+ - 型を配列でexportすると、その型が配列かどうかを判定するための情報は名称のみになります
+ - 名称から配列かどうかを判定しにくい場合があるため、利用するファイル内で配列として型を設定してください`,
         })
-      }
-    }
-
-    return {
-      ExportDefaultDeclaration: checker,
-      ExportNamedDeclaration: checker,
+      },
     }
   },
 }

package/rules/require-i18n-text/README.md

@@ -0,0 +1,123 @@
+# smarthr/require-i18n-text
+
+- JSX/TSXファイル内で文字列リテラルが直接指定されていないかをチェックするルールです
+- 多言語化対応での翻訳対応漏れを防ぐために使用します
+- HTML要素の属性、カスタムコンポーネントの属性、子要素の文字列リテラルを検査対象とします
+- 数値リテラル、真偽値、空文字列は検査対象外です
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/require-i18n-text': [
+      'error', // 'warn', 'off'
+      {
+        elements: {
+          // HTML要素
+          'img': ['alt', 'title'],
+          'input': ['placeholder', 'title'],
+          'button': ['title', 'aria-label'],
+
+          // カスタムコンポーネント
+          'Button': ['label', 'errorMessage'],
+          'Input': ['placeholder', 'helperText'],
+          'Dialog': ['title', 'description'],
+
+          // すべての要素に適用
+          '*': ['data-tooltip']
+        }
+      }
+    ]
+  },
+}
+```
+
+## options
+
+### elements
+
+HTML要素とカスタムコンポーネントごとに検査対象とする属性名を指定します。
+オブジェクトのキーに要素名/コンポーネント名、値に属性名の配列を指定します。
+
+デフォルト: `{ '*': ['alt', 'aria-label', 'term', 'title'] }`
+
+オプションを指定しない場合、デフォルトでi18n候補属性がすべての要素で検査されます。
+
+#### ワイルドカード `'*'` の使用
+
+`'*'` をキーとして使用すると、すべての要素（HTML要素とカスタムコンポーネント両方）に対して属性をチェックできます。
+個別の要素設定がある場合は、そちらが優先されます。
+
+```js
+{
+  elements: {
+    // すべての要素で title をチェック
+    '*': ['title'],
+    // img要素は alt も追加でチェック
+    'img': ['alt', 'title'],
+    // Icon は除外（空配列で上書き）
+    'Icon': []
+  }
+}
+```
+
+#### デフォルト設定の上書き
+
+ワイルドカード `'*'` を明示的に設定すると、デフォルト設定を上書きできます。
+
+```js
+{
+  elements: {
+    // デフォルトを上書き
+    '*': ['data-tooltip'],
+    // 個別設定も可能
+    'Button': ['label']
+  }
+}
+```
+
+## ❌ Incorrect
+
+```jsx
+// HTML要素の属性に文字列リテラルを直接指定
+<img alt="Profile picture" />
+<input placeholder="Enter your name" />
+<button title="Close dialog" />
+
+// カスタムコンポーネントの属性に文字列リテラルを直接指定
+<Button label="Submit" />
+<Input helperText="Required field" />
+
+// 子要素に文字列リテラルを直接指定
+<div>Hello World</div>
+<Button>Submit</Button>
+<p>Welcome to our application</p>
+```
+
+## ✅ Correct
+
+```jsx
+// 翻訳関数を使用
+<img alt={t('profile_picture')} />
+<input placeholder={t('enter_your_name')} />
+<button title={t('close_dialog')} />
+
+// カスタムコンポーネントでも翻訳関数を使用
+<Button label={t('submit')} />
+<Input helperText={t('required_field')} />
+
+// 子要素でも翻訳関数を使用
+<div>{t('hello_world')}</div>
+<Button>{t('submit')}</Button>
+<p>{t('welcome_message')}</p>
+
+// 数値リテラル、真偽値、空文字列は検査対象外
+<div>{123}</div>
+<Button disabled={true} />
+<input value="" />
+
+// 検査対象外の属性（設定していない属性）
+<input name="username" />
+<div id="main-content" />
+```

package/rules/require-i18n-text/index.js

@@ -0,0 +1,94 @@
+// デフォルトのワイルドカード設定
+const DEFAULT_WILDCARD_ATTRIBUTES = [
+  'alt',
+  'aria-label',
+  // smarthr-ui DefinitionListItem
+  'term',
+  'title',
+]
+
+const SCHEMA = [
+  {
+    type: 'object',
+    properties: {
+      elements: {
+        type: 'object',
+        patternProperties: {
+          '.+': {
+            type: 'array',
+            items: {
+              type: 'string',
+            },
+          },
+        },
+        default: {},
+      },
+    },
+    additionalProperties: false,
+  },
+]
+
+// 文字列リテラルを持つ属性を選択するセレクタの条件部分
+const STRING_LITERAL_CONDITION =
+  ':matches([value.type="Literal"][value.value=/\\S/], [value.type="JSXExpressionContainer"][value.expression.type="Literal"][value.expression.value=/\\S/])'
+
+const generateAttributeSelector = (attributes) =>
+  `JSXAttribute[name.name=/^(${attributes.join('|')})$/]${STRING_LITERAL_CONDITION}`
+
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    schema: SCHEMA,
+  },
+  create(context) {
+    const options = context.options[0] || {}
+    const elementsObj = options.elements || {}
+
+    // ユーザーが'*'を設定していない場合のみデフォルトを適用
+    const wildcardAttributes = elementsObj['*'] || DEFAULT_WILDCARD_ATTRIBUTES
+    const specificElements = Object.keys(elementsObj).filter((k) => k !== '*')
+    const handlers = {}
+
+    const reportAttributeError = (node) => {
+      context.report({
+        node,
+        message: `${node.parent.name.name}の${node.name.name}属性に文字列リテラルが指定されています。多言語化対応のため、翻訳関数を使用してください`,
+      })
+    }
+
+    // 個別要素の設定
+    for (const elementName of specificElements) {
+      const attributes = elementsObj[elementName]
+      if (attributes.length === 0) continue
+
+      handlers[`JSXOpeningElement[name.name="${elementName}"] > ${generateAttributeSelector(attributes)}`] = reportAttributeError
+    }
+
+    // ワイルドカード設定
+    if (wildcardAttributes && wildcardAttributes.length > 0) {
+      const attributeSelector = generateAttributeSelector(wildcardAttributes)
+      if (specificElements.length > 0) {
+        // 個別設定要素を除外
+        handlers[`JSXOpeningElement:not([name.name=/^(${specificElements.join('|')})$/]) > ${attributeSelector}`] =
+          reportAttributeError
+      } else {
+        handlers[attributeSelector] = reportAttributeError
+      }
+    }
+
+    // 子要素の文字列リテラルチェック（空白のみのテキストは除外）
+    handlers['JSXText[value=/\\S/]'] = (node) => {
+      context.report({
+        node,
+        message: '子要素に文字列リテラルが指定されています。多言語化対応のため、翻訳関数を使用してください',
+      })
+    }
+
+    return handlers
+  },
+}
+
+module.exports.schema = SCHEMA

package/rules/trim-props/index.js

@@ -1,5 +1,4 @@
 const SCHEMA = []
-const EXTRA_SPACE_REGES = /(^\s+|\s+$)/
 
 /**
  * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
@@ -12,22 +11,20 @@ module.exports = {
   },
   create(context) {
     return {
-      JSXOpeningElement: (node) =>
-        node.attributes.forEach((current) => {
-          const attribute = current.value?.type === 'JSXExpressionContainer' ? current.value.expression : current.value
-          const props = attribute?.value
-
-          if (typeof props === 'string' && EXTRA_SPACE_REGES.test(props)) {
-            return context.report({
-              node,
-              loc: current.loc,
-              message: '属性に設定している文字列から先頭、末尾の空白文字を削除してください',
-              fix(fixer) {
-                return fixer.replaceTextRange([attribute.range[0] + 1, attribute.range[1] - 1], props.trim())
-              },
-            })
-          }
+      'JSXAttribute Literal[value=/(^ | $)/]': (node) => {
+        return context.report({
+          node,
+          message: '属性に設定している文字列から先頭、末尾の空白文字を削除してください',
+          fix: (fixer) => fixer.replaceText(node, context.sourceCode.getText(node).replace(/^('|")\s+/, '$1').replace(/\s+('|")$/, '$1')),
+        })
+      },
+      'JSXAttribute TemplateLiteral:has(TemplateElement:matches(:first-child[value.raw=/^ /],:last-child[value.raw=/ $/]))': (node) => {
+        return context.report({
+          node,
+          message: '属性に設定している文字列から先頭、末尾の空白文字を削除してください',
+          fix: (fixer) => fixer.replaceText(node, context.sourceCode.getText(node).replace(/(^`\s+|\s+`$)/g, '`')),
         })
+      },
     }
   },
 }

package/test/a11y-help-link-with-support-href.js

@@ -19,7 +19,8 @@ ruleTester.run('a11y-help-link-with-support-href', rule, {
     { code: `<HelpLink href="//support.hoge" />` },
     { code: `<HelpLink href={"//support.hoge"} />` },
     { code: `<HelpLink href={path.support.hoge} />` },
-    { code: `<HelpLink href={supportUrl} />` },
+    { code: `<HelpLink href={supportURL} />` },
+    { code: `<HelpLink href={supportHref} />` },
   ],
   invalid: [
     { code: `<Anchor href="//support.hoge">any</Anchor>`, errors: [{ message: errorText }] },

package/test/a11y-prohibit-useless-sectioning-fragment.js

@@ -10,7 +10,7 @@ const ruleTester = new RuleTester({
     },
   },
 })
-const error = (tag) => `無意味なSectioningFragmentが記述されています。子要素である${tag}で問題なくセクションは設定されているため、このSectioningFragmentは削除してください`
+const ERROR = `無意味なSectioningFragmentが記述されています。子要素で問題なくセクションは設定されているため、このSectioningFragmentは削除してください`
 
 ruleTester.run('a11y-prohibit-useless-sectioning-fragment', rule, {
   valid: [
@@ -21,11 +21,11 @@ ruleTester.run('a11y-prohibit-useless-sectioning-fragment', rule, {
     { code: `<AnyArticle>hoge</AnyArticle>` },
   ],
   invalid: [
-    { code: `<SectioningFragment><AnySection /></SectioningFragment>`, errors: [ { message: error('<AnySection>') } ] },
-    { code: `<SectioningFragment><AnyAside>hoge</AnyAside></SectioningFragment>`, errors: [ { message: error('<AnyAside>') } ] },
-    { code: `<SectioningFragment><HogeStack as="aside">hoge</HogeStack></SectioningFragment>`, errors: [ { message: error('<HogeStack as="aside">') } ] },
-    { code: `<SectioningFragment><HogeReel forwardedAs="nav">hoge</HogeReel></SectioningFragment>`, errors: [ { message: error('<HogeReel forwardedAs="nav">') } ] },
-    { code: `<SectioningFragment><FugaBase as="article">hoge</FugaBase></SectioningFragment>`, errors: [ { message: error('<FugaBase as="article">') } ] },
-    { code: `<SectioningFragment><FugaBaseColumn as="article">hoge</FugaBaseColumn></SectioningFragment>`, errors: [ { message: error('<FugaBaseColumn as="article">') } ] },
+    { code: `<SectioningFragment><AnySection /></SectioningFragment>`, errors: [ { message: ERROR } ] },
+    { code: `<SectioningFragment><AnyAside>hoge</AnyAside></SectioningFragment>`, errors: [ { message: ERROR } ] },
+    { code: `<SectioningFragment><HogeStack as="aside">hoge</HogeStack></SectioningFragment>`, errors: [ { message: ERROR } ] },
+    { code: `<SectioningFragment><HogeReel forwardedAs="nav">hoge</HogeReel></SectioningFragment>`, errors: [ { message: ERROR } ] },
+    { code: `<SectioningFragment><FugaBase as="article">hoge</FugaBase></SectioningFragment>`, errors: [ { message: ERROR } ] },
+    { code: `<SectioningFragment><FugaBaseColumn as="article">hoge</FugaBaseColumn></SectioningFragment>`, errors: [ { message: ERROR } ] },
   ]
 })

package/test/a11y-trigger-has-button.js

@@ -13,15 +13,16 @@ const ruleTester = new RuleTester({
 ruleTester.run('a11y-trigger-has-button', rule, {
   valid: [
     { code: '<DropdownTrigger><button>hoge</button></DropdownTrigger>' },
-    { code: '<DialogTrigger><button>{hoge}</button></DialogTrigger>' },
+    { code: '<DialogTrigger><AnyButton>{hoge}</AnyButton></DialogTrigger>' },
     { code: '<DropdownTrigger>{hoge}</DropdownTrigger>' },
+    { code: '<AnyDropdownTrigger/>' },
   ],
   invalid: [
-    { code: '<DropdownTrigger>ほげ</DropdownTrigger>', errors: [ { message: 'DropdownTrigger の直下にはbuttonコンポーネントのみ設置してください' } ] },
-    { code: '<DialogTrigger><span><Button>ほげ</Button></span></DialogTrigger>', errors: [ { message: 'DialogTrigger の直下にはbuttonコンポーネントのみ設置してください' } ] },
-    { code: '<DropdownTrigger><AnchorButton>ほげ</AnchorButton></DropdownTrigger>', errors: [ { message: 'DropdownTrigger の直下にはbuttonコンポーネントのみ設置してください' } ] },
-    { code: '<DropdownTrigger><ButtonAnchor>ほげ</ButtonAnchor></DropdownTrigger>', errors: [ { message: 'DropdownTrigger の直下にはbuttonコンポーネントのみ設置してください' } ] },
-    { code: '<DialogTrigger><button>{hoge}</button>{hoge}</DialogTrigger>', errors: [ { message: 'DialogTrigger の直下には複数のコンポーネントを設置することは出来ません。buttonコンポーネントが一つだけ設置されている状態にしてください' } ] },
-    { code: '<DropdownTrigger>{hoge}<span>text</span></DropdownTrigger>', errors: [ { message: 'DropdownTrigger の直下には複数のコンポーネントを設置することは出来ません。buttonコンポーネントが一つだけ設置されている状態にしてください' } ] },
+    { code: '<DropdownTrigger>ほげ</DropdownTrigger>', errors: [ { message: 'DropdownTrigger の直下にはbutton要素のみ設置してください(AnchorButtonはa要素のため設置できません)' } ] },
+    { code: '<DialogTrigger><span><Button>ほげ</Button></span></DialogTrigger>', errors: [ { message: 'DialogTrigger の直下にはbutton要素のみ設置してください(AnchorButtonはa要素のため設置できません)' } ] },
+    { code: '<DropdownTrigger><AnchorButton>ほげ</AnchorButton></DropdownTrigger>', errors: [ { message: 'DropdownTrigger の直下にはbutton要素のみ設置してください(AnchorButtonはa要素のため設置できません)' } ] },
+    { code: '<DropdownTrigger><ButtonAnchor>ほげ</ButtonAnchor></DropdownTrigger>', errors: [ { message: 'DropdownTrigger の直下にはbutton要素のみ設置してください(AnchorButtonはa要素のため設置できません)' } ] },
+    { code: '<DialogTrigger><button>{hoge}</button>{hoge}</DialogTrigger>', errors: [ { message: 'DialogTrigger の直下には複数のコンポーネントを設置することは出来ません。button要素が一つだけ設置されている状態にしてください' } ] },
+    { code: '<DropdownTrigger>{hoge}<span>text</span></DropdownTrigger>', errors: [ { message: 'DropdownTrigger の直下には複数のコンポーネントを設置することは出来ません。button要素が一つだけ設置されている状態にしてください' } ] },
   ]
 })

package/test/best-practice-for-button-element.js

@@ -19,8 +19,6 @@ const ERRORMESSAGE_PROHIBIT_STYLED = `"styled.button" の直接利用をやめ
 
 ruleTester.run('best-practice-for-button-element', rule, {
   valid: [
-    { code: `import styled from 'styled-components'` },
-    { code: `import styled, { css } from 'styled-components'` },
     { code: `<Button />` },
     { code: `<Button>ほげ</Button>` },
     { code: `<AnyButton>ほげ</AnyButton>` },
@@ -29,7 +27,6 @@ ruleTester.run('best-practice-for-button-element', rule, {
     { code: 'const HogeButton = styled(HogeButton)``' },
   ],
   invalid: [
-    { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
     { code: `<button>ほげ</button>`, errors: [ { message: ERRORMESSAGE_REQUIRED_TYPE_ATTR } ] },
     { code: 'const HogeButton = styled.button``', errors: [ { message: ERRORMESSAGE_PROHIBIT_STYLED } ] },
   ]

package/test/best-practice-for-data-test-attribute.js

@@ -10,12 +10,13 @@ const ruleTester = new RuleTester({
     },
   },
 })
-const generateErrorMessage = (attr) => `テストのために要素を指定するために、${attr} 属性を利用するのではなく、他の方法で要素を指定することを検討してください。
- - 方法1: click_link, click_button等を利用したりすることで、利用しているテスト環境に準じた方法で要素を指定することを検討してください。
+const ERROR_MESSAGE = `テストしたい要素を指定するためにテスト用の属性は利用せず、他の方法を検討してください
+ - 方法1: click_link, click_button等を利用することで、テスト環境に準じた方法で要素を指定することを検討してください
    - 参考(Testing Library): https://testing-library.com/docs/queries/about
    - 参考(Capybara): https://rubydoc.info/github/jnicklas/capybara/Capybara/Node/Finders
- - 方法2: テスト環境のメソッド等で要素が指定できない場合はrole属性、name属性、id属性等を利用した方法で要素を指定することを検討してください。
- - 方法3: 上記の方法でも要素が指定できない場合は、'eslint-disable-next-line' 等を利用して、このルールを無効化してください。`
+ - 方法2: テスト環境のメソッド等で要素が指定できない場合はrole、name、aria系などユーザーが認識できる属性を利用した方法で要素を指定することを検討してください
+   - 画像の場合、alt属性が利用できます
+   - id, class属性は基本的にユーザーが認識出来ないため利用しないでください`
 
 
 ruleTester.run('best-practice-for-data-test-attribute', rule, {
@@ -25,9 +26,9 @@ ruleTester.run('best-practice-for-data-test-attribute', rule, {
     { code: '<Any data-any="fuga">ほげ</Any>'},
   ],
   invalid: [
-    { code: '<Any data-spec="hijklmn">ほげ</Any>', errors: [{message: generateErrorMessage("data-spec")}] },
-    { code: '<Any data-spec>ほげ</Any>', errors: [{message: generateErrorMessage("data-spec")}] },
-    { code: '<Any data-testid="abcdefg">ほげ</Any>', errors: [{message: generateErrorMessage("data-testid")}] },
-    { code: '<Any data-testid>ほげ</Any>', errors: [{message: generateErrorMessage("data-testid")}] },
+    { code: '<Any data-spec="hijklmn">ほげ</Any>', errors: [{message: ERROR_MESSAGE}] },
+    { code: '<Any data-spec>ほげ</Any>', errors: [{message: ERROR_MESSAGE}] },
+    { code: '<Any data-testid="abcdefg">ほげ</Any>', errors: [{message: ERROR_MESSAGE}] },
+    { code: '<Any data-testid>ほげ</Any>', errors: [{message: ERROR_MESSAGE}] },
   ]
 })

package/test/best-practice-for-remote-trigger-dialog.js

@@ -19,16 +19,10 @@ ruleTester.run('best-practice-for-remote-trigger-dialog', rule, {
   ],
   invalid: [
     { code: '<RemoteDialogTrigger targetId={hoge}>open.</RemoteDialogTrigger>', errors: [ { message: `RemoteDialogTriggerのtargetId属性には直接文字列を指定してください。
-  - 変数などは利用できません（これは関連するTriggerとDialogを検索しやすくするためです）
-  - RemoteTriggerActionDialogはループやDropdown内にTriggerが存在する場合に利用してください
-  - ループやDropdown以外にTriggerが設定されている場合、TriggerAndActionDialogを利用してください` } ] },
+  - 変数などは利用できません（これは関連するTriggerとDialogを検索しやすくするためです）` } ] },
     { code: '<StyledRemoteDialogTrigger targetId={"fuga"}>open.</StyledRemoteDialogTrigger>', errors: [ { message: `StyledRemoteDialogTriggerのtargetId属性には直接文字列を指定してください。
-  - 変数などは利用できません（これは関連するTriggerとDialogを検索しやすくするためです）
-  - RemoteTriggerActionDialogはループやDropdown内にTriggerが存在する場合に利用してください
-  - ループやDropdown以外にTriggerが設定されている場合、TriggerAndActionDialogを利用してください` } ] },
+  - 変数などは利用できません（これは関連するTriggerとDialogを検索しやすくするためです）` } ] },
     { code: '<StyldRemoteTriggerActionDialog {...args} id={"fuga"}>content.</StyldRemoteTriggerActionDialog>', errors: [ { message: `StyldRemoteTriggerActionDialogのid属性には直接文字列を指定してください。
-  - 変数などは利用できません（これは関連するTriggerとDialogを検索しやすくするためです）
-  - RemoteTriggerActionDialogはループやDropdown内にTriggerが存在する場合に利用してください
-  - ループやDropdown以外にTriggerが設定されている場合、TriggerAndActionDialogを利用してください` } ] },
+  - 変数などは利用できません（これは関連するTriggerとDialogを検索しやすくするためです）` } ] },
   ]
 })

package/test/best-practice-for-tailwind-prohibit-root-margin.js

@@ -25,15 +25,24 @@ ruleTester.run('best-practice-for-tailwind-prohibit-root-margin', rule, {
       `,
     },
     // コンポーネントのルート以外の要素での余白使用
+    {
+      code: `
+        const Card = () => (
+          <div className="shr-bg-white">
+            <h2 className="shr-mt-4">Title</h2>
+            <p className="shr-mb-2 shr-pt-2">Content</p>
+          </div>
+        )
+      `,
+    },
+    // returnしない場合
     {
       code: `
         const Card = () => {
-          return (
-            <div className="shr-bg-white">
-              <h2 className="shr-mt-4">Title</h2>
-              <p className="shr-mb-2 shr-pt-2">Content</p>
-            </div>
-          )
+          <div className="shr-bg-white">
+            <h2 className="shr-mt-4">Title</h2>
+            <p className="shr-mb-2 shr-pt-2">Content</p>
+          </div>
         }
       `,
     },
@@ -91,7 +100,7 @@ ruleTester.run('best-practice-for-tailwind-prohibit-root-margin', rule, {
     {
       code: `
         const Box = () => (
-            <div className="shr-bg-gray-100 shr-ml-2">
+            <div className="shr-bg-gray-100 shr-ml-2 hoge">
               <p>Content</p>
             </div>
         )

package/test/design-system-guideline-prohibit-double-icons.js

@@ -11,9 +11,7 @@ const ruleTester = new RuleTester({
   },
 })
 const generateErrorText = (name) => `${name} には prefix と suffix は同時に設定できません。
- - prefix または suffix のみを設定してください。
- - どちらにもアイコンをつけられそうな場合は、アイコン付き（右）（サフィックス）を優先し、アイコン付き（左）（プレフィックス）には指定しないでください。
- - 両方設定したい場合は、'eslint-disable-next-line' 等を利用して、このルールを無効化してください。`
+ - どちらにもアイコンをつけられそうな場合は、prefixを優先してください。`
 
 ruleTester.run('design-system-guideline-prohibit-double-icons', rule, {
   valid: [