From d62cf91e94c4791e9ee660044786a88a737ecda9 Mon Sep 17 00:00:00 2001
From: Misha Moroshko <michael.moroshko@gmail.com>
Date: Thu, 16 Jan 2020 14:38:35 +1100
Subject: [PATCH] Remove Grid from Section, added preset to Grid, and z-index
 to Header

---
 src/components/Grid.js                        | 20 ++++++-
 src/components/Header.js                      | 13 ++++-
 src/components/Section.js                     | 18 ++----
 src/themes/default/index.js                   |  3 +
 website/src/pages/components/section/index.js | 57 +++++++------------
 5 files changed, 58 insertions(+), 53 deletions(-)

diff --git a/src/components/Grid.js b/src/components/Grid.js
index bbc29937..285c047b 100644
--- a/src/components/Grid.js
+++ b/src/components/Grid.js
@@ -58,16 +58,31 @@ Item.propTypes = {
   children: PropTypes.node.isRequired
 };
 
+export const PRESETS = ["page"];
+
+const presetsMap = {
+  page: {
+    cols: 4,
+    "cols-sm": 8,
+    "cols-lg": 12,
+    colsGutter: "30px"
+  }
+};
+
 export const DEFAULT_GRID_PROPS = {
   debug: false
 };
 
 function Grid(_props) {
   const props = { ...DEFAULT_GRID_PROPS, ..._props };
-  const { debug, children } = props;
+  const { preset, debug, children } = props;
   const theme = useTheme();
   const [resizeListener, sizes] = useResizeAware();
-  const responsivePropsCSS = useResponsivePropsCSS(props, {
+  const parsedProps = {
+    ...presetsMap[preset],
+    ...props
+  };
+  const responsivePropsCSS = useResponsivePropsCSS(parsedProps, {
     cols: {
       getCSS: value => {
         return {
@@ -139,6 +154,7 @@ Grid.propTypes = {
     "rowsGutter",
     PropTypes.oneOfType([PropTypes.number, PropTypes.string])
   ),
+  preset: PropTypes.oneOf(PRESETS),
   debug: PropTypes.bool,
   children: PropTypes.node.isRequired
 };
diff --git a/src/components/Header.js b/src/components/Header.js
index a091705d..7ff80946 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -2,6 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import Container from "./Container";
 import Logo, { NAMES as LOGO_NAMES } from "./internal/Logo";
+import useTheme from "../hooks/useTheme";
 
 function HeaderLogo({ name }) {
   return (
@@ -14,8 +15,18 @@ HeaderLogo.propTypes = {
 };
 
 function Header({ children }) {
+  const theme = useTheme();
+
   return (
-    <header css={{ position: "fixed", top: 0, left: 0, right: 0 }}>
+    <header
+      css={{
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        zIndex: theme.zIndices.header
+      }}
+    >
       <Container bg="white" height="11" height-lg="14" boxShadow="header">
         <Container hasBreakpointWidth={true} height="100%">
           <div css={{ display: "flex", height: "100%", alignItems: "center" }}>
diff --git a/src/components/Section.js b/src/components/Section.js
index 33e669f5..5284e04d 100644
--- a/src/components/Section.js
+++ b/src/components/Section.js
@@ -1,28 +1,19 @@
 import React from "react";
 import PropTypes from "prop-types";
 import Container, { BACKGROUNDS as CONTAINER_BACKGROUNDS } from "./Container";
-import Grid from "./Grid";
+
 import { responsivePaddingType } from "../hooks/useResponsiveProp";
 import useAllResponsiveProps from "../hooks/useAllResponsiveProps";
 
 export const BACKGROUNDS = CONTAINER_BACKGROUNDS;
 
-export const DEFAULT_PROPS = {
-  debug: false
-};
-
-function Section(_props) {
-  const props = { ...DEFAULT_PROPS, ..._props };
-  const { bg, debug, children } = props;
+function Section(props) {
+  const { bg, children } = props;
   const paddingProps = useAllResponsiveProps(props, "padding");
 
   return (
     <Container bg={bg} {...paddingProps}>
-      <Container hasBreakpointWidth>
-        <Grid cols={4} cols-sm={8} cols-lg={12} colsGutter="30px" debug={debug}>
-          {children}
-        </Grid>
-      </Container>
+      <Container hasBreakpointWidth>{children}</Container>
     </Container>
   );
 }
@@ -30,7 +21,6 @@ function Section(_props) {
 Section.propTypes = {
   bg: PropTypes.oneOf(BACKGROUNDS),
   ...responsivePaddingType,
-  debug: PropTypes.bool,
   children: PropTypes.node
 };
 
diff --git a/src/themes/default/index.js b/src/themes/default/index.js
index d7a3113b..1a549741 100644
--- a/src/themes/default/index.js
+++ b/src/themes/default/index.js
@@ -36,5 +36,8 @@ export default {
     md: "720px",
     lg: "960px",
     xl: "1140px"
+  },
+  zIndices: {
+    header: 1000
   }
 };
diff --git a/website/src/pages/components/section/index.js b/website/src/pages/components/section/index.js
index def899ac..0b73e29e 100644
--- a/website/src/pages/components/section/index.js
+++ b/website/src/pages/components/section/index.js
@@ -1,9 +1,8 @@
 import React, { useState } from "react";
 import * as allDesignSystem from "basis";
-import { BACKGROUNDS, DEFAULT_PROPS } from "basis/components/Section";
+import { BACKGROUNDS } from "basis/components/Section";
 import RadioGroupSetting, {
-  getRadioOptions,
-  getCheckboxOptions
+  getRadioOptions
 } from "../../../components/RadioGroupSetting";
 import ComponentContainer from "../../../components/ComponentContainer";
 import { formatCode, nonDefaultProps } from "../../../utils/formatting";
@@ -14,44 +13,37 @@ const scope = allDesignSystem;
 const bgOptions = getRadioOptions(["", ...BACKGROUNDS], {
   emptyLabel: "No background"
 });
-const debugOptions = getCheckboxOptions();
 
 function SectionPage() {
   const [bg, setBg] = useState("grey.t05");
-  const [debug, setDebug] = useState(DEFAULT_PROPS.debug);
   const code = formatCode(`
     <Section ${nonDefaultProps([
       {
         prop: "bg",
-        value: bg,
-        defaultValue: DEFAULT_PROPS.bg
-      },
-      {
-        prop: "debug",
-        value: debug,
-        defaultValue: DEFAULT_PROPS.debug,
-        type: "boolean"
+        value: bg
       }
     ])}
     >
-      <Grid.Item colSpan="0-1" colSpan-sm="0-2" colSpan-lg="0-4">
-        <Container bg="secondary.lightBlue.t30" margin="5 0 0 0" padding="5">
-          <Container bg="white" padding="6">
-            <Text>Some content goes here.</Text>
+      <Grid preset="page">
+        <Grid.Item colSpan="0-1" colSpan-sm="0-2" colSpan-lg="0-4">
+          <Container bg="secondary.lightBlue.t30" margin="5 0 0 0" padding="5">
+            <Container bg="white" padding="6">
+              <Text>Some content goes here.</Text>
+            </Container>
           </Container>
-        </Container>
-      </Grid.Item>
-      <Grid.Item colSpan="2-3" colSpan-sm="3-7" colSpan-lg="5-11">
-        <Container bg="secondary.lightBlue.t30" padding="5" margin="10 0 7 0">
-          <Container bg="white" padding="6">
-            <Text>
-              More content<br />
-              that spans multiple lines<br />
-              goes here.
-            </Text>
+        </Grid.Item>
+        <Grid.Item colSpan="2-3" colSpan-sm="3-7" colSpan-lg="5-11">
+          <Container bg="secondary.lightBlue.t30" padding="5" margin="10 0 7 0">
+            <Container bg="white" padding="6">
+              <Text>
+                More content<br />
+                that spans multiple lines<br />
+                goes here.
+              </Text>
+            </Container>
           </Container>
-        </Container>
-      </Grid.Item>
+        </Grid.Item>
+      </Grid>
     </Section>
   `);
 
@@ -70,13 +62,6 @@ function SectionPage() {
           selectedValue={bg}
           setSelectedValue={setBg}
         />
-        <RadioGroupSetting
-          heading="Debug"
-          options={debugOptions}
-          selectedValue={debug}
-          setSelectedValue={setDebug}
-          type="boolean"
-        />
       </div>
       <ComponentContainer
         code={code}