@financial-times/n-conversion-forms 31.0.1 → 31.0.3

package/dist/registration-confirmation.jsx

@@ -0,0 +1,108 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RegistrationConfirmation = RegistrationConfirmation;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var EMAIL_DEFAULT_TEXT = 'your email';
+var SOCIALS = [{
+  name: 'instagram',
+  link: 'https://www.instagram.com/financialtimes'
+}, {
+  name: 'linkedin',
+  link: 'https://www.linkedin.com/company/financial-times'
+}, {
+  name: 'twitter',
+  link: 'https://twitter.com/FT'
+}, {
+  name: 'facebook',
+  link: 'https://www.facebook.com/financialtimes'
+}];
+var STORES = [{
+  name: 'apple',
+  link: 'https://apps.apple.com/app/apple-store/id1200842933'
+}, {
+  name: 'android',
+  link: 'https://play.google.com/store/apps/details?id=com.ft.news'
+}];
+function RegistrationConfirmation(_ref) {
+  var _ref$email = _ref.email,
+    email = _ref$email === void 0 ? EMAIL_DEFAULT_TEXT : _ref$email,
+    _ref$returnUrl = _ref.returnUrl,
+    returnUrl = _ref$returnUrl === void 0 ? '/' : _ref$returnUrl;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "ncf"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "ncf__center ncf__margin"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "ncf__icon ncf__icon--tick ncf__icon--large"
+  }), /*#__PURE__*/_react["default"].createElement("h1", {
+    className: "ncf__header ncf__header--confirmation"
+  }, "Success"), /*#__PURE__*/_react["default"].createElement("p", {
+    className: "ncf__confirmation--message"
+  }, "We\u2019ve sent confirmation to ", email, ".")), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "ncf__divider-horizontal"
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "ncf__confirmation--links ncf__margin"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "ncf__confirmation--socials"
+  }, /*#__PURE__*/_react["default"].createElement("b", null, "Breaking news alerts, direct to your lock screen"), /*#__PURE__*/_react["default"].createElement("p", {
+    className: "ncf__confirmation--mobile"
+  }, "Download our apps or follow us on our socials"), /*#__PURE__*/_react["default"].createElement("p", {
+    className: "ncf__confirmation--desktop"
+  }, "Find us in the app and google play stores or follow us on our socials"), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "ncf__confirmation--badges"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "o-social-follow",
+    "aria-label": "Follow on social media"
+  }, SOCIALS.map(function (_ref2) {
+    var name = _ref2.name,
+      link = _ref2.link;
+    return /*#__PURE__*/_react["default"].createElement("a", {
+      key: name,
+      href: link,
+      className: "o-social-follow-icon o-social-follow-icon--".concat(name),
+      target: "_blank",
+      rel: "noopener noreferrer",
+      "data-trackable": "register-social-".concat(name)
+    }, /*#__PURE__*/_react["default"].createElement("span", {
+      className: "o-social-follow-icon__label"
+    }, "on ", name));
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "ncf__confirmation--mobile ncf__confirmation--app-badges",
+    "aria-label": "Download the app"
+  }, STORES.map(function (_ref3) {
+    var name = _ref3.name,
+      link = _ref3.link;
+    return /*#__PURE__*/_react["default"].createElement("a", {
+      key: name,
+      href: link,
+      className: "ncf-icon ncf-icon--".concat(name),
+      target: "_blank",
+      rel: "noopener noreferrer",
+      "data-trackable": "register-app-".concat(name)
+    }, /*#__PURE__*/_react["default"].createElement("span", {
+      className: "o-social-follow-icon__label"
+    }, "on ", name));
+  })))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "ncf__confirmation--alerts"
+  }, /*#__PURE__*/_react["default"].createElement("b", null, "Set up email alerts in", /*#__PURE__*/_react["default"].createElement("span", {
+    "aria-label": "myFT",
+    className: "ncf-icon ncf-icon--myft"
+  })), /*#__PURE__*/_react["default"].createElement("p", null, "Choose the content you want to follow by personalising your alerts for the most important topics and additional newsletters"), /*#__PURE__*/_react["default"].createElement("a", {
+    href: "/myft",
+    className: "margin-top-x4 ncf__button ncf__button--secondary",
+    "data-trackable": "register-personalise-my-alerts"
+  }, "Personalise my alerts"))), /*#__PURE__*/_react["default"].createElement("a", {
+    href: returnUrl,
+    target: "_parent",
+    className: "ncf__confirmation--finish ncf__button ncf__button--submit",
+    "data-trackable": "register-finish"
+  }, "Start reading"));
+}
+RegistrationConfirmation.propTypes = {
+  email: _propTypes["default"].string
+};

package/dist/responsibility.jsx

@@ -0,0 +1,84 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Responsibility = Responsibility;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _nCommonStaticData = require("n-common-static-data");
+var B2CResponsibilities = _nCommonStaticData.demographics.responsibilities.responsibilities;
+var B2BResponsibilities = _nCommonStaticData.b2b.demographics.responsibilities.responsibilities;
+function Responsibility(_ref) {
+  var value = _ref.value,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$isRequired = _ref.isRequired,
+    isRequired = _ref$isRequired === void 0 ? true : _ref$isRequired,
+    _ref$hasError = _ref.hasError,
+    hasError = _ref$hasError === void 0 ? false : _ref$hasError,
+    _ref$fieldId = _ref.fieldId,
+    fieldId = _ref$fieldId === void 0 ? 'responsibilityField' : _ref$fieldId,
+    _ref$selectId = _ref.selectId,
+    selectId = _ref$selectId === void 0 ? 'responsibility' : _ref$selectId,
+    _ref$selectName = _ref.selectName,
+    selectName = _ref$selectName === void 0 ? 'responsibility' : _ref$selectName,
+    _ref$isB2B = _ref.isB2B,
+    isB2B = _ref$isB2B === void 0 ? false : _ref$isB2B,
+    _ref$options = _ref.options,
+    options = _ref$options === void 0 ? isB2B ? B2BResponsibilities : B2CResponsibilities : _ref$options,
+    _ref$fieldLabel = _ref.fieldLabel,
+    fieldLabel = _ref$fieldLabel === void 0 ? 'Which best describes your job responsibility?' : _ref$fieldLabel;
+  var inputWrapperClassName = (0, _classnames["default"])(['o-forms-input', 'o-forms-input--select', {
+    'o-forms-input--invalid': hasError
+  }]);
+  var fieldTitleClassName = (0, _classnames["default"])(['o-forms-title', {
+    'o-forms-field--optional': !isRequired
+  }]);
+  return /*#__PURE__*/_react["default"].createElement("label", {
+    id: fieldId,
+    className: "o-forms-field ncf__validation-error",
+    "data-validate": "required",
+    htmlFor: selectId
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: fieldTitleClassName
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-title__main"
+  }, fieldLabel)), /*#__PURE__*/_react["default"].createElement("span", {
+    className: inputWrapperClassName
+  }, /*#__PURE__*/_react["default"].createElement("select", {
+    id: selectId,
+    name: selectName,
+    "data-trackable": "responsibility",
+    "aria-required": isRequired,
+    required: isRequired,
+    disabled: isDisabled,
+    defaultValue: value
+  }, /*#__PURE__*/_react["default"].createElement("option", {
+    value: ""
+  }, "Please select a job responsibility"), options.map(function (_ref2) {
+    var code = _ref2.code,
+      description = _ref2.description;
+    return /*#__PURE__*/_react["default"].createElement("option", {
+      key: code,
+      value: code
+    }, description);
+  })), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-input__error"
+  }, "Please select your responsibility")));
+}
+Responsibility.propTypes = {
+  value: _propTypes["default"].string,
+  isDisabled: _propTypes["default"].bool,
+  hasError: _propTypes["default"].bool,
+  fieldId: _propTypes["default"].string,
+  selectId: _propTypes["default"].string,
+  selectName: _propTypes["default"].string,
+  isB2B: _propTypes["default"].bool,
+  options: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    code: _propTypes["default"].string,
+    description: _propTypes["default"].string
+  }))
+};

package/dist/section.jsx

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Section = Section;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function Section(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "o-forms-section o-forms-section--wide"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "o-forms-section__message"
+  }, children));
+}
+Section.propTypes = {
+  children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]).isRequired
+};

