@financial-times/dotcom-ui-base-styles 12.2.1 → 12.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +21 -17
  2. package/browser.js +0 -6
  3. package/package.json +3 -5
  4. package/sass/grid/main.scss +22 -0
  5. package/sass/typography/main.scss +25 -0
  6. package/sass/util/main.scss +24 -0
  7. package/styles.scss +27 -9
package/README.md CHANGED
@@ -1,23 +1,30 @@
1
1
  # @financial-times/dotcom-ui-base-styles
2
2
 
3
- This new package provides the global document styles for FT.com, including normalisation styles, basic typography, focus states, and `o-grid`.
4
-
5
- _Please note_ the initial goal of this package is to centralise all of the required pieces for the progressive font loading technique provided by [`o-typography`](https://github.com/Financial-Times/o-typography/#progressive-loading-web-fonts) and create a placeholder for the future inclusion of global styles from `n-ui-foundations`.
6
-
3
+ This package provides the global document styles for FT.com, including normalisation styles, basic typography, and grid styles, provided by [Origami](https://github.com/financial-times/origami) components.
7
4
 
8
5
  ## Getting started
9
6
 
10
- This package is compatible with Node 12+ and is distributed on npm.
11
-
12
7
  ```bash
13
8
  npm install --save @financial-times/dotcom-ui-base-styles
14
9
  ```
15
10
 
16
11
  After installing the package you can use it to embed the progressive font loading hooks and document styles into your pages on the server-side and initialise the font loading on client-side.
17
12
 
18
- ### Server-side
13
+ ## Usage in apps
14
+
15
+ ### Styles
19
16
 
20
- If you are using React to render your app you should use the `LoadFontsEmbed` component along with the `loadCustomFontsClassNames` and `documentStyles` variables to integrate font loading and document styles with your pages:
17
+ `dotcom-ui-base-styles` provides styles which should be imported into your application's main stylesheet:
18
+
19
+ ```scss
20
+ @import '@financial-times/dotcom-ui-base-styles/styles';
21
+ ```
22
+
23
+ ### Critical styles and font preloading
24
+
25
+ `dotcom-ui-base-styles` allows apps to HTTP-preload Origami's fonts, and provides baseline styles to be rendered as a `style` attribute on the `<html>` tag, to reduce [flash of unstyled content (FOUC)](https://en.wikipedia.org/wiki/Flash_of_unstyled_content).
26
+
27
+ If you are using React to render your app, render the `LoadFontsEmbed` component along with the `loadCustomFontsClassNames` and `documentStyles` variables to integrate font loading and document styles with your pages:
21
28
 
22
29
  ```jsx
23
30
  import {
@@ -40,7 +47,7 @@ export default (props) => (
40
47
  )
41
48
  ```
42
49
 
43
- Otherwise you can insert the code snippet into a `<script>` element:
50
+ Otherwise, you can insert the code snippet into a `<script>` element:
44
51
 
45
52
  ```js
46
53
  const {
@@ -64,11 +71,9 @@ function page() {
64
71
  }
65
72
  ```
66
73
 
67
- ### Client-side
68
-
69
- Once you are rendering the styles, class names, and code snippets in your page you will need to initialise the client-side code.
74
+ ### Client-side Javascript
70
75
 
71
- To initialise the client-side JavaScript import the package and call the `.init()` method:
76
+ `dotcom-ui-base-styles`'s font loader requires client-side Javascript to work. Import the package in your client-side entry point, and call the `.init()` method:
72
77
 
73
78
  ```js
74
79
  import * as baseStyles from '@financial-times/dotcom-ui-base-styles'
@@ -76,8 +81,7 @@ import * as baseStyles from '@financial-times/dotcom-ui-base-styles'
76
81
  baseStyles.init()
77
82
  ```
78
83
 
79
- This component also provides styles written in Sass which should be imported into your application's main Sass stylesheet:
84
+ ### Components
80
85
 
81
- ```scss
82
- @import '@financial-times/dotcom-ui-base-styles/styles';
83
- ```
86
+ > [!WARNING]
87
+ > `n-ui-foundations`, the predecessor of `dotcom-ui-base-styles`, provided common Origami dependencies for apps and components. `dotcom-ui-base-styles` only supports apps. For components, you should directly depend on and use the Origami components you require.
package/browser.js CHANGED
@@ -1,11 +1,5 @@
1
1
  import oTypography from '@financial-times/o-typography'
2
2
 
3
- // Polyfill for :focus-visible https://github.com/WICG/focus-visible
4
- // NOTE: v5 of this polyfill is not yet supported by o-normalise
5
- // https://github.com/WICG/focus-visible/pull/196/files
6
- // https://github.com/Financial-Times/o-normalise/issues/41
7
- import 'focus-visible'
8
-
9
3
  export function init() {
10
4
  oTypography.init()
11
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@financial-times/dotcom-ui-base-styles",
3
- "version": "12.2.1",
3
+ "version": "12.3.1",
4
4
  "description": "",
5
5
  "main": "component.js",
6
6
  "browser": "browser.js",
@@ -20,15 +20,12 @@
20
20
  "keywords": [],
21
21
  "author": "",
22
22
  "license": "MIT",
23
- "dependencies": {
24
- "focus-visible": "^5.0.0"
25
- },
26
23
  "devDependencies": {
27
24
  "@financial-times/o-typography": "^7.2.0"
28
25
  },
29
26
  "peerDependencies": {
30
27
  "@financial-times/o-typography": "^7.2.0",
31
- "n-ui-foundations": "^9.0.0 || ^10.0.0",
28
+ "@financial-times/o3-foundation": "^2.1.0",
32
29
  "react": "17.x || 18.x"
33
30
  },
34
31
  "engines": {
@@ -37,6 +34,7 @@
37
34
  "files": [
38
35
  "dist/",
39
36
  "src/",
37
+ "sass/",
40
38
  "browser.js",
41
39
  "component.js",
42
40
  "styles.scss"
package/sass/grid/main.scss ADDED
@@ -0,0 +1,22 @@
1
+ @import '@financial-times/o-grid/main';
2
+
3
+ @mixin dotcomUiGrid {
4
+ @include oGrid($opts: (
5
+ 'bleed': true,
6
+ 'snappy': true,
7
+ 'shuffle-selectors': false,
8
+ 'friendly-selectors': false,
9
+ 'surface': ('current-layout'),
10
+ 'rows': ('compact')
11
+ ));
12
+
13
+ // We have disabled "friendly selectors" but output this one as it's useful
14
+ [data-o-grid-colspan~="center"] {
15
+ @include oGridCenter();
16
+ }
17
+ }
18
+
19
+ @mixin nUiGrid {
20
+ @warn "the nUiGrid mixin has been renamed dotcomUiGrid";
21
+ @include dotcomUiGrid($use-case);
22
+ }
package/sass/typography/main.scss ADDED
@@ -0,0 +1,25 @@
1
+ @import '@financial-times/o-fonts/main';
2
+ @import '@financial-times/o-typography/main';
3
+
4
+ @mixin dotcomUiTypography {
5
+ @include oFonts($opts: (
6
+ 'financier-display': (
7
+ ('weight': 'regular', 'style': 'normal'),
8
+ ('weight': 'bold', 'style': 'normal'),
9
+ ('weight': 'medium', 'style': 'normal'),
10
+ ),
11
+ 'metric': (
12
+ ('weight': 'regular', 'style': 'normal'),
13
+ ('weight': 'semibold', 'style': 'normal'),
14
+ )
15
+ ));
16
+
17
+ a {
18
+ @include oTypographyLink();
19
+ }
20
+ }
21
+
22
+ @mixin nUiTypography($use-case) {
23
+ @warn "the nUiTypography mixin has been renamed dotcomUiTypography";
24
+ @include dotcomUiTypography($use-case);
25
+ }
package/sass/util/main.scss ADDED
@@ -0,0 +1,24 @@
1
+ @import '@financial-times/o-normalise/main';
2
+
3
+ @mixin dotcomUiUtil {
4
+ //
5
+ // Display
6
+ //
7
+ .n-ui-hide {
8
+ display: none;
9
+ }
10
+
11
+ .no-js .n-ui-hide-no-js,
12
+ .js .n-ui-hide-js,
13
+ .core .n-ui-hide-core,
14
+ .enhanced .n-ui-hide-enhanced,
15
+ .core .o--if-js,
16
+ .enhanced .o--if-no-js {
17
+ display: none !important;
18
+ }
19
+ }
20
+
21
+ @mixin nUiUtil {
22
+ @warn "the nUiUtil mixin has been renamed dotcomUiUtil";
23
+ @include dotcomUiUtil($use-case);
24
+ }
package/styles.scss CHANGED
@@ -1,17 +1,35 @@
1
1
  $system-code: 'page-kit-base-styles' !default;
2
2
 
3
+ @import 'sass/grid/main';
4
+ @import 'sass/typography/main';
5
+ @import 'sass/util/main';
6
+ @import '@financial-times/o-icons/main';
7
+ @import '@financial-times/o-colors/main';
8
+ @import '@financial-times/o-normalise/main';
9
+ @import '@financial-times/o-visual-effects/main';
10
+ @import '@financial-times/o3-foundation/css/main.css';
11
+
12
+ @mixin dotcomUiBaseStyles {
13
+ @include oNormalise;
14
+ @include dotcomUiGrid;
15
+ @include dotcomUiTypography;
16
+ @include dotcomUiUtil;
17
+ }
18
+
19
+ @mixin nUiFoundations {
20
+ @warn "the nUiFoundations mixin has been renamed dotcomUiBaseStyles";
21
+ @include dotcomUiBaseStyles;
22
+ }
23
+
3
24
  // NOTE: please also update ./src/lib/fontFaces.ts when updating the URL below. They
4
- // 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)
5
- // 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.
25
+ // 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 dotcom-ui-base-styles)
26
+ // 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 the dotcom-ui-base-styles styles.
6
27
  // 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
7
28
  $o-fonts-path: 'https://www.ft.com/__origami/service/build/v3/font?version=1.12';
8
29
 
9
- // TODO: Migrate into this package existing usage of n-ui-foundations that
10
- // falls under definition of this package, with the intention of ideally
11
- // being able to decommission n-ui-foundations.
12
- @import 'n-ui-foundations/main';
30
+ $dotcom-ui-base-styles-applied: false !default;
13
31
 
14
- .core .o--if-js,
15
- .enhanced .o--if-no-js {
16
- display: none !important;
32
+ @if $dotcom-ui-base-styles-applied == false {
33
+ $dotcom-ui-base-styles-applied: true;
34
+ @include dotcomUiBaseStyles;
17
35
  }