task(core): partly apply scss modules for blocks [#94]

babajka · Mar 12, 2020 · b70dda9 · b70dda9
1 parent 0534637
commit b70dda9
Show file tree

Hide file tree

Showing 20 changed files with 91 additions and 75 deletions.
diff --git a/components/articles/blocks/ArticlesByTag2.js b/components/articles/blocks/ArticlesByTag2.js
@@ -1,8 +1,7 @@
-import './articlesByTag2.scss';
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
+import bem from 'bem-css-modules';
 
 import Text from 'components/common/Text';
 import ArticleCard from 'components/articles/cards/ArticleCard';
@@ -11,9 +10,12 @@ import { IdsArray } from 'utils/customPropTypes';
 import { getTagLink, getTopicLink, getTagImageRenderer } from 'utils/tags';
 
 import { TOPIC } from 'constants/misc';
+import styles from './articlesByTag2.module.scss';
 
 import BlockWrapper from './BlockWrapper';
 
+const b = bem(styles);
+
 const ArticlesByTag2 = ({ block, data }) => {
   const { tagId, articlesIds } = block;
   const { tags, articles } = data;
@@ -25,41 +27,33 @@ const ArticlesByTag2 = ({ block, data }) => {
   const topicLink = getTopicLink({ topic: topicSlug, dark: true });
 
   return (
-    <BlockWrapper className="articles-by-tag-2" withBackground>
-      <div
-        className={cn('articles-by-tag-2__labels', {
-          'articles-by-tag-2__labels--right': isBrand,
-        })}
-      >
-        <div className="articles-by-tag-2__top-mobile-labels">
+    <BlockWrapper className={b()} withBackground>
+      <div className={b('labels', { right: isBrand })}>
+        <div className={b('top-mobile-labels')}>
           {isBrand &&
             getTagImageRenderer({
               theme: 'dark',
-              className: 'articles-by-tag-2__logo',
+              className: b('logo'),
             })(tag)}
-          <div className="articles-by-tag-2__label">
+          <div className={b('label')}>
             <Text id={`topic.${topicSlug}_essentials`} />: {tagLink}
           </div>
         </div>
-        <div className="articles-by-tag-2__label articles-by-tag-2__bottom-desktop-label">
-          {topicLink}
-        </div>
+        <div className={cn(b('label'), b('bottom-desktop-label'))}>{topicLink}</div>
       </div>
 
-      <div className="articles-by-tag-2__cards">
-        <div className="articles-by-tag-2__card-1">
+      <div className={b('cards')}>
+        <div className={b('card-1')}>
           <ArticleCard {...first} context={['articles-by-tag-2']} />
         </div>
 
-        <div className="articles-by-tag-2__card-2">
+        <div className={b('card-2')}>
           <ArticleCard {...second} context={['articles-by-tag-2']} />
         </div>
       </div>
 
-      <div className="articles-by-tag-2__bottom-labels">
-        <div className="articles-by-tag-2__label articles-by-tag-2__bottom-mobile-label">
-          {topicLink}
-        </div>
+      <div className={b('bottom-labels')}>
+        <div className={cn(b('label'), b('bottom-mobile-label'))}>{topicLink}</div>
       </div>
     </BlockWrapper>
   );

diff --git a/components/articles/blocks/ArticlesByTag3.js b/components/articles/blocks/ArticlesByTag3.js
@@ -1,15 +1,18 @@
-import './articlesByTag3.scss';
-
 import React from 'react';
 import PropTypes from 'prop-types';
+import cn from 'classnames';
+import bem from 'bem-css-modules';
 
 import ArticleCard from 'components/articles/cards/ArticleCard';
 
 import { IdsArray } from 'utils/customPropTypes';
 import { getTagLink, getTopicLink } from 'utils/tags';
+import styles from './articlesByTag3.module.scss';
 
 import BlockWrapper from './BlockWrapper';
 
+const b = bem(styles);
+
 const ArticlesByTag3 = ({ block, data }) => {
   const { tagId, articlesIds } = block;
   const { tags, articles } = data;
@@ -18,23 +21,23 @@ const ArticlesByTag3 = ({ block, data }) => {
   const topicLink = getTopicLink({ topic: tag.topicSlug, dark: true });
 
   return (
-    <BlockWrapper className="articles-by-tag-3">
-      <div className="articles-by-tag-3__combined-title-line articles-by-tag-3__title">
+    <BlockWrapper>
+      <div className={cn(b('combined-title-line'), b('title'))}>
         {tagLink}
         {topicLink}
       </div>
 
-      <div className="articles-by-tag-3__separate-header articles-by-tag-3__title">{tagLink}</div>
+      <div className={cn(b('separate-header'), b('title'))}>{tagLink}</div>
 
-      <div className="articles-by-tag-3__cards">
+      <div className={b('cards')}>
         {articlesIds.map((id, index) => (
-          <div key={id} className={`articles-by-tag-3__card-${index + 1}`}>
+          <div key={id} className={b(`card-${index + 1}`)}>
             <ArticleCard {...articles[id]} context={['articles-by-tag-3']} />
           </div>
         ))}
       </div>
 
-      <div className="articles-by-tag-3__separate-footer articles-by-tag-3__title">{topicLink}</div>
+      <div className={cn(b('separate-footer'), b('title'))}>{topicLink}</div>
     </BlockWrapper>
   );
 };

diff --git a/components/articles/blocks/BannerBlock.js b/components/articles/blocks/BannerBlock.js
@@ -1,14 +1,16 @@
-import './banner.scss';
-
 import React from 'react';
 import PropTypes from 'prop-types';
+import block from 'bem-css-modules';
+import cn from 'classnames';
 
 import Picture from 'components/common/Picture';
 import ExternalLink from 'components/common/ExternalLink';
 import { useLocalization } from 'components/common/Text';
+import styles from './banner.module.scss';
 
 import BlockWrapper from './BlockWrapper';
 
+const b = block(styles);
 const LINK = 'https://map.wir.by?utm_source=wirby-main-page';
 
 const getLink = (width, name) =>
@@ -26,12 +28,12 @@ const BANNERS = Object.entries({
 }, {});
 
 const BannerBlock = ({ block: { banner } }) => {
-  const title = useLocalization('banners.mapa-title');
+  const title = useLocalization(`banners.${banner}-title`);
   return (
     <BlockWrapper>
-      <div className={`banner banner-${banner}`}>
+      <div className={b()}>
         <ExternalLink href={LINK}>
-          <div className={`banner__title banner-${banner}__title`}>{title}</div>
+          <div className={cn(b('title'), b(`${banner}-title`))}>{title}</div>
           <Picture sources={BANNERS} alt={title} />
         </ExternalLink>
       </div>

diff --git a/components/articles/blocks/BlockWrapper.js b/components/articles/blocks/BlockWrapper.js
@@ -1,8 +1,10 @@
-import './blockWrapper.scss';
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
+import block from 'bem-css-modules';
+import styles from './blockWrapper.module.scss';
+
+const b = block(styles);
 
 const BlockWrapper = ({ className, withBackground, negativeTop, children }) => (
   <div
@@ -12,8 +14,7 @@ const BlockWrapper = ({ className, withBackground, negativeTop, children }) => (
         'wir-with-background': withBackground,
         'wir-no-background': !withBackground,
       },
-      'block',
-      { 'block--negative-margin-top': negativeTop },
+      b({ 'negative-margin-top': negativeTop }),
       className
     )}
   >

diff --git a/components/articles/blocks/DiaryBlock.js b/components/articles/blocks/DiaryBlock.js
@@ -1,9 +1,7 @@
-import './diary.scss';
-
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import cn from 'classnames';
+import block from 'bem-css-modules';
 
 import Link from 'components/common/Link';
 import Text from 'components/common/Text';
@@ -19,9 +17,12 @@ import fiberyToString from 'utils/fibery/toString';
 import { SHORT_DATE_FORMAT } from 'constants';
 import { DIARY_PICTURE_WIDTH } from 'constants/misc';
 import { ROUTES_NAMES } from 'routes';
+import styles from './diary.module.scss';
 
 import BlockWrapper from './BlockWrapper';
 
+const b = block(styles);
+
 const mapStateToProps = (state, { lang }) => ({
   diary: diarySelectors.getCurrent(state, lang),
 });
@@ -38,10 +39,10 @@ const DiaryBlock = ({ diary, fetchData }) => {
 
   return (
     <>
-      <BlockWrapper className="diary" negativeTop>
-        <div className="diary__content">
+      <BlockWrapper negativeTop>
+        <div className={b('content')}>
           <Link
-            className={cn('diary__picture', { 'diary__picture--no-image': !diaryImage })}
+            className={b('picture', { 'no-image': !diaryImage })}
             route={ROUTES_NAMES.diary}
             params={{ slug }}
             noStyles
@@ -50,24 +51,24 @@ const DiaryBlock = ({ diary, fetchData }) => {
               <Image alt={name} sourceSizes={[DIARY_PICTURE_WIDTH]} baseUrl={diaryImage} mode="x" />
             )}
           </Link>
-          <div className="diary__text-content">
-            <div className="diary__title">
-              <span className="diary__date">{formatDate(date, SHORT_DATE_FORMAT)}</span>
-              <span className="diary__year">{getYear(date)}</span>
-              <span className="diary__name">{name}</span>
+          <div className={b('text-content')}>
+            <div className={b('title')}>
+              <span className={b('date')}>{formatDate(date, SHORT_DATE_FORMAT)}</span>
+              <span>{getYear(date)}</span>
+              <span>{name}</span>
               <Text id="diary.wrote" />:
             </div>
             {text && (
-              <div className="diary__text-wrap">
-                <Link className="diary__text" route={ROUTES_NAMES.diary} params={{ slug }} noStyles>
+              <div className={b('text-wrap')}>
+                <Link className={b('text')} route={ROUTES_NAMES.diary} params={{ slug }} noStyles>
                   {fiberyToString(text.content)}
                 </Link>
                 <Link route={ROUTES_NAMES.diary} params={{ slug }}>
                   <Text id="diary.more" />
                 </Link>
               </div>
             )}
-            <DiaryArrows className="diary__arrows" size={24} />
+            <DiaryArrows className={b('arrows')} size={24} />
           </div>
         </div>
       </BlockWrapper>

diff --git a/components/articles/blocks/TagPageBlockB.js b/components/articles/blocks/TagPageBlockB.js
@@ -1,5 +1,3 @@
-import './tagPageBlockB.scss';
-
 import React from 'react';
 import PropTypes from 'prop-types';
 

diff --git a/components/articles/blocks/TagPageBlockCD.js b/components/articles/blocks/TagPageBlockCD.js
@@ -1,5 +1,3 @@
-import './tagPageBlockCD.scss';
-
 import React from 'react';
 import PropTypes from 'prop-types';
 

diff --git a/components/articles/blocks/TagsByTopic.js b/components/articles/blocks/TagsByTopic.js
@@ -1,5 +1,3 @@
-import './tagsByTopic.scss';
-
 import React from 'react';
 import PropTypes from 'prop-types';
 

diff --git a/components/articles/blocks/TwoArticlesInRow.js b/components/articles/blocks/TwoArticlesInRow.js
@@ -1,19 +1,23 @@
-import './twoInRow.scss';
-
 import React from 'react';
 import PropTypes from 'prop-types';
+import cn from 'classnames';
+import bem from 'bem-css-modules';
 
 import ArticleCard from 'components/articles/cards/ArticleCard';
 import { ArticleShape } from 'utils/customPropTypes';
+import styles from './twoInRow.module.scss';
 
 import BlockWrapper from './BlockWrapper';
 
+const b = bem(styles);
+
 const TwoArticlesInRow = ({ className, first, second }) => (
-  <BlockWrapper className={`two-in-row ${className}`}>
-    <div className="two-in-row__first">
+  <BlockWrapper className={cn(b(), className)}>
+    <div className={b('first')}>
       <ArticleCard {...first} context={['two-in-row', 'first']} />
     </div>
-    <div className="two-in-row__second">
+    {/* <div className={b('second')}> */}
+    <div>
       <ArticleCard {...second} context={['two-in-row', 'second']} />
     </div>
   </BlockWrapper>

diff --git a/components/articles/blocks/articlesByTag3.module.scss b/components/articles/blocks/articlesByTag3.module.scss
@@ -33,6 +33,10 @@
     flex-direction: row;
     justify-content: space-between;
   }
+
+  &__card-1 {
+    display: block;
+  }
 }
 
 @include screen-desktop {

diff --git a/components/articles/blocks/banner.module.scss b/components/articles/blocks/banner.module.scss
@@ -17,10 +17,8 @@
     line-height: 36px;
     position: absolute;
   }
-}
 
-.banner-mapa {
-  &__title {
+  &__mapa-title {
     @include screen-desktop {
       height: 108px;
       left: 330px;

diff --git a/components/articles/blocks/blockWrapper.module.scss b/components/articles/blocks/blockWrapper.module.scss
@@ -2,19 +2,22 @@
 @import 'styles/variables';
 
 .block {
-  &.wir-no-background {
+  &:global(.wir-no-background) {
     margin-top: 60px;
 
+    // FIXME(@uladbohdan): refactor
+    // https://trello.com/c/NTBa9AE1/495-block-wrapper-margin-fix
+    // to eliminate this workaround by properly handling Block margins.
+
     @include screen-tablet-touch-mobile {
-      // FIXME: to eliminate this workaround by properly handling Block margins.
       &.tag-page-block-b,
       &.tag-page-block-cd {
         margin-top: 0;
       }
     }
   }
 
-  &.wir-with-background {
+  &:global(.wir-with-background) {
     background-color: $primary-black;
     margin-bottom: 20px;
     margin-top: 80px;

diff --git a/...articles/blocks/tagPageBlockB.module.scss → ...onents/articles/blocks/tagPageBlockB.scss b/...articles/blocks/tagPageBlockB.module.scss → ...onents/articles/blocks/tagPageBlockB.scss
diff --git a/...rticles/blocks/tagPageBlockCD.module.scss → ...nents/articles/blocks/tagPageBlockCD.scss b/...rticles/blocks/tagPageBlockCD.module.scss → ...nents/articles/blocks/tagPageBlockCD.scss
diff --git a/...s/articles/blocks/tagsByTopic.module.scss → components/articles/blocks/tagsByTopic.scss b/...s/articles/blocks/tagsByTopic.module.scss → components/articles/blocks/tagsByTopic.scss
diff --git a/components/specials/diary/DiaryArrows.js b/components/specials/diary/DiaryArrows.js
@@ -1,11 +1,11 @@
-import './diaryArrows.scss';
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import cn from 'classnames';
 
 import Clickable from 'components/common/Clickable';
 import { diaryActions, diarySelectors } from 'redux/ducks/diary';
+import styles from './diaryArrows.module.scss';
 
 import ArrowIcon from './ArrowIcon';
 
@@ -20,7 +20,7 @@ const mapDispatchToProps = {
 };
 
 const DiaryArrows = ({ className, size, getPrev, getNext, isNextAvailable }) => (
-  <div className={`diary-arrows ${className}`}>
+  <div className={cn(styles.arrows, className)}>
     <Clickable onClick={getPrev} linkStyle titleId="diary.previous">
       <ArrowIcon direction="left" size={size} />
     </Clickable>

diff --git a/components/specials/diary/DiaryLinkArrows.js b/components/specials/diary/DiaryLinkArrows.js
@@ -1,4 +1,4 @@
-import './diaryArrows.scss';
+import './diaryArrows.module.scss';
 
 import React from 'react';
 import PropTypes from 'prop-types';

diff --git a/components/specials/diary/diaryArrows.module.scss b/components/specials/diary/diaryArrows.module.scss
@@ -1,4 +1,4 @@
-.diary-arrows {
+.arrows {
   align-items: center;
   display: flex;
   flex-direction: row;