diff --git a/src/components/TabNav/TabNav.css b/src/components/TabNav/TabNav.css new file mode 100644 index 00000000..e68e40a6 --- /dev/null +++ b/src/components/TabNav/TabNav.css @@ -0,0 +1,19 @@ +.tab { + float: left; + margin-left: 1rem; + font-size: 20px; + letter-spacing: -0.5px; + + &:first-child { + margin-left: 0; + } +} + +.link { + text-decoration: none; +} + +.selected { + font-weight: bold; + text-decoration: underline; +} diff --git a/src/components/TabNav/TabNav.example.js b/src/components/TabNav/TabNav.example.js new file mode 100644 index 00000000..eba655cf --- /dev/null +++ b/src/components/TabNav/TabNav.example.js @@ -0,0 +1,16 @@ +import TabNav from './TabNav'; + +const selfLinkProps = { + name: 'StyleguideComponent', + params: { component: 'TabNav' }, +}; + +export const Empty = { + component: TabNav, + props: { + tabs: [ + { text: 'Normal', linkProps: selfLinkProps }, + { text: 'Selected', linkProps: selfLinkProps, selected: true }, + ], + }, +}; diff --git a/src/components/TabNav/TabNav.js b/src/components/TabNav/TabNav.js new file mode 100644 index 00000000..a9e480a9 --- /dev/null +++ b/src/components/TabNav/TabNav.js @@ -0,0 +1,45 @@ +import React, { PropTypes } from 'react'; +import classNames from 'classnames'; +import { NamedLink } from '../../components'; + +import css from './TabNav.css'; + +const Tab = props => { + const { text, selected, linkProps } = props; + const classes = classNames(css.tab, { + [css.selected]: selected, + }); + return ( +
+ {text} +
+ ); +}; + +Tab.defaultProps = { selected: false }; + +const { arrayOf, object, string, bool } = PropTypes; + +Tab.propTypes = { + text: string.isRequired, + selected: bool, + linkProps: object.isRequired, +}; + +const TabNav = props => { + const { className, tabs } = props; + return ( + + ); +}; + +TabNav.defaultProps = { className: '' }; + +TabNav.propTypes = { + className: string, + tabs: arrayOf(object).isRequired, +}; + +export default TabNav; diff --git a/src/components/index.js b/src/components/index.js index d44f0645..8896e316 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -32,6 +32,7 @@ import RoutesProvider from './RoutesProvider/RoutesProvider'; import SaleDetailsPanel from './SaleDetailsPanel/SaleDetailsPanel'; import SearchResultsPanel from './SearchResultsPanel/SearchResultsPanel'; import StripeBankAccountToken from './StripeBankAccountToken/StripeBankAccountToken'; +import TabNav from './TabNav/TabNav'; import ValidationError from './ValidationError/ValidationError'; export { @@ -71,5 +72,6 @@ export { SaleDetailsPanel, SearchResultsPanel, StripeBankAccountToken, + TabNav, ValidationError, }; diff --git a/src/containers/InboxPage/InboxPage.css b/src/containers/InboxPage/InboxPage.css index d0db0e9f..dc446c26 100644 --- a/src/containers/InboxPage/InboxPage.css +++ b/src/containers/InboxPage/InboxPage.css @@ -2,17 +2,8 @@ margin: 1rem; } -.tab { - float: left; +.tabs { margin-left: 1rem; - font-size: 20px; - letter-spacing: -0.5px; - text-decoration: none; -} - -.activeTab { - font-weight: bold; - text-decoration: underline; } .error { diff --git a/src/containers/InboxPage/InboxPage.js b/src/containers/InboxPage/InboxPage.js index 634433dc..e545bc8c 100644 --- a/src/containers/InboxPage/InboxPage.js +++ b/src/containers/InboxPage/InboxPage.js @@ -2,7 +2,14 @@ import React, { PropTypes } from 'react'; import { compose } from 'redux'; import { connect } from 'react-redux'; import { FormattedMessage, injectIntl, intlShape } from 'react-intl'; -import { Avatar, NamedLink, NamedRedirect, PageLayout, PaginationLinks } from '../../components'; +import { + Avatar, + NamedLink, + NamedRedirect, + PageLayout, + PaginationLinks, + TabNav, +} from '../../components'; import * as propTypes from '../../util/propTypes'; import { getMarketplaceEntities } from '../../ducks/marketplaceData.duck'; import { loadData } from './InboxPage.duck'; @@ -86,8 +93,6 @@ export const InboxPageComponent = props => { fetchOrdersOrSalesError, pagination, transactions, - currentUserHasListings, - currentUserHasListingsError, intl, params, } = props; @@ -112,7 +117,7 @@ export const InboxPageComponent = props => { ); }; - const error = fetchOrdersOrSalesError || currentUserHasListingsError + const error = fetchOrdersOrSalesError ?

@@ -133,31 +138,36 @@ export const InboxPageComponent = props => { /> : null; + const tabs = [ + { + text: intl.formatMessage({ + id: 'InboxPage.ordersTabTitle', + }), + selected: isOrders, + linkProps: { + name: 'InboxPage', + params: { tab: 'orders' }, + }, + }, + { + text: intl.formatMessage({ + id: 'InboxPage.salesTabTitle', + }), + selected: !isOrders, + linkProps: { + name: 'InboxPage', + params: { tab: 'sales' }, + }, + }, + ]; + const nav = ; + return (

- {currentUserHasListings - ? - : null} + {nav} {error}