refactor(www): Turn HubspotForm to function component (#25495)

* Turn HubspotForm to function component * fix error
gatsbyjs · Jul 3, 2020 · 6e68f17 · 6e68f17
1 parent 88cfa77
commit 6e68f17
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 65 deletions.
diff --git a/docs/blog/2018-08-01-partner-program/index.md b/docs/blog/2018-08-01-partner-program/index.md
@@ -40,7 +40,7 @@ Fill out the form below to let us know your interest in the Gatsby Partner Progr
 ### Partner application form:
 
 <HubspotForm
-  portal-id="4731712"
-  form-id="bbad5044-d31d-4473-bd57-62cb64fdc811"
-  sfdc-campaign-id="701f4000000VDrYAAW"
+  portalId="4731712"
+  formId="bbad5044-d31d-4473-bd57-62cb64fdc811"
+  sfdcCampaignId="701f4000000VDrYAAW"
 />
diff --git a/www/src/components/hubspot-form.js b/www/src/components/hubspot-form.js
@@ -1,68 +1,60 @@
 /** @jsx jsx */
 import { jsx } from "theme-ui"
-import { Component } from "react"
 
-import HubspotForm from "./react-hubspot-form"
+import ReactHubspotForm from "./react-hubspot-form"
 import { formInput, formInputFocus, buttonStyles } from "../utils/styles"
 
-export default class GatsbyHubspotForm extends Component {
-  render() {
-    const portalId = this.props.portalId || this.props[`portal-id`]
-    const formId = this.props.formId || this.props[`form-id`]
-    const sfdcCampaignId =
-      this.props.sfdcCampaignId || this.props[`sfdc-campaign-id`]
-
-    // See https://designers.hubspot.com/docs/cos/hubspot-form-markup#styling-forms for information on how to style the form
-    return (
-      <div
-        sx={{
-          "& form": {
-            margin: 0,
-          },
-          "& .hs-form fieldset": {
-            maxWidth: `none`,
-            width: `100%`,
-          },
-          "& .hs-form-field": {
-            pb: 5,
-          },
-          "& ul.hs-error-msgs": {
-            listStyleType: `none`,
-            margin: 0,
-            color: `warning`,
-            fontSize: 1,
-          },
-          "& .hs-form input": {
-            ...formInput,
-          },
-          '& .hs-form input[type="text"], .hs-form input[type="email"], .hs-form input[type="number"]': {
-            width: `100% !important`,
-            ":focus": {
-              ...formInputFocus,
-            },
-          },
-          "& label": {
-            // a bit unsure about the implications of the next line
-            display: `inline-block`,
-            fontSize: 1,
-            pb: 1,
-          },
-          "& .hs-form-required": {
-            color: `textMuted`,
-          },
-          "& .hs-button.primary": {
-            ...buttonStyles().default,
-          },
-        }}
-      >
-        <HubspotForm
-          portalId={portalId}
-          formId={formId}
-          sfdcCampaignId={sfdcCampaignId}
-          loading="Loading..."
-          {...{ css: `` }}
-        />
-      </div>
-    )
-  }
+export default function HubspotForm({ portalId, formId, sfdcCampaignId }) {
+  // See https://designers.hubspot.com/docs/cos/hubspot-form-markup#styling-forms for information on how to style the form
+  return (
+    <div
+      sx={{
+        "& form": {
+          margin: 0,
+        },
+        "& .hs-form fieldset": {
+          maxWidth: `none`,
+          width: `100%`,
+        },
+        "& .hs-form-field": {
+          pb: 5,
+        },
+        "& ul.hs-error-msgs": {
+          listStyleType: `none`,
+          margin: 0,
+          color: `warning`,
+          fontSize: 1,
+        },
+        "& .hs-form input": {
+          ...formInput,
+        },
+        '& .hs-form input[type="text"], .hs-form input[type="email"], .hs-form input[type="number"]': {
+          width: `100% !important`,
+          ":focus": {
+            ...formInputFocus,
+          },
+        },
+        "& label": {
+          // a bit unsure about the implications of the next line
+          display: `inline-block`,
+          fontSize: 1,
+          pb: 1,
+        },
+        "& .hs-form-required": {
+          color: `textMuted`,
+        },
+        "& .hs-button.primary": {
+          ...buttonStyles().default,
+        },
+      }}
+    >
+      <ReactHubspotForm
+        portalId={portalId}
+        formId={formId}
+        sfdcCampaignId={sfdcCampaignId}
+        loading="Loading..."
+        {...{ css: `` }}
+      />
+    </div>
+  )
 }