Skip to content

Commit 414f74b

Browse files
yeehaa123yeehaa123
committed
docs(documentation): add molecules section
1 parent adb32f0 commit 414f74b

24 files changed

+849
-6
lines changed

‎packages/documentation/package.json‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,8 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6-
"@offcourse/atoms": "^1.0.2",
7-
"@offcourse/molecules": "^0.0.0-semantically-released",
8-
"atoms": "^0.2.0",
6+
"@offcourse/atoms": "^1.1.0",
7+
"@offcourse/molecules": "^1.0.0",
98
"catalog": "^3.5.3",
109
"react": "^16.4.0",
1110
"react-dom": "^16.4.0",

‎packages/documentation/public/molecules/ButtonGroup.md‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
ButtonGroup can explicity declare icons
2+
3+
```react
4+
const onClick = () => alert("click");
5+
const Button = ButtonGroup.Button;
6+
7+
<ButtonGroup>
8+
<Button variant="positive" onClick={onClick}>
9+
Please Click
10+
</Button>
11+
<Button variant="primary" href="#/molecules/Curator">
12+
Click Now!
13+
</Button>
14+
<Button variant="negative" onClick={onClick}>
15+
Don't Click
16+
</Button>
17+
</ButtonGroup>
18+
```
19+
20+
Or it can pass the button data as a prop
21+
22+
```react
23+
const onClick = () => alert("click");
24+
const buttons = [
25+
{ onClick, title: "Create Course" },
26+
{ onClick, title: "Profile", variant: "warning" },
27+
{ onClick, title: "Sign Out", variant: "negative" }
28+
];
29+
<ButtonGroup buttons={buttons} />;
30+
```
31+
32+
It can also change the size
33+
34+
```react
35+
const onClick = () => alert("click");
36+
const buttons = [
37+
{ onClick, title: "Mini", variant: "primary" },
38+
{ onClick, title: "Small" },
39+
{ onClick, title: "Tiny", variant: "warning" }
40+
];
41+
<ButtonGroup size="small" buttons={buttons} />;
42+
```
43+
44+
```react
45+
const onClick = () => alert("click");
46+
const buttons = [
47+
{ onClick, title: "huge", variant: "warning"},
48+
{ onClick, title: "gargantuan", variant: "negative" }
49+
];
50+
<ButtonGroup size="large" buttons={buttons} />;
51+
```

‎packages/documentation/public/molecules/CheckItem.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
```react
2+
const onToggle =({ id, checked }) => {
3+
alert(
4+
`the id of this item is: ${id}, its checked status is ${checked}`
5+
)
6+
};
7+
8+
<CheckItem id={1} onToggle={onToggle} checked={true}>KWEK KWAK</CheckItem>
9+
```
10+
11+
```react
12+
const onToggle =({ id, checked }) => {
13+
alert(
14+
`the id of this item is: ${id}, its checked status is ${checked}`
15+
)
16+
};
17+
18+
<CheckItem href="#/molecules/List" id={1} onToggle={onToggle} checked={true}>Kwik KWEK KWAK</CheckItem>
19+
```

‎packages/documentation/public/molecules/CheckpointInput.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
```react|span-3
2+
state: {
3+
checkpoint: {
4+
task: "Hello World",
5+
resourceUrl: "/bla"
6+
},
7+
hasErrors: false
8+
}
9+
---
10+
11+
const onChange = (e) => {
12+
const { name , value } = e.target;
13+
const itemNames = name.split(".");
14+
const newState = { ...state };
15+
newState[itemNames[0]][itemNames[1]] = value;
16+
setState(newState);
17+
};
18+
19+
const onBlur = () => {
20+
setState({hasErrors: !state.hasErrors});
21+
};
22+
23+
const icons = [
24+
{is: "button", name: "remove", tabIndex: "-1"},
25+
{is: "button", name: "sort", tabIndex: "-1"},
26+
];
27+
28+
<CheckpointInput hasErrors={state.hasErrors} onBlur={onBlur} onChange={onChange} name="checkpoint" value={state.checkpoint}>
29+
<IconGroup icons={icons} color="grayScale.2" direction="vertical" size="small"/>
30+
</CheckpointInput>
31+
```

