Skip to content

Commit 80a303c

Browse files
EranNLEranNL
committed
Added container
1 parent 290d860 commit 80a303c

File tree

8 files changed

+204
-10
lines changed

8 files changed

+204
-10
lines changed

‎__tests__/Container.test.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { render } from 'enzyme';
2+
import React from 'react';
3+
import Container from '@/components/Container/Container';
4+
5+
describe('Container test', () => {
6+
it('should render container', () => {
7+
const container = render(
8+
<div>
9+
<Container/>
10+
</div>
11+
);
12+
13+
expect(container.find('.container').length).toBe(1);
14+
});
15+
16+
it('should render fluid container', () => {
17+
const container = render(
18+
<div>
19+
<Container fluid/>
20+
</div>
21+
);
22+
23+
expect(container.find('.container-fluid').length).toBe(1);
24+
});
25+
});

‎src/components/Container/Container.tsx

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import * as React from 'react';
2+
import PropTypes from 'prop-types';
3+
import clsx from 'clsx';
4+
5+
interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
6+
fluid?: boolean;
7+
}
8+
9+
const Container = React.forwardRef<HTMLDivElement, ContainerProps>((
10+
{
11+
children,
12+
className,
13+
fluid
14+
},
15+
ref
16+
): React.ReactElement => (
17+
<div
18+
ref={ref}
19+
className={clsx(
20+
fluid ? 'container-fluid' : 'container',
21+
className
22+
)}
23+
>
24+
{children}
25+
</div>
26+
));
27+
28+
Container.displayName = 'Container';
29+
Container.propTypes = {
30+
className: PropTypes.string,
31+
children: PropTypes.node,
32+
fluid: PropTypes.bool
33+
}
34+
35+
export default Container;

‎src/components/Container/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as Container } from './Container';

‎src/components/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export * from './Card';
2+
export * from './Container';
23
export * from './Grid';
34
export * from './Page';
45
export * from './Panel';

‎src/style/index.scss

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,9 @@
1414
@use "components/page";
1515
@use "components/panel";
1616
@use "components/card";
17-
@use "components/grid";
17+
18+
/**
19+
* 3. Layout
20+
*/
21+
@use "layout/grid";
22+
@use "layout/helpers";

‎src/style/components/_grid.scss renamed to ‎src/style/layout/_grid.scss

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,46 @@
11
@use "../base/variables";
22