package/dist/seven-day-pass-experiment-confirmation.jsx

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SevenDayPassExperimentConfirmation = SevenDayPassExperimentConfirmation;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var DetailsMobileView = function DetailsMobileView(_ref) {
+  var details = _ref.details;
+  return /*#__PURE__*/_react["default"].createElement("dl", {
+    className: "ncf__list ncf__lite-sub__details ncf__lite-sub-confirmation--hidden-md ncf__lite-sub-confirmation--hidden-lg"
+  }, details.map(function (detail, index) {
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
+      key: index
+    }, /*#__PURE__*/_react["default"].createElement("dt", {
+      className: "ncf__list-title"
+    }, detail.title), /*#__PURE__*/_react["default"].createElement("dd", {
+      className: "ncf__list-data"
+    }, detail.data));
+  }));
+};
+function SevenDayPassExperimentConfirmation(_ref2) {
+  var _ref2$offerName = _ref2.offerName,
+    offerName = _ref2$offerName === void 0 ? '' : _ref2$offerName,
+    _ref2$details = _ref2.details,
+    details = _ref2$details === void 0 ? [] : _ref2$details;
+  var detailElements = details && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("h2", {
+    className: "ncf__header2--afterline"
+  }, "Your billing details"), /*#__PURE__*/_react["default"].createElement("dl", {
+    className: "ncf__list ncf__lite-sub-confirmation--hidden-sm"
+  }, details.map(function (detail, index) {
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
+      key: index
+    }, /*#__PURE__*/_react["default"].createElement("dt", {
+      className: "ncf__list-title"
+    }, detail.title), /*#__PURE__*/_react["default"].createElement("dd", {
+      className: "ncf__list-data"
+    }, detail.data));
+  })), /*#__PURE__*/_react["default"].createElement(DetailsMobileView, {
+    details: details
+  }));
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "ncf ncf__wrapper"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "ncf__center"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "ncf__icon ncf__icon--tick ncf__icon--large"
+  }), /*#__PURE__*/_react["default"].createElement("p", {
+    className: "ncf__paragraph--reduced-padding ncf__paragraph--subscription-confirmation"
+  }, "You are now subscribed to:"), /*#__PURE__*/_react["default"].createElement("h1", {
+    className: "ncf__header ncf__header--confirmation"
+  }, 'Premium Digital')), /*#__PURE__*/_react["default"].createElement("p", {
+    className: "ncf__paragraph"
+  }, "Exciting news! You are one of the first to try a", ' ', /*#__PURE__*/_react["default"].createElement("strong", null, offerName), ". As a thank you, we are pleased to extend your subscription to one month at no additional cost."), /*#__PURE__*/_react["default"].createElement("p", {
+    className: "ncf__center"
+  }, /*#__PURE__*/_react["default"].createElement("a", {
+    href: "/",
+    className: "ncf__button ncf__button--submit ncf__button--margin ncf__lite-sub-confirmation--lite-sub-cta"
+  }, "Go to FT.com")), /*#__PURE__*/_react["default"].createElement("p", {
+    className: "ncf__paragraph"
+  }, "Please save or print this page for your records as your purchase confirmation."), /*#__PURE__*/_react["default"].createElement("p", {
+    className: "ncf__paragraph"
+  }, "Here's a summary of your Premium Digital subscription:"), detailElements, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "ncf__headed-paragraph"
+  }, /*#__PURE__*/_react["default"].createElement("h3", {
+    className: "ncf__header"
+  }, "Something not right?"), /*#__PURE__*/_react["default"].createElement("p", {
+    className: "ncf__paragraph"
+  }, "Go to your", ' ', /*#__PURE__*/_react["default"].createElement("a", {
+    className: "ncf__link ncf__link--external",
+    href: "https://www.ft.com/myaccount/personal-details",
+    target: "_blank",
+    rel: "noopener noreferrer",
+    "data-trackable": "yourAccount"
+  }, "account settings"), ' ', "to view or edit your account. If you need to get in touch call us on", ' ', /*#__PURE__*/_react["default"].createElement("a", {
+    href: "tel:+442077556248",
+    className: "ncf__link ncf__link--external"
+  }, "+44 20 7755 6248"), ". Or", ' ', /*#__PURE__*/_react["default"].createElement("a", {
+    className: "ncf__link ncf__link--external",
+    href: "https://help.ft.com/contact/",
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, "contact us"), ' ', "for additional support.")));
+}
+SevenDayPassExperimentConfirmation.propTypes = {
+  offerName: _propTypes["default"].string.isRequired,
+  details: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    title: _propTypes["default"].string.isRequired,
+    data: _propTypes["default"].string.isRequired
+  }))
+};

