Skip to content

Commit 01ac7d7

Browse files
arielgerarielger
committed
[react-components] Add sidebar component.
1 parent abfe640 commit 01ac7d7

11 files changed

Lines changed: 221 additions & 9 deletions

File tree

‎packages/react-components/src/EmptyState/index.styl‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
@import "auth0-styleguide-core/src/vars/index.styl"
2-
@import "auth0-styleguide-core/src/mixins/index.styl"
3-
41
// Variables
52
$icon-size = 100px
63

‎packages/react-components/src/Select/index.styl‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
@import "auth0-styleguide-core/src/vars/index.styl"
2-
@import "auth0-styleguide-core/src/mixins/index.styl"
3-
41
.select
52
display inline-block
63
vertical-align top

‎packages/react-components/src/Sidebar/examples.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react';
2+
import Sidebar from './';
3+
4+
const examples = [
5+
{
6+
component: <Sidebar />,
7+
code: '<Sidebar />',
8+
title: 'Default',
9+
showTitle: false,
10+
url: 'default'
11+
}
12+
];
13+
14+
export default examples;

‎packages/react-components/src/Sidebar/index.js‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import React, { PropTypes } from 'react';
2+
3+
// Convert string to spinal tap case
4+
// http://codereview.stackexchange.com/questions/109899/convert-string-to-spinal-case
5+
const toSpinalTapCase = str =>
6+
str
7+
.replace(/(?!^)([A-Z])/g, ' $1')
8+
.replace(/[_\s]+(?=[a-zA-Z])/g, '-')
9+
.toLowerCase();
10+
11+
const renderMenu = items =>
12+
<ul className="menu-list">
13+
{ items.map(item =>
14+
<li className="menu-item">
15+
<a className="menu-item-link" href={item.url || toSpinalTapCase(item.text)}>
16+
{item.iconCode && <span className={`menu-item-icon icon-budicon-${item.iconCode}`} />}
17+
<span className="text">{item.text}</span>
18+
</a>
19+
<ul className="menu-sublist">
20+
{ item.children && item.children.map(subitem =>
21+
<li className="menu-subitem">
22+
<a
23+
className="menu-subitem-link"
24+
href={subitem.url || toSpinalTapCase(subitem.text)}
25+
>
26+
{subitem.text}
27+
</a>
28+
</li>
29+
)}
30+
</ul>
31+
</li>
32+
)}
33+
</ul>;
34+
35+
/**
36+
* Sidebar: Styleguide sidebar with drop drown sections.
37+
*/
38+
const Sidebar = ({ header, items }) =>
39+
<div className="a0r-sidebar">
40+
<header className="a0r-sidebar-header">
41+
{ header ||
42+
<h1>
43+
<a href="/">
44+
<img src="https://cdn.auth0.com/styleguide/1.0.0/img/badge.svg" alt="Auth0 badge" width="30" height="" />
45+
</a>
46+
</h1>
47+
}
48+
</header>
49+
<nav className="a0r-sidebar-menu">{renderMenu(items)}</nav>
50+
<footer></footer>
51+
</div>;
52+
53+
Sidebar.propTypes = {
54+
/**
55+
* DOM element to replace default header content.
56+
*/
57+
header: PropTypes.element,
58+
/**
59+
* List of objects representing the sidebar items
60+
*/
61+
items: PropTypes.arrayOf(PropTypes.shape({
62+
text: PropTypes.string.isRequired,
63+
url: PropTypes.string,
64+
iconCode: PropTypes.number,
65+
children: PropTypes.arrayOf({
66+
text: PropTypes.string.isRequired,
67+
url: PropTypes.string
68+
}).isRequired
69+
})).isRequired
70+
};
71+
72+
export default Sidebar;

