Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(components): add header documentation #1386

Merged
merged 9 commits into from Jul 31, 2023
Merged

feat(components): add header documentation #1386

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
e9dc583
feat(docs): test
jeanBptst Mar 8, 2023
4720691
feat(docs): page header
jeanBptst Mar 9, 2023
b8b71a4
fix(docs): update comment header
jeanBptst Mar 9, 2023
a5cca07
fix(docs): pageheader rename
jeanBptst Mar 9, 2023
d4a2ff8
Merge branch 'master' into doc-pageheader
tiloyi Mar 15, 2023
5af70c9
docs(component/header): close Highlight tag
tiloyi Mar 15, 2023
fb2687d
remofe useless test file
caqueste Mar 17, 2023
e40358b
feat(docs/header): improve documentation
caqueste Jul 11, 2023
bc38dc5
Merge branch 'master' into doc-pageheader
mohamedMok Jul 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
9 changes: 9 additions & 0 deletions src/docs/Components/PageHeader/code.mdx
View file
Open in desktop
@@ -0,0 +1,9 @@
---
title: 'Code'
order: 2
---

<Highlight theme="warning" title="Work in progress">
We are currently working on the code documentation, it will be available
soon.
</Highlight>
82 changes: 82 additions & 0 deletions src/docs/Components/PageHeader/index.mdx
View file
Open in desktop
@@ -0,0 +1,82 @@
---
title: 'Page header'
order: 1
description: 'The Page header component is a persistent UI element located at the top of digital products pages.'
links:
webComponent:
status: 'ready'
link: 'https://ubiquitous-giggle-7b5b6e33.pages.github.io/?path=/story/components-header'
status:
figma: 'ready'
scss: 'ready'
searchKeywords: 'page header top'
---

> The Page header component is a persistent UI element located at the top of pages in ADEO's internal products, which helps to maintain consistency throughout the user's journey. It offers contextual information, feature-level navigation, and access to features like Help, Notifications, and Context selection.

<!-- Add preview -->

## Structure

To cover a maximum of needs while preserving consistency and ease of use, the Page header component offers multiple configurations through a range of settable elements.

| Element | Purpose | Notes | Mandatory / optional |
| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | -------------------- |
| **Page title** | Provide a concise and precise description of the page content to help users quickly understand the topic or function of the page. | The title must match the selected sidebar item at the start. Then on the following pages, it should change to reflect the content. | Mandatory |
| **Subtitle** | Complement the title with additional information to enhance the understanding of the content. | | Optional |
| **Status** | Indicates the status of the page object. | | Optional |
| **Tabs** | Feature-level navigation. | | Optional |
| **Back button** | Allows users to return to the previous page or cancel an ongoing task. | Can't be combined with the Breadcrumb. | Optional |
| **Breadcrumbs** | Allows users to return to one of the previous pages and find out where they are in their journey. | Can't be conbined with the back button. | Optional |
| **Key features section** | Display a quick access to the help page and the notifications, and allows users the change a context option. | Context option can be handle as well from a Select, a Dropdown or an Autocomplete. | Optional |
| **Shadow** | Allows to increase the contrast between the Page header and the page content. | Can also appears on scroll if the header is sticky | Optional |

## Variations

### Page title

| Size | Value | Usage |
| -------------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------- |
| **Small** | `size.font.07` | Mainly used on subpages when users have started a process. This title variation is often combined with the back button. |
| **Medium** (default) | `size.font.08` | Used on homepages and at the start of processes and user journeys. |
| **Large** | `size.font.09` | Specific uses like landing pages |

## Behaviours

### Responsive

The Page header is a flexible element that fills the container's width. It must start on the left-hand edge or next to the Sidebar component.

<Highlight theme="warning" title="Be aware">

Please note that the margins of the Page header depend on the container's width.

</Highlight>

### Breakpoints

For the moment, the Page header component has been designed for desktop devices, from breakpoints `L` to `XXL`.

### Content

As a component with a cross-functional purpose independent of page content, none of its elements can be disabled. If a feature is not available, it must not be displayed.

## Restrictions

The height of the Page header only depends on its configuration and can't be custom-tailored or modified.

## Layout

The Page header is always displayed above the page content and can be optionally fixed or not while scrolling. In the second case, it can appear when users scroll back to the top of the page.

## Do's and Don'ts

<HintItem>Always positioned at the top of the page.</HintItem>

<HintItem dont>No elements inside the Page header can be disabled.</HintItem>

<HintItem dont>Never add or modify styles of elements.</HintItem>

<HintItem dont>Never hide Page title.</HintItem>

<HintItem dont>Never use on B2C interfaces.</HintItem>