fix(Gird): Change breakpoints and media queries update affected compo…

…nents
ticketmaster · Aug 13, 2018 · e9fe2a7 · e9fe2a7
1 parent ba7e29c
commit e9fe2a7
Show file tree

Hide file tree

Showing 25 changed files with 903 additions and 885 deletions.
diff --git a/src/components/Backdrop/__tests__/__snapshots__/index.spec.js.snap b/src/components/Backdrop/__tests__/__snapshots__/index.spec.js.snap
@@ -21,7 +21,7 @@ exports[`<Backdrop /> calls the onKeyPress function on pressing the ESC key 1`]
     role="dialog"
   >
     <div
-      class="sc-jTzLTM leZhon sc-htpNat cXQsRx"
+      class="sc-jTzLTM leZhon sc-htpNat hoaOKb"
     >
       <button
         aria-label="Close BottomSheet"
@@ -64,7 +64,7 @@ exports[`<Backdrop /> renders Backdrop correctly 1`] = `
     role="dialog"
   >
     <div
-      class="sc-jTzLTM leZhon sc-htpNat cXQsRx"
+      class="sc-jTzLTM leZhon sc-htpNat hoaOKb"
     >
       <button
         aria-label="Close BottomSheet"

diff --git a/src/components/BottomSheet/__tests__/__snapshots__/index.spec.js.snap b/src/components/BottomSheet/__tests__/__snapshots__/index.spec.js.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<BottomSheet /> removes the BottomSheet on clicking cancel 1`] = `"<div class=\\"sc-gqjmRU eqneQK\\" role=\\"dialog\\" aria-modal=\\"true\\"><div class=\\"sc-VigVT iUSGsh sc-bwzfXH gaxaPs\\"><button class=\\"button--cancel sc-gZMcBi fHowBB\\" size=\\"45\\" aria-label=\\"Close BottomSheet\\" role=\\"button\\"><svg viewBox=\\"0 0 12 12\\" width=\\"12\\" height=\\"12\\" fill=\\"rgba(0, 0, 15, 1)\\"><path d=\\"M6.563 6.203l4.523 4.516a.384.384 0 0 1 .117.281c0 .11-.039.203-.117.281a.378.378 0 0 1-.137.09.417.417 0 0 1-.297 0 .378.378 0 0 1-.136-.09L6 6.766 1.484 11.28a.378.378 0 0 1-.136.09.417.417 0 0 1-.297 0 .378.378 0 0 1-.137-.09A.384.384 0 0 1 .797 11c0-.11.039-.203.117-.281l4.524-4.516L.913 1.68a.384.384 0 0 1-.117-.282c0-.109.039-.203.117-.28A.388.388 0 0 1 1.2 1c.112 0 .207.04.285.117L6 5.633l4.516-4.516A.388.388 0 0 1 10.8 1c.112 0 .207.04.285.117a.384.384 0 0 1 .117.281c0 .11-.039.204-.117.282L6.562 6.203z\\"></path></svg></button></div><div>Europe</div><div>Africa</div><div>Asias</div></div>"`;
+exports[`<BottomSheet /> removes the BottomSheet on clicking cancel 1`] = `"<div class=\\"sc-gqjmRU eqneQK\\" role=\\"dialog\\" aria-modal=\\"true\\"><div class=\\"sc-VigVT iUSGsh sc-bwzfXH FGnNw\\"><button class=\\"button--cancel sc-gZMcBi fHowBB\\" size=\\"45\\" aria-label=\\"Close BottomSheet\\" role=\\"button\\"><svg viewBox=\\"0 0 12 12\\" width=\\"12\\" height=\\"12\\" fill=\\"rgba(0, 0, 15, 1)\\"><path d=\\"M6.563 6.203l4.523 4.516a.384.384 0 0 1 .117.281c0 .11-.039.203-.117.281a.378.378 0 0 1-.137.09.417.417 0 0 1-.297 0 .378.378 0 0 1-.136-.09L6 6.766 1.484 11.28a.378.378 0 0 1-.136.09.417.417 0 0 1-.297 0 .378.378 0 0 1-.137-.09A.384.384 0 0 1 .797 11c0-.11.039-.203.117-.281l4.524-4.516L.913 1.68a.384.384 0 0 1-.117-.282c0-.109.039-.203.117-.28A.388.388 0 0 1 1.2 1c.112 0 .207.04.285.117L6 5.633l4.516-4.516A.388.388 0 0 1 10.8 1c.112 0 .207.04.285.117a.384.384 0 0 1 .117.281c0 .11-.039.204-.117.282L6.562 6.203z\\"></path></svg></button></div><div>Europe</div><div>Africa</div><div>Asias</div></div>"`;
 
