@financial-times/n-myft-ui 25.0.0-beta.3 → 26.0.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -104,18 +104,14 @@ function CsrfToken({ cacheablePersonalisedUrl, csrfToken }) {
104
104
  let inputProps = {};
105
105
 
106
106
  if (cacheablePersonalisedUrl) {
107
- inputProps = _extends({}, inputProps, {
108
- 'data-myft-csrf-token': csrfToken
109
- });
110
- }
111
-
112
- if (csrfToken) {
113
107
  inputProps.value = csrfToken;
114
108
  }
115
109
 
116
- return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('input', _extends({}, inputProps, {
117
- type: 'hidden',
118
- name: 'token'
110
+ return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement("input", _extends({
111
+ "data-myft-csrf-token": true
112
+ }, inputProps, {
113
+ type: "hidden",
114
+ name: "token"
119
115
  }));
120
116
  }
121
117
 
@@ -270,7 +266,9 @@ function FollowButton(props) {
270
266
  flags,
271
267
  extraClasses,
272
268
  conceptId,
273
- variant
269
+ variant,
270
+ csrfToken,
271
+ cacheablePersonalisedUrl
274
272
  } = props;
275
273
 
276
274
  const formProps = generateFormProps(props);
@@ -289,7 +287,7 @@ function FollowButton(props) {
289
287
  'data-myft-ui': 'follow',
290
288
  'data-concept-id': conceptId
291
289
  }, formProps),
292
- __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_1__csrf_token_input__["a" /* default */], { cacheablePersonalisedUrl: props.cacheablePersonalisedUrl, csrfToken: props.csrfToken }),
290
+ __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_1__csrf_token_input__["a" /* default */], { cacheablePersonalisedUrl: cacheablePersonalisedUrl, csrfToken: csrfToken }),
293
291
  __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', {
294
292
  className: 'n-myft-ui__announcement o-normalise-visually-hidden',
295
293
  'aria-live': 'assertive',
@@ -415,12 +413,15 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
415
413
  /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__collections_collections__ = __webpack_require__(8);
416
414
  /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__save_for_later_save_for_later__ = __webpack_require__(9);
417
415
  /* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__pin_button_pin_button__ = __webpack_require__(10);
416
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__instant_alert_instant_alert__ = __webpack_require__(11);
418
417
  /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "CsrfToken", function() { return __WEBPACK_IMPORTED_MODULE_0__csrf_token_input__["a"]; });
419
418
  /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "FollowButton", function() { return __WEBPACK_IMPORTED_MODULE_1__follow_button_follow_button__["a"]; });
420
419
  /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "ConceptList", function() { return __WEBPACK_IMPORTED_MODULE_2__concept_list_concept_list__["a"]; });
421
420
  /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "Collections", function() { return __WEBPACK_IMPORTED_MODULE_3__collections_collections__["a"]; });
422
421
  /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "SaveForLater", function() { return __WEBPACK_IMPORTED_MODULE_4__save_for_later_save_for_later__["a"]; });
423
422
  /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "PinButton", function() { return __WEBPACK_IMPORTED_MODULE_5__pin_button_pin_button__["a"]; });
423
+ /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "InstantAlert", function() { return __WEBPACK_IMPORTED_MODULE_6__instant_alert_instant_alert__["a"]; });
424
+
424
425
 
425
426
 
426
427
 
@@ -2814,16 +2815,16 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
2814
2815
 
2815
2816
 
2816
2817
 
2817
- function ConceptList({ flags, concepts, contentType, conceptListTitle, trackable }) {
2818
+ function ConceptList({ flags, concepts, contentType, conceptListTitle, trackable, csrfToken, cacheablePersonalisedUrl }) {
2818
2819
 
2819
2820
  const {
2820
2821
  myFtApi,
2821
2822
  myFtApiWrite
2822
2823
  } = flags;
2823
2824
 
2824
- const generateTrackableProps = (primary, seconday) => {
2825
+ const generateTrackableProps = (primary, secondary) => {
2825
2826
  return {
2826
- 'data-trackable': primary ? primary : seconday
2827
+ 'data-trackable': primary ? primary : secondary
2827
2828
  };
2828
2829
  };
2829
2830
 
@@ -2870,7 +2871,7 @@ function ConceptList({ flags, concepts, contentType, conceptListTitle, trackable
2870
2871
  className: 'concept-list__concept' }),
2871
2872
  prefLabel
2872
2873
  ),
2873
- __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_1__follow_button_follow_button__["a" /* default */], { conceptId: id, name: prefLabel, flags: flags })
2874
+ __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_1__follow_button_follow_button__["a" /* default */], { csrfToken: csrfToken, cacheablePersonalisedUrl: cacheablePersonalisedUrl, conceptId: id, name: prefLabel, flags: flags })
2874
2875
  );
2875
2876
  })
2876
2877
  )
@@ -2894,7 +2895,7 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
2894
2895
 
2895
2896
 
2896
2897
 
2897
- function Collections({ title, liteStyle, flags, collectionName, trackable, concepts = [] }) {
2898
+ function Collections({ title, liteStyle, flags, collectionName, trackable, concepts = [], csrfToken, cacheablePersonalisedUrl }) {
2898
2899
  const getLiteStyleModifier = () => liteStyle ? 'lite' : 'regular';
2899
2900
  let formProps = {
2900
2901
  method: 'POST',
@@ -2927,7 +2928,7 @@ function Collections({ title, liteStyle, flags, collectionName, trackable, conce
2927
2928
  concepts && concepts.map((concept, index) => __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
2928
2929
  'li',
2929
2930
  { className: 'collection__concept', key: index },
2930
- __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_2__follow_button_follow_button__["a" /* default */], { variant: liteStyle ? 'primary' : 'inverse', buttonText: concept.name, flags: flags, collectionName: collectionName })
2931
+ __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_2__follow_button_follow_button__["a" /* default */], { cacheablePersonalisedUrl: cacheablePersonalisedUrl, csrfToken: csrfToken, variant: liteStyle ? 'primary' : 'inverse', buttonText: concept.name, flags: flags, collectionName: collectionName })
2931
2932
  ))
2932
2933
  ),
2933
2934
  __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
@@ -2942,7 +2943,7 @@ function Collections({ title, liteStyle, flags, collectionName, trackable, conce
2942
2943
  name: 'directType',
2943
2944
  value: concepts.map(concept => concept.directType).join(',')
2944
2945
  }),
2945
- __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_1__csrf_token_input__["a" /* default */], null),
2946
+ __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_1__csrf_token_input__["a" /* default */], { csrfToken: csrfToken, cacheablePersonalisedUrl: cacheablePersonalisedUrl }),
2946
2947
  __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('input', {
2947
2948
  type: 'hidden',
2948
2949
  name: 'name',
@@ -2981,6 +2982,31 @@ function Collections({ title, liteStyle, flags, collectionName, trackable, conce
2981
2982
 
2982
2983
  const ButtonContent = ({ saveButtonWithIcon, buttonText, isSaved, appIsStreamPage }) => {
2983
2984
 
2985
+ const DefaultButtonText = () => {
2986
+ if (appIsStreamPage !== true) {
2987
+ return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
2988
+ __WEBPACK_IMPORTED_MODULE_0_react__["Fragment"],
2989
+ null,
2990
+ __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
2991
+ 'span',
2992
+ { className: 'save-button-longer-copy', 'data-variant-label': true },
2993
+ isSaved ? 'Saved ' : 'Save '
2994
+ ),
2995
+ __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
2996
+ 'span',
2997
+ { className: 'n-myft-ui__button--viewport-large', 'aria-hidden': 'true' },
2998
+ 'to myFT'
2999
+ )
3000
+ );
3001
+ }
3002
+
3003
+ return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
3004
+ 'span',
3005
+ null,
3006
+ isSaved ? 'Saved' : 'Save'
3007
+ );
3008
+ };
3009
+
2984
3010
  return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
2985
3011
  __WEBPACK_IMPORTED_MODULE_0_react__["Fragment"],
2986
3012
  null,
@@ -2994,33 +3020,11 @@ const ButtonContent = ({ saveButtonWithIcon, buttonText, isSaved, appIsStreamPag
2994
3020
  __WEBPACK_IMPORTED_MODULE_0_react__["Fragment"],
2995
3021
  null,
2996
3022
  buttonText && buttonText,
2997
- !buttonText && __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
2998
- __WEBPACK_IMPORTED_MODULE_0_react__["Fragment"],
2999
- null,
3000
- appIsStreamPage !== true && __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
3001
- __WEBPACK_IMPORTED_MODULE_0_react__["Fragment"],
3002
- null,
3003
- __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
3004
- 'span',
3005
- { className: 'save-button-longer-copy', 'data-variant-label': true },
3006
- isSaved ? 'Saved ' : 'Save '
3007
- ),
3008
- __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
3009
- 'span',
3010
- { className: 'n-myft-ui__button--viewport-large', 'aria-hidden': 'true' },
3011
- 'to myFT'
3012
- )
3013
- ),
3014
- appIsStreamPage === true && __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
3015
- 'span',
3016
- null,
3017
- isSaved ? 'Saved' : 'Save'
3018
- )
3019
- )
3023
+ !buttonText && __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(DefaultButtonText, null)
3020
3024
  )
3021
3025
  );
3022
3026
  };
3023
- function SaveForLater({ flags, contentId, title, variant, trackableId, isSaved, appIsStreamPage, alternateText, saveButtonWithIcon, buttonText }) {
3027
+ function SaveForLater({ flags, contentId, title, variant, trackableId, isSaved, appIsStreamPage, alternateText, saveButtonWithIcon, buttonText, csrfToken, cacheablePersonalisedUrl }) {
3024
3028
 
3025
3029
  const { myFtApiWrite } = flags;
3026
3030
 
@@ -3034,7 +3038,7 @@ function SaveForLater({ flags, contentId, title, variant, trackableId, isSaved,
3034
3038
  };
3035
3039
 
3036
3040
  if (isSaved) {
3037
- let titleText = `${title ? `${title} is` : ''} Saved to myFT`;
3041
+ let titleText = `${title ? `${title} is` : ''} saved to myFT`;
3038
3042
  props['title'] = title;
3039
3043
  props['aria-label'] = titleText;
3040
3044
  props['data-alternate-label'] = title ? `Save ${title} to myFT for later` : 'Save this article to myFT for later';
@@ -3043,7 +3047,7 @@ function SaveForLater({ flags, contentId, title, variant, trackableId, isSaved,
3043
3047
  let titleText = title ? `Save ${title} to myFT for later` : 'Save this article to myFT for later';
3044
3048
  props['title'] = titleText;
3045
3049
  props['aria-label'] = titleText;
3046
- props['data-alternate-label'] = `${title ? `${title} is` : ''} Saved to myFT`;
3050
+ props['data-alternate-label'] = `${title ? `${title} is` : ''} saved to myFT`;
3047
3051
  props['aria-pressed'] = false;
3048
3052
  }
3049
3053
 
@@ -3068,7 +3072,7 @@ function SaveForLater({ flags, contentId, title, variant, trackableId, isSaved,
3068
3072
  'data-myft-ui': 'saved',
3069
3073
  action: `/myft/save/${contentId}`,
3070
3074
  'data-js-action': `/__myft/api/core/saved/content/${contentId}?method=put` },
3071
- __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_1__csrf_token_input__["a" /* default */], null),
3075
+ __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_1__csrf_token_input__["a" /* default */], { csrfToken: csrfToken, cacheablePersonalisedUrl: cacheablePersonalisedUrl }),
3072
3076
  __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', {
3073
3077
  className: 'n-myft-ui__announcement o-normalise-visually-hidden',
3074
3078
  'aria-live': 'assertive',
@@ -3095,42 +3099,129 @@ function SaveForLater({ flags, contentId, title, variant, trackableId, isSaved,
3095
3099
  /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__csrf_token_input__ = __webpack_require__(1);
3096
3100
 
3097
3101
 
3098
- function PinButton({ showPrioritiseButton, id, name, directType, prioritised }) {
3102
+ function PinButton({ showPrioritiseButton, id, name, directType, prioritised, csrfToken, cacheablePersonalisedUrl }) {
3099
3103
 
3100
3104
  const getAction = () => `/__myft/api/core/prioritised/concept/${id}?method=${prioritised ? 'delete' : 'put'}`;
3101
3105
 
3106
+ if (!showPrioritiseButton) {
3107
+ return null;
3108
+ }
3109
+
3102
3110
  return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
3103
3111
  __WEBPACK_IMPORTED_MODULE_0_react__["Fragment"],
3104
3112
  null,
3105
- showPrioritiseButton && __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
3106
- __WEBPACK_IMPORTED_MODULE_0_react__["Fragment"],
3107
- null,
3108
- __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('span', { className: 'myft-pin-divider' }),
3113
+ __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('span', { className: 'myft-pin-divider' }),
3114
+ __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
3115
+ 'div',
3116
+ { className: 'myft-pin-button-wrapper' },
3109
3117
  __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
3110
- 'div',
3111
- { className: 'myft-pin-button-wrapper' },
3112
- __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
3113
- 'form',
3114
- { method: 'post', action: getAction(), 'data-myft-prioritise': true },
3115
- __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_1__csrf_token_input__["a" /* default */], null),
3116
- __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('input', { type: 'hidden', value: name, name: 'name' }),
3117
- __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('input', { type: 'hidden', value: directType || 'http://www.ft.com/ontology/concept/Concept', name: 'directType' }),
3118
- __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', {
3119
- className: 'n-myft-ui__announcement o-normalise-visually-hidden',
3120
- 'aria-live': 'assertive',
3121
- 'data-pressed-text': `${name} pinned in myFT.`,
3122
- 'data-unpressed-text': `Unpinned ${name} from myFT.`
3123
- }),
3124
- __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('button', { id: `myft-pin-button__${id}`,
3125
- className: 'myft-pin-button',
3126
- 'data-prioritise-button': true,
3127
- 'data-trackable': 'prioritised',
3128
- 'data-concept-id': id,
3129
- 'data-prioritised': prioritised ? true : false,
3130
- 'aria-label': `${prioritised ? 'Unpin' : 'Pin'} ${name} ${prioritised ? 'from' : 'in'} myFT`,
3131
- 'aria-pressed': prioritised ? true : false,
3132
- title: `${prioritised ? 'Unpin' : 'Pin'} ${name}` })
3133
- )
3118
+ 'form',
3119
+ { method: 'post', action: getAction(), 'data-myft-prioritise': true },
3120
+ __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_1__csrf_token_input__["a" /* default */], { csrfToken: csrfToken, cacheablePersonalisedUrl: cacheablePersonalisedUrl }),
3121
+ __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('input', { type: 'hidden', value: name, name: 'name' }),
3122
+ __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('input', { type: 'hidden', value: directType || 'http://www.ft.com/ontology/concept/Concept', name: 'directType' }),
3123
+ __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', {
3124
+ className: 'n-myft-ui__announcement o-normalise-visually-hidden',
3125
+ 'aria-live': 'assertive',
3126
+ 'data-pressed-text': `${name} pinned in myFT.`,
3127
+ 'data-unpressed-text': `Unpinned ${name} from myFT.`
3128
+ }),
3129
+ __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('button', { id: `myft-pin-button__${id}`,
3130
+ className: 'myft-pin-button',
3131
+ 'data-prioritise-button': true,
3132
+ 'data-trackable': 'prioritised',
3133
+ 'data-concept-id': id,
3134
+ 'data-prioritised': prioritised ? true : false,
3135
+ 'aria-label': `${prioritised ? 'Unpin' : 'Pin'} ${name} ${prioritised ? 'from' : 'in'} my F T`,
3136
+ 'aria-pressed': prioritised ? true : false,
3137
+ title: `${prioritised ? 'Unpin' : 'Pin'} ${name}` })
3138
+ )
3139
+ )
3140
+ );
3141
+ }
3142
+
3143
+ /***/ }),
3144
+ /* 11 */
3145
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
3146
+
3147
+ "use strict";
3148
+ /* harmony export (immutable) */ __webpack_exports__["a"] = InstantAlert;
3149
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react__ = __webpack_require__(0);
3150
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_react__);
3151
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__csrf_token_input__ = __webpack_require__(1);
3152
+
3153
+
3154
+
3155
+ /**
3156
+ *
3157
+ * @param {Object} props
3158
+ * @param {string} props.name
3159
+ * @param {Object} props.flags
3160
+ * @param {booelan} props.hideButtonText
3161
+ * @param {string} props.conceptId
3162
+ * @param {string} props.name
3163
+ * @param {string} props.extraClasses
3164
+ * @param {boolean} props.directType
3165
+ * @param {string} props.cacheablePersonalisedUrl
3166
+ * @param {string} props.hasInstantAlert
3167
+ * @param {string} props.buttonText
3168
+ * @param {string} props.alternateText
3169
+ * @param {string} props.variant
3170
+ * @param {string} props.size
3171
+ */
3172
+ function InstantAlert(props) {
3173
+
3174
+ const {
3175
+ hasInstantAlert,
3176
+ cacheablePersonalisedUrl,
3177
+ name,
3178
+ alternateText,
3179
+ buttonText,
3180
+ conceptId,
3181
+ variant,
3182
+ size,
3183
+ flags,
3184
+ hideButtonText,
3185
+ directType,
3186
+ extraClasses
3187
+ } = props;
3188
+
3189
+ const generateButtonProps = () => {
3190
+
3191
+ let buttonProps = {
3192
+ 'aria-pressed': `${Boolean(hasInstantAlert) && Boolean(cacheablePersonalisedUrl)}`,
3193
+ 'aria-label': `Get instant alerts for ${name}`,
3194
+ 'data-alternate-label': `Stop instant alerts for ${name}`,
3195
+ 'data-alternate-text': alternateText ? alternateText : buttonText ? buttonText : 'Instant alerts',
3196
+ 'data-concept-id': conceptId, // duplicated here for tracking
3197
+ 'data-trackable': 'instant',
3198
+ title: `Get instant alerts for ${name}`,
3199
+ value: hasInstantAlert ? false : true,
3200
+ type: 'submit',
3201
+ name: '_rel.instant',
3202
+ className: `n-myft-ui__button n-myft-ui__button--instant n-myft-ui__button--instant-light${variant ? ` n-myft-ui__button--${variant}` : ''}${size ? ` n-myft-ui__button--${size}` : ''}`
3203
+ };
3204
+ return buttonProps;
3205
+ };
3206
+
3207
+ return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
3208
+ __WEBPACK_IMPORTED_MODULE_0_react__["Fragment"],
3209
+ null,
3210
+ flags.myFtApiWrite && __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
3211
+ 'form',
3212
+ { className: `n-myft-ui n-myft-ui--instant${hideButtonText ? ' n-myft-ui--instant--hide-text' : ''}${extraClasses ? ` ${extraClasses}` : ''}`,
3213
+ method: 'GET',
3214
+ 'data-myft-ui': 'instant',
3215
+ 'data-concept-id': conceptId,
3216
+ action: `/myft/add/${conceptId}?instant=true`,
3217
+ 'data-js-action': `/__myft/api/core/followed/concept/${conceptId}?method=put` },
3218
+ __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_1__csrf_token_input__["a" /* default */], null),
3219
+ __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('input', { type: 'hidden', value: name, name: 'name' }),
3220
+ __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('input', { type: 'hidden', value: directType || 'http://www.ft.com/ontology/concept/Concept', name: 'directType' }),
3221
+ __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
3222
+ 'button',
3223
+ generateButtonProps(),
3224
+ buttonText ? buttonText : 'Instant alerts'
3134
3225
  )
3135
3226
  )
3136
3227
  );
@@ -0,0 +1,16 @@
1
+ ### Handlebars to JSX migration notes
2
+
3
+ This document serves as a troubleshooting guide for `handlebars` components that have been migrated to `jsx`. Also, notes can be added to this document for anything related to the migration.
4
+
5
+ A common cause of issues/bugs with migrated components is missing HTML attributes. The business logic related to these components heavily depend on these attributes and their values. If an action related to any of these migrated components fails, compare the jsx version and the handlebars version to see if an attribute is getting the wrong value or is missing.
6
+
7
+ Another cause of issues will be missing flags. Ensure consuming applications pass the required flags to these components.
8
+
9
+ Currently we have migrated the following `handlebars` partials to `jsx`:
10
+ - components/collections/collections.jsx [handlebars fount here](https://github.com/Financial-Times/n-myft-ui/blob/dfbf06d10f78756871cfe8d2aeb863ce4bcca1e1/components/collections/collections.html)
11
+ - components/concept-list/concept-list.jsx [handlebars found here](https://github.com/Financial-Times/n-myft-ui/blob/dfbf06d10f78756871cfe8d2aeb863ce4bcca1e1/components/concept-list/concept-list.html)
12
+ - components/follow-button/follow-button.jsx [handlebars found here](https://github.com/Financial-Times/n-myft-ui/blob/bf2145fcfd211001dfab6a3a271dd72808d062bd/components/follow-button/follow-button.html)
13
+ - components/pin-button/pin-button.jsx [handlebars found here](https://github.com/Financial-Times/n-myft-ui/blob/dfbf06d10f78756871cfe8d2aeb863ce4bcca1e1/components/pin-button/pin-button.html)
14
+ - components/save-for-later/save-for-later.jsx [handlebars found here](https://github.com/Financial-Times/n-myft-ui/blob/11d483364bb0f002c3a0b45bc024c83bb055268e/components/save-for-later/save-for-later.jsx)
15
+ - components/instant-alert/instant-alert.jsx [handlebars found here](https://github.com/Financial-Times/n-myft-ui/blob/dfbf06d10f78756871cfe8d2aeb863ce4bcca1e1/components/instant-alert/instant-alert.html)
16
+ - components/csrf-token/input.jsx [handlebars found here](https://github.com/Financial-Times/n-myft-ui/blob/bf2145fcfd211001dfab6a3a271dd72808d062bd/components/csrf-token/input.html)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@financial-times/n-myft-ui",
3
- "version": "25.0.0-beta.3",
3
+ "version": "26.0.0",
4
4
  "description": "Client side component for interaction with myft",
5
5
  "main": "dist/bundles/bundle.js",
6
6
  "module": "dist/bundles/bundle.js",
@@ -8,6 +8,7 @@
8
8
  "test": "echo \"Error: no test specified\" && exit 1",
9
9
  "commit": "commit-wizard",
10
10
  "prepare": "npx snyk protect || npx snyk protect -d || true",
11
+ "preinstall": "[ \"$INIT_CWD\" != \"$PWD\" ] || npm_config_yes=true npx check-engine",
11
12
  "build-package": "webpack"
12
13
  },
13
14
  "repository": {
@@ -1,47 +0,0 @@
1
- {{#if @root.flags.myFtApiWrite}}
2
- <form class="n-myft-ui n-myft-ui--instant{{#if hideButtonText}} n-myft-ui--instant--hide-text{{/if}} {{extraClasses}}"
3
- method="GET"
4
- data-myft-ui="instant"
5
- data-concept-id="{{conceptId}}"
6
- action="/myft/add/{{conceptId}}?instant=true"
7
- data-js-action="/__myft/api/core/followed/concept/{{conceptId}}?method=put">
8
- {{{renderReactComponent localPath="components/csrf-token/input"}}}
9
- <input type="hidden" value="{{name}}" name="name">
10
- {{#if directType}}
11
- <input type="hidden" value="{{directType}}" name="directType">
12
- {{else}}
13
- <input type="hidden" value="http://www.ft.com/ontology/concept/Concept" name="directType">
14
- {{/if}}
15
- <button
16
- aria-label="Get instant alerts for {{name}}"
17
- {{#ifAll hasInstantAlert @root.cacheablePersonalisedUrl}}
18
- aria-pressed="true"
19
- {{else}}
20
- aria-pressed="false"
21
- {{/ifAll}}
22
- class="n-myft-ui__button
23
- {{#variant}} n-myft-ui__button--{{this}}{{/variant}}
24
- {{#size}} n-myft-ui__button--{{this}}{{/size}}
25
- n-myft-ui__button--instant
26
- n-myft-ui__button--instant-light"
27
- data-alternate-label="Stop instant alerts for {{name}}"
28
- {{#if alternateText}}
29
- data-alternate-text="{{alternateText}}"
30
- {{else}}
31
- {{#if buttonText}}
32
- data-alternate-text="{{buttonText}}"
33
- {{else}}
34
- data-alternate-text="Instant alerts"
35
- {{/if}}
36
- {{/if}}
37
- data-concept-id="{{conceptId}}" {{! duplicated here for tracking}}
38
- data-trackable="instant"
39
- title="Get instant alerts for {{name}}"
40
- name="_rel.instant"
41
- value="{{#if hasInstantAlert}}false{{else}}true{{/if}}"
42
- type="submit"
43
- >{{#if buttonText}}{{buttonText}}{{else}}Instant alerts{{/if}}</button>
44
- </form>
45
- {{else}}
46
- <!-- Instant alert button hidden due to myFtApiWrite being off -->
47
- {{/if}}