|
1 | 1 | # Box |
2 | 2 |
|
3 | | - |
| 3 | +There are different ways to organise the content on the webpage to facilitate the user according to his nature of interaction with the content like forms, tables, lists etc. One of the best ways to organize the webpage is by using groups of related content, this can be achieved by using a dedicated Box component. |
4 | 4 |
|
5 | 5 |
|
6 | | -There are different ways to organise the content on the webpage to facilitate the user according to his nature of interaction with the content like forms, tables, lists etc. One of the best ways to organize the webpage is by using groups of related content, this can be achieved by using a dedicated Box component. |
| 6 | +## Usage |
7 | 7 |
|
8 | | -## Appearance |
| 8 | +* Organize the group layout with the information presented clearly by applying the styles in the box container. |
| 9 | +* Box can be reused accros the UI, avoid using different variants in the same page. |
| 10 | +* Use always a minimun padding and always leave enough margin when stacking boxes so the shadows don't ovelap. |
9 | 11 |
|
10 | | -Just as the name indicates the content in the webpage can be grouped using the Box Component, which is a simple wrapper component used to organise the layout within the box container. |
| 12 | +## Variants |
11 | 13 |
|
12 | | -The Box has properties like margins, padding, borders, shadows, background colors etc. and organise the layout design serving as a container for interactive / non-interactive components like icons, labels, paragraphs and buttons etc. |
| 14 | + |
13 | 15 |
|
14 | | -### Modes |
| 16 | +_Box component variants_ |
15 | 17 |
|
16 | | -#### No-shadow: |
17 | | -Can be used as a container, there's no visual appearance of the box in the UI, just works as a simple <div> |
| 18 | +The `shadow-default` and `shadow-high` variants can be used to create clear distictions between sections of content without the use of borders or separators, the `no-shadow` helps in the process of building the layout. Note that when using an application `background-color` different than white, the limits of the box are goig to be clearly visible no matter the variant choosed. |
| 19 | +## Content |
18 | 20 |
|
19 | | -#### Shadow depth 1: |
20 | | -Regular visualization of the box, the container can be used to create a clear distinction between different sections of the UI. |
| 21 | +Any type of content can be place inside the box component. |
21 | 22 |
|
22 | | -#### Shadow depth 2: |
23 | | -Basically the same as the previous on but with a deeper shadow. |
24 | 23 |
|
25 | 24 | ## Design specifications |
26 | 25 |
|
| 26 | + |
| 27 | + |
| 28 | + |
| 29 | +_Component design specifications_ |
| 30 | + |
| 31 | +### Color |
| 32 | + |
| 33 | +| Component token | Element | Core token | Value | |
| 34 | +| :------------------------------ | :--------------------------- | :--------------------- | :------------------------ | |
| 35 | +| `backgroundColor` | Container | `color-white` | #ffffff | |
| 36 | +| `borderColor` | Container | `color-transparent` | #transparent | |
| 37 | +| `noneShadowDepthShadowColor` | Shadow | `color-transparent` | transparent | |
| 38 | +| `oneShadowDepthShadowColor` | Shadow | - | #00000033 | |
| 39 | +| `twoShadowDepthShadowColor` | Shadow | - | #00000033 | |
| 40 | + |
| 41 | + |
| 42 | + |
27 | 43 | ### Border |
28 | 44 |
|
29 | | -| Property | Element | Core token | Value | |
| 45 | +| Component token | Element | Core token | Value | |
30 | 46 | | :------------------------------ | :--------------------------- | :--------------------- | :------------------------ | |
31 | | -| `border-width` | Container border | `border-width-0` | 0 | |
32 | | -| `border-radius` | Container border | `border-radius-medium` | 0.25rem / 4px | |
| 47 | +| `borderThickness` | Container border | `border-width-0` | 0 | |
| 48 | +| `borderRadius` | Container border | `border-radius-medium` | 0.25rem / 4px | |
| 49 | +| `borderStyle` | Container border | `border-style-none` | none | |
| 50 | + |
| 51 | + |
| 52 | +### Shadow |
| 53 | + |
| 54 | +| Component token | Element | Core token | Value | |
| 55 | +| :------------------------------ | :--------------------------- | :--------------------- | :------------------------------ | |
| 56 | +| `noneShadowDepthShadowOffsetX` | Container shadow | - | none | |
| 57 | +| `noneShadowDepthShadowOffsetY` | Container shadow | - | none | |
| 58 | +| `noneShadowDepthShadowBlur` | Container shadow | - | none | |
| 59 | +| `noneShadowDepthShadowSpread` | Container shadow | - | none | |
| 60 | +| `oneShadowDepthShadowOffsetX` | Container shadow | - | 0x | |
| 61 | +| `oneShadowDepthShadowOffsetY` | Container shadow | - | 3px | |
| 62 | +| `oneShadowDepthShadowBlur` | Container shadow | - | 6px | |
| 63 | +| `oneShadowDepthShadowSpread` | Container shadow | - | 0px | |
| 64 | +| `twoShadowDepthShadowOffsetX` | Container shadow | - | 0x | |
| 65 | +| `twoShadowDepthShadowOffsetY` | Container shadow | - | 3px | |
| 66 | +| `twoShadowDepthShadowBlur` | Container shadow | - | 10px | |
| 67 | +| `twoShadowDepthShadowSpread` | Container shadow | - | 0px | |
| 68 | + |
| 69 | + |
| 70 | + |
33 | 71 | ### Width |
34 | 72 |
|
35 | 73 | In the cases of `fillParent` and `fillContent` the box is going to behave as a fluid container occupying the space the parent leaves for its children or adapting its size to the children it the box has. Instead of using a fluid approach, you can set a fixed size, choosing between `small`, `medium` and `large` properties. |
@@ -72,17 +110,11 @@ padding | value |
72 | 110 | And also apply different values to each side of the component: |
73 | 111 | ```top``` ```bottom``` ```left``` ```right``` |
74 | 112 |
|
75 | | -## Content |
76 | | - |
77 | | -Any type of content can be place inside the box component. |
78 | | - |
79 | | - |
80 | | -## User interface considerations |
| 113 | +## Links and references |
81 | 114 |
|
82 | | - |
83 | | -* Organize the group layout with the information presented clearly by applying the styles in the box container. |
84 | | -* Box can be reused accros the UI, avoid using different shadow depths in the same page. |
85 | | -* Use always a minimun padding and always leave enough margin when stacking boxes so the shadows don't ovelap. |
| 115 | +* [React component](https://developer.dxc.com/tools/react/next/#/components/box) |
| 116 | +* [Angular component](https://developer.dxc.com/tools/angular/next/#/components/box) |
| 117 | +* [Adobe XD component](https://xd.adobe.com/view/5dbf0c6e-c116-4fe2-970e-344911a74201-08ec/) |
86 | 118 |
|
87 | 119 | ____________________________________________________________ |
88 | 120 |
|
|
0 commit comments