Fixed article stories in Storybook (#7884)

app/javascript/articles/LoadingArticle.jsx

@@ -2,15 +2,14 @@ import { h } from 'preact';
 import PropTypes from 'prop-types';
 
 export const LoadingArticle = ({ version }) => {
-  const cover =
-    version === 'featured' && (
-      <div className="crayons-story__cover">
-        <div
-          className="crayons-scaffold crayons-story__cover__image"
-          loading="lazy"
-        />
-      </div>
-    );
+  const cover = version === 'featured' && (
+    <div className="crayons-story__cover">
+      <div
+        className="crayons-scaffold crayons-story__cover__image"
+        loading="lazy"
+      />
+    </div>
+  );
   return (
     <div className="crayons-story">
       {cover}

app/javascript/articles/__stories__/Article.stories.jsx

@@ -10,7 +10,6 @@ import {
   articleWithComments,
   featuredArticle,
 } from '../__tests__/utilities/articleUtilities';
-import { articleDecorator } from './articleDecorator';
 
 import '../../../assets/stylesheets/articles.scss';
 
@@ -21,7 +20,7 @@ const commonProps = {
 export default {
   title: 'App Components/Article/Standard',
   component: Article,
-  decorators: [withKnobs, articleDecorator],
+  decorators: [withKnobs],
 };
 
 export const DefaultArticle = () => (
@@ -120,7 +119,7 @@ export const OnReadingList = () => (
   <Article
     {...commonProps}
     isBookmarked={boolean('isBookmarked', true)}
-    article={object('article', articleWithComments)}
+    article={object('article', article)}
     currentTag={text('currentTag')}
   />
 );

app/javascript/articles/__stories__/LoadingArticle.stories.jsx

@@ -1,12 +1,12 @@
 import { h } from 'preact';
 import { LoadingArticle } from '..';
 import '../../../assets/stylesheets/articles.scss';
-import { articleDecorator } from './articleDecorator';
 
 export default {
   title: 'App Components/Article Loading',
   component: LoadingArticle,
-  decorators: [articleDecorator],
+  // Using an arbitrary width here. This is roughly the size of articles in Storybook
+  decorators: [(story) => <div style={{ minWidth: '509px' }}>{story()}</div>],
 };
 
 export const DefaultArticle = () => <LoadingArticle />;
@@ -15,9 +15,7 @@ DefaultArticle.story = {
   name: 'default',
 };
 
-export const FeaturedLoading = () => (
-  <LoadingArticle version="featured" />
-);
+export const FeaturedLoading = () => <LoadingArticle version="featured" />;
 
 FeaturedLoading.story = {
   name: 'featured',

app/javascript/articles/__stories__/articleDecorator.jsx

@@ -1,14 +0,0 @@
-import { h } from 'preact';
-import { defaultChildrenPropTypes } from '../../common-prop-types';
-
-const ArticleWrapper = ({ children }) => (
-  <div className="articles-list">{children}</div>
-);
-ArticleWrapper.propTypes = {
-  children: defaultChildrenPropTypes.isRequired,
-};
-ArticleWrapper.displayName = 'ArticleWrapper';
-
-export const articleDecorator = (getStory) => (
-  <ArticleWrapper>{getStory()}</ArticleWrapper>
-);

app/javascript/articles/__stories__/podcastArticle.stories.jsx

@@ -7,7 +7,6 @@ import {
   podcastEpisodeArticle,
   assetPath,
 } from '../__tests__/utilities/articleUtilities';
-import { articleDecorator } from './articleDecorator';
 
 import '../../../assets/stylesheets/articles.scss';
 
@@ -23,7 +22,7 @@ const commonProps = {
 
 export default {
   title: 'App Components/Article/Podcast',
-  decorators: [withKnobs, articleDecorator],
+  decorators: [withKnobs],
 };
 
 export const Podcast = () => (

app/javascript/articles/__stories__/userArticle.stories.jsx

@@ -6,7 +6,6 @@ import {
   assetPath,
   userArticle,
 } from '../__tests__/utilities/articleUtilities';
-import { articleDecorator } from './articleDecorator';
 
 import '../../../assets/stylesheets/articles.scss';
 
@@ -22,7 +21,7 @@ const commonProps = {
 
 export default {
   title: 'App Components/Article/User',
-  decorators: [withKnobs, articleDecorator],
+  decorators: [withKnobs],
 };
 
 export const UserArticle = () => (

app/javascript/articles/__stories__/videoArticles.stories.jsx

@@ -6,7 +6,6 @@ import {
   videoArticle,
   assetPath,
 } from '../__tests__/utilities/articleUtilities';
-import { articleDecorator } from './articleDecorator';
 
 import '../../../assets/stylesheets/articles.scss';
 
@@ -22,7 +21,7 @@ const commonProps = {
 
 export default {
   title: 'App Components/Article/Video',
-  decorators: [withKnobs, articleDecorator],
+  decorators: [withKnobs],
 };
 
 export const Default = () => (

app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap

@@ -1657,7 +1657,7 @@ exports[`<Article /> component should render as saved on reading list 1`] = `
               <img
                 alt="{comment.username} avatar"
                 class="crayons-avatar__image"
-                src="/uploads/user/profile_image/6/79732fcf-5655-426a-a7f0-18c737c3f8e8.png"
+                src="/images/7.png"
               />
             </span>
             Dr. Naoma Rice
@@ -2461,7 +2461,7 @@ exports[`<Article /> component should render with comments 1`] = `
               <img
                 alt="{comment.username} avatar"
                 class="crayons-avatar__image"
-                src="/uploads/user/profile_image/6/79732fcf-5655-426a-a7f0-18c737c3f8e8.png"
+                src="/images/7.png"
               />
             </span>
             Dr. Naoma Rice

app/javascript/articles/__tests__/utilities/articleUtilities.js

@@ -166,8 +166,7 @@ export const articleWithComments = {
       path: '/naoma_dr_rice/comment/n',
       username: 'naoma_dr_rice',
       name: 'Dr. Naoma Rice',
-      profile_image_90:
-        '/uploads/user/profile_image/6/79732fcf-5655-426a-a7f0-18c737c3f8e8.png',
+      profile_image_90: '/images/7.png',
     },
   ],
   positive_reactions_count: 428,

app/javascript/articles/components/CommentListItem.jsx

@@ -13,10 +13,11 @@ export const CommentListItem = ({ comment }) => (
     className="crayons-comment pl-2 cursor-pointer"
     role="presentation"
     onClick={(_event) => {
-      if (_event.which > 1 || _event.metaKey || _event.ctrlKey) { // Indicates should open in _blank
+      if (_event.which > 1 || _event.metaKey || _event.ctrlKey) {
+        // Indicates should open in _blank
         window.open(comment.path, '_blank');
       } else {
-        const fullUrl = window.location.origin + comment.path // InstantClick deals with full urls
+        const fullUrl = window.location.origin + comment.path; // InstantClick deals with full urls
         InstantClick.preload(fullUrl);
         InstantClick.display(fullUrl);
       }

app/javascript/podcasts/__stories__/TodaysPodcasts.stories.jsx

@@ -4,7 +4,6 @@ import '../../../assets/stylesheets/articles.scss';
 import { TodaysPodcasts } from '../TodaysPodcasts';
 import { PodcastEpisode } from '../PodcastEpisode';
 import { podcastArticle } from '../../articles/__tests__/utilities/articleUtilities';
-import { articleDecorator } from '../../articles/__stories__/articleDecorator';
 
 const episodes = [
   podcastArticle,
@@ -16,12 +15,11 @@ const episodes = [
 
 export default {
   title: `App Components/Podcasts/Today's Episodes`,
-  decorators: [articleDecorator],
 };
 
 export const Standard = () => (
   <TodaysPodcasts>
-    {episodes.map(episode => (
+    {episodes.map((episode) => (
       <PodcastEpisode episode={episode} />
     ))}
   </TodaysPodcasts>