From ebe9e6dcbcb86dc76a5494a93fc111199f9acd37 Mon Sep 17 00:00:00 2001 From: Simon Adcock Date: Wed, 18 May 2022 14:51:21 +0100 Subject: [PATCH] implement changes from design review --- docs/rfcs/header-component-api.md | 213 +++++++++++++++--------------- 1 file changed, 107 insertions(+), 106 deletions(-) diff --git a/docs/rfcs/header-component-api.md b/docs/rfcs/header-component-api.md index cedb43222..93e43ef0d 100644 --- a/docs/rfcs/header-component-api.md +++ b/docs/rfcs/header-component-api.md @@ -10,37 +10,44 @@ This proposal outlines an API that tries to capture the areas of standardisation ```jsx
- - - } label until from /> - - - - - } label until from /> - - + + + } label until from /> + + + + + } label until from /> + + - - + - - - - + + + - - - + + + + + - + + +
``` @@ -56,74 +63,74 @@ Generic header component. The logo is hard-coded. ```jsx
- +
``` -### `` +### `` The area at the top of the header that houses features related to the brand and customisation, rather than content discovery. Examples include the support message, top level links, the Guardian logo and the Edition Switch. The logo is hardcoded. -![Brand bar](images/header-component-api/brand-bar.png) +![Masthead](images/header-component-api/brand-bar.png) #### Example ```jsx - - } label until from /> - - - - + + } label until from /> + + + + ``` -#### `` +#### `` A list of top-level links and menus that is displayed at the very top of the header. -![Brand bar links](images/header-component-api/brand-bar-links.png) +![Masthead links](images/header-component-api/brand-bar-links.png) -#### `` +#### `` -A link that is displayed in the `BrandBar.Links` section of the header, or within a `BrandBar.LinkList` dropdown. +A link that is displayed in the `Masthead.Links` section of the header, or within a `Masthead.Menu` dropdown. -![Brand bar link](images/header-component-api/brand-bar-link.png) +![Masthead link](images/header-component-api/brand-bar-link.png) ##### Props - `href` _string_ - - navigation location when `BrandBar.Link` is clicked + - navigation location when `Masthead.Link` is clicked - `onClick` _function_ - - logic that is executed when the `BrandBar.Link` is clicked + - logic that is executed when the `Masthead.Link` is clicked - `label` _string_ - - display label of the `BrandBar.Link` + - display label of the `Masthead.Link` - `icon` _ReactNode_ - icon that appears alongside the label - `from` _Breakpoint_ - - the breakpoint at which the `BrandBar.Link` becomes visible + - the breakpoint at which the `Masthead.Link` becomes visible - `until` _Breakpoint_ - - the breakpoint at which the `BrandBar.Link` is no longer displayed + - the breakpoint at which the `Masthead.Link` is no longer displayed -#### `` +#### `` -A dropdown menu that is displayed in the `BrandBar.Links` section of the header. +A dropdown menu that is displayed in the `Masthead.Links` section of the header. -![Brand bar link list](images/header-component-api/brand-bar-link-list.png) +![Masthead link list](images/header-component-api/brand-bar-link-list.png) ##### Props - `label` _string_ - - display label of the `BrandBar.LinkList` + - display label of the `Masthead.Menu` - `icon` _ReactNode_ - icon that appears alongside the label - `from` _Breakpoint_ - - the breakpoint at which the `BrandBar.LinkList` becomes visible + - the breakpoint at which the `Masthead.Menu` becomes visible - `until` _Breakpoint_ - - the breakpoint at which the `BrandBar.LinkList` is no longer displayed + - the breakpoint at which the `Masthead.Menu` is no longer displayed ### `` @@ -135,24 +142,21 @@ The top-level navigation menu. ```jsx - - - - - - + + + + + - - + + ``` -#### `` +#### `` The main visible navigational links @@ -161,24 +165,21 @@ The main visible navigational links ##### Example ```jsx - - - + + + ``` -##### `` +##### `` -A navigational link that appears in the `Navigation.PrimaryLinks` component +A navigational link that appears in the `Navigation.Links` component ![Navigation primary link](images/header-component-api/navigation-primary-link.png) ###### Example ```jsx -` +#### `` An expanding menu that opens on click of the veggie burger icon, or the "more" link at wider breakpoints @@ -206,21 +207,21 @@ An expanding menu that opens on click of the veggie burger icon, or the "more" l ##### Example ```jsx - - - + + - - + - + ``` -##### `` +##### `` A column of links within the `SecondaryLinks` panel @@ -229,50 +230,50 @@ A column of links within the `SecondaryLinks` panel ###### Example ```jsx - - + - - + ``` -###### `` +###### `` -A navigational link that appears in the `Navigation.SecondaryLinks` component +A navigational link that appears in the `Navigation.Menu` component ![Navigation secondary link](images/header-component-api/navigation-secondary-link.png) ###### Props - `href` _string_ - - navigation location when `Navigation.SecondaryLink` is clicked + - navigation location when `Navigation.MenuLink` is clicked - `label` _string_ - - display label of the `Navigation.SecondaryLink` + - display label of the `Navigation.MenuLink` ###### Example ```jsx - ``` -##### `` +##### `` -A visually prominent navigational link that appears in the `Navigation.SecondaryLinks` component. +A visually prominent navigational link that appears in the `Navigation.Menu` component. ![Navigation secondary links supplemental link](images/header-component-api/navigation-secondary-links-supplemental-link.png) ###### Example ```jsx - @@ -281,9 +282,9 @@ A visually prominent navigational link that appears in the `Navigation.Secondary ###### Props - `href` _string_ - - navigation location when `Navigation.SecondaryLinksSupplementalLink` is clicked + - navigation location when `Navigation.MenuSupplementalLink` is clicked - `label` _string_ - - display label of the `Navigation.SecondaryLinksSupplementalLink` + - display label of the `Navigation.MenuSupplementalLink` ### `` @@ -354,21 +355,21 @@ A special header layout for editorial pages. The logo and supporter messages are ```jsx - - - } label until from /> - - - - - } label until from /> - + + + } label until from /> + + + + + } label until from /> + - + @@ -384,7 +385,7 @@ A special header layout for editorial pages. The logo and supporter messages are #### `` -The Editions switch dropdown menu appears to the right of the logo in the Editorial Header. It allows the user to switch the default edition of the network front that is displayed when they visit theguardian.com. +The Editions dropdown menu appears to the right of the logo in the Editorial Header. It allows the user to switch the default edition of the network front that is displayed when they visit theguardian.com. ![Editorial header edition switch](images/header-component-api/editorial-header-edition-switch.png) @@ -448,11 +449,11 @@ Represents a link to an Edition that appears in the Edition Switch dropdown menu - Logos - Editions switch - Support messaging - - BrandBar links + - Masthead links - Do we hardcode the URLs or should platforms control the actual links? - Should Source be aware of / managing Islands? - We need to avoid re-rendering the entire header on the client because Nav is pretty huge, and doesn’t need to be dynamic - Should we be imposing the Island architecture on all platforms? - Could we allow consumers to compose their own header - Via props - - `} />` + - `} />`