Fix tera breakpoint in <Grid /> (#305)

* Add > 1280px handling in Grid

* Fix snapshot

Author: elanoism

src/components/Grid/Grid.js

@@ -24,7 +24,7 @@ const baseStyles = ({ theme }) => css`
   ${getBreakPointStyles(theme, 'kilo')};
   ${getBreakPointStyles(theme, 'mega')};
   ${getBreakPointStyles(theme, 'giga')};
-  ${getBreakPointStyles(theme, 'tera')};
+  ${getBreakPointStyles(theme, 'afterTera')};
 `;
 
 /**

src/components/Grid/__snapshots__/Grid.spec.js.snap

@@ -38,6 +38,14 @@ exports[`Grid should render with default styles 1`] = `
   }
 }
 
+@media (min-width:1280px) {
+  .circuit-0 {
+    max-width: 1200px;
+    padding-left: calc(24px / 2);
+    padding-right: calc(24px / 2);
+  }
+}
+
 <div
   className="circuit-0 circuit-1"
 />

src/themes/circuit.js

@@ -205,6 +205,13 @@ export const grid = {
     cols: 12,
     maxWidth: '880px',
     gutter: spacings.giga
+  },
+  afterTera: {
+    priority: 5,
+    breakpoint: 'tera',
+    cols: 12,
+    maxWidth: '1200px',
+    gutter: spacings.giga
   }
 };
 
@@ -217,7 +224,8 @@ export const breakpoints = {
   megaToGiga: '(min-width: 768px) and (max-width: 959px)',
   giga: 960,
   gigaToTera: '(min-width: 960px) and (max-width: 1279px)',
-  tera: 1280
+  tera: 1280,
+  afterTera: '(min-width: 1280px)'
 };
 
 export const mq = createMediaQueries(breakpoints);