Rename example classes

alphagov · Jan 29, 2024 · d1967d5 · d1967d5
1 parent 6b1404b
commit d1967d5
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git a/examples/index.html b/examples/index.html
@@ -48,13 +48,13 @@
       }
 
       /* Custom classes for the `XYZClasses` props with visual changes to see their effect without inspecting */ 
-      .custom-input-class {
+      .app-input {
         /* Adjust the font to check that both hint and input get the class by default,
            to ensure the hint suggestion exactly aligns with the typed input text */
         font-family: serif;
       }
 
-      .custom-hint-class {
+      .app-hint {
         box-shadow: inset 0 0 0 5px #44952e;
       }
     </style>
@@ -132,15 +132,15 @@ <h3><code>{ showAllValues: true, dropdownArrow: () => '' }</code></h3>
       <label for="autocomplete-customDropdownArrow">Country</label>
       <div id="tt-customDropdownArrow" class="autocomplete-wrapper"></div>
 
-      <h3><code>{ inputClasses: 'custom-input-class'}</code></h3>
+      <h3><code>{ inputClasses: 'app-input'}</code></h3>
       <p>
         The classes provided in <code>inputClasses</code> are added to
         the component's <code>&lt;input&gt;</code>.
       </p>
       <label for="autocomplete-inputClasses">Country</label>
       <div id="tt-inputClasses" class="autocomplete-wrapper"></div>
 
-      <h3><code>{ hintClasses: 'custom-hint-class'}</code></h3>
+      <h3><code>{ hintClasses: 'app-hint'}</code></h3>
       <p>
         The classes provided in <code>hintClasses</code> are added to
         the component's hint that appears when the value matches the start of a suggestion.
@@ -532,7 +532,7 @@ <h3>Translating texts</h3>
           "aria-labelledby": id
         },
         autoselect: true,
-        inputClasses: 'custom-input-class'
+        inputClasses: 'app-input'
       })
     </script>
 
@@ -547,7 +547,7 @@ <h3>Translating texts</h3>
           "aria-labelledby": id
         },
         autoselect: true,
-        hintClasses: 'custom-hint-class'
+        hintClasses: 'app-hint'
       })
     </script>
 

diff --git a/test/integration/index.js b/test/integration/index.js
@@ -226,14 +226,14 @@ const classesPropsExamples = () => {
   describe('classes properties', () => {
     it('should set `inputClasses` on both hint and input', async () => {
       const $input = await $('input#autocomplete-inputClasses')
-      await expect($input).toHaveElementClass('custom-input-class')
+      await expect($input).toHaveElementClass('app-input')
 
       // Trigger the display of the hint
       await $input.setValue('fra')
 
       const $hint = $input.parentElement().$('.autocomplete__hint')
       await expect($hint).toBeDisplayed()
-      await expect($hint).toHaveElementClass('custom-input-class')
+      await expect($hint).toHaveElementClass('app-input')
     })
 
     it('should set `hintClasses` on the hint', async () => {
@@ -244,7 +244,7 @@ const classesPropsExamples = () => {
 
       const $hint = $input.parentElement().$('.autocomplete__hint')
       await expect($hint).toBeDisplayed()
-      await expect($hint).toHaveElementClass('custom-hint-class')
+      await expect($hint).toHaveElementClass('app-hint')
     })
   })
 }