Skip to content

Commit 5fbc578

Browse files
aweellaweell
committed
Merge branch '3.10.0' of https://github.com/dxc-technology/halstack-style-guide into 3.10.0
2 parents ed03717 + 48a8e76 commit 5fbc578

File tree

10 files changed

+100
-92
lines changed

10 files changed

+100
-92
lines changed

‎contributing/assets/components/sidenav_images.xd‎

42.2 KB
Binary file not shown.

‎guidelines/components/button/README.md‎

Lines changed: 25 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,21 @@ _Design specifications for button component_
4040

4141
### General
4242

43+
#### Spacing
44+
45+
| Component token | Element | Core token | Value |
46+
| :----------------------------- | :--------------- | :---------------- | :-------------- |
47+
| `primaryPaddingLeft` | Container | `spacing-03` | 0.5rem / 8px |
48+
| `primaryPaddingRight` | Container | `spacing-03` | 0.5rem / 8px |
49+
| `primaryPaddingTop` | Container | `spacing-03` | 0.5rem / 8px |
50+
| `primaryPaddingBottom` | Container | `spacing-03` | 0.5rem / 8px |
51+
52+
| Property | Element | Core token | Value |
53+
| :----------------------------- | :--------------- | :---------------- | :-------------- |
54+
| `margin-right` | Label | `spacing-03` | 0.5rem / 8px |
55+
| `margin-left` | Label | `spacing-03` | 0.5rem / 8px |
56+
| `margin-left` | Icon | `spacing-03` | 0.5rem / 8px |
57+
4358

4459
### Size
4560

@@ -103,7 +118,7 @@ These values can be applied independently to each side of the component:
103118
| `primaryActiveBackgroundColor` | Container fill:active | `color-purple-900` | #321353 |
104119
| `primaryDisabledBackgroundColor` | Container fill:disabled | `color-grey-100` | #f2f2f2 |
105120
| `primaryDisabledFontColor` | Label:disabled | `color-grey-500` | #999999 |
106-
| `secondaryFocusBorderColor` | Container border:focus | `color-blue-600` | #0095ff |
121+
| `primaryFocusBorderColor` | Container border:focus | `color-blue-600` | #0095ff |
107122

108123
#### Border
109124

@@ -120,18 +135,9 @@ These values can be applied independently to each side of the component:
120135
| Component token | Element | Core token | Value |
121136
| :---------------------- | :---------------- | :------------------- | :------------------------- |
122137
| `primaryFontFamily` | Label | `font-family-sans` | 'Open Sans', sans-serif |
123-
| `primaryBorderStyle` | Label | `font-scale-03` | 1 rem / 16px |
124-
| `primaryBorderRadius` | Label | `font-regular` | 400 |
125-
138+
| `primaryFontSize` | Label | `font-scale-03` | 1 rem / 16px |
139+
| `primaryBorderWeight` | Label | `font-regular` | 400 |
126140

127-
#### Spacing
128-
129-
| Component token | Element | Core token | Value |
130-
| :----------------------------- | :--------------- | :---------------- | :-------------- |
131-
| `primaryPaddingLeft` | Container | `spacing-03` | 0.5rem / 8px |
132-
| `primaryPaddingRight` | Container | `spacing-03` | 0.5rem / 8px |
133-
| `primaryPaddingTop` | Container | `spacing-05` | 1rem / 16px |
134-
| `primaryPaddingBottom` | Container | `spacing-05` | 1rem / 16px |
135141

136142

137143
### Secondary
@@ -151,11 +157,12 @@ These values can be applied independently to each side of the component:
151157
| Component token | Element | Token | Value |
152158
| :---------------------------------- | :-------------------------- | :----------------------- | :---------- |
153159
| `secondaryHoverBackgroundColor` | Container fill:hover | `color-purple-700` | #5f249f |
160+
| `secondaryHoverFontColor` | Label:hover | `color-white` | #ffffff |
154161
| `secondaryActiveBackgroundColor` | Container fill:active | `color-purple-900` | #321353 |
155-
| `secondaryDisabledBackgroundColor` | Container fill:disabled | `color-transparent` | transparent |
162+
| `secondaryDisabledBackgroundColor` | Container fill:disabled | `color-transparent` | transparent |
156163
| `secondaryDisabledFontColor` | Label:disabled | `color-grey-500` | #999999 |
157-
| `secondaryFocusBorderColor` | Container border:focus | `color-blue-600` | #0095ff |
158-
| `secondaryDisabledBorderColor` | Container border:disabled | `color-grey-500` | #999999 |
164+
| `secondaryFocusBorderColor` | Container border:focus | `color-blue-600` | #0095ff |
165+
| `secondaryDisabledBorderColor` | Container border:disabled | `color-grey-500` | #999999 |
159166

160167
#### Border
161168

@@ -175,16 +182,6 @@ These values can be applied independently to each side of the component:
175182
| `secondaryFontWeight` | Label | `font-regular` | 400 |
176183

177184

178-
#### Spacing
179-
180-
| Component token | Element | Core token | Value |
181-
| :----------------------------- | :--------------- | :---------------- | :-------------- |
182-
| `secondaryPaddingLeft` | Container | `spacing-03` | 0.5rem / 8px |
183-
| `secondaryPaddingRight` | Container | `spacing-03` | 0.5rem / 8px |
184-
| `secondaryPaddingTop` | Container | `spacing-05` | 1rem / 16px |
185-
| `secondaryPaddingBottom` | Container | `spacing-05` | 1rem / 16px |
186-
187-
188185
### Text
189186

190187
#### Color
@@ -193,7 +190,7 @@ These values can be applied independently to each side of the component:
193190

194191
| Component token | Element | Token | Value |
195192
| :---------------------------------- | :-------------------------- | :----------------------- | :---------- |
196-
| `textBackgroundColor` | Container fill | `transparent` | transparent |
193+
| `textBackgroundColor` | Container fill | `color-transparent` | transparent |
197194
| `textFontColor` | Label | `color-purple-700` | #5f249f |
198195

199196
###### Interactive
@@ -202,9 +199,9 @@ These values can be applied independently to each side of the component:
202199
| :---------------------------------- | :-------------------------- | :----------------------- | :---------- |
203200
| `textHoverBackgroundColor` | Container fill:hover | `color-purple-100` | #f2eafa |
204201
| `textActiveBackgroundColor` | Container fill:active | `color-purple-200` | #e5d5f6 |
205-
| `textDisabledBackgroundColor` | Container fill:disabled | `color-grey-100` | #f2f2f2 |
202+
| `textDisabledBackgroundColor` | Container fill:disabled | `color-transparent` | transparent |
206203
| `textDisabledFontColor` | Label:disabled | `color-grey-500` | #999999 |
207-
| `secondaryFocusBorderColor` | Container border:focus | `color-blue-600` | #0095ff |
204+
| `textFocusBorderColor` | Container border:focus | `color-blue-600` | #0095ff |
208205

209206

210207
#### Border
@@ -226,16 +223,6 @@ These values can be applied independently to each side of the component:
226223
| `textFontWeight` | Label | `font-regular` | 400 |
227224

228225

229-
#### Spacing
230-
231-
| Component token | Element | Core token | Value |
232-
| :-------------------------- | :--------------- | :---------------- | :-------------- |
233-
| `textPaddingLeft` | Container | `spacing-03` | 0.5rem / 8px |
234-
| `textPaddingRight` | Container | `spacing-03` | 0.5rem / 8px |
235-
| `textPaddingTop` | Container | `spacing-05` | 1rem / 16px |
236-
| `textPaddingBottom` | Container | `spacing-05` | 1rem / 16px |
237-
238-
239226
## Icon Usage
240227

241228
Any icon can be used in Halstack Design System, so it is apt to the user to choose between one of the multiple options that are offered through internet but it is recommended to use the same library of icons along the application to keeping concistency.

‎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)