Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Footer component #115

Open
wants to merge 29 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
38e9de4
Set up base Footer component doc page
epilande Aug 11, 2016
dd2d05e
Layout footer
epilande Aug 11, 2016
ce3c497
Add HPE logo
epilande Aug 11, 2016
4c105bb
Merge branch 'master' into footer
epilande Aug 11, 2016
7ab0621
Add social icons
epilande Aug 12, 2016
e23a8fb
Add links & space out bottom part of footer
epilande Aug 15, 2016
85ec42b
Move footer directory links in Accordion component
epilande Aug 17, 2016
192e28a
Disable Accordion & expand all
epilande Aug 17, 2016
521d8ad
Wrap all links in anchor tags
epilande Aug 17, 2016
b4f91aa
Set up responsive handler to enable accordion on mobile
epilande Aug 17, 2016
79aed24
Don’t display list item separator if accordion is disabled
epilande Aug 17, 2016
9372fea
Style footer links
epilande Aug 17, 2016
8993b7f
Layout & style footer legal links
epilande Aug 17, 2016
8f6d475
Clean up css
epilande Aug 17, 2016
fda0b17
Responsive styles for footer
epilande Aug 17, 2016
f3954d2
Merge branch 'master' into footer
epilande Aug 18, 2016
fed3e2d
Fix IE & safari logo issue
epilande Aug 18, 2016
6ffd72a
Mobile spacing
epilande Aug 18, 2016
05c9934
Use existing HPE logo
epilande Aug 18, 2016
32c3c0c
Make footer logo, social, legal, & links dynamic
epilande Aug 18, 2016
96d9128
Set up dark theme on footer
epilande Aug 19, 2016
5538129
Add dark theme example
epilande Aug 19, 2016
fb77787
Change background for dark theme on mobile & fix linting errors
epilande Aug 19, 2016
f3a903c
Add proptypes & update docs
epilande Aug 19, 2016
0fabe5c
Merge branch 'master' into footer
epilande Aug 19, 2016
f0c87b3
Use scss variables
epilande Aug 19, 2016
554d694
Refactor footer
epilande Aug 19, 2016
45cce03
Change directory links to use box vs accordion
epilande Aug 23, 2016
baefae4
Clean up & fix spacing
epilande Aug 23, 2016
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/develop/Develop.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ var MarqueeDoc = require('./components/MarqueeDoc');
var WorldMapDoc = require('./components/WorldMapDoc');
var ContentCardDoc = require('./components/ContentCardDoc');
var StackDoc = require('./components/StackDoc');
var FooterDoc = require('./components/FooterDoc');

//hjjs configuration
var hljs = require('highlight.js/lib/highlight');
Expand Down Expand Up @@ -51,6 +52,7 @@ var CONTENTS = [
{route: 'develop_marquee', label: 'Marquee', component: MarqueeDoc},
{route: 'develop_content-card', label: 'ContentCard', component: ContentCardDoc},
{route: 'develop_stack', label: 'Stack', component: StackDoc},
{route: 'develop_footer', label: 'Footer', component: FooterDoc},
{route: 'develop_world-map', label: 'WorldMap', component: WorldMapDoc}
]
}
Expand Down
195 changes: 195 additions & 0 deletions src/develop/components/FooterDoc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,195 @@
// (C) Copyright 2014-2016 Hewlett Packard Enterprise Development LP

import React, { Component } from 'react';
import DocsArticle from '../../DocsArticle';
import Example from '../Example';
import Footer from '../../modules/Footer';
import Logo from '../../examples/Logo';
import SocialTwitterIcon from 'grommet/components/icons/base/SocialTwitter';
import SocialFacebookIcon from 'grommet/components/icons/base/SocialFacebook';
import SocialLinkedinIcon from 'grommet/components/icons/base/SocialLinkedin';

Footer.displayName = 'Footer';