-exports[`<BottomSheet /> renders BottomSheet Container correctly 1`] = `"<div class=\\"sc-gqjmRU eqneQK\\" role=\\"dialog\\" aria-modal=\\"true\\"><div class=\\"sc-VigVT iUSGsh sc-bwzfXH gaxaPs\\"><button class=\\"button--cancel sc-gZMcBi fHowBB\\" size=\\"45\\" aria-label=\\"Close BottomSheet\\" role=\\"button\\"><svg viewBox=\\"0 0 12 12\\" width=\\"12\\" height=\\"12\\" fill=\\"rgba(0, 0, 15, 1)\\"><path d=\\"M6.563 6.203l4.523 4.516a.384.384 0 0 1 .117.281c0 .11-.039.203-.117.281a.378.378 0 0 1-.137.09.417.417 0 0 1-.297 0 .378.378 0 0 1-.136-.09L6 6.766 1.484 11.28a.378.378 0 0 1-.136.09.417.417 0 0 1-.297 0 .378.378 0 0 1-.137-.09A.384.384 0 0 1 .797 11c0-.11.039-.203.117-.281l4.524-4.516L.913 1.68a.384.384 0 0 1-.117-.282c0-.109.039-.203.117-.28A.388.388 0 0 1 1.2 1c.112 0 .207.04.285.117L6 5.633l4.516-4.516A.388.388 0 0 1 10.8 1c.112 0 .207.04.285.117a.384.384 0 0 1 .117.281c0 .11-.039.204-.117.282L6.562 6.203z\\"></path></svg></button></div><div>Europe</div><div>Africa</div><div>Asias</div></div>"`;
+exports[`<BottomSheet /> renders BottomSheet Container correctly 1`] = `"<div class=\\"sc-gqjmRU eqneQK\\" role=\\"dialog\\" aria-modal=\\"true\\"><div class=\\"sc-VigVT iUSGsh sc-bwzfXH FGnNw\\"><button class=\\"button--cancel sc-gZMcBi fHowBB\\" size=\\"45\\" aria-label=\\"Close BottomSheet\\" role=\\"button\\"><svg viewBox=\\"0 0 12 12\\" width=\\"12\\" height=\\"12\\" fill=\\"rgba(0, 0, 15, 1)\\"><path d=\\"M6.563 6.203l4.523 4.516a.384.384 0 0 1 .117.281c0 .11-.039.203-.117.281a.378.378 0 0 1-.137.09.417.417 0 0 1-.297 0 .378.378 0 0 1-.136-.09L6 6.766 1.484 11.28a.378.378 0 0 1-.136.09.417.417 0 0 1-.297 0 .378.378 0 0 1-.137-.09A.384.384 0 0 1 .797 11c0-.11.039-.203.117-.281l4.524-4.516L.913 1.68a.384.384 0 0 1-.117-.282c0-.109.039-.203.117-.28A.388.388 0 0 1 1.2 1c.112 0 .207.04.285.117L6 5.633l4.516-4.516A.388.388 0 0 1 10.8 1c.112 0 .207.04.285.117a.384.384 0 0 1 .117.281c0 .11-.039.204-.117.282L6.562 6.203z\\"></path></svg></button></div><div>Europe</div><div>Africa</div><div>Asias</div></div>"`;
diff --git a/src/components/DeviceSize/__test__/__snapshots__/index.spec.js.snap b/src/components/DeviceSize/__test__/__snapshots__/index.spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`DisplayFor cssOnly renders custom display prop 1`] = `
 <div
-  class="sc-bdVaJa fgvBx"
+  class="sc-bdVaJa cphQvp"
   display="flex"
 >
   Content
@@ -11,7 +11,7 @@ exports[`DisplayFor cssOnly renders custom display prop 1`] = `
 
 exports[`DisplayFor cssOnly renders nothing when value is null 1`] = `
 <div
-  class="sc-bdVaJa gPRijU"
+  class="sc-bdVaJa sDYhp"
   display="block"
 >
   Content

diff --git a/src/components/Grid/Column.js b/src/components/Grid/Column.js
@@ -3,7 +3,7 @@ import { mediumAndUp, largeAndUp, xLargeAndUp } from "../../theme/mediaQueries";
 import spacing from "../../theme/spacing";
 import constants from "../../theme/constants";
 
-const getSize = val => val / constants.MAX_COLUMNS * 100;
+const getSize = val => (val / constants.MAX_COLUMNS) * 100;
 
 const getFlexProps = val =>
   val === 12
@@ -63,4 +63,6 @@ Column.defaultProps = {
   xLarge: null
 };
 
+Column.displayName = "Column";
+
 export default Column;
diff --git a/src/components/Grid/Container.js b/src/components/Grid/Container.js
@@ -4,7 +4,7 @@ import spacing from "../../theme/spacing";
 
 const Container = styled.div`
   margin: 0 auto;
