Origami Frontend Components & Services

Readme: o-email-only-signup

o-email-only-signup is not maintained by the Origami team. This means that the Origami team will not necessarily be able to help you with support requests. The people who maintain this component may be able to offer support, but it's not guaranteed.

o-email-only-signup has a support status of "dead". This means that there are no plans to fix any issues with this component, and it may stop working at any point. More information on the status of this component is available in the README. If you still rely on this component or have concerns, please contact the Origami team.

⚠️ This component has been deprecated.

The endpoints detailed in configuration no longer exist. You could use newsletter-signup to mount the required endpoints via a different application if needed.


Light sign-up form.

Usage

Markup

Some elements inside the form require specific data attributes so the JavaScript can add some behaviour correctly. These are:

Collapsible state [optional] These data attributes MUST be added to elements to enable a collapsible state (as well as data-o-email-only-signup-close):

In the collapsed state data-o-email-only-signup-content will be visually hidden (and have it's children "focusable" elements tabindex set to -1) and data-o-email-only-signup-discreet-content will be displayed. In the "open"/default state this will be reversed.

Positioning element [optional] An element with this attribute MUST be present on the page:

Promo image

You can optionally include a responsive promo image asset in the component. See the demos for examples.

Positioning MVT

This is optional. If no positioning element exists the form will render in place.

The position of the signup form within the article (and indeed page) can be customised. This could be used to run a MVT on how the location of the form affects its performance.

A positioning element with the data attribute data-o-email-only-signup-position-mvt must be present in the DOM.

If this element exists, the form component will become its child, thus moving the form to its position.

NOTE: you should initially render the form in a hidden state in order to avoid a reflow. Simply add the class o-email-only-signup__visually-hidden to the form (the data-o-email-only-signup-form element), the class will be removed when the component is initialised.

JavaScript

var signUp = require('o-email-only-signup');
signUp.init();

Configuration

Options can be specified imperatively by passing an object into init, or declaratively by data- attributes. Unspecified options will use the default values.

Javascript Data attribute Description Default
signupUrl data-o-email-only-signup-signup-url URL to post the form to /signup/api/light-signup

Sass

As with all Origami components, o-email-only-signup has a silent mode. To use its compiled CSS (rather than incorporating its mixins into your own Sass) set $o-email-only-signup-is-silent: false; in your Sass before you import the o-email-only-signup Sass:

$o-email-only-signup-is-silent: false;
@import 'o-email-only-signup/main';

Using Sass Mixins

The full o-email-only-signup styles can be access via including the oEmailOnlySignup mixin:

// Import the o-email-only-signup sass file
@import 'o-email-only-signup/main';

// Output the o-email-only-signup styles
@include oEmailOnlySignup;

Migration guide

Migrating from v4.x.x to v5.x.x

Version 5 adds support for silent mode. To continue including the full component in your Sass, update where you import the o-email-only-signup Sass:

+ $o-email-only-signup-is-silent: false;
@import 'o-email-only-signup/main'

Contact

If you have any questions or comments about this component, or need help using it, please either raise an issue, visit #ft-origami or email Origami Support.


Licence

This software is published by the Financial Times under the MIT licence.

Status
dead Origami v1 (Bower)
Switch component view

GitHub: o-email-only-signup

Install o-email-only-signup

If using the Build Service, add o-email-only-signup@^5.0.5 to your script and link tags.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-email-only-signup@^5.0.5".

Help & Support

o-email-only-signup is not supported directly by the Origami team. We make no guarantees, but will help if we can. First try contacting its maintainers at:


Email: next.team@ft.com