diff --git a/components/o-header/MIGRATION.md b/components/o-header/MIGRATION.md index ed8cf970f7..f81c161651 100644 --- a/components/o-header/MIGRATION.md +++ b/components/o-header/MIGRATION.md @@ -1,8 +1,15 @@ # 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). ### Removal of the myFT link @@ -26,10 +33,7 @@ The following markup can be removed all together from all header types. In the same location of where the myFT logo link was removed we need to add a new link for accessing the users My Account or prompting them to Sign in. ```html - + My Account ``` @@ -37,28 +41,24 @@ In the same location of where the myFT logo link was removed we need to add a ne > [!NOTE] > This same markup is used for both the My Account and Sign in links. Your templates will need to be responsible for swapping the anchor text within the `` and the `href` value - 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 - + My Account ``` - ## Migrating from v10 to v11 o-header v11 includes markup changes in the drawer menu. 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). 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 Update your drawer markup to semantically represent visually grouped navigation items. This approach improves the experience for users of assistive technologies. @@ -68,28 +68,30 @@ Update your drawer markup to semantically represent visually grouped navigation 3. Associate both elements with the `aria-labelledby` attribute. Before: + ```html ``` After: + ```html ``` @@ -120,16 +122,17 @@ Update the `.o-header__drawer` element for improved accessibility: ## Migrating from v9 to v10 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 v9 drops support for Bower and version 2 of the Origami Build Service. Follow [the migration guide on the Origami website](https://origami.ft.com/documentation/tutorials/bower-to-npm/). - ## Migrating from v7 to v8 v8 removes support for the internal brand. Consider using [o-header-services](https://github.com/Financial-Times/o-header-services) instead, or contact the Origami team to discuss bring back support for the internal brand. @@ -149,6 +152,7 @@ its dependencies. See [the Bower config for these](./bower.json). Origami components now require a `$system-code` Sass variable is set by the project, which must be a valid [Bizops system code](https://biz-ops.in.ft.com/list/Systems). The following Sass variables have been removed: + - `$o-header-image-service-version` - `$o-header-image-base-url` @@ -175,6 +179,7 @@ The following Sass mixins have been removed and should be replaced with a single - `oHeaderTransparent`: 'transparent' feature E.g. to output the header with select features: + ```diff -@include oHeaderBase; -@include oHeaderTop; @@ -184,6 +189,7 @@ E.g. to output the header with select features: ``` Or to output only base styles: + ```diff -@include oHeaderBase; -@include oHeaderTop; @@ -191,6 +197,7 @@ Or to output only base styles: ``` Or to output only extra features without the base styles required by all features: + ```diff -@include _oHeaderDrawer; -@include _oHeaderSticky; @@ -198,6 +205,7 @@ Or to output only extra features without the base styles required by all feature ``` There is no direct replacement for the following mixins. Please contact the Origami team if you have a usecase for these: + - `oHeaderLink` - `oHeaderFancyLink` - `oHeaderItemSeparator` diff --git a/components/o-header/README.md b/components/o-header/README.md index cbd881ee3e..787ed4fa08 100644 --- a/components/o-header/README.md +++ b/components/o-header/README.md @@ -17,7 +17,7 @@ Check out [how to include Origami components in your project](https://origami.ft ## Markup -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. _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._ @@ -32,7 +32,6 @@ Some elements inside the header require specific data attributes so the JavaScri - data-o-header-subnav-wrapper: Applied to the inner wrapper `div` of the subnav menu so the JS can handle the scrolling - data-o-header-search-state: Optional, may be "open" or "close" to indicate the default visibility of the search bar. - ## JavaScript An o-header object must be constructed for every `
` you have on your page that uses this component. @@ -50,14 +49,14 @@ The o-header constructor accepts an optional options object, used to control cer ```js import oHeader from '@financial-times/o-header'; const headerEl = document.querySelector('.o-header'); -const header = new oHeader(headerEl, { searchBarOpen: true }); +const header = new oHeader(headerEl, {searchBarOpen: true}); ``` Alternatively, a `o.DOMContentLoaded` event can be dispatched on the document to auto-construct an o-header object for each element with a `data-o-component="o-header"` attribute: ```js import '@financial-times/o-header'; -document.addEventListener("DOMContentLoaded", function() { +document.addEventListener('DOMContentLoaded', function () { document.dispatchEvent(new CustomEvent('o.DOMContentLoaded')); }); ``` @@ -70,7 +69,6 @@ o-header fires the following events: - `oHeader.MegaMenuClose`: When a mega menu is closed. The target of the event is the menu itself. - `oHeader.Sticky`: When the header changes to or from sticky. The event detail will contain an `isActive` boolean indicated sticky or not. The target of the event is the menu itself. - ## Sass The header is made up of various features (e.g. `nav`, `search`, and `drawer`). To get everything, use the `oHeader()` mixin without arguments. To get only the stuff you need, you can pass in a list of options as the first argument. @@ -101,19 +99,21 @@ To use `o-header` setup a [core and enhanced experience](https://origami.ft.com/ ## Migration guide -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 | - | ## Contact diff --git a/components/o-header/demos/src/drawer.js b/components/o-header/demos/src/drawer.js deleted file mode 100644 index 7061381070..0000000000 --- a/components/o-header/demos/src/drawer.js +++ /dev/null @@ -1,395 +0,0 @@ -export default function () { - const editionsData = { - current: { - name: 'UK', - id: 'uk' - }, - others: [ - { - name: 'International', - id: 'international' - } - ] - }; - - const navData = [ - { - heading: { - name: 'Top sections' - }, - items: [ - { - name: 'Home', - href: '#', - selected: true - }, - { - name: 'World', - href: '#', - hasChildren: true, - children: [ - { - name: 'World Economy', - href: '#' - }, - { - name: 'UK', - href: '#' - }, - { - name: 'US', - href: '#' - }, - { - name: 'China', - href: '#' - }, - { - name: 'Africa', - href: '#' - }, - { - name: 'Asia Pacific', - href: '#' - }, - { - name: 'Emerging Markets', - href: '#' - }, - { - name: 'Europe', - href: '#' - }, - { - name: 'Latin America', - href: '#' - }, - { - name: 'Middle East and Africa', - href: '#' - } - ] - }, - { - name: 'UK', - href: '#', - hasChildren: true, - children: [ - { - name: 'UK Economy', - href: '#' - }, - { - name: 'UK Politics & Policy', - href: '#' - }, - { - name: 'UK Companies', - href: '#' - } - ] - }, - { - name: 'Companies', - href: '#', - hasChildren: true, - children: [ - { - name: 'Energy', - href: '#' - }, - { - name: 'Financials', - href: '#' - }, - { - name: 'Health', - href: '#' - }, - { - name: 'Industrials', - href: '#' - }, - { - name: 'Media', - href: '#' - }, - { - name: 'Retail & Consumer', - href: '#' - }, - { - name: 'Technology', - href: '#' - }, - { - name: 'Telecoms', - href: '#' - }, - { - name: 'Transport', - href: '#' - } - ] - }, - { - name: 'Markets', - href: '#', - hasChildren: true, - children: [ - { - name: 'Alphaville', - href: '#' - }, - { - name: 'Markets Data', - href: '#' - }, - { - name: 'Capital Markets', - href: '#' - }, - { - name: 'Commodities', - href: '#' - }, - { - name: 'Currencies', - href: '#' - }, - { - name: 'Equities', - href: '#' - }, - { - name: 'Fund Management', - href: '#' - }, - { - name: 'Trading', - href: '#' - } - ] - }, - { - name: 'Opinion', - href: '#', - hasChildren: true, - children: [ - { - name: 'Columnists', - href: '#' - }, - { - name: 'FT View', - href: '#' - }, - { - name: 'The Big Read', - href: '#' - }, - { - name: 'Lex', - href: '#' - }, - { - name: 'Alphaville', - href: '#' - }, - { - name: 'Obituaries', - href: '#' - }, - { - name: 'Letters', - href: '#' - } - ] - }, - { - name: 'Work & Careers', - href: '#', - hasChildren: true, - children: [ - { - name: 'Business School Rankings', - href: '#' - }, - { - name: 'Business Education', - href: '#' - }, - { - name: 'Entrepreneurship', - href: '#' - }, - { - name: 'Recruitment', - href: '#' - }, - { - name: 'Business Books', - href: '#' - } - ] - }, - { - name: 'Life & Arts', - href: '#', - hasChildren: true, - children: [ - { - name: 'House & Home', - href: '#' - }, - { - name: 'Books', - href: '#' - }, - { - name: 'Food & Drink', - href: '#' - }, - { - name: 'Travel', - href: '#' - }, - { - name: 'Style', - href: '#' - }, - { - name: 'Arts', - href: '#' - }, - { - name: 'Sports', - href: '#' - }, - { - name: 'Music', - href: '#' - }, - { - name: 'Film, TV & Radio', - href: '#' - }, - { - name: 'Magazine', - href: '#' - } - ] - }, - { - name: 'Personal Finance', - href: '#', - hasChildren: true, - children: [ - { - name: 'Property & Mortgages', - href: '#' - }, - { - name: 'Investments', - href: '#' - }, - { - name: 'Pensions', - href: '#' - }, - { - name: 'Tax', - href: '#' - }, - { - name: 'Bankings & Savings', - href: '#' - } - ] - }, - { - name: 'Science & Environment', - href: '#' - } - ] - }, - { - heading: { - name: 'FT recommends' - }, - items: [ - { - name: 'Lex', - href: '#' - }, - { - name: 'Alphaville', - href: '#' - }, - { - name: 'Lunch with the FT', - href: '#' - }, - { - name: 'Video', - href: '#' - }, - { - name: 'Special Reports', - href: '#' - }, - { - name: 'News feed', - href: '#' - }, - { - name: 'Newsletters', - href: '#' - } - ] - }, - { - items: [ - { - name: 'My FT', - href: '#', - variation: 'secondary' - }, - { - name: 'Portfolio', - href: '#', - variation: 'secondary' - }, - { - name: 'Today\'s Paper', - href: '#', - variation: 'secondary' - } - ] - } - ]; - - // Adds indexes for aria attributes - navData.forEach((section) => { - section.items.map((item, index) => { - if (!section.heading && index === 0) { - item.divide = true; - } - item.index = index; - return item; - }); - }); - - const userData = { - isSignedIn: false, - name: 'User\'s name' - }; - - const drawer = { - nav: navData, - editions: editionsData, - user: userData - }; - - return drawer; -} diff --git a/components/o-header/demos/src/grid-demo.mustache b/components/o-header/demos/src/grid-demo.mustache deleted file mode 100644 index 693b5acdc1..0000000000 --- a/components/o-header/demos/src/grid-demo.mustache +++ /dev/null @@ -1,237 +0,0 @@ -
- - {{#anon}} -
- -
- {{/anon}} - - {{#top}} -
-
-
-
- {{#drawer}} - - Open side navigation menu - - {{/drawer}} - {{#hasSearch}} - - Open search bar - - {{/hasSearch}} -
-
- -
-
- {{#anon}} - Subscribe - {{/anon}} - {{#hasMyFT}} - - myFT - - {{/hasMyFT}} -
-
-
-
- {{/top}} - - {{#search}} - - - - - {{/search}} - - {{#nav}} - - - - {{/nav}} - -
- -{{#drawer}} - -{{/drawer}} - - -
-
-
-
- content block -
-
-
-
- content-block -
-
-
-
diff --git a/components/o-header/demos/src/header-logo-only.mustache b/components/o-header/demos/src/header-logo-only.mustache deleted file mode 100644 index 8cc0c06a3a..0000000000 --- a/components/o-header/demos/src/header-logo-only.mustache +++ /dev/null @@ -1,13 +0,0 @@ -
-
-
-
-
- -
-
-
-
-
diff --git a/components/o-header/demos/src/header.json b/components/o-header/demos/src/header.json deleted file mode 100644 index 21b481e77c..0000000000 --- a/components/o-header/demos/src/header.json +++ /dev/null @@ -1,483 +0,0 @@ -{ - "anon": true, - "top": { - "hasMyFT": true - }, - "search": true, - "nav": { - "mobile": [ - { - "name": "xxxx", - "url": "#", - "selected": true, - "index": 0 - }, - { - "name": "xxxxxx", - "url": "#", - "index": 1 - }, - { - "name": "xxxxxxx xxxx", - "url": "#", - "index": 2 - } - ], - "desktop": [ - { - "name": "xxxx", - "url": "#", - "selected": true, - "index": 0 - }, - { - "name": "xxxxx", - "url": "#", - "index": 1 - }, - { - "name": "xx", - "url": "#", - "index": 2 - }, - { - "name": "xxxxxxxxx", - "url": "#", - "index": 3 - }, - { - "name": "xxxx", - "url": "#", - "index": 4 - }, - { - "name": "xxxxxxx", - "url": "#", - "index": 5 - }, - { - "name": "xxxxxxx", - "url": "#", - "index": 6 - }, - { - "name": "xxxx x xxxxxxx", - "url": "#", - "index": 7 - }, - { - "name": "xxxx x xxxx", - "url": "#", - "index": 8 - }, - { - "name": "xxxxxxxx", - "url": "#", - "index": 9 - }, - { - "name": "xxx xx xxxxx xx", - "url": "#", - "index": 10 - } - ], - "isSignedIn": true - }, - "drawer": { - "nav": [ - { - "heading": { - "name": "xxx xxxxxxxx", - "id": "xxx-xxxxxxxx" - }, - "items": [ - { - "name": "xxxx", - "href": "#", - "selected": true, - "index": 0 - }, - { - "name": "xxxxx", - "href": "#", - "hasChildren": true, - "children": [ - { - "name": "xxxxx xxxxxxx", - "href": "#" - }, - { - "name": "xx", - "href": "#" - }, - { - "name": "xx", - "href": "#" - }, - { - "name": "xxxxx", - "href": "#" - }, - { - "name": "xxxxxx", - "href": "#" - }, - { - "name": "xxxx xxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxx xxxxxxx", - "href": "#" - }, - { - "name": "xxxxxx", - "href": "#" - }, - { - "name": "xxxxx xxxxxxx", - "href": "#" - }, - { - "name": "xxxxxx xxxx xxx xxxxxx", - "href": "#" - } - ], - "index": 1 - }, - { - "name": "xx", - "href": "#", - "hasChildren": true, - "children": [ - { - "name": "xx xxxxxxx", - "href": "#" - }, - { - "name": "xx xxxxxxxx x xxxxxx", - "href": "#" - }, - { - "name": "xx xxxxxxxxx", - "href": "#" - } - ], - "index": 2 - }, - { - "name": "xxxxxxxxx", - "href": "#", - "hasChildren": true, - "children": [ - { - "name": "xxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxx", - "href": "#" - }, - { - "name": "xxxxxx x xxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxxx", - "href": "#" - } - ], - "index": 3 - }, - { - "name": "xxxxxxx", - "href": "#", - "hasChildren": true, - "children": [ - { - "name": "xxxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxx xxxx", - "href": "#" - }, - { - "name": "xxxxxxx xxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxx", - "href": "#" - }, - { - "name": "xxxx xxxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxx", - "href": "#" - } - ], - "index": 4 - }, - { - "name": "xxxxxxx", - "href": "#", - "hasChildren": true, - "children": [ - { - "name": "xxxxxxxxxx", - "href": "#" - }, - { - "name": "xx xxxx", - "href": "#" - }, - { - "name": "xxx xxx xxxx", - "href": "#" - }, - { - "name": "xxx", - "href": "#" - }, - { - "name": "xxxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxx", - "href": "#" - } - ], - "index": 5 - }, - { - "name": "xxxx x xxxxxxx", - "href": "#", - "hasChildren": true, - "children": [ - { - "name": "xxxxxxxx xxxxxx xxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxx xxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxxxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxx xxxxx", - "href": "#" - } - ], - "index": 6 - }, - { - "name": "xxxx x xxxx", - "href": "#", - "hasChildren": true, - "children": [ - { - "name": "xxxxx x xxxx", - "href": "#" - }, - { - "name": "xxxxx", - "href": "#" - }, - { - "name": "xxxx x xxxxx", - "href": "#" - }, - { - "name": "xxxxxx", - "href": "#" - }, - { - "name": "xxxxx", - "href": "#" - }, - { - "name": "xxxx", - "href": "#" - }, - { - "name": "xxxxxx", - "href": "#" - }, - { - "name": "xxxxx", - "href": "#" - }, - { - "name": "xxxxx xx x xxxxx", - "href": "#" - }, - { - "name": "xxxxxxxx", - "href": "#" - } - ], - "index": 7 - }, - { - "name": "xxxxxxxx xxxxxxx", - "href": "#", - "hasChildren": true, - "children": [ - { - "name": "xxxxxxxx x xxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxx", - "href": "#" - }, - { - "name": "xxx", - "href": "#" - }, - { - "name": "xxxxxxxx x xxxxxxx", - "href": "#" - } - ], - "index": 8 - }, - { - "name": "xxxxxxx x xxxxxxxxxxx", - "href": "#", - "index": 9 - } - ] - }, - { - "heading": { - "name": "xx xxxxxxxxxx", - "id": "xx-xxxxxxxxxx" - }, - "items": [ - { - "name": "xxx", - "href": "#", - "index": 0 - }, - { - "name": "xxxxxxxxxx", - "href": "#", - "index": 1 - }, - { - "name": "xxxxx xxxx xxx xx", - "href": "#", - "index": 2 - }, - { - "name": "xxxxx", - "href": "#", - "index": 3 - }, - { - "name": "xxxxxxx xxxxxxx", - "href": "#", - "index": 4 - }, - { - "name": "xxxx xxxx", - "href": "#", - "index": 5 - }, - { - "name": "xxxxxxxxxxx", - "href": "#", - "index": 6 - } - ] - }, - { - "divide": true, - "items": [ - { - "name": "xx xx", - "href": "#", - "variation": "secondary", - "index": 0 - }, - { - "name": "xxxxxxxxx", - "href": "#", - "variation": "secondary", - "index": 1 - }, - { - "name": "xxxxxxx xxxxx", - "href": "#", - "variation": "secondary", - "index": 2 - } - ] - } - ], - "editions": { - "current": { - "name": "UK", - "id": "uk" - }, - "others": [ - { - "name": "International", - "id": "international" - } - ] - }, - "user": { - "isSignedIn": false, - "name": "xxxxxx xxxx" - } - } -} diff --git a/components/o-header/demos/src/header.mustache b/components/o-header/demos/src/header.mustache deleted file mode 100644 index 3642764b2c..0000000000 --- a/components/o-header/demos/src/header.mustache +++ /dev/null @@ -1,231 +0,0 @@ -
- - {{#anon}} -
- -
- {{/anon}} - - {{#top}} -
-
-
-
- {{#drawer}} - - Open side navigation menu - - {{/drawer}} - {{#hasSearch}} - - Open search bar - - {{/hasSearch}} -
-
- -
- -
- {{#anon}} - Subscribe - Sign in - {{/anon}} - {{#anon?}} - - myFT - - {{/anon?}} -
- -
-
-
- {{/top}} - - {{#search}} - - - - - {{/search}} - - {{#nav}} - - - - {{/nav}} - -
- -{{#drawer}} - -{{/drawer}} diff --git a/components/o-header/demos/src/main.js b/components/o-header/demos/src/main.js deleted file mode 100644 index 09b9f439d4..0000000000 --- a/components/o-header/demos/src/main.js +++ /dev/null @@ -1,38 +0,0 @@ -import '../../main.js'; - -document.addEventListener('DOMContentLoaded', setupDemo); - -document.onreadystatechange = function () { - if (document.readyState === 'complete') { - setupDemo(); - } else if (document.readyState === 'interactive' && !document.attachEvent) { - setupDemo(); - } -}; - -if (document.readyState === 'complete') { - setupDemo(); -} else if (document.readyState === 'interactive' && !document.attachEvent) { - setupDemo(); -} - - -function setupDemo() { - if (document.querySelector('.demo-sticky')) { - const p = document.createElement('p'); - p.className = 'demo-sticky-message demo-sticky-message--'; - - if (window.self !== window.top) { - p.className += 'popout'; - p.textContent = 'Please open this demo in a new window'; - } else { - p.className += 'scroll'; - p.textContent = 'Scroll down'; - } - - document.body.appendChild(p); - } - - document.documentElement.className = document.documentElement.className.replace('core', 'enhanced'); - document.dispatchEvent(new CustomEvent('o.DOMContentLoaded')); -} diff --git a/components/o-header/demos/src/main.scss b/components/o-header/demos/src/main.scss deleted file mode 100644 index 044cc590aa..0000000000 --- a/components/o-header/demos/src/main.scss +++ /dev/null @@ -1,73 +0,0 @@ -@import '../../main'; - -@include oHeader(); -@import '@financial-times/o-fonts/main'; -@include oFonts(); -@import '@financial-times/o-grid/main'; -@include oGrid(); -@import '@financial-times/o-normalise/main'; -@include oNormalise(); -body { - background-color: oColorsByUsecase('page', 'background'); -} - -.demo-sticky { - height: 240px; - overflow: auto; -} - -.demo-sticky-message { - margin: 50px 0; - text-align: center; - font-size: 24px; - - &:before, - &:after { - padding: 0 1em; - font-size: 75%; - } -} - -.demo-sticky-message--popout { - &:before { - content: '◀'; - } - &:after { - content: '▶'; - } -} - -.demo-sticky-message--scroll { - margin-bottom: 1999px; - - &:before, - &:after { - content: '▼'; - } -} - -.demo-transparent body { - background: oColorsByName('slate'); -} - -.body-content-container { - background-color: rgba(0, 0, 0, 0.2); -} - -.body-content { - background-color: rgba(0, 0, 0, 0.2); -} - -.body-content-block { - background-color: rgba(0, 0, 0, 0.2); - height: 60px; -} - -// Components do not usually depend on these classes -// since they are not part of the Origami component specification. -// Instead consider removing an o-header specific class with -// JavaScript in the future to indicate a core or enhances experience. -.core .o--if-js, -.enhanced .o--if-no-js { - display: none !important; //stylelint-disable-line declaration-no-important -} diff --git a/components/o-header/demos/src/mega-menu.json b/components/o-header/demos/src/mega-menu.json deleted file mode 100644 index 4ce9f2bcf9..0000000000 --- a/components/o-header/demos/src/mega-menu.json +++ /dev/null @@ -1,867 +0,0 @@ -{ - "anon": true, - "top": { - "hasMyFT": true - }, - "search": true, - "nav": { - "mobile": [ - { - "name": "xxxx", - "url": "#", - "selected": true, - "index": 0 - }, - { - "name": "xxxxxx", - "url": "#", - "index": 1 - }, - { - "name": "xxxxxxx xxxx", - "url": "#", - "index": 2 - } - ], - "desktop": [ - { - "name": "xxxx", - "url": "#", - "selected": true, - "index": 0 - }, - { - "name": "xxxxx", - "url": "#", - "index": 1, - "hasMega": true, - "articles": [ - { - "title": "The UK expats voting for Brexit no matter what the cost", - "url": "#" - }, - { - "title": "Lunch with the FT: Adair Turner", - "url": "#" - }, - { - "title": "English carpenter who makes beehives that sell across the world", - "url": "#" - }, - { - "title": "French ambassador urges UK to help shape a ‘reformed Europe’", - "url": "#" - }, - { - "title": "Where do politicians live? How MPs across the world find city digs", - "url": "#" - } - ], - "subsections": [ - { - "name": "xxx xxxxx", - "url": "#" - }, - { - "name": "xxxxx xxxxxxx", - "url": "#" - }, - { - "name": "xx", - "url": "#" - }, - { - "name": "xxxxxx", - "url": "#" - }, - { - "name": "xxxxx xxxxxxx", - "url": "#" - }, - { - "name": "xxxx xxxxxxx", - "url": "#" - }, - { - "name": "xxxxxx", - "url": "#" - }, - { - "name": "xxxxxx xxxx xxx xxxxxx", - "url": "#" - }, - { - "name": "xxxxxxxx xxxxxxx", - "url": "#" - }, - { - "name": "xxxxxxx x xxxxxxxxxxx", - "url": "#" - } - ] - }, - { - "name": "xx", - "url": "#", - "index": 2, - "hasMega": true, - "articles": [ - { - "title": "The UK expats voting for Brexit no matter what the cost", - "url": "#" - }, - { - "title": "Lunch with the FT: Adair Turner", - "url": "#" - }, - { - "title": "English carpenter who makes beehives that sell across the world", - "url": "#" - }, - { - "title": "French ambassador urges UK to help shape a ‘reformed Europe’", - "url": "#" - }, - { - "title": "Where do politicians live? How MPs across the world find city digs", - "url": "#" - } - ], - "subsections": [ - { - "name": "xxx xx", - "url": "#" - }, - { - "name": "xx xxxxxxxx x xxxxxx", - "url": "#" - }, - { - "name": "xx xxxxxxx", - "url": "#" - }, - { - "name": "xxxxxxx", - "url": "#" - }, - { - "name": "xxxxxxxx", - "url": "#" - }, - { - "name": "xxxxx", - "url": "#" - }, - { - "name": "xx xxxxxxx", - "url": "#" - } - ] - }, - { - "name": "xxxxxxxxx", - "url": "#", - "index": 3, - "hasMega": true, - "articles": [ - { - "title": "The UK expats voting for Brexit no matter what the cost", - "url": "#" - }, - { - "title": "Lunch with the FT: Adair Turner", - "url": "#" - }, - { - "title": "English carpenter who makes beehives that sell across the world", - "url": "#" - }, - { - "title": "French ambassador urges UK to help shape a ‘reformed Europe’", - "url": "#" - }, - { - "title": "Where do politicians live? How MPs across the world find city digs", - "url": "#" - } - ], - "subsections": [ - { - "name": "xxx xxxxxxxxx", - "url": "#" - }, - { - "name": "xxxxxxxxxx", - "url": "#" - }, - { - "name": "xxxxxxxxxx", - "url": "#" - }, - { - "name": "xxxxxx", - "url": "#" - }, - { - "name": "xxxxxx x xxxxxxxx", - "url": "#" - }, - { - "name": "xxxxxxxxxxx", - "url": "#" - }, - { - "name": "xxxxxxxx", - "url": "#" - }, - { - "name": "xxxxxx", - "url": "#" - }, - { - "name": "xxxxx", - "url": "#" - }, - { - "name": "xxxxxxxxx", - "url": "#" - } - ] - }, - { - "name": "xxxxxxx", - "url": "#", - "index": 4, - "hasMega": true, - "articles": [ - { - "title": "The UK expats voting for Brexit no matter what the cost", - "url": "#" - }, - { - "title": "Lunch with the FT: Adair Turner", - "url": "#" - }, - { - "title": "English carpenter who makes beehives that sell across the world", - "url": "#" - }, - { - "title": "French ambassador urges UK to help shape a ‘reformed Europe’", - "url": "#" - }, - { - "title": "Where do politicians live? How MPs across the world find city digs", - "url": "#" - } - ], - "subsections": [ - { - "name": "xxx xxxxxxx", - "url": "#" - }, - { - "name": "xxxxxxx xxxx", - "url": "#" - }, - { - "name": "xxxxxxxxxxx", - "url": "#" - }, - { - "name": "xxxxxxxxxx", - "url": "#" - }, - { - "name": "xxxxxxxx", - "url": "#" - }, - { - "name": "xxxxxxx xxxxxxx", - "url": "#" - }, - { - "name": "xxxxxxx", - "url": "#" - } - ] - }, - { - "name": "xxxxxxx", - "url": "#", - "index": 5, - "hasMega": true, - "articles": [ - { - "title": "The UK expats voting for Brexit no matter what the cost", - "url": "#" - }, - { - "title": "Lunch with the FT: Adair Turner", - "url": "#" - }, - { - "title": "English carpenter who makes beehives that sell across the world", - "url": "#" - }, - { - "title": "French ambassador urges UK to help shape a ‘reformed Europe’", - "url": "#" - }, - { - "title": "Where do politicians live? How MPs across the world find city digs", - "url": "#" - } - ], - "subsections": [ - { - "name": "xxx xxxxxxx", - "url": "#" - }, - { - "name": "xx xxxx", - "url": "#" - }, - { - "name": "xxx xxx xxxx", - "url": "#" - }, - { - "name": "xxx", - "url": "#" - }, - { - "name": "xxxxxxxxxx", - "url": "#" - } - ] - }, - { - "name": "xxxx x xxxxxxx", - "url": "#", - "index": 6, - "hasMega": true, - "articles": [ - { - "title": "The UK expats voting for Brexit no matter what the cost", - "url": "#" - }, - { - "title": "Lunch with the FT: Adair Turner", - "url": "#" - }, - { - "title": "English carpenter who makes beehives that sell across the world", - "url": "#" - }, - { - "title": "French ambassador urges UK to help shape a ‘reformed Europe’", - "url": "#" - }, - { - "title": "Where do politicians live? How MPs across the world find city digs", - "url": "#" - } - ], - "subsections": [ - { - "name": "xxx xxxx x xxxxxx", - "url": "#" - }, - { - "name": "xxxxxxxx xxxxxxxxx", - "url": "#" - }, - { - "name": "xxxxxxxxxx", - "url": "#" - }, - { - "name": "xxxxxxxxxxxxxxxx", - "url": "#" - }, - { - "name": "xxxxxxxxxxx", - "url": "#" - }, - { - "name": "xxxxxxxx xxxxx", - "url": "#" - } - ] - }, - { - "name": "xxxx x xxxx", - "url": "#", - "index": 7, - "hasMega": true, - "articles": [ - { - "title": "The UK expats voting for Brexit no matter what the cost", - "url": "#" - }, - { - "title": "Lunch with the FT: Adair Turner", - "url": "#" - }, - { - "title": "English carpenter who makes beehives that sell across the world", - "url": "#" - }, - { - "title": "French ambassador urges UK to help shape a ‘reformed Europe’", - "url": "#" - }, - { - "title": "Where do politicians live? How MPs across the world find city digs", - "url": "#" - } - ], - "subsections": [ - { - "name": "xxx xxxx x xxxx", - "url": "#" - }, - { - "name": "xxxxxxxx", - "url": "#" - }, - { - "name": "xxxxx x xxxx", - "url": "#" - }, - { - "name": "xxxxx", - "url": "#" - }, - { - "name": "xxxx x xxxxx", - "url": "#" - }, - { - "name": "xxxxxx", - "url": "#" - }, - { - "name": "xxxxx", - "url": "#" - }, - { - "name": "xxxx", - "url": "#" - }, - { - "name": "xxxxxx", - "url": "#" - }, - { - "name": "xxxxx", - "url": "#" - }, - { - "name": "xxxxx xx x xxxxx", - "url": "#" - } - ] - } - ], - "isSignedIn": false - }, - "drawer": { - "nav": [ - { - "heading": { - "name": "xxx xxxxxxxx", - "id": "xxx-xxxxxxxx" - }, - "items": [ - { - "name": "xxxx", - "href": "#", - "selected": true, - "index": 0 - }, - { - "name": "xxxxx", - "href": "#", - "hasChildren": true, - "children": [ - { - "name": "xxxxx xxxxxxx", - "href": "#" - }, - { - "name": "xx", - "href": "#" - }, - { - "name": "xx", - "href": "#" - }, - { - "name": "xxxxx", - "href": "#" - }, - { - "name": "xxxxxx", - "href": "#" - }, - { - "name": "xxxx xxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxx xxxxxxx", - "href": "#" - }, - { - "name": "xxxxxx", - "href": "#" - }, - { - "name": "xxxxx xxxxxxx", - "href": "#" - }, - { - "name": "xxxxxx xxxx xxx xxxxxx", - "href": "#" - } - ], - "index": 1 - }, - { - "name": "xx", - "href": "#", - "hasChildren": true, - "children": [ - { - "name": "xx xxxxxxx", - "href": "#" - }, - { - "name": "xx xxxxxxxx x xxxxxx", - "href": "#" - }, - { - "name": "xx xxxxxxxxx", - "href": "#" - } - ], - "index": 2 - }, - { - "name": "xxxxxxxxx", - "href": "#", - "hasChildren": true, - "children": [ - { - "name": "xxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxx", - "href": "#" - }, - { - "name": "xxxxxx x xxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxxx", - "href": "#" - } - ], - "index": 3 - }, - { - "name": "xxxxxxx", - "href": "#", - "hasChildren": true, - "children": [ - { - "name": "xxxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxx xxxx", - "href": "#" - }, - { - "name": "xxxxxxx xxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxx", - "href": "#" - }, - { - "name": "xxxx xxxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxx", - "href": "#" - } - ], - "index": 4 - }, - { - "name": "xxxxxxx", - "href": "#", - "hasChildren": true, - "children": [ - { - "name": "xxxxxxxxxx", - "href": "#" - }, - { - "name": "xx xxxx", - "href": "#" - }, - { - "name": "xxx xxx xxxx", - "href": "#" - }, - { - "name": "xxx", - "href": "#" - }, - { - "name": "xxxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxx", - "href": "#" - } - ], - "index": 5 - }, - { - "name": "xxxx x xxxxxxx", - "href": "#", - "hasChildren": true, - "children": [ - { - "name": "xxxxxxxx xxxxxx xxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxx xxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxxxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxx xxxxx", - "href": "#" - } - ], - "index": 6 - }, - { - "name": "xxxx x xxxx", - "href": "#", - "hasChildren": true, - "children": [ - { - "name": "xxxxx x xxxx", - "href": "#" - }, - { - "name": "xxxxx", - "href": "#" - }, - { - "name": "xxxx x xxxxx", - "href": "#" - }, - { - "name": "xxxxxx", - "href": "#" - }, - { - "name": "xxxxx", - "href": "#" - }, - { - "name": "xxxx", - "href": "#" - }, - { - "name": "xxxxxx", - "href": "#" - }, - { - "name": "xxxxx", - "href": "#" - }, - { - "name": "xxxxx xx x xxxxx", - "href": "#" - }, - { - "name": "xxxxxxxx", - "href": "#" - } - ], - "index": 7 - }, - { - "name": "xxxxxxxx xxxxxxx", - "href": "#", - "hasChildren": true, - "children": [ - { - "name": "xxxxxxxx x xxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxx", - "href": "#" - }, - { - "name": "xxx", - "href": "#" - }, - { - "name": "xxxxxxxx x xxxxxxx", - "href": "#" - } - ], - "index": 8 - }, - { - "name": "xxxxxxx x xxxxxxxxxxx", - "href": "#", - "index": 9 - } - ] - }, - { - "heading": { - "name": "xx xxxxxxxxxx", - "id": "xx-xxxxxxxxxx" - }, - "items": [ - { - "name": "xxx", - "href": "#", - "index": 0 - }, - { - "name": "xxxxxxxxxx", - "href": "#", - "index": 1 - }, - { - "name": "xxxxx xxxx xxx xx", - "href": "#", - "index": 2 - }, - { - "name": "xxxxx", - "href": "#", - "index": 3 - }, - { - "name": "xxxxxxx xxxxxxx", - "href": "#", - "index": 4 - }, - { - "name": "xxxx xxxx", - "href": "#", - "index": 5 - }, - { - "name": "xxxxxxxxxxx", - "href": "#", - "index": 6 - } - ] - }, - { - "divide": true, - "items": [ - { - "name": "xx xx", - "href": "#", - "variation": "secondary", - "index": 0 - }, - { - "name": "xxxxxxxxx", - "href": "#", - "variation": "secondary", - "index": 1 - }, - { - "name": "xxxxxxx xxxxx", - "href": "#", - "variation": "secondary", - "index": 2 - } - ] - } - ], - "editions": { - "current": { - "name": "UK", - "id": "uk" - }, - "others": [ - { - "name": "International", - "id": "international" - } - ] - }, - "user": { - "isSignedIn": false, - "name": "xxxxxx xxxx" - } - } -} diff --git a/components/o-header/demos/src/mega-menu.mustache b/components/o-header/demos/src/mega-menu.mustache deleted file mode 100644 index 5ddc333fe1..0000000000 --- a/components/o-header/demos/src/mega-menu.mustache +++ /dev/null @@ -1,83 +0,0 @@ -
- {{#nav}} - - - - {{/nav}} -
diff --git a/components/o-header/demos/src/pa11y.mustache b/components/o-header/demos/src/pa11y.mustache deleted file mode 100644 index c13d82cc6a..0000000000 --- a/components/o-header/demos/src/pa11y.mustache +++ /dev/null @@ -1,219 +0,0 @@ -
- - {{#anon}} -
- -
- {{/anon}} - - {{#top}} -
-
-
-
- {{#drawer}} - - Open side navigation menu - - {{/drawer}} - - Open search bar - -
-
- -
-
- {{#anon}} - Subscribe - {{/anon}} - {{#hasMyFT}} - - myFT - - {{/hasMyFT}} -
-
-
-
- {{/top}} - - {{#search}} - - - - - {{/search}} - - {{#nav}} - - - - {{/nav}} - -
- -{{#drawer}} - -{{/drawer}} diff --git a/components/o-header/demos/src/simple-header.mustache b/components/o-header/demos/src/simple-header.mustache deleted file mode 100644 index b55e5a1fb9..0000000000 --- a/components/o-header/demos/src/simple-header.mustache +++ /dev/null @@ -1,148 +0,0 @@ -
-
-
-
- -
- {{#top.drawer}} - - Open side navigation menu - - {{/top.drawer}} - - Open search bar - -
- -
- - -
- -
- - {{#top.hasMyFT}} - - myFT - - {{/top.hasMyFT}} -
-
-
-
- - - -
- -{{#drawer}} - -{{/drawer}} diff --git a/components/o-header/demos/src/sticky-header.mustache b/components/o-header/demos/src/sticky-header.mustache deleted file mode 100644 index d52da84671..0000000000 --- a/components/o-header/demos/src/sticky-header.mustache +++ /dev/null @@ -1,185 +0,0 @@ -
- - - {{#drawer}} - - {{/drawer}} -
diff --git a/components/o-header/demos/src/subnav-right-align.json b/components/o-header/demos/src/subnav-right-align.json deleted file mode 100644 index 53bc39639c..0000000000 --- a/components/o-header/demos/src/subnav-right-align.json +++ /dev/null @@ -1,514 +0,0 @@ -{ - "anon": true, - "top": { - "hasMyFT": true - }, - "search": true, - "nav": { - "mobile": [ - { - "name": "xxxx", - "url": "#", - "selected": false, - "index": 0 - }, - { - "name": "xxxxxx", - "url": "#", - "index": 1 - }, - { - "name": "xxxxxxx xxxx", - "url": "#", - "index": 2 - } - ], - "desktop": [ - { - "name": "xxxx", - "url": "#", - "selected": true, - "index": 0 - }, - { - "name": "xxxxx", - "url": "#", - "index": 1 - }, - { - "name": "xx", - "url": "#", - "index": 2 - }, - { - "name": "xxxxxxxxx", - "url": "#", - "index": 3 - }, - { - "name": "xxxx", - "url": "#", - "index": 4 - }, - { - "name": "xxxxxxx", - "url": "#", - "index": 5 - }, - { - "name": "xxxxxxx", - "url": "#", - "index": 6 - }, - { - "name": "xxxx x xxxxxxx", - "url": "#", - "index": 7 - }, - { - "name": "xxxx x xxxx", - "url": "#", - "index": 8 - }, - { - "name": "xxxxxxxx", - "url": "#", - "index": 9 - }, - { - "name": "xxx xx xxxxx xx", - "url": "#", - "index": 10 - } - ], - "isSignedIn": true - }, - "drawer": { - "nav": [ - { - "heading": { - "name": "xxx xxxxxxxx", - "id": "xxx-xxxxxxxx" - }, - "items": [ - { - "name": "xxxx", - "href": "#", - "selected": true, - "index": 0 - }, - { - "name": "xxxxx", - "href": "#", - "hasChildren": true, - "children": [ - { - "name": "xxxxx xxxxxxx", - "href": "#" - }, - { - "name": "xx", - "href": "#" - }, - { - "name": "xx", - "href": "#" - }, - { - "name": "xxxxx", - "href": "#" - }, - { - "name": "xxxxxx", - "href": "#" - }, - { - "name": "xxxx xxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxx xxxxxxx", - "href": "#" - }, - { - "name": "xxxxxx", - "href": "#" - }, - { - "name": "xxxxx xxxxxxx", - "href": "#" - }, - { - "name": "xxxxxx xxxx xxx xxxxxx", - "href": "#" - } - ], - "index": 1 - }, - { - "name": "xx", - "href": "#", - "hasChildren": true, - "children": [ - { - "name": "xx xxxxxxx", - "href": "#" - }, - { - "name": "xx xxxxxxxx x xxxxxx", - "href": "#" - }, - { - "name": "xx xxxxxxxxx", - "href": "#" - } - ], - "index": 2 - }, - { - "name": "xxxxxxxxx", - "href": "#", - "hasChildren": true, - "children": [ - { - "name": "xxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxx", - "href": "#" - }, - { - "name": "xxxxxx x xxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxxx", - "href": "#" - } - ], - "index": 3 - }, - { - "name": "xxxxxxx", - "href": "#", - "hasChildren": true, - "children": [ - { - "name": "xxxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxx xxxx", - "href": "#" - }, - { - "name": "xxxxxxx xxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxx", - "href": "#" - }, - { - "name": "xxxx xxxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxx", - "href": "#" - } - ], - "index": 4 - }, - { - "name": "xxxxxxx", - "href": "#", - "hasChildren": true, - "children": [ - { - "name": "xxxxxxxxxx", - "href": "#" - }, - { - "name": "xx xxxx", - "href": "#" - }, - { - "name": "xxx xxx xxxx", - "href": "#" - }, - { - "name": "xxx", - "href": "#" - }, - { - "name": "xxxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxx", - "href": "#" - } - ], - "index": 5 - }, - { - "name": "xxxx x xxxxxxx", - "href": "#", - "hasChildren": true, - "children": [ - { - "name": "xxxxxxxx xxxxxx xxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxx xxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxxxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxx xxxxx", - "href": "#" - } - ], - "index": 6 - }, - { - "name": "xxxx x xxxx", - "href": "#", - "hasChildren": true, - "children": [ - { - "name": "xxxxx x xxxx", - "href": "#" - }, - { - "name": "xxxxx", - "href": "#" - }, - { - "name": "xxxx x xxxxx", - "href": "#" - }, - { - "name": "xxxxxx", - "href": "#" - }, - { - "name": "xxxxx", - "href": "#" - }, - { - "name": "xxxx", - "href": "#" - }, - { - "name": "xxxxxx", - "href": "#" - }, - { - "name": "xxxxx", - "href": "#" - }, - { - "name": "xxxxx xx x xxxxx", - "href": "#" - }, - { - "name": "xxxxxxxx", - "href": "#" - } - ], - "index": 7 - }, - { - "name": "xxxxxxxx xxxxxxx", - "href": "#", - "hasChildren": true, - "children": [ - { - "name": "xxxxxxxx x xxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxx", - "href": "#" - }, - { - "name": "xxx", - "href": "#" - }, - { - "name": "xxxxxxxx x xxxxxxx", - "href": "#" - } - ], - "index": 8 - }, - { - "name": "xxxxxxx x xxxxxxxxxxx", - "href": "#", - "index": 9 - } - ] - }, - { - "heading": { - "name": "xx xxxxxxxxxx", - "id": "xx-xxxxxxxxxx" - }, - "items": [ - { - "name": "xxx", - "href": "#", - "index": 0 - }, - { - "name": "xxxxxxxxxx", - "href": "#", - "index": 1 - }, - { - "name": "xxxxx xxxx xxx xx", - "href": "#", - "index": 2 - }, - { - "name": "xxxxx", - "href": "#", - "index": 3 - }, - { - "name": "xxxxxxx xxxxxxx", - "href": "#", - "index": 4 - }, - { - "name": "xxxx xxxx", - "href": "#", - "index": 5 - }, - { - "name": "xxxxxxxxxxx", - "href": "#", - "index": 6 - } - ] - }, - { - "divide": true, - "items": [ - { - "name": "xx xx", - "href": "#", - "variation": "secondary", - "index": 0 - }, - { - "name": "xxxxxxxxx", - "href": "#", - "variation": "secondary", - "index": 1 - }, - { - "name": "xxxxxxx xxxxx", - "href": "#", - "variation": "secondary", - "index": 2 - } - ] - } - ], - "editions": { - "current": { - "name": "UK", - "id": "uk" - }, - "others": [ - { - "name": "International", - "id": "international" - } - ] - }, - "user": { - "isSignedIn": false, - "name": "xxxxxx xxxx" - } - }, - "subnav": true, - "currentNav": { - "name": "xx x xxxxxx", - "selected": true, - "ancestors": [ - { - "name": "xxxxx", - "href": "#" - } - ], - "children": [ - { - "name": "xx xxxxxxx", - "href": "#" - }, - { - "name": "xx xxxxxxxx x xxxxxx", - "href": "#" - }, - { - "name": "xx xxxxxxxxx", - "href": "#" - } - ], - "childrenRight": [ - { - "name": "xxxx xxx", - "href": "#" - } - ] - } -} diff --git a/components/o-header/demos/src/subnav.json b/components/o-header/demos/src/subnav.json deleted file mode 100644 index f7afd8124c..0000000000 --- a/components/o-header/demos/src/subnav.json +++ /dev/null @@ -1,509 +0,0 @@ -{ - "anon": true, - "top": { - "hasMyFT": true - }, - "search": true, - "nav": { - "mobile": [ - { - "name": "xxxx", - "url": "#", - "selected": false, - "index": 0 - }, - { - "name": "xxxxxx", - "url": "#", - "index": 1 - }, - { - "name": "xxxxxxx xxxx", - "url": "#", - "index": 2 - } - ], - "desktop": [ - { - "name": "xxxx", - "url": "#", - "selected": true, - "index": 0 - }, - { - "name": "xxxxx", - "url": "#", - "index": 1 - }, - { - "name": "xx", - "url": "#", - "index": 2 - }, - { - "name": "xxxxxxxxx", - "url": "#", - "index": 3 - }, - { - "name": "xxxx", - "url": "#", - "index": 4 - }, - { - "name": "xxxxxxx", - "url": "#", - "index": 5 - }, - { - "name": "xxxxxxx", - "url": "#", - "index": 6 - }, - { - "name": "xxxx x xxxxxxx", - "url": "#", - "index": 7 - }, - { - "name": "xxxx x xxxx", - "url": "#", - "index": 8 - }, - { - "name": "xxxxxxxx", - "url": "#", - "index": 9 - }, - { - "name": "xxx xx xxxxx xx", - "url": "#", - "index": 10 - } - ], - "isSignedIn": true - }, - "drawer": { - "nav": [ - { - "heading": { - "name": "xxx xxxxxxxx", - "id": "xxx-xxxxxxxx" - }, - "items": [ - { - "name": "xxxx", - "href": "#", - "selected": true, - "index": 0 - }, - { - "name": "xxxxx", - "href": "#", - "hasChildren": true, - "children": [ - { - "name": "xxxxx xxxxxxx", - "href": "#" - }, - { - "name": "xx", - "href": "#" - }, - { - "name": "xx", - "href": "#" - }, - { - "name": "xxxxx", - "href": "#" - }, - { - "name": "xxxxxx", - "href": "#" - }, - { - "name": "xxxx xxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxx xxxxxxx", - "href": "#" - }, - { - "name": "xxxxxx", - "href": "#" - }, - { - "name": "xxxxx xxxxxxx", - "href": "#" - }, - { - "name": "xxxxxx xxxx xxx xxxxxx", - "href": "#" - } - ], - "index": 1 - }, - { - "name": "xx", - "href": "#", - "hasChildren": true, - "children": [ - { - "name": "xx xxxxxxx", - "href": "#" - }, - { - "name": "xx xxxxxxxx x xxxxxx", - "href": "#" - }, - { - "name": "xx xxxxxxxxx", - "href": "#" - } - ], - "index": 2 - }, - { - "name": "xxxxxxxxx", - "href": "#", - "hasChildren": true, - "children": [ - { - "name": "xxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxx", - "href": "#" - }, - { - "name": "xxxxxx x xxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxxx", - "href": "#" - } - ], - "index": 3 - }, - { - "name": "xxxxxxx", - "href": "#", - "hasChildren": true, - "children": [ - { - "name": "xxxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxx xxxx", - "href": "#" - }, - { - "name": "xxxxxxx xxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxx", - "href": "#" - }, - { - "name": "xxxx xxxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxx", - "href": "#" - } - ], - "index": 4 - }, - { - "name": "xxxxxxx", - "href": "#", - "hasChildren": true, - "children": [ - { - "name": "xxxxxxxxxx", - "href": "#" - }, - { - "name": "xx xxxx", - "href": "#" - }, - { - "name": "xxx xxx xxxx", - "href": "#" - }, - { - "name": "xxx", - "href": "#" - }, - { - "name": "xxxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxx", - "href": "#" - } - ], - "index": 5 - }, - { - "name": "xxxx x xxxxxxx", - "href": "#", - "hasChildren": true, - "children": [ - { - "name": "xxxxxxxx xxxxxx xxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxx xxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxxxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxx xxxxx", - "href": "#" - } - ], - "index": 6 - }, - { - "name": "xxxx x xxxx", - "href": "#", - "hasChildren": true, - "children": [ - { - "name": "xxxxx x xxxx", - "href": "#" - }, - { - "name": "xxxxx", - "href": "#" - }, - { - "name": "xxxx x xxxxx", - "href": "#" - }, - { - "name": "xxxxxx", - "href": "#" - }, - { - "name": "xxxxx", - "href": "#" - }, - { - "name": "xxxx", - "href": "#" - }, - { - "name": "xxxxxx", - "href": "#" - }, - { - "name": "xxxxx", - "href": "#" - }, - { - "name": "xxxxx xx x xxxxx", - "href": "#" - }, - { - "name": "xxxxxxxx", - "href": "#" - } - ], - "index": 7 - }, - { - "name": "xxxxxxxx xxxxxxx", - "href": "#", - "hasChildren": true, - "children": [ - { - "name": "xxxxxxxx x xxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxxxxx", - "href": "#" - }, - { - "name": "xxxxxxxx", - "href": "#" - }, - { - "name": "xxx", - "href": "#" - }, - { - "name": "xxxxxxxx x xxxxxxx", - "href": "#" - } - ], - "index": 8 - }, - { - "name": "xxxxxxx x xxxxxxxxxxx", - "href": "#", - "index": 9 - } - ] - }, - { - "heading": { - "name": "xx xxxxxxxxxx", - "id": "xx-xxxxxxxxxx" - }, - "items": [ - { - "name": "xxx", - "href": "#", - "index": 0 - }, - { - "name": "xxxxxxxxxx", - "href": "#", - "index": 1 - }, - { - "name": "xxxxx xxxx xxx xx", - "href": "#", - "index": 2 - }, - { - "name": "xxxxx", - "href": "#", - "index": 3 - }, - { - "name": "xxxxxxx xxxxxxx", - "href": "#", - "index": 4 - }, - { - "name": "xxxx xxxx", - "href": "#", - "index": 5 - }, - { - "name": "xxxxxxxxxxx", - "href": "#", - "index": 6 - } - ] - }, - { - "divide": true, - "items": [ - { - "name": "xx xx", - "href": "#", - "variation": "secondary", - "index": 0 - }, - { - "name": "xxxxxxxxx", - "href": "#", - "variation": "secondary", - "index": 1 - }, - { - "name": "xxxxxxx xxxxx", - "href": "#", - "variation": "secondary", - "index": 2 - } - ] - } - ], - "editions": { - "current": { - "name": "xx", - "id": "uk" - }, - "others": [ - { - "name": "xxxxxxxxxxxxx", - "id": "international" - } - ] - }, - "user": { - "isSignedIn": false, - "name": "xxxxxx xxxx" - } - }, - "subnav": true, - "currentNav": { - "href": "#", - "name": "xx x xxxxxx", - "selected": true, - "ancestors": [ - { - "name": "xxxxx", - "href": "#" - } - ], - "children": [ - { - "name": "xx xxxxxxx", - "href": "#" - }, - { - "name": "xx xxxxxxxx x xxxxxx", - "href": "#" - }, - { - "name": "xx xxxxxxxxx", - "href": "#" - } - ] - } -} diff --git a/components/o-header/demos/src/subnav.mustache b/components/o-header/demos/src/subnav.mustache deleted file mode 100644 index 5d35ef1ca7..0000000000 --- a/components/o-header/demos/src/subnav.mustache +++ /dev/null @@ -1,96 +0,0 @@ -
- {{#nav}} - - - - {{/nav}} - - {{#subnav}} - - {{/subnav}} -
diff --git a/components/o-header/demos/src/transparent-header.json b/components/o-header/demos/src/transparent-header.json deleted file mode 100644 index 1a1fea6e6a..0000000000 --- a/components/o-header/demos/src/transparent-header.json +++ /dev/null @@ -1,87 +0,0 @@ -{ - "anon": true, - "variants": ["transparent", "simple"], - "top": { - "hasMyFT": false - }, - "hasSearch": false, - "nav": { - "mobile": [ - { - "name": "xxxx", - "url": "#", - "selected": true, - "index": 0 - }, - { - "name": "xxxxxx", - "url": "#", - "index": 1 - }, - { - "name": "xxxxxxx xxxx", - "url": "#", - "index": 2 - } - ], - "desktop": [ - { - "name": "xxxx", - "url": "#", - "selected": true, - "index": 0 - }, - { - "name": "xxxxx", - "url": "#", - "index": 1 - }, - { - "name": "xx", - "url": "#", - "index": 2 - }, - { - "name": "xxxxxxxxx", - "url": "#", - "index": 3 - }, - { - "name": "xxxx", - "url": "#", - "index": 4 - }, - { - "name": "xxxxxxx", - "url": "#", - "index": 5 - }, - { - "name": "xxxxxxx", - "url": "#", - "index": 6 - }, - { - "name": "xxxx x xxxxxxx", - "url": "#", - "index": 7 - }, - { - "name": "xxxx x xxxx", - "url": "#", - "index": 8 - }, - { - "name": "xxxxxxxx", - "url": "#", - "index": 9 - }, - { - "name": "xxx xx xxxxx xx", - "url": "#", - "index": 10 - } - ], - "isSignedIn": true - } -} diff --git a/components/o-header/main.scss b/components/o-header/main.scss index 2230b81453..3a6a98c738 100644 --- a/components/o-header/main.scss +++ b/components/o-header/main.scss @@ -7,6 +7,7 @@ @import '@financial-times/o-normalise/main'; @import '@financial-times/o-typography/main'; @import '@financial-times/o-visual-effects/main'; +@import '@financial-times/o-forms/main'; @import 'src/scss/brand'; @import 'src/scss/variables'; @@ -38,6 +39,17 @@ $gutter-width: map-get($o-grid-gutters, 'M') ); + @include oForms( + $opts: ( + 'elements': ( + 'text' + ), + 'features': ( + 'suffix', + ), + ) + ); + @if $include-base-styles == true { @include _oHeaderBase; } diff --git a/components/o-header/origami.json b/components/o-header/origami.json index 316309c7ea..f49955f278 100644 --- a/components/o-header/origami.json +++ b/components/o-header/origami.json @@ -1,9 +1,7 @@ { "origamiType": "component", "origamiVersion": "2.0", - "brands": [ - "core" - ], + "brands": ["core"], "support": "https://github.com/Financial-Times/origami/issues/new?labels=o-header,components", "supportContact": { "email": "origami.support@ft.com", @@ -21,85 +19,5 @@ "Array.prototype.filter", "requestAnimationFrame" ] - }, - "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" - } - ] + } } diff --git a/components/o-header/package.json b/components/o-header/package.json index 1a6830dc50..e5c7334089 100644 --- a/components/o-header/package.json +++ b/components/o-header/package.json @@ -1,49 +1,50 @@ { - "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": "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", + "@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 } diff --git a/components/o-header/src/scss/features/_drawer.scss b/components/o-header/src/scss/features/_drawer.scss index 7a07034e77..57b15b7a3e 100644 --- a/components/o-header/src/scss/features/_drawer.scss +++ b/components/o-header/src/scss/features/_drawer.scss @@ -32,7 +32,6 @@ } - &.o-header__drawer--open { // use a 2D transform because 3D are unsupported by IE9 transform: translateX(0); @@ -57,6 +56,7 @@ &::-webkit-scrollbar { width: 12px; } + &::-webkit-scrollbar-thumb { background: oColorsByName('black-30'); // you can't set the dimensions so use a border as a margin... @@ -69,32 +69,50 @@ // // Tools // + .o-header:has(.o-header__anon) ~ .o-header__drawer .o-header__drawer-tools { + @include oGridRespondTo($until: 'M') { + padding: ($_o-header-drawer-padding-y * 2.5) 0 0 $_o-header-drawer-padding-x; + } + } .o-header__drawer-tools { overflow: hidden; - padding: ($_o-header-drawer-padding-y * 1.5) 0 $_o-header-drawer-padding-y $_o-header-drawer-padding-x; + padding: $_o-header-drawer-padding-y 0 0 $_o-header-drawer-padding-x; background-color: _oHeaderGet('drawer-tools-background'); color: _oHeaderGet('drawer-tools-text'); - } + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; - .o-header__drawer-tools-logo { - @include _oHeaderBrandImage('brand-ft-masthead', _oHeaderGet('header-icon'), 210); - display: inline-block; - background-repeat: no-repeat; - background-size: contain; - width: 210px; - height: 18px; - border-bottom: 0; + .o-header__drawer-edition-switcher { + display: flex; + + .o-header__drawer-menu-link { + padding-left: 12px; + text-decoration: underline; + } + + .o-header__drawer-current-edition { + font-weight: 600; + color: oColorsByName('black-60'); + } + + .o-header__drawer-menu-item { + padding-top: 12px; + padding-right: 12px; + font-size: 18px; + } + } } .o-header__drawer-tools-close { // dividing by 1px removes the unit @include oIconsContent('cross', _oHeaderGet('drawer-tools-close'), $size: $_o-header-icon-size-large); box-sizing: border-box; - float: right; border: 0; opacity: 0.75; - cursor: pointer; - margin-top: -10px; + margin-left: -10px; // this is to align icon because icon background image have padding + &:hover, &:focus { opacity: 1; @@ -105,15 +123,6 @@ } } - // - // Editions - // - .o-header__drawer-current-edition { - @include oTypographySans($scale: -1); - color: oColorsByName('black-60'); - margin: 0.5em 0; - } - // // Actions // @@ -129,26 +138,25 @@ // Search // .o-header__drawer-search { - border-top: 2px solid oColorsByName('black-10'); - padding: $_o-header-drawer-padding-y $_o-header-drawer-padding-x; + padding: 0px $_o-header-drawer-padding-x; @include oGridRespondTo('oHeaderL') { display: none; } - } - .o-header__drawer-search-form { - display: flex; + .o-forms-field { + margin-bottom: 0px; + } } - .o-header__drawer-search-term, - .o-header__drawer-search-submit { + .o-header__drawer-search-term { box-sizing: border-box; - height: 32px; + height: 40px; padding: 8px (div($_o-header-drawer-padding-x, 2)); border: 1px solid; // prevent zoom on focus font-size: 100%; + line-height: 40px; } .o-header__drawer-search-term { @@ -164,6 +172,7 @@ // margin copied from o-forms since introducing a new dependency would // be a breaking change, this colour could go in o-colors as a usecase border: 1px solid oColorsByName('black-50'); + margin-right: oSpacingByName('s2'); &:focus { //currently overriden by o-normalise border-color: _oHeaderGet('drawer-search-term-highlight-border'); @@ -171,14 +180,12 @@ } .o-header__drawer-search-submit { - background-color: _oHeaderGet('drawer-search-submit-background'); - border-color: _oHeaderGet('drawer-search-submit-border'); - - &:after { - @include oIconsContent('search', oColorsByName('white'), $size: $_o-header-icon-size); - content: ''; - margin-top: -(div($_o-header-drawer-padding-y, 2)); - } + @include oButtonsContent($opts: ( + 'type': 'primary', + 'icon-only': true, + 'icon': 'search', + 'size': 'big' + )); } // @@ -233,6 +240,13 @@ .o-header__drawer-menu-item { margin-top: 1px; } + .o-header__drawer-divider { + margin-top: 16px; + width: 1px; + height: 16px; + background-color: oColorsMix('black', 'paper', 60); + display: inline-block; + } .o-header__drawer-menu-item--heading { diff --git a/components/o-header/src/scss/features/_search.scss b/components/o-header/src/scss/features/_search.scss index 64553109ae..1c60778f72 100644 --- a/components/o-header/src/scss/features/_search.scss +++ b/components/o-header/src/scss/features/_search.scss @@ -1,8 +1,10 @@ @mixin _oHeaderSearch() { .o-header__search { - padding: $_o-header-padding-y 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + padding-bottom: $_o-header-padding-y; text-align: center; - background: _oHeaderGet('search-background'); &[aria-hidden="false"] { display: block; @@ -16,7 +18,6 @@ .o-header__search-form { display: flex; align-items: center; - max-width: 640px; margin: 0 auto; } @@ -28,7 +29,6 @@ vertical-align: middle; // normalize appearance: none; - background: white; border-style: solid; border-color: transparent; box-shadow: none; @@ -36,16 +36,24 @@ // fill! min-width: 50%; flex-grow: 1; - border: 1px solid oColorsByName('black-50'); + align-items: center; + + .o-forms-input--text.o-forms-input--suffix { + width: 90%; + margin-top: 10px; + } } .o-header__search-submit { - @include oButtonsContent(( + @include oButtonsContent($opts: ( 'type': 'primary', - 'theme': $_o-header-buttons-theme + 'icon-only': true, + 'icon': 'search', + 'size': 'big' )); - height: 32px; // override o-buttons height margin-left: $_o-header-padding-x; + padding-left: 40px; + background-position: inherit; } .o-header__search-close { diff --git a/components/o-header/src/tsx/drawer.tsx b/components/o-header/src/tsx/drawer.tsx index 139cf8850d..03fce3195d 100644 --- a/components/o-header/src/tsx/drawer.tsx +++ b/components/o-header/src/tsx/drawer.tsx @@ -1,10 +1,6 @@ -import { TNavEdition, TNavAction, TNavMenuItem, THeaderProps } from "./Props"; +import {TNavEdition, TNavAction, TNavMenuItem, THeaderProps} from './Props'; -export function Drawer({ - data, - userIsLoggedIn, - userIsSubscribed, -}: THeaderProps) { +export function Drawer({data, userIsLoggedIn, userIsSubscribed}: THeaderProps) { const editions = data.editions; const subscribeAction = data.subscribeAction; const navItems = data.drawer.items; @@ -17,15 +13,16 @@ export function Drawer({ aria-modal="true" aria-label="Drawer menu" data-o-header-drawer - data-o-header-drawer--no-js - > + data-o-header-drawer--no-js>
- + + {!userIsSubscribed && subscribeAction && ( )} - -
@@ -33,32 +30,30 @@ export function Drawer({ ); } -function DrawerTools({ current }: { current: TNavEdition }) { +function DrawerTools({ + current, + otherEditions, +}: { + current: TNavEdition; + otherEditions: TNavEdition[]; +}) { return (
- - Financial Times - - {current && ( -

- {current.name} Edition -

- )} +
); } -function DrawerAction({ action }: { action: TNavAction }) { +function DrawerAction({action}: {action: TNavAction}) { return (
@@ -75,62 +70,67 @@ function DrawerSearch() { className="o-header__drawer-search-form" action="/search" role="search" - aria-label="Site search" - > + aria-label="Site search"> - -
); } function DrawerEditionSwitcher({ + current, otherEditions, }: { + current: TNavEdition; otherEditions: TNavEdition[]; }) { return ( -