package/dist/state.jsx

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.State = State;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _nCommonStaticData = require("n-common-static-data");
+var defaultStates = _nCommonStaticData.americanStates.states;
+function State(_ref) {
+  var value = _ref.value,
+    _ref$fieldId = _ref.fieldId,
+    fieldId = _ref$fieldId === void 0 ? 'stateField' : _ref$fieldId,
+    _ref$selectId = _ref.selectId,
+    selectId = _ref$selectId === void 0 ? 'state' : _ref$selectId,
+    _ref$hasError = _ref.hasError,
+    hasError = _ref$hasError === void 0 ? false : _ref$hasError,
+    _ref$isHidden = _ref.isHidden,
+    isHidden = _ref$isHidden === void 0 ? false : _ref$isHidden,
+    _ref$isBillingState = _ref.isBillingState,
+    isBillingState = _ref$isBillingState === void 0 ? false : _ref$isBillingState,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$states = _ref.states,
+    states = _ref$states === void 0 ? defaultStates : _ref$states;
+  var fieldClassNames = (0, _classnames["default"])(['o-forms-field', {
+    ncf__hidden: isHidden
+  }]);
+  var inputWrapperClassNames = (0, _classnames["default"])(['o-forms-input', 'o-forms-input--select', {
+    'o-forms-input--invalid': hasError
+  }]);
+  return /*#__PURE__*/_react["default"].createElement("label", {
+    id: fieldId,
+    className: fieldClassNames,
+    "data-validate": "required",
+    htmlFor: selectId
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-title"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-title__main"
+  }, isBillingState ? 'Billing ' : '', "State")), /*#__PURE__*/_react["default"].createElement("span", {
+    className: inputWrapperClassNames
+  }, /*#__PURE__*/_react["default"].createElement("select", {
+    id: selectId,
+    "aria-required": "true",
+    required: true,
+    name: isBillingState ? 'billingState' : 'state',
+    "data-trackable": "field-state",
+    disabled: isDisabled,
+    defaultValue: value
+  }, /*#__PURE__*/_react["default"].createElement("option", {
+    disabled: true,
+    value: ""
+  }, "Please select a state"), states.map(function (_ref2) {
+    var code = _ref2.code,
+      name = _ref2.name;
+    return /*#__PURE__*/_react["default"].createElement("option", {
+      key: code,
+      value: code
+    }, name);
+  })), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-input__error"
+  }, "Please select your state")));
+}
+State.propTypes = {
+  value: _propTypes["default"].string,
+  fieldId: _propTypes["default"].string,
+  selectId: _propTypes["default"].string,
+  hasError: _propTypes["default"].bool,
+  isHidden: _propTypes["default"].bool,
+  isBillingState: _propTypes["default"].bool,
+  isDisabled: _propTypes["default"].bool,
+  states: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    code: _propTypes["default"].string,
+    name: _propTypes["default"].string
+  }))
+};

package/dist/submit.jsx

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Submit = Submit;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+function Submit(_ref) {
+  var _ref$id = _ref.id,
+    id = _ref$id === void 0 ? 'submitButton' : _ref$id,
+    _ref$isCentered = _ref.isCentered,
+    isCentered = _ref$isCentered === void 0 ? false : _ref$isCentered,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$backButtonUrl = _ref.backButtonUrl,
+    backButtonUrl = _ref$backButtonUrl === void 0 ? null : _ref$backButtonUrl,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? 'Continue' : _ref$label;
+  var divClassName = (0, _classnames["default"])([
+  // The space at the beginning is so that we match what the handlebars
+  // template does. Not great I know. :/
+  {
+    ' ncf__field--center': isCentered
+  }, {
+    ' ncf__field--flex': backButtonUrl
+  }]);
+  var backButton = backButtonUrl ? /*#__PURE__*/_react["default"].createElement("a", {
+    className: "ncf__button",
+    href: backButtonUrl,
+    target: "_parent",
+    "data-trackable": "link"
+  }, "Back") : null;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: divClassName
+  }, backButton, /*#__PURE__*/_react["default"].createElement("button", {
+    id: id,
+    className: "ncf__button ncf__button--submit",
+    "data-trackable": "submit",
+    type: "submit",
+    disabled: isDisabled
+  }, label));
+}
+Submit.propTypes = {
+  id: _propTypes["default"].string,
+  isCentered: _propTypes["default"].bool,
+  isDisabled: _propTypes["default"].bool,
+  backButtonUrl: _propTypes["default"].string,
+  label: _propTypes["default"].string
+};

