Skip to content
This repository was archived by the owner on Apr 5, 2022. It is now read-only.

Commit 5463e0e

Browse files
nicolasfontnicolasfont
committed
More docs
1 parent 36776cd commit 5463e0e

1 file changed

Lines changed: 95 additions & 50 deletions

File tree

  • packages/visual-stack-docs/src/containers/Components/Docs

‎packages/visual-stack-docs/src/containers/Components/Docs/box.js‎

Lines changed: 95 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,9 @@ export default () => {
2424
<Panel>
2525
<Box padding="2xl" gap="2xl">
2626
<Text>
27-
Primitive layout component that renders a flex container with
28-
standardized styling props.
27+
A Box is a primitive layout component with standardized styling
28+
props that renders a div container using flexbox. You can think
29+
of it as a div with superpowers.
2930
</Text>
3031
<Box gap="large">
3132
<Text type="h4">Import</Text>
@@ -65,7 +66,7 @@ export default () => {
6566
"small" (4px) | "medium" (8px) | "large" (16px) | "xl"
6667
(24px) | "2xl" (32px) | "3xl" (40px) | "4xl" (48px)
6768
</Td>
68-
<Td>0</Td>
69+
<Td>unset</Td>
6970
</Tr>
7071
<Tr>
7172
<Td>align</Td>
@@ -74,7 +75,7 @@ export default () => {
7475
the direction).
7576
</Td>
7677
<Td>"start" | "center" | "end"</Td>
77-
<Td>0</Td>
78+
<Td>unset</Td>
7879
</Tr>
7980
<Tr>
8081
<Td>justify</Td>
@@ -85,7 +86,7 @@ export default () => {
8586
"start" | "center" | "end" | "space-around" |
8687
"space-between" | "space-evenly"
8788
</Td>
88-
<Td>0</Td>
89+
<Td>unset</Td>
8990
</Tr>
9091
<Tr>
9192
<Td>padding</Td>
@@ -94,43 +95,43 @@ export default () => {
9495
"small" (4px) | "medium" (8px) | "large" (16px) | "xl"
9596
(24px) | "2xl" (32px) | "3xl" (40px) | "4xl" (48px)
9697
</Td>
97-
<Td>0</Td>
98+
<Td>unset</Td>
9899
</Tr>
99100
<Tr>
100101
<Td>paddingTop</Td>
101-
<Td>Adds top padding inside the box.</Td>
102+
<Td>Adds padding-top inside the box.</Td>
102103
<Td>
103104
"small" (4px) | "medium" (8px) | "large" (16px) | "xl"
104105
(24px) | "2xl" (32px) | "3xl" (40px) | "4xl" (48px)
105106
</Td>
106-
<Td>0</Td>
107+
<Td>unset</Td>
107108
</Tr>
108109
<Tr>
109110
<Td>paddingBottom</Td>
110-
<Td>Adds bottom padding inside the box.</Td>
111+
<Td>Adds padding-bottom inside the box.</Td>
111112
<Td>
112113
"small" (4px) | "medium" (8px) | "large" (16px) | "xl"
113114
(24px) | "2xl" (32px) | "3xl" (40px) | "4xl" (48px)
114115
</Td>
115-
<Td>0</Td>
116+
<Td>unset</Td>
116117
</Tr>
117118
<Tr>
118119
<Td>paddingLeft</Td>
119-
<Td>Adds left padding inside the box.</Td>
120+
<Td>Adds padding-left inside the box.</Td>
120121
<Td>
121122
"small" (4px) | "medium" (8px) | "large" (16px) | "xl"
122123
(24px) | "2xl" (32px) | "3xl" (40px) | "4xl" (48px)
123124
</Td>
124-
<Td>0</Td>
125+
<Td>unset</Td>
125126
</Tr>
126127
<Tr>
127128
<Td>paddingRight</Td>
128-
<Td>Adds right padding inside the box.</Td>
129+
<Td>Adds padding-right inside the box.</Td>
129130
<Td>
130131
"small" (4px) | "medium" (8px) | "large" (16px) | "xl"
131132
(24px) | "2xl" (32px) | "3xl" (40px) | "4xl" (48px)
132133
</Td>
133-
<Td>0</Td>
134+
<Td>unset</Td>
134135
</Tr>
135136
<Tr>
136137
<Td>expand</Td>
@@ -143,52 +144,96 @@ export default () => {
143144
</Tr>
144145
</TBody>
145146
</Table>
147+
<Text type="light" italic>
148+
Note: the absence of a margin prop is intentional. Exporting
149+
components using outer margin or any spacing around its
150+
contents is considered a bad practice since it makes it harder
151+
for its container to control the layout.
152+
</Text>
146153
</Box>
147154

148155
<Box gap="large">
149-
<Text type="h4">Examples</Text>
150-
<Box gap="medium">
151-
<Text type="h5">A confirmation dialog</Text>
152-
{/* s21:start */}
153-
<Box border gap="large" padding="xl" paddingTop="2xl">
154-
<Box direction="row" align="center" gap="medium">
155-
<IconSuccess />
156-
<Text type="h4">Your offer has been sent!</Text>
157-
</Box>
158-
<Text>
159-
You will be notified by email if the publisher accepts
160-
your offer.
161-
</Text>
162-
<Box gap="small">
163-
<Text type="bold">Program Terms</Text>
164-
<Text>Test terms 1</Text>
165-
</Box>
166-
<Box gap="small">
167-
<Text type="bold">Publisher Group</Text>
168-
<Text>Test group 1</Text>
156+
<Text type="h4">A confirmation dialog</Text>
157+
{/* s2:start */}
158+
<Box padding="xl" paddingTop="2xl" gap="large" border>
159+
<Box direction="row" gap="medium" align="center">
160+
<IconSuccess />
161+
<Text type="h4">Your offer has been sent!</Text>
162+
</Box>
163+
<Text>
164+
You will be notified by email if the publisher accepts your
165+
offer.
166+
</Text>
167+
<Box gap="small">
168+
<Text type="bold">Program Terms</Text>
169+
<Text>Test terms 1</Text>
170+
</Box>
171+
<Box gap="small">
172+
<Text type="bold">Publisher Group</Text>
173+
<Text>Test group 1</Text>
174+
</Box>
175+
<Box direction="row" gap="medium" justify="end">
176+
<Button type="text">Close</Button>
177+
<Button type="solid-primary">Submit</Button>
178+
</Box>
179+
</Box>
180+
{/* s2:end */}
181+
<Snippet tag="s2" src={snippets} />
182+
</Box>
183+
184+
<Box gap="large">
185+
<Text type="h4">An expanded box</Text>
186+
{/* s3:start */}
187+
<Box direction="row" gap="medium">
188+
<Box expand padding="medium" align="center" border>
189+
<Text>Lorem Ipsum</Text>
190+
</Box>
191+
<Box padding="medium" border>
192+
<Text>Lorem Ipsum</Text>
193+
</Box>
194+
</Box>
195+
{/* s3:end */}
196+
<Snippet tag="s3" src={snippets} />
197+
</Box>
198+
199+
<Box gap="large">
200+
<Text type="h4">A bunch of boxes stacking other boxes</Text>
201+
{/* s4:start */}
202+
<Box padding="medium" gap="medium" border>
203+
<Box padding="medium" gap="medium" border>
204+
<Text>📦</Text>
205+
</Box>
206+
<Box direction="row" padding="medium" gap="medium" border>
207+
<Box padding="medium" gap="medium" border>
208+
<Text>📦</Text>
169209
</Box>
170-
<Box direction="row" justify="end" gap="medium">
171-
<Button type="text">Close</Button>
172-
<Button type="solid-primary">Submit</Button>
210+
<Box padding="medium" gap="medium" border>
211+
<Text>📦</Text>
173212
</Box>
174213
</Box>
175-
{/* s21:end */}
176-
<Snippet tag="s21" src={snippets} />
177-
</Box>
178-
<Box gap="medium">
179-
<Text type="h5">An expanded box</Text>
180-
{/* s20:start */}
181-
<Box direction="row" gap="medium">
182-
<Box border expand padding="medium" align="center">
183-
<Text>Lorem Ipsum</Text>
214+
<Box direction="row" padding="medium" gap="medium" border>
215+
<Box padding="medium" gap="medium" border>
216+
<Box padding="medium" border>
217+
<Text>📦</Text>
218+
</Box>
219+
<Box padding="medium" border>
220+
<Text>📦</Text>
221+
</Box>
184222
</Box>
185-
<Box border padding="medium">
186-
<Text>Lorem Ipsum</Text>
223+
<Box
224+
direction="row"
225+
expand
226+
padding="medium"
227+
align="center"
228+
justify="center"
229+
border
230+
>
231+
<Text>📦</Text>
187232
</Box>
188233
</Box>
189-
{/* s20:end */}
190-
<Snippet tag="s20" src={snippets} />
191234
</Box>
235+
{/* s4:end */}
236+
<Snippet tag="s4" src={snippets} />
192237
</Box>
193238
</Box>
194239
</Panel>

0 commit comments

Comments
 (0)