diff --git a/frontend/src/components/article/index.js b/frontend/src/components/article/index.js index c0562963..424fd63a 100644 --- a/frontend/src/components/article/index.js +++ b/frontend/src/components/article/index.js @@ -1,9 +1,11 @@ import styled from 'styled-components'; -import { breakpoints } from '@ui/shared/constants'; +import { breakpoints, colors } from '@ui/shared/constants'; +import { remcalc } from '@ui/shared/functions'; // Main Contonent Wrapper Styles export default styled.article` padding: 2rem; + border-top: ${remcalc(1)} solid ${colors.base.grey}; ${breakpoints.large` padding: 0; diff --git a/frontend/src/components/breadcrumb/index.js b/frontend/src/components/breadcrumb/index.js index 9cb0838d..ed4ec978 100644 --- a/frontend/src/components/breadcrumb/index.js +++ b/frontend/src/components/breadcrumb/index.js @@ -15,6 +15,7 @@ import { colors } from '@ui/shared/constants'; const StyledDiv = styled.div` border-bottom: solid ${remcalc(1)} ${colors.base.grey}; padding: ${unitcalc(4.5)} 0 ${unitcalc(4.5)} 0; + margin-bottom: ${remcalc(18)}; `; const BreadcrumbA = styled(NavLink)` diff --git a/frontend/src/components/navigation/org.js b/frontend/src/components/navigation/org.js index fa7d64c8..b6b18095 100644 --- a/frontend/src/components/navigation/org.js +++ b/frontend/src/components/navigation/org.js @@ -8,12 +8,12 @@ import NavLink from '@ui/components/nav-link'; import { colors } from '@ui/shared/constants'; import PropTypes from '@root/prop-types'; import { orgsSelector } from '@state/selectors'; -import Ul from '@ui/components/horizontal-list/ul'; import { remcalc } from '@ui/shared/functions'; +import Tabs, { Tab } from '@ui/components/tabs'; + const StyledNav = styled.div` background-color: #f2f2f2; - border-bottom: ${remcalc(1)} solid ${colors.base.grey}; & ul { height: ${remcalc(60)}; @@ -21,18 +21,17 @@ const StyledNav = styled.div` } `; -// TODO: refactor colours into constants in UI const NavigationLinkContainer = styled.div` position: relative; - padding: ${remcalc(11)} ${remcalc(12)} ${remcalc(12)}; - color: ${colors.base.secondaryDark}; - border: ${remcalc(1)} solid ${colors.base.grey}; + color: ${colors.base.grey}; height: ${remcalc(24)}; - background-color: #f2f2f2; + padding: ${remcalc(14)}; + + border: ${remcalc(1)} solid ${colors.base.grey}; + border-bottom-width: 0; &.active { background-color: ${colors.base.background}; - border-bottom: solid ${remcalc(1)} ${colors.base.grey}; } `; @@ -47,31 +46,16 @@ const OrgAvatar = styled(Avatar)` const OrgName = styled.span` margin-left: ${remcalc(12)}; margin-top: ${remcalc(3)}; + color: ${colors.base.text} `; -const NavLi = styled.li` +const NavLi = styled(NavLink)` display: inline-block; - padding-top: ${remcalc(12)}; - padding-left: ${remcalc(3)}; - - & a { - text-decoration: none; - } + text-decoration: none; `; -const Shadow = styled.div` - z-index: 1; - position: absolute; - height: ${remcalc(5)}; - width: 100%; - left: 0; - bottom: 0; - background-image: - linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.06)); -`; - -const StyledUL = styled(Ul)` - padding: 0; +const StyledTabs = styled(Tabs)` + padding-top: ${remcalc(12)} `; const OrgNavigation = ({ @@ -83,37 +67,37 @@ const OrgNavigation = ({ image }) => { const to = `/${id}`; + const content = () => ( + {({ + isActive + }) => + + + + + + {name} + + + } + ); return ( - - {({ - isActive - }) => - - { !isActive && } - - - - - {name} - - - } - + ); }); return ( - + {navLinks} - + ); diff --git a/ui/src/components/tabs/index.js b/ui/src/components/tabs/index.js new file mode 100644 index 00000000..e3001fdf --- /dev/null +++ b/ui/src/components/tabs/index.js @@ -0,0 +1,56 @@ +import styled from 'styled-components'; +import { rndId } from '../../shared/functions'; +import { Baseline } from '../../shared/composers'; +import React from 'react'; +import Tab from './tab'; + +const StyledTabs = styled.div` + font-size: 0; + &::after { + clear: both; + content: ""; + display: table; + } +`; + +const Tabs = ({ + className, + children, // array of + id = rndId(), + name = '', + style +}) => { + const _children = React.Children.map(children, (child, i) => { + return React.cloneElement(child, { + defaultChecked: i === 0, + name + }); + }); + + return ( + + {_children} + + ); +}; + +Tabs.propTypes = { + children: React.PropTypes.node, + className: React.PropTypes.string, + id: React.PropTypes.string, + name: React.PropTypes.string.isRequired, + style: React.PropTypes.object +}; + +export default Baseline( + Tabs +); + +export { + Tab +}; diff --git a/ui/src/components/tabs/story.js b/ui/src/components/tabs/story.js new file mode 100644 index 00000000..181b2640 --- /dev/null +++ b/ui/src/components/tabs/story.js @@ -0,0 +1,16 @@ +import { storiesOf } from '@kadira/storybook'; +import React from 'react'; +import Tabs from './'; +import Tab from './tab'; + +storiesOf('Tabs', module) + .add('Default', () => ( + + +

