feat!: Drawer, search, and edition switcher updates (#1725)

- Move the close icon to the left side, to align the position with the opening burger menu. - Remove the logo from the drawer. - Update the style of the edition switcher. - Align search bar and search button styles using o-forms - Change search placeholder text --------- Co-authored-by: daniel <>
Financial-Times · Jul 5, 2024 · 090d384 · 090d384
1 parent b5e295a
commit 090d384
Show file tree

Hide file tree

Showing 28 changed files with 316 additions and 4,519 deletions.
diff --git 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,39 +33,32 @@ 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
-<a
-	className="o-header__top-myaccount"
-	href="/myaccount"
->
+<a className="o-header__top-myaccount" href="/myaccount">
 	<span>My Account</span>
 </a>
 ```
 
 > [!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 `<span>` 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
-<a
-	className="o-header__top-myaccount"
-	href="/myaccount"
-	tabIndex="-1"
->
+<a className="o-header__top-myaccount" href="/myaccount" tabindex="-1">
 	<span>My Account</span>
 </a>
 ```
 
-
 ## 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
 <nav>
 	<ul>
-	<!-- more list items without heading -->
+		<!-- more list items without heading -->
 	</ul>
 </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>
 </nav>
 ```
@@ -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,20 +189,23 @@ E.g. to output the header with select features:
 ```
 
 Or to output only base styles:
+
 ```diff
 -@include oHeaderBase;
 -@include oHeaderTop;
 +@include oHeader($opts: ());
 ```
 
 Or to output only extra features without the base styles required by all features:
+
 ```diff
 -@include _oHeaderDrawer;
 -@include _oHeaderSticky;
 +@include oHeader($opts: ('drawer', 'sticky'), $include-base-styles: false);
 ```
 
 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
@@ -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 `<header>` 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