New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@financial-times/o-header

Package Overview
Dependencies
Maintainers
0
Versions
77
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@financial-times/o-header - npm Package Compare versions

Comparing version 12.0.0 to 13.0.0

11

CHANGELOG.md
# Changelog
## [13.0.0](https://github.com/Financial-Times/origami/compare/o-header-v12.0.0...o-header-v13.0.0) (2024-07-05)
### ⚠ BREAKING CHANGES
* Drawer, search, and edition switcher updates ([#1725](https://github.com/Financial-Times/origami/issues/1725))
### Features
* Drawer, search, and edition switcher updates ([#1725](https://github.com/Financial-Times/origami/issues/1725)) ([090d384](https://github.com/Financial-Times/origami/commit/090d38439b2af9475757f3c70ced26e4b08e37dd))
## [12.0.0](https://github.com/Financial-Times/origami/compare/o-header-v11.2.0...o-header-v12.0.0) (2024-05-21)

@@ -3,0 +14,0 @@

48

MIGRATION.md
# Migration Guide
## Migrating from v12 to v13
o-header v13 includes markup changes to the drawer. This updates the edition switcher; moves the close button to align with where the hamburger icon would be when closed; and updates the search bar both in the drawer and on desktop. To migrate:
1. Update your markup according to the [Storybook demo](https://o2-core.origami.ft.com/?path=/story/components-o-header--header-primary&globals=backgrounds:!undefined) or [use o-header's tsx template](https://github.com/Financial-Times/origami/tree/main/components/o-header/src/tsx).
2. Ensure your project uses a compatible version of o-forms. Please upgrade o-forms if you see a dependency conflict upon install.
## Migrating from v11 to v12
o-header v12 includes markup changes in the top right menu, which are included in the top.tsx template within this component. Update your markup as described below or [use o-header's tsx template](https://github.com/Financial-Times/origami/tree/main/components/o-header/src/tsx).
o-header v12 includes markup changes in the top right menu, which are included in the top.tsx template within this component. Update your markup according to the [Storybook demo](https://o2-core.origami.ft.com/?path=/story/components-o-header--header-primary&globals=backgrounds:!undefined) or [use o-header's tsx template](https://github.com/Financial-Times/origami/tree/main/components/o-header/src/tsx).

@@ -29,6 +36,3 @@ ### Removal of the myFT link

```html
<a
className="o-header__top-myaccount"
href="/myaccount"
>
<a className="o-header__top-myaccount" href="/myaccount">
<span>My Account</span>

@@ -41,11 +45,6 @@ </a>

When this is being used in the sticky header a `tabIndex` attribute should be added with a value of `-1`. This ensures that the link is not included in keyboard navigation.
```html
<a
className="o-header__top-myaccount"
href="/myaccount"
tabIndex="-1"
>
<a className="o-header__top-myaccount" href="/myaccount" tabindex="-1">
<span>My Account</span>

@@ -55,3 +54,2 @@ </a>

## Migrating from v10 to v11

@@ -62,5 +60,7 @@

In addition the `subbrand` variant has been removed, as it appears to no longer be used. Ensure there is no use of the `subbrand` variant in your project:
- Check there is no `o-header__subbrand` class reference in your markup.
- Check that the `subbrand` feature is not specifically included with the `oHeader` Sass mixin.
Remove the `subbrand` variant from your project if possible, else contact the Origami team if you still need this feature.
Remove the `subbrand` variant from your project if possible, else contact the Origami team if you still need this feature.
### Markup visual drawer headings

@@ -75,6 +75,7 @@

Before:
```html
<nav>
<ul>
<!-- more list items without heading -->
<!-- more list items without heading -->
</ul>

@@ -85,15 +86,16 @@ </nav>

After:
```html
<nav>
<h2 id="o-header-drawer-top-sections" id='top-sections'>Top sections</h2>
<h2 id="o-header-drawer-top-sections" id="top-sections">Top sections</h2>
<ul aria-labelledby="top-sections">
<!-- list items -->
<!-- list items -->
</ul>
<h2 id="o-header-drawer-top-sections" id='ft-recommends'>FT recommends</h2>
<h2 id="o-header-drawer-top-sections" id="ft-recommends">FT recommends</h2>
<ul aria-labelledby="ft-recommends">
<!-- list items -->
<!-- list items -->
</ul>
<!-- more list items without heading -->
<ul>
<!-- more list items without heading -->
<!-- more list items without heading -->
</ul>

@@ -129,5 +131,7 @@ </nav>

o-header v10 includes markup changes. Use demo markup to update your project. Changes to be aware of include:
- Deprecated markup for the old style of edition switcher has changed. The following classes no longer exist `.o-header__drawer-editions` and `.o-header__drawer-editions-link`. Check the markup of the header drawer is correct.
- Add "icon" to classes `o-header__top-link o-header__top-link--[icon]`, where `[icon]` is "menu", "search", or "myft". E.g. `o-header__top-link o-header__top-link--menu` becomes `o-header__top-icon-link o-header__top-icon-link--[icon]`.
- Add signup and subscribe links to `o-header__top-column--right`.
## Migrating from v8 to v9

@@ -139,3 +143,2 @@

## Migrating from v7 to v8

@@ -160,2 +163,3 @@

The following Sass variables have been removed:
- `$o-header-image-service-version`

@@ -187,2 +191,3 @@ - `$o-header-image-base-url`

E.g. to output the header with select features:
```diff

@@ -197,2 +202,3 @@ -@include oHeaderBase;

Or to output only base styles:
```diff

@@ -205,2 +211,3 @@ -@include oHeaderBase;

Or to output only extra features without the base styles required by all features:
```diff

@@ -213,2 +220,3 @@ -@include _oHeaderDrawer;

There is no direct replacement for the following mixins. Please contact the Origami team if you have a usecase for these:
- `oHeaderLink`

@@ -215,0 +223,0 @@ - `oHeaderFancyLink`

86

origami.json
{
"origamiType": "component",
"origamiVersion": "2.0",
"brands": [
"core"
],
"brands": ["core"],
"support": "https://github.com/Financial-Times/origami/issues/new?labels=o-header,components",

@@ -24,83 +22,3 @@ "supportContact": {

]
},
"demosDefaults": {
"sass": "demos/src/main.scss",
"js": "demos/src/main.js",
"documentClasses": "core"
},
"demos": [
{
"name": "header",
"title": "Header",
"data": "demos/src/header.json",
"template": "demos/src/header.mustache",
"description": "Use the Origami Navigation Service to populate o-header with real navigation data. See the readme for more details."
},
{
"name": "mega-menu",
"title": "Mega menu",
"data": "demos/src/mega-menu.json",
"template": "demos/src/mega-menu.mustache",
"description": "Use the Origami Navigation Service to populate o-header with real navigation data. See the readme for more details."
},
{
"name": "subnav",
"title": "Header with subnav",
"data": "demos/src/subnav.json",
"template": "demos/src/subnav.mustache",
"description": "Use the Origami Navigation Service to populate o-header with real navigation data. See the readme for more details."
},
{
"name": "subnav-right-aligned",
"title": "Header with subnav and right aligned items",
"data": "demos/src/subnav-right-align.json",
"template": "demos/src/subnav.mustache",
"description": "The subnav may have right aligned actions, for example to sign out of an admin area. Use the Origami Navigation Service to populate o-header with real navigation data. See the readme for more details."
},
{
"name": "header-logo-only",
"title": "Logo only header",
"data": "demos/src/header.json",
"template": "demos/src/header-logo-only.mustache",
"description": "Use the Origami Navigation Service to populate o-header with real navigation data. See the readme for more details."
},
{
"name": "simple-header",
"title": "Simple header",
"data": "demos/src/header.json",
"template": "demos/src/simple-header.mustache",
"description": "Use the Origami Navigation Service to populate o-header with real navigation data. See the readme for more details."
},
{
"name": "transparent-header",
"title": "Simple transparent (inverse) header",
"data": "demos/src/transparent-header.json",
"template": "demos/src/header.mustache",
"description": "The \"transparent\" header is useful for use on dark backgrounds. This variant doesn't support the drawer. Please speak to Origami if you would like to add drawer support to this variant. Use the Origami Navigation Service to populate o-header with real navigation data. See the readme for more details.",
"documentClasses": "demo-transparent"
},
{
"name": "sticky-header",
"title": "Sticky header",
"data": "demos/src/header.json",
"template": "demos/src/sticky-header.mustache",
"description": "Sticky variation of the simple header. Use the Origami Navigation Service to populate o-header with real navigation data. See the readme for more details."
},
{
"name": "grid-demo",
"title": "Grid demo",
"template": "demos/src/grid-demo.mustache",
"data": "demos/src/header.json",
"hidden": true,
"description": "A bug we keep having is things (eg the hamburger) not lining up with the grid padding. This demo adds a grid demo below the header to make it easy to quickly check alignment"
},
{
"title": "Pa11y",
"name": "pa11y",
"data": "demos/src/header.json",
"template": "demos/src/pa11y.mustache",
"hidden": true,
"description": "Highlight accessibility issues"
}
]
}
}

95

package.json
{
"name": "@financial-times/o-header",
"version": "12.0.0",
"description": "Responsive Financial Times page header with primary and secondary navigation, a drop down mega menu, and a collapsible drawer",
"keywords": [
"header",
"page",
"top"
],
"homepage": "https://registry.origami.ft.com/components/o-header",
"bugs": {
"url": "https://github.com/Financial-Times/origami/issues/new?labels=o-header,components",
"email": "origami.support@ft.com"
},
"license": "MIT",
"type": "module",
"browser": "main.js",
"scripts": {
"start": "npx serve ./demos/local",
"build": "bash ../../scripts/component/build.bash",
"test": "bash ../../scripts/component/test.bash",
"debug:js": "bash ../../scripts/component/debug-js.bash",
"lint": "bash ../../scripts/component/lint.bash",
"watch": "bash ../../scripts/component/watch.bash"
},
"peerDependencies": {
"@financial-times/math": "^1.0.0",
"@financial-times/o-brand": "^4.1.0",
"@financial-times/o-buttons": "^7.8.0",
"@financial-times/o-colors": "^6.5.0",
"@financial-times/o-grid": "^6.1.1",
"@financial-times/o-icons": "^7.0.1",
"@financial-times/o-normalise": "^3.3.0",
"@financial-times/o-toggle": "^3.0.0",
"@financial-times/o-typography": "^7.4.1",
"@financial-times/o-utils": "^2.0.0",
"@financial-times/o-viewport": "^5.1.1",
"@financial-times/o-visual-effects": "^4.0.1"
},
"devDependencies": {
"@financial-times/o-fonts": "^5.2.0",
"@financial-times/o-grid": "^6.1.1",
"@financial-times/o-normalise": "^3.3.0"
},
"engines": {
"npm": ">7"
},
"private": false
"name": "@financial-times/o-header",
"version": "13.0.0",
"description": "Responsive Financial Times page header with primary and secondary navigation, a drop down mega menu, and a collapsible drawer",
"keywords": [
"header",
"page",
"top"
],
"homepage": "https://registry.origami.ft.com/components/o-header",
"bugs": {
"url": "https://github.com/Financial-Times/origami/issues/new?labels=o-header,components",
"email": "origami.support@ft.com"
},
"license": "MIT",
"type": "module",
"browser": "main.js",
"scripts": {
"start": "npx serve ./demos/local",
"build": "bash ../../scripts/component/build.bash",
"test": "bash ../../scripts/component/test.bash",
"debug:js": "bash ../../scripts/component/debug-js.bash",
"lint": "bash ../../scripts/component/lint.bash",
"watch": "bash ../../scripts/component/watch.bash"
},
"peerDependencies": {
"@financial-times/math": "^1.0.0",
"@financial-times/o-brand": "^4.1.0",
"@financial-times/o-buttons": "^7.8.0",
"@financial-times/o-colors": "^6.5.0",
"@financial-times/o-grid": "^6.1.1",
"@financial-times/o-icons": "^7.0.1",
"@financial-times/o-normalise": "^3.3.0",
"@financial-times/o-toggle": "^3.0.0",
"@financial-times/o-typography": "^7.4.1",
"@financial-times/o-utils": "^2.0.0",
"@financial-times/o-viewport": "^5.1.1",
"@financial-times/o-visual-effects": "^4.0.1",
"@financial-times/o-forms": "^9.12.1"
},
"devDependencies": {
"@financial-times/o-fonts": "^5.2.0",
"@financial-times/o-grid": "^6.1.1",
"@financial-times/o-normalise": "^3.3.0"
},
"engines": {
"npm": ">7"
},
"private": false
}

36

README.md

@@ -20,3 +20,3 @@ # o-header

As there are variations on the header, and the markup for each is specific and somewhat extensive, we recommend visiting the [component page](http://registry.origami.ft.com/components/o-header) in the registry to find the markup that is most suited to your product. The demo on the component page does not use real navigation data as it may become out of date. See the [Origami Navigation Service](https://www.ft.com/__origami/service/navigation) to populate `o-header` markup with real navigation data. The Origami Navigation Service is a JSON API which provides navigation structures for use across FT websites.
As there are variations on the header, and the markup for each is specific and somewhat extensive, we recommend visiting the [component page](https://o2-core.origami.ft.com/?path=/story/components-o-header--header-primary&globals=backgrounds:!undefined) in Storybook to find the markup that is most suited to your product. The demo on the component page does not use real navigation data as it may become out of date. See the [Origami Navigation Service](https://www.ft.com/__origami/service/navigation) to populate `o-header` markup with real navigation data. The Origami Navigation Service is a JSON API which provides navigation structures for use across FT websites.

@@ -36,3 +36,2 @@ _There are intentionally no classes to switch between logged in and out as we don't want to do that in the client side. This is left up to the product._

## JavaScript

@@ -55,3 +54,3 @@

const headerEl = document.querySelector('.o-header');
const header = new oHeader(headerEl, { searchBarOpen: true });
const header = new oHeader(headerEl, {searchBarOpen: true});
```

@@ -63,3 +62,3 @@

import '@financial-times/o-header';
document.addEventListener("DOMContentLoaded", function() {
document.addEventListener('DOMContentLoaded', function () {
document.dispatchEvent(new CustomEvent('o.DOMContentLoaded'));

@@ -77,3 +76,2 @@ });

## Sass

@@ -109,15 +107,17 @@

State | Major Version | Last Minor Release | Migration guide |
:---: | :---: | :---: | :---:
✨ active | 11 | N/A | [migrate to v11](MIGRATION.md#migrating-from-v10-to-v11) |
⚠ maintained | 10 | N/A | [migrate to v10](MIGRATION.md#migrating-from-v9-to-v10) |
╳ deprecated | 9 | N/A | [migrate to v9](MIGRATION.md#migrating-from-v8-to-v9) |
╳ deprecated | 8 | 8.6 | [migrate to v8](MIGRATION.md#migrating-from-v7-to-v8) |
╳ deprecated | 7 | 7.8 | [migrate to v7](MIGRATION.md#migrating-from-v6-to-v7) |
╳ deprecated | 6 | 6.14 | [migrate to v6](MIGRATION.md#migrating-from-v5-to-v6) |
╳ deprecated | 5 | 5.0 | - |
╳ deprecated | 4 | 4.0 | - |
╳ deprecated | 3 | 3.0 | - |
╳ deprecated | 2 | 2.5 | - |
╳ deprecated | 1 | 1.1 | - |
| State | Major Version | Last Minor Release | Migration guide |
| :----------: | :-----------: | :----------------: | :------------------------------------------------------: |
| ✨ active | 13 | N/A | [migrate to v13](MIGRATION.md#migrating-from-v12-to-v13) |
| ⚠ maintained | 12 | N/A | [migrate to v12](MIGRATION.md#migrating-from-v11-to-v12) |
| ⚠ maintained | 11 | N/A | [migrate to v11](MIGRATION.md#migrating-from-v10-to-v11) |
| ╳ deprecated | 10 | N/A | [migrate to v10](MIGRATION.md#migrating-from-v9-to-v10) |
| ╳ deprecated | 9 | N/A | [migrate to v9](MIGRATION.md#migrating-from-v8-to-v9) |
| ╳ deprecated | 8 | 8.6 | [migrate to v8](MIGRATION.md#migrating-from-v7-to-v8) |
| ╳ deprecated | 7 | 7.8 | [migrate to v7](MIGRATION.md#migrating-from-v6-to-v7) |
| ╳ deprecated | 6 | 6.14 | [migrate to v6](MIGRATION.md#migrating-from-v5-to-v6) |
| ╳ deprecated | 5 | 5.0 | - |
| ╳ deprecated | 4 | 4.0 | - |
| ╳ deprecated | 3 | 3.0 | - |
| ╳ deprecated | 2 | 2.5 | - |
| ╳ deprecated | 1 | 1.1 | - |

@@ -124,0 +124,0 @@ ## Contact

demos/src/drawer.js
demos/src/grid-demo.mustache
demos/src/header-logo-only.mustache
demos/src/header.json
demos/src/header.mustache
demos/src/main.js
demos/src/main.scss
demos/src/mega-menu.json
demos/src/mega-menu.mustache
demos/src/pa11y.mustache
demos/src/simple-header.mustache
demos/src/sticky-header.mustache
demos/src/subnav-right-align.json
demos/src/subnav.json
demos/src/subnav.mustache
demos/src/transparent-header.json
main.scss

Sorry, the diff of this file is not supported yet

src/scss/features/_drawer.scss

Sorry, the diff of this file is not supported yet

src/scss/features/_search.scss

Sorry, the diff of this file is not supported yet

src/tsx/drawer.tsx

Sorry, the diff of this file is not supported yet

src/tsx/search.tsx

Sorry, the diff of this file is not supported yet

src/tsx/sticky.tsx

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc