aboutsummaryrefslogtreecommitdiffstats
path: root/packages/dev-tools-pages/ts/components/Tabs.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/dev-tools-pages/ts/components/Tabs.tsx')
-rw-r--r--packages/dev-tools-pages/ts/components/Tabs.tsx97
1 files changed, 48 insertions, 49 deletions
diff --git a/packages/dev-tools-pages/ts/components/Tabs.tsx b/packages/dev-tools-pages/ts/components/Tabs.tsx
index 64f87bea3..5307483e8 100644
--- a/packages/dev-tools-pages/ts/components/Tabs.tsx
+++ b/packages/dev-tools-pages/ts/components/Tabs.tsx
@@ -1,37 +1,40 @@
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};
}
@@ -41,41 +44,37 @@ const Root = styled.div<{primaryColor: string;}>`
`;
interface TabsProps extends Props {
- children: React.ReactNode;
+ children: React.ReactNode;
}
function Tabs(props: TabsProps) {
- return (
- <Root primaryColor={props.colors.secondary}>
- <ReactTabs>
- <StyledTabList>
- { React.Children.map(props.children, child => {
- const {props} = React.cloneElement(child as React.ReactElement<any>);
- return <StyledTab>{props.title}</StyledTab>
- }) }
- </StyledTabList>
+ return (
+ <Breakout>
+ <Root primaryColor={props.colors.secondary}>
+ <ReactTabs>
+ <StyledTabList>
+ {React.Children.map(props.children, child => {
+ const { props } = React.cloneElement(child as React.ReactElement<any>);
+ return <StyledTab>{props.title}</StyledTab>;
+ })}
+ </StyledTabList>
- { React.Children.map(props.children, child => (
- <TabPanel>{child}</TabPanel>
- )) }
- </ReactTabs>
- </Root>
- )
+ {React.Children.map(props.children, child => <TabPanel>{child}</TabPanel>)}
+ </ReactTabs>
+ </Root>
+ </Breakout>
+ );
}
interface TabBlockProps {
- title: string;
- children: React.ReactNode;
+ title: string;
+ children: React.ReactNode;
}
function TabBlock(props: TabBlockProps) {
- return (
- <React.Fragment>
- {props.children}
- </React.Fragment>
- )
+ return <React.Fragment>{props.children}</React.Fragment>;
}
const ContextTabs = withContext(Tabs);
-export {ContextTabs as Tabs, TabBlock}; \ No newline at end of file
+export { ContextTabs as Tabs, TabBlock };