Skip to content

Commit eb6cea6

Browse files
haloclinehalocline
committed
Moved Layout components
1 parent f4564d5 commit eb6cea6

File tree

6 files changed

+105
-59
lines changed

6 files changed

+105
-59
lines changed

‎sandbox/grommet-app/src/pages/sticker-sheet/content/Layouts/ContentSizes.jsx

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import PropTypes from 'prop-types';
2+
import { Box, Text } from 'grommet';
3+
import { Compare } from '../../components';
4+
import ContentPane from '../../../../components/ContentPane';
5+
6+
export const ContentSizes = ({ theme }) => {
7+
return (
8+
<ContentPane overflow={{ horizontal: 'auto' }}>
9+
<Box gap="small">
10+
{Object.keys(theme.global.size).map(
11+
size =>
12+
size !== 'responsiveBreakpoint' && (
13+
<Compare key={size}>
14+
<Box>
15+
<Box
16+
background={{
17+
color: 'blue',
18+
opacity: 'medium',
19+
}}
20+
width={size}
21+
height={size}
22+
flex={false}
23+
/>
24+
<Text size="small">{size}</Text>
25+
</Box>
26+
</Compare>
27+
),
28+
)}
29+
</Box>
30+
</ContentPane>
31+
);
32+
};
33+
34+
ContentSizes.propTypes = {
35+
theme: PropTypes.object,
36+
};

‎sandbox/grommet-app/src/pages/sticker-sheet/content/Layouts/PageHeaders.jsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { PageHeader } from 'grommet';
2+
import { Compare } from '../../components';
3+
import ContentPane from '../../../../components/ContentPane';
4+
5+
export const PageHeaders = () => {
6+
return (
7+
<ContentPane>
8+
<Compare>
9+
<PageHeader
10+
title="Page title"
11+
subtitle="Here is a subtitle for the page."
12+
/>
13+
</Compare>
14+
</ContentPane>
15+
);
16+
};

‎sandbox/grommet-app/src/pages/sticker-sheet/content/Layouts/Spacing.jsx

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import PropTypes from 'prop-types';
2+
import { Box, Text } from 'grommet';
3+
import { Compare } from '../../components';
4+
import ContentPane from '../../../../components/ContentPane';
5+
6+
export const Spacing = ({ theme }) => {
7+
return (
8+
<ContentPane>
9+
<Box gap="small">
10+
{Object.keys(theme.global.edgeSize).map(
11+
size =>
12+
size !== 'responsiveBreakpoint' && (
13+
<Compare key={size}>
14+
<Box>
15+
<Box
16+
alignSelf="start"
17+
background={{
18+
color: 'red',
19+
opacity: 'medium',
20+
}}
21+
pad={{ left: size }}
22+
height="xxsmall"
23+
flex={false}
24+
/>
25+
<Text size="small">{size}</Text>
26+
</Box>
27+
</Compare>
28+
),
29+
)}
30+
</Box>
31+
</ContentPane>
32+
);
33+
};
34+
35+
Spacing.propTypes = {
36+
theme: PropTypes.object,
37+
};

‎sandbox/grommet-app/src/pages/sticker-sheet/content/Layouts/index.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export * from './ContentSizes';
2+
export * from './PageHeaders';
3+
export * from './Spacing';

‎sandbox/grommet-app/src/pages/sticker-sheet/content/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export * from './Controls';
22
export * from './Inputs';
3+
export * from './Layouts';
34
export * from './Type';
45
export * from './Visualizations';

‎sandbox/grommet-app/src/pages/sticker-sheet/index.jsx

Lines changed: 12 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -12,21 +12,20 @@ import {
1212
ThemeContext,
1313
Select,
1414
FormField,
15-
Meter,
1615
Tab,
1716
Tabs,
1817
} from 'grommet';
1918
import { Previous } from 'grommet-icons';
2019
import { hpe } from 'grommet-theme-hpe';
2120
import { current as hpeCurrent } from '../../themes/theme';
22-
import ContentPane from '../../components/ContentPane';
23-
import { Compare, ModeContext, TabContent } from './components';
21+
import { ModeContext, TabContent } from './components';
2422
import {
2523
Accordions,
2624
Anchors,
2725
Buttons,
2826
Checkboxes,
2927
CheckboxGroups,
28+
ContentSizes,
3029
DataTables,
3130
DateInputs,
3231
FileInputs,
@@ -36,12 +35,14 @@ import {
3635
Meters,
3736
NameValueLists,
3837
Notifications,
38+
PageHeaders,
3939
Paginations,
4040
Paragraphs,
4141
RadioButtonGroups,
4242
RangeInputs,
4343
SelectMultiples,
4444
Selects,
45+
Spacing,
4546
Spinners,
4647
StarRatings,
4748
Switches,
@@ -181,9 +182,15 @@ const StickerSheet = () => {
181182
<Meters />
182183
</TabContent>
183184
</Tab>
184-
<Tab title="Others">
185+
<Tab title="Layout">
185186
<TabContent>
186-
{/* <Box>
187+
<PageHeaders />
188+
<Spacing theme={hpeCurrent} />
189+
<ContentSizes theme={hpeCurrent} />
190+
</TabContent>
191+
</Tab>
192+
193+
{/* <Box>
187194
<Avatar background="blue!" size="small">
188195
<Text weight={500}>TS</Text>
189196
</Avatar>
@@ -194,60 +201,6 @@ const StickerSheet = () => {
194201
<Text weight={500}>TS</Text>
195202
</Avatar>
196203
</Box> */}
197-
198-
<ContentPane>
199-
<Compare>
200-
<PageHeader
201-
title="Page title"
202-
subtitle="Here is a subtitle for the page."
203-
/>
204-
</Compare>
205-
</ContentPane>
206-
207-
<ContentPane>
208-
<Box gap="small">
209-
{Object.keys(hpeCurrent.global.edgeSize).map(
210-
size =>
211-
size !== 'responsiveBreakpoint' && (
212-
<Compare key={size}>
213-
<Box
214-
alignSelf="start"
215-
background={{
216-
color: 'blue',
217-
opacity: 'medium',
218-
}}
219-
pad={{ left: size }}
220-
height="xxsmall"
221-
flex={false}
222-
/>
223-
</Compare>
224-
),
225-
)}
226-
</Box>
227-
</ContentPane>
228-
<ContentPane overflow={{ horizontal: 'auto' }}>
229-
<Box gap="small">
230-
{Object.keys(hpeCurrent.global.size).map(
231-
size =>
232-
size !== 'responsiveBreakpoint' && (
233-
<Compare key={size}>
234-
<Box
235-
alignSelf="start"
236-
background={{
237-
color: 'blue',
238-
opacity: 'medium',
239-
}}
240-
width={size}
241-
height={size}
242-
flex={false}
243-
/>
244-
</Compare>
245-
),
246-
)}
247-
</Box>
248-
</ContentPane>
249-
</TabContent>
250-
</Tab>
251204
</Tabs>
252205
</PageContent>
253206
</Page>

0 commit comments

Comments
 (0)