Review

src/common/Card/_large/Card_large.js

@@ -8,7 +8,6 @@ export default declMod(
     content({ card: { title, titleColor, image, description } }) {
       return (
         <Fragment>
-          {this.__base(...arguments)}
           <Bem elem="image-container">
             <picture>
               <source

src/common/Card/_medium/Card_medium.js

@@ -6,7 +6,6 @@ export default declMod({ type : 'medium' }, {
   content({card: {title, titleColor, image, description}}) {
     return (
       <Fragment>
-        {this.__base(...arguments)}
         <Bem elem="title-container" tag="header">
           <Bem elem="title" tag="h2" style={{color: titleColor}}>{title}</Bem>
         </Bem>

src/common/Card/_text/Card_text.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { declMod, Bem } from 'bem-react-core';
 
 export default declMod(
@@ -7,21 +7,18 @@ export default declMod(
     block: 'Card',
     content({ card: { title, titleColor, image, description } }) {
       return (
-        <Fragment>
-          {this.__base(...arguments)}
-          <Bem elem="content">
-            <Bem elem="title-container" tag="header">
-              <Bem elem="title" tag="h2" style={{ color: titleColor }}>
-                {title}
-              </Bem>
-            </Bem>
-            <Bem elem="description" tag="p">{description}</Bem>
-            <Bem elem="feedback">
-              <Bem tag="img" src={require(`../../../static/img/Actions.png`)} alt="more" elem="feedback__more" />
-              <Bem tag="img" src={require(`../../../static/img/Heart.png`)} alt="like" elem="feedback__like" />
+        <Bem elem="content">
+          <Bem elem="title-container" tag="header">
+            <Bem elem="title" tag="h2" style={{ color: titleColor }}>
+              {title}
             </Bem>
           </Bem>
-        </Fragment>
+          <Bem elem="description" tag="p">{description}</Bem>
+          <Bem elem="feedback">
+            <Bem tag="img" src={require(`../../../static/img/Actions.png`)} alt="more" elem="feedback__more" />
+            <Bem tag="img" src={require(`../../../static/img/Heart.png`)} alt="like" elem="feedback__like" />
+          </Bem>
+        </Bem>
       );
     },
   },

src/common/Header-Logo/Header-Logo.css

@@ -0,0 +1,3 @@
+.Header-Logo {
+    cursor: pointer;
+}

src/common/Header/Header.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { decl, Bem } from 'bem-react-core';
 
 import 'e:Logo';
@@ -8,10 +8,6 @@ export default decl({
   block: 'Header',
   tag: 'header',
   content() {
-    return (
-      <Fragment>
-        <Bem elem="Logo" tag="img" src={logoSvg} alt="logo"/>
-      </Fragment>
-    );
+    return <Bem elem="Logo" tag="img" src={logoSvg} alt="logo"/>;
   }
 });

src/common/Header/Logo/Header-Logo.css

@@ -1,5 +1,4 @@
 .Header-Logo {
-  cursor: pointer;
   width: 91px;
   height: 29px;
   margin: 43px 0;

src/common/Main/Main.js

@@ -2,15 +2,19 @@ import React, { Fragment } from 'react';
 import { decl } from 'bem-react-core';
 import data from '../../static/data';
 
-import LargeCard from 'b:Card m:large';
-import MediumCard from 'b:Card m:medium';
-import SmallCard from 'b:Card m:small';
-import TextCard from 'b:Card m:text';
+import Card from 'b:Card m:large m:medium m:small m:text';
 
-const getXImage = (path, multiplier) => {
-  const arr = path.split('.');
-  arr[0] = arr[0] + `@${multiplier}x`;
-  return arr.join('.');
+const getImage = (path) => {
+  if (!path) return;
+
+  const chunks = path.split('.');
+  const firstChunk = chunks.shift();
+
+  return {
+    x: path,
+    x2: [firstChunk + '@2x', ...chunks].join('.'),
+    x3: [firstChunk + '@3x', ...chunks].join('.')
+  };
 };
 
 export default decl({
@@ -20,24 +24,14 @@ export default decl({
     return (
       <Fragment>
         {data.map((card, i) => {
-          if(card.image) {
-            card.image = {
-              x: card.image,
-              x2: getXImage(card.image, 2),
-              x3: getXImage(card.image, 3)
-            }
-          }
+          card.image = getImage(card.image);
           switch (card.size) {
             case 'l':
-              return <LargeCard key={i} card={card} type="large" />;
+              return <Card key={i} card={card} type="large" />;
             case 'm':
-              return <MediumCard key={i} card={card} type="medium" />;
+              return <Card key={i} card={card} type="medium" />;
             default:
-              return card.image ? (
-                <SmallCard key={i} card={card} type="small" />
-              ) : (
-                <TextCard key={i} card={card} type="text" />
-              );
+              return <Card key={i} card={card} type={card.image ? 'small' : 'text' } />
           }
         })}
       </Fragment>