task(core): apply scss modules: diary, tag, topic & error pages [#94]

components/common/Button.js

@@ -1,22 +1,18 @@
-import './ui/button.scss';
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
+import block from 'bem-css-modules';
 
 import Icon from 'components/common/ui/Icon';
 
 import { IconPackShape } from 'utils/customPropTypes';
+import styles from './ui/button.module.scss';
+
+const b = block(styles);
 
-const Button = ({ className, children, pending, icon: { pack, name }, ...props }) => (
-  <button
-    type="button"
-    className={cn('wir-kit-button', className, {
-      'wir-kit-button__loading': pending,
-    })}
-    {...props}
-  >
-    {name && <Icon className="wir-kit-button__icon" pack={pack} name={name} />}
+const Button = ({ className, children, /* pending, */ icon: { pack, name }, ...props }) => (
+  <button type="button" className={cn(className, b())} {...props}>
+    {name && <Icon className={b('icon')} pack={pack} name={name} />}
     {children}
   </button>
 );

components/common/layout/error/ErrorMessage.js

@@ -1,6 +1,5 @@
-import './error.scss';
-
 import React from 'react';
+import block from 'bem-css-modules';
 
 import Link from 'components/common/Link';
 import Text from 'components/common/Text';
@@ -9,28 +8,31 @@ import ExternalLink from 'components/common/ExternalLink';
 
 import { ROUTES_NAMES } from 'routes';
 import { NETWORKS } from 'constants/social';
+import styles from './error.module.scss';
+
+const b = block(styles);
 
 const ErrorMessage = ({ code }) => (
-  <div className="error-message">
-    <div className="error-message__title">
-      <span className="error-message__code">{code}</span> <Text id={`errors.${code}-title`} />
+  <div className={b()}>
+    <div className={b('title')}>
+      <span className={b('code')}>{code}</span> <Text id={`errors.${code}-title`} />
     </div>
-    <div className="error-message__subtitle">
+    <div className={b('subtitle')}>
       <Text id={`errors.${code}-subtitle`} />
     </div>
-    <div className="error-message__go-to-main">
+    <div className={b('go-to-main')}>
       <Link route={ROUTES_NAMES.main}>
         <Text id="errors.go-to-main" />
       </Link>
     </div>
-    <div className="error-message__social-buttons">
+    <div className={b('social-buttons')}>
       {NETWORKS.map(({ id, link, color }) => (
-        <ExternalLink key={id} href={link} className="error-message__social-button">
+        <ExternalLink key={id} href={link} className={b('social-button')}>
           <Icon pack="b" name={id} style={{ color }} />
         </ExternalLink>
       ))}
     </div>
-    <div className="error-message__contact-us">
+    <div className={b('contact-us')}>
       <Text id="errors.contact-us" />
       {': '}
       <ExternalLink href="mailto:dev@wir.by">dev@wir.by</ExternalLink>

components/common/ui/button.module.scss

@@ -21,8 +21,4 @@
   &__icon {
     padding-right: 5px;
   }
-
-  &__loading {
-    //TODO
-  }
 }

components/specials/diary/DiaryLinkArrows.js

@@ -1,12 +1,12 @@
-import './diaryArrows.module.scss';
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import cn from 'classnames';
 
 import Link from 'components/common/Link';
 import { diarySelectors } from 'redux/ducks/diary';
 import { ROUTES_NAMES } from 'routes';
+import styles from './diaryArrows.module.scss';
 
 import ArrowIcon from './ArrowIcon';
 
@@ -17,7 +17,7 @@ const mapStateToProps = state => ({
 });
 
 const DiaryLinkArrows = ({ className, prev, next, size, isNextAvailable }) => (
-  <div className={`diary-arrows ${className}`}>
+  <div className={cn(styles.arrows, className)}>
     <Link route={ROUTES_NAMES.diary} params={{ slug: prev.slug }} titleId="diary.previous">
       <ArrowIcon direction="left" size={size} />
     </Link>

package.json

@@ -157,7 +157,7 @@
     },
     {
       "path": ".next/static/**/*.css",
-      "maxSize": "16 kB"
+      "maxSize": "24 kB"
     }
   ]
 }

pages/diary.js

@@ -1,9 +1,10 @@
-import 'styles/pages/diary.scss';
+import styles from 'styles/pages/diary.module.scss';
 
 import React, { useState, useEffect } from 'react';
 import { connect } from 'react-redux';
 import cn from 'classnames';
 import { useRouter } from 'next/router';
+import block from 'bem-css-modules';
 
 import Image from 'components/common/Image';
 import { localize } from 'components/common/Text';
@@ -31,9 +32,7 @@ import { DATE_FORMAT, SHORT_DATE_FORMAT } from 'constants';
 import { DIARY_PICTURE_WIDTH } from 'constants/misc';
 import api from 'constants/api';
 
-const mapStateToProps = (state, { lang }) => ({
-  diary: diarySelectors.getCurrent(state, lang),
-});
+const b = block(styles);
 
 const getShareText = (date, name, lang, content) => {
   const today = dateIsToday(date);
@@ -53,6 +52,10 @@ const getShareText = (date, name, lang, content) => {
   };
 };
 
