@financial-times/dotcom-ui-base-styles 7.2.7 → 7.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/dotcom-ui-base-styles",
-  "version": "7.2.7",
+  "version": "7.3.1",
   "description": "",
   "main": "component.js",
   "browser": "browser.js",
@@ -8,13 +8,12 @@
   "styles": "styles.scss",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "tsc": "../../node_modules/.bin/tsc --incremental",
     "clean": "npm run clean:dist && npm run clean:node_modules",
     "clean:dist": "rm -rf dist",
     "clean:node_modules": "rm -rf node_modules",
     "clean:install": "npm run clean && npm i",
-    "build:node": "npm run tsc -- --module commonjs --outDir ./dist/node",
-    "build:browser": "npm run tsc -- --module es2015 --outDir ./dist/browser",
+    "build:browser": "tsc --module es2015 --outDir ./dist/browser",
+    "build:node": "tsc",
     "build": "npm run build:node && npm run build:browser",
     "dev": "echo -n node browser | parallel -u -d ' ' npm run build:{} -- --watch",
     "preinstall": "[ \"$INIT_CWD\" != \"$PWD\" ] || npm_config_yes=true npx check-engine"
@@ -24,7 +23,7 @@
   "license": "MIT",
   "dependencies": {
     "focus-visible": "^5.0.0",
-    "n-ui-foundations": "^7.0.0"
+    "n-ui-foundations": "^9.0.0"
   },
   "devDependencies": {
     "check-engine": "^1.10.1",
@@ -39,6 +38,9 @@
     "node": ">= 14.0.0",
     "npm": "7.x || 8.x"
   },
+  "files": [
+    "dist/"
+  ],
   "repository": {
     "type": "git",
     "repository": "https://github.com/Financial-Times/dotcom-page-kit.git",
@@ -48,4 +50,4 @@
   "volta": {
     "extends": "../../package.json"
   }
-}
+}

package/src/components/LoadFontsEmbed.tsx

@@ -1,8 +0,0 @@
-import React from 'react'
-import { loadCustomFontsJS } from '../lib/fontLoading'
-
-function LoadFontsEmbed() {
-  return <script dangerouslySetInnerHTML={{ __html: loadCustomFontsJS }} />
-}
-
-export { LoadFontsEmbed }

package/src/index.ts

@@ -1,4 +0,0 @@
-export * from './components/LoadFontsEmbed'
-export * from './lib/fontLoading'
-export * from './lib/fontFaces'
-export * from './lib/documentStyles'

package/src/lib/documentStyles.ts

@@ -1,10 +0,0 @@
-import { CSSProperties } from 'react'
-
-export const documentStyles: CSSProperties = {
-  // Enable use of 100vw which does not account for the scroll bar
-  overflowX: 'hidden',
-  // o-colors "paper"
-  backgroundColor: '#fff1e5',
-  // o-colors "black-80"
-  color: '#33302e'
-}

package/src/lib/fontFaces.ts

@@ -1,8 +0,0 @@
-// NOTE: please also update dotcom-ui-base-styles/styles.scss $o-fonts-path when updating the URLs defined below. They
-// need to stay in-sync to ensure our CSS output matches the resource hints we set.
-export const fontFaceURLs = [
-  'https://www.ft.com/__origami/service/build/v3/font?font_format=woff2&font_name=MetricWeb-Regular&system_code=origami&version=1.12',
-  'https://www.ft.com/__origami/service/build/v3/font?font_format=woff2&font_name=MetricWeb-Semibold&system_code=origami&version=1.12',
-  'https://www.ft.com/__origami/service/build/v3/font?font_format=woff2&font_name=FinancierDisplayWeb-Regular&system_code=origami&version=1.12',
-  'https://www.ft.com/__origami/service/build/v3/font?font_format=woff2&font_name=FinancierDisplayWeb-Bold&system_code=origami&version=1.12'
-]

package/src/lib/fontLoading.ts

@@ -1,28 +0,0 @@
-// NOTE: Browser caches can be cleared independently of cookies so the
-// presence of the cookie does not necessarily mean the file is still
-// available in the browser's cache.
-
-// NOTE: This function must be written as ES5 code because it will be stringified
-// and embedded in the page to be executed in the browser. This also means all
-// data and variables must be scoped within the function.
-function loadCustomFonts() {
-  var rootElement = document.documentElement
-
-  if (/(^|\s)o-typography-fonts-loaded=1(;|$)/.test(document.cookie)) {
-    var fontLabels = ['sans', 'sans-bold', 'display', 'display-bold']
-
-    for (var i = 0; i < fontLabels.length; i++) {
-      rootElement.className = rootElement.className.replace('o-typography--loading-' + fontLabels[i], '')
-    }
-  }
-}
-
-export const loadCustomFontsJS = `(${loadCustomFonts.toString()}());`
-
-// These class names should be added to the document element (<html>)
-export const loadCustomFontsClassNames = [
-  'o-typography--loading-sans',
-  'o-typography--loading-sans-bold',
-  'o-typography--loading-display',
-  'o-typography--loading-display-bold'
-].join(' ')

package/styles.scss

@@ -1,17 +0,0 @@
-$system-code: 'page-kit-base-styles' !default;
-
-// NOTE: please also update ./src/lib/fontFaces.ts when updating the URL below. They
-// need to stay in-sync to ensure our CSS output matches the resource hints we set, so we don't load the fonts twice (once from resourceHint and once from o-fonts in n-ui-foundations)
-// the $o-fonts-path value here is used to generate the @font-face url https://github.com/Financial-Times/origami/blob/main/components/o-fonts/src/scss/_mixins.scss#L148 that is imported through 'n-ui-foundations/main' styles.
-// we depend on o-fonts's @font-face url instead of explicitly defining it here so we don't have to update page kit again when changing fonts
-$o-fonts-path: 'https://www.ft.com/__origami/service/build/v3/font?version=1.12';
-
-// TODO: Migrate into this package existing usage of n-ui-foundations that
-// falls under definition of this package, with the intention of ideally
-// being able to decommission n-ui-foundations.
-@import 'n-ui-foundations/main';
-
-.core .o--if-js,
-.enhanced .o--if-no-js {
-  display: none !important;
-}