@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.
- package/README.md +2 -3
- package/build-state/npm-shrinkwrap.json +20926 -20379
- package/components/collections/collections.jsx +3 -3
- package/components/concept-list/concept-list.jsx +10 -4
- package/components/csrf-token/input.jsx +1 -7
- package/components/csrf-token/{__tests__/input.test.js → input.test.js} +2 -2
- package/components/follow-button/follow-button.jsx +3 -1
- package/components/follow-button/{__tests__/follow-button.test.js → follow-button.test.js} +1 -1
- package/components/index.js +3 -1
- package/components/instant-alert/instant-alert.jsx +73 -0
- package/components/instant-alert/instant-alert.test.js +86 -0
- package/components/pin-button/pin-button.jsx +30 -30
- package/components/pin-button/pin-button.test.js +2 -2
- package/components/save-for-later/save-for-later.jsx +19 -21
- package/demos/templates/demo.html +1 -2
- package/dist/bundles/bundle.js +165 -74
- package/jsx-migration.md +16 -0
- package/package.json +2 -1
- package/components/instant-alert/instant-alert.html +0 -47
package/dist/bundles/bundle.js
CHANGED
@@ -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(
|
117
|
-
|
118
|
-
|
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:
|
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,
|
2825
|
+
const generateTrackableProps = (primary, secondary) => {
|
2825
2826
|
return {
|
2826
|
-
'data-trackable': primary ? primary :
|
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 */],
|
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` : ''}
|
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` : ''}
|
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 */],
|
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
|
-
|
3106
|
-
|
3107
|
-
|
3108
|
-
|
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
|
-
'
|
3111
|
-
{
|
3112
|
-
__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
|
3113
|
-
|
3114
|
-
|
3115
|
-
|
3116
|
-
|
3117
|
-
|
3118
|
-
|
3119
|
-
|
3120
|
-
|
3121
|
-
|
3122
|
-
|
3123
|
-
|
3124
|
-
|
3125
|
-
|
3126
|
-
|
3127
|
-
|
3128
|
-
|
3129
|
-
|
3130
|
-
|
3131
|
-
|
3132
|
-
|
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
|
);
|
package/jsx-migration.md
ADDED
@@ -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": "
|
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}}
|