+const mapStateToProps = (state, { lang }) => ({
+  diary: diarySelectors.getCurrent(state, lang),
+});
+
 const DiaryPage = ({
   diary: { author: { name, diaryImage: image } = {}, date, text: { content } = {} },
   lang,
@@ -78,36 +81,32 @@ const DiaryPage = ({
       <MetaKeywords keywords={metaKeywords} />
       <MetaImage url={image ? `${host}${image}` : DEFAULT_IMAGE} small />
 
-      <div className="wir-content-padding diary-page">
-        <DiaryLinkArrows className="diary-page__arrows diary-page__arrows--top" size={36} />
-        <div className={cn('diary-page__title', { 'diary-page__title--with-image': image })}>
-          <div className="diary-page__date">{formatDate(date, DATE_FORMAT)}</div>
-          <div className="diary-page__name">{name}</div>
+      <div className={cn('wir-content-padding', b())}>
+        <DiaryLinkArrows className={b('arrows')} size={36} />
+        <div className={b('title', { 'with-image': !!image })}>
+          <div>{formatDate(date, DATE_FORMAT)}</div>
+          <div>{name}</div>
         </div>
-        <div
-          className={cn('diary-page__image-container', {
-            'diary-page__image-container--no-image': !image,
-          })}
-        >
+        <div className={b('image-container', { 'no-image': !image })}>
           {image && (
             <Image
-              className="diary-page__image"
+              className={b('image')}
               alt={name}
               sourceSizes={[DIARY_PICTURE_WIDTH]}
               baseUrl={image}
               mode="x"
             />
           )}
         </div>
-        <div className="diary-page__text">{fiberyRenderer(content)}</div>
-        <div className="diary-page__share">
+        <div className={b('text')}>{fiberyRenderer(content)}</div>
+        <div className={b('share')}>
           <ShareButtons urlPath={router.asPath} {...getShareText(date, name, lang, shortContent)} />
         </div>
-        <DiaryLinkArrows className="diary-page__arrows diary-page__arrows--bottom" size={36} />
+        <DiaryLinkArrows className={b('arrows', { bottom: true })} size={36} />
       </div>
 
       {!!articles.length && (
-        <TwoArticlesInRow className="diary-page-extras" first={first} second={second} />
+        <TwoArticlesInRow className={b('extras')} first={first} second={second} />
       )}
     </>
   );

pages/tag.js

@@ -1,8 +1,9 @@
-import 'styles/pages/tag.scss';
+import styles from 'styles/pages/tag.module.scss';
 
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import bem from 'bem-css-modules';
 
 import {
   MetaTitle,
@@ -24,6 +25,7 @@ import host from 'utils/host';
 
 import { TOPICS } from 'constants';
 
+const b = bem(styles);
 const PAGE_LEVEL_ORDER = ['B1', 'C', 'D', 'C', 'B2', 'C', 'D', 'C'];
 
 const BLOCK_BY_LEVEL = {
@@ -74,10 +76,10 @@ const TagPage = ({ lang, routerQuery: { topic }, tag, blocks, articlesCount }) =
       <MetaDescription description={localize(`topic.meta_other_${topic}_description`, lang)} />
       <MetaKeywords keywords={metaKeywords} />
 
-      <div className="tag-page">
-        <div className="wir-content-padding tag-page__header">
-          <div className="tag-page__topic">{getTopicLink({ topic, postfix: 'one' })}</div>
-          <div className="tag-page__title">{title}</div>
+      <div className={b()}>
+        <div className="wir-content-padding">
+          <div className={b('topic')}>{getTopicLink({ topic, postfix: 'one' })}</div>
+          <div className={b('title')}>{title}</div>
         </div>
         <ArticlesBlocks articlesCount={articlesCount} blocks={blocks} />
       </div>

pages/topic.js

@@ -1,8 +1,10 @@
-import 'styles/pages/topic.scss';
+import styles from 'styles/pages/topic.module.scss';
 
 import React 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 { localize } from 'components/common/Text';
@@ -23,22 +25,24 @@ import { renderTag } from 'utils/tags';
 import { TOPICS } from 'constants';
 import { ROUTES_NAMES } from 'routes';
 
+const b = block(styles);
+
 const TopicSection = ({ tag, articles }) => {
   const [first, ...rest] = articles;
   // const showCard = articles.length > 1;
   const showCard = false;
   const list = showCard ? rest : articles;
   return (
-    <div className="topics__section">
-      <div className="topics__section-title">{renderTag(tag)}</div>
+    <div className={b('section')}>
+      <div className={b('section-title')}>{renderTag(tag)}</div>
       {showCard && (
-        <div className="topics__section-image">
+        <div className={b('section-image')}>
           <ArticleCard {...first} size="square-s" />
         </div>
       )}
-      <ul className="topics__section-list">
+      <ul className={b('section-list')}>
         {list.map(({ slug, title }) => (
-          <li key={slug} className="topics__section-list-item">
+          <li key={slug} className={b('section-list-item')}>
             <Link route={ROUTES_NAMES.article} params={{ slug }}>
               {title}
             </Link>
@@ -64,7 +68,7 @@ const TopicPage = ({ lang, routerQuery: { topic }, tags, articlesByTag, articleB
       <MetaDescription description={localize(`topic.meta_${topic}_description`, lang)} />
       <MetaKeywords keywords={localize(`topic.meta_${topic}_keywords`, lang)} />
 
-      <div className="wir-content-padding topics wir-no-background">
+      <div className={cn('wir-content-padding wir-no-background', b())}>
         {filteredTags
           .sort((tagA, tagB) => articlesByTag[tagB.slug].length - articlesByTag[tagA.slug].length)
           .map(tag => (

styles/pages/diary.module.scss

@@ -53,11 +53,11 @@
     margin: 40px 0;
     width: 300px;
   }
-}
 
-.diary-page-extras {
-  padding-bottom: 8rem;
-  padding-top: 1rem;
+  &__extras {
+    padding-bottom: 8rem;
+    padding-top: 1rem;
+  }
 }
 
 @mixin shared-desktop-tablet-large {