From c195bfffceb715342a1b20d5fb299d01c31c864e Mon Sep 17 00:00:00 2001
From: Olha Kurkaeidova <olya.kurkaedova@gmail.com>
Date: Sun, 18 Aug 2019 22:35:42 +0300
Subject: [PATCH] Add bemi to all components

---
 src/components/Header.jsx            | 19 +++++++++-----
 src/components/NewSnippet.jsx        | 19 ++++++++------
 src/components/RecentSnippetItem.jsx | 25 ++++++++++--------
 src/components/RecentSnippets.jsx    | 12 ++++++---
 src/components/Sidebar.jsx           | 13 ++++++----
 src/components/Snippet.jsx           | 39 +++++++++++++++-------------
 src/styles/Header.styl               | 12 ++++++---
 src/styles/NewSnippet.styl           | 18 +++++++------
 src/styles/RecentSnippets.styl       | 29 +++++++++++----------
 src/styles/Sidebar.styl              |  9 ++++---
 src/styles/Snippet.styl              | 27 ++++++++++---------
 tests/components/Sidebar.test.jsx    |  2 +-
 12 files changed, 130 insertions(+), 94 deletions(-)

diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index eed05be..cc4e761 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -1,21 +1,26 @@
 import React from 'react'
 import { NavLink } from 'react-router-dom'
 
-import '../styles/Header.styl'
+import bemi from 'bemi'
+
 import Logo from '../assets/icons/xsnippet.svg'
 
+import '../styles/Header.styl'
+
+const header = bemi('header')
+
 const Header = () => (
-  <header className="header" key="header">
-    <div className="header-logo">
+  <header className={header.b()}>
+    <div className={header.e('logo')}>
       <NavLink exact to="/">
         <img src={Logo} alt="XSnippet" />
       </NavLink>
     </div>
-    <div className="header-inner">
-      <div className="header-slogan">
-        <span className="header-slogan-x">X</span>SNIPPET
+    <div className={header.e('inner')}>
+      <div className={header.e('slogan')}>
+        <span className={header.e('slogan-x')}>X</span>SNIPPET
       </div>
-      <div className="header-sign-in">
+      <div className={header.e('sign-in')}>
         <NavLink to="/sign-in">
           <span>Sign in</span>
           <i className="icon-user" />
diff --git a/src/components/NewSnippet.jsx b/src/components/NewSnippet.jsx
index 5f29b2e..d93e231 100644
--- a/src/components/NewSnippet.jsx
+++ b/src/components/NewSnippet.jsx
@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useMemo } from 'react'
 import { connect } from 'react-redux'
 import AceEditor from 'react-ace'
 import { WithContext as Tags } from 'react-tag-input'
+import bemi from 'bemi'
 
 import 'brace/theme/textmate'
 
@@ -24,6 +25,8 @@ import '../styles/NewSnippet.styl'
 
 const ListBoxWithSearch = withSearch(ListBox)
 
