Skip to content

Commit 2cdd97f

Browse files
raquelarrojoraquelarrojo
authored
Merge branch 'master' into rarrojolopez-footer
2 parents ac8af6a + da4b2be commit 2cdd97f

File tree

9 files changed

+95
-296
lines changed

9 files changed

+95
-296
lines changed

‎app/package-lock.json‎

Lines changed: 0 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/src/pages/Box.jsx‎

Lines changed: 3 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -67,42 +67,6 @@ function App() {
6767
xxLarge margin box
6868
</DxcBox>
6969
</div>
70-
<h4>Paddings</h4>
71-
<div className="test-case" id="padding-xxsmall">
72-
<DxcBox size="medium" padding="xxsmall">
73-
xxSmall padding box
74-
</DxcBox>
75-
</div>
76-
<div className="test-case" id="padding-xsmall">
77-
<DxcBox size="medium" padding="xsmall">
78-
xSmall padding box
79-
</DxcBox>
80-
</div>
81-
<div className="test-case" id="padding-small">
82-
<DxcBox size="medium" padding="small">
83-
Small padding box
84-
</DxcBox>
85-
</div>
86-
<div className="test-case" id="padding-medium">
87-
<DxcBox size="medium" padding="medium">
88-
Medium padding box
89-
</DxcBox>
90-
</div>
91-
<div className="test-case" id="padding-large">
92-
<DxcBox size="medium" padding="large">
93-
Large padding box
94-
</DxcBox>
95-
</div>
96-
<div className="test-case" id="padding-xlarge">
97-
<DxcBox size="medium" padding="xlarge">
98-
xLarge padding box
99-
</DxcBox>
100-
</div>
101-
<div className="test-case" id="padding-xxlarge">
102-
<DxcBox size="medium" padding="xxlarge">
103-
xxLarge padding box
104-
</DxcBox>
105-
</div>
10670
<h4>Shadow Depth</h4>
10771
<div className="test-case" id="shadowDepth-0">
10872
<DxcBox size="medium" margin="medium" shadowDepth={0}>
@@ -120,37 +84,18 @@ function App() {
12084
</DxcBox>
12185
</div>
12286
<h4>Examples</h4>
123-
<DxcBox
124-
margin="medium"
125-
padding="medium"
126-
shadowDepth={1}
127-
display="block"
128-
size="medium"
129-
>
87+
<DxcBox margin="medium" shadowDepth={1} display="block" size="medium">
13088
Hola que tal
13189
</DxcBox>
132-
<DxcBox
133-
margin="medium"
134-
padding="medium"
135-
shadowDepth={1}
136-
display="block"
137-
size="large"
138-
>
90+
<DxcBox margin="medium" shadowDepth={1} display="block" size="large">
13991
Hola que tal
14092
</DxcBox>
141-
<DxcBox
142-
margin="medium"
143-
padding="medium"
144-
shadowDepth={1}
145-
display="block"
146-
size="small"
147-
>
93+
<DxcBox margin="medium" shadowDepth={1} display="block" size="small">
14894
Hola que tal
14995
</DxcBox>
15096
<div style={{ width: "250px" }}>
15197
<DxcBox
15298
margin="medium"
153-
padding="medium"
15499
shadowDepth={1}
155100
display="block"
156101
size="fillParent"

‎lib/src/box/Box.stories.tsx‎

Lines changed: 25 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from "react";
22
import Title from "../../.storybook/components/Title";
33
import ExampleContainer from "../../.storybook/components/ExampleContainer";
44
import DxcBox from "./Box";
5+
import DxcInset from "../inset/Inset";
56
import { HalstackProvider } from "../HalstackContext";
67

78
export default {
@@ -19,99 +20,70 @@ export const Chromatic = () => (
1920
<>
2021
<Title title="Display flex" theme="light" level={2} />
2122
<ExampleContainer>
22-
<DxcBox display="flex" padding="medium">
23-
Box
23+
<DxcBox display="flex">
24+
<DxcInset space="2rem">Box</DxcInset>
2425
</DxcBox>
2526
</ExampleContainer>
2627
<Title title="ShadowDepth" theme="light" level={2} />
2728
<ExampleContainer>
2829
<Title title="ShadowDepth 0" theme="light" level={4} />
29-
<DxcBox shadowDepth={0} margin="medium" padding="medium">
30-
Box
30+
<DxcBox shadowDepth={0} margin="medium">
31+
<DxcInset space="2rem">Box</DxcInset>
3132
</DxcBox>
3233
</ExampleContainer>
3334
<ExampleContainer>
3435
<Title title="ShadowDepth 1" theme="light" level={4} />
35-
<DxcBox shadowDepth={1} margin="medium" padding="medium">
36-
Box
36+
<DxcBox shadowDepth={1} margin="medium">
37+
<DxcInset space="2rem">Box</DxcInset>
3738
</DxcBox>
3839
</ExampleContainer>
3940
<ExampleContainer>
4041
<Title title="ShadowDepth 2" theme="light" level={4} />
41-
<DxcBox shadowDepth={2} margin="medium" padding="medium">
42-
Box
42+
<DxcBox shadowDepth={2} margin="medium">
43+
<DxcInset space="2rem">Box</DxcInset>
4344
</DxcBox>
4445
</ExampleContainer>
45-
<Title title="Paddings" theme="light" level={2} />
46-
<ExampleContainer>
47-
<Title title="Xxsmall padding" theme="light" level={4} />
48-
<DxcBox padding="xxsmall">Box</DxcBox>
49-
</ExampleContainer>
50-
<ExampleContainer>
51-
<Title title="Xsmall padding" theme="light" level={4} />
52-
<DxcBox padding="xsmall">Box</DxcBox>
53-
</ExampleContainer>
54-
<ExampleContainer>
55-
<Title title="Small padding" theme="light" level={4} />
56-
<DxcBox padding="small">Box</DxcBox>
57-
</ExampleContainer>
58-
<ExampleContainer>
59-
<Title title="Medium padding" theme="light" level={4} />
60-
<DxcBox padding="medium">Box</DxcBox>
61-
</ExampleContainer>
62-
<ExampleContainer>
63-
<Title title="Large padding" theme="light" level={4} />
64-
<DxcBox padding="large">Box</DxcBox>
65-
</ExampleContainer>
66-
<ExampleContainer>
67-
<Title title="Xlarge padding" theme="light" level={4} />
68-
<DxcBox padding="xlarge">Box</DxcBox>
69-
</ExampleContainer>
70-
<ExampleContainer>
71-
<Title title="Xxlarge padding" theme="light" level={4} />
72-
<DxcBox padding="xxlarge">Box</DxcBox>
73-
</ExampleContainer>
7446
<Title title="Margins" theme="light" level={2} />
7547
<ExampleContainer>
7648
<Title title="Xxsmall margin" theme="light" level={4} />
77-
<DxcBox margin="xxsmall" padding="medium">
78-
Box
49+
<DxcBox margin="xxsmall">
50+
<DxcInset space="2rem">Box</DxcInset>
7951
</DxcBox>
8052
</ExampleContainer>
8153
<ExampleContainer>
8254
<Title title="Xsmall margin" theme="light" level={4} />
83-
<DxcBox margin="xsmall" padding="medium">
84-
Box
55+
<DxcBox margin="xsmall">
56+
<DxcInset space="2rem">Box</DxcInset>
8557
</DxcBox>
8658
</ExampleContainer>
8759
<ExampleContainer>
8860
<Title title="Small margin" theme="light" level={4} />
89-
<DxcBox margin="small" padding="medium">
90-
Box
61+
<DxcBox margin="small">
62+
<DxcInset space="2rem">Box</DxcInset>
9163
</DxcBox>
9264
</ExampleContainer>
9365
<ExampleContainer>
9466
<Title title="Medium margin" theme="light" level={4} />
95-
<DxcBox margin="medium" padding="medium">
96-
Box
67+
<DxcBox margin="medium">
68+
<DxcInset space="2rem">Box</DxcInset>
9769
</DxcBox>
9870
</ExampleContainer>
9971
<ExampleContainer>
10072
<Title title="Large margin" theme="light" level={4} />
101-
<DxcBox margin="large" padding="medium">
102-
Box
73+
<DxcBox margin="large">
74+
<DxcInset space="2rem">Box</DxcInset>
10375
</DxcBox>
10476
</ExampleContainer>
10577
<ExampleContainer>
10678
<Title title="Xlarge margin" theme="light" level={4} />
107-
<DxcBox margin="xlarge" padding="medium">
108-
Box
79+
<DxcBox margin="xlarge">
80+
<DxcInset space="2rem">Box</DxcInset>
10981
</DxcBox>
11082
</ExampleContainer>
11183
<ExampleContainer>
11284
<Title title="Xxlarge margin" theme="light" level={4} />
113-
<DxcBox margin="xxlarge" padding="medium">
114-
Box
85+
<DxcBox margin="xxlarge">
86+
<DxcInset space="2rem">Box</DxcInset>
11587
</DxcBox>
11688
</ExampleContainer>
11789
<Title title="Sizes" theme="light" level={2} />
@@ -138,8 +110,8 @@ export const Chromatic = () => (
138110
<Title title="Opinionated theme" theme="light" level={2} />
139111
<ExampleContainer>
140112
<HalstackProvider theme={opinionatedTheme}>
141-
<DxcBox display="flex" padding="medium">
142-
Box
113+
<DxcBox display="flex">
114+
<DxcInset space="2rem">Box</DxcInset>
143115
</DxcBox>
144116
</HalstackProvider>
145117
</ExampleContainer>

‎lib/src/box/Box.tsx‎

Lines changed: 8 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,15 @@ const DxcBox = ({
1111
display = "inline-flex",
1212
children,
1313
margin,
14-
padding,
1514
size = "fitContent",
1615
}: BoxPropsType): JSX.Element => {
1716
const colorsTheme = useTheme();
1817

1918
return (
2019
<ThemeProvider theme={colorsTheme.box}>
21-
<StyledDxcBox shadowDepth={shadowDepth} display={display} margin={margin} padding={padding} size={size}>
20+
<Box shadowDepth={shadowDepth} display={display} margin={margin} size={size}>
2221
<BackgroundColorProvider color={colorsTheme.box.backgroundColor}>{children}</BackgroundColorProvider>
23-
</StyledDxcBox>
22+
</Box>
2423
</ThemeProvider>
2524
);
2625
};
@@ -33,22 +32,19 @@ const sizes = {
3332
fitContent: "fit-content",
3433
};
3534

36-
const calculateWidth = (margin, size, padding) => {
37-
if (size === "fillParent") {
38-
return `calc(${sizes[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")} -
39-
${getMargin(padding, "left")} - ${getMargin(padding, "right")})`;
40-
}
41-
return sizes[size];
42-
};
35+
const calculateWidth = (margin: BoxPropsType["margin"], size: BoxPropsType["size"]) =>
36+
size === "fillParent"
37+
? `calc(${sizes[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})`
38+
: sizes[size];
4339

44-
const StyledDxcBox = styled.div<BoxPropsType>`
40+
const Box = styled.div<BoxPropsType>`
4541
display: ${(props) => props.display};
4642
border-radius: ${(props) => props.theme.borderRadius};
4743
border-width: ${(props) => props.theme.borderThickness};
4844
border-style: ${(props) => props.theme.borderStyle};
4945
border-color: ${(props) => props.theme.borderColor};
5046
overflow: hidden;
51-
width: ${(props) => calculateWidth(props.margin, props.size, props.padding)};
47+
width: ${(props) => calculateWidth(props.margin, props.size)};
5248
background-color: ${(props) => props.theme.backgroundColor};
5349
box-shadow: ${(props) =>
5450
props.shadowDepth === 1
@@ -66,16 +62,6 @@ const StyledDxcBox = styled.div<BoxPropsType>`
6662
props.margin && typeof props.margin === "object" && props.margin.bottom ? spaces[props.margin.bottom] : ""};
6763
margin-left: ${(props) =>
6864
props.margin && typeof props.margin === "object" && props.margin.left ? spaces[props.margin.left] : ""};
69-
70-
padding: ${({ padding }) => (padding && typeof padding !== "object" ? spaces[padding] : "0px")};
71-
padding-top: ${(props) =>
72-
props.padding && typeof props.padding === "object" && props.padding.top ? spaces[props.padding.top] : ""};
73-
padding-right: ${(props) =>
74-
props.padding && typeof props.padding === "object" && props.padding.right ? spaces[props.padding.right] : ""};
75-
padding-bottom: ${(props) =>
76-
props.padding && typeof props.padding === "object" && props.padding.bottom ? spaces[props.padding.bottom] : ""};
77-
padding-left: ${(props) =>
78-
props.padding && typeof props.padding === "object" && props.padding.left ? spaces[props.padding.left] : ""};
7965
`;
8066

8167
export default DxcBox;

‎lib/src/box/types.ts‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,6 @@ type Margin = {
55
left?: Space;
66
right?: Space;
77
};
8-
type Padding = {
9-
top?: Space;
10-
bottom?: Space;
11-
left?: Space;
12-
right?: Space;
13-
};
148

159
type Props = {
1610
/**
@@ -30,12 +24,6 @@ type Props = {
3024
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
3125
*/
3226
margin?: Space | Margin;
33-
/**
34-
* @deprecated This prop will be removed shortly, consider using the Inset component for this purpose.
35-
* Size of the padding to be applied to the custom area ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
36-
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different padding sizes.
37-
*/
38-
padding?: Space | Padding;
3927
/**
4028
* Size of the component.
4129
*/

0 commit comments

Comments
 (0)