Component

Contact preview

Generates a preview of a given govspeak contact snippet from a select element

This component uses a select element to get the contact ID, converts the ID to a govspeak contact snippet and sends it to a server endpoint to get the appropriate response.

It also supports the a static approach, where the preview is passed to the html option.

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

Unable to generate preview

Government Legal Department

Croydon, CR90 9QU

Find contact details and the opening hours.

How to call this component

<%= render "components/contact_preview", {
  html: sanitize("<div class=\"gem-c-govspeak\">
      <div class=\"contact\">
        <div class=\"content\">
          <h3>Government Legal Department</h3>
          <div class=\"vcard contact-inner\">
            <p class=\"adr\">Croydon, CR90 9QU</p>
          </div>
          <p class=\"comments\">Find contact details and the opening hours.</p>
        </div>
      </div>
    </div>
    "),
  error_message: "Unable to generate preview"
} %>

Accessibility acceptance criteria

The component must:

• update its content to reflect changes in the referenced select element