-  max-width: 1248px;
+  max-width: 1440px;
   width: 100%;
   padding-left: ${spacing.gutters.small}px;
   padding-right: ${spacing.gutters.small}px;
@@ -15,4 +15,6 @@ const Container = styled.div`
   `};
 `;
 
+Container.displayName = "Container";
+
 export default Container;
diff --git a/src/components/Grid/Row.js b/src/components/Grid/Row.js
@@ -22,4 +22,6 @@ const Row = styled.div`
   }
 `;
 
+Row.displayName = "Row";
+
 export default Row;
diff --git a/src/components/Grid/__tests__/__snapshots__/index.spec.js.snap b/src/components/Grid/__tests__/__snapshots__/index.spec.js.snap
@@ -3,7 +3,7 @@
 exports[`Grid renders medium and up when medium size defined 1`] = `
 .c0 {
   margin: 0 auto;
-  max-width: 1248px;
+  max-width: 1440px;
   width: 100%;
   padding-left: 16px;
   padding-right: 16px;
@@ -47,21 +47,21 @@ exports[`Grid renders medium and up when medium size defined 1`] = `
   flex: 0 0 100%;
 }
 
-@media screen and (min-width:481px) {
+@media screen and (min-width:768px) {
   .c0 {
     padding-left: 24px;
     padding-right: 24px;
   }
 }
 
-@media screen and (min-width:481px) {
+@media screen and (min-width:768px) {
   .c1 {
     margin-left: -12px;
     margin-right: -12px;
   }
 }
 
-@media screen and (min-width:481px) {
+@media screen and (min-width:768px) {
   .c2 {
     max-width: 50%;
     padding-right: 12px;
@@ -72,7 +72,7 @@ exports[`Grid renders medium and up when medium size defined 1`] = `
   }
 }
 
