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.tsx64
1 files changed, 64 insertions, 0 deletions
diff --git a/packages/dev-tools-pages/ts/components/tabs.tsx b/packages/dev-tools-pages/ts/components/tabs.tsx
new file mode 100644
index 000000000..1d26f2777
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/tabs.tsx
@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { Tab, TabList, TabPanel, Tabs as ReactTabs } from 'react-tabs';
+import styled from 'styled-components';
+
+import { colors } from 'ts/variables';
+
+import { Breakout } from './breakout';
+
+const StyledTabList = styled(TabList)`
+ text-transform: uppercase;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+`;
+
+const StyledTab = styled(Tab)`
+ background-color: ${props => props.theme.colors.secondary};
+ 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;
+ }
+
+ &[aria-selected='true'] {
+ background-color: ${colors.gray};
+ }
+
+ &[aria-selected='false']:focus,
+ &[aria-selected='false']:hover {
+ background-color: ${props => props.theme.colors.secondary_alt};
+ cursor: pointer;
+ }
+`;
+
+const Tabs: React.StatelessComponent<{}> = props => (
+ <Breakout>
+ <ReactTabs>
+ <StyledTabList>
+ {React.Children.map(props.children, child => {
+ const { title } = React.cloneElement(child as React.ReactElement<any>).props;
+ return <StyledTab>{title}</StyledTab>;
+ })}
+ </StyledTabList>
+
+ {React.Children.map(props.children, child => <TabPanel>{child}</TabPanel>)}
+ </ReactTabs>
+ </Breakout>
+);
+
+interface TabBlockProps {
+ title: string;
+}
+
+const TabBlock: React.StatelessComponent<TabBlockProps> = props => <React.Fragment>{props.children}</React.Fragment>;
+
+const ContextTabs = Tabs;
+
+export { ContextTabs as Tabs, TabBlock };