3+
.container, .container-fluid {
4+
padding-right: 15px;
5+
padding-left: 15px;
6+
margin-right: auto;
7+
margin-left: auto;
8+
}
9+
10+
@media screen and (min-width: #{map-get(variables.$breakpoints, 'sm')}) {
11+
.container {
12+
max-width: 540px;
13+
}
14+
}
15+
16+
@media screen and (min-width: #{map-get(variables.$breakpoints, 'md')}) {
17+
.container {
18+
max-width: 720px;
19+
}
20+
}
21+
22+
@media screen and (min-width: #{map-get(variables.$breakpoints, 'lg')}) {
23+
.container {
24+
max-width: 960px;
25+
}
26+
}
27+
28+
@media screen and (min-width: #{map-get(variables.$breakpoints, 'xl')}) {
29+
.container {
30+
max-width: 1140px;
31+
}
32+
}
33+
334
.row {
435
display: flex;
536
flex-wrap: wrap;
37+
margin-left: -15px;
38+
margin-right: -15px;
639

740
> .col {
841
flex-grow: 1;
942
flex-basis: 0;
10-
//padding: 0 1rem;
43+
padding: 0 15px;
1144

1245
@for $i from 1 through 12 {
1346
&.col-#{$i} {

‎src/style/layout/_helpers.scss

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
@use "../base/variables";
2+
3+
@for $i from 0 through 12 {
4+
.p-#{$i} {
5+
padding: #{$i * variables.$base-gutter-steps}rem !important;
6+
}
7+
8+
.py-#{$i} {
9+
padding-top: #{$i * variables.$base-gutter-steps}rem !important;;
10+
padding-bottom: #{$i * variables.$base-gutter-steps}rem !important;;
11+
}
12+
13+
.px-#{$i} {
14+
padding-left: #{$i * variables.$base-gutter-steps}rem !important;;
15+
padding-right: #{$i * variables.$base-gutter-steps}rem !important;;
16+
}
17+
18+
.pt-#{$i} {
19+
padding-top: #{$i * variables.$base-gutter-steps}rem !important;;
20+
}
21+
22+
.pr-#{$i} {
23+
padding-right: #{$i * variables.$base-gutter-steps}rem !important;;
24+
}
25+
26+
.pb-#{$i} {
27+
padding-bottom: #{$i * variables.$base-gutter-steps}rem !important;;
28+
}
29+
30+
.pl-#{$i} {
31+
padding-left: #{$i * variables.$base-gutter-steps}rem !important;;
32+
}
33+
34+
.m-#{$i} {
35+
margin: #{$i * variables.$base-gutter-steps}rem !important;;
36+
}
37+
38+
.my-#{$i} {
39+
margin-top: #{$i * variables.$base-gutter-steps}rem !important;;
40+
margin-bottom: #{$i * variables.$base-gutter-steps}rem !important;;
41+
}
42+
43+
.mx-#{$i} {
44+
margin-left: #{$i * variables.$base-gutter-steps}rem !important;;
45+
margin-right: #{$i * variables.$base-gutter-steps}rem !important;;
46+
}
47+
48+
.mt-#{$i} {
49+
margin-top: #{$i * variables.$base-gutter-steps}rem !important;;
50+
}
51+
52+
.mr-#{$i} {
53+
margin-right: #{$i * variables.$base-gutter-steps}rem !important;;
54+
}
55+
56+
.mb-#{$i} {
57+
margin-bottom: #{$i * variables.$base-gutter-steps}rem !important;;
58+
}
59+
60+
.ml-#{$i} {
61+
margin-left: #{$i * variables.$base-gutter-steps}rem !important;;
62+
}
63+
}
64+
65+
.background-primary-light {
66+
background: var(--primary-color-light-background);
67+
}

‎www/src/index.tsx

Lines changed: 35 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,46 @@ import * as React from 'react';
22
import * as ReactDom from 'react-dom';
33

44
import '../../src/style/index.scss';
5-
import { Col, Page, Row } from '../../src';
5+
import { Card, Col, Page, Row } from '../../src';
6+
import Container from '../../src/components/Container/Container';
67

78
ReactDom.render(
89
<Page>
910
<Page.Header title="Dashboard" />
1011
<Page.Content>
11-
<Row>
12-
<Col width={1}>Test</Col>
13-
<Col sm={2}>Test</Col>
14-
<Col md={3}>Test</Col>
15-
<Col lg={4}>Test</Col>
16-
<Col xl={5}>Test</Col>
17-
</Row>
12+
<Card>
13+
<Card.Header title="Grid" />
14+
<Card.Content>
15+
<Container fluid>
16+
<Row className="mb-4">
17+
<Col className="py-4 background-primary-light">Col 1/1</Col>
18+
</Row>
19+
<Row className="mb-4">
20+
<Col className="py-4 background-primary-light">Col 1/2</Col>
21+
<Col className="py-4 background-primary-light">Col 2/2</Col>
22+
</Row>
23+
24+
<Row className="mb-4">
25+
<Col className="py-4 background-primary-light">Col 1/3</Col>
26+
<Col className="py-4 background-primary-light">Col 2/3</Col>
27+
<Col className="py-4 background-primary-light">Col 3/4</Col>
28+
</Row>
29+
30+
<Row className="mb-4">
31+
<Col className="py-4 background-primary-light">Col 1/3</Col>
32+
<Col className="py-4 background-primary-light">Col 2/3</Col>
33+
<Col className="py-4 background-primary-light">Col 3/4</Col>
34+
</Row>
35+
36+
<Row className="mb-4">
37+
<Col className="py-4 background-primary-light">Col 1/4</Col>
38+
<Col className="py-4 background-primary-light">Col 2/4</Col>
39+
<Col className="py-4 background-primary-light">Col 3/4</Col>
40+
<Col className="py-4 background-primary-light">Col 4/4</Col>
41+
</Row>
42+
</Container>
43+
</Card.Content>
44+
</Card>
1845
</Page.Content>
1946
</Page>,
2047
document.getElementById('root')

0 commit comments

Comments
 (0)