wip

Author: walaura

packages/graphiql/src/new-components/Layout.js

@@ -3,9 +3,10 @@ import { jsx } from 'theme-ui';
 
 import PropTypes from 'prop-types';
 
+const Widget = ({ children }) => <div sx={{ padding: 2 }}>{children}</div>
+
 const Container = ({ children, mini = false }) => <div sx={
   {
-    padding: 2,
     backgroundColor: !mini && 'cardBackground',
     boxShadow: !mini && (theme => `0 0 0 .1px ${theme.colors.border}, 0 1px 4px 0 ${theme.colors.border}`)
   }}>
@@ -16,22 +17,22 @@ Container.propTypes = {
   mini: PropTypes.bool
 }
 
-const Layout = ({ nav = <marquee>{'Helloooo'}</marquee> }) => {
+const Layout = ({ nav = 'nav' }) => {
   return (
     <main
       sx={{
         display: 'grid',
         gap: 2,
-        backgroundColor: 'background',
         padding: 2,
         gridAutoFlow: 'column',
         gridTemplateColumns: '6em',
-        gridAutoColumns: '1fr',
-        minHeight: '100%'
+        gridAutoColumns: 'minmax(30em, 1fr)',
+        minHeight: '100vh',
       }}>
       <Container mini>{nav}</Container>
-      <Container>{'container'}</Container>
-      <Container>{'container'}</Container>
+      <Container><Widget>{'container'}</Widget></Container>
+      <Container><Widget>{'container'}</Widget></Container>
+      <Container><Widget>{'container'}</Widget></Container>
     </main>
   );
 };

packages/graphiql/src/new-components/Layout.stories.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import Layout from './Layout';
+import Nav from './Nav';
 
 export default { title: 'Layout' };
 
 export const withDefaultSlots = () => <Layout />;
 
-export const withCustomSlots = () => <Layout nav={<nav>{'hi'}</nav>} />;
+export const withCustomSlots = () => <Layout nav={<Nav />} />;

packages/graphiql/src/new-components/Nav.js

@@ -0,0 +1,38 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui';
+
+const Item = ({ children }) => <button sx={
+    {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        cursor: 'pointer',
+        transition: '.2s',
+        ':hover': {
+            transform: 'scale(1.1)'
+        },
+        ':active': {
+            transform: 'scale(.95)'
+        }
+    }}>
+    {children}
+</button>
+
+
+const Nav = () => {
+    return (
+        <nav
+            sx={{
+                display: 'grid',
+                gridAutoFlow: 'row',
+                gridAutoRows: '2em',
+                fontSize: '3em'
+            }}>
+            <Item>{'🐽'}</Item>
+            <Item>{'👨‍🌾'}</Item>
+            <Item>{'🐝'}</Item>
+        </nav>
+    );
+};
+
+export default Nav;

packages/graphiql/src/new-components/theme.js

@@ -18,13 +18,14 @@ export default {
 };
 
 export const Reset = () => <Global styles={theme => ({
-  body: {
+  '*': {
     margin: '0',
-    fontFamily: theme.fonts.body,
-    color: theme.colors.text
+    boxSizing: 'border-box'
   },
-  'h1, h2, h3, h4, h5, h6': {
-    margin: 0,
+  body: {
+    fontFamily: theme.fonts.body,
+    color: theme.colors.text,
+    backgroundColor: theme.colors.background,
   },
   small: {
     fontSize: '100%',