Skip to content

Commit cfed6f1

Browse files
marcialfpsmarcialfps
committed
Merge branch 'master' of https://github.com/dxc-technology/halstack-react into marcialfps-issue-889
2 parents 3949a76 + 891fa95 commit cfed6f1

File tree

15 files changed

+286
-72
lines changed

15 files changed

+286
-72
lines changed

‎docs/src/pages/components/cdk-components/inset/Inset.jsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from "react";
2+
import { DxcHeading } from "@dxc-technology/halstack-react";
3+
import ComponentDoc from "../../common/ComponentDoc";
4+
import Section from "../../common/Section";
5+
import Example from "../../common/Example";
6+
import ComponentHeader from "../../common/ComponentHeader";
7+
import InsetPropsTable from "./api.jsx";
8+
import space from "./examples/space";
9+
import horizontal from "./examples/horizontal";
10+
import vertical from "./examples/vertical";
11+
import customAllSides from "./examples/customAllSides";
12+
13+
function Inset() {
14+
return (
15+
<ComponentDoc>
16+
<ComponentHeader title="Inset" status="experimental"></ComponentHeader>
17+
<Section>
18+
<DxcHeading level={3} text="Props" margin={{ bottom: "small" }} />
19+
<InsetPropsTable />
20+
</Section>
21+
<Section>
22+
<DxcHeading level={3} text="Examples" margin={{ bottom: "small" }} />
23+
<Example title="Space" example={space}></Example>
24+
<Example title="Horizontal" example={horizontal}></Example>
25+
<Example title="Vertical" example={vertical}></Example>
26+
<Example title="Custom each side" example={customAllSides}></Example>
27+
</Section>
28+
</ComponentDoc>
29+
);
30+
}
31+
32+
export default Inset;

‎docs/src/pages/components/cdk-components/inset/api.jsx‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import React from "react";
2+
import { DxcTable } from "@dxc-technology/halstack-react";
3+
4+
const insetPropsTable = () => {
5+
return (
6+
<DxcTable>
7+
<tr>
8+
<th>Name</th>
9+
<th>Default</th>
10+
<th>Description</th>
11+
</tr>
12+
<tr>
13+
<td>
14+
space: 'none' | 'xxxsmall' | 'xxsmall' | 'xsmall' | 'small' | 'medium'
15+
| 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge'
16+
</td>
17+
<td>
18+
<code>none</code>
19+
</td>
20+
<td>Applies the spacing scale to all sides.</td>
21+
</tr>
22+
<tr>
23+
<td>
24+
horizontal: 'none' | 'xxxsmall' | 'xxsmall' | 'xsmall' | 'small' |
25+
'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge'
26+
</td>
27+
<td>
28+
<code>none</code>
29+
</td>
30+
<td>Applies the spacing scale to the left and right sides.</td>
31+
</tr>
32+
<tr>
33+
<td>
34+
vertical: 'none' | 'xxxsmall' | 'xxsmall' | 'xsmall' | 'small' |
35+
'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge'
36+
</td>
37+
<td>
38+
<code>none</code>
39+
</td>
40+
<td>Applies the spacing scale to the top and bottom sides.</td>
41+
</tr>
42+
<tr>
43+
<td>
44+
top: 'none' | 'xxxsmall' | 'xxsmall' | 'xsmall' | 'small' | 'medium' |
45+
'large' | 'xlarge' | 'xxlarge' | 'xxxlarge'
46+
</td>
47+
<td>
48+
<code>none</code>
49+
</td>
50+
<td>Applies the spacing scale to the top side.</td>
51+
</tr>
52+
<tr>
53+
<td>
54+
right: 'none' | 'xxxsmall' | 'xxsmall' | 'xsmall' | 'small' | 'medium'
55+
| 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge'
56+
</td>
57+
<td>
58+
<code>none</code>
59+
</td>
60+
<td>Applies the spacing scale to the right side.</td>
61+
</tr>
62+
<tr>
63+
<td>
64+
bottom: 'none' | 'xxxsmall' | 'xxsmall' | 'xsmall' | 'small' |
65+
'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge'
66+
</td>
67+
<td>
68+
<code>none</code>
69+
</td>
70+
<td>Applies the spacing scale to the bottom side.</td>
71+
</tr>
72+
<tr>
73+
<td>
74+
left: 'none' | 'xxxsmall' | 'xxsmall' | 'xsmall' | 'small' | 'medium'
75+
| 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge'
76+
</td>
77+
<td>
78+
<code>none</code>
79+
</td>
80+
<td>Applies the spacing scale to the left side.</td>
81+
</tr>
82+
<tr>
83+
<td>children: node</td>
84+
<td></td>
85+
<td>Custom content inside the inset.</td>
86+
</tr>
87+
</DxcTable>
88+
);
89+
};
90+
91+
export default insetPropsTable;