‎packages/documentation/public/molecules/CheckpointItem.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
render a plain item when not trackable
2+
3+
```react
4+
const checkpoint = {
5+
checkpointId: "abc",
6+
completed: true,
7+
task: "do this",
8+
resourceUrl: "#/molecules/List"
9+
};
10+
11+
<CheckpointItem {...checkpoint}/>
12+
```
13+
14+
render a checkitem when it gets an onToggle callback
15+
16+
```react
17+
const onToggle =({ checkpointId, checked }) => {
18+
alert(
19+
`the id of this item is: ${checkpointId}, its checked status is ${checked}`
20+
)
21+
};
22+
23+
const checkpoint = {
24+
checkpointId: "abc",
25+
completed: true,
26+
task: "do this",
27+
resourceUrl: "#/molecules/List"
28+
};
29+
30+
<CheckpointItem onToggle={onToggle} {...checkpoint}/>
31+
```

‎packages/documentation/public/molecules/CheckpointList.md‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
```react
2+
const checkpoints = [{
3+
checkpointId: "abc",
4+
completed: true,
5+
task: "do this",
6+
resourceUrl: "#/molecules/List"
7+
},{
8+
checkpointId: "def",
9+
completed: true,
10+
task: "do this",
11+
resourceUrl: "#/molecules/List"
12+
},{
13+
checkpointId: "ghi",
14+
completed: true,
15+
task: "do this",
16+
resourceUrl: "#/molecules/List"
17+
}];
18+
<CheckpointList checkpoints={checkpoints}/>
19+
```
20+
21+
```react
22+
const onToggle =({ checkpointId, checked }) => {
23+
alert(
24+
`the id of this item is: ${checkpointId}, its checked status is ${checked}`
25+
)
26+
};
27+
const checkpoints = [{
28+
checkpointId: "abc",
29+
completed: true,
30+
task: "do this",
31+
resourceUrl: "#/molecules/List"
32+
},{
33+
checkpointId: "def",
34+
completed: true,
35+
task: "do this",
36+
resourceUrl: "#/molecules/List"
37+
},{
38+
checkpointId: "ghi",
39+
completed: true,
40+
task: "do this",
41+
resourceUrl: "#/molecules/List"
42+
}];
43+
44+
<CheckpointList onToggle={onToggle} checkpoints={checkpoints}/>
45+
```

‎packages/documentation/public/molecules/Curator.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
```react
2+
const url = "https://assets.offcourse.io/portraits/offcourse_1.jpg";
3+
const name = "Yeehaa";
4+
<Curator section="meta" name={name} avatarUrl={url} />;
5+
```

‎packages/documentation/public/molecules/Description.md‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
with a label prop...
2+
3+
```react
4+
<Description label="Course Description">
5+
Gentrify adipisicing fanny pack pabst, health goth excepteur ut sunt swag qui
6+
plaid tumeric letterpress. Wolf gentrify live-edge 8-bit. Af ut thundercats
7+
locavore williamsburg, blue bottle man braid viral
8+
</Description>
9+
```
10+
11+
...or simply a wrapper
12+
13+
```react
14+
const Label = Description.Label;
15+
const Text = Description.Text;
16+
17+
<Description>
18+
<Label>Course Description</Label>
19+
<Text>
20+
Gentrify adipisicing fanny pack pabst, health goth excepteur ut sunt swag
21+
qui plaid tumeric letterpress. Wolf gentrify live-edge 8-bit. Af ut
22+
thundercats locavore williamsburg, blue bottle man braid viral
23+
</Text>
24+
</Description>
25+
```

