From 68c18181395986035a5c8e1ff2a83926f34fac60 Mon Sep 17 00:00:00 2001 From: August Skare Date: Mon, 22 Oct 2018 09:20:54 +0200 Subject: breakout container for small screens --- .../dev-tools-pages/ts/components/Breakout.tsx | 12 +++ packages/dev-tools-pages/ts/components/Code.tsx | 2 +- packages/dev-tools-pages/ts/components/Tabs.tsx | 98 +++++++++++----------- 3 files changed, 62 insertions(+), 50 deletions(-) create mode 100644 packages/dev-tools-pages/ts/components/Breakout.tsx (limited to 'packages/dev-tools-pages') diff --git a/packages/dev-tools-pages/ts/components/Breakout.tsx b/packages/dev-tools-pages/ts/components/Breakout.tsx new file mode 100644 index 000000000..fb76c8c29 --- /dev/null +++ b/packages/dev-tools-pages/ts/components/Breakout.tsx @@ -0,0 +1,12 @@ +import styled from 'styled-components'; + +import { media } from 'ts/variables'; + +const Breakout = styled.div` + ${media.small` + margin-left: -30px; + width: calc(100% + 60px); + `}; +`; + +export default Breakout; diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx index 31ab421be..02bd0382e 100644 --- a/packages/dev-tools-pages/ts/components/Code.tsx +++ b/packages/dev-tools-pages/ts/components/Code.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import styled from 'styled-components'; -import { colors } from '../variables'; +import { colors } from 'ts/variables'; import BaseButton from './Button'; interface CodeProps { diff --git a/packages/dev-tools-pages/ts/components/Tabs.tsx b/packages/dev-tools-pages/ts/components/Tabs.tsx index 64f87bea3..b51970a7e 100644 --- a/packages/dev-tools-pages/ts/components/Tabs.tsx +++ b/packages/dev-tools-pages/ts/components/Tabs.tsx @@ -1,81 +1,81 @@ import * as React from 'react'; import styled from 'styled-components'; -import { colors } from '../variables'; -import { Tabs as ReactTabs, Tab, TabList, TabPanel } from 'react-tabs' - -import {withContext, Props} from './withContext'; +import { colors } from 'ts/variables'; +import { Tabs as ReactTabs, Tab, TabList, TabPanel } from 'react-tabs'; +import Breakout from './Breakout'; +import { withContext, Props } from './withContext'; const StyledTabList = styled(TabList)` - text-transform: uppercase; - list-style: none; - margin: 0; - padding: 0; - overflow: hidden; + text-transform: uppercase; + list-style: none; + margin: 0; + padding: 0; + overflow: hidden; `; const StyledTab = styled(Tab)` - height: 2.5rem; - padding-left: 1rem; - padding-right: 1rem; - display: flex; - justify-content: space-around; - align-items: center; - float: left; - &:not(:first-of-type) { - margin-left: .25rem; - } - &:focus, &:hover { - color: red; - outline: 0; - } + height: 2.5rem; + padding-left: 1rem; + padding-right: 1rem; + display: flex; + justify-content: space-around; + align-items: center; + float: left; + &:not(:first-of-type) { + margin-left: 0.25rem; + } + &:focus, + &:hover { + color: red; + outline: 0; + } `; -const Root = styled.div<{primaryColor: string;}>` +const Root = + styled.div < + { primaryColor: string } > + ` ${StyledTab} { background-color: ${props => props.primaryColor}; } ${StyledTab}[aria-selected="true"] { background-color: ${colors.gray}; - } + } `; interface TabsProps extends Props { - children: React.ReactNode; + children: React.ReactNode; } function Tabs(props: TabsProps) { - return ( - - - - { React.Children.map(props.children, child => { - const {props} = React.cloneElement(child as React.ReactElement); - return {props.title} - }) } - + return ( + + + + + {React.Children.map(props.children, child => { + const { props } = React.cloneElement(child as React.ReactElement); + return {props.title}; + })} + - { React.Children.map(props.children, child => ( - {child} - )) } - - - ) + {React.Children.map(props.children, child => {child})} + + + + ); } interface TabBlockProps { - title: string; - children: React.ReactNode; + title: string; + children: React.ReactNode; } function TabBlock(props: TabBlockProps) { - return ( - - {props.children} - - ) + return {props.children}; } const ContextTabs = withContext(Tabs); -export {ContextTabs as Tabs, TabBlock}; \ No newline at end of file +export { ContextTabs as Tabs, TabBlock }; -- cgit v1.2.3