Containers

+
+ +

User

+
+
+ )); diff --git a/ui/src/components/tabs/tab/index.js b/ui/src/components/tabs/tab/index.js new file mode 100644 index 00000000..10c7aef1 --- /dev/null +++ b/ui/src/components/tabs/tab/index.js @@ -0,0 +1,118 @@ +import styled from 'styled-components'; +import { Baseline } from '../../../shared/composers'; +import { boxes, colors } from '../../../shared/constants'; +import { remcalc, rndId } from '../../../shared/functions'; +import React from 'react'; + +const classNames = { + label: rndId(), + panel: rndId() +}; + +const StyledTab = styled.div` + display: inline; +`; + +const StyledRadio = styled.input` + clip: rect(0 0 0 0); + height: ${remcalc(1)}; + opacity: 0; + width: ${remcalc(1)}; + + &:checked { + & + .${classNames.label} { + border-bottom-width: 0; + box-shadow: none; + } + + & ~ .${classNames.panel} { + display: inline; + } + } +`; + +const StyledLabel = styled.label` + background: transparent; + display: inline-block; + font-size: ${remcalc(20)}; + margin: 0 0.5rem 0 0; + vertical-align: bottom; + box-shadow: inset ${remcalc(2)} -6px 10px 0px rgba(0,0,0,0.06); +`; + +const StyledPanel = styled.div` + display: inline-block; + height: 0; + overflow: hidden; + position: relative; + width: 0; +`; + +const StyledContent = styled.div` + background: ${colors.inactive.default}; + border: ${boxes.border.unchecked}; + box-sizing: border-box; + box-shadow: 0 ${remcalc(-1)} ${remcalc(26)} 0 rgba(0, 0, 0, 0.2); + display: block; + float: left; + font-size: ${remcalc(16)}; + margin-top: ${remcalc(-9)}; + padding: ${remcalc(20)} ${remcalc(25)}; + width: 100%; +`; + +const Tab = ({ + className, + children, + checked, + defaultChecked = false, + disabled = false, + id, + name, + title = '', + style +}) => { + const tabId = rndId(); + + return ( + + + + {title} + + {children ? ( + + + {children} + + + ) : null} + + ); +}; + +Tab.propTypes = { + checked: React.PropTypes.bool, + children: React.PropTypes.node, + className: React.PropTypes.string, + defaultChecked: React.PropTypes.bool, + disabled: React.PropTypes.bool, + id: React.PropTypes.string, + name: React.PropTypes.string, + style: React.PropTypes.object, + title: React.PropTypes.string +}; + +export default Baseline( + Tab +);