‎packages/react-components/src/Sidebar/index.stories.js‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React from 'react';
2+
import { storiesOf } from '@kadira/storybook';
3+
import { Sidebar } from '../../src';
4+
5+
storiesOf('Sidebar', module)
6+
.add('Styleguide', () => (
7+
<Sidebar
8+
items={[
9+
{
10+
text: 'Getting started',
11+
iconCode: 464,
12+
children: [{ text: 'From CDN' }, { text: 'Installing from Github' }]
13+
},
14+
{
15+
text: 'Design',
16+
iconCode: 258,
17+
children: [{ text: 'Typography' },
18+
{ text: 'Primary Colors' },
19+
{ text: 'Secondary Colors' },
20+
{ text: 'Background Colors' },
21+
{ text: 'Status Colors' }
22+
]
23+
},
24+
{
25+
text: 'Components',
26+
iconCode: 690,
27+
children: [
28+
{ text: 'Alert' },
29+
{ text: 'Buttons' },
30+
{ text: 'Try Banner' }
31+
]
32+
},
33+
{
34+
text: 'Email templates',
35+
iconCode: 778,
36+
children: [
37+
{ text: 'Newsletter' },
38+
{ text: 'Notifications' },
39+
{ text: 'Notices' }
40+
]
41+
},
42+
{
43+
text: 'Resources',
44+
iconCode: 733,
45+
children: [
46+
{ text: 'Logos' },
47+
{ text: 'Badges' },
48+
{ text: 'Icons' }
49+
]
50+
}
51+
]}
52+
/>
53+
));

‎packages/react-components/src/Sidebar/index.styl‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
$sidebar-width = 250px
2+
$sidebar-background-color = rgba(black, 0.1)
3+
4+
.a0r-sidebar
5+
width: $sidebar-width;
6+
background-color: $sidebar-background-color;
7+
position: fixed;
8+
height: 100vh;
9+
overflow-y: auto;
10+
11+
> .a0r-sidebar-header
12+
background-color: white;
13+
overflow: hidden;
14+
text-align: center;
15+
position: relative;
16+
17+
h1
18+
margin: 15px 0;
19+
20+
> .a0r-sidebar-menu
21+
22+
.menu-list
23+
list-style: none;
24+
margin: 0;
25+
padding: 0;
26+
z-index: 200;
27+
position: relative;
28+
background: #e3e5e7;
29+
30+
.menu-item
31+
color: #5c666f;
32+
font-size: $font-size-micro;
33+
font-weight: $font-weight-bold;
34+
letter-spacing: 1px;
35+
text-transform: uppercase;
36+
37+
&.active
38+
color: #333 !important;
39+
background: darken(#e3e5e7, 4%);
40+
41+
.menu-item-link
42+
border-bottom: 1px solid rgba(0, 0, 0, .08);
43+
color: inherit;
44+
display: block;
45+
padding: 20px 20px 20px 20px;
46+
47+
.menu-item-icon
48+
margin-right: 10px;
49+
position: relative;
50+
min-width: 14px;
51+
display: inline-block;
52+
top: 0.2em;
53+
54+
.menu-sublist
55+
list-style: none;
56+
margin: 0;
57+
padding: 0;
58+
display: none;
59+
60+
+breakpoint("tablet")
61+
display: inherit;
62+
63+
.menu-subitem
64+
background-color: rgba(255, 255, 255, .3);
65+
margin: 1px 0 0 0;
66+
67+
&:first-child
68+
margin-top: 0;
69+
70+
.menu-subitem-link
71+
background-color: rgba(255, 255, 255, .3);
72+
color: inherit;
73+
display: block;
74+
padding: 10px 0 10px 40px;
75+
text-transform: none;
76+
letter-spacing: 0;

‎packages/react-components/src/Sidebar/index.test.js‎

Whitespace-only changes.

‎packages/react-components/src/TryBanner/index.styl‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
@require "auth0-styleguide-core/src/vars/index.styl"
2-
@require "auth0-styleguide-core/src/mixins/index.styl"
3-
41
.a0src-try-banner
52
text-align center
63
background $bg-color-gray-light

‎packages/react-components/src/examples.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,4 @@ export EmptyState from './EmptyState/examples';
33
export TryBanner from './TryBanner/examples';
44
export Footer from './Footer/examples';
55
export Button from './Button/examples';
6+
export Sidebar from './Sidebar/examples';

‎packages/react-components/src/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ export EmptyState from './EmptyState';
33
export Footer from './Footer';
44
export Select from './Select';
55
export TryBanner from './TryBanner';
6+
export Sidebar from './Sidebar';
67

78
// react-bootstrap components
89
export {

0 commit comments

Comments
 (0)