Skip to content

Commit 00f69d9

Browse files
prasanna1211prasanna1211
committed
2 parents 43008f9 + 77ddb13 commit 00f69d9

File tree

10 files changed

+110
-62
lines changed

10 files changed

+110
-62
lines changed

‎docs/client/components/AppNavbar/styles.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ body {
1010
position: fixed;
1111
min-height: 75px;
1212
width: 100%;
13+
top: 0;
1314
background-color: $primary-blue;
1415
margin: 0;
1516
color: $primary-white;
@@ -24,7 +25,7 @@ body {
2425
.parent-row {
2526
min-height: 75px;
2627
}
27-
28+
2829
.nav-wrapper {
2930
display: flex;
3031
align-items: center;

‎docs/client/components/ComponentsPage/index.js

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,31 @@ import React from 'react';
33
import CardReadme from '../../../../src/card/readMe.md';
44
import ButtonReadme from '../../../../src/button/readMe.md';
55

6+
import CardExample from '../../../../src/examples/card.js';
7+
import ButtonExample from '../../../../src/examples/button.js';
8+
69
import styles from './styles.scss';
710

11+
const renderHowItLooks = (ExampleComponent) => (
12+
<div>
13+
<h3>How it looks</h3>
14+
<div className="example">
15+
<ExampleComponent />
16+
</div>
17+
</div>
18+
);
19+
820
const ComponentsPage = () => (
921
<div className={styles.usage}>
10-
<div dangerouslySetInnerHTML={{ __html: CardReadme }} />
11-
<div dangerouslySetInnerHTML={{ __html: ButtonReadme }} />
12-
<div style={{ height: '300px' }} />
22+
<div className="usage-section">
23+
<div dangerouslySetInnerHTML={{ __html: CardReadme }} />
24+
{ renderHowItLooks(CardExample) }
25+
</div>
26+
27+
<div className="usage-section">
28+
<div dangerouslySetInnerHTML={{ __html: ButtonReadme }} />
29+
{ renderHowItLooks(ButtonExample) }
30+
</div>
1331
</div>
1432
);
1533

‎docs/client/components/ComponentsPage/styles.scss

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
:local(.usage) {
22
overflow: scroll;
3-
height: 800px;
4-
padding: 0 5%;
3+
height: 100%;
4+
padding: 0 1%;
55

66
table, td, th {
77
padding: 10px;
@@ -18,8 +18,29 @@
1818
border-radius: 4px;
1919
}
2020
}
21+
2122
.hljs {
2223
padding: 15px 0px;
2324
background: #f1f1f1;
25+
white-space: pre-wrap; /* Since CSS 2.1 */
26+
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
27+
white-space: -pre-wrap; /* Opera 4-6 */
28+
white-space: -o-pre-wrap; /* Opera 7 */
29+
word-wrap: break-word;
30+
}
31+
32+
.usage-section {
33+
margin: 10px;
34+
padding: 10px;
35+
}
36+
37+
.usage-section:first-child {
38+
margin-top: 0;
39+
padding-top: 0;
40+
}
41+
42+
.example {
43+
padding: 10px;
44+
background: #fafafa;
2445
}
25-
}
46+
}

‎docs/client/styles.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
:local(.app-wrapper) {
2-
position: fixed;
32
width: 100%;
43
.content-wrapper {
54
margin-top: 75px;

‎src/card/defaultTheme.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
border-radius: 3px;
44
padding: 10px;
55
min-width: 300px;
6+
margin: 5px;
67
}
78

89
:local(.noPadding) {

‎src/card/readMe.md

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,11 @@ The base card component.
2222
### Usage
2323
```
2424
<Card
25-
header='Card String header'
25+
header="Hello world!"
2626
wrapContent
27-
noPadding
28-
theme={customTheme}>
29-
<span>Card Content</span>
30-
<span>Card Content</span>
31-
<span>Card Content</span>
27+
>
28+
<div>
29+
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
30+
</div>
3231
</Card>
33-
```
32+
```

‎src/customcard.scss

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎src/examples/button.js

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from 'react';
2+
import Button from './../button'; // eslint-disable-line
3+
4+
const ButtonExample = () => (
5+
<div>
6+
<div>
7+
<h4>Buttons with diffent styles</h4>
8+
<Button>Default</Button>
9+
<Button type="primary">Primary</Button>
10+
<Button type="secondary">Secondary</Button>
11+
<Button type="success">Success</Button>
12+
<Button type="danger">Danger</Button>
13+
<Button type="warning">Warning</Button>
14+
<Button type="info">Info</Button>
15+
<Button type="light">Light</Button>
16+
<Button type="dark">Dark</Button>
17+
</div>
18+
19+
<div>
20+
<h4>Buttons with diffent sizes</h4>
21+
<Button type="primary" size="small">Small</Button>
22+
<Button type="primary" size="medium">Medium</Button>
23+
<Button type="primary" size="large">Large</Button>
24+
</div>
25+
26+
<div>
27+
<h4>Buttons with Icon</h4>
28+
<Button type="success" icon="done">Left Icon</Button>
29+
<Button type="success" icon="done" iconAlignment="right">Right Icon</Button>
30+
</div>
31+
</div>
32+
);
33+
34+
export default ButtonExample;

‎src/examples/card.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from 'react';
2+
3+
import Card from './../card';
4+
5+
const CardExample = () => (
6+
<div>
7+
<Card
8+
header="Hello world!"
9+
wrapContent
10+
>
11+
<div>
12+
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
13+
</div>
14+
</Card>
15+
</div>
16+
);
17+
18+
export default CardExample;

‎src/index.js

Lines changed: 4 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,13 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
3-
import Card from './card';
4-
import customTheme from './customcard.scss';
53

6-
import Button from './button'; // eslint-disable-line
4+
import CardExample from './examples/card';
5+
import ButtonExample from './examples/button';
76

87
const Index = () => (
98
<div>
10-
<Card
11-
header="Card String header"
12-
wrapContent
13-
theme={customTheme}
14-
>
15-
<span>Card Content</span>
16-
<span>Card Content</span>
17-
<span>Card Content</span>
18-
</Card>
19-
20-
<div style={{ margin: '20px' }}>
21-
<div>
22-
<h4>Buttons with diffent styles</h4>
23-
<Button>Default</Button>
24-
<Button type="primary">Primary</Button>
25-
<Button type="secondary">Secondary</Button>
26-
<Button type="success">Success</Button>
27-
<Button type="danger">Danger</Button>
28-
<Button type="warning">Warning</Button>
29-
<Button type="info">Info</Button>
30-
<Button type="light">Light</Button>
31-
<Button type="dark">Dark</Button>
32-
</div>
33-
34-
<div>
35-
<h4>Buttons with diffent sizes</h4>
36-
<Button type="primary" size="small">Small</Button>
37-
<Button type="primary" size="medium">Medium</Button>
38-
<Button type="primary" size="large">Large</Button>
39-
</div>
40-
41-
<div>
42-
<h4>Buttons with Icon</h4>
43-
<Button type="success" icon="done">Left Icon</Button>
44-
<Button type="success" icon="done" iconAlignment="right">Right Icon</Button>
45-
</div>
46-
</div>
9+
<CardExample />
10+
<ButtonExample />
4711
</div>
4812
);
4913

0 commit comments

Comments
 (0)