From d00799f6337ca0e792369b2628ab63389b4fec30 Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Sat, 20 Apr 2019 00:42:24 -0700
Subject: [PATCH] refactor(v2): use BEM for classes

---
 .../lib/default-theme/BlogPage/index.js       |  6 +-
 .../lib/default-theme/BlogPost/index.js       |  4 +-
 .../lib/default-theme/DocBody/index.js        |  8 +-
 .../lib/default-theme/DocsPaginator/index.js  |  8 +-
 .../lib/default-theme/Footer/index.js         | 78 +++++++++----------
 .../lib/default-theme/Navbar/index.js         | 67 ++++++++--------
 .../default-theme/Navbar/styles.module.css    | 13 ----
 .../lib/default-theme/Post/index.js           | 22 +++---
 .../lib/default-theme/Sidebar/index.js        | 15 ++--
 website/pages/feedback/index.js               |  2 +-
 website/pages/index.js                        | 38 ++++-----
 website/pages/youtube.js                      |  2 +-
 12 files changed, 124 insertions(+), 139 deletions(-)
 delete mode 100644 packages/docusaurus/lib/default-theme/Navbar/styles.module.css
diff --git a/packages/docusaurus/lib/default-theme/BlogPage/index.js b/packages/docusaurus/lib/default-theme/BlogPage/index.js
index e42899521c..f24dfab35a 100644
--- a/packages/docusaurus/lib/default-theme/BlogPage/index.js
+++ b/packages/docusaurus/lib/default-theme/BlogPage/index.js
@@ -29,11 +29,11 @@ function BlogPage(props) {
         {language && <html lang={language} />}
         {language && <meta name="docsearch:language" content={language} />}
       </Head>
-      <div className="container margin-vert-xl">
+      <div className="container margin-vert--xl">
         <div className="row">
-          <div className="col col-6 col-offset-3">
+          <div className="col col--6 col--offset-3">
             {BlogPosts.map((PostContent, index) => (
-              <div className="margin-bottom-xl" key={index}>
+              <div className="margin-bottom--xl" key={index}>
                 <Post truncated metadata={posts[index]}>
                   <PostContent />
                 </Post>
diff --git a/packages/docusaurus/lib/default-theme/BlogPost/index.js b/packages/docusaurus/lib/default-theme/BlogPost/index.js
index 072fa84192..73b119737f 100644
--- a/packages/docusaurus/lib/default-theme/BlogPost/index.js
+++ b/packages/docusaurus/lib/default-theme/BlogPost/index.js
@@ -30,9 +30,9 @@ function BlogPost(props) {
         {language && <html lang={language} />}
       </Head>
       {BlogPostContents && (
-        <div className="container margin-vert-xl">
+        <div className="container margin-vert--xl">
           <div className="row">
-            <div className="col col-6 col-offset-3">
+            <div className="col col--6 col--offset-3">
               <Post metadata={metadata}>
                 <BlogPostContents />
               </Post>
diff --git a/packages/docusaurus/lib/default-theme/DocBody/index.js b/packages/docusaurus/lib/default-theme/DocBody/index.js
index 6835f2beb7..6f9b9a7089 100644
--- a/packages/docusaurus/lib/default-theme/DocBody/index.js
+++ b/packages/docusaurus/lib/default-theme/DocBody/index.js
@@ -30,12 +30,12 @@ function DocBody(props) {
         {language && <meta name="docsearch:language" content={language} />}
         {version && <meta name="docsearch:version" content={version} />}
       </Head>
-      <div className="container margin-bottom-xl">
+      <div className="container margin-bottom--xl">
         <div className="row">
-          <div className="col col-8 col-offset-2">
-            <h1 className="margin-vert-xl">{metadata.title}</h1>
+          <div className="col col--8 col--offset-2">
+            <h1 className="margin-vert--xl">{metadata.title}</h1>
             <DocContents />
-            <div className="margin-vert-xl">
+            <div className="margin-vert--xl">
               <DocsPaginator />
             </div>
           </div>
diff --git a/packages/docusaurus/lib/default-theme/DocsPaginator/index.js b/packages/docusaurus/lib/default-theme/DocsPaginator/index.js
index c9629f946b..193ad66c53 100644
--- a/packages/docusaurus/lib/default-theme/DocsPaginator/index.js
+++ b/packages/docusaurus/lib/default-theme/DocsPaginator/index.js
@@ -20,10 +20,10 @@ function DocsPaginator() {
 
   return (
     <div className="row">
-      <div className="col col-6">
+      <div className="col col--6">
         {metadata.previous && docs[metadata.previous] && (
           <Link
-            className="btn btn-outline btn-lg btn-primary"
+            className="button button--secondary"
             to={docs[metadata.previous].permalink}>
             <i className="fas fa-arrow-left" />
             &nbsp;&nbsp;
@@ -31,10 +31,10 @@ function DocsPaginator() {
           </Link>
         )}
       </div>
-      <div className="col col-6 text-right">
+      <div className="col col--6 text--right">
         {metadata.next && docs[metadata.next] && (
           <Link
-            className="btn btn-outline btn-lg btn-primary"
+            className="button button--secondary"
             to={docs[metadata.next].permalink}>
             {metadata.next_title}&nbsp;&nbsp;
             <i className="fas fa-arrow-right" />
diff --git a/packages/docusaurus/lib/default-theme/Footer/index.js b/packages/docusaurus/lib/default-theme/Footer/index.js
index 3a1a2903aa..70fc157ab0 100644
--- a/packages/docusaurus/lib/default-theme/Footer/index.js
+++ b/packages/docusaurus/lib/default-theme/Footer/index.js
@@ -9,89 +9,89 @@ import React from 'react';
 
 function Footer() {
   return (
-    <footer className="footer footer-dark">
+    <footer className="footer footer--dark">
       <div className="container">
-        <div className="row footer-links">
-          <div className="col col-3">
-            <h4 className="footer-title">Docs</h4>
-            <ul className="footer-items">
-              <li className="footer-item">
-                <a className="footer-link-item" href="/">
+        <div className="row footer__links">
+          <div className="col">
+            <h4 className="footer__title">Docs</h4>
+            <ul className="footer__items">
+              <li className="footer__item">
+                <a className="footer__link-item" href="/">
                   Getting Started
                 </a>
               </li>
-              <li className="footer-item">
-                <a className="footer-link-item" href="/">
+              <li className="footer__item">
+                <a className="footer__link-item" href="/">
                   API
                 </a>
               </li>
-              <li className="footer-item">
-                <a className="footer-link-item" href="/">
+              <li className="footer__item">
+                <a className="footer__link-item" href="/">
                   FAQ
                 </a>
               </li>
             </ul>
           </div>
-          <div className="col col-3">
-            <h4 className="footer-title">Community</h4>
-            <ul className="footer-items">
-              <li className="footer-item">
-                <a className="footer-link-item" href="/">
+          <div className="col">
+            <h4 className="footer__title">Community</h4>
+            <ul className="footer__items">
+              <li className="footer__item">
+                <a className="footer__link-item" href="/">
                   Users
                 </a>
               </li>
-              <li className="footer-item">
-                <a className="footer-link-item" href="/">
+              <li className="footer__item">
+                <a className="footer__link-item" href="/">
                   Contribute
                 </a>
               </li>
-              <li className="footer-item">
-                <a className="footer-link-item" href="/">
+              <li className="footer__item">
+                <a className="footer__link-item" href="/">
                   Stack Overflow
                 </a>
               </li>
             </ul>
           </div>
-          <div className="col col-3">
-            <h4 className="footer-title">Social</h4>
-            <ul className="footer-items">
-              <li className="footer-item">
-                <a className="footer-link-item" href="/">
+          <div className="col">
+            <h4 className="footer__title">Social</h4>
+            <ul className="footer__items">
+              <li className="footer__item">
+                <a className="footer__link-item" href="/">
                   GitHub
                 </a>
               </li>
-              <li className="footer-item">
-                <a className="footer-link-item" href="/">
+              <li className="footer__item">
+                <a className="footer__link-item" href="/">
                   Facebook
                 </a>
               </li>
-              <li className="footer-item">
-                <a className="footer-link-item" href="/">
+              <li className="footer__item">
+                <a className="footer__link-item" href="/">
                   Twitter
                 </a>
               </li>
             </ul>
           </div>
-          <div className="col col-3">
-            <h4 className="footer-title">More</h4>
-            <ul className="footer-items">
-              <li className="footer-item">
-                <a className="footer-link-item" href="/">
+          <div className="col">
+            <h4 className="footer__title">More</h4>
+            <ul className="footer__items">
+              <li className="footer__item">
+                <a className="footer__link-item" href="/">
                   Tutorial
                 </a>
               </li>
-              <li className="footer-item">
-                <a className="footer-link-item" href="/">
+              <li className="footer__item">
+                <a className="footer__link-item" href="/">
                   Blog
                 </a>
               </li>
             </ul>
           </div>
         </div>
-        <div className="text-center">
-          <div className="margin-bottom-sm">
+        <div className="text--center">
+          <div className="margin-bottom--sm">
             <img
-              className="footer-logo"
+              className="footer__logo"
               alt="Facebook Open Source Logo"
               src="https://docusaurus.io/img/oss_logo.png"
             />
diff --git a/packages/docusaurus/lib/default-theme/Navbar/index.js b/packages/docusaurus/lib/default-theme/Navbar/index.js
index db1b155a81..275b5e2c0f 100644
--- a/packages/docusaurus/lib/default-theme/Navbar/index.js
+++ b/packages/docusaurus/lib/default-theme/Navbar/index.js
@@ -10,7 +10,6 @@ import React, {useContext} from 'react';
 import Link from '@docusaurus/Link';
 import Search from '@theme/Search';
 import DocusaurusContext from '@docusaurus/context';
-import styles from './styles.module.css';
 
 function Navbar(props) {
   const context = useContext(DocusaurusContext);
@@ -51,10 +50,10 @@ function Navbar(props) {
       }
 
       return (
-        <div key={link.doc} className="navbar-item">
+        <div key={link.doc} className="navbar__item">
           <Link
-            activeClassName="navbar-link-active"
-            className="navbar-link"
+            activeClassName="navbar__link--active"
+            className="navbar__link"
             to={docs[id].permalink}>
             {link.label}
           </Link>
@@ -67,10 +66,10 @@ function Navbar(props) {
         link.page
       }`;
       return (
-        <div key={link.page} className="navbar-item">
+        <div key={link.page} className="navbar__item">
           <Link
-            activeClassName="navbar-link-active"
-            className="navbar-link"
+            activeClassName="navbar__link--active"
+            className="navbar__link"
             to={pageHref}>
             {link.label}
           </Link>
@@ -80,8 +79,8 @@ function Navbar(props) {
     if (link.href) {
       // set link to specified href
       return (
-        <div key={link.label} className="navbar-item">
-          <Link to={link.href} className="navbar-link">
+        <div key={link.label} className="navbar__item">
+          <Link to={link.href} className="navbar__link">
             {link.label}
           </Link>
         </div>
@@ -91,10 +90,10 @@ function Navbar(props) {
       // set link to blog url
       const blogUrl = `${baseUrl}blog`;
       return (
-        <div key="Blog" className="navbar-item">
+        <div key="Blog" className="navbar__item">
           <Link
-            activeClassName="navbar-link-active"
-            className="navbar-link"
+            activeClassName="navbar__link--active"
+            className="navbar__link"
             to={blogUrl}>
             Blog
           </Link>
@@ -105,27 +104,25 @@ function Navbar(props) {
   };
 
   return (
-    <nav className="navbar navbar-light navbar-fixed-top">
-      <div className="navbar-inner">
-        <div className="navbar-items">
-          <div key="logo" className="navbar-item">
-            <Link
-              className="navbar-link"
-              to={baseUrl + (translationEnabled ? thisLanguage : '')}>
-              {headerIcon && (
-                <img
-                  className={styles.navLogo}
-                  src={baseUrl + headerIcon}
-                  alt={title}
-                />
-              )}
-              {!disableHeaderTitle && <strong>{title}</strong>}
-            </Link>
-          </div>
+    <nav className="navbar navbar--light navbar--fixed-top">
+      <div className="navbar__inner">
+        <div className="navbar__items">
+          <Link
+            className="navbar__brand"
+            to={baseUrl + (translationEnabled ? thisLanguage : '')}>
+            {headerIcon && (
+              <img
+                className="navbar__logo"
+                src={baseUrl + headerIcon}
+                alt={title}
+              />
+            )}
+            {!disableHeaderTitle && <strong>{title}</strong>}
+          </Link>
           {versioningEnabled && (
-            <div key="versions" className="navbar-item">
+            <div key="versions" className="navbar__item">
               <Link
-                className="navbar-link"
+                className="navbar__link"
                 to={
                   baseUrl +
                   (translationEnabled ? `${thisLanguage}/versions` : `versions`)
@@ -136,15 +133,15 @@ function Navbar(props) {
           )}
           {headerLinks.map(makeLinks)}
         </div>
-        <div className="navbar-items navbar-right">
+        <div className="navbar__items navbar__items--right">
           {algolia && (
-            <div className="navbar-search" key="search-box">
+            <div className="navbar__search" key="search-box">
               <Search {...props} />
             </div>
           )}
-          <div className="navbar-item">
+          <div className="navbar__item">
             <a
-              className="navbar-link"
+              className="navbar__link"
               href="https://github.com/facebook/docusaurus"
               rel="noopener noreferrer"
               target="_blank">
diff --git a/packages/docusaurus/lib/default-theme/Navbar/styles.module.css b/packages/docusaurus/lib/default-theme/Navbar/styles.module.css
deleted file mode 100644
index 22cb0f2bd9..0000000000
--- a/packages/docusaurus/lib/default-theme/Navbar/styles.module.css
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * Copyright (c) 2017-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-.navLogo {
-  height: 2rem;
-  margin-right: 0.75rem;
-  vertical-align: middle;
-  width: 2rem;
-}
diff --git a/packages/docusaurus/lib/default-theme/Post/index.js b/packages/docusaurus/lib/default-theme/Post/index.js
index db1d78fd8b..9803b1e42b 100644
--- a/packages/docusaurus/lib/default-theme/Post/index.js
+++ b/packages/docusaurus/lib/default-theme/Post/index.js
@@ -48,29 +48,33 @@ function Post(props) {
         <h1>
           <Link to={permalink}>{title}</Link>
         </h1>
-        <div className="margin-bottom-sm">
+        <div className="margin-bottom--sm">
           {month[blogPostDate.getMonth()]} {blogPostDate.getDay()},{' '}
           {blogPostDate.getFullYear()}
         </div>
-        <div className="avatar margin-bottom-md">
+        <div className="avatar margin-bottom--md">
           {authorImageURL && (
             <a
-              className="avatar-photo-link"
+              className="avatar__photo-link"
               href={authorURL}
               target="_blank"
               rel="noreferrer noopener">
-              <img className="avatar-photo" src={authorImageURL} alt={author} />
+              <img
+                className="avatar__photo"
+                src={authorImageURL}
+                alt={author}
+              />
             </a>
           )}
-          <div className="avatar-intro">
+          <div className="avatar__intro">
             {author && (
               <>
-                <h4 className="avatar-name">
+                <h4 className="avatar__name">
                   <a href={authorURL} target="_blank" rel="noreferrer noopener">
                     {author}
                   </a>
                 </h4>
-                <small className="avatar-subtitle">{authorTitle}</small>
+                <small className="avatar__subtitle">{authorTitle}</small>
               </>
             )}
           </div>
@@ -84,8 +88,8 @@ function Post(props) {
       {renderPostHeader()}
       {children}
       {truncated && (
-        <div className="text-right">
-          <Link className="btn btn-outline btn-info" to={metadata.permalink}>
+        <div className="text--right">
+          <Link className="button button--secondary" to={metadata.permalink}>
             Read More
           </Link>
         </div>
diff --git a/packages/docusaurus/lib/default-theme/Sidebar/index.js b/packages/docusaurus/lib/default-theme/Sidebar/index.js
index c047331a13..cc94952874 100644
--- a/packages/docusaurus/lib/default-theme/Sidebar/index.js
+++ b/packages/docusaurus/lib/default-theme/Sidebar/index.js
@@ -48,21 +48,18 @@ function Sidebar() {
     switch (item.type) {
       case 'category':
         return (
-          <li className="menu-list-item" key={item.label}>
-            <a className="menu-link" href="#!">
+          <li className="menu__list-item" key={item.label}>
+            <a className="menu__link" href="#!">
               {item.label}
             </a>
-            <ul className="menu-list">{item.items.map(renderItem)}</ul>
+            <ul className="menu__list">{item.items.map(renderItem)}</ul>
           </li>
         );
 
       case 'link':
         return (
-          <li className="menu-list-item" key={item.label}>
-            <Link
-              activeClassName="menu-link-active"
-              className="menu-link"
-              to={item.href}>
+          <li className="menu__list-item" key={item.label}>
+            <Link className="menu__link" to={item.href}>
               {item.label}
             </Link>
           </li>
@@ -77,7 +74,7 @@ function Sidebar() {
   return (
     <div className={styles.sidebar}>
       <div className="menu">
-        <ul className="menu-list">
+        <ul className="menu__list">
           {thisSidebar.map(item => renderItem(item, {root: true}))}
         </ul>
       </div>
diff --git a/website/pages/feedback/index.js b/website/pages/feedback/index.js
index d42549dabd..2482d989a3 100644
--- a/website/pages/feedback/index.js
+++ b/website/pages/feedback/index.js
@@ -22,7 +22,7 @@ function Feedback() {
       });
   }, []);
 
-  return <div className="container margin-vert-xl" data-canny />;
+  return <div className="container margin-vert--xl" data-canny />;
 }
 
 export default Feedback;
diff --git a/website/pages/index.js b/website/pages/index.js
index e5faaa2a5b..46997a99b3 100644
--- a/website/pages/index.js
+++ b/website/pages/index.js
@@ -110,66 +110,66 @@ function Home() {
         </div>
       </div>
       <div className={styles.section}>
-        <div className="container text-center margin-bottom-xl">
+        <div className="container text--center margin-bottom--xl">
           <div className="row">
-            <div className="col col-4">
+            <div className="col">
               <img
                 className={styles.featureImage}
                 src={`${siteConfig.baseUrl}img/undraw_typewriter.svg`}
               />
               <h3>Powered by Markdown</h3>
-              <p className="padding-horiz-md">
+              <p className="padding-horiz--md">
                 Save time and focus on your project's documentation. Simply
                 write docs and blog posts with Markdown and Docusaurus will
                 publish a set of static html files ready to serve.
               </p>
             </div>
-            <div className="col col-4">
+            <div className="col">
               <img
                 className={styles.featureImage}
                 src={`${siteConfig.baseUrl}img/undraw_react.svg`}
               />
               <h3>Built Using React</h3>
-              <p className="padding-horiz-md">
+              <p className="padding-horiz--md">
                 Extend or customize your project's layout by reusing React.
                 Docusaurus can be extended while reusing the same header and
                 footer.
               </p>
             </div>
-            <div className="col col-4">
+            <div className="col">
               <img
                 className={styles.featureImage}
                 src={`${siteConfig.baseUrl}img/undraw_around_the_world.svg`}
               />
               <h3>Ready for Translations</h3>
-              <p className="padding-horiz-md">
+              <p className="padding-horiz--md">
                 Localization comes pre-configured. Use Crowdin to translate your
                 docs into over 70 languages.
               </p>
             </div>
           </div>
         </div>
-        <div className="container text-center">
+        <div className="container text--center">
           <div className="row">
-            <div className="col col-4 col-offset-2">
+            <div className="col col--4 col--offset-2">
               <img
                 className={styles.featureImage}
                 src={`${siteConfig.baseUrl}img/undraw_version_control.svg`}
               />
               <h3>Document Versioning</h3>
-              <p className="padding-horiz-md">
+              <p className="padding-horiz--md">
                 Support users on all versions of your project. Document
                 versioning helps you keep documentation in sync with project
                 releases.
               </p>
             </div>
-            <div className="col col-4">
+            <div className="col col--4">
               <img
                 className={styles.featureImage}
                 src={`${siteConfig.baseUrl}img/undraw_algolia.svg`}
               />
               <h3>Document Search</h3>
-              <p className="padding-horiz-md">
+              <p className="padding-horiz--md">
                 Make it easy for your community to find what they need in your
                 documentation. We proudly support Algolia documentation search.
               </p>
@@ -186,19 +186,19 @@ function Home() {
         <div className="container">
           <div className="row">
             {QUOTES.map(quote => (
-              <div className="col col-4" key={quote.name}>
-                <div className="avatar avatar-vertical margin-bottom-sm">
+              <div className="col" key={quote.name}>
+                <div className="avatar avatar--vertical margin-bottom--sm">
                   <img
                     alt={quote.name}
-                    className="avatar-photo avatar-photo-xl"
+                    className="avatar__photo avatar__photo--xl"
                     src={`${siteConfig.baseUrl}${quote.thumbnail}`}
                   />
-                  <div className="avatar-intro">
-                    <h4 className="avatar-name">{quote.name}</h4>
-                    <small className="avatar-subtitle">{quote.title}</small>
+                  <div className="avatar__intro">
+                    <h4 className="avatar__name">{quote.name}</h4>
+                    <small className="avatar__subtitle">{quote.title}</small>
                   </div>
                 </div>
-                <p className="text-center text-italic padding-horiz-md">
+                <p className="text--center text--italic padding-horiz--md">
                   {quote.text}
                 </p>
               </div>
diff --git a/website/pages/youtube.js b/website/pages/youtube.js
index 26e35dd0ed..4c4ee5ccbc 100644
--- a/website/pages/youtube.js
+++ b/website/pages/youtube.js
@@ -24,7 +24,7 @@ export default class Player extends React.Component {
         <Head>
           <title>My Youtube</title>
         </Head>
-        <div className="container margin-vert-xl text-center">
+        <div className="container margin-vert--xl text--center">
           {/* this is a React-youtube component */}
           <YouTube videoId="d9IxdwEFk1c" opts={opts} onReady={this._onReady} />
         </div>
