feat(graphiql-theming): Toolbar component (#1203) by @walaura

* separate dividers for the toolbar * add toolbar * add layout to stories Authored-by @walaura
graphql · Jan 17, 2020 · adb73f5 · adb73f5
1 parent 9e18ad5
commit adb73f5
Show file tree

Hide file tree

Showing 14 changed files with 1,157 additions and 249 deletions.
diff --git a/packages/graphiql/.storybook/decorators.js b/packages/graphiql/.storybook/decorators.js
@@ -0,0 +1,9 @@
+import React from 'react';
+
+const styles = {
+  maxWidth: '60em',
+  margin: '5em auto',
+  border: '1px solid #eee',
+};
+
+export const layout = storyFn => <div style={styles}>{storyFn()}</div>;
diff --git a/packages/graphiql/src/new-components/Layout.stories.js b/packages/graphiql/src/new-components/Layout.stories.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import Nav from './Nav';
-import List, { ListRow } from './List';
+import List, { ListRow } from './List/List';
 import { useThemeLayout } from './themes/provider';
 
 const explorer = {

diff --git a/packages/graphiql/src/new-components/List.js → .../graphiql/src/new-components/List/List.js b/packages/graphiql/src/new-components/List.js → .../graphiql/src/new-components/List/List.js
@@ -1,14 +1,14 @@
 /** @jsx jsx */
 import { jsx } from 'theme-ui';
-
 import PropTypes from 'prop-types';
 
-const ListRow = ({ children, flex = false, padding = true }) => (
+const ListRow = ({ children, flex = false, padding = false }) => (
   <div
     sx={{
       overflow: 'auto',
       flex: flex && '1 1 auto',
-      padding: padding && 3,
+      padding: padding ? ({ spaces }) => spaces.rowPadding : undefined,
+      minHeight: ({ spaces }) => spaces.rowMinHeight,
     }}>
     {children}
   </div>

diff --git a/...aphiql/src/new-components/List.stories.js → ...l/src/new-components/List/List.stories.js b/...aphiql/src/new-components/List.stories.js → ...l/src/new-components/List/List.stories.js
@@ -11,12 +11,14 @@ const longText = Array(300)
 export const withFlexChild = () => (
   <div style={{ height: '100vh', display: 'grid' }}>
     <List>
-      <ListRow>
-        {
-          'Lists are a vertical stack of components and form the basis of most modules. This one is very long'
-        }
+      <ListRow padding>
+        <div>
+          {
+            'Lists are a vertical stack of components and form the basis of most modules. This one is very long'
+          }
+        </div>
       </ListRow>
-      <ListRow flex>
+      <ListRow padding flex>
         {'You normally want 1 flex area that grows forever like this one'}
         {longText}
         {'the end'}
@@ -28,17 +30,17 @@ export const withFlexChild = () => (
 export const withStackedRows = () => (
   <div style={{ height: '100vh', display: 'grid' }}>
     <List>
-      <ListRow>{'Title'}</ListRow>
-      <ListRow>{'Navigation'}</ListRow>
-      <ListRow>{'Search'}</ListRow>
-      <ListRow>{'Filter'}</ListRow>
-      <ListRow flex>
+      <ListRow padding>{'Title'}</ListRow>
+      <ListRow padding>{'Navigation'}</ListRow>
+      <ListRow padding>{'Search'}</ListRow>
+      <ListRow padding>{'Filter'}</ListRow>
+      <ListRow padding flex>
         {'Actual content'}
         {longText}
         {'Actual content ends here'}
       </ListRow>
-      <ListRow>{'Footer'}</ListRow>
-      <ListRow>{'Footers footer'}</ListRow>
+      <ListRow padding>{'Footer'}</ListRow>
+      <ListRow padding>{'Footers footer'}</ListRow>
     </List>
   </div>
 );
diff --git a/packages/graphiql/src/new-components/Tabs.js b/packages/graphiql/src/new-components/Tabs.js
diff --git a/packages/graphiql/src/new-components/Toolbar/Content.js b/packages/graphiql/src/new-components/Toolbar/Content.js
@@ -0,0 +1,13 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui';
+
+const Content = ({ ...props }) => (
+  <div
+    {...props}
+    sx={{
+      padding: ({ spaces }) => spaces.rowPadding,
+    }}
+  />
+);
+
+export default Content;
diff --git a/packages/graphiql/src/new-components/Toolbar/Tabs.js b/packages/graphiql/src/new-components/Toolbar/Tabs.js
@@ -0,0 +1,48 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui';
+import PropTypes from 'prop-types';
+import WithDividers from './support/WithDividers';
+
+const Tab = ({ active, ...props }) => (
+  <button
+    sx={{
+      padding: ({ spaces }) => spaces.rowPadding,
+      outline: 'none',
+      textAlign: 'end',
+      verticalAlign: 'baseline',
+      transition: ({ transitions }) => transitions[0],
+      cursor: 'pointer',
+      ':focus, :hover': {
+        boxShadow: active ? 'primaryUnderline' : 'underline',
+        color: active ? 'primary' : 'darkText',
+      },
+      boxShadow: active ? 'primaryUnderline' : 'inset 0 0 0 transparent',
+      color: active ? 'primary' : 'text',
+    }}
+    {...props}
+  />
+);
+Tab.propTypes = { active: PropTypes.bool };
+
+const Tabs = ({ tabs, active, onChange }) => {
+  return (
+    <WithDividers>
+      {tabs.map((tab, index) => (
+        <Tab
+          key={index}
+          active={active === index}
+          onClick={() => onChange(index)}>
+          {tab}
+        </Tab>
+      ))}
+    </WithDividers>
+  );
+};
+
+Tabs.propTypes = {
+  tabs: PropTypes.arrayOf(PropTypes.node).isRequired,
+  active: PropTypes.number.isRequired,
+  onChange: PropTypes.func.isRequired,
+};
+
+export default Tabs;
diff --git a/...aphiql/src/new-components/Tabs.stories.js → ...rc/new-components/Toolbar/Tabs.stories.js b/...aphiql/src/new-components/Tabs.stories.js → ...rc/new-components/Toolbar/Tabs.stories.js
@@ -1,21 +1,22 @@
-import List, { ListRow } from './List';
+import List, { ListRow } from '../List/List';
 import Tabs from './Tabs';
 import React, { useState } from 'react';
+import { layout } from '../../../.storybook/decorators';
 
-export default { title: 'Tabs' };
+export default { title: 'Tabbar', decorators: [layout] };
 
 // eslint-disable-next-line react/prop-types
 const ManagedTabs = ({ tabs }) => {
-  const [active, setActive] = useState(1);
+  const [active, setActive] = useState(0);
   return <Tabs active={active} tabs={tabs} onChange={setActive} />;
 };
 
 export const Tabbar = () => (
   <List>
-    <ListRow padding={false}>
-      <ManagedTabs tabs={['First', 'Second', 'Third']} />
+    <ListRow>
+      <ManagedTabs tabs={['One', 'Two', 'Three']} />
     </ListRow>
-    <ListRow padding={false}>
+    <ListRow>
       <ManagedTabs
         tabs={[
           'With',
@@ -28,8 +29,8 @@ export const Tabbar = () => (
         ]}
       />
     </ListRow>
-    <ListRow padding={false}>
-      <div style={{ height: 100 }}>
+    <ListRow flex>
+      <div style={{ height: '100px', display: 'grid' }}>
         <ManagedTabs tabs={['Very tall', 'tabs']} />
       </div>
     </ListRow>

diff --git a/packages/graphiql/src/new-components/Toolbar/Toolbar.js b/packages/graphiql/src/new-components/Toolbar/Toolbar.js
@@ -0,0 +1,34 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui';
+import PropTypes from 'prop-types';
+import WithDividers from './support/WithDividers';
+
+const Toolbar = ({ children, justifyContent = 'space-between' }) => {
+  const needsExtraPadding = !justifyContent.includes('space');
+  return (
+    <div
+      sx={{
+        overflow: 'auto',
+        display: 'flex',
+        alignItems: 'stretch',
+        justifyContent,
+      }}>
+      {needsExtraPadding ? (
+        <WithDividers padding>{children}</WithDividers>
+      ) : (
+        children
+      )}
+    </div>
+  );
+};
+Toolbar.propTypes = {
+  justifyContent: PropTypes.oneOf([
+    'space-between',
+    'space-around',
+    'flex-start',
+    'flex-end',
+    'center',
+  ]),
+};
+
+export default Toolbar;
diff --git a/packages/graphiql/src/new-components/Toolbar/Toolbar.stories.js b/packages/graphiql/src/new-components/Toolbar/Toolbar.stories.js
@@ -0,0 +1,80 @@
+import List, { ListRow } from '../List/List';
+import Tabs from './Tabs';
+import React from 'react';
+import Toolbar from './Toolbar';
+import Content from './Content';
+import { layout } from '../../../.storybook/decorators';
+
+export default { title: 'Toolbar', decorators: [layout] };
+
+export const Basic = () => (
+  <List>
+    <ListRow padding>
+      <p>{`Toolbars group together widgets in a flexbox. You can cutomize what type of
+      justification to use and if elements go together it'll add dividers
+      between them`}</p>
+    </ListRow>
+    <ListRow>
+      <Toolbar justifyContent="center">
+        <Content>{'Some text'}</Content>
+        <Content>{'Some text'}</Content>
+        <Content>{'Some text'}</Content>
+      </Toolbar>
+    </ListRow>
+    <ListRow>
+      <Toolbar justifyContent="flex-start">
+        <Content>{'Some text'}</Content>
+        <Content>{'Some text'}</Content>
+        <Content>{'Some text'}</Content>
+      </Toolbar>
+    </ListRow>
+    <ListRow>
+      <Toolbar justifyContent="flex-end">
+        <Content>{'Some text'}</Content>
+        <Content>{'Some text'}</Content>
+        <Content>{'Some text'}</Content>
+      </Toolbar>
+    </ListRow>
+    <ListRow>
+      <Toolbar justifyContent="space-between">
+        <Content>{'Some text'}</Content>
+        <Content>{'Some text'}</Content>
+        <Content>{'Some text'}</Content>
+      </Toolbar>
+    </ListRow>
+  </List>
+);
+
+export const ToolbarWithTabs = () => (
+  <List>
+    <ListRow padding>
+      <p>
+        {`The dividers don't nest so if you have tabs inside a toolbar the tabs won't get dividers`}
+      </p>
+    </ListRow>
+    <ListRow>
+      <Toolbar justifyContent="center">
+        <Tabs active={2} tabs={['First', 'Second', 'Third']} />
+        <Tabs active={2} tabs={['First', 'Second', 'Third']} />
+      </Toolbar>
+    </ListRow>
+    <ListRow>
+      <Toolbar justifyContent="flex-start">
+        <Tabs active={2} tabs={['First', 'Second', 'Third']} />
+        <Tabs active={2} tabs={['First', 'Second', 'Third']} />
+      </Toolbar>
+    </ListRow>
+    <ListRow>
+      <Toolbar justifyContent="flex-end">
+        <Tabs active={2} tabs={['First', 'Second', 'Third']} />
+        <Tabs active={2} tabs={['First', 'Second', 'Third']} />
+      </Toolbar>
+    </ListRow>
+    <ListRow>
+      <Toolbar justifyContent="space-between">
+        <Tabs active={2} tabs={['First', 'Second', 'Third']} />
+        <Tabs active={2} tabs={['First', 'Second', 'Third']} />
+      </Toolbar>
+    </ListRow>
+  </List>
+);