package/dist/text-input.jsx

@@ -0,0 +1,78 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextInput = TextInput;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+function TextInput(_ref) {
+  var dataTrackable = _ref.dataTrackable,
+    _ref$errorText = _ref.errorText,
+    errorText = _ref$errorText === void 0 ? 'Please enter a value' : _ref$errorText,
+    fieldId = _ref.fieldId,
+    _ref$hasError = _ref.hasError,
+    hasError = _ref$hasError === void 0 ? false : _ref$hasError,
+    inputId = _ref.inputId,
+    inputName = _ref.inputName,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$isRequired = _ref.isRequired,
+    isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? '' : _ref$label,
+    _ref$placeHolder = _ref.placeHolder,
+    placeHolder = _ref$placeHolder === void 0 ? '' : _ref$placeHolder,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? '' : _ref$value,
+    description = _ref.description;
+  // Use inputId if inputName is not explicitly passed.
+  inputName = inputName || inputId;
+  var inputWrapperClassNames = (0, _classnames["default"])(['o-forms-input', 'o-forms-input--text', {
+    'o-forms-input--invalid': hasError
+  }, {
+    'o-forms-field--optional': !isRequired
+  }]);
+  return /*#__PURE__*/_react["default"].createElement("label", {
+    id: fieldId,
+    className: "o-forms-field ncf__validation-error",
+    "data-validate": "required",
+    htmlFor: inputId
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-title"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-title__main"
+  }, label), description ? /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-title__prompt"
+  }, description) : null), /*#__PURE__*/_react["default"].createElement("span", {
+    className: inputWrapperClassNames
+  }, /*#__PURE__*/_react["default"].createElement("input", {
+    type: "text",
+    id: inputId,
+    name: inputName,
+    placeholder: placeHolder,
+    "data-trackable": dataTrackable,
+    "aria-required": isRequired,
+    required: isRequired,
+    disabled: isDisabled,
+    defaultValue: value
+  }), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-input__error"
+  }, errorText)));
+}
+TextInput.propTypes = {
+  dataTrackable: _propTypes["default"].string,
+  errorText: _propTypes["default"].string,
+  fieldId: _propTypes["default"].string,
+  hasError: _propTypes["default"].bool,
+  inputId: _propTypes["default"].string,
+  inputName: _propTypes["default"].string,
+  isDisabled: _propTypes["default"].bool,
+  isRequired: _propTypes["default"].bool,
+  label: _propTypes["default"].string,
+  placeHolder: _propTypes["default"].string,
+  value: _propTypes["default"].string,
+  description: _propTypes["default"].string
+};

package/dist/trial-banner.jsx

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TrialBanner = TrialBanner;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function TrialBanner(_ref) {
+  var _ref$trialDuration = _ref.trialDuration,
+    trialDuration = _ref$trialDuration === void 0 ? '' : _ref$trialDuration;
+  var durationMessage = trialDuration ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "ncf__strong"
+  }, trialDuration), ' ') : '';
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    id: "trialBanner",
+    className: "ncf__trial-banner"
+  }, /*#__PURE__*/_react["default"].createElement("p", {
+    className: "ncf__trial-banner-content"
+  }, "Your free ", durationMessage, "FT.com trial", /*#__PURE__*/_react["default"].createElement("img", {
+    src: "https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fwww.ft.com%2F__assets%2Fcreatives%2Fb2b%2Fmacron-desktop-banner.png?source=conversion&height=40",
+    alt: "Emmanuel Macron",
+    className: "ncf__trial-banner-img"
+  })));
+}
+TrialBanner.propTypes = {
+  trialDuration: _propTypes["default"].string
+};

package/package.json

@@ -2,19 +2,16 @@
   "name": "@financial-times/n-conversion-forms",
   "version": "0.0.0",
   "description": "Containing jsx components and styles for forms included on Accounts and Acqusition apps (next-signup, next-profile, next-retention, etc).",
-  "main": "dist/index.js",
+  "main": "./dist/index.js",
   "scripts": {
-    "heroku-postbuild": "dotcom-tool-kit build:remote release:remote cleanup:remote",
-    "prepare": "snyk-protect || snyk-protect -d || true",
-    "build": "dotcom-tool-kit build:local",
     "test": "dotcom-tool-kit test:local",
+    "prepare": "snyk-protect || snyk-protect -d || true",
+    "build": "npm run clean && dotcom-tool-kit build:local",
     "start": "dotcom-tool-kit run:local",
-    "format": "dotcom-tool-kit format:local",
-    "storybook": "NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 5005",
-    "build-storybook": "NODE_OPTIONS=--openssl-legacy-provider build-storybook --docs --output-dir docs",
-    "lint": "eslint . --ext .jsx,.js",
-    "lint-fix": "eslint . --ext .jsx,.js --fix",
-    "prettier": "prettier --write '**/*.{js,jsx,json,scss}'"
+    "storybook": "storybook dev -p 5005",
+    "build-storybook": "storybook build --docs --output-dir docs",
+    "clean": "rm -rf ./dist",
+    "format": "dotcom-tool-kit format:local"
   },
   "repository": {
     "type": "git",
@@ -35,24 +32,25 @@
     "n-common-static-data": "github:Financial-Times/n-common-static-data#v2.0.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.10.5",
-    "@babel/core": "^7.11.1",
-    "@babel/plugin-transform-runtime": "^7.11.0",
-    "@babel/preset-env": "^7.11.0",
-    "@babel/preset-react": "^7.10.4",
+    "@babel/core": "^7.22.15",
+    "@babel/plugin-transform-runtime": "^7.22.15",
+    "@babel/preset-env": "^7.22.15",
+    "@babel/preset-react": "^7.22.15",
+    "@dotcom-tool-kit/babel": "^3.1.3",
     "@dotcom-tool-kit/component": "^3.1.8",
     "@dotcom-tool-kit/eslint": "^3.1.3",
     "@dotcom-tool-kit/frontend-app": "^3.1.9",
     "@dotcom-tool-kit/jest": "^3.2.0",
     "@dotcom-tool-kit/lint-staged": "^4.1.3",
+    "@dotcom-tool-kit/logger": "^3.1.1",
     "@dotcom-tool-kit/prettier": "^3.1.3",
-    "@dotcom-tool-kit/webpack": "^3.1.4",
     "@financial-times/eslint-config-next": "^6.0.0",
     "@financial-times/jest-browser-resolver": "^1.0.2",
     "@snyk/protect": "1.1193.0",
-    "@storybook/addon-a11y": "^6.5.13",
-    "@storybook/addon-essentials": "6.5.13",
-    "@storybook/react": "^6.5.13",
+    "@storybook/addon-a11y": "^7.4.0",
+    "@storybook/addon-essentials": "7.4.0",
+    "@storybook/react": "^7.4.0",
+    "@storybook/react-webpack5": "^7.4.0",
     "@sucrase/jest-plugin": "^3.0.0",
     "check-engines": "^1.5.0",
     "dotcom-tool-kit": "^3.2.1",
@@ -63,6 +61,7 @@
     "eslint-plugin-jest": "^27.2.3",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.31.1",
+    "eslint-plugin-storybook": "^0.6.13",
     "fetch-mock": "^7.2.0",
     "html-webpack-plugin": "^5.5.3",
     "jest": "^29.6.4",
@@ -80,6 +79,7 @@
     "react-is": "^16.13.1",
     "sass": "^1.55.0",
     "sass-loader": "^10.2.1",
+    "storybook": "^7.4.0",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4"
   },

package/toolkit/run-storybook/.toolkitrc.yml

@@ -0,0 +1 @@
+// Need any empty for plugin to work, based on this link https://github.com/Financial-Times/dotcom-tool-kit/blob/35a6f7754c33f58789b201594ed5d1000e029f1c/docs/custom-plugins.md#common-plugin-structure

package/toolkit/run-storybook/index.js

@@ -0,0 +1,17 @@
+const { Task } = require('@dotcom-tool-kit/types');
+const { exec } = require('child_process');
+const { hookFork, waitOnExit } = require('@dotcom-tool-kit/logger');
+
+class RunStorybook extends Task {
+	async run() {
+		this.logger.info('running storybook');
+
+		const child = await exec('storybook dev -p 5005');
+		hookFork(this.logger, 'storybook', child);
+		return waitOnExit('storybook', child);
+	}
+}
+
+RunStorybook.description = 'Run storybook';
+
+exports.tasks = [RunStorybook];