Skip to content

Commit b410439

Browse files
SaraVieiraSaraVieira
authored
Add Sidebar Config Example (codesandbox#3324)
* add config example * remove partlemen * remove margins * remove dep * delete duplicate
1 parent f4eabc3 commit b410439

File tree

1 file changed

+43
-45
lines changed

1 file changed

+43
-45
lines changed

‎packages/components/src/examples/configuration-sidebar/index.stories.tsx renamed to ‎packages/components/src/examples/configuration-sidebar.stories.tsx

Lines changed: 43 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { Element, Collapsible, Text, Button, Stack } from '../..';
2+
import { Element, Collapsible, Text, Button, Stack } from '..';
33

44
export default {
55
title: 'examples/SidebarConfig',
@@ -126,54 +126,52 @@ export const Basic = () => (
126126
>
127127
<Collapsible title="Configuration Files" defaultOpen>
128128
<Stack direction="vertical" gap={6}>
129-
<Element as="div" css={{ paddingX: 2 }}>
129+
<Element css={{ paddingX: 2 }}>
130130
<Text as="div" marginBottom={2}>
131131
Configuration your Sandbox
132132
</Text>
133133
<Text variant="muted">
134-
Codesandbox supports serveral config giles per template, you van see
134+
Codesandbox supports several config giles per template, you van see
135135
and edit all supported files for the current sandbox here.
136136
</Text>
137137
</Element>
138-
<Element as="div" css={{ paddingX: 2 }}>
139-
<Stack>
140-
<Element css={{ paddingRight: 2 }} marginBottom={2}>
138+
<Stack direction="vertical" gap={4} css={{ paddingX: 2 }}>
139+
<Element>
140+
<Stack gap={2} marginBottom={2}>
141141
<NPMIcon />
142-
</Element>
143-
<Text size={2}>package.json</Text>
144-
</Stack>
145-
<Stack gap={4} align="flex-end" justify="space-between">
146-
<Text size={2} variant="muted">
147-
Describes the overall configuration of your project.
148-
</Text>
149-
<Button style={{ width: 100 }} variant="secondary">
150-
Edit
151-
</Button>
152-
</Stack>
153-
<Stack marginTop={4}>
154-
<Element css={{ paddingRight: 2 }} marginBottom={2}>
142+
<Text size={2}>package.json</Text>
143+
</Stack>
144+
<Stack gap={4} align="flex-end" justify="space-between">
145+
<Text size={2} variant="muted">
146+
Describes the overall configuration of your project.
147+
</Text>
148+
<Button style={{ width: 100 }} variant="secondary">
149+
Edit
150+
</Button>
151+
</Stack>
152+
</Element>
153+
<Element>
154+
<Stack gap={2} marginBottom={2}>
155155
<NPMIcon />
156-
</Element>
157-
<Text size={2}>sandbox.config.json</Text>
158-
</Stack>
159-
<Stack gap={4} align="flex-end" justify="space-between">
160-
<Text size={2} variant="muted">
161-
Describes the overall configuration of your project.
162-
</Text>
163-
<Button style={{ width: 100 }} variant="secondary">
164-
Edit
165-
</Button>
166-
</Stack>
167-
</Element>
156+
<Text size={2}>sandbox.config.json</Text>
157+
</Stack>
158+
<Stack gap={4} align="flex-end" justify="space-between">
159+
<Text size={2} variant="muted">
160+
Describes the overall configuration of your project.
161+
</Text>
162+
<Button style={{ width: 100 }} variant="secondary">
163+
Edit
164+
</Button>
165+
</Stack>
166+
</Element>
167+
</Stack>
168168
</Stack>
169169
</Collapsible>
170170
<Collapsible title="Other Configuration">
171-
<Stack direction="vertical" gap={6}>
172-
<Element as="div" css={{ paddingX: 2 }}>
173-
<Stack>
174-
<Element css={{ paddingRight: 2 }} marginBottom={2}>
175-
<PrettierIcon />
176-
</Element>
171+
<Stack direction="vertical" gap={4} css={{ paddingX: 2 }}>
172+
<Element>
173+
<Stack gap={2} marginBottom={2}>
174+
<PrettierIcon />
177175
<Text size={2}>.prettierc</Text>
178176
</Stack>
179177
<Stack gap={4} align="flex-end" justify="space-between">
@@ -184,10 +182,10 @@ export const Basic = () => (
184182
Edit
185183
</Button>
186184
</Stack>
187-
<Stack marginTop={4}>
188-
<Element css={{ paddingRight: 2 }} marginBottom={2}>
189-
<NetlifyIcon />
190-
</Element>
185+
</Element>
186+
<Element>
187+
<Stack gap={2} marginBottom={2}>
188+
<NetlifyIcon />
191189
<Text size={2}>netlify.toml</Text>
192190
</Stack>
193191
<Stack gap={4} align="flex-end" justify="space-between">
@@ -198,10 +196,10 @@ export const Basic = () => (
198196
Edit
199197
</Button>
200198
</Stack>
201-
<Stack marginTop={4}>
202-
<Element css={{ paddingRight: 2 }} marginBottom={2}>
203-
<ZeitIcon />
204-
</Element>
199+
</Element>
200+
<Element>
201+
<Stack gap={2} marginBottom={2}>
202+
<ZeitIcon />
205203
<Text size={2}>now.json</Text>
206204
</Stack>
207205
<Stack gap={4} align="flex-end" justify="space-between">

0 commit comments

Comments
 (0)