Skip to content

Commit b0f79bb

Browse files
author
vikasrohit
committed
Merge pull request #38 from appirio-tech/feature/footer-component
Feature/footer component
2 parents 9ca028b + eb08a16 commit b0f79bb

File tree

13 files changed

+367
-62
lines changed

13 files changed

+367
-62
lines changed

‎components/ExampleNav/ExampleNavContainer.coffee‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@ navs =
1010
'QuickLinksExample',
1111
'SearchSuggestionsExamples',
1212
'SearchBarExample',
13-
'NavbarExample'
13+
'NavbarExample',
14+
'TCFooterExamples',
15+
'MenuBarExamples'
1416
]
1517
FileUploader: [
1618
'FileUploaderContainerExamples'
@@ -24,8 +26,7 @@ navs =
2426
'ImageViewerExamples'
2527
'LoaderExamples',
2628
'PanelExamples',
27-
'StandardListItemExamples',
28-
'MenuBarExamples'
29+
'StandardListItemExamples'
2930
]
3031
ManageSteps: [
3132
'ManageStepsExamples'

‎components/Icons/FacebookIcon.jsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react'
2+
3+
const FacebookIcon = ({ width, height, fill }) => {
4+
const f = (fill || '#3B5998')
5+
return (
6+
<svg width={ width || '32px' } height={ height || '32px' } viewBox="0 0 27 27" version="1.1" xmlns="http://www.w3.org/2000/svg">
7+
<title>ico-facebook</title>
8+
<desc>Created with Sketch.</desc>
9+
<defs></defs>
10+
<g id="navigation-states" stroke="none" strokeWidth="1" fill="none" fill-rule="evenodd">
11+
<g id="Mobile-320-menu-speck-10" transform="translate(-60.000000, -1252.000000)" fill={ f }>
12+
<g id="©-2015-topcoder.-All-Copy-+-Group" transform="translate(20.000000, 1212.000000)">
13+
<g id="Group">
14+
<g id="facebook-copy" transform="translate(40.000000, 40.000000)">
15+
<path d="M24,0 L3,0 C1.35,0 0,1.35 0,3 L0,24 C0,25.6515 1.35,27 3,27 L13.5,27 L13.5,16.5 L10.5,16.5 L10.5,12.7875 L13.5,12.7875 L13.5,9.7125 C13.5,6.4665 15.318,4.1865 19.149,4.1865 L21.8535,4.1895 L21.8535,8.097 L20.058,8.097 C18.567,8.097 18,9.216 18,10.254 L18,12.789 L21.852,12.789 L21,16.5 L18,16.5 L18,27 L24,27 C25.65,27 27,25.6515 27,24 L27,3 C27,1.35 25.65,0 24,0 L24,0 Z" id="ico-facebook"></path>
16+
</g>
17+
</g>
18+
</g>
19+
</g>
20+
</g>
21+
</svg>
22+
)
23+
}
24+
25+
export default FacebookIcon

‎components/Icons/GPlusIcon.jsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react'
2+
3+
const GPlusIcon = ({ width, height }) => {
4+
return (
5+
<svg width={ width || '32px' } height={ height || '32px' } viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg">
6+
<g id="Register-Web" stroke="none" strokeWidth="1" fill="none" fill-rule="evenodd">
7+
<g id="LogIn-W-Empty" transform="translate(-457.000000, -598.000000)">
8+
<g id="Log-In-Icons" transform="translate(362.000000, 585.984000)">
9+
<g id="button-bg-copy-+-super-g-+-GOOGLE" transform="translate(83.000000, 1.000000)">
10+
<g id="super-g" transform="translate(12.000000, 11.000000)">
11+
<path d="M9,3.48 C10.69,3.48 11.83,4.21 12.48,4.82 L15.02,2.34 C13.46,0.89 11.43,0 9,0 C5.48,0 2.44,2.02 0.96,4.96 L3.87,7.22 C4.6,5.05 6.62,3.48 9,3.48 L9,3.48 Z" id="Shape" fill="#EA4335"></path>
12+
<path d="M17.64,9.2 C17.64,8.46 17.58,7.92 17.45,7.36 L9,7.36 L9,10.7 L13.96,10.7 C13.86,11.53 13.32,12.78 12.12,13.62 L14.96,15.82 C16.66,14.25 17.64,11.94 17.64,9.2 L17.64,9.2 Z" id="Shape" fill="#4285F4"></path>
13+
<path d="M3.88,10.78 C3.69,10.22 3.58,9.62 3.58,9 C3.58,8.38 3.69,7.78 3.87,7.22 L0.96,4.96 C0.35,6.18 0,7.55 0,9 C0,10.45 0.35,11.82 0.96,13.04 L3.88,10.78 L3.88,10.78 Z" id="Shape" fill="#FBBC05"></path>
14+
<path d="M9,18 C11.43,18 13.47,17.2 14.96,15.82 L12.12,13.62 C11.36,14.15 10.34,14.52 9,14.52 C6.62,14.52 4.6,12.95 3.88,10.78 L0.97,13.04 C2.45,15.98 5.48,18 9,18 L9,18 Z" id="Shape" fill="#34A853"></path>
15+
<path d="M0,0 L18,0 L18,18 L0,18 L0,0 Z" id="Shape"></path>
16+
</g>
17+
</g>
18+
</g>
19+
</g>
20+
</g>
21+
</svg>
22+
)
23+
}
24+
25+
export default GPlusIcon

‎components/Icons/LinkedInIcon.jsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react'
2+
3+
const LinkedInIcon = ({ width, height, fill }) => {
4+
const f = (fill || '#007BB5')
5+
return (
6+
<svg width={ width || '32px' } height={ height || '32px' } viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
7+
<g>
8+
<rect fill={ f } height="23" width="7" y="9"/>
9+
<path d="M24.003,9C20,9,18.89,10.312,18,12V9h-7v23h7V19c0-2,0-4,3.5-4s3.5,2,3.5,4v13h7V19C32,13,31,9,24.003,9z" fill={ f }/>
10+
<circle cx="3.5" cy="3.5" fill={ f } r="3.5"/>
11+
</g>
12+
<g/>
13+
<g/>
14+
<g/>
15+
<g/>
16+
<g/>
17+
<g/>
18+
</svg>
19+
)
20+
}
21+
22+
export default LinkedInIcon

‎components/Icons/TwitterIcon.jsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react'
2+
3+
const TwitterIcon = ({ width, height, fill }) => {
4+
const f = (fill || '#62AADC')
5+
return (
6+
<svg enable-background="0 0 32 32" height={ height || '32px'} id="Layer_1" version="1.0" viewBox="0 0 32 32" width={ width || '32px' }>
7+
<path d="M31.993,6.077C30.816,6.6,29.552,6.953,28.223,7.11c1.355-0.812,2.396-2.098,2.887-3.63 c-1.269,0.751-2.673,1.299-4.168,1.592C25.744,3.797,24.038,3,22.149,3c-3.625,0-6.562,2.938-6.562,6.563 c0,0.514,0.057,1.016,0.169,1.496C10.301,10.785,5.465,8.172,2.227,4.201c-0.564,0.97-0.888,2.097-0.888,3.3 c0,2.278,1.159,4.286,2.919,5.464c-1.075-0.035-2.087-0.329-2.972-0.821c-0.001,0.027-0.001,0.056-0.001,0.082 c0,3.181,2.262,5.834,5.265,6.437c-0.55,0.149-1.13,0.23-1.729,0.23c-0.424,0-0.834-0.041-1.234-0.117 c0.834,2.606,3.259,4.504,6.13,4.558c-2.245,1.76-5.075,2.811-8.15,2.811c-0.53,0-1.053-0.031-1.566-0.092 C2.905,27.913,6.355,29,10.062,29c12.072,0,18.675-10.001,18.675-18.675c0-0.284-0.008-0.568-0.02-0.85 C30,8.55,31.112,7.395,31.993,6.077z" fill={f}/>
8+
<g/>
9+
<g/>
10+
<g/>
11+
<g/>
12+
<g/>
13+
<g/>
14+
</svg>
15+
)
16+
}
17+
18+
export default TwitterIcon
19+
20+
21+
22+

‎components/MenuBar/MenuBar.jsx‎

Lines changed: 35 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,62 @@
11
import React, { PropTypes, Component } from 'react'
2+
import classNames from 'classNames'
23

34
require('./MenuBar.scss')
45

5-
class MenuBar extends Component {
6-
constructor(props) {
7-
super(props)
8-
9-
this.state = { mobile: false }
10-
this.handleResize = this.handleResize.bind(this)
11-
}
12-
6+
export default class MenuBar extends Component {
137
componentWillMount() {
148
this.handleResize()
15-
window.addEventListener('resize', this.handleResize)
9+
window.addEventListener('resize', this.handleResize.bind(this))
1610
}
1711

1812
componentWillUnmount() {
19-
window.removeEventListener('resize', this.handleResize)
13+
window.removeEventListener('resize', this.handleResize.bind(this))
2014
}
2115

2216
handleResize() {
23-
const breakPoint = this.props.mobileBreakPoint
24-
25-
if (window.innerWidth > breakPoint) {
26-
this.setState({ mobile: false })
27-
} else {
28-
this.setState({ mobile: true })
29-
}
17+
this.setState({ mobile: window.innerWidth <= this.props.mobileBreakPoint })
3018
}
3119

3220
render() {
33-
let mbClasses = 'MenuBar'
34-
let orientation = this.props.orientation
35-
36-
if (!orientation || ['horizontal', 'vertical'].indexOf(orientation) === -1) {
37-
orientation = 'horizontal'
21+
const { orientation, items } = this.props
22+
23+
const mbClasses = classNames({
24+
MenuBar: true,
25+
[orientation]: true
26+
})
27+
28+
const menuItem = item => {
29+
const itemClass = classNames({
30+
[orientation]: true,
31+
mobile: this.state.mobile,
32+
selected: window.location.href.indexOf(item.link) !== -1
33+
})
34+
35+
const linkTarget = item.target || '_self'
36+
const linkContent = this.state.mobile ? <img src={item.img} /> : item.text
37+
38+
return (
39+
<li key={item.text} className={itemClass}>
40+
<a href={item.link} target={linkTarget}>{linkContent}</a>
41+
</li>
42+
)
3843
}
3944

40-
mbClasses += (' ' + orientation)
41-
4245
return (
4346
<ul className={mbClasses}>
44-
{
45-
this.props.items.map(item => {
46-
let itemClass = orientation
47-
if (this.state.mobile) {
48-
itemClass += ' mobile'
49-
}
50-
if (window.location.href.indexOf(item.link) !== -1) {
51-
itemClass += ' selected'
52-
}
53-
if (this.state.mobile) {
54-
return (
55-
<li key={item.text} className={itemClass}><a href={item.link}><img src={item.img} /></a></li>
56-
)
57-
} else {
58-
return (
59-
<li key={item.text} className={itemClass}><a href={item.link}>{item.text}</a></li>
60-
)
61-
}
62-
})
63-
}
47+
{ items.map(menuItem) }
6448
</ul>
6549
)
6650
}
6751
}
6852

6953
MenuBar.propTypes = {
70-
items : PropTypes.array.isRequired,
71-
mobileBreakPoint: PropTypes.number
54+
items: PropTypes.array.isRequired,
55+
mobileBreakPoint: PropTypes.number,
56+
orientation: PropTypes.oneOf(['vertical', 'horizontal'])
7257
}
7358

74-
MenuBar.defaultProps = { mobileBreakPoint: 768 }
75-
76-
export default MenuBar
59+
MenuBar.defaultProps = {
60+
mobileBreakPoint: 768,
61+
orientation: 'horizontal'
62+
}

‎components/MenuBar/MenuBar.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
@import 'topcoder/tc-includes';
22

3+
$menu-bar-item-text-color: #737380;
4+
35
.MenuBar {
46
display: flex;
57
font-family: 'Roboto', Arial;
@@ -23,13 +25,12 @@
2325
flex-direction: column;
2426

2527
li {
26-
padding: 10px 0px;
28+
padding: 10px 15px;
2729
}
2830
}
2931

3032
li {
3133
display: flex;
32-
justify-content: center;
3334

3435
&.selected {
3536
border-bottom: 2px solid $primary-light;
@@ -47,8 +48,7 @@
4748
text-transform: uppercase;
4849
font-size: 12px;
4950
line-height: 14px;
50-
// FIX ME: use variable
51-
color: #737380;
51+
color: $menu-bar-item-text-color;
5252
}
5353
}
5454
}

‎components/Panel/Panel.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ class Panel extends Component {
4141
}
4242

4343
return (
44-
<div className="panel">
44+
<div className="Panel">
4545
{header}
4646
{body}
4747
</div>

‎components/Panel/Panel.scss‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,23 @@
11
@import 'topcoder/tc-includes';
22

3-
.panel {
3+
$panel-header-text-color: #737380;
4+
$panel-header-bg-color: #DFDFE1;
5+
6+
.Panel {
47
.panel-header {
5-
line-height : 23px;
6-
font-size : 18px;
8+
line-height : 16px;
9+
font-size : 14px;
710
display : flex;
811
justify-content : space-between;
9-
background-color: $gray;
12+
background-color: $panel-header-bg-color;
1013
padding : 10px;
14+
color : $panel-header-text-color
1115
}
1216

1317
.panel-body {
14-
border : 1px solid $gray;
18+
border-left : 1px solid $accent-gray;
19+
border-right : 1px solid $accent-gray;
20+
border-bottom : 1px solid $accent-gray;
1521
padding: 10px;
1622
}
1723
}

‎components/Router/Router.cjsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ QuickLinksExample = require '../QuickLinks/QuickLinksExample.jsx'
2626
SearchSuggestionsExamples = require '../SearchSuggestions/SearchSuggestionsExamples.jsx'
2727
SearchBarExample = require '../SearchBar/SearchBarExamples.jsx'
2828
NavbarExample = require '../Navbar/NavbarExample.jsx'
29+
TCFooterExamples = require '../TCFooter/TCFooterExamples.jsx'
2930

3031
{ Router, Route, Link, IndexRoute, browserHistory } = require 'react-router'
3132

@@ -72,6 +73,8 @@ component = ->
7273
<Route path="/SearchBarExample" component={SearchBarExample} />
7374

7475
<Route path="/NavbarExample" component={NavbarExample} />
76+
77+
<Route path="/TCFooterExamples" component={TCFooterExamples} />
7578
</Route>
7679
</Router>
7780
</Provider>

0 commit comments

Comments
 (0)