+const newSnippet = bemi('new-snippet')
+
 const NewSnippet = ({ dispatch, history, syntaxes }) => {
   const snippetHeader = useRef()
   const {
@@ -54,7 +57,7 @@ const NewSnippet = ({ dispatch, history, syntaxes }) => {
   const recalcLangHeaderHeight = () => {
     const height = snippetHeader.current.offsetHeight
 
-    document.getElementsByClassName('new-snippet-lang-header')[0]
+    document.getElementsByClassName(newSnippet.e('lang-header'))[0]
       .setAttribute('style', `height:${height}px`)
   }
 
@@ -86,13 +89,13 @@ const NewSnippet = ({ dispatch, history, syntaxes }) => {
 
   return (
     <form
-      className="new-snippet"
+      className={newSnippet.b()}
       key="New Snippet"
       onSubmit={handleSubmit}
       role="presentation"
     >
-      <div className="new-snippet-code-wrapper">
-        <div className="new-snippet-code-header" ref={snippetHeader}>
+      <div className={newSnippet.e('code-wrapper')}>
+        <div className={newSnippet.e('code-header')} ref={snippetHeader}>
           <input
             className="input"
             placeholder="Title"
@@ -110,7 +113,7 @@ const NewSnippet = ({ dispatch, history, syntaxes }) => {
             delimiters={delimeterKeys}
           />
         </div>
-        <div className="new-snippet-code">
+        <div className={newSnippet.e('code')}>
           <AceEditor
             mode={getCurrentModeName(syntax)}
             width="100%"
@@ -123,15 +126,15 @@ const NewSnippet = ({ dispatch, history, syntaxes }) => {
             value={content}
             onChange={(value) => handleChange(value, handleContent)}
           />
-          <div className="new-snippet-code-bottom-bar">
+          <div className={newSnippet.e('code-bottom-bar')}>
             {renderValidationError()}
             <input type="submit" value="POST SNIPPET" />
           </div>
         </div>
       </div>
-      <div className="new-snippet-lang-wrapper">
+      <div className={newSnippet.e('lang-wrapper')}>
         <ListBoxWithSearch
-          className="new-snippet-lang"
+          className={newSnippet.e('lang')}
           items={memoizedSyntaxes}
           onClick={(syntax) => handleChange(syntax, handleSyntax)}
         />
diff --git a/src/components/RecentSnippetItem.jsx b/src/components/RecentSnippetItem.jsx
index 3ec5247..4aa4ed6 100644
--- a/src/components/RecentSnippetItem.jsx
+++ b/src/components/RecentSnippetItem.jsx
@@ -1,11 +1,14 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
+import bemi from 'bemi'
 
 import { downloadSnippet } from '../misc/download'
 import { getCurrentModeCaption } from '../misc/modes'
 import { getSnippetTitle, formatDate } from '../misc/snippet'
 import { getRawUrl } from '../misc/url'
 
+const rsi = bemi('recent-snippet')
+
 const RecentSnippetItem = ({ snippet }) => {
   const syntax = getCurrentModeCaption(snippet.get('syntax'))
   const title = getSnippetTitle(snippet)
@@ -14,22 +17,22 @@ const RecentSnippetItem = ({ snippet }) => {
   const download = () => downloadSnippet(snippet)
 
   return (
-    <li className="recent-snippet-item">
-      <div className="recent-snippet-meta">
+    <li className={rsi.e('item')}>
+      <div className={rsi.e('meta')}>
         <div>
-          <Link to={`${snippet.get('id')}`} className="recent-snippet-meta-title">{title}</Link>
-          <div className="recent-snippet-meta-tags">
-            {snippet.get('tags').map(item => <span className="recent-snippet-meta-tag" key={item}>{item}</span>)}
+          <Link to={`${snippet.get('id')}`} className={rsi.e('meta-title')}>{title}</Link>
+          <div className={rsi.e('meta-tags')}>
+            {snippet.get('tags').map(item => <span className={rsi.e('meta-tag')} key={item}>{item}</span>)}
           </div>
         </div>
-        <span className="recent-snippet-meta-info">{formatDate(snippet.get('created_at'))}, by Guest</span>
+        <span className={rsi.e('meta-info')}>{formatDate(snippet.get('created_at'))}, by Guest</span>
       </div>
-      <div className="recent-snippet-actions">
-        <span className="recent-snippet-lang">{syntax}</span>
+      <div className={rsi.e('actions')}>
+        <span className={rsi.e('lang')}>{syntax}</span>
         <div>
-          <a href={rawUrl} className="recent-snippet-button light">Raw</a>
-          <button className="recent-snippet-button light" onClick={download}>Download</button>
-          <Link to={`${snippet.get('id')}`} className="recent-snippet-button">Show</Link>
+          <a href={rawUrl} className={rsi.e('button', 'light')}>Raw</a>
+          <button className={rsi.e('button', 'light')} onClick={download}>Download</button>
+          <Link to={`${snippet.get('id')}`} className={rsi.e('button')}>Show</Link>
         </div>
       </div>
     </li>
diff --git a/src/components/RecentSnippets.jsx b/src/components/RecentSnippets.jsx
index 48ef9f6..8871878 100644
--- a/src/components/RecentSnippets.jsx
+++ b/src/components/RecentSnippets.jsx
@@ -1,5 +1,6 @@
 import React, { Fragment, useEffect } from 'react'
 import { connect } from 'react-redux'
+import bemi from 'bemi'
 
 import RecentSnippetItem from './RecentSnippetItem'
 
@@ -11,6 +12,9 @@ const scrollTop = () => {
   window.scroll({ top: 0, behavior: 'smooth' })
 }
 
+const rsi = bemi('recent-snippet')
+const pag = bemi('pagination')
+
 const RecentSnippets = ({ dispatch, pagination, snippets, recent }) => {
   const older = pagination.get('next')
   const newer = pagination.get('prev')
@@ -46,7 +50,7 @@ const RecentSnippets = ({ dispatch, pagination, snippets, recent }) => {
   }
 
   const renderRecentSnippets = () => (
-    <ul className="recent-snippet" key="recent-snippet">
+    <ul className={rsi.b()}>
       {recent.map(id => <RecentSnippetItem key={id} snippet={snippets.get(id)} />)}
     </ul>
   )
@@ -54,16 +58,16 @@ const RecentSnippets = ({ dispatch, pagination, snippets, recent }) => {
   return (
     <Fragment>
       {renderRecentSnippets()}
-      <div className="pagination" key="pagination">
+      <div className={pag.b()}>
         <span
-          className={`pagination-item next ${newer ? '' : 'disabled'}`}
+          className={pag.e('item', { next: true, disabled: !newer })}
           onClick={newerSetOfSnippets}
           role="presentation"
         >
           &lsaquo; Newer
         </span>
         <span
-          className={`pagination-item prev ${older ? '' : 'disabled'}`}
+          className={pag.e('item', { prev: true, disabled: !older })}
           onClick={olderSetOfSnippets}
           role="presentation"
         >
diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
index 6e302dc..d269711 100644
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -1,22 +1,25 @@
 import React from 'react'
 import { NavLink } from 'react-router-dom'
+import bemi from 'bemi'
 
 import '../styles/Sidebar.styl'
 
+const sidebar = bemi('sidebar')
+
 const Sidebar = () => (
-  <nav className="sidebar" key="navigation">
-    <ul className="sidebar-list">
-      <li className="sidebar-item">
+  <nav className={sidebar.b()}>
+    <ul className={sidebar.e('list')}>
+      <li className={sidebar.e('item')}>
         <NavLink exact to="/" activeClassName="active" title="New Snippet">
           <i className="icon-new" />
         </NavLink>
       </li>
-      <li className="sidebar-item sidebar-item-border">
+      <li className={sidebar.e('item', 'border')}>
         <NavLink to="/recent" activeClassName="active" title="Recent Snippets">
           <i className="icon-recent" />
         </NavLink>
       </li>
-      <li className="sidebar-item">
+      <li className={sidebar.e('item')}>
         <NavLink to="/about" activeClassName="active" title="About">
           <i className="icon-about" />
         </NavLink>
diff --git a/src/components/Snippet.jsx b/src/components/Snippet.jsx
index a2ba687..63ecd5d 100644
--- a/src/components/Snippet.jsx
+++ b/src/components/Snippet.jsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState, useRef } from 'react'
 import { connect } from 'react-redux'
 import AceEditor from 'react-ace'
+import bemi from 'bemi'
 
 import 'brace/theme/textmate'
 
@@ -18,6 +19,8 @@ import { existingSnippetOptions } from '../entries/aceEditorOptions'
 
 import '../styles/Snippet.styl'
 
+const block = bemi('snippet')
+
 const Snippet = props => {
   const { snippet, dispatch } = props
   const [ isShowEmbed, setIsShowEmbed ] = useState(false)
@@ -49,10 +52,10 @@ const Snippet = props => {
   const rawUrl = getRawUrl(snippet.get('id'))
 
   const renderEmbed = () => (
-    <div className={`snippet-embed ${isShowEmbed}`}>
-      <div className="snippet-embed-content">
-        <span className="snippet-embed-close" onClick={toggleEmbed} role="presentation" />
-        <p className="snippet-embed-text">
+    <div className={block.e('embed', { show: isShowEmbed, hide: !isShowEmbed })}>
+      <div className={block.e('embed-content')}>
+        <span className={block.e('embed-close')} onClick={toggleEmbed} role="presentation" />
+        <p className={block.e('embed-text')}>
           In order to embed this content into your website or blog,
           simply copy and paste code provided below:
         </p>
@@ -62,36 +65,36 @@ const Snippet = props => {
           type="text"
           defaultValue={`<script src='http://xsnippet.org/${snippet.get('id')}/embed/'></script>`}
         />
-        <button className="snippet-button embed" onClick={copyToClipboard}>Copy</button>
+        <button className={block.e('button', 'embed')} onClick={copyToClipboard}>Copy</button>
       </div>
     </div>
   )
 
   const renderTags = () => (
-    <div className="snippet-data-tags">
-      {snippet.get('tags').map(item => <span className="snippet-data-tag" key={item}>{item}</span>)}
+    <div className={block.e('data-tags')}>
+      {snippet.get('tags').map(item => <span className={block.e('data-tag')} key={item}>{item}</span>)}
     </div>
   )
 
-  const renderMetadata = () => (<span className="snippet-data-meta">{formatDate(snippet.get('created_at'))}, by Guest</span>)
+  const renderMetadata = () => (<span className={block.e('data-meta')}>{formatDate(snippet.get('created_at'))}, by Guest</span>)
 
   return (
-    <div className="snippet" key="Snippet">
-      <div className="snippet-header">
-        <div className="snippet-data">
-          <span className="snippet-data-title">{title}</span>
+    <div className={block.b()}>
+      <div className={block.e('header')}>
+        <div className={block.e('data')}>
+          <span className={block.e('data-title')}>{title}</span>
           {renderTags()}
           {renderMetadata()}
         </div>
-        <div className="snippet-data-actions">
-          <span className="snippet-data-lang">{syntax}</span>
+        <div className={block.e('data-actions')}>
+          <span className={block.e('data-lang')}>{syntax}</span>
           <div>
-            <a href={rawUrl} className="snippet-button">Raw</a>
-            <button className="snippet-button snippet-button-download" onClick={download}>
+            <a href={rawUrl} className={block.e('button')}>Raw</a>
+            <button className={block.e('button', 'download')} onClick={download}>
               Download
             </button>
             <button
-              className={`toggle-embed snippet-button ${isShowEmbed}`}
+              className={`${block.e('button', { show: isShowEmbed, hide: !isShowEmbed })} toggle-embed`}
               key="snippet-details"
               onClick={toggleEmbed}
               onKeyPress={toggleEmbed}
@@ -102,7 +105,7 @@ const Snippet = props => {
         </div>
       </div>
       {renderEmbed()}
-      <div className="snippet-code">
+      <div className={block.e('code')}>
         <AceEditor
           mode={snippet.get('syntax')}
           width="100%"
diff --git a/src/styles/Header.styl b/src/styles/Header.styl
index 508943f..95af56e 100644
--- a/src/styles/Header.styl
+++ b/src/styles/Header.styl
@@ -13,13 +13,15 @@
   height: offset
   z-index: 5
   box-shadow: 0 2px 2px 0 border-dark
-  &-inner
+
+  &__inner
     display: flex
     flex-flow: row nowrap
     justify-content: space-between
     align-items: center
     width: "calc(100% - %s)" % offset
-  &-logo
+
+  &__logo
     width: offset
     height: offset
     background-color: header-logo-bg
@@ -30,7 +32,8 @@
       align-items: center
     & img
       width: 78%
-  &-slogan
+
+  &__slogan
     color:text-dark
     font-family: font-raleway
     font-size: 23px
@@ -39,7 +42,8 @@
     letter-spacing: .6px
     &-x
       color: text-green
-  &-sign-in
+
+  &__sign-in
     display: none
     pointer-events: none
     margin-right: 20px
diff --git a/src/styles/NewSnippet.styl b/src/styles/NewSnippet.styl
index 51ee6e5..962d4b8 100644
--- a/src/styles/NewSnippet.styl
+++ b/src/styles/NewSnippet.styl
@@ -10,8 +10,8 @@ lang-bar-width-tablet = 170px
   min-height: 83vh
   background-color: snippet-content-light
   box-shadow: 0 2px 2px 0 border-dark
-  &-code,
-  &-lang
+  &__code,
+  &__lang
     &-header
       display: flex
       flex-flow: row nowrap
@@ -20,7 +20,7 @@ lang-bar-width-tablet = 170px
       padding: 20px 20px 19px
       box-sizing: border-box
 
-  &-code
+  &__code
     flex: 1
     position: relative
     padding: 0 0 63px 0
@@ -64,7 +64,7 @@ lang-bar-width-tablet = 170px
           background-color: snippet-post-button-active
           cursor: pointer
 
-  &-lang
+  &__lang
     &-wrapper
       display: flex
       flex-flow: column nowrap
@@ -104,12 +104,13 @@ lang-bar-width-tablet = 170px
 
 @media (max-width: tablet-breakpoint)
   .new-snippet
-    &-code,
-    &-lang
+    &__code,
+    &__lang
       &-header
         flex-flow: column nowrap
         min-height: 105px
-    &-code
+
+    &__code
       &-wrapper
         width: "calc(100% - %s)" % lang-bar-width-tablet
       &-header
@@ -120,6 +121,7 @@ lang-bar-width-tablet = 170px
           width: 100%
         & > input
           margin-right: 0
-    &-lang
+
+    &__lang
       &-wrapper
         width: lang-bar-width-tablet
diff --git a/src/styles/RecentSnippets.styl b/src/styles/RecentSnippets.styl
index ca40cd7..62d0c1a 100644
--- a/src/styles/RecentSnippets.styl
+++ b/src/styles/RecentSnippets.styl
@@ -4,7 +4,7 @@
   display: flex
   flex-flow: column nowrap
   font-family: font-roboto
-  &-item
+  &__item
     display: flex
     flex-flow: row nowrap
     justify-content: space-between
@@ -15,7 +15,7 @@
     box-shadow: 0 2px 2px 0 border-dark
     background-color: snippet-content-light
 
-  &-meta
+  &__meta
     display: flex
     flex-flow: column nowrap
     justify-content: space-between
@@ -55,18 +55,18 @@
       font-weight: 300
       color: recent-snippet-meta
 
-  &-actions
+  &__actions
     display: flex
     flex-flow: column nowrap
     justify-content: space-between
 
-  &-lang
+  &__lang
     padding-bottom: 17px
     text-align: right
     font-size: 14px
     color: recent-snippet-lang
 
-  &-button
+  &__button
     margin-right: 0
     padding: 10px 14px
     color: text-light
@@ -79,7 +79,7 @@
     text-decoration: none
     &:hover
       background-color: button-active
-    &.light
+    &--light
       margin-right: 8px
       padding: 9px 14px
       color: recent-snippet-text
@@ -93,7 +93,7 @@
   flex-flow: row nowrap
   justify-content: flex-end
   padding-top: 10px
-  &-item
+  &__item
     padding: 9px 14px
     font-size: 14px
     font-weight: 300
@@ -103,25 +103,28 @@
     &:hover
       color: text-light
       background-color: button-active
-    &.next
+    &--next
       margin-right: 4px
-    &.disabled
+    &--disabled
       pointer-events: none
       background-color: pagination-bg-inactive
 
 @media (max-width: tablet-breakpoint)
   .recent-snippet
-    &-item
+    &__item
       flex-flow: column nowrap
       padding: 15px
-    &-meta
+
+    &__meta
       max-width: 100%
       &-title
         font-size: 16px
       &-tags
         margin: 5px 0
-    &-actions
+
+    &__actions
       & div
         text-align: right
-    &-lang
+
+    &__lang
       padding-bottom: 8px
diff --git a/src/styles/Sidebar.styl b/src/styles/Sidebar.styl
index 4a84d8f..b7c9245 100644
--- a/src/styles/Sidebar.styl
+++ b/src/styles/Sidebar.styl
@@ -7,12 +7,14 @@
   margin-top: offset
   background-color: sidebar-bg-normal
   z-index: 6
-  &-list
+
+  &__list
     width: 100%
-  &-item
+
+  &__item
     position: relative
     height: offset
-    &-border
+    &--border
       border-bottom: 1px solid rgba(color-white-smoke-white-s0, .1)
     & a
       display: flex
@@ -21,6 +23,7 @@
       align-items: center
       height: 100%
       text-decoration: none
+
       &.active,
       &:hover
         background-color: sidebar-bg-active
diff --git a/src/styles/Snippet.styl b/src/styles/Snippet.styl
index 6d611ea..38a3635 100644
--- a/src/styles/Snippet.styl
+++ b/src/styles/Snippet.styl
@@ -8,7 +8,7 @@ button-group-width = 312px
   flex-flow: column nowrap
   background-color: snippet-content-light
   box-shadow: 0 2px 2px 0 border-dark
-  &-header
+  &__header
     display: flex
     flex-flow: row nowrap
     justify-content: space-between
@@ -19,7 +19,7 @@ button-group-width = 312px
     border-left: 40px solid snippet-header-border
     font-family: font-roboto
 
-  &-data
+  &__data
     display: flex
     flex-flow: column nowrap
     justify-content: space-between
@@ -57,7 +57,7 @@ button-group-width = 312px
       &:last-shild
         margin-right: 0
 
-  &-button
+  &__button
     margin-right: 10px
     padding: 11px 21px
     color: text-light
@@ -71,11 +71,11 @@ button-group-width = 312px
     text-decoration: none
     &:last-child
       margin-right: 0
-    &.true
+    &--show
     &:hover
       background-color: text-light
       color: button-active
-    &.embed
+    &--embed
       margin-left: 10px
       padding: 8px 18px
       font-size: 12px
@@ -85,7 +85,7 @@ button-group-width = 312px
         color: text-light
         background-color: button-embed-hover
 
-  &-embed
+  &__embed
     display: block
     position: relative
     max-height: 180px
@@ -93,7 +93,7 @@ button-group-width = 312px
     background-color: snippet-header-embed
     border-left: 40px solid snippet-header-embed-dark
     overflow: hidden
-    &.false
+    &--hide
       max-height: 0
       transition: max-height .5s ease-out
     &-content
@@ -135,22 +135,25 @@ button-group-width = 312px
 
 @media (max-width: tablet-breakpoint)
   .snippet
-    &-header
+    &__header
       flex-flow: column nowrap
-    &-data
+
+    &__data
       max-width: 100%
       &-lang
         padding-bottom: 8px
       &-title
         font-size: 17px
         line-height: 17px
-    &-button
+
+    &__button
       padding: 9px 16px
       font-size: 12px
-      &.embed
+      &--embed
         margin-top: 8px
         margin-left: 0
-    &-embed
+
+    &__embed
       &-close
         display: none
       & input
diff --git a/tests/components/Sidebar.test.jsx b/tests/components/Sidebar.test.jsx
index 7ac88dd..27e571b 100644
--- a/tests/components/Sidebar.test.jsx
+++ b/tests/components/Sidebar.test.jsx
@@ -7,7 +7,7 @@ import Sidebar from '../../src/components/Sidebar'
 describe('Sidebar', () => {
   it('should have three items', () => {
     const wrapper = shallow(<Sidebar />)
-    const navList = wrapper.find('.sidebar-list')
+    const navList = wrapper.find('.sidebar__list')
 
     expect(navList.children()).toHaveLength(3)
   })