‎packages/documentation/public/molecules/IconGroup.md‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
IconGroup can explicity declare icons
2+
3+
```react
4+
const handleClick = () => alert("clicked");
5+
const Icon = IconGroup.Icon;
6+
7+
<IconGroup>
8+
<Icon name="sort" onClick={handleClick}/>
9+
<Icon name="twitter" onClick={handleClick}/>
10+
<Icon name="hamburger" onClick={handleClick}/>
11+
</IconGroup>
12+
```
13+
14+
Or it can pass the icons data as a prop
15+
16+
```react
17+
const handleClick = () => alert("clicked");
18+
const icons = [
19+
{name: "eye", onClick: handleClick},
20+
{name: "remove", onClick: handleClick},
21+
{name: "add", onClick: handleClick},
22+
];
23+
24+
<IconGroup icons={icons}/>
25+
```
26+
27+
It can have different sizes
28+
29+
```react|span-3
30+
const handleClick = () => alert("clicked");
31+
const icons = [
32+
{name: "eye", onClick: handleClick},
33+
{name: "remove", onClick: handleClick},
34+
{name: "add", onClick: handleClick},
35+
];
36+
37+
<IconGroup size="small" icons={icons}/>
38+
```
39+
40+
```react|span-3
41+
const handleClick = () => alert("clicked");
42+
const icons = [
43+
{name: "eye", onClick: handleClick},
44+
{name: "remove", onClick: handleClick},
45+
{name: "add", onClick: handleClick},
46+
];
47+
48+
<IconGroup size="medium" icons={icons}/>
49+
```
50+
51+
```react|span-6
52+
const handleClick = () => alert("clicked");
53+
const icons = [
54+
{name: "eye", onClick: handleClick},
55+
{name: "remove", onClick: handleClick},
56+
{name: "add", onClick: handleClick},
57+
];
58+
59+
<IconGroup size="large" icons={icons}/>
60+
```
61+
62+
```react|span-6
63+
const handleClick = () => alert("clicked");
64+
const icons = [
65+
{name: "eye", onClick: handleClick},
66+
{name: "remove", onClick: handleClick},
67+
{name: "add", onClick: handleClick},
68+
];
69+
70+
<IconGroup direction="vertical" size="large" icons={icons}/>
71+
```

‎packages/documentation/public/molecules/InputField.md‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
Inputfield make handling with Inputs on Forms easier
2+
3+
```react
4+
<InputField title="Goal of the Course" name="goal" placeholder="Goal" />
5+
```
6+
7+
They can be small
8+
9+
```react
10+
<InputField
11+
variant="small"
12+
title="Goal of the Course"
13+
name="goal"
14+
placeholder="Goal"
15+
/>
16+
```
17+
18+
Display a custom Input Component
19+
20+
```react
21+
<InputField
22+
variant="small"
23+
title="Goal of the Course"
24+
name="goal"
25+
FieldComponent={PasswordInput}
26+
/>
27+
```
28+
29+
They can contain multiple lines of text
30+
31+
```react
32+
<InputField
33+
variant="textarea"
34+
title="Description of the Course"
35+
name="description"
36+
placeholder="Description"
37+
/>
38+
```
39+
40+
They can display errors
41+
42+
```react
43+
<InputField
44+
errors={["Goal Too Short", "Goal Too Long"]}
45+
title="Goal of the Course"
46+
name="goal"
47+
placeholder="Goal"
48+
/>
49+
```
50+
51+
They can display children
52+
53+
```react
54+
state: { items: ["", ""], errors: [null, null] }
55+
---
56+
const onChange = (e) => {
57+
const { name , value } = e.target;
58+
const items = [...state.items];
59+
const index = name.split(".")[1];
60+
items[index] = value;
61+
setState({ items })
62+
};
63+
64+
<InputField
65+
title="Goal of the Course"
66+
name="goal"
67+
errors={state.errors}
68+
placeholder="Goal">
69+
<InputList
70+
title="Form Fields"
71+
onChange={onChange}
72+
name="form_fields"
73+
items={state.items}
74+
errors={state.errors}/>
75+
</InputField>
76+
```

0 commit comments

Comments
 (0)