Next 9.3 Sass Modules

components/articles/Article.js

@@ -1,5 +1,3 @@
-import styles from 'styles/pages/article.module.scss';
-
 import React from 'react';
 import { useRouter } from 'next/router';
 import flatten from 'lodash/flatten';
@@ -25,6 +23,8 @@ import { renderNodeList } from 'utils/formatters';
 import fiberyRenderer from 'utils/fibery/renderer';
 import host from 'utils/host';
 
+import styles from './article.module.scss';
+
 import CollectionNote from './CollectionNote';
 
 const b = bem(styles);
@@ -63,7 +63,7 @@ const Article = ({
       <MetaArticleItems name="tag" list={tags.map(renderTag)} />
       <MetaArticleItems name="published_time" value={publishAt} />
       <div>
-        <div className="wir-content-padding">
+        <div className={cn('wir-content-padding', styles['article-page-content'])}>
           <div className={b('subtitle')}>{subtitle}</div>
         </div>
         {type === 'text' && (

components/articles/CollectionNote.js

@@ -1,5 +1,3 @@
-import styles from 'styles/pages/article.module.scss';
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import bem from 'bem-css-modules';
@@ -12,6 +10,8 @@ import { CollectionShape, LangType } from 'utils/customPropTypes';
 
 import { ROUTES_NAMES } from 'routes';
 
+import styles from './article.module.scss';
+
 const b = bem(styles);
 
 const CollectionNoteItem = ({ className, hideLink, text, slug }) => (

styles/pages/article.module.scss → components/articles/article.module.scss

@@ -1,6 +1,5 @@
 @import 'styles/responsiveness';
 @import 'styles/variables';
-/* stylelint-disable no-descending-specificity */
 
 $block-spacing: 60px;
 $paragraph-spacing: 24px;
@@ -305,46 +304,6 @@ $content-line-height: (
   }
 }
 
-.article-page-interactive {
-  margin-top: 30px;
-
-  @include screen-touch {
-    margin-top: 40px;
-  }
-
-  @include screen-tablet {
-    margin-top: 50px;
-  }
-
-  @include screen-tablet-large {
-    margin-top: 60px;
-  }
-
-  @include screen-desktop {
-    margin-top: 72px;
-  }
-
-  &__video {
-    height: 200px;
-
-    @include screen-touch {
-      height: 200px;
-    }
-
-    @include screen-tablet {
-      height: 300px;
-    }
-
-    @include screen-tablet-large {
-      height: 400px;
-    }
-
-    @include screen-desktop {
-      height: 600px;
-    }
-  }
-}
-
 .article-page-content {
   font-size: map-get($content-font-size, mobile);
   font-style: normal;
@@ -425,239 +384,3 @@ $content-line-height: (
     height: 48px;
   }
 }
-
-.article-ordered {
-  margin: 0;
-
-  li {
-    margin-top: 24px;
-  }
-}
-
-.right-element {
-  display: inline-block;
-  font-size: 14px;
-  line-height: 21px;
-  margin: 0;
-  margin-bottom: 10px;
-  margin-left: 30px;
-  width: 240px;
-
-  @include screen-touch {
-    margin-left: 60px;
-  }
-
-  @include screen-tablet {
-    float: right;
-    margin-left: 30px;
-  }
-
-  @include screen-tablet-large {
-    float: right;
-    margin-left: 30px;
-  }
-
-  @include screen-desktop {
-    float: right;
-    margin-left: 30px;
-  }
-
-  .article-ordered {
-    padding-left: 24px;
-
-    li {
-      margin-top: 0;
-    }
-  }
-
-  &.article-table,
-  &.article-image {
-    margin-bottom: 0;
-    margin-top: 0;
-
-    @include mobile {
-      margin-bottom: 20px;
-      margin-top: 20px;
-    }
-
-    @include touch {
-      margin-bottom: 20px;
-      margin-top: 20px;
-    }
-  }
-}
-
-.article-note {
-  line-height: 24px;
-
-  th {
-    text-align: left;
-  }
-
-  h1 {
-    font-size: 72px;
-    font-weight: bold;
-    line-height: 72px;
-    margin: 0;
-  }
-
-  p {
-    margin: 0;
-  }
-
-  li {
-    margin: 0;
-  }
-}
-
-.article-image {
-  display: block;
-  margin-bottom: $block-spacing;
-  margin-top: $block-spacing;
-
-  &__image {
-    object-position: 50% 0;
-    width: 100%;
-  }
-
-  &__caption {
-    font-size: 14px;
-    line-height: 18px;
-    margin-top: 9px;
-  }
-}
-
-.article-quote {
-  margin: $block-spacing 0;
-
-  &__text {
-    border-left: 1px solid #000000;
-    font-size: 20px;
-    line-height: 32px;
-    padding-left: 20px;
-
-    @include screen-touch {
-      font-size: 24px;
-      line-height: 36px;
-      padding-left: 24px;
-    }
-
-    @include screen-tablet {
-      font-size: 24px;
-      line-height: 36px;
-      padding-left: 24px;
-    }
-
-    @include screen-tablet-large {
-      font-size: 30px;
-      line-height: 42px;
-      padding-left: 30px;
-    }
-
-    @include screen-desktop {
-      font-size: 30px;
-      line-height: 42px;
-      padding-left: 30px;
-    }
-  }
-
-  &__caption {
-    font-size: 12px;
-    line-height: 20px;
-    margin-top: 8px;
-
-    @include screen-touch {
-      font-size: 14px;
-      line-height: 22px;
-      margin-top: 10px;
-    }
-
-    @include screen-tablet {
-      font-size: 14px;
-      line-height: 22px;
-      margin-top: 10px;
-    }
-
-    @include screen-tablet-large {
-      font-size: 16px;
-      line-height: 24px;
-      margin-top: 12px;
-    }
-
-    @include screen-desktop {
-      font-size: 16px;
-      line-height: 24px;
-      margin-top: 12px;
-    }
-  }
-}
-
-.article-table {
-  display: flex;
-  margin: $block-spacing 0;
-
-  th {
-    border-bottom: 0.25px solid $primary-grey-article-table;
-    padding-bottom: 17px;
-    text-align: left;
-  }
-
-  td {
-    border-bottom: 0.25px solid $primary-grey-article-table;
-    padding: 17px 0;
-  }
-
-  p {
-    margin: 0;
-    padding: 0;
-  }
-}
-
-.article-unordered {
-  list-style: none;
-  margin: 0;
-
-  li {
-    margin-top: 24px;
-
-    &::before {
-      content: '—  ';
-      margin-left: -25px;
-    }
-  }
-
-  p {
-    display: inline;
-    margin: 0;
-    padding: 0;
-  }
-}
-
-.article-poem {
-  margin-bottom: $block-spacing;
-  width: 100%;
-
-  p {
-    margin: auto;
-    text-align: left;
-    width: 50%;
-  }
-}
-
-.article-split {
-  margin: $block-spacing 0;
-
-  tr {
-    display: flex;
-    justify-content: flex-start;
-  }
-
-  td {
-    width: 50%;
-  }
-
-  p {
-    margin: 0;
-    padding: 0;
-  }
-}

components/articles/blocks/ArticlesByTag2.js

@@ -44,11 +44,11 @@ const ArticlesByTag2 = ({ block, data }) => {
 
       <div className={b('cards')}>
         <div className={b('card-1')}>
-          <ArticleCard {...first} context={['articles-by-tag-2']} />
+          <ArticleCard {...first} blockContext={['articles-by-tag-2']} onBackground />
         </div>
 
         <div className={b('card-2')}>
-          <ArticleCard {...second} context={['articles-by-tag-2']} />
+          <ArticleCard {...second} blockContext={['articles-by-tag-2']} onBackground />
         </div>
       </div>
 

components/articles/blocks/ArticlesByTag3.js

@@ -32,7 +32,7 @@ const ArticlesByTag3 = ({ block, data }) => {
       <div className={b('cards')}>
         {articlesIds.map((id, index) => (
           <div key={id} className={b(`card-${index + 1}`)}>
-            <ArticleCard {...articles[id]} context={['articles-by-tag-3']} />
+            <ArticleCard {...articles[id]} blockContext={['articles-by-tag-3']} />
           </div>
         ))}
       </div>

components/articles/blocks/BannerBlock.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import bem from 'bem-css-modules';
 import cn from 'classnames';
 
-import Picture from 'components/common/Picture';
+import Picture from 'components/common/ui/Picture';
 import ExternalLink from 'components/common/ExternalLink';
 import { useLocalization } from 'components/common/Text';
 import styles from './banner.module.scss';

components/articles/blocks/BlockWrapper.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import bem from 'bem-css-modules';
+
 import styles from './blockWrapper.module.scss';
 
 const b = bem(styles);
@@ -10,11 +11,11 @@ const BlockWrapper = ({ className, withBackground, negativeTop, children }) => (
   <div
     className={cn(
       'wir-content-padding',
-      {
-        'wir-with-background': withBackground,
-        'wir-no-background': !withBackground,
-      },
-      b({ 'negative-margin-top': negativeTop }),
+      b({
+        'with-background': withBackground,
+        'no-background': !withBackground,
+        'negative-margin-top': negativeTop,
+      }),
       className
     )}
   >

components/articles/blocks/FeaturedBlock.js

@@ -12,7 +12,7 @@ const FeaturedBlock = ({ block, data }) => {
   const articleData = frozen ? articles[articleId] : latestArticles[0];
   return (
     <BlockWrapper className="featured">
-      <ArticleCard {...articleData} context={['featured']} />
+      <ArticleCard {...articleData} blockContext={['featured']} />
     </BlockWrapper>
   );
 };