From 4395e9ee6ae114afc215def4378c72ddb33307d7 Mon Sep 17 00:00:00 2001 From: Hannu Lyytikainen Date: Fri, 15 Dec 2017 10:19:53 +0200 Subject: [PATCH] Break TabNavHorizontal into two components --- .../TabNavHorizontal.example.js | 50 +++--- .../TabNavHorizontal/TabNavHorizontal.js | 150 +++++++++--------- src/components/UserNav/UserNav.js | 4 +- src/components/index.js | 2 +- .../AuthenticationPage/AuthenticationPage.js | 4 +- .../AuthenticationPage.test.js.snap | 3 +- src/containers/ProfilePage/ProfilePage.js | 9 +- .../__snapshots__/ProfilePage.test.js.snap | 3 +- 8 files changed, 114 insertions(+), 111 deletions(-) diff --git a/src/components/TabNavHorizontal/TabNavHorizontal.example.js b/src/components/TabNavHorizontal/TabNavHorizontal.example.js index 500f6101..886ba20f 100644 --- a/src/components/TabNavHorizontal/TabNavHorizontal.example.js +++ b/src/components/TabNavHorizontal/TabNavHorizontal.example.js @@ -1,30 +1,42 @@ -import TabNavHorizontal from './TabNavHorizontal'; -import { TAB_TYPE_BUTTON, TAB_TYPE_LINK } from './TabNavHorizontal'; +import React from 'react'; +import { LinkTabNavHorizontal, ButtonTabNavHorizontal } from './TabNavHorizontal'; const selfLinkProps = { name: 'StyleguideComponent', params: { component: 'TabNavHorizontal' }, }; -export const LinkTabs = { - component: TabNavHorizontal, - props: { - tabs: [ - { text: 'Normal', linkProps: selfLinkProps }, - { text: 'Selected', linkProps: selfLinkProps, selected: true }, - ], - type: TAB_TYPE_LINK, - }, - group: 'navigation', -}; +const linkTabs = [ + { text: 'Normal', linkProps: selfLinkProps }, + { text: 'Selected', linkProps: selfLinkProps, selected: true }, +]; const noop = () => null; -export const ButtonTabs = { - component: TabNavHorizontal, - props: { - tabs: [{ text: 'Normal', onClick: noop }, { text: 'Selected', onClick: noop, selected: true }], - type: TAB_TYPE_BUTTON, - }, +const buttonTabs = [ + { text: 'Normal', onClick: noop }, + { text: 'Selected', onClick: noop, selected: true }, +]; + +const TabNavHorizontalComponent = () => { + return ( +
+

Horizontal link tab navigation with light skin

+ + +

Horizontal link tab navigation with dark skin

+ + +

Horizontal button tab navigation with light skin

+ + +

Horizontal button tab navigation with dark skin

+ +
+ ); +}; + +export const TabNavHorizontal = { + component: TabNavHorizontalComponent, group: 'navigation', }; diff --git a/src/components/TabNavHorizontal/TabNavHorizontal.js b/src/components/TabNavHorizontal/TabNavHorizontal.js index 26e21dcd..c5277dd7 100644 --- a/src/components/TabNavHorizontal/TabNavHorizontal.js +++ b/src/components/TabNavHorizontal/TabNavHorizontal.js @@ -1,16 +1,3 @@ -/** - * A horizontal tab bar. - * - * Tabs can be of links or buttons, denoted by the type param - * which accepts values 'link' and 'button'. - * - * The required tab params vary based on the main component type. For - * link tab bar linkProps is required for the tabs. For a button type - * of tab bar onClick function is required. - * - * By default the type of TabNavHorizontal is 'link'. - */ - import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; @@ -21,51 +8,10 @@ import css from './TabNavHorizontal.css'; export const LIGHT_SKIN = 'light'; export const DARK_SKIN = 'dark'; -export const TAB_TYPE_LINK = 'link'; -export const TAB_TYPE_BUTTON = 'button'; +const { arrayOf, bool, func, node, object, oneOf, string, shape } = PropTypes; -const { arrayOf, bool, func, node, object, oneOf, string } = PropTypes; - -const ButtonTab = props => { - const { className, disabled, text, selected, onClick, isDark } = props; - const darkSkinClasses = isDark - ? classNames(css.tabContentDarkSkin, { - [css.selectedTabContentDarkSkin]: selected, - [css.disabledDarkSkin]: disabled, - }) - : null; - - const buttonClasses = classNames( - css.tabContent, - { - [css.selectedTabContent]: selected, - [css.disabled]: disabled, - }, - darkSkinClasses - ); - - return ( -
- - {text} - -
- ); -}; - -ButtonTab.defaultProps = { className: null, disabled: false, selected: false }; - -ButtonTab.propTypes = { - className: string, - text: node.isRequired, - disabled: bool, - selected: bool, - onClick: func.isRequired, - isDark: bool.isRequired, -}; - -const LinkTab = props => { - const { className, disabled, text, selected, linkProps, isDark } = props; +const Tab = props => { + const { className, disabled, text, selected, onClick, linkProps, isDark } = props; const darkSkinClasses = isDark ? classNames(css.tabContentDarkSkin, { [css.selectedTabContentDarkSkin]: selected, @@ -82,62 +28,114 @@ const LinkTab = props => { darkSkinClasses ); + const buttonClasses = classNames( + css.tabContent, + css.button, + { + [css.selectedTabContent]: selected, + [css.disabled]: disabled, + }, + darkSkinClasses + ); + + const isButton = !!onClick; + return (
- - {text} - + {isButton ? ( + + {text} + + ) : ( + + {text} + + )}
); }; -LinkTab.defaultProps = { className: null, disabled: false, selected: false }; +Tab.defaultProps = { className: null, disabled: false, selected: false }; -LinkTab.propTypes = { +Tab.propTypes = { className: string, text: node.isRequired, disabled: bool, selected: bool, - linkProps: object.isRequired, + onClick: func, + linkProps: object, isDark: bool.isRequired, }; const TabNavHorizontal = props => { - const { className, rootClassName, tabRootClassName, tabs, skin, type } = props; + const { className, rootClassName, tabRootClassName, tabs, skin } = props; const isDark = skin === DARK_SKIN; - const isButton = type === TAB_TYPE_BUTTON; const classes = classNames(rootClassName || css.root, { [css.darkSkin]: isDark }, className); const tabClasses = tabRootClassName || css.tab; return ( ); }; -TabNavHorizontal.defaultProps = { +/** + * A tab navigation element with buttons. Requires onClick + * function param for tab objects passed as parameter. + */ +export const ButtonTabNavHorizontal = props => ; + +ButtonTabNavHorizontal.defaultProps = { className: null, rootClassName: null, tabRootClassName: null, tabClassName: null, skin: LIGHT_SKIN, - type: TAB_TYPE_LINK, }; -TabNavHorizontal.propTypes = { +ButtonTabNavHorizontal.propTypes = { className: string, rootClassName: string, tabRootClassName: string, - tabs: arrayOf(object).isRequired, + tabs: arrayOf( + shape({ + text: node.isRequired, + disbaled: bool, + selected: bool, + onClick: func.isRequired, + }) + ).isRequired, skin: oneOf([LIGHT_SKIN, DARK_SKIN]), - type: oneOf([TAB_TYPE_LINK, TAB_TYPE_BUTTON]), }; -export default TabNavHorizontal; +/** + * A tab navigation element with links. Requires linkProps + * object param for tab objects passed as parameter. + */ +export const LinkTabNavHorizontal = props => ; + +LinkTabNavHorizontal.defaultProps = { + className: null, + rootClassName: null, + tabRootClassName: null, + tabClassName: null, + skin: LIGHT_SKIN, +}; + +LinkTabNavHorizontal.propTypes = { + className: string, + rootClassName: string, + tabRootClassName: string, + tabs: arrayOf( + shape({ + text: node.isRequired, + disbaled: bool, + selected: bool, + linkProps: object.isRequired, + }) + ).isRequired, + skin: oneOf([LIGHT_SKIN, DARK_SKIN]), +}; diff --git a/src/components/UserNav/UserNav.js b/src/components/UserNav/UserNav.js index bf85da8d..890d84f3 100644 --- a/src/components/UserNav/UserNav.js +++ b/src/components/UserNav/UserNav.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { FormattedMessage } from 'react-intl'; import classNames from 'classnames'; import { ACCOUNT_SETTINGS_PAGES } from '../../routeConfiguration'; -import { TabNavHorizontal } from '../../components'; +import { LinkTabNavHorizontal } from '../../components'; import css from './UserNav.css'; @@ -38,7 +38,7 @@ const UserNav = props => { ]; return ( - + ); }; diff --git a/src/components/index.js b/src/components/index.js index e55a318b..95e6dc72 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -99,7 +99,7 @@ export { default as StripeBankAccountTokenInputField, } from './StripeBankAccountTokenInputField/StripeBankAccountTokenInputField'; export { default as TabNav } from './TabNav/TabNav'; -export { default as TabNavHorizontal } from './TabNavHorizontal/TabNavHorizontal'; +export { LinkTabNavHorizontal, ButtonTabNavHorizontal } from './TabNavHorizontal/TabNavHorizontal'; export { default as Tabs } from './Tabs/Tabs'; export { default as TermsOfService } from './TermsOfService/TermsOfService'; export { default as TextInputField } from './TextInputField/TextInputField'; diff --git a/src/containers/AuthenticationPage/AuthenticationPage.js b/src/containers/AuthenticationPage/AuthenticationPage.js index 1d6e7a76..d3c5c0b9 100644 --- a/src/containers/AuthenticationPage/AuthenticationPage.js +++ b/src/containers/AuthenticationPage/AuthenticationPage.js @@ -16,7 +16,7 @@ import { Page, NamedLink, NamedRedirect, - TabNavHorizontal, + LinkTabNavHorizontal, IconEmailSent, InlineTextButton, IconClose, @@ -131,7 +131,7 @@ export class AuthenticationPageComponent extends Component { const formContent = (
- + {loginOrSignupError} {isLogin ? ( diff --git a/src/containers/AuthenticationPage/__snapshots__/AuthenticationPage.test.js.snap b/src/containers/AuthenticationPage/__snapshots__/AuthenticationPage.test.js.snap index 81ce1d0a..53e44b5c 100644 --- a/src/containers/AuthenticationPage/__snapshots__/AuthenticationPage.test.js.snap +++ b/src/containers/AuthenticationPage/__snapshots__/AuthenticationPage.test.js.snap @@ -30,7 +30,7 @@ exports[`AuthenticationPageComponent matches snapshot 1`] = ` >
- - + {queryReviewsError ? reviewsError : null} diff --git a/src/containers/ProfilePage/__snapshots__/ProfilePage.test.js.snap b/src/containers/ProfilePage/__snapshots__/ProfilePage.test.js.snap index 18cc17f5..1ed5b00e 100644 --- a/src/containers/ProfilePage/__snapshots__/ProfilePage.test.js.snap +++ b/src/containers/ProfilePage/__snapshots__/ProfilePage.test.js.snap @@ -105,7 +105,7 @@ exports[`ProfilePage matches snapshot 1`] = ` />
-