‎docs/src/pages/components/cdk-components/inset/examples/customAllSides.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { DxcInset } from "@dxc-technology/halstack-react";
2+
import Placeholder from "../../../common/Placeholder";
3+
4+
const code = `() => {
5+
return (
6+
<div
7+
style={{
8+
background: "#f2eafa"
9+
}}
10+
>
11+
<DxcInset top="xsmall" right="small" bottom="medium" left="large">
12+
<Placeholder></Placeholder>
13+
</DxcInset>
14+
</div>
15+
);
16+
}`;
17+
18+
const scope = { DxcInset, Placeholder };
19+
20+
export default { code, scope };

‎docs/src/pages/components/cdk-components/inset/examples/horizontal.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { DxcInset } from "@dxc-technology/halstack-react";
2+
import Placeholder from "../../../common/Placeholder";
3+
4+
const code = `() => {
5+
return (
6+
<div
7+
style={{
8+
background: "#f2eafa"
9+
}}
10+
>
11+
<DxcInset horizontal="medium">
12+
<Placeholder></Placeholder>
13+
</DxcInset>
14+
</div>
15+
);
16+
}`;
17+
18+
const scope = { DxcInset, Placeholder };
19+
20+
export default { code, scope };

‎docs/src/pages/components/cdk-components/inset/examples/space.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { DxcInset } from "@dxc-technology/halstack-react";
2+
import Placeholder from "../../../common/Placeholder";
3+
4+
const code = `() => {
5+
return (
6+
<div
7+
style={{
8+
background: "#f2eafa"
9+
}}
10+
>
11+
<DxcInset space="medium">
12+
<Placeholder></Placeholder>
13+
</DxcInset>
14+
</div>
15+
);
16+
}`;
17+
18+
const scope = { DxcInset, Placeholder };
19+
20+
export default { code, scope };

‎docs/src/pages/components/cdk-components/inset/examples/vertical.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { DxcInset } from "@dxc-technology/halstack-react";
2+
import Placeholder from "../../../common/Placeholder";
3+
4+
const code = `() => {
5+
return (
6+
<div
7+
style={{
8+
background: "#f2eafa"
9+
}}
10+
>
11+
<DxcInset vertical="medium">
12+
<Placeholder></Placeholder>
13+
</DxcInset>
14+
</div>
15+
);
16+
}`;
17+
18+
const scope = { DxcInset, Placeholder };
19+
20+
export default { code, scope };

‎docs/src/pages/components/cdk-components/tabs/api.jsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,11 @@ const dropdownPropsTable = () => {
4646
Whether the icon should appear above or to the left of the label.
4747
</td>
4848
</tr>
49+
<tr>
50+
<td>defaultActiveTabIndex: number</td>
51+
<td></td>
52+
<td>Initially active tab, only when it is uncontrolled.</td>
53+
</tr>
4954
<tr>
5055
<td>activeTabIndex: number</td>
5156
<td></td>

‎docs/src/pages/components/cdk-components/tabs/examples/darkThemeTabs.js‎

Lines changed: 0 additions & 37 deletions
This file was deleted.

‎docs/src/pages/components/cdk-components/tabs/examples/uncontrolledTabs.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ const code = `() => {
88
99
return (
1010
<DxcTabs
11+
defaultActiveTabIndex={1}
1112
onTabClick={onTabClick}
1213
tabs={[
1314
{

‎docs/src/pages/components/paths.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ import FileInput from "./cdk-components/file-input/FileInput";
3535
import Select from "./cdk-components/select/Select";
3636
import RadioGroup from "./cdk-components/radio-group/RadioGroup";
3737
import Stack from "./cdk-components/stack/Stack";
38+
import Inset from "./cdk-components/inset/Inset";
3839
import Row from "./cdk-components/row/Row";
3940
import Bleed from "./cdk-components/bleed/Bleed";
4041
import QuickNav from "./cdk-components/quick-nav/QuickNav";
@@ -165,6 +166,13 @@ export default [
165166
type: types.UTILS,
166167
status: "ready",
167168
},
169+
{
170+
path: "inset",
171+
name: "Inset",
172+
component: Inset,
173+
type: types.LAYOUT,
174+
status: "experimental",
175+
},
168176
{
169177
path: "link",
170178
name: "Link",

0 commit comments

Comments
 (0)