Skip to content

Commit 83915b9

Browse files
aweellaweell
authored
Merge pull request #580 from dxc-technology/component-sidenav
Update sidenav documentation
2 parents b211f65 + b4fb03d commit 83915b9

File tree

9 files changed

+75
-54
lines changed

9 files changed

+75
-54
lines changed

‎contributing/assets/components/sidenav_images.xd‎

42.2 KB
Binary file not shown.

‎guidelines/components/sidenav/README.md‎

Lines changed: 75 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -2,48 +2,89 @@
22

33
The sidenav component is part of the layout of the application and it makes easier to divide the main screen into two different areas. The main area will have all the content and the sidenav as a secondary element as an index, including links to different resources on the web page.
44

5-
## Appearance
65

7-
This component looks like a container that is rendered in the left side of the application, different content can be placed within the container but the main aim of it is to serve as a guide with links to the subject treated in the main page.
8-
A grey background defines the area which the sidenav occupies and there is an arrow that allows the user to hide or show the component on the screen. Anyway, there are able some configurations to have or not the arrow as a handler to control the visibility of the component, so in the case that the arrow won't be displayed, the component will be fixed in the screen.
6+
## Usage
97

10-
### Modes
11-
12-
Two different modes can be set in the element, according to the needs of the application and the relation between the main content and the sidenav.
13-
The modes for the components are **overlay** and **push**.
14-
15-
The first mode, as the name is indicating, works as an overlay, leaving some content behind it on the occasion that will be displayed on the screen. That means that every time that the sidenav will be visible, some of the content of the main area remains covered by the layer.
16-
If the selection is the push mode, this allows us to have boths content visible in the screen, not hiding information at any time but with the constraint that the main area has to manage the content because the overall space will reduce the width of the sidenav element.
8+
- Use the sidenav element to improve the discoverability of the application, making the navigation links accessible to the users.
9+
- Keep in mind the type of the devices that you are developing for, and handle the behavior in a way that doesn't block or reduce the available space of the main area in the application
10+
- Try to follow and order for the sidenav content and make use of hierarchy to differentiate between a title and a link
1711

18-
![Sidenav modes](images/sidenav_modes.png)
1912

20-
## States
13+
## Variants
2114

22-
States are simple, it is a component that doesn't require much logic and the behavior is basic.
23-
It can be defined as two different modes: **default** and **static**.
15+
![Example of the overlay and push sidenav variants](images/sidenav_variants.png)
2416

25-
With the default mode, the component will be visible in the first load of the application (only for desktop version) and the visibility of it can be handled by the user using the arrow to trigger the event.
17+
_Example of the `overlay` and `push` sidenav variants_
2618

27-
The main difference in the static mode is that the arrow is removed from the component, so the user doesn't have the control to switch between views and the component will remain always visible.
19+
Two different modes can be set in the element, according to the needs of the application and the relation between the main content and the sidenav.
2820

29-
![Sidenav states](images/sidenav_states.png)
21+
| Variant | Description |
22+
| :---------- | :------------------------------------------------------------ |
23+
| **overlay** | Content is covered by the sidenav container when displayed |
24+
| **push** | Content is pushed right when displayed |
3025

31-
## Design specs
26+
## Anatomy
3227

33-
### Color
28+
![Sidenav anatomy](images/sidenav_anatomy.png)
3429

35-
#### Design tokens
30+
1. Title
31+
2. Subtitle
32+
3. Link
33+
4. Container
34+
5. Arrow
35+
## Design specifications
3636

37-
| Element | Color token | hex | hsl |
38-
| :------------------- | :------------ | :------------ | :------------ |
39-
| `backgroundColor` | `ui-background-02` | #f2f2f2 | (0, 0%, 95%) |
40-
| `arrowContainerColor` | - | #D9D9D9CC | - |
41-
| `arrowColor` | `icon-02` | #000000 | (0, 0%, 0%) |
37+
![Sidenav design specifications](images/sidenav_specs.png)
4238

39+
_Sidenav design specifications_
4340

44-
### Container
41+
### Color
4542

46-
#### Width and height
43+
| Component token | Element | Core token | Value |
44+
| :--------------------- | :--------------- | :----------------- | :-------- |
45+
| `backgroundColor` | Container | `color-grey-100` | #f2f2f2 |
46+
| `arrowContainerColor` | Arrow container | `color-grey-200` | #e6e6e6 |
47+
| `arrowColor` | Arrow | `color-black` | #000000 |
48+
| `titleFontColor` | Title | `color-black` | #000000 |
49+
| `subtitleFontColor` | Subtitle | `color-grey-700` | #666666 |
50+
| `linkFontColor` | Link | `color-black` | #000000 |
51+
52+
### Typography
53+
54+
| Component token | Element | Core token | Value |
55+
| :----------------------------- | :--------------- | :---------------------- | :------------------------ |
56+
| `titleFontFamily` | Title | `font-family-sans` | 'Open Sans', sans-serif |
57+
| `titleFontSize` | Title | `font-scale-05` | 1.5rem / 24px |
58+
| `titleFontWeight` | Title | `font-weight-regular` | 400 |
59+
| `titleFontStyle` | Title | `font-style-normal` | normal |
60+
| `subtitleFontFamily` | Subtitle | `font-family-sans` | 'Open Sans', sans-serif |
61+
| `subtitleFontSize` | Subtitle | `font-scale-03` | 1rem / 16px |
62+
| `subtitleFontWeight` | Subtitle | `font-weight-regular` | 400 |
63+
| `subtitleFontStyle` | Subtitle | `font-style-normal` | normal |
64+
| `subtitleFontLetterSpacing` | Subtitle | `font-tracking-wide-03` | 0.05em |
65+
| `subtitleFontTextTransform` | Subtitle | `font-uppercase` | uppercase |
66+
| `linkFontFamily` | Link | `font-family-sans` | 'Open Sans', sans-serif |
67+
| `titleFontSize` | Link | `font-scale-02` | 0.875rem / 14px |
68+
| `linkFontWeight` | Link | `font-weight-regular` | 400 |
69+
| `linkFontStyle` | Link | `font-style-normal` | normal |
70+
| `linkTextDecoration` | Link | `font-no-line` | none |
71+
72+
73+
### Spacing
74+
75+
| Component token | Element | Core token | Value |
76+
| :----------------------------- | :--------------- | :---------------------- | :------------- |
77+
| `linkMarginTop` | Link | `spacing-02` | 0.25rem / 4px |
78+
| `linkMarginBottom` | Link | `spacing-02` | 0.25rem / 4px |
79+
| `linkMarginLeft` | Link | `spacing-05` | 1rem / 16x |
80+
| `linkMarginRight` | Link | `spacing-05` | 1rem / 16x |
81+
82+
| Property | Element | Core token | Value |
83+
| :---------------------- | :--------------- | :---------------------- | :------------- |
84+
| `margin-bottom` | Title | `spacing-05` | 1rem / 16px |
85+
| `margin-bottom` | Subtitle | `spacing-02` | 0.25rem / 4px |
86+
87+
### Size
4788

4889
| Property for sidenav | Value |
4990
| -------------------- | :------------------------------ |
@@ -73,32 +114,17 @@ Padding can be set through the following values: (xxsmall', 'xsmall', 'small', '
73114
| Arrow distance | 50% |
74115

75116

76-
### Content
77-
78-
#### Padding
79-
80-
Element | value
81-
-- | --
82-
```sidenav-title``` | 15px 0px 15px 0px
83-
```sidenav-section-title``` | 15px 0px 15px 0px
84-
```sidenav-links``` | 6px 18px 6px 18px
85-
86-
#### Typography
87117

88-
Element | value | token
89-
-- | -- | -- |
90-
```sidenav-title``` | 24px | ```Hal-Headings-H4```
91-
```sidenav-section-title``` | 12px |```Hal-Overline```
92-
```sidenav-link``` | 14px |```Hal-Body-02-Regular```
93-
```sidenav-link-active``` |14px |```Hal-Body-02-Semibold```
118+
## Responsive version for mobile and tablet
94119

120+
![Sidenav component example in mobile devices](images/sidenav_responsive.png)
95121

96-
## Responsive version for mobile and tablet
122+
_Sidenav component example in mobile devices_
97123

98124
The responsive version of the component for mobile and tablet works a little bit different compared with the version for desktop. As the size of the screen in those devices is reduced, the default behavior in the first load of the page will be hidden in the sidenav component.
99125
Taking this approach, as a first view of the page the user has all the content in the main area visible, and then he will need to interact with the component to make it visible and navigate to other resources.
100126

101-
Also, as an important point to mention, the only mode that works with responsive is the overlay, due to lack of space in the screen if the sidenav pushed the content of the main container.
127+
Also, as an important point to mention, the only variant that works with responsive is the overlay, due to lack of space in the screen if the sidenav pushed the content of the main container.
102128

103129
Some properties regarding width vary, the details are indicated in the table below.
104130

@@ -110,17 +136,12 @@ Some properties regarding width vary, the details are indicated in the table bel
110136
| Arrow display | true (it cannot be false) |
111137
| Arrow distance | 50% |
112138

113-
![Sidenav responsive](images/sidenav_responsive.png)
114-
115-
## User Interface Design Considerations
116-
117-
- Use the sidenav element to improve the discoverability of the application, making the navigation links accessible to the users.
118-
- Keep in mind the type of the devices that you are developing for, and handle the behavior in a way that doesn't block or reduce the available space of the main area in the application
119-
- Try to follow and order for the sidenav content and make use of hierarchy to differentiate between a title and a link
120139

121140
## Links and references
122141

123-
- https://xd.adobe.com/view/23e2cca4-5021-490a-a548-e99a9b4a2006-76b1/screen/e52a6751-d2c1-41e4-84de-7647275db267/variables/
142+
* [React component](https://developer.dxc.com/tools/react/next/#/components/sidenav)
143+
* [Angular component](https://developer.dxc.com/tools/angular/next/#/components/sidenav)
144+
* [Adobe XD component](https://xd.adobe.com/view/498590ff-e553-4c88-b2c9-73972b53d95a-1cd6/)
124145

125146
____________________________________________________________
126147

‎guidelines/components/sidenav/images/sidenav_anatomy.png‎

28.3 KB
Loading

‎guidelines/components/sidenav/images/sidenav_modes.png‎

-6.97 KB
Binary file not shown.

‎guidelines/components/sidenav/images/sidenav_responsive.png‎

2.17 KB
Loading

‎guidelines/components/sidenav/images/sidenav_specs.png‎

44.2 KB
Loading

‎guidelines/components/sidenav/images/sidenav_states.png‎

-6.85 KB
Binary file not shown.

‎guidelines/components/sidenav/images/sidenav_variants.png‎

26.7 KB
Loading

‎guidelines/components/sidenav/miniature.png‎

-3.18 KB
Loading

0 commit comments

Comments
 (0)