export default class FooterDoc extends Component {
render () {
return (
<DocsArticle title="Footer" colorIndex="neutral-3">

<p>Footer component.</p>
<pre><code className="html hljs xml">
{`<Footer />`}
</code></pre>

<section>
<h2>Footer Options</h2>
<dl>
<dt><code>darkTheme true|false</code></dt>
<dd>Text will be light-colored if true, dark if false.</dd>
<dt><code>directory {`[{
header: {string},
links: [{
title: {string},
url: {string}
}, ...]
},
...]`}</code></dt>
<dd>An array of links. Required.</dd>
<dt><code>logo {`{icon: {node}, url: {string}}`}</code></dt>
<dd>Logo on footer. <code>icon</code> &amp; <code>url</code> required.</dd>
<dt><code>social {`[{icon: {node}, url: {string}}, ...]`}</code></dt>
<dd>Social media icons on footer. <code>icon</code> &amp; <code>url</code> required.</dd>
<dt><code>legal {`[{icon: {node}, title: {string}, url: {string}}, ...]`}</code></dt>
<dd>Legal section on footer. <code>title</code> &amp; <code>url</code> required.</dd>
</dl>
</section>

<section>
<h2>Examples</h2>

<Example name="Default" code={
<Footer
pad="medium"
directory={[
{
header: 'Corporate',
links: [
{title: 'Accessibility', url: '#'},
{title: 'Careers', url: '#'},
{title: 'Contact Us', url: '#'},
{title: 'Corporate Responsibility', url: '#'},
{title: 'Events', url: '#'},
{title: 'Hewlett Packard Labs', url: '#'},
{title: 'Investor Relations', url: '#'},
{title: 'Leadership', url: '#'},
{title: 'Newsroom', url: '#'},
{title: 'Sitemap', url: '#'}
]
},
{
header: 'Partners',
links: [
{title: 'Partners Program', url: '#'},
{title: 'Find a Partner', url: '#'}
]
},
{
header: 'Communities',
links: [
{title: 'Developer Forums', url: '#'},
{title: 'Enterprise Business', url: '#'}
]
},
{
header: 'Customer Resources',
links: [
{title: 'Enterprise Store', url: '#'},
{title: 'Public Sector Store', url: '#'},
{title: 'Education & Training', url: '#'},
{title: 'Email Signup', url: '#'}
]
}
]}
logo={{icon: <Logo />, url: '#'}}
social={[
{icon: <SocialLinkedinIcon />, url: '#'},
{icon: <SocialTwitterIcon />, url: '#'},
{icon: <SocialFacebookIcon />, url: '#'}
]}
legal={[
{title: 'United States', url: '#'},
{title: 'Privacy', url: '#'},
{title: 'Terms of Use', url: '#'},
{title: 'Cookies', url: '#'},
{title: '© 2016 Hewlett Packard Enterprise'}
]}
/>
} />

<Example name="Dark theme" code={
<Footer
pad="medium"
darkTheme={true}
directory={[
{
header: 'Corporate',
links: [
{title: 'Accessibility', url: '#'},
{title: 'Careers', url: '#'},
{title: 'Contact Us', url: '#'},
{title: 'Corporate Responsibility', url: '#'},
{title: 'Events', url: '#'},
{title: 'Hewlett Packard Labs', url: '#'},
{title: 'Investor Relations', url: '#'},
{title: 'Leadership', url: '#'},
{title: 'Newsroom', url: '#'},
{title: 'Sitemap', url: '#'}
]
},
{
header: 'Partners',
links: [
{title: 'Partners Program', url: '#'},
{title: 'Find a Partner', url: '#'}
]
},
{
header: 'Communities',
links: [
{title: 'Developer Forums', url: '#'},
{title: 'Enterprise Business', url: '#'}
]
},
{
header: 'Customer Resources',
links: [
{title: 'Enterprise Store', url: '#'},
{title: 'Public Sector Store', url: '#'},
{title: 'Education & Training', url: '#'},
{title: 'Email Signup', url: '#'}
]
}
]}
logo={{icon: <Logo reverse={true} />, url: '#'}}
social={[
{icon: <SocialLinkedinIcon />, url: '#'},
{icon: <SocialTwitterIcon />, url: '#'},
{icon: <SocialFacebookIcon />, url: '#'}
]}
legal={[
{title: 'United States', url: '#'},
{title: 'Privacy', url: '#'},
{title: 'Terms of Use', url: '#'},
{title: 'Cookies', url: '#'},
{title: '© 2016 Hewlett Packard Enterprise'}
]}
/>
} />

<Example name="Without directory links" code={
<Footer
pad="medium"
logo={{icon: <Logo />, url: '#'}}
social={[
{icon: <SocialLinkedinIcon />, url: '#'},
{icon: <SocialTwitterIcon />, url: '#'},
{icon: <SocialFacebookIcon />, url: '#'}
]}
legal={[
{title: 'United States', url: '#'},
{title: 'Privacy', url: '#'},
{title: 'Terms of Use', url: '#'},
{title: 'Cookies', url: '#'},
{title: '© 2016 Hewlett Packard Enterprise'}
]}
/>
} />
</section>
</DocsArticle>
);
}
};

FooterDoc.contextTypes = {
routePrefix: React.PropTypes.string.isRequired
};
Loading