Skip to content

Latest commit

 

History

History
88 lines (67 loc) · 4.75 KB

readme.md

File metadata and controls

88 lines (67 loc) · 4.75 KB

x-gift-article

This module provides a gift article form. A gift article is the possibility of a subscriber to share an article with a non-subscriber using their credits. If you are B2B, you'll see the Enterprise version of gift article, which gives you a lot more credits, and which is owned by FT Professional.

Installation

This module is supported on Node 16 and is distributed on npm.

npm install --save @financial-times/x-gift-article

Styling

To get correct styling, Your app should have: o-fonts

Usage

Component provided by this module expects a map of gift article properties. They can be used with vanilla JavaScript or JSX (if you are not familiar check out WTF is JSX first). For example if you were writing your application using React you could use the component like this:

import React from 'react'
import { ShareArticleModal } from '@financial-times/x-gift-article'

// A == B == C
const a = ShareArticleModal(props)
const b = <ShareArticleModal {...props} />
const c = React.createElement(ShareArticleModal, props)

Your app should trigger the activate action to activate the gift article form when your app actually displays the form. For example, if your app is client-side rendered, you can use actionsRef to trigger this action:

import { h, Component } from '@financial-times/x-engine'
import { ShareArticleModal } from '@financial-times/x-gift-article'

class Container extends Component {
  showShareArticleModal() {
    if (this.shareArticleModalActions) {
      this.setState({ showShareArticleModal: true })

      // trigger the action
      this.shareArticleModalActions.activate()
    }
  }

  render() {
    return (
      <div>
        <button onClick={() => this.showShareArticleModal()}>Share</button>

        <div style={{ display: this.state.showShareArticleModal ? 'block' : 'none' }}>
          <ShareArticleModal
            {...this.props}
            actionsRef={(actions) => (this.shareArticleModalActions = actions)}
          />
        </div>
      </div>
    )
  }
}

For more information about triggering actions, see the x-interaction documentation.

All x- components are designed to be compatible with a variety of runtimes, not just React. Check out the x-engine documentation for a list of recommended libraries and frameworks.

Properties

Property Type Required Note
isFreeArticle Boolean yes Only non gift form is displayed when this value is true.
article Object yes Must contain id, title and url properties
apiProtocol String no The protocol to use when making requests to the gift article and URL shortening services. Ignored if apiDomain is not set.
apiDomain String no The domain to use when making requests to the gift article and URL shortening services.
enterpriseApiBaseUrl String no The base URL to use when making requests to the enterprise sharing service.
title String no The title for the modal
showHighlightsCheckbox Boolean no Show or hide the option to include highlights
showHighlightsRecipientMessage Boolean no Show or hide ReceivedHighlightsAlert component
highlight String no The text of the quote or highlight to be shared
isMPRArticle Boolean no Hides the sharing option toggle and displays MPR version of the copies of modal's header and zero credits message