Merge pull request #16 from newrelic/zstickles/suit-updates

Use SUIT-style classnames for state
newrelic · Apr 27, 2020 · 28a48fe · 28a48fe
2 parents 405c586 + 4200e97
commit 28a48fe
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 6 deletions.
diff --git a/src/components/HamburgerMenu.js b/src/components/HamburgerMenu.js
@@ -9,7 +9,7 @@ const HamburgerMenu = ({ toggle, open }) => (
     aria-expanded={open}
     aria-label="Mobile Menu"
     type="button"
-    className={cx('HamburgerMenu', { HamburgerMenu__open: open })}
+    className={cx('HamburgerMenu', { 'is-open': open })}
     onClick={() => toggle()}
   >
     <div />

diff --git a/src/components/HamburgerMenu.scss b/src/components/HamburgerMenu.scss
@@ -13,7 +13,7 @@ button.HamburgerMenu {
     transition: 0.18s;
   }
 
-  &.HamburgerMenu__open {
+  &.is-open {
     :nth-child(1) {
       transform: rotate(-45deg) translate(-6px, 6px);
     }

diff --git a/src/components/Header.js b/src/components/Header.js
@@ -33,9 +33,7 @@ const Header = ({ pages }) => {
   `);
 
   return (
-    <header
-      className={cx('Header--main', { 'Header--main__menuOpen': menuOpen })}
-    >
+    <header className={cx('Header--main', { 'is-open': menuOpen })}>
       <Container>
         <nav
           role="navigation"

diff --git a/src/components/Header.scss b/src/components/Header.scss
@@ -119,7 +119,7 @@ header.Header--main {
     }
   }
 
-  &.Header--main__menuOpen nav {
+  &.is-open nav {
     @media (max-width: 760px) {
       background-color: var(--color-white);
       display: block;