Skip to content

GitLab

S
scratch-www
Unverified Commit 4a7d9096 authored by Eric Rosenbaum's avatar Eric Rosenbaum Committed by GitHub
Browse files
Options

Merge pull request #5211 from ericrosenbaum/more-components 

Add more components to the components page
parents 80258f4b 542c416e
Show whitespace changes
Inline Side-by-side
Showing with 141 additions and 56 deletions
src/components/grid/grid.json
View file @ 4a7d9096
...@@ -2,129 +2,145 @@ ...@@ -2,129 +2,145 @@
{ {
"id": 1, "id": 1,
"type": "project", "type": "project",
"title": "Project", "title": "Project Title",
"thumbnailUrl": "", "thumbnailUrl": "",
"creator": "", "author": {"username": "project creator"},
"href": "#" "href": "#",
"stats": {}
}, },
{ {
"id": 2, "id": 2,
"type": "project", "type": "project",
"title": "Project", "title": "Project Title",
"thumbnailUrl": "", "thumbnailUrl": "",
"creator": "", "author": {"username": "project creator"},
"href": "#" "href": "#",
"stats": {}
}, },
{ {
"id": 3, "id": 3,
"type": "project", "type": "project",
"title": "Project", "title": "Project Title",
"thumbnailUrl": "", "thumbnailUrl": "",
"creator": "", "author": {"username": "project creator"},
"href": "#" "href": "#",
"stats": {}
}, },
{ {
"id": 4, "id": 4,
"type": "project", "type": "project",
"title": "Project", "title": "Project Title",
"thumbnailUrl": "", "thumbnailUrl": "",
"creator": "", "author": {"username": "project creator"},
"href": "#" "href": "#",
"stats": {}
}, },
{ {
"id": 5, "id": 5,
"type": "project", "type": "project",
"title": "Project", "title": "Project Title",
"thumbnailUrl": "", "thumbnailUrl": "",
"creator": "", "author": {"username": "project creator"},
"href": "#" "href": "#",
"stats": {}
}, },
{ {
"id": 6, "id": 6,
"type": "project", "type": "project",
"title": "Project", "title": "Project Title",
"thumbnailUrl": "", "thumbnailUrl": "",
"creator": "", "author": {"username": "project creator"},
"href": "#" "href": "#",
"stats": {}
}, },
{ {
"id": 7, "id": 7,
"type": "project", "type": "project",
"title": "Project", "title": "Project Title",
"thumbnailUrl": "", "thumbnailUrl": "",
"creator": "", "author": {"username": "project creator"},
"href": "#" "href": "#",
"stats": {}
}, },
{ {
"id": 8, "id": 8,
"type": "project", "type": "project",
"title": "Project", "title": "Project Title",
"thumbnailUrl": "", "thumbnailUrl": "",
"creator": "", "author": {"username": "project creator"},
"href": "#" "href": "#",
"stats": {}
}, },
{ {
"id": 9, "id": 9,
"type": "project", "type": "project",
"title": "Project", "title": "Project Title",
"thumbnailUrl": "", "thumbnailUrl": "",
"creator": "", "author": {"username": "project creator"},
"href": "#" "href": "#",
"stats": {}
}, },
{ {
"id": 10, "id": 10,
"type": "project", "type": "project",
"title": "Project", "title": "Project Title",
"thumbnailUrl": "", "thumbnailUrl": "",
"creator": "", "author": {"username": "project creator"},
"href": "#" "href": "#",
"stats": {}
}, },
{ {
"id": 11, "id": 11,
"type": "project", "type": "project",
"title": "Project", "title": "Project Title",
"thumbnailUrl": "", "thumbnailUrl": "",
"creator": "", "author": {"username": "project creator"},
"href": "#" "href": "#",
"stats": {}
}, },
{ {
"id": 12, "id": 12,
"type": "project", "type": "project",
"title": "Project", "title": "Project Title",
"thumbnailUrl": "", "thumbnailUrl": "",
"creator": "", "author": {"username": "project creator"},
"href": "#" "href": "#",
"stats": {}
}, },
{ {
"id": 13, "id": 13,
"type": "project", "type": "project",
"title": "Project", "title": "Project Title",
"thumbnailUrl": "", "thumbnailUrl": "",
"creator": "", "author": {"username": "project creator"},
"href": "#" "href": "#",
"stats": {}
}, },
{ {
"id": 14, "id": 14,
"type": "project", "type": "project",
"title": "Project", "title": "Project Title",
"thumbnailUrl": "", "thumbnailUrl": "",
"creator": "", "author": {"username": "project creator"},
"href": "#" "href": "#",
"stats": {}
}, },
{ {
"id": 15, "id": 15,
"type": "project", "type": "project",
"title": "Project", "title": "Project Title",
"thumbnailUrl": "", "thumbnailUrl": "",
"creator": "", "author": {"username": "project creator"},
"href": "#" "href": "#",
"stats": {}
}, },
{ {
"id": 16, "id": 16,
"type": "project", "type": "project",
"title": "Project", "title": "Project Title",
"thumbnailUrl": "", "thumbnailUrl": "",
"creator": "", "author": {"username": "project creator"},
"href": "#" "href": "#",
"stats": {}
} }
] ]
src/views/components/components.jsx
View file @ 4a7d9096
...@@ -8,22 +8,78 @@ const Carousel = require('../../components/carousel/carousel.jsx'); ...@@ -8,22 +8,78 @@ const Carousel = require('../../components/carousel/carousel.jsx');
const Form = require('../../components/forms/form.jsx'); const Form = require('../../components/forms/form.jsx');
const Input = require('../../components/forms/input.jsx'); const Input = require('../../components/forms/input.jsx');
const Spinner = require('../../components/spinner/spinner.jsx'); const Spinner = require('../../components/spinner/spinner.jsx');
const Grid = require('../../components/grid/grid.jsx');
const TextArea = require('../../components/forms/textarea.jsx');
const SubNavigation = require('../../components/subnavigation/subnavigation.jsx');
const Select = require('../../components/forms/select.jsx');
require('./components.scss'); require('./components.scss');
const Components = () => ( const Components = () => (
<div className="components"> <div className="components">
<div className="inner"> <div className="inner">
<h1>Nav Bubbles</h1>
<div className="subnavigation">
<SubNavigation>
<a href="">
<li className="active">
cats
</li>
</a>
<a href="">
<li>
also cats
</li>
</a>
<a href="">
<li>
not cats
</li>
</a>
</SubNavigation>
</div>
<h1>Grid</h1>
<Grid
showAvatar
/>
<h1>Button</h1> <h1>Button</h1>
<Button>I love button</Button> <Button>I love buttons</Button>
<h1>Form</h1> <h1>Form</h1>
<div className="form">
<Form> <Form>
<Select
label="Drop-down"
required
options={[
{
label: 'first option',
value: 1
},
{
label: 'second option',
value: 2
},
{
label: 'third option',
value: 3
}
]}
name="name"
value={1}
/>
<Input <Input
label="Text input"
required
maxLength="30" maxLength="30"
name="test" name="test"
type="text" />
<TextArea
label="Text area"
name="textarea1"
required
/> />
</Form> </Form>
</div>
<h1>Box Component</h1> <h1>Box Component</h1>
<Box <Box
more="Cat Gifs" more="Cat Gifs"
......
src/views/components/components.scss
View file @ 4a7d9096
...@@ -5,6 +5,19 @@ ...@@ -5,6 +5,19 @@
margin: 0 0 10px 0; margin: 0 0 10px 0;
} }
.subnavigation {
li {
background-color: $active-gray;
&.active {
background-color: $ui-blue;
}
}
}
.form {
width: 200px;
}
.colors { .colors {
span { span {
display: inline-block; display: inline-block;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment