Rename "helpfulness" to survey (github#19727)

components/SupportSection.tsx

@@ -1,4 +1,4 @@
-import { Helpfulness } from 'components/Helpfulness'
+import { Survey } from 'components/Survey'
 import { Contribution } from 'components/Contribution'
 import { Support } from 'components/Support'
 import { useMainContext } from './context/MainContext'
@@ -16,7 +16,7 @@ export const SupportSection = () => {
     <section className="mt-lg-9 py-7 px-3 px-md-6 no-print color-bg-tertiary">
       <div className="container-xl gutter-lg-spacious clearfix">
         <div className="col-12 col-lg-6 col-xl-4 mb-6 mb-xl-0 float-left">
-          {!isDeprecated && <Helpfulness />}
+          {!isDeprecated && <Survey />}
         </div>
         <div className="col-12 col-lg-6 col-xl-4 mb-6 mb-xl-0 float-left">
           {!isDeprecated && <Contribution />}

components/Helpfulness.tsx → components/Survey.tsx

@@ -1,11 +1,11 @@
 import { ThumbsdownIcon, ThumbsupIcon } from '@primer/octicons-react'
 import { useTranslation } from 'components/hooks/useTranslation'
 
-export const Helpfulness = () => {
-  const { t } = useTranslation('helpfulness')
+export const Survey = () => {
+  const { t } = useTranslation('survey')
 
   return (
-    <form className="js-helpfulness f5">
+    <form className="js-survey f5">
       <h2 data-help-start data-help-yes data-help-no className="mb-1 f4">
         {t`able_to_find`}
       </h2>
@@ -15,24 +15,24 @@ export const Helpfulness = () => {
       <p className="radio-group" data-help-start data-help-yes data-help-no>
         <input
           hidden
-          id="helpfulness-yes"
+          id="survey-yes"
           type="radio"
-          name="helpfulness-vote"
+          name="survey-vote"
           value="Yes"
           aria-label={t('yes')}
         />
-        <label className="btn x-radio-label mr-1" htmlFor="helpfulness-yes">
+        <label className="btn x-radio-label mr-1" htmlFor="survey-yes">
           <ThumbsupIcon size={24} className="color-text-tertiary" />
         </label>
         <input
           hidden
-          id="helpfulness-no"
+          id="survey-no"
           type="radio"
-          name="helpfulness-vote"
+          name="survey-vote"
           value="No"
           aria-label={t`no`}
         />
-        <label className="btn x-radio-label" htmlFor="helpfulness-no">
+        <label className="btn x-radio-label" htmlFor="survey-no">
           <ThumbsdownIcon size={24} className="color-text-tertiary" />
         </label>
       </p>
@@ -42,28 +42,28 @@ export const Helpfulness = () => {
       <p className="color-text-secondary f6" hidden data-help-no>
         {t('no_feedback')}
       </p>
-      <input type="text" className="d-none" name="helpfulness-token" aria-hidden="true" />
+      <input type="text" className="d-none" name="survey-token" aria-hidden="true" />
       <p hidden data-help-no>
-        <label className="d-block mb-1 f6" htmlFor="helpfulness-comment">
+        <label className="d-block mb-1 f6" htmlFor="survey-comment">
           <span>{t('comment_label')}</span>
           <span className="text-normal color-text-tertiary float-right ml-1">{t('optional')}</span>
         </label>
         <textarea
           className="form-control input-sm width-full"
-          name="helpfulness-comment"
-          id="helpfulness-comment"
+          name="survey-comment"
+          id="survey-comment"
         ></textarea>
       </p>
       <p>
-        <label className="d-block mb-1 f6" htmlFor="helpfulness-email" hidden data-help-no>
+        <label className="d-block mb-1 f6" htmlFor="survey-email" hidden data-help-no>
           {t('email_label')}
           <span className="text-normal color-text-tertiary float-right ml-1">{t('optional')}</span>
         </label>
         <input
           type="email"
           className="form-control input-sm width-full"
-          name="helpfulness-email"
-          id="helpfulness-email"
+          name="survey-email"
+          id="survey-email"
           placeholder={t('email_placeholder')}
           hidden
           data-help-yes

data/ui.yml

@@ -49,7 +49,7 @@ support:
   still_need_help: Still need help?
   contact_support: Contact support
   ask_community: Ask the GitHub community
-helpfulness:
+survey:
   able_to_find: Did this doc help you?
   yes: Yes
   no: No

includes/support-section.html

@@ -1,7 +1,7 @@
 <section class="mt-lg-9 py-7 px-3 px-md-6 no-print color-bg-tertiary">
   <div class="container-xl gutter-lg-spacious d-flex flex-wrap">
     <div class="col-12 col-lg-6 col-xl-4 mb-6 mb-xl-0">
-      {% include helpfulness %}
+      {% include survey %}
     </div>
     <div class="col-12 col-lg-6 col-xl-4 mb-6 mb-xl-0">
       {% include contribution %}

includes/helpfulness.html → includes/survey.html

@@ -1,12 +1,12 @@
 {% unless enterpriseServerReleases.isOldestReleaseDeprecated and currentVersion contains enterpriseServerReleases.oldestSupported %}
-<form class="js-helpfulness f5">
+<form class="js-survey f5">
   <h2
     data-help-start
     data-help-yes
     data-help-no
     class="mb-1 f4"
   >
-    {% data ui.helpfulness.able_to_find %}
+    {% data ui.survey.able_to_find %}
   </h2>
   <p class="f6">
     <a href="/github/site-policy/github-privacy-statement">Privacy policy</a>
@@ -19,73 +19,73 @@
   >
     <input
       hidden
-      id="helpfulness-yes"
+      id="survey-yes"
       type="radio"
-      name="helpfulness-vote"
+      name="survey-vote"
       value="Yes"
-      aria-label="{% data ui.helpfulness.yes %}"
+      aria-label="{% data ui.survey.yes %}"
     />
-    <label class="btn x-radio-label" for="helpfulness-yes">
+    <label class="btn x-radio-label" for="survey-yes">
       {% octicon "thumbsup" height="24" %}
     </label>
     <input
       hidden
-      id="helpfulness-no"
+      id="survey-no"
       type="radio"
-      name="helpfulness-vote"
+      name="survey-vote"
       value="No"
-      aria-label="{% data ui.helpfulness.no %}"
+      aria-label="{% data ui.survey.no %}"
     />
-    <label class="btn x-radio-label" for="helpfulness-no">
+    <label class="btn x-radio-label" for="survey-no">
       {% octicon "thumbsdown" height="24" %}
     </label>
   </p>
   <p class="color-text-secondary f6" hidden data-help-yes>
-    {% data ui.helpfulness.yes_feedback %}
+    {% data ui.survey.yes_feedback %}
   </p>
   <p class="color-text-secondary f6" hidden data-help-no>
-    {% data ui.helpfulness.no_feedback %}
+    {% data ui.survey.no_feedback %}
   </p>
   <input
     type="text"
     class="d-none"
-    name="helpfulness-token"
+    name="survey-token"
     aria-hidden="true"
   />
   <p hidden data-help-no>
     <label
       class="d-block mb-1 f6"
-      for="helpfulness-comment"
+      for="survey-comment"
     >
-      <span>{% data ui.helpfulness.comment_label %}</span>
+      <span>{% data ui.survey.comment_label %}</span>
       <span class="text-normal color-text-tertiary float-right ml-1">
-        {% data ui.helpfulness.optional %}
+        {% data ui.survey.optional %}
       </span>
     </label>
     <textarea
       class="form-control input-sm width-full"
-      name="helpfulness-comment"
-      id="helpfulness-comment"
+      name="survey-comment"
+      id="survey-comment"
     ></textarea>
   </p>
   <p>
     <label
       class="d-block mb-1 f6"
-      for="helpfulness-email"
+      for="survey-email"
       hidden
       data-help-no
     >
-      {% data ui.helpfulness.email_label %}
+      {% data ui.survey.email_label %}
       <span class="text-normal color-text-tertiary float-right ml-1">
-        {% data ui.helpfulness.optional %}
+        {% data ui.survey.optional %}
       </span>
     </label>
     <input
       type="email"
       class="form-control input-sm width-full"
-      name="helpfulness-email"
-      id="helpfulness-email"
-      placeholder="{% data ui.helpfulness.email_placeholder %}"
+      name="survey-email"
+      id="survey-email"
+      placeholder="{% data ui.survey.email_placeholder %}"
       hidden
       data-help-yes
       data-help-no
@@ -98,11 +98,11 @@
     data-help-no
   >
     <button type="submit" class="btn btn-sm">
-      {% data ui.helpfulness.send %}
+      {% data ui.survey.send %}
     </button>
   </p>
   <p class="color-text-secondary f6" hidden data-help-end>
-    {% data ui.helpfulness.feedback %}
+    {% data ui.survey.feedback %}
   </p>
 </form>
 {% endunless %}

javascripts/events.js

@@ -235,7 +235,7 @@ export default function initializeEvents () {
   initClipboardEvent()
   initNavigateEvent()
   // print event in ./print.js
-  // survey event in ./helpfulness.js
+  // survey event in ./survey.js
   // experiment event in ./experiment.js
   // search event in ./search.js
   // redirect event in middleware/record-redirect.js

javascripts/index.js

@@ -11,7 +11,7 @@ import sidebar from './sidebar'
 import wrapCodeTerms from './wrap-code-terms'
 import print from './print'
 import localization from './localization'
-import helpfulness from './helpfulness'
+import survey from './survey'
 import experiment from './experiment'
 import copyCode from './copy-code'
 import initializeEvents from './events'
@@ -44,6 +44,6 @@ document.addEventListener('DOMContentLoaded', async () => {
   releaseNotes()
   initializeEvents()
   experiment()
-  helpfulness()
+  survey()
   toggleImages()
 })

javascripts/helpfulness.js → javascripts/survey.js

@@ -27,7 +27,7 @@ function submitForm (form) {
     Array.from(formData.entries())
       .map(
         ([key, value]) => [
-          key.replace('helpfulness-', ''),
+          key.replace('survey-', ''),
           value || undefined // Convert empty strings to undefined
         ]
       )
@@ -45,10 +45,10 @@ function trackEvent ({ token, vote, email, comment }) {
   })
 }
 
-export default function helpfulness () {
-  const form = document.querySelector('.js-helpfulness')
-  const texts = Array.from(document.querySelectorAll('.js-helpfulness input, .js-helpfulness textarea'))
-  const votes = Array.from(document.querySelectorAll('.js-helpfulness [type=radio]'))
+export default function survey () {
+  const form = document.querySelector('.js-survey')
+  const texts = Array.from(document.querySelectorAll('.js-survey input, .js-survey textarea'))
+  const votes = Array.from(document.querySelectorAll('.js-survey [type=radio]'))
   if (!form || !texts.length || !votes.length) return
 
   form.addEventListener('submit', evt => {

stylesheets/index.scss

@@ -22,7 +22,7 @@ $marketing-font-path: "/dist/fonts/";
 @import "font-mktg.scss";
 @import "gradient.scss";
 @import "headings.scss";
-@import "helpfulness.scss";
+@import "survey.scss";
 @import "images.scss";
 @import "lists.scss";
 @import "nav.scss";

stylesheets/helpfulness.scss → stylesheets/survey.scss

@@ -1,4 +1,4 @@
-/* Helpfulness survey override */
+/* Survey override */
 :checked + .x-radio-label {
   background: var(--color-auto-blue-5);
 

tests/browser/browser.js

@@ -85,7 +85,7 @@ describe('browser search', () => {
   })
 })
 
-describe('helpfulness', () => {
+describe('survey', () => {
   it('sends an event to /events when submitting form', async () => {
     // Visit a page that displays the prompt
     await page.goto('http://localhost:4001/en/actions/getting-started-with-github-actions/about-github-actions')
@@ -104,20 +104,20 @@ describe('helpfulness', () => {
     })
 
     // When I click the "Yes" button
-    await page.click('.js-helpfulness [for=helpfulness-yes]')
+    await page.click('.js-survey [for=survey-yes]')
     // (sent a POST request to /events)
     // I see the request for my email
-    await page.waitForSelector('.js-helpfulness [type="email"]')
+    await page.waitForSelector('.js-survey [type="email"]')
 
     // When I fill in my email and submit the form
-    await page.type('.js-helpfulness [type="email"]', 'test@example.com')
+    await page.type('.js-survey [type="email"]', 'test@example.com')
 
     await sleep(1000)
 
-    await page.click('.js-helpfulness [type="submit"]')
+    await page.click('.js-survey [type="submit"]')
     // (sent a PUT request to /events/{id})
     // I see the feedback
-    await page.waitForSelector('.js-helpfulness [data-help-end]')
+    await page.waitForSelector('.js-survey [data-help-end]')
   })
 })
 

tests/routing/deprecated-enterprise-versions.js

@@ -100,15 +100,15 @@ describe('deprecation banner', () => {
   })
 })
 
-describe('does not render helpfulness prompt or contribution button', () => {
-  test('does not render helpfulness prompt', async () => {
+describe('does not render survey prompt or contribution button', () => {
+  test('does not render survey prompt', async () => {
     let $ = await getDOM(`/en/enterprise/${enterpriseServerReleases.latest}/github`)
-    expect($('.js-helpfulness').length).toBeGreaterThan(0)
+    expect($('.js-survey').length).toBeGreaterThan(0)
     $ = await getDOM(`/en/enterprise/${enterpriseServerReleases.oldestSupported}/github`)
     if (enterpriseServerReleases.isOldestReleaseDeprecated) {
-      expect($('.js-helpfulness').length).toBe(0)
+      expect($('.js-survey').length).toBe(0)
     } else {
-      expect($('.js-helpfulness').length).toBeGreaterThan(0)
+      expect($('.js-survey').length).toBeGreaterThan(0)
     }
   })
 
@@ -119,7 +119,7 @@ describe('does not render helpfulness prompt or contribution button', () => {
     if (enterpriseServerReleases.isOldestReleaseDeprecated) {
       expect($('.contribution').length).toBe(0)
     } else {
-      expect($('.js-helpfulness').length).toBeGreaterThan(0)
+      expect($('.js-survey').length).toBeGreaterThan(0)
     }
   })
 })