aboutsummaryrefslogtreecommitdiffstats
path: root/packages/dev-tools-pages/ts
diff options
context:
space:
mode:
Diffstat (limited to 'packages/dev-tools-pages/ts')
-rw-r--r--packages/dev-tools-pages/ts/components/Breakout.tsx12
-rw-r--r--packages/dev-tools-pages/ts/components/Code.tsx2
-rw-r--r--packages/dev-tools-pages/ts/components/Tabs.tsx98
3 files changed, 62 insertions, 50 deletions
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 (
- <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 };