test(ie): test all new components in IE11

timmywil · timmywil · commit 67b6c751c493 · 2021-05-25T18:26:41.000-04:00
- Keep gatsby at 3.4.2. 3.6.0 does not work in IE11. 3.5.1 does,
  but has a typescript error
diff --git a/.babelrc b/.babelrc
@@ -1,12 +1,5 @@
 {
-  "presets": [[
-    "babel-preset-gatsby",
-    {
-      "targets": {
-        "browsers": [">0.25%", "not dead", "IE 11"]
-      }
-    }
-  ]],
+  "presets": ["babel-preset-gatsby"],
   "plugins": [
     "graphql-tag",
     "inline-import",
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -37,45 +37,45 @@
     "babel-plugin-prismjs": "^2.0.1",
     "babel-plugin-transform-inline-environment-variables": "^0.4.3",
     "babel-plugin-transform-remove-console": "^6.9.4",
-    "babel-preset-gatsby": "^1.5.0",
+    "babel-preset-gatsby": "^1.6.0",
     "color": "^3.1.3",
     "cookie": "^0.4.1",
-    "gatsby": "^3.7.0-next.0",
-    "gatsby-link": "^3.5.0",
-    "gatsby-plugin-canonical-urls": "^3.5.0",
-    "gatsby-plugin-create-client-paths": "^3.5.0",
-    "gatsby-plugin-emotion": "^6.5.0",
-    "gatsby-plugin-feed": "^3.5.0",
-    "gatsby-plugin-google-analytics": "^3.5.0",
-    "gatsby-plugin-google-tagmanager": "^3.5.0",
-    "gatsby-plugin-image": "^1.5.0",
-    "gatsby-plugin-manifest": "^3.5.0",
-    "gatsby-plugin-offline": "^4.5.1",
+    "gatsby": "3.4.2",
+    "gatsby-link": "^3.6.0",
+    "gatsby-plugin-canonical-urls": "^3.6.0",
+    "gatsby-plugin-create-client-paths": "^3.6.0",
+    "gatsby-plugin-emotion": "^6.6.0",
+    "gatsby-plugin-feed": "^3.6.0",
+    "gatsby-plugin-google-analytics": "^3.6.0",
+    "gatsby-plugin-google-tagmanager": "^3.6.0",
+    "gatsby-plugin-image": "^1.6.0",
+    "gatsby-plugin-manifest": "^3.6.0",
+    "gatsby-plugin-offline": "^4.6.0",
     "gatsby-plugin-optimize-svgs": "^1.0.5",
-    "gatsby-plugin-react-helmet": "^4.5.0",
+    "gatsby-plugin-react-helmet": "^4.6.0",
     "gatsby-plugin-react-svg": "^3.0.1",
-    "gatsby-plugin-remove-trailing-slashes": "^3.5.0",
+    "gatsby-plugin-remove-trailing-slashes": "^3.6.0",
     "gatsby-plugin-s3": "^0.3.8",
-    "gatsby-plugin-sharp": "^3.5.0",
-    "gatsby-plugin-sitemap": "^4.1.0",
-    "gatsby-plugin-twitter": "^3.5.0",
-    "gatsby-plugin-typescript": "^3.5.0",
+    "gatsby-plugin-sharp": "^3.6.0",
+    "gatsby-plugin-sitemap": "^4.2.0",
+    "gatsby-plugin-twitter": "^3.6.0",
+    "gatsby-plugin-typescript": "^3.6.0",
     "gatsby-plugin-web-font-loader": "^1.0.4",
-    "gatsby-react-router-scroll": "^4.5.0",
-    "gatsby-remark-autolink-headers": "^4.2.0",
+    "gatsby-react-router-scroll": "^4.6.0",
+    "gatsby-remark-autolink-headers": "^4.3.0",
     "gatsby-remark-check-links": "^2.1.0",
-    "gatsby-remark-copy-linked-files": "^4.2.1",
+    "gatsby-remark-copy-linked-files": "^4.3.0",
     "gatsby-remark-embed-video": "^3.1.1",
     "gatsby-remark-embedder": "^5.0.0",
     "gatsby-remark-find-replace": "^0.3.0",
-    "gatsby-remark-images": "^5.2.1",
-    "gatsby-remark-prismjs": "^5.2.1",
-    "gatsby-remark-responsive-iframe": "^4.2.1",
-    "gatsby-remark-smartypants": "^4.2.0",
-    "gatsby-source-filesystem": "^3.5.0",
-    "gatsby-source-graphql": "^3.5.0",
-    "gatsby-transformer-remark": "^4.2.0",
-    "gatsby-transformer-sharp": "^3.5.0",
+    "gatsby-remark-images": "^5.3.0",
+    "gatsby-remark-prismjs": "^5.3.0",
+    "gatsby-remark-responsive-iframe": "^4.3.0",
+    "gatsby-remark-smartypants": "^4.3.0",
+    "gatsby-source-filesystem": "^3.6.0",
+    "gatsby-source-graphql": "^3.6.0",
+    "gatsby-transformer-remark": "^4.3.0",
+    "gatsby-transformer-sharp": "^3.6.0",
     "graphql": "^15.5.0",
     "graphql-tag": "^2.12.4",
     "intersection-observer": "^0.12.0",
diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
@@ -50,6 +50,7 @@ const styles = {
     }
 
     p {
+      width: auto;
       margin: 0;
     }
 
diff --git a/src/components/Carousel.tsx b/src/components/Carousel.tsx
@@ -316,6 +316,7 @@ const styles = {
   moveButton: css`
     position: absolute;
     top: -92px;
+    padding: 0;
 
     &.prev-button {
       left: 0;
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -249,7 +249,7 @@ const styles = {
       justify-content: center;
       display: grid;
       grid-template-columns: 365px 240px 270px 240px;
-      grid-gap: 20px;
+      gap: 20px;
     }
   `,
   column: css`
@@ -323,6 +323,10 @@ const styles = {
     flex-direction: row;
     align-items: flex-start;
     margin-bottom: 25px;
+
+    ${theme.MIN_LARGE_DISPLAY_MEDIA_QUERY} {
+      width: 100%;
+    }
   `,
   studioLogo: css`
     width: 45px;
diff --git a/src/components/TeamMembers.tsx b/src/components/TeamMembers.tsx
@@ -48,7 +48,7 @@ const styles = {
     ${MIN_TABLET_MEDIA_QUERY} {
       flex-direction: row;
       flex-wrap: wrap;
-      grid-gap: 25px;
+      gap: 25px;
       grid-template-columns: 185px 185px 185px;
     }
     ${MIN_DEFAULT_MEDIA_QUERY} {
diff --git a/src/components/homepage/Header.tsx b/src/components/homepage/Header.tsx
@@ -19,7 +19,6 @@ export default function Header() {
       </div>
       <StaticImage
         width={549}
-        css={styles.image}
         alt="Spokestack Example"
         src="../../images/homepage/hero.png"
       />
@@ -35,12 +34,16 @@ const styles = {
     align-items: center;
     background: ${theme.mainBackground} url('/homepage/background.svg')
       no-repeat;
-    background-position: center -66px;
+    background-position: center calc(100% - 66px);
     background-size: cover;
     color: ${theme.textDarkBg};
     width: 100%;
     padding: 15px 20px 0;
 
+    @media (min-width: 1440px) {
+      background-size: 100% 549px;
+    }
+
     ${theme.MIN_DEFAULT_MEDIA_QUERY} {
       height: 602px;
       flex-direction: row;
@@ -80,8 +83,5 @@ const styles = {
   `,
   headerText: css`
     color: ${theme.textDarkBg};
-  `,
-  image: css`
-    flex-shrink: 0;
   `
 }
diff --git a/src/components/homepage/NewsItem.tsx b/src/components/homepage/NewsItem.tsx
@@ -58,6 +58,11 @@ const styles = {
     border: 1px solid ${theme.mainBorder};
     border-radius: 7px;
     overflow: hidden;
+
+    ${theme.ieBreakpoint} {
+      margin-left: 10px;
+      margin-right: 10px;
+    }
   `,
   image: css`
     height: 229px;
@@ -79,6 +84,8 @@ const styles = {
   title: css`
     padding-top: 20px;
     flex-grow: 1;
+    width: 100%;
+
     h5.blue {
       text-transform: uppercase;
       margin-bottom: 12px;
diff --git a/src/components/homepage/ProblemCard.tsx b/src/components/homepage/ProblemCard.tsx
@@ -48,7 +48,7 @@ const styles = {
     }
 
     ${theme.ieBreakpoint} {
-      margin-bottom: 50px;
+      margin-bottom: 50px !important;
     }
   `,
   image: css`
diff --git a/src/components/homepage/Testimonials.tsx b/src/components/homepage/Testimonials.tsx
@@ -7,7 +7,7 @@ import { css } from '@emotion/react'
 
 export default function Testimonials() {
   return (
-    <div id="testimonials" css={styles.testimonials}>
+    <div id="testimonials" className="ie-fix" css={styles.testimonials}>
       <h2>Testimonials from Developers like You</h2>
       <Carousel maxWidth={750} numSlides={2} interval={0} showDesktopButtons>
         <Testimonial
diff --git a/src/components/pricing/Plan.tsx b/src/components/pricing/Plan.tsx
@@ -33,7 +33,6 @@ export default function Plan({
     <div
       css={styles.plan}
       id={name.toLowerCase()}
-      className="ie-fix"
       style={{ backgroundColor: background || 'white' }}>
       <h5 css={[styles.header].concat(highlight ? styles.highlight : [])}>
         {name}
diff --git a/src/components/pricing/Question.tsx b/src/components/pricing/Question.tsx
@@ -11,7 +11,7 @@ interface Props {
 
 export default function Question({ question, answer }: Props) {
   const [open, setOpen] = useState(true)
-  const [height, setHeight] = useState<number | undefined>(0)
+  const [height, setHeight] = useState(0)
   const ref = useRef<HTMLDivElement>(null)
   const answerRef = useRef<HTMLDivElement>(null)
   const answerStyle = [styles.answer]
@@ -43,11 +43,13 @@ export default function Question({ question, answer }: Props) {
 
   if (open) {
     answerStyle.push(styles.open)
-    answerStyle.push(
-      css`
-        height: ${height}px;
-      `
-    )
+    if (height > 0) {
+      answerStyle.push(
+        css`
+          height: ${height}px;
+        `
+      )
+    }
   } else {
     answerStyle.push(
       css`
diff --git a/src/pages/pricing.tsx b/src/pages/pricing.tsx
@@ -138,7 +138,7 @@ const styles = {
 
       display: grid;
       grid-template-columns: 1fr 1fr 1fr 1fr;
-      grid-gap: 25px;
+      gap: 25px;
     }
 
     ${theme.MIN_LARGE_DISPLAY_MEDIA_QUERY} {
diff --git a/src/pages/support.tsx b/src/pages/support.tsx
@@ -103,7 +103,7 @@ const styles = {
       flex-wrap: wrap;
       display: grid;
       grid-template-columns: 1fr 1fr;
-      grid-gap: 25px;
+      gap: 25px;
     }
   `,
   callout: css`
diff --git a/src/styles/theme.ts b/src/styles/theme.ts
@@ -83,9 +83,9 @@ export const MAX_BLOG_TEXT_WIDTH = '850px'
 export const ieBreakpoint =
   '@media all and (-ms-high-contrast: none), (-ms-high-contrast: active)'
 
-export const ieBreakpointMinDefault = `@media all and (-ms-high-contrast: none) and (min-width:${DEFAULT_WIDTH}), (-ms-high-contrast: active) and (min-width:${DEFAULT_WIDTH})`
+export const ieBreakpointMinDefault = `@media all and (-ms-high-contrast: none) and (min-width:${DEFAULT_WIDTH}px), (-ms-high-contrast: active) and (min-width:${DEFAULT_WIDTH}px)`
 
-export const ieBreakpointMinLarge = `@media all and (-ms-high-contrast: none) and (min-width:${LARGE_DISPLAY_WIDTH}), (-ms-high-contrast: active) and (min-width:${LARGE_DISPLAY_WIDTH})`
+export const ieBreakpointMinLarge = `@media all and (-ms-high-contrast: none) and (min-width:${LARGE_DISPLAY_WIDTH}px), (-ms-high-contrast: active) and (min-width:${LARGE_DISPLAY_WIDTH}px)`
 
 /**
  * Responsive media queries
diff --git a/static/homepage/background.svg b/static/homepage/background.svg

Original file line number	Diff line number	Diff line change
`@@ -50,6 +50,7 @@ const styles = {`
`50`	`50`	`}`
`51`	`51`
`52`	`52`	`p {`
	`53`	`+ width: auto;`
`53`	`54`	`margin: 0;`
`54`	`55`	`}`
`55`	`56`
Original file line number	Diff line number	Diff line change
`@@ -48,7 +48,7 @@ const styles = {`
`48`	`48`	`${MIN_TABLET_MEDIA_QUERY} {`
`49`	`49`	`flex-direction: row;`
`50`	`50`	`flex-wrap: wrap;`
`51`		`- grid-gap: 25px;`
	`51`	`+ gap: 25px;`
`52`	`52`	`grid-template-columns: 185px 185px 185px;`
`53`	`53`	`}`
`54`	`54`	`${MIN_DEFAULT_MEDIA_QUERY} {`