-@media screen and (min-width:769px) {
+@media screen and (min-width:1024px) {
   .c2 {
     max-width: 50%;
     -webkit-flex: 0 0 50%;
@@ -81,7 +81,7 @@ exports[`Grid renders medium and up when medium size defined 1`] = `
   }
 }
 
-@media screen and (min-width:1025px) {
+@media screen and (min-width:1440px) {
   .c2 {
     max-width: 50%;
     -webkit-flex: 0 0 50%;
@@ -108,7 +108,7 @@ exports[`Grid renders medium and up when medium size defined 1`] = `
 exports[`Grid renders multiple sizes defined 1`] = `
 .c0 {
   margin: 0 auto;
-  max-width: 1248px;
+  max-width: 1440px;
   width: 100%;
   padding-left: 16px;
   padding-right: 16px;
@@ -152,21 +152,21 @@ exports[`Grid renders multiple sizes defined 1`] = `
   flex: 0 0 100%;
 }
 
-@media screen and (min-width:481px) {
+@media screen and (min-width:768px) {
   .c0 {
     padding-left: 24px;
     padding-right: 24px;
   }
 }
 
-@media screen and (min-width:481px) {
+@media screen and (min-width:768px) {
   .c1 {
     margin-left: -12px;
     margin-right: -12px;
   }
 }
 
-@media screen and (min-width:481px) {
+@media screen and (min-width:768px) {
   .c2 {
     max-width: 50%;
     padding-right: 12px;
@@ -177,7 +177,7 @@ exports[`Grid renders multiple sizes defined 1`] = `
   }
 }
 
-@media screen and (min-width:769px) {
+@media screen and (min-width:1024px) {
   .c2 {
     max-width: 25%;
     -webkit-flex: 0 0 25%;
@@ -186,7 +186,7 @@ exports[`Grid renders multiple sizes defined 1`] = `
   }
 }
 
-@media screen and (min-width:1025px) {
+@media screen and (min-width:1440px) {
   .c2 {
     max-width: 8.333333333333332%;
     -webkit-flex: 0 0 8.333333333333332%;
@@ -213,7 +213,7 @@ exports[`Grid renders multiple sizes defined 1`] = `
 exports[`Grid renders small size defined 1`] = `
 .c0 {
   margin: 0 auto;
-  max-width: 1248px;
+  max-width: 1440px;
   width: 100%;
   padding-left: 16px;
   padding-right: 16px;
@@ -257,21 +257,21 @@ exports[`Grid renders small size defined 1`] = `
   flex: 0 0 50%;
 }
 
-@media screen and (min-width:481px) {
+@media screen and (min-width:768px) {
   .c0 {
     padding-left: 24px;
     padding-right: 24px;
   }
 }
 
-@media screen and (min-width:481px) {
+@media screen and (min-width:768px) {
   .c1 {
     margin-left: -12px;
     margin-right: -12px;
   }
 }
 
-@media screen and (min-width:481px) {
+@media screen and (min-width:768px) {
   .c2 {
     max-width: 50%;
     padding-right: 12px;
@@ -282,7 +282,7 @@ exports[`Grid renders small size defined 1`] = `
   }
 }
 
-@media screen and (min-width:769px) {
+@media screen and (min-width:1024px) {
   .c2 {
     max-width: 50%;
     -webkit-flex: 0 0 50%;
@@ -291,7 +291,7 @@ exports[`Grid renders small size defined 1`] = `
   }
 }
 
-@media screen and (min-width:1025px) {
+@media screen and (min-width:1440px) {
   .c2 {
     max-width: 50%;
     -webkit-flex: 0 0 50%;
@@ -318,7 +318,7 @@ exports[`Grid renders small size defined 1`] = `
 exports[`Grid renders with defaults 1`] = `
 .c0 {
   margin: 0 auto;
-  max-width: 1248px;
+  max-width: 1440px;
   width: 100%;
   padding-left: 16px;
   padding-right: 16px;
@@ -362,21 +362,21 @@ exports[`Grid renders with defaults 1`] = `
   flex: 0 0 100%;
 }
 
-@media screen and (min-width:481px) {
+@media screen and (min-width:768px) {
   .c0 {
     padding-left: 24px;
     padding-right: 24px;
   }
 }
 
-@media screen and (min-width:481px) {
+@media screen and (min-width:768px) {
   .c1 {
     margin-left: -12px;
     margin-right: -12px;
   }
 }
 
-@media screen and (min-width:481px) {
+@media screen and (min-width:768px) {
   .c2 {
     max-width: 100%;
     padding-right: 12px;
@@ -387,7 +387,7 @@ exports[`Grid renders with defaults 1`] = `
   }
 }
 
-@media screen and (min-width:769px) {
+@media screen and (min-width:1024px) {
   .c2 {
     max-width: 100%;
     -webkit-flex: 0 0 100%;
@@ -396,7 +396,7 @@ exports[`Grid renders with defaults 1`] = `
   }
 }
 
-@media screen and (min-width:1025px) {
+@media screen and (min-width:1440px) {
   .c2 {
     max-width: 100%;
     -webkit-flex: 0 0 100%;

diff --git a/src/components/Header/Heading.js b/src/components/Header/Heading.js
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import styled from "styled-components";
 import colors from "../../theme/colors";
 import typography from "../../theme/typography";
-import { mediumAndUp, largeAndUp } from "../../theme/mediaQueries";
+import { mediumAndUp, smallAndUp } from "../../theme/mediaQueries";
 import spacing from "../../theme/spacing";
 
 const Span = styled.span`
@@ -22,11 +22,11 @@ const margins = styled.span`
   color: ${p => (p.color ? p.color : colors.white.base)};
   font-size: ${typography.size.tera};
 
-  ${mediumAndUp`
+  ${smallAndUp`
     font-size: ${typography.size.zetta};
   `};
 
-  ${largeAndUp`
+  ${mediumAndUp`
     font-size: ${typography.size.bronto};
   `};
 `;

diff --git a/src/components/Header/WithImage.js b/src/components/Header/WithImage.js
@@ -6,7 +6,7 @@ import classNames from "classnames";
 import Gradient from "../Gradient";
 import Container from "../Grid/Container";
 import Row from "../Grid/Row";
-import { mediumAndUp } from "../../theme/mediaQueries";
+import { smallAndUp } from "../../theme/mediaQueries";
 
 const GradientBackground = Gradient.extend`
   position: absolute;
@@ -40,7 +40,7 @@ const ContainerRow = styled(Row)`
 `;
 
 const ImageWrapper = styled.div`
-  ${mediumAndUp`
+  ${smallAndUp`
       padding-top: 60px;
     `};
 `;