{promotionalContent}
5 | )
6 |
7 | export default PromotionalContent
8 |
--------------------------------------------------------------------------------
/components/x-gift-article/src/Footer.jsx:
--------------------------------------------------------------------------------
1 | import { h } from '@financial-times/x-engine'
2 | import { FooterMessage } from './FooterMessage'
3 |
4 | export const Footer = (props) => {
5 | return (
6 |
9 | )
10 | }
11 |
--------------------------------------------------------------------------------
/components/x-teaser/storybook/video.js:
--------------------------------------------------------------------------------
1 | const { presets } = require('../')
2 |
3 | exports.args = Object.assign(require('../__fixtures__/video.json'), presets.HeroVideo)
4 |
5 | // This reference is only required for hot module loading in development
6 | //
5 | {promotedPrefixText} by
6 | {` ${promotedSuffixText} `}
7 |
8 | )
9 |
--------------------------------------------------------------------------------
/packages/x-rollup/src/postcss-config.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 |
3 | module.exports = (style) => {
4 | return {
5 | extract: style,
6 | modules: true,
7 | use: [
8 | [
9 | 'sass',
10 | {
11 | includePaths: [path.resolve(process.cwd(), 'node_modules')]
12 | }
13 | ],
14 | 'stylus',
15 | 'less'
16 | ]
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/components/x-gift-article/src/lib/constants.js:
--------------------------------------------------------------------------------
1 | export const ShareType = {
2 | gift: 'gift',
3 | enterprise: 'enterprise',
4 | nonGift: 'nonGift'
5 | }
6 |
7 | export const UrlType = {
8 | dummy: 'example-gift-link',
9 | gift: 'gift-link',
10 | nonGift: 'non-gift-link'
11 | }
12 |
13 | export const HIGHLIGHTS_BASE_URL = 'https://pro-user-highlights.ft.com/v1'
14 |
--------------------------------------------------------------------------------
/jest.setup.js:
--------------------------------------------------------------------------------
1 | import util from 'util'
2 |
3 | // Polyfill for TextEncoder so it is available to enzyme.render(
6 | Exclusive
7 | content
8 |
9 | )
10 | }
11 |
--------------------------------------------------------------------------------
/components/x-teaser/storybook/opinion.js:
--------------------------------------------------------------------------------
1 | const { presets } = require('../')
2 |
3 | exports.args = Object.assign(require('../__fixtures__/opinion.json'), presets.SmallHeavy, {
4 | showHeadshot: true
5 | })
6 |
7 | // This reference is only required for hot module loading in development
8 | //
13 |
14 |
15 | )
16 | }
17 | Styling.args = { danger: false, large: false }
18 |
--------------------------------------------------------------------------------
/packages/x-engine/src/client.js:
--------------------------------------------------------------------------------
1 | /* eslint no-undef: "off", no-unused-vars: "off" */
2 | // This module is just a placeholder to be re-written at build time.
3 | const runtime = require(X_ENGINE_RUNTIME_MODULE)
4 | const render = require(X_ENGINE_RENDER_MODULE)
5 |
6 | module.exports.h = X_ENGINE_FACTORY
7 | module.exports.render = X_ENGINE_RENDER
8 | module.exports.Component = X_ENGINE_COMPONENT
9 | module.exports.Fragment = X_ENGINE_FRAGMENT
10 |
--------------------------------------------------------------------------------
/components/x-interaction/src/HydrationData.jsx:
--------------------------------------------------------------------------------
1 | import { h } from '@financial-times/x-engine'
2 |
3 | export const HydrationData = ({ serialiser }) => {
4 | if (serialiser) {
5 | const data = serialiser.flushHydrationData()
6 |
7 | return (
8 |
13 | )
14 | }
15 |
16 | return null
17 | }
18 |
--------------------------------------------------------------------------------
/components/x-privacy-manager/storybook/stories/legislation-ccpa.js:
--------------------------------------------------------------------------------
1 | import { StoryContainer } from '../story-container'
2 | import { defaultArgs, defaultArgTypes, getFetchMock } from '../data'
3 |
4 | export const LegislationCCPA = (args) => {
5 | getFetchMock(200)
6 | return StoryContainer(args)
7 | }
8 |
9 | LegislationCCPA.storyName = 'Legislation: CCPA'
10 | LegislationCCPA.args = defaultArgs
11 | LegislationCCPA.argTypes = defaultArgTypes
12 |
--------------------------------------------------------------------------------
/components/x-teaser/src/TimeStamp.jsx:
--------------------------------------------------------------------------------
1 | import { h } from '@financial-times/x-engine'
2 | import dateformat from 'dateformat'
3 |
4 | export default ({ publishedDate }) => (
5 |
6 |
11 |
12 | )
13 |
--------------------------------------------------------------------------------
/components/x-teaser/src/concerns/constants.js:
--------------------------------------------------------------------------------
1 | export const ImageSizes = {
2 | Headshot: 75,
3 | XS: 180,
4 | Small: 240,
5 | Medium: 340,
6 | Large: 420,
7 | XL: 640,
8 | XXL: 1180 // max width of FT.com page
9 | }
10 |
11 | export const Layouts = {
12 | Small: 'small',
13 | Large: 'large',
14 | Hero: 'hero',
15 | TopStory: 'top-story'
16 | }
17 |
18 | export const Newish = 1000 * 60 * 60
19 |
20 | export const Recent = 1000 * 60 * 60 * 4
21 |
--------------------------------------------------------------------------------
/.github/issue_template.md:
--------------------------------------------------------------------------------
1 | If you are reporting a bug please state the expected behaviour, actual behaviour, and provide steps to reproduce.
2 |
3 | Otherwise, if you are submitting a feature request for the first time please familiarise yourself with the contribution guide before submitting.
4 |
5 | **TL;DR**
6 |
7 | - Check if the feature has already been requested
8 | - Phrase as user needs
9 | - Consider big and small screens
10 | - Does it have proven value?
11 |
--------------------------------------------------------------------------------
/components/x-privacy-manager/storybook/stories/consent-blocked.js:
--------------------------------------------------------------------------------
1 | import { StoryContainer } from '../story-container'
2 | import { defaultArgs, defaultArgTypes, getFetchMock } from '../data'
3 |
4 | export const ConsentBlocked = (args) => {
5 | getFetchMock(200)
6 | return StoryContainer(args)
7 | }
8 |
9 | ConsentBlocked.storyName = 'Consent: blocked'
10 | ConsentBlocked.args = {
11 | ...defaultArgs,
12 | consent: false
13 | }
14 | ConsentBlocked.argTypes = defaultArgTypes
15 |
--------------------------------------------------------------------------------
/components/x-teaser/src/Link.jsx:
--------------------------------------------------------------------------------
1 | import { h } from '@financial-times/x-engine'
2 |
3 | const BaseLink = ({ url, attrs = {}, children }) => {
4 | if (url) {
5 | return (
6 |
7 | {children}
8 |
9 | )
10 | } else {
11 | return {children}
12 | }
13 | }
14 |
15 | export default ({ customElements = {}, ...props }) => {
16 | const Link = customElements.Link || BaseLink
17 | return
18 | }
19 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [**{.js,.jsx,.html,.css,.scss,Makefile}]
4 | charset = utf-8
5 | end_of_line = lf
6 | insert_final_newline = true
7 | trim_trailing_whitespace = true
8 | indent_style = tab
9 |
10 | [*.{json,yml}]
11 | charset = utf-8
12 | end_of_line = lf
13 | insert_final_newline = true
14 | trim_trailing_whitespace = true
15 | indent_size = 2
16 | indent_style = space
17 |
18 | [*.md]
19 | indent_size = unset
20 | indent_style = unset
21 | trim_trailing_whitespace = false
22 |
--------------------------------------------------------------------------------
/components/x-privacy-manager/storybook/stories/save-failed.js:
--------------------------------------------------------------------------------
1 | import { StoryContainer } from '../story-container'
2 | import { defaultArgs, defaultArgTypes, getFetchMock } from '../data'
3 |
4 | /**
5 | * @param {XPrivacyManager.PrivacyManagerProps} args
6 | */
7 | export const SaveFailed = (args) => {
8 | getFetchMock(500)
9 | return StoryContainer(args)
10 | }
11 |
12 | SaveFailed.storyName = 'Save failed'
13 | SaveFailed.args = defaultArgs
14 | SaveFailed.argTypes = defaultArgTypes
15 |
--------------------------------------------------------------------------------
/packages/x-rollup/src/babel-config.js:
--------------------------------------------------------------------------------
1 | const baseBabelConfig = require('@financial-times/x-babel-config')
2 |
3 | module.exports = (...args) => {
4 | const base = baseBabelConfig(...args)
5 |
6 | base.plugins.push(
7 | // Instruct Babel to not include any internal helper declarations in the output
8 | require.resolve('@babel/plugin-external-helpers')
9 | )
10 |
11 | // rollup-specific option not included in base config
12 | base.include = '**/*.{js,jsx}'
13 |
14 | return base
15 | }
16 |
--------------------------------------------------------------------------------
/.storybook/preview-head.html:
--------------------------------------------------------------------------------
1 |
22 |
23 |
26 |
--------------------------------------------------------------------------------
/components/x-increment/storybook/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Increment } from '../src/Increment'
3 |
4 | export default {
5 | title: 'x-increment'
6 | }
7 |
8 | export const Sync = () => {
9 | const data = {
10 | count: 1,
11 | id: 'base-increment-static-id'
12 | }
13 |
14 | return
10 |
16 | )
17 | }
18 |
--------------------------------------------------------------------------------
/components/x-privacy-manager/storybook/index.jsx:
--------------------------------------------------------------------------------
1 | import '../src/privacy-manager.scss'
2 |
3 | export { LegislationCCPA } from './stories/legislation-ccpa'
4 | export { LegislationGDPR } from './stories/legislation-gdpr'
5 |
6 | export { ConsentIndeterminate } from './stories/consent-indeterminate'
7 | export { ConsentAccepted } from './stories/consent-accepted'
8 | export { ConsentBlocked } from './stories/consent-blocked'
9 |
10 | export { SaveFailed } from './stories/save-failed'
11 |
12 | export default {
13 | title: 'x-privacy-manager'
14 | }
15 |
--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | testURL: 'https://local.ft.com/',
3 | testMatch: ['**/__tests__/**/*.test.js?(x)'],
4 | testPathIgnorePatterns: ['/node_modules/'],
5 | transform: {
6 | '^.+\\.jsx?$': './packages/x-babel-config/jest'
7 | },
8 | moduleNameMapper: {
9 | '^[./a-zA-Z0-9$_-]+\\.scss$': '
11 |
15 |
12 |
14 | {children}
13 |{render(customSlot)}
: null
19 |
--------------------------------------------------------------------------------
/components/x-gift-article/src/RegisteredUserAlert.jsx:
--------------------------------------------------------------------------------
1 | import { h } from '@financial-times/x-engine'
2 |
3 | export const RegisteredUserAlert = ({ children }) => {
4 | return (
5 |
10 |
16 | )
17 | }
18 |
--------------------------------------------------------------------------------
/packages/x-engine/src/concerns/deep-get.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Deep Get
3 | * @param {{ [key: string]: any }} tree
4 | * @param {string} path
5 | * @param {any} defaultValue
6 | * @returns {any | null}
7 | */
8 | module.exports = (tree, path, defaultValue) => {
9 | const route = path.split('.')
10 |
11 | while (tree !== null && route.length) {
12 | const leaf = route.shift()
13 |
14 | if (leaf !== undefined && tree.hasOwnProperty(leaf)) {
15 | tree = tree[leaf]
16 | } else {
17 | tree = null
18 | }
19 | }
20 |
21 | return tree === null ? defaultValue : tree
22 | }
23 |
--------------------------------------------------------------------------------
/components/x-privacy-manager/storybook/stories/consent-indeterminate.js:
--------------------------------------------------------------------------------
1 | import { StoryContainer } from '../story-container'
2 | import { defaultArgs, defaultArgTypes, getFetchMock } from '../data'
3 |
4 | /**
5 | * @param {XPrivacyManager.PrivacyManagerProps} args
6 | */
7 | export const ConsentIndeterminate = (args) => {
8 | getFetchMock(200)
9 | return StoryContainer(args)
10 | }
11 |
12 | ConsentIndeterminate.storyName = 'Consent: indeterminate'
13 | ConsentIndeterminate.args = {
14 | ...defaultArgs,
15 | consent: undefined
16 | }
17 | ConsentIndeterminate.argTypes = defaultArgTypes
18 |
--------------------------------------------------------------------------------
/components/x-teaser/src/concerns/image-service.js:
--------------------------------------------------------------------------------
1 | const BASE_URL = 'https://www.ft.com/__origami/service/image/v2/images/raw'
2 | const OPTIONS = { source: 'next', fit: 'scale-down', dpr: 2 }
3 |
4 | /**
5 | * Image Service
6 | * @param {String} url
7 | * @param {Number} width
8 | * @param {String} options
9 | */
10 | export default function imageService(url, width, options) {
11 | const imageSrc = new URL(`${BASE_URL}/${encodeURIComponent(url)}`)
12 | imageSrc.search = new URLSearchParams({ ...OPTIONS, ...options })
13 | imageSrc.searchParams.set('width', width)
14 | return imageSrc.href
15 | }
16 |
--------------------------------------------------------------------------------
/e2e/common.js:
--------------------------------------------------------------------------------
1 | const { withActions, registerComponent } = require('@financial-times/x-interaction')
2 | const { h } = require('@financial-times/x-engine')
3 |
4 | export const greetingActions = withActions({
5 | actionOne() {
6 | return { greeting: 'world' }
7 | }
8 | })
9 |
10 | export const GreetingComponent = greetingActions(({ greeting, actions }) => {
11 | return (
12 |
11 |
15 |
12 |
14 | {children}
13 |
13 | hello {greeting}
14 |
17 |
18 | )
19 | })
20 |
21 | registerComponent(GreetingComponent, 'GreetingComponent')
22 |
--------------------------------------------------------------------------------
/components/x-teaser/src/PremiumLabel.jsx:
--------------------------------------------------------------------------------
1 | import { h } from '@financial-times/x-engine'
2 |
3 | export default function PremiumLabel() {
4 | return (
5 | // WARNING: Do not use the x-teaser__premium-label class to override styling.
6 | // The styling should be in o-teaser, not x-teaser.
7 | // Use o-teaser__labels or o-teaser__labels--premium instead of x-teaser__premium-label.
8 |
9 | Premium
10 | content
11 |
12 | )
13 | }
14 |
--------------------------------------------------------------------------------
/components/x-teaser/src/RelatedLinks.jsx:
--------------------------------------------------------------------------------
1 | import { h } from '@financial-times/x-engine'
2 |
3 | const renderLink = ({ id, type, title, url, relativeUrl }, i) => {
4 | const displayUrl = relativeUrl || url
5 | return (
6 | - {relatedLinks.map(renderLink)}
5 |
18 | )
19 |
--------------------------------------------------------------------------------
/components/x-privacy-manager/storybook/story-container.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import BuildService from '../../../.storybook/build-service'
3 | import { PrivacyManager } from '../src/privacy-manager'
4 |
5 | const dependencies = {
6 | 'o-fonts': '^5.3.0'
7 | }
8 |
9 | /**
10 | * @param {import("../typings/x-privacy-manager").PrivacyManagerProps} args
11 | */
12 | export function StoryContainer(args) {
13 | return (
14 | 6 | No topics matching {searchTerm} 7 |
8 | 9 |Suggestions:
10 | 11 |-
12 |
- Make sure that all words are spelled correctly. 13 |
- Try different keywords. 14 |
- Try more general keywords. 15 |
- Try fewer keywords. 16 |
15 | {dependencies &&
20 | )
21 | }
22 |
--------------------------------------------------------------------------------
/components/x-teaser/__fixtures__/promoted.json:
--------------------------------------------------------------------------------
1 | {
2 | "type": "paid-post",
3 | "id": "",
4 | "url": "#",
5 | "title": "Why eSports companies are on a winning streak",
6 | "standfirst": "ESports is big business and about to get bigger: global revenues could hit $1.5bn by 2020",
7 | "promotedPrefixText": "Paid post",
8 | "promotedSuffixText": "UBS",
9 | "image": {
10 | "url": "https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKCrm_3yahABGAEyCMx3RoLss603",
11 | "width": 700,
12 | "height": 394
13 | },
14 | "status": "",
15 | "headshotTint": "",
16 | "accessLevel": "free",
17 | "theme": "",
18 | "parentTheme": "",
19 | "modifiers": ""
20 | }
21 |
--------------------------------------------------------------------------------
/components/x-gift-article/src/lib/highlightsHelpers.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Checks if the user can share with non-subscriber users
3 | * @param {giftCredits: number, enterpriseHasCredits: boolean } param0
4 | * @returns {boolean}
5 | */
6 | export const canShareWithNonSubscribers = ({ giftCredits, enterpriseHasCredits }) =>
7 | giftCredits > 0 || enterpriseHasCredits
8 |
9 | export const isNonSubscriberOption = ({ showNonSubscriberOptions, showAdvancedSharingOptions }) =>
10 | showNonSubscriberOptions || showAdvancedSharingOptions
11 |
12 | export const trimHighlights = (text, maxWordsCount = 30) =>
13 | text.split(' ').length > maxWordsCount ? `${text.split(' ').slice(0, maxWordsCount).join(' ')} ...` : text
14 |
--------------------------------------------------------------------------------
/components/x-gift-article/src/FreeArticleAlert.jsx:
--------------------------------------------------------------------------------
1 | import { h } from '@financial-times/x-engine'
2 |
3 | export const FreeArticleAlert = () => {
4 | return (
5 |
17 |
19 |
10 |
20 | )
21 | }
22 |
--------------------------------------------------------------------------------
/components/x-topic-search/src/lib/get-suggestions.js:
--------------------------------------------------------------------------------
1 | const addQueryParamToUrl = (name, value, url, append = true) => {
2 | const queryParam = `${name}=${value}`;
3 |
4 | return append === true ? `${url}&${queryParam}` : `${url}?${queryParam}`;
5 | };
6 |
7 | export default (searchTerm, maxSuggestions, apiUrl) => {
8 | const dataSrc = addQueryParamToUrl('count', maxSuggestions, apiUrl, false);
9 | const url = addQueryParamToUrl('partial', searchTerm.replace(' ', '+'), dataSrc);
10 |
11 | return fetch(url)
12 | .then(response => {
13 | if (!response.ok) {
14 | throw new Error(response.statusText);
15 | }
16 |
17 | return response.json();
18 | })
19 | .then(suggestions => ({ suggestions }));
20 | };
21 |
--------------------------------------------------------------------------------
/components/x-interaction/src/InteractionSSR.jsx:
--------------------------------------------------------------------------------
1 | import { h } from '@financial-times/x-engine'
2 | import { getComponentName } from './concerns/register-component'
3 | import shortId from '@quarterto/short-id'
4 |
5 | import { InteractionRender } from './InteractionRender'
6 |
7 | export const InteractionSSR = ({
8 | initialState,
9 | Component,
10 | id = `${getComponentName(Component)}-${shortId()}`,
11 | actions,
12 | serialiser
13 | }) => {
14 | if (serialiser) {
15 | serialiser.addData({
16 | id,
17 | Component,
18 | props: initialState
19 | })
20 | }
21 |
22 | return (
23 |
11 |
19 |
12 |
18 |
13 | This is one of our free articles
14 |
15 | Even non-subscribers can read it, without using up your sharing credits.
16 |
24 |
26 | )
27 | }
28 |
--------------------------------------------------------------------------------
/components/x-article-save-button/storybook/index.jsx:
--------------------------------------------------------------------------------
1 | import { ArticleSaveButton } from '../src/ArticleSaveButton'
2 | import React from 'react'
3 | import BuildService from '../../../.storybook/build-service'
4 |
5 | import '../src/ArticleSaveButton.scss'
6 |
7 | export default {
8 | title: 'x-article-save-button'
9 | }
10 |
11 | export const SaveButton = (args) => (
12 |
13 |
16 | )
17 |
18 | SaveButton.args = {
19 | contentId: '0000-0000-0000-0000',
20 | contentTitle: 'UK crime agency steps up assault on Russian dirty money',
21 | csrfToken: 'dummy-token',
22 | saved: false,
23 | trackableId: 'trackable-id'
24 | }
25 |
--------------------------------------------------------------------------------
/components/x-gift-article/src/CopyConfirmation.jsx:
--------------------------------------------------------------------------------
1 | import { h } from '@financial-times/x-engine'
2 |
3 | export default ({ hideCopyConfirmation }) => (
4 |
8 |
23 | )
24 |
--------------------------------------------------------------------------------
/components/x-teaser/src/Headshot.jsx:
--------------------------------------------------------------------------------
1 | import { h } from '@financial-times/x-engine'
2 | import { ImageSizes } from './concerns/constants'
3 | import imageService from './concerns/image-service'
4 |
5 | // these colours are tweaked from o-colors palette colours to make headshots look less washed out
6 | const DEFAULT_TINT = '054593,d6d5d3'
7 |
8 | export default ({ headshot, headshotTint }) => {
9 | const options = { tint: `${headshotTint || DEFAULT_TINT}` }
10 |
11 | return headshot ? (
12 |
20 | ) : null
21 | }
22 |
--------------------------------------------------------------------------------
/components/x-teaser/src/Standfirst.jsx:
--------------------------------------------------------------------------------
1 | import { h } from '@financial-times/x-engine'
2 | import Link from './Link'
3 |
4 | export default ({ standfirst, altStandfirst, headlineTesting, relativeUrl, url, ...props }) => {
5 | const displayStandfirst = headlineTesting && altStandfirst ? altStandfirst : standfirst
6 | const displayUrl = relativeUrl || url
7 | return displayStandfirst ? (
8 |
9 |
22 |
10 |
14 |
15 |
21 | 11 | {Link copied to clipboard.} 12 |
13 |9 | 18 | {displayStandfirst} 19 | 20 |
21 | ) : null 22 | } 23 | -------------------------------------------------------------------------------- /packages/x-test-utils/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@financial-times/x-test-utils", 3 | "private": true, 4 | "version": "1.0.0", 5 | "description": "", 6 | "main": "enzyme.js", 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "engines": { 14 | "node": "16.x || 18.x || 20.x", 15 | "npm": "7.x || 8.x || 9.x || 10.x" 16 | }, 17 | "volta": { 18 | "extends": "../../package.json" 19 | }, 20 | "devDependencies": { 21 | "@cfaester/enzyme-adapter-react-18": "^0.8.0", 22 | "check-engine": "^1.10.1", 23 | "react": "^18.3.1", 24 | "react-dom": "^18.3.1", 25 | "enzyme": "^3.6.0", 26 | "jest-enzyme": "^7.1.2" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /e2e/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const xEngine = require('../packages/x-engine/src/webpack') 3 | const webpack = require('webpack') 4 | 5 | module.exports = { 6 | entry: './index.js', 7 | output: { 8 | filename: 'main.js', 9 | path: path.resolve(__dirname) 10 | }, 11 | plugins: [ 12 | new webpack.ProvidePlugin({ 13 | React: 'react' 14 | }), 15 | xEngine() 16 | ], 17 | module: { 18 | rules: [ 19 | { 20 | test: /\.(js|jsx)$/, 21 | use: { 22 | loader: 'babel-loader', 23 | options: { 24 | presets: ['@babel/preset-env', '@babel/preset-react'] 25 | } 26 | }, 27 | exclude: /node_modules/ 28 | } 29 | ] 30 | }, 31 | resolve: { 32 | extensions: ['.js', '.jsx', '.json', '.wasm', '.mjs', '*'] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /packages/x-babel-config/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@financial-times/x-babel-config", 3 | "private": true, 4 | "version": "1.0.0", 5 | "description": "", 6 | "main": "index.js", 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "dependencies": { 14 | "@babel/plugin-transform-react-jsx": "^7.3.0", 15 | "@babel/preset-env": "^7.4.3", 16 | "babel-jest": "^24.0.0", 17 | "fast-async": "^7.0.6" 18 | }, 19 | "engines": { 20 | "node": "16.x || 18.x || 20.x", 21 | "npm": "7.x || 8.x || 9.x || 10.x" 22 | }, 23 | "volta": { 24 | "extends": "../../package.json" 25 | }, 26 | "devDependencies": { 27 | "check-engine": "^1.10.1" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /components/x-teaser-list/src/TeaserList.scss: -------------------------------------------------------------------------------- 1 | @import '@financial-times/o3-foundation/css/core.css'; 2 | @import '@financial-times/x-article-save-button/src/ArticleSaveButton'; 3 | @import '@financial-times/x-teaser/src/Teaser'; 4 | 5 | .x-teaser-list { 6 | list-style-type: none; 7 | margin: 0; 8 | padding: 0; 9 | } 10 | 11 | .x-teaser-list-item { 12 | display: grid; 13 | grid-gap: 0 20px; 14 | grid-template: 'article actions' min-content / 1fr min-content; 15 | margin-bottom: 20px; 16 | border-bottom: 1px solid var(--o3-color-palette-black-20); 17 | 18 | .o-teaser--teaser-list { 19 | border-bottom: 0; 20 | padding-bottom: 0; 21 | } 22 | } 23 | 24 | .x-teaser-list-item__article { 25 | grid-area: article; 26 | } 27 | 28 | .x-teaser-list-item__actions { 29 | grid-area: actions; 30 | } 31 | -------------------------------------------------------------------------------- /components/x-increment/src/Increment.jsx: -------------------------------------------------------------------------------- 1 | import { h } from '@financial-times/x-engine' 2 | import { withActions } from '@financial-times/x-interaction' 3 | 4 | const delay = (ms) => new Promise((r) => setTimeout(r, ms)) 5 | 6 | const withIncrementActions = withActions(({ timeout }) => ({ 7 | async increment({ amount = 1 } = {}) { 8 | await delay(timeout) 9 | 10 | return ({ count }) => ({ 11 | count: count + amount 12 | }) 13 | } 14 | })) 15 | 16 | const BaseIncrement = ({ count, customSlot, actions: { increment }, isLoading }) => ( 17 |
18 | {count}
19 |
23 |
24 | )
25 |
26 | const Increment = withIncrementActions(BaseIncrement)
27 |
28 | export { Increment }
29 |
--------------------------------------------------------------------------------
/components/x-privacy-manager/storybook/stories/legislation-gdpr.js:
--------------------------------------------------------------------------------
1 | import { StoryContainer } from '../story-container'
2 | import { defaultArgs, defaultArgTypes, getFetchMock } from '../data'
3 |
4 | const args = {
5 | ...defaultArgs,
6 | legislationId: 'gdpr',
7 | consent: undefined,
8 | buttonText: {
9 | allow: {
10 | label: 'Allow',
11 | text: 'See personalised advertising and allow measurement of advertising effectiveness'
12 | },
13 | block: {
14 | label: 'Block',
15 | text: 'Block personalised advertising and measurement of advertising effectiveness'
16 | }
17 | }
18 | }
19 |
20 | export const LegislationGDPR = (args) => {
21 | getFetchMock(200)
22 | return StoryContainer(args)
23 | }
24 |
25 | LegislationGDPR.storyName = 'Legislation: GDPR'
26 | LegislationGDPR.args = args
27 | LegislationGDPR.argTypes = defaultArgTypes
28 |
--------------------------------------------------------------------------------
/components/x-teaser/src/LiveBlogStatus.jsx:
--------------------------------------------------------------------------------
1 | import { h } from '@financial-times/x-engine'
2 |
3 | const LiveBlogModifiers = {
4 | inprogress: 'live',
5 | comingsoon: 'pending',
6 | closed: 'closed'
7 | }
8 |
9 | export default ({ status, allowLiveTeaserStyling = false }) =>
10 | status && status !== 'closed' ? (
11 |
12 | {status === 'comingsoon' && {` Coming Soon `}}
13 | {status === 'inprogress' && (
14 |
19 | {` Live `}
20 |
21 | )}
22 |
23 | ) : null
24 |
--------------------------------------------------------------------------------
/packages/x-node-jsx/index.js:
--------------------------------------------------------------------------------
1 | const { addHook } = require('pirates')
2 | const { transform } = require('sucrase')
3 |
4 | const extension = '.jsx'
5 |
6 | // Assume .jsx components are using x-engine
7 | const jsxOptions = {
8 | jsxPragma: 'h',
9 | jsxFragmentPragma: 'Fragment'
10 | }
11 |
12 | const defaultOptions = {
13 | // Do not output JSX debugger information
14 | production: true,
15 | // https://github.com/alangpierce/sucrase#transforms
16 | transforms: ['imports', 'jsx']
17 | }
18 |
19 | module.exports = (userOptions = {}) => {
20 | const options = { ...defaultOptions, ...userOptions, ...jsxOptions }
21 |
22 | const handleJSX = (code) => {
23 | const transformed = transform(code, options)
24 | return transformed.code
25 | }
26 |
27 | // Return a function to revert the hook
28 | return addHook(handleJSX, { exts: [extension] })
29 | }
30 |
--------------------------------------------------------------------------------
/packages/x-babel-config/index.js:
--------------------------------------------------------------------------------
1 | module.exports = ({ targets = [], modules = false } = {}) => ({
2 | plugins: [
3 | // this plugin is not React specific! It includes a general JSX parser and helper 🙄
4 | [
5 | require.resolve('@babel/plugin-transform-react-jsx'),
6 | {
7 | pragma: 'h',
8 | useBuiltIns: true
9 | }
10 | ],
11 | // Implements async/await using syntax transformation rather than generators which require
12 | // a huge runtime for browsers which do not natively support them.
13 | [
14 | require.resolve('fast-async'),
15 | {
16 | compiler: {
17 | noRuntime: true
18 | }
19 | }
20 | ]
21 | ],
22 | presets: [
23 | [
24 | require.resolve('@babel/preset-env'),
25 | {
26 | targets,
27 | modules,
28 | exclude: ['transform-regenerator', 'transform-async-to-generator']
29 | }
30 | ]
31 | ]
32 | })
33 |
--------------------------------------------------------------------------------
/components/x-teaser-list/storybook/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { TeaserList } from '../src/TeaserList'
3 | import BuildService from '../../../.storybook/build-service'
4 |
5 | import '../src/TeaserList.scss'
6 |
7 | const dependencies = {
8 | 'o-date': '^7.0.1',
9 | 'o-labels': '^7.1.0',
10 | 'o-teaser': '^9.1.0',
11 | 'o-video': '^8.0.0'
12 | }
13 |
14 | export default {
15 | title: 'x-teaser-list'
16 | }
17 |
18 | export const _TeaserList = (args) => {
19 | return (
20 |
21 |
24 | )
25 | }
26 |
27 | _TeaserList.args = {
28 | showSaveButtons: true,
29 | csrfToken: 'dummy-token',
30 | items: require('./content-items.json')
31 | }
32 |
33 | _TeaserList.argTypes = {
34 | showSaveButtons: { name: 'Show save buttons' }
35 | }
36 |
--------------------------------------------------------------------------------
/packages/x-rollup/src/logger.js:
--------------------------------------------------------------------------------
1 | const chalk = require('chalk')
2 | const logSymbols = require('log-symbols')
3 |
4 | const format = (symbol, color, message) => {
5 | const time = new Date().toLocaleTimeString()
6 | return `[${time}] ${symbol} ${chalk[color](message)}\n`
7 | }
8 |
9 | module.exports.info = (message) => {
10 | process.stdout.write(format(logSymbols.info, 'blue', message))
11 | }
12 |
13 | module.exports.message = (message) => {
14 | process.stdout.write(format('\x20', 'gray', message))
15 | }
16 |
17 | module.exports.success = (message) => {
18 | process.stdout.write(format(logSymbols.success, 'green', message))
19 | }
20 |
21 | module.exports.warning = (message) => {
22 | process.stdout.write(format(logSymbols.warning, 'yellow', message))
23 | }
24 |
25 | module.exports.error = (message) => {
26 | process.stderr.write(format(logSymbols.error, 'red', message))
27 | }
28 |
--------------------------------------------------------------------------------
/components/x-teaser/src/AlwaysShowTimestamp.jsx:
--------------------------------------------------------------------------------
1 | import { h } from '@financial-times/x-engine'
2 | import TimeStamp from './TimeStamp'
3 | import RelativeTime from './RelativeTime'
4 | import { differenceInCalendarDays } from 'date-fns'
5 |
6 | /**
7 | * Timestamp shown always, the default 4h limit does not apply here
8 | * If same calendar day, we show relative time e.g. X hours ago or Updated X min ago
9 | * If different calendar day, we show full Date time e.g. June 9, 2021
10 | */
11 | export default (props) => {
12 | const localTodayDate = new Date().toISOString().substr(0, 10) // keep only the date bit
13 | const dateToCompare = new Date(props.publishedDate).toISOString().substr(0, 10)
14 |
15 | if (differenceInCalendarDays(localTodayDate, dateToCompare) >= 1) {
16 | return
16 |
26 | {displayTitle}
27 |
28 |
29 | )
30 | }
31 |
--------------------------------------------------------------------------------
/packages/x-engine/src/concerns/format-config.js:
--------------------------------------------------------------------------------
1 | const presets = require('./presets')
2 |
3 | /**
4 | * Format Config
5 | * @param {string|{ runtime: string, factory?: string }} config
6 | * @returns {{ runtime: string, factory: string }}
7 | */
8 | module.exports = function (config) {
9 | // if configuration is a string, expand it
10 | if (typeof config === 'string') {
11 | if (presets.hasOwnProperty(config)) {
12 | config = presets[config]
13 | } else {
14 | config = { runtime: config, factory: null }
15 | }
16 | }
17 |
18 | if (typeof config.runtime !== 'string') {
19 | throw new TypeError('Engine configuration must define a runtime')
20 | }
21 |
22 | if (config.factory && typeof config.factory !== 'string') {
23 | throw new TypeError('Engine factory must be of type String.')
24 | }
25 |
26 | if (!config.renderModule) {
27 | config.renderModule = config.runtime
28 | }
29 |
30 | return config
31 | }
32 |
--------------------------------------------------------------------------------
/components/x-teaser/__fixtures__/content-package.json:
--------------------------------------------------------------------------------
1 | {
2 | "type": "package",
3 | "id": "",
4 | "url": "#",
5 | "title": "The royal wedding",
6 | "altTitle": "",
7 | "standfirst": "Prince Harry and Meghan Markle will tie the knot at Windsor Castle",
8 | "altStandfirst": "",
9 | "publishedDate": "2018-05-14T16:38:49.000Z",
10 | "firstPublishedDate": "2018-05-14T16:38:49.000Z",
11 | "metaPrefixText": "",
12 | "metaSuffixText": "",
13 | "metaLink": {
14 | "url": "#",
15 | "prefLabel": "FT Magazine"
16 | },
17 | "metaAltLink": {
18 | "url": "#",
19 | "prefLabel": "FT Series"
20 | },
21 | "image": {
22 | "url": "http://prod-upp-image-read.ft.com/7e97f5b6-578d-11e8-b8b2-d6ceb45fa9d0",
23 | "width": 2048,
24 | "height": 1152
25 | },
26 | "status": "",
27 | "headshotTint": "",
28 | "accessLevel": "free",
29 | "theme": "",
30 | "parentTheme": "",
31 | "modifiers": "centre"
32 | }
33 |
--------------------------------------------------------------------------------
/components/x-teaser/__fixtures__/package-item.json:
--------------------------------------------------------------------------------
1 | {
2 | "type": "article",
3 | "id": "",
4 | "url": "#",
5 | "title": "Why so little has changed since the crash",
6 | "standfirst": "Martin Wolf on the power of vested interests in today’s rent-extracting economy",
7 | "publishedDate": "2018-09-02T15:07:00.000Z",
8 | "firstPublishedDate": "2018-09-02T13:53:00.000Z",
9 | "metaPrefixText": "FT Series",
10 | "metaSuffixText": "",
11 | "metaLink": {
12 | "url": "#",
13 | "prefLabel": "Financial crisis: Are we safer now? "
14 | },
15 | "image": {
16 | "url": "http://prod-upp-image-read.ft.com/a25832ea-0053-11e8-9650-9c0ad2d7c5b5",
17 | "width": 2048,
18 | "height": 1152
19 | },
20 | "indicators": {
21 | "isOpinion": true
22 | },
23 | "status": "",
24 | "headshotTint": "",
25 | "accessLevel": "free",
26 | "theme": "",
27 | "parentTheme": "extra-article",
28 | "modifiers": "centre"
29 | }
30 |
--------------------------------------------------------------------------------
/packages/x-rollup/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@financial-times/x-rollup",
3 | "version": "0.0.0",
4 | "private": true,
5 | "description": "",
6 | "main": "index.js",
7 | "scripts": {
8 | "test": "echo \"Error: no test specified\" && exit 1"
9 | },
10 | "keywords": [],
11 | "author": "",
12 | "license": "ISC",
13 | "dependencies": {
14 | "@babel/core": "^7.6.4",
15 | "@babel/plugin-external-helpers": "^7.2.0",
16 | "@financial-times/x-babel-config": "file:../x-babel-config",
17 | "chalk": "^2.4.2",
18 | "log-symbols": "^3.0.0",
19 | "rollup": "^1.23.0",
20 | "rollup-plugin-babel": "^4.3.2",
21 | "rollup-plugin-commonjs": "^10.1.0"
22 | },
23 | "engines": {
24 | "node": "16.x || 18.x || 20.x",
25 | "npm": "7.x || 8.x || 9.x || 10.x"
26 | },
27 | "volta": {
28 | "extends": "../../package.json"
29 | },
30 | "devDependencies": {
31 | "check-engine": "^1.10.1"
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/packages/x-node-jsx/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@financial-times/x-node-jsx",
3 | "version": "0.0.0",
4 | "description": "This module extends Node's require function to enable the use of .jsx files at runtime.",
5 | "main": "src/index.js",
6 | "keywords": [
7 | "x-dash"
8 | ],
9 | "author": "",
10 | "license": "ISC",
11 | "dependencies": {
12 | "pirates": "^4.0.0",
13 | "sucrase": "^3.6.0"
14 | },
15 | "repository": {
16 | "type": "git",
17 | "url": "https://github.com/Financial-Times/x-dash.git"
18 | },
19 | "homepage": "https://github.com/Financial-Times/x-dash/tree/HEAD/packages/x-node-jsx",
20 | "engines": {
21 | "node": "16.x || 18.x || 20.x",
22 | "npm": "7.x || 8.x || 9.x || 10.x"
23 | },
24 | "publishConfig": {
25 | "access": "public"
26 | },
27 |
28 | "volta": {
29 | "extends": "../../package.json"
30 | },
31 | "devDependencies": {
32 | "check-engine": "^1.10.1"
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/components/x-styling-demo/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@financial-times/x-styling-demo",
3 | "version": "0.0.0",
4 | "description": "",
5 | "source": "src/Button.jsx",
6 | "main": "dist/Button.cjs.js",
7 | "browser": "dist/Button.es5.js",
8 | "module": "dist/Button.esm.js",
9 | "style": "src/Button.css",
10 | "private": true,
11 | "scripts": {
12 | "build": "node rollup.js",
13 | "start": "node rollup.js --watch"
14 | },
15 | "keywords": [],
16 | "author": "",
17 | "license": "ISC",
18 | "devDependencies": {
19 | "@financial-times/x-rollup": "file:../../packages/x-rollup",
20 | "check-engine": "^1.10.1"
21 | },
22 | "dependencies": {
23 | "@financial-times/x-engine": "file:../../packages/x-engine",
24 | "classnames": "^2.2.6"
25 | },
26 | "engines": {
27 | "node": "16.x || 18.x || 20.x",
28 | "npm": "7.x || 8.x || 9.x || 10.x"
29 | },
30 | "volta": {
31 | "extends": "../../package.json"
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/components/x-article-save-button/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@financial-times/x-article-save-button",
3 | "version": "0.0.0",
4 | "description": "",
5 | "main": "dist/ArticleSaveButton.cjs.js",
6 | "module": "dist/ArticleSaveButton.esm.js",
7 | "browser": "dist/ArticleSaveButton.es5.js",
8 | "style": "src/ArticleSaveButton.scss",
9 | "scripts": {
10 | "build": "node rollup.js",
11 | "start": "node rollup.js --watch"
12 | },
13 | "keywords": [],
14 | "author": "",
15 | "license": "ISC",
16 | "devDependencies": {
17 | "@financial-times/x-rollup": "file:../../packages/x-rollup",
18 | "sass": "^1.49.0"
19 | },
20 | "volta": {
21 | "extends": "../../package.json"
22 | },
23 | "dependencies": {
24 | "@financial-times/x-engine": "file:../../packages/x-engine"
25 | },
26 | "engines": {
27 | "node": "16.x || 18.x || 20.x"
28 | },
29 | "peerDependencies": {
30 | "@financial-times/o3-foundation": "^3.1.0"
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/packages/x-rollup/src/watch.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 | const rollup = require('rollup')
3 | const logger = require('./logger')
4 |
5 | module.exports = (configs) => {
6 | // Merge the separate input/output options for each bundle
7 | const formattedConfigs = configs.map(([input, output]) => {
8 | return { ...input, output }
9 | })
10 |
11 | return new Promise((resolve, reject) => {
12 | const watcher = rollup.watch(formattedConfigs)
13 |
14 | logger.info('Watching files, press ctrl + c to stop')
15 |
16 | watcher.on('event', (event) => {
17 | switch (event.code) {
18 | case 'END':
19 | logger.message('Waiting for changes…')
20 | break
21 |
22 | case 'BUNDLE_END':
23 | logger.success(`Bundled ${path.relative(process.cwd(), event.output[0])}`)
24 | break
25 |
26 | case 'ERROR':
27 | logger.warning(event.error)
28 | break
29 |
30 | case 'FATAL':
31 | reject(event.error)
32 | break
33 | }
34 | })
35 | })
36 | }
37 |
--------------------------------------------------------------------------------
/components/x-teaser-timeline/typings/x-teaser-timeline.d.ts:
--------------------------------------------------------------------------------
1 | export type CustomSlotContent = string[] | Object[] | Object | string
2 | export type CustomSlotPosition = number[] | number
3 |
4 | /**
5 | * A news item (i.e. an article)
6 | */
7 | export interface Item {
8 | id: string // e.g. '01f0b004-36b9-11ea-a6d3-9a26f8c3cba4'
9 | title: string // e.g.,'Europeans step up pressure on Iran over nuclear deal'
10 | publishedDate: string // ISO8601 date string
11 | localisedLastUpdated: string // ISO8601 date string
12 | }
13 |
14 | export interface ItemInGroupInfo {
15 | articleIndex: number
16 | localisedLastUpdated: string // ISO8601 date string
17 | }
18 |
19 | export interface ItemInGroup extends Item, ItemInGroupInfo {}
20 |
21 | export interface GroupOfItems {
22 | title?: string // e.g. 'Earlier Today'
23 | date: string // e.g. '2020-01-14'
24 | items: ItemInGroup[] // An array of news articles
25 | }
26 |
27 | export interface PositionInGroup {
28 | group: number
29 | index: number
30 | }
31 |
--------------------------------------------------------------------------------
/packages/x-handlebars/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@financial-times/x-handlebars",
3 | "version": "0.0.0",
4 | "description": "This module provides Handlebars helper functions to render `x-dash` component packages or local compatible modules within existing Handlebars templates.",
5 | "main": "index.js",
6 | "keywords": [
7 | "x-dash"
8 | ],
9 | "author": "",
10 | "license": "ISC",
11 | "dependencies": {
12 | "@financial-times/x-engine": "file:../x-engine"
13 | },
14 | "repository": {
15 | "type": "git",
16 | "url": "https://github.com/Financial-Times/x-dash.git"
17 | },
18 | "homepage": "https://github.com/Financial-Times/x-dash/tree/HEAD/packages/x-handlebars",
19 | "engines": {
20 | "node": "16.x || 18.x || 20.x",
21 | "npm": "7.x || 8.x || 9.x || 10.x"
22 | },
23 | "publishConfig": {
24 | "access": "public"
25 | },
26 |
27 | "volta": {
28 | "extends": "../../package.json"
29 | },
30 | "devDependencies": {
31 | "check-engine": "^1.10.1"
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/components/x-teaser-list/src/TeaserList.jsx:
--------------------------------------------------------------------------------
1 | import { h } from '@financial-times/x-engine'
2 | import { ArticleSaveButton } from '@financial-times/x-article-save-button'
3 | import { Teaser, presets } from '@financial-times/x-teaser'
4 |
5 | const TeaserList = ({ items = [], showSaveButtons = true, csrfToken = null }) => (
6 | -
7 | {items.map((item) => {
8 | return (
9 |
-
10 | 11 |13 | {showSaveButtons && ( 14 |
12 | 15 |23 | )} 24 |22 |
25 | )
26 | })}
27 |
37 | {props.children}
38 |
39 | )
40 | }
41 |
--------------------------------------------------------------------------------
/components/x-increment/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@financial-times/x-increment",
3 | "version": "0.0.0",
4 | "private": true,
5 | "description": "",
6 | "source": "src/Increment.jsx",
7 | "main": "dist/Increment.cjs.js",
8 | "module": "dist/Increment.esm.js",
9 | "browser": "dist/Increment.es5.js",
10 | "scripts": {
11 | "build": "node rollup.js",
12 | "start": "node rollup.js --watch"
13 | },
14 | "keywords": [],
15 | "author": "",
16 | "license": "ISC",
17 | "devDependencies": {
18 | "@financial-times/x-rollup": "file:../../packages/x-rollup",
19 | "@financial-times/x-test-utils": "file:../../packages/x-test-utils",
20 | "check-engine": "^1.10.1"
21 | },
22 | "dependencies": {
23 | "@financial-times/x-engine": "file:../../packages/x-engine",
24 | "@financial-times/x-interaction": "file:../x-interaction"
25 | },
26 | "engines": {
27 | "node": "16.x || 18.x || 20.x",
28 | "npm": "7.x || 8.x || 9.x || 10.x"
29 | },
30 | "volta": {
31 | "extends": "../../package.json"
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/components/x-teaser/__fixtures__/video.json:
--------------------------------------------------------------------------------
1 | {
2 | "type": "video",
3 | "id": "0e89d872-5711-457b-80b1-4ca0d8afea46",
4 | "url": "#",
5 | "title": "FT View: Donald Trump, man of steel",
6 | "standfirst": "The FT's Rob Armstrong looks at why Donald Trump is pushing trade tariffs",
7 | "publishedDate": "2018-03-26T08:12:28.137Z",
8 | "firstPublishedDate": "2018-03-26T08:12:28.137Z",
9 | "metaPrefixText": "",
10 | "metaSuffixText": "02:51min",
11 | "systemCode": "x-teaser",
12 | "metaLink": {
13 | "url": "#",
14 | "prefLabel": "Global Trade"
15 | },
16 | "metaAltLink": {
17 | "url": "#",
18 | "prefLabel": "US"
19 | },
20 | "image": {
21 | "url": "http://com.ft.imagepublish.upp-prod-eu.s3.amazonaws.com/a27ce49b-85b8-445b-b883-db6e2f533194",
22 | "width": 1920,
23 | "height": 1080,
24 | "altText": "Image alt text"
25 | },
26 | "video": {
27 | "url": "https://next-media-api.ft.com/renditions/15218247321960/640x360.mp4",
28 | "width": 640,
29 | "height": 360,
30 | "mediaType": "video/mp4",
31 | "codec": "h264"
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/components/x-privacy-manager/src/components/form.jsx:
--------------------------------------------------------------------------------
1 | import { h } from '@financial-times/x-engine'
2 |
3 | /**
4 | * @param {XPrivacyManager.FormProps} args
5 | */
6 | export const Form = ({ consent, consentApiUrl, sendConsent, trackingKeys, buttonText, children }) => {
7 | /** @type {XPrivacyManager.TrackingKey} */
8 | const consentAction = consent ? 'consent-allow' : 'consent-block'
9 | const btnTrackingId = trackingKeys[consentAction]
10 | const isDisabled = typeof consent === 'undefined'
11 |
12 | /** @param {React.FormEvent} event */
13 | const onSubmit = (event) => {
14 | event && event.preventDefault()
15 | return sendConsent()
16 | }
17 |
18 | return (
19 |
30 | )
31 | }
32 |
--------------------------------------------------------------------------------
/components/x-teaser/__fixtures__/article-with-missing-image-url.json:
--------------------------------------------------------------------------------
1 | {
2 | "type": "article",
3 | "id": "",
4 | "url": "#",
5 | "title": "Inside charity fundraiser where hostesses are put on show",
6 | "altTitle": "Men Only, the charity fundraiser with hostesses on show",
7 | "standfirst": "FT investigation finds groping and sexual harassment at secretive black-tie dinner",
8 | "altStandfirst": "Groping and sexual harassment at black-tie dinner charity event",
9 | "publishedDate": "2018-01-23T15:07:00.000Z",
10 | "firstPublishedDate": "2018-01-23T13:53:00.000Z",
11 | "metaPrefixText": "",
12 | "metaSuffixText": "",
13 | "metaLink": {
14 | "url": "#",
15 | "prefLabel": "Sexual misconduct allegations"
16 | },
17 | "metaAltLink": {
18 | "url": "#",
19 | "prefLabel": "FT Investigations"
20 | },
21 | "image": {
22 | "width": 2048,
23 | "height": 1152
24 | },
25 | "indicators": {
26 | "isEditorsChoice": true
27 | },
28 | "status": "",
29 | "headshotTint": "",
30 | "accessLevel": "free",
31 | "theme": "",
32 | "parentTheme": "",
33 | "modifiers": ""
34 | }
35 |
--------------------------------------------------------------------------------
/components/x-follow-button/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@financial-times/x-follow-button",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "dist/FollowButton.cjs.js",
6 | "style": "src/FollowButton.scss",
7 | "browser": "dist/FollowButton.es5.js",
8 | "module": "dist/FollowButton.esm.js",
9 | "scripts": {
10 | "build": "node rollup.js",
11 | "start": "node rollup.js --watch"
12 | },
13 | "keywords": [],
14 | "author": "",
15 | "license": "ISC",
16 | "devDependencies": {
17 | "@financial-times/x-rollup": "file:../../packages/x-rollup",
18 | "@financial-times/x-test-utils": "file:../../packages/x-test-utils",
19 | "check-engine": "^1.10.1",
20 | "sass": "^1.49.0"
21 | },
22 | "dependencies": {
23 | "@financial-times/x-engine": "file:../../packages/x-engine",
24 | "classnames": "^2.2.6"
25 | },
26 | "engines": {
27 | "node": "16.x || 18.x || 20.x",
28 | "npm": "7.x || 8.x || 9.x || 10.x"
29 | },
30 | "volta": {
31 | "extends": "../../package.json"
32 | },
33 | "peerDependencies": {
34 | "@financial-times/n-myft-ui": "^40.0.0"
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/components/x-teaser/__fixtures__/podcast.json:
--------------------------------------------------------------------------------
1 | {
2 | "type": "audio",
3 | "id": "d1246074-f7d3-4aaf-951c-80a6db495765",
4 | "url": "https://www.ft.com/content/d1246074-f7d3-4aaf-951c-80a6db495765",
5 | "title": "Who sets the internet standards?",
6 | "standfirst": "Hannah Kuchler talks to American social scientist and cyber security expert Andrea…",
7 | "altStandfirst": "",
8 | "publishedDate": "2018-10-24T04:00:00.000Z",
9 | "firstPublishedDate": "2018-10-24T04:00:00.000Z",
10 | "metaSuffixText": "12 mins",
11 | "metaLink": {
12 | "url": "#",
13 | "prefLabel": "Tech Tonic podcast"
14 | },
15 | "metaAltLink": "",
16 | "image": {
17 | "url": "https://www.ft.com/__origami/service/image/v2/images/raw/http%3A%2F%2Fprod-upp-image-read.ft.com%2F5d1a54aa-f49b-11e8-ae55-df4bf40f9d0d?source=next&fit=scale-down&compression=best&width=240",
18 | "width": 2048,
19 | "height": 1152
20 | },
21 | "indicators": {
22 | "isPodcast": true
23 | },
24 | "status": "",
25 | "headshotTint": "",
26 | "accessLevel": "free",
27 | "theme": "",
28 | "parentTheme": "",
29 | "modifiers": ""
30 | }
31 |
--------------------------------------------------------------------------------
/components/x-teaser/__fixtures__/opinion.json:
--------------------------------------------------------------------------------
1 | {
2 | "type": "article",
3 | "id": "",
4 | "url": "#",
5 | "title": "Anti-Semitism and the threat of identity politics",
6 | "altTitle": "",
7 | "standfirst": "Today, hatred of Jews is mixed in with fights about Islam and Israel",
8 | "altStandfirst": "Anti-Semitism and identity politics",
9 | "publishedDate": "2018-04-02T12:22:01.000Z",
10 | "firstPublishedDate": "2018-04-02T12:22:01.000Z",
11 | "metaPrefixText": "",
12 | "metaSuffixText": "",
13 | "metaLink": {
14 | "url": "#",
15 | "prefLabel": "Gideon Rachman"
16 | },
17 | "metaAltLink": {
18 | "url": "#",
19 | "prefLabel": "Anti-Semitism"
20 | },
21 | "image": {
22 | "url": "http://prod-upp-image-read.ft.com/1005ca96-364b-11e8-8b98-2f31af407cc8",
23 | "width": 2048,
24 | "height": 1152
25 | },
26 | "headshot": "fthead-v1:gideon-rachman",
27 | "indicators": {
28 | "isOpinion": true,
29 | "isColumn": true
30 | },
31 | "showHeadshot": true,
32 | "status": "",
33 | "headshotTint": "",
34 | "accessLevel": "free",
35 | "theme": "",
36 | "parentTheme": "",
37 | "modifiers": ""
38 | }
39 |
--------------------------------------------------------------------------------
/components/x-interaction/src/concerns/register-component.js:
--------------------------------------------------------------------------------
1 | const registeredComponents = {}
2 | const xInteractionName = Symbol('x-interaction-name')
3 |
4 | export function registerComponent(Component, name) {
5 | if (registeredComponents[name]) {
6 | throw new Error(
7 | `x-interaction a component has already been registered under that name, please use another name.`
8 | )
9 | }
10 |
11 | if (!Component._wraps) {
12 | throw new Error(
13 | `only x-interaction wrapped components (i.e. the component returned from withActions) can be registered`
14 | )
15 | }
16 |
17 | Component[xInteractionName] = name
18 | // add name to original component so we can access the wrapper from the original
19 | Component._wraps.Component[xInteractionName] = name
20 | registeredComponents[name] = Component
21 | }
22 |
23 | export function getComponent(Component) {
24 | const name = Component[xInteractionName]
25 | return registeredComponents[name]
26 | }
27 |
28 | export function getComponentByName(name) {
29 | return registeredComponents[name]
30 | }
31 |
32 | export function getComponentName(Component) {
33 | return Component[xInteractionName] || 'Unknown'
34 | }
35 |
--------------------------------------------------------------------------------
/components/x-teaser/__fixtures__/article-with-data-image.json:
--------------------------------------------------------------------------------
1 | {
2 | "type": "article",
3 | "id": "",
4 | "url": "#",
5 | "title": "Inside charity fundraiser where hostesses are put on show",
6 | "altTitle": "Men Only, the charity fundraiser with hostesses on show",
7 | "standfirst": "FT investigation finds groping and sexual harassment at secretive black-tie dinner",
8 | "altStandfirst": "Groping and sexual harassment at black-tie dinner charity event",
9 | "publishedDate": "2018-01-23T15:07:00.000Z",
10 | "firstPublishedDate": "2018-01-23T13:53:00.000Z",
11 | "metaPrefixText": "",
12 | "metaSuffixText": "",
13 | "metaLink": {
14 | "url": "#",
15 | "prefLabel": "Sexual misconduct allegations"
16 | },
17 | "metaAltLink": {
18 | "url": "#",
19 | "prefLabel": "FT Investigations"
20 | },
21 | "image": {
22 | "url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==",
23 | "width": 2048,
24 | "height": 1152,
25 | "imageLazyLoad": "js-image-lazy-load"
26 | },
27 | "indicators": {
28 | "isEditorsChoice": true
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/components/x-gift-article/src/GiftLinkSection.jsx:
--------------------------------------------------------------------------------
1 | import { h } from '@financial-times/x-engine'
2 | import { SharedLinkTypeSelector } from './SharedLinkTypeSelector'
3 | import { ShareType } from './lib/constants'
4 | import { UrlSection } from './UrlSection'
5 | import { CreateLinkButton } from './CreateLinkButton'
6 | import { FreeArticleAlert } from './FreeArticleAlert'
7 | import { IncludeHighlights } from './IncludeHighlights'
8 |
9 | export const GiftLinkSection = (props) => {
10 | const { isGiftUrlCreated, shareType, isNonGiftUrlShortened, showFreeArticleAlert, showHighlightsCheckbox } =
11 | props
12 |
13 | // when the gift url is created or the non-gift url is shortened, show the url section
14 | if (
15 | isGiftUrlCreated ||
16 | (shareType === ShareType.nonGift && isNonGiftUrlShortened && !showFreeArticleAlert)
17 | ) {
18 | return
23 | {showFreeArticleAlert &&
28 | )
29 | }
30 |
--------------------------------------------------------------------------------
/components/x-teaser/__fixtures__/article.json:
--------------------------------------------------------------------------------
1 | {
2 | "type": "article",
3 | "id": "",
4 | "url": "#",
5 | "title": "Inside charity fundraiser where hostesses are put on show",
6 | "altTitle": "Men Only, the charity fundraiser with hostesses on show",
7 | "standfirst": "FT investigation finds groping and sexual harassment at secretive black-tie dinner",
8 | "altStandfirst": "Groping and sexual harassment at black-tie dinner charity event",
9 | "publishedDate": "2018-01-23T15:07:00.000Z",
10 | "firstPublishedDate": "2018-01-23T13:53:00.000Z",
11 | "metaPrefixText": "",
12 | "metaSuffixText": "",
13 | "metaLink": {
14 | "url": "#",
15 | "prefLabel": "Sexual misconduct allegations"
16 | },
17 | "metaAltLink": {
18 | "url": "#",
19 | "prefLabel": "FT Investigations"
20 | },
21 | "image": {
22 | "url": "http://prod-upp-image-read.ft.com/a25832ea-0053-11e8-9650-9c0ad2d7c5b5",
23 | "width": 2048,
24 | "height": 1152
25 | },
26 | "indicators": {
27 | "isEditorsChoice": true
28 | },
29 | "status": "",
30 | "headshotTint": "",
31 | "accessLevel": "free",
32 | "theme": "",
33 | "parentTheme": "",
34 | "modifiers": ""
35 | }
36 |
--------------------------------------------------------------------------------
/components/x-increment/__tests__/x-increment.test.jsx:
--------------------------------------------------------------------------------
1 | const { h } = require('@financial-times/x-engine')
2 | const { mount } = require('@financial-times/x-test-utils/enzyme')
3 |
4 | const { Increment } = require('../')
5 |
6 | describe('x-increment', () => {
7 | it('should increment when action is triggered', async () => {
8 | const subject = mount(
22 | {dependencies &&
25 | )
26 | }
27 |
28 | Timeline.args = {
29 | items,
30 | timezoneOffset: -60,
31 | localTodayDate: '2018-10-17',
32 | latestItemsTime: '2018-10-17T12:10:33.000Z',
33 | customSlotContent: 'Custom slot content',
34 | customSlotPosition: 3
35 | }
36 | Timeline.argTypes = {
37 | latestItemsTime: {
38 | control: { type: 'select', options: { None: '', '2018-10-17T12:10:33.000Z': '2018-10-17T12:10:33.000Z' } }
39 | },
40 | customSlotContent: {
41 | control: { type: 'select', options: { None: '', Something: '---Custom slot content---' } }
42 | },
43 | allowLiveTeaserStyling: {
44 | control: 'boolean'
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/.storybook/build-service.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Helmet } from 'react-helmet'
3 |
4 | function buildServiceUrl(deps, type) {
5 | const modules = Object.keys(deps)
6 | .map((i) => `${i}@${deps[i]}`)
7 | .join(',')
8 | return `https://www.ft.com/__origami/service/build/v3/bundles/${type}?components=${modules}&brand=core&system_code=$$$-no-bizops-system-code-$$$`
9 | }
10 |
11 | class BuildService extends React.Component {
12 | constructor(props) {
13 | super(props)
14 | this.initialised = []
15 | }
16 |
17 | componentDidUpdate() {
18 | if (window.hasOwnProperty('Origami')) {
19 | for (const component in Origami) {
20 | if (typeof Origami[component].init === 'function') {
21 | const instance = Origami[component].init()
22 | this.initialised.concat(instance)
23 | }
24 | }
25 | }
26 | }
27 |
28 | componentWillUnmount() {
29 | this.initialised.forEach((instance) => {
30 | if (typeof instance.destroy === 'function') {
31 | instance.destroy()
32 | }
33 | })
34 | }
35 |
36 | render() {
37 | const js = buildServiceUrl(this.props.dependencies, 'js')
38 | const css = buildServiceUrl(this.props.dependencies, 'css')
39 |
40 | return (
41 |
24 | {status ? (
25 | {` ${status} `}
26 | ) : (
27 |
36 | )}
37 |
38 | ) : null
39 | }
40 |
--------------------------------------------------------------------------------
/components/x-topic-search/src/SuggestionList.jsx:
--------------------------------------------------------------------------------
1 | import { h } from '@financial-times/x-engine'
2 | import { FollowButton } from '@financial-times/x-follow-button'
3 |
4 | const defaultFollowButtonRender = (concept, csrfToken, followedTopicIds) => (
5 | -
19 | {suggestions.map((suggestion) => (
20 |
- 27 | 32 | {suggestion.prefLabel} 33 | 34 | 35 | {renderFollowButton(suggestion, csrfToken, followedTopicIds)} 36 | 37 | ))} 38 |
Sharing link
23 |31 | 32 | {enterpriseEnabled && !enterpriseRequestAccess 33 | ? 'Share this article using:' 34 | : 'Share this article'} 35 | 36 |
37 |44 | 45 | {title} 46 | 47 |
48 |
21 | {showPrefixText ? {metaPrefixText} : null}
22 | {displayLink?.prefLabel ? (
23 |
29 | {displayLink.prefLabel}
30 |
31 | ) : null}
32 | {showSuffixText ? {metaSuffixText} : null}
33 |
34 | )
35 | }
36 |
--------------------------------------------------------------------------------
/packages/x-rollup/src/rollup-config.js:
--------------------------------------------------------------------------------
1 | const babel = require('rollup-plugin-babel')
2 | const commonjs = require('rollup-plugin-commonjs')
3 | const babelConfig = require('./babel-config')
4 |
5 | module.exports = ({ input, pkg }) => {
6 | // Don't bundle any dependencies
7 | const external = [...Object.keys(pkg.dependencies), ...Object.keys(pkg.peerDependencies || {})]
8 |
9 | const plugins = [
10 | // Convert CommonJS modules to ESM so they can be included in the bundle
11 | commonjs({ extensions: ['.js', '.jsx'] })
12 | ]
13 |
14 | // Pairs of input and output options
15 | return [
16 | [
17 | {
18 | input,
19 | external,
20 | plugins: [
21 | babel(
22 | babelConfig({
23 | targets: { node: '16' }
24 | })
25 | ),
26 | ...plugins
27 | ]
28 | },
29 | {
30 | file: pkg.module,
31 | format: 'es'
32 | }
33 | ],
34 | [
35 | {
36 | input,
37 | external,
38 | plugins: [
39 | babel(
40 | babelConfig({
41 | targets: { node: '16' }
42 | })
43 | ),
44 | ...plugins
45 | ]
46 | },
47 | {
48 | file: pkg.main,
49 | format: 'cjs'
50 | }
51 | ],
52 | [
53 | {
54 | input,
55 | external,
56 | plugins: [
57 | babel(
58 | babelConfig({
59 | targets: { ie: '11' }
60 | })
61 | ),
62 | ...plugins
63 | ]
64 | },
65 | {
66 | file: pkg.browser,
67 | format: 'cjs'
68 | }
69 | ]
70 | ]
71 | }
72 |
--------------------------------------------------------------------------------
/components/x-interaction/src/concerns/serialiser.js:
--------------------------------------------------------------------------------
1 | import { h, render } from '@financial-times/x-engine'
2 | import { HydrationData } from '../HydrationData'
3 | import { getComponent, getComponentName } from './register-component'
4 |
5 | export class Serialiser {
6 | constructor() {
7 | this.destroyed = false
8 | this.data = []
9 | }
10 |
11 | addData({ id, Component, props }) {
12 | const registeredComponent = getComponent(Component)
13 |
14 | if (!registeredComponent) {
15 | throw new Error(
16 | `a Serialiser's addData was called for an unregistered ${getComponentName(Component)} component with id ${id}. ensure you're registering your component before attempting to output the hydration data`
17 | )
18 | }
19 |
20 | if (this.destroyed) {
21 | throw new Error(
22 | `a ${getComponentName(Component)} component was rendered after flushHydrationData was called. ensure you're outputting the hydration data after rendering every component`
23 | )
24 | }
25 |
26 | this.data.push({
27 | id,
28 | component: getComponentName(Component),
29 | props
30 | })
31 | }
32 |
33 | flushHydrationData() {
34 | if (this.destroyed) {
35 | throw new Error(
36 | `a Serialiser's flushHydrationData was called twice. ensure you're not reusing a Serialiser between requests`
37 | )
38 | }
39 |
40 | this.destroyed = true
41 | return this.data
42 | }
43 |
44 | outputHydrationData() {
45 | return render(h(HydrationData, { serialiser: this }))
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/components/x-gift-article/src/ShareArticleDialog.jsx:
--------------------------------------------------------------------------------
1 | import { h } from '@financial-times/x-engine'
2 | import { Header } from './Header'
3 | import { GiftLinkSection } from './GiftLinkSection'
4 | import { Footer } from './Footer'
5 | import { SharingOptionsToggler } from './SharingOptionsToggler'
6 | import { ShareType } from './lib/constants'
7 |
8 | export default (props) => {
9 | const {
10 | isGiftUrlCreated,
11 | shareType,
12 | isNonGiftUrlShortened,
13 | showFreeArticleAlert,
14 | isFreeArticle,
15 | enterpriseEnabled,
16 | enterpriseRequestAccess,
17 | isRegisteredUser,
18 | isMPRArticle
19 | } = props
20 |
21 | return (
22 |
29 |
30 |
45 | )
46 | }
47 |
--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
1 | version: 2
2 | updates:
3 |
4 | - package-ecosystem: "npm"
5 | directory: "/"
6 | schedule:
7 | interval: "daily"
8 | commit-message:
9 | prefix: "fix:"
10 | prefix-development: "chore:"
11 | groups:
12 | aws-sdk:
13 | patterns:
14 | - "@aws-sdk/*"
15 | update-types:
16 | - "minor"
17 | - "patch"
18 | development-dependencies:
19 | dependency-type: "development"
20 | update-types:
21 | - "minor"
22 | - "patch"
23 | origami:
24 | patterns:
25 | - "@financial-times/o-*"
26 | update-types:
27 | - "minor"
28 | - "patch"
29 | page-kit:
30 | patterns:
31 | - "@financial-times/dotcom-*"
32 | update-types:
33 | - "minor"
34 | - "patch"
35 | privacy:
36 | patterns:
37 | - "@financial-times/privacy-*"
38 | update-types:
39 | - "minor"
40 | - "patch"
41 | reliability-kit:
42 | patterns:
43 | - "@dotcom-reliability-kit/*"
44 | update-types:
45 | - "minor"
46 | - "patch"
47 | tool-kit:
48 | patterns:
49 | - "@dotcom-tool-kit/*"
50 | update-types:
51 | - "minor"
52 | - "patch"
53 | x-dash:
54 | patterns:
55 | - "@financial-times/x-*"
56 | update-types:
57 | - "minor"
58 | - "patch"
59 |
--------------------------------------------------------------------------------
/components/x-teaser/src/Video.jsx:
--------------------------------------------------------------------------------
1 | import { h } from '@financial-times/x-engine'
2 | import Image from './Image'
3 |
4 | // Re-format the data for use with o-video
5 | const formatData = (props) =>
6 | JSON.stringify({
7 | renditions: [props.video],
8 | mainImageUrl: props.image ? props.image.url : null
9 | })
10 |
11 | // To prevent React from touching the DOM after mounting… return an empty
12 | //
31 |
44 |
17 |
32 |
33 | )
34 | }
35 |
36 | export default (props) => (
37 |
38 |
45 | )
46 |
--------------------------------------------------------------------------------
/components/x-article-save-button/src/ArticleSaveButton.jsx:
--------------------------------------------------------------------------------
1 | import { h } from '@financial-times/x-engine'
2 |
3 | export const ArticleSaveButton = (props) => {
4 | const getLabel = (props) => {
5 | if (props.saved) {
6 | return 'Saved to myFT'
7 | }
8 |
9 | return props.contentTitle
10 | ? `Save ${props.contentTitle} to myFT for later`
11 | : 'Save this article to myFT for later'
12 | }
13 |
14 | return (
15 |
47 | )
48 | }
49 |
--------------------------------------------------------------------------------
/components/x-gift-article/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@financial-times/x-gift-article",
3 | "version": "0.0.0",
4 | "description": "This module provides gift article form",
5 | "main": "dist/GiftArticle.cjs.js",
6 | "browser": "dist/GiftArticle.es5.js",
7 | "module": "dist/GiftArticle.esm.js",
8 | "style": "src/main.scss",
9 | "scripts": {
10 | "build": "node rollup.js",
11 | "start": "node rollup.js --watch"
12 | },
13 | "keywords": [
14 | "x-dash"
15 | ],
16 | "author": "",
17 | "license": "ISC",
18 | "dependencies": {
19 | "@financial-times/x-engine": "file:../../packages/x-engine",
20 | "@financial-times/x-interaction": "file:../x-interaction",
21 | "classnames": "^2.2.6"
22 | },
23 | "devDependencies": {
24 | "@financial-times/x-rollup": "file:../../packages/x-rollup",
25 | "check-engine": "^1.10.1",
26 | "sass": "^1.49.0"
27 | },
28 | "engines": {
29 | "node": "16.x || 18.x || 20.x",
30 | "npm": "7.x || 8.x || 9.x || 10.x"
31 | },
32 | "volta": {
33 | "extends": "../../package.json"
34 | },
35 | "peerDependencies": {
36 | "@financial-times/o-banner": "^5.0.0",
37 | "@financial-times/o-forms": "^10.0.1",
38 | "@financial-times/o-labels": "^7.0.0",
39 | "@financial-times/o-loading": "^6.0.0",
40 | "@financial-times/o-message": "^6.0.0",
41 | "@financial-times/o-share": "^11.0.0",
42 | "@financial-times/o-visual-effects": "^5.0.1",
43 | "@financial-times/o3-button": "^3.0.1",
44 | "@financial-times/o3-foundation": "^3.1.0"
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/components/x-topic-search/storybook/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { TopicSearch } from '../src/TopicSearch'
3 | import BuildService from '../../../.storybook/build-service'
4 |
5 | import '../src/TopicSearch.scss'
6 |
7 | // Set up basic document styling using the Origami build service
8 | const dependencies = {
9 | 'o-fonts': '^5.3.0'
10 | }
11 |
12 | export default {
13 | title: 'x-topic-search'
14 | }
15 |
16 | export const _TopicSearchBar = (args) => {
17 | return (
18 |
39 |
40 |
41 |
42 |
44 |
19 |
22 | )
23 | }
24 |
25 | _TopicSearchBar.args = {
26 | minSearchLength: 2,
27 | maxSuggestions: 10,
28 | apiUrl: '//tag-facets-api.ft.com/annotations',
29 | followedTopicIds: ['f95d1e16-2307-4feb-b3ff-6f224798aa49'],
30 | csrfToken: 'csrfToken'
31 | }
32 |
33 | _TopicSearchBar.argTypes = {
34 | minSearchLength: { name: 'Minimum search start length' },
35 | maxSuggestions: { name: 'Maximum sugggestions to show' },
36 | apiUrl: { name: 'URL of the API to use' },
37 | followedTopicIds: {
38 | type: 'select',
39 | name: 'Followed Topics',
40 | options: {
41 | None: [],
42 | 'World Elephant Water Polo': ['f95d1e16-2307-4feb-b3ff-6f224798aa49'],
43 | 'Brexit, Britain after Brexit, Brexit Unspun Podcast': [
44 | '19b95057-4614-45fb-9306-4d54049354db',
45 | '464cc2f2-395e-4c36-bb29-01727fc95558',
46 | 'c4e899ed-157e-4446-86f0-5a65803dc07a'
47 | ]
48 | }
49 | },
50 | csrfToken: { name: 'CSRF Token' }
51 | }
52 |
--------------------------------------------------------------------------------
/components/x-teaser/src/Teaser.jsx:
--------------------------------------------------------------------------------
1 | import { h } from '@financial-times/x-engine'
2 | import Container from './Container'
3 | import Content from './Content'
4 | import CustomSlot from './CustomSlot'
5 | import Headshot from './Headshot'
6 | import Image from './Image'
7 | import Meta from './Meta'
8 | import RelatedLinks from './RelatedLinks'
9 | import Status from './Status'
10 | import Standfirst from './Standfirst'
11 | import Title from './Title'
12 | import Video from './Video'
13 | import PromotionalContent from './PromotionaContent'
14 | import { media } from './concerns/rules'
15 | import presets from './concerns/presets'
16 |
17 | const Teaser = (props) => (
18 |
21 | onChange(value)}
30 | />
31 |
47 |
48 | )
49 | }
50 |
--------------------------------------------------------------------------------
/components/x-gift-article/storybook/share-article-modal-no-credits-mpr-version.jsx:
--------------------------------------------------------------------------------
1 | const articleId = 'e4b5ade3-01d1-4db8-b197-257051656684'
2 | const articleUrl = 'https://www.ft.com/content/e4b5ade3-01d1-4db8-b197-257051656684'
3 | const articleUrlRedeemed = 'https://enterprise-sharing.ft.com/gift-url-redeemed'
4 | const nonGiftArticleUrl = `${articleUrl}?shareType=nongift`
5 |
6 | exports.args = {
7 | title: 'Share this article',
8 | isFreeArticle: false,
9 | isMPRArticle: true,
10 | article: {
11 | id: articleId,
12 | url: articleUrl,
13 | title: 'Equinor and Daimler Truck cut Russia ties as Volvo and JLR halt car deliveries'
14 | },
15 | id: 'base-gift-article-static-id',
16 | enterpriseApiBaseUrl: `https://enterprise-sharing-api.ft.com`
17 | }
18 |
19 | exports.fetchMock = (fetchMock) => {
20 | fetchMock
21 | .restore()
22 | .get('path:/article/gift-credits', {
23 | allowance: 20,
24 | consumedCredits: 20,
25 | remainingCredits: 0,
26 | renewalDate: '2018-08-01T00:00:00Z'
27 | })
28 | .get(`path:/article/shorten-url/${encodeURIComponent(articleUrlRedeemed)}`, {
29 | shortenedUrl: 'https://shortened-gift-url'
30 | })
31 | .get(`path:/article/shorten-url/${encodeURIComponent(nonGiftArticleUrl)}`, {
32 | shortenedUrl: 'https://shortened-non-gift-url'
33 | })
34 | .get(`path:/article/gift-link/${encodeURIComponent(articleId)}`, {
35 | redemptionUrl: articleUrlRedeemed,
36 | redemptionLimit: 3,
37 | remainingAllowance: 1
38 | })
39 | .get('path:/v1/users/me/allowance', 403)
40 | .post('path:/v1/shares', {
41 | url: articleUrlRedeemed,
42 | redeemLimit: 120
43 | })
44 | }
45 |
--------------------------------------------------------------------------------
/e2e/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "x-dash-e2e",
3 | "version": "0.0.0",
4 | "private": true,
5 | "description": "This module enables you to write x-dash components that respond to events and change their own data.",
6 | "keywords": [
7 | "x-dash"
8 | ],
9 | "author": "",
10 | "license": "ISC",
11 | "main": "index.js",
12 | "x-dash": {
13 | "engine": {
14 | "server": {
15 | "runtime": "react",
16 | "factory": "createElement",
17 | "component": "Component",
18 | "fragment": "Fragment",
19 | "renderModule": "react-dom/server",
20 | "render": "renderToStaticMarkup"
21 | },
22 | "browser": "react"
23 | }
24 | },
25 | "repository": {
26 | "type": "git",
27 | "url": "https://github.com/Financial-Times/x-dash.git"
28 | },
29 | "engines": {
30 | "node": "16.x || 18.x || 20.x",
31 | "npm": "7.x || 8.x || 9.x || 10.x"
32 | },
33 | "publishConfig": {
34 | "access": "public"
35 | },
36 | "dependencies": {
37 | "react": "^17.0.2",
38 | "react-dom": "^17.0.2",
39 | "@financial-times/x-engine": "file:../packages/x-engine",
40 | "@financial-times/x-interaction": "file:../components/x-interaction"
41 | },
42 | "devDependencies": {
43 | "@babel/core": "^7.17.4",
44 | "babel-loader": "^8.2.3",
45 | "check-engine": "^1.10.1",
46 | "puppeteer": "^10.4.0",
47 | "webpack": "^4.46.0",
48 | "webpack-cli": "^4.8.0"
49 | },
50 | "scripts": {
51 | "pretest": "webpack",
52 | "test": "jest -c jest.e2e.config.js"
53 | },
54 | "volta": {
55 | "extends": "../package.json"
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/components/x-gift-article/storybook/share-article-modal-b2b-save-highlights-message.jsx:
--------------------------------------------------------------------------------
1 | const articleId = 'e4b5ade3-01d1-4db8-b197-257051656684'
2 | const articleUrl = 'https://www.ft.com/content/e4b5ade3-01d1-4db8-b197-257051656684'
3 | const articleUrlRedeemed = 'https://enterprise-sharing.ft.com/gift-url-redeemed'
4 | const nonGiftArticleUrl = `${articleUrl}?shareType=nongift`
5 |
6 | exports.args = {
7 | title: 'Share this article with:',
8 | isFreeArticle: false,
9 | article: {
10 | id: articleId,
11 | url: articleUrl,
12 | title: 'Equinor and Daimler Truck cut Russia ties as Volvo and JLR halt car deliveries'
13 | },
14 | id: 'base-gift-article-static-id',
15 | enterpriseApiBaseUrl: `https://enterprise-sharing-api.ft.com`,
16 | showHighlightsCheckbox: false
17 | }
18 |
19 | exports.fetchMock = (fetchMock) => {
20 | fetchMock
21 | .restore()
22 | .get('path:/article/gift-credits', {
23 | allowance: 20,
24 | consumedCredits: 5,
25 | remainingCredits: 15,
26 | renewalDate: '2018-08-01T00:00:00Z'
27 | })
28 | .get(`path:/article/shorten-url/${encodeURIComponent(articleUrlRedeemed)}`, {
29 | shortenedUrl: 'https://shortened-gift-url'
30 | })
31 | .get(`path:/article/shorten-url/${encodeURIComponent(nonGiftArticleUrl)}`, {
32 | shortenedUrl: 'https://shortened-non-gift-url'
33 | })
34 | .get(`path:/article/gift-link/${encodeURIComponent(articleId)}`, {
35 | redemptionUrl: articleUrlRedeemed,
36 | redemptionLimit: 3,
37 | remainingAllowance: 1
38 | })
39 | .get('path:/v1/users/me/allowance', 403)
40 | .post('path:/v1/shares', {
41 | url: articleUrlRedeemed,
42 | redeemLimit: 120
43 | })
44 | }
45 |
--------------------------------------------------------------------------------
/components/x-follow-button/storybook/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { FollowButton } from '../src/FollowButton'
3 | import BuildService from '../../../.storybook/build-service'
4 |
5 | import '../src/styles/main.scss'
6 |
7 | const dependencies = {
8 | 'o-fonts': '^5.3.0'
9 | }
10 |
11 | export default {
12 | title: 'x-follow-button'
13 | }
14 |
15 | export const _FollowButton = (args) => (
16 |
17 |
43 | )
44 |
45 | _FollowButton.args = {
46 | conceptNameAsButtonText: false,
47 | isFollowed: false,
48 | conceptName: 'UK politics & policy',
49 | followPlusDigestEmail: true
50 | }
51 |
--------------------------------------------------------------------------------
/components/x-teaser/src/concerns/rules.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Rules are sets of exclusive properties.
3 | * They are used to ensure that only one property can take precedence.
4 | */
5 | const rulesets = {
6 | media: (props) => {
7 | // If this condition evaluates to true then no headshot nor image will be displayed.
8 | if (props.showVideo && props.video && props.video.url) {
9 | return 'video'
10 | }
11 |
12 | if (props.showHeadshot && props.headshot && props.indicators.isColumn) {
13 | return 'headshot'
14 | }
15 |
16 | if (props.showImage && props.image && props.image.url) {
17 | return 'image'
18 | }
19 |
20 | if (props.showPromotionalContent && props.promotionalContent) {
21 | return 'promotionalContent'
22 | }
23 | },
24 | theme: (props) => {
25 | if (props.theme) {
26 | return props.theme
27 | }
28 |
29 | if (props.status === 'inprogress' && props.allowLiveTeaserStyling) {
30 | return 'live'
31 | }
32 |
33 | if (props.indicators && props.indicators.isOpinion) {
34 | return 'opinion'
35 | }
36 |
37 | if (props.indicators && props.indicators.isEditorsChoice) {
38 | return 'highlight'
39 | }
40 |
41 | if (props.parentTheme) {
42 | return props.parentTheme
43 | }
44 | }
45 | }
46 |
47 | /**
48 | * Rules
49 | * @param {String} rule
50 | * @param {Props} props
51 | * @returns {String|null}
52 | */
53 | export default function rules(rule, props) {
54 | if (rulesets.hasOwnProperty(rule)) {
55 | return rulesets[rule](props)
56 | } else {
57 | throw Error(`No ruleset available named ${rule}`)
58 | }
59 | }
60 |
61 | export const media = (props) => rules('media', props)
62 | export const theme = (props) => rules('theme', props)
63 |
--------------------------------------------------------------------------------
/components/x-teaser/__fixtures__/top-story.json:
--------------------------------------------------------------------------------
1 | {
2 | "type": "article",
3 | "id": "",
4 | "url": "#",
5 | "title": "Inside charity fundraiser where hostesses are put on show",
6 | "altTitle": "Men Only, the charity fundraiser with hostesses on show",
7 | "standfirst": "FT investigation finds groping and sexual harassment at secretive black-tie dinner",
8 | "altStandfirst": "Groping and sexual harassment at black-tie dinner charity event",
9 | "publishedDate": "2018-01-23T15:07:00.000Z",
10 | "firstPublishedDate": "2018-01-23T13:53:00.000Z",
11 | "dataTrackable": "slice:hero-slice-1;slicePos:1;layout:standaloneimage;listPos:1",
12 | "metaPrefixText": "",
13 | "metaSuffixText": "",
14 | "metaLink": {
15 | "url": "#",
16 | "prefLabel": "Sexual misconduct allegations"
17 | },
18 | "metaAltLink": {
19 | "url": "#",
20 | "prefLabel": "FT Investigations"
21 | },
22 | "image": {
23 | "url": "http://prod-upp-image-read.ft.com/a25832ea-0053-11e8-9650-9c0ad2d7c5b5",
24 | "width": 2048,
25 | "height": 1152
26 | },
27 | "relatedLinks": [
28 | {
29 | "id": "",
30 | "relativeUrl": "#",
31 | "type": "article",
32 | "title": "Removing the fig leaf of charity"
33 | },
34 | {
35 | "id": "",
36 | "relativeUrl": "#",
37 | "type": "article",
38 | "title": "A dinner that demeaned both women and men"
39 | },
40 | {
41 | "id": "",
42 | "relativeUrl": "#",
43 | "type": "video",
44 | "title": "PM speaks out after Presidents Club dinner"
45 | }
46 | ],
47 | "status": "",
48 | "headshotTint": "",
49 | "accessLevel": "free",
50 | "theme": "",
51 | "parentTheme": "",
52 | "modifiers": ""
53 | }
54 |
--------------------------------------------------------------------------------
/components/x-gift-article/storybook/share-article-modal-b2c.jsx:
--------------------------------------------------------------------------------
1 | const articleId = 'e4b5ade3-01d1-4db8-b197-257051656684'
2 | const articleUrl = 'https://www.ft.com/content/e4b5ade3-01d1-4db8-b197-257051656684'
3 | const articleUrlRedeemed = 'https://enterprise-sharing.ft.com/gift-url-redeemed'
4 | const nonGiftArticleUrl = `${articleUrl}?shareType=nongift`
5 |
6 | exports.args = {
7 | title: 'Share this article with:',
8 | isFreeArticle: false,
9 | article: {
10 | id: articleId,
11 | url: articleUrl,
12 | title: 'Equinor and Daimler Truck cut Russia ties as Volvo and JLR halt car deliveries'
13 | },
14 | id: 'base-gift-article-static-id',
15 | enterpriseApiBaseUrl: `https://enterprise-sharing-api.ft.com`
16 | }
17 |
18 | exports.fetchMock = (fetchMock) => {
19 | fetchMock
20 | .restore()
21 | .get('path:/article/gift-credits', {
22 | allowance: 20,
23 | consumedCredits: 5,
24 | remainingCredits: 15,
25 | renewalDate: '2018-08-01T00:00:00Z'
26 | })
27 | .get(`path:/article/shorten-url/${encodeURIComponent(articleUrlRedeemed)}`, {
28 | shortenedUrl: 'https://shortened-gift-url'
29 | })
30 | .get(`path:/article/shorten-url/${encodeURIComponent(nonGiftArticleUrl)}`, {
31 | shortenedUrl: 'https://shortened-non-gift-url'
32 | })
33 | .get(`path:/article/gift-link/${encodeURIComponent(articleId)}`, {
34 | redemptionUrl: articleUrlRedeemed,
35 | redemptionLimit: 3,
36 | remainingAllowance: 1
37 | })
38 | .get(
39 | 'path:/v1/users/me/allowance',
40 | new Response(
41 | JSON.stringify({
42 | message: 'NotFoundError: b2c'
43 | }),
44 | { status: 404 }
45 | )
46 | )
47 | .post('path:/v1/shares', {
48 | url: articleUrlRedeemed,
49 | redeemLimit: 120
50 | })
51 | }
52 |
--------------------------------------------------------------------------------
/components/x-gift-article/storybook/share-article-modal-with-advanced-sharing-save-highlights-message.jsx:
--------------------------------------------------------------------------------
1 | const articleId = 'e4b5ade3-01d1-4db8-b197-257051656684'
2 | const articleUrl = 'https://www.ft.com/content/e4b5ade3-01d1-4db8-b197-257051656684'
3 | const articleUrlRedeemed = 'https://enterprise-sharing.ft.com/gift-url-redeemed'
4 | const nonGiftArticleUrl = `${articleUrl}?shareType=nongift`
5 |
6 | exports.args = {
7 | title: 'Share this article with:',
8 | isFreeArticle: false,
9 | article: {
10 | id: articleId,
11 | url: articleUrl,
12 | title: 'Equinor and Daimler Truck cut Russia ties as Volvo and JLR halt car deliveries'
13 | },
14 | id: 'base-gift-article-static-id',
15 | enterpriseApiBaseUrl: `https://enterprise-sharing-api.ft.com`,
16 | showHighlightsCheckbox: false
17 | }
18 |
19 | exports.fetchMock = (fetchMock) => {
20 | fetchMock
21 | .restore()
22 | .get('path:/article/gift-credits', {
23 | allowance: 20,
24 | consumedCredits: 5,
25 | remainingCredits: 15,
26 | renewalDate: '2018-08-01T00:00:00Z'
27 | })
28 | .get(`path:/article/shorten-url/${encodeURIComponent(articleUrlRedeemed)}`, {
29 | shortenedUrl: 'https://shortened-gift-url'
30 | })
31 | .get(`path:/article/shorten-url/${encodeURIComponent(nonGiftArticleUrl)}`, {
32 | shortenedUrl: 'https://shortened-non-gift-url'
33 | })
34 | .get(`path:/article/gift-link/${encodeURIComponent(articleId)}`, {
35 | redemptionUrl: articleUrlRedeemed,
36 | redemptionLimit: 3,
37 | remainingAllowance: 1
38 | })
39 | .get('path:/v1/users/me/allowance', {
40 | limit: 120,
41 | budget: 100,
42 | hasCredits: true
43 | })
44 | .post('path:/v1/shares', {
45 | url: articleUrlRedeemed,
46 | redeemLimit: 120
47 | })
48 | }
49 |
--------------------------------------------------------------------------------
/components/x-gift-article/storybook/share-article-modal-b2c-free-article.jsx:
--------------------------------------------------------------------------------
1 | const articleId = 'e4b5ade3-01d1-4db8-b197-257051656684'
2 | const articleUrl = 'https://www.ft.com/content/e4b5ade3-01d1-4db8-b197-257051656684'
3 | const articleUrlRedeemed = 'https://enterprise-sharing.ft.com/gift-url-redeemed'
4 | const nonGiftArticleUrl = `${articleUrl}?shareType=nongift`
5 |
6 | exports.args = {
7 | title: 'Share this article with:',
8 | isFreeArticle: true,
9 | article: {
10 | id: articleId,
11 | url: articleUrl,
12 | title: 'Equinor and Daimler Truck cut Russia ties as Volvo and JLR halt car deliveries'
13 | },
14 | id: 'base-gift-article-static-id',
15 | enterpriseApiBaseUrl: `https://enterprise-sharing-api.ft.com`
16 | }
17 |
18 | exports.fetchMock = (fetchMock) => {
19 | fetchMock
20 | .restore()
21 | .get('path:/article/gift-credits', {
22 | allowance: 20,
23 | consumedCredits: 5,
24 | remainingCredits: 15,
25 | renewalDate: '2018-08-01T00:00:00Z'
26 | })
27 | .get(`path:/article/shorten-url/${encodeURIComponent(articleUrlRedeemed)}`, {
28 | shortenedUrl: 'https://shortened-gift-url'
29 | })
30 | .get(`path:/article/shorten-url/${encodeURIComponent(nonGiftArticleUrl)}`, {
31 | shortenedUrl: 'https://shortened-non-gift-url'
32 | })
33 | .get(`path:/article/gift-link/${encodeURIComponent(articleId)}`, {
34 | redemptionUrl: articleUrlRedeemed,
35 | redemptionLimit: 3,
36 | remainingAllowance: 1
37 | })
38 | .get(
39 | 'path:/v1/users/me/allowance',
40 | new Response(
41 | JSON.stringify({
42 | message: 'NotFoundError: b2c'
43 | }),
44 | { status: 404 }
45 | )
46 | )
47 | .post('path:/v1/shares', {
48 | url: articleUrlRedeemed,
49 | redeemLimit: 120
50 | })
51 | }
52 |
--------------------------------------------------------------------------------
/components/x-gift-article/storybook/share-article-modal-b2c-no-credits.jsx:
--------------------------------------------------------------------------------
1 | const articleId = 'e4b5ade3-01d1-4db8-b197-257051656684'
2 | const articleUrl = 'https://www.ft.com/content/e4b5ade3-01d1-4db8-b197-257051656684'
3 | const articleUrlRedeemed = 'https://enterprise-sharing.ft.com/gift-url-redeemed'
4 | const nonGiftArticleUrl = `${articleUrl}?shareType=nongift`
5 |
6 | exports.args = {
7 | title: 'Share this article with:',
8 | isFreeArticle: false,
9 | article: {
10 | id: articleId,
11 | url: articleUrl,
12 | title: 'Equinor and Daimler Truck cut Russia ties as Volvo and JLR halt car deliveries'
13 | },
14 | id: 'base-gift-article-static-id',
15 | enterpriseApiBaseUrl: `https://enterprise-sharing-api.ft.com`
16 | }
17 |
18 | exports.fetchMock = (fetchMock) => {
19 | fetchMock
20 | .restore()
21 | .get('path:/article/gift-credits', {
22 | allowance: 20,
23 | consumedCredits: 20,
24 | remainingCredits: 0,
25 | renewalDate: '2018-08-01T00:00:00Z'
26 | })
27 | .get(`path:/article/shorten-url/${encodeURIComponent(articleUrlRedeemed)}`, {
28 | shortenedUrl: 'https://shortened-gift-url'
29 | })
30 | .get(`path:/article/shorten-url/${encodeURIComponent(nonGiftArticleUrl)}`, {
31 | shortenedUrl: 'https://shortened-non-gift-url'
32 | })
33 | .get(`path:/article/gift-link/${encodeURIComponent(articleId)}`, {
34 | redemptionUrl: articleUrlRedeemed,
35 | redemptionLimit: 3,
36 | remainingAllowance: 1
37 | })
38 | .get(
39 | 'path:/v1/users/me/allowance',
40 | new Response(
41 | JSON.stringify({
42 | message: 'NotFoundError: b2c'
43 | }),
44 | { status: 404 }
45 | )
46 | )
47 | .post('path:/v1/shares', {
48 | url: articleUrlRedeemed,
49 | redeemLimit: 120
50 | })
51 | }
52 |
--------------------------------------------------------------------------------
/components/x-gift-article/storybook/share-article-modal-registered.jsx:
--------------------------------------------------------------------------------
1 | const articleId = 'e4b5ade3-01d1-4db8-b197-257051656684'
2 | const articleUrl = 'https://www.ft.com/content/e4b5ade3-01d1-4db8-b197-257051656684'
3 | const articleUrlRedeemed = 'https://enterprise-sharing.ft.com/gift-url-redeemed'
4 | const nonGiftArticleUrl = `${articleUrl}?shareType=nongift`
5 |
6 | exports.args = {
7 | title: 'Share this article with:',
8 | isFreeArticle: false,
9 | article: {
10 | id: articleId,
11 | url: articleUrl,
12 | title: 'Equinor and Daimler Truck cut Russia ties as Volvo and JLR halt car deliveries'
13 | },
14 | id: 'base-gift-article-static-id',
15 | enterpriseApiBaseUrl: `https://enterprise-sharing-api.ft.com`
16 | }
17 |
18 | exports.fetchMock = (fetchMock) => {
19 | fetchMock
20 | .restore()
21 | .get('path:/article/gift-credits', {
22 | allowance: 20,
23 | consumedCredits: 5,
24 | remainingCredits: 15,
25 | renewalDate: '2018-08-01T00:00:00Z'
26 | })
27 | .get(`path:/article/shorten-url/${encodeURIComponent(articleUrlRedeemed)}`, {
28 | shortenedUrl: 'https://shortened-gift-url'
29 | })
30 | .get(`path:/article/shorten-url/${encodeURIComponent(nonGiftArticleUrl)}`, {
31 | shortenedUrl: 'https://shortened-non-gift-url'
32 | })
33 | .get(`path:/article/gift-link/${encodeURIComponent(articleId)}`, {
34 | redemptionUrl: articleUrlRedeemed,
35 | redemptionLimit: 3,
36 | remainingAllowance: 1
37 | })
38 | .get(
39 | 'path:/v1/users/me/allowance',
40 | new Response(
41 | JSON.stringify({
42 | message: 'NotFoundError: registered'
43 | }),
44 | { status: 404 }
45 | )
46 | )
47 | .post('path:/v1/shares', {
48 | url: articleUrlRedeemed,
49 | redeemLimit: 120
50 | })
51 | }
52 |
--------------------------------------------------------------------------------
/components/x-teaser-timeline/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@financial-times/x-teaser-timeline",
3 | "version": "0.0.0",
4 | "description": "Display a list of teasers grouped by day and/or last visit time",
5 | "main": "dist/TeaserTimeline.cjs.js",
6 | "module": "dist/TeaserTimeline.esm.js",
7 | "browser": "dist/TeaserTimeline.es5.js",
8 | "style": "src/TeaserTimeline.scss",
9 | "types": "typings/x-teaser-timeline.d.ts",
10 | "scripts": {
11 | "build": "node rollup.js",
12 | "start": "node rollup.js --watch"
13 | },
14 | "keywords": [
15 | "x-dash"
16 | ],
17 | "author": "",
18 | "license": "ISC",
19 | "dependencies": {
20 | "@financial-times/x-article-save-button": "file:../x-article-save-button",
21 | "@financial-times/x-engine": "file:../../packages/x-engine",
22 | "@financial-times/x-teaser": "file:../x-teaser",
23 | "date-fns": "^2.30.0"
24 | },
25 | "devDependencies": {
26 | "@financial-times/o-grid": "^6.1.8",
27 | "@financial-times/x-rollup": "file:../../packages/x-rollup",
28 | "@financial-times/x-test-utils": "file:../../packages/x-test-utils",
29 | "check-engine": "^1.10.1",
30 | "sass": "^1.49.0"
31 | },
32 | "repository": {
33 | "type": "git",
34 | "url": "https://github.com/Financial-Times/x-dash.git"
35 | },
36 | "homepage": "https://github.com/Financial-Times/x-dash/tree/HEAD/components/x-teaser-timeline",
37 | "engines": {
38 | "node": "16.x || 18.x || 20.x",
39 | "npm": "7.x || 8.x || 9.x || 10.x"
40 | },
41 | "publishConfig": {
42 | "access": "public"
43 | },
44 | "volta": {
45 | "extends": "../../package.json"
46 | },
47 | "peerDependencies": {
48 | "@financial-times/o-grid": "^6.1.8",
49 | "@financial-times/o3-foundation": "^3.1.0"
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/components/x-gift-article/src/lib/highlightsApi.js:
--------------------------------------------------------------------------------
1 | import { HIGHLIGHTS_BASE_URL } from './constants'
2 |
3 | export default class HighlightsApiClient {
4 | constructor(baseUrl = HIGHLIGHTS_BASE_URL) {
5 | this.baseUrl = baseUrl
6 | }
7 |
8 | /**
9 | * Concatenates protocol, domain and path URLs.
10 | * @param {string} path URL Path
11 | * @returns {string} Fetch URL
12 | * @throws {Error} if baseURL is empty
13 | */
14 | getFetchUrl(path) {
15 | if (!this.baseUrl) {
16 | throw new Error('User Annotations API base url missing')
17 | }
18 |
19 | return `${this.baseUrl}${path}`
20 | }
21 |
22 | /**
23 | * Makes a fetch request to the path with additional options
24 | * @param {string} path URL path
25 | * @param {RequestInit} additionalOptions fetch additional options
26 | * @returns {Promise
19 |
22 | Standard
20 |
23 |
26 | Inverse
24 |
27 |
30 | Opinion
28 |
31 |
34 | Alphaville
32 |
35 |
38 | Monochrome
36 |
39 |
42 | Inverse Monochrome
40 |