diff --git a/app/javascript/articles/LoadingArticle.jsx b/app/javascript/articles/LoadingArticle.jsx index 79abd8bea..4c8e70945 100644 --- a/app/javascript/articles/LoadingArticle.jsx +++ b/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' && ( -
-
-
- ); + const cover = version === 'featured' && ( +
+
+
+ ); return (
{cover} diff --git a/app/javascript/articles/__stories__/Article.stories.jsx b/app/javascript/articles/__stories__/Article.stories.jsx index 563389b0b..7673e9e63 100644 --- a/app/javascript/articles/__stories__/Article.stories.jsx +++ b/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 = () => (
); diff --git a/app/javascript/articles/__stories__/LoadingArticle.stories.jsx b/app/javascript/articles/__stories__/LoadingArticle.stories.jsx index 6df24fc27..0291e8298 100644 --- a/app/javascript/articles/__stories__/LoadingArticle.stories.jsx +++ b/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) =>
{story()}
], }; export const DefaultArticle = () => ; @@ -15,9 +15,7 @@ DefaultArticle.story = { name: 'default', }; -export const FeaturedLoading = () => ( - -); +export const FeaturedLoading = () => ; FeaturedLoading.story = { name: 'featured', diff --git a/app/javascript/articles/__stories__/articleDecorator.jsx b/app/javascript/articles/__stories__/articleDecorator.jsx deleted file mode 100644 index db7d8ff9c..000000000 --- a/app/javascript/articles/__stories__/articleDecorator.jsx +++ /dev/null @@ -1,14 +0,0 @@ -import { h } from 'preact'; -import { defaultChildrenPropTypes } from '../../common-prop-types'; - -const ArticleWrapper = ({ children }) => ( -
{children}
-); -ArticleWrapper.propTypes = { - children: defaultChildrenPropTypes.isRequired, -}; -ArticleWrapper.displayName = 'ArticleWrapper'; - -export const articleDecorator = (getStory) => ( - {getStory()} -); diff --git a/app/javascript/articles/__stories__/podcastArticle.stories.jsx b/app/javascript/articles/__stories__/podcastArticle.stories.jsx index 349ebcb74..7d4f68b9f 100644 --- a/app/javascript/articles/__stories__/podcastArticle.stories.jsx +++ b/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 = () => ( diff --git a/app/javascript/articles/__stories__/userArticle.stories.jsx b/app/javascript/articles/__stories__/userArticle.stories.jsx index 6e2a5da6e..a4d438560 100644 --- a/app/javascript/articles/__stories__/userArticle.stories.jsx +++ b/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 = () => ( diff --git a/app/javascript/articles/__stories__/videoArticles.stories.jsx b/app/javascript/articles/__stories__/videoArticles.stories.jsx index 128b6a2c0..94efc055e 100644 --- a/app/javascript/articles/__stories__/videoArticles.stories.jsx +++ b/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 = () => ( diff --git a/app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap b/app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap index 0481956f9..7fe7ec211 100644 --- a/app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap +++ b/app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap @@ -1657,7 +1657,7 @@ exports[`
component should render as saved on reading list 1`] = ` {comment.username} avatar Dr. Naoma Rice @@ -2461,7 +2461,7 @@ exports[`
component should render with comments 1`] = ` {comment.username} avatar Dr. Naoma Rice diff --git a/app/javascript/articles/__tests__/utilities/articleUtilities.js b/app/javascript/articles/__tests__/utilities/articleUtilities.js index 248ddc903..4616fc3c5 100644 --- a/app/javascript/articles/__tests__/utilities/articleUtilities.js +++ b/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, diff --git a/app/javascript/articles/components/CommentListItem.jsx b/app/javascript/articles/components/CommentListItem.jsx index 33d995631..feab366aa 100644 --- a/app/javascript/articles/components/CommentListItem.jsx +++ b/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); } diff --git a/app/javascript/podcasts/__stories__/TodaysPodcasts.stories.jsx b/app/javascript/podcasts/__stories__/TodaysPodcasts.stories.jsx index 98bf287b1..a029950f9 100644 --- a/app/javascript/podcasts/__stories__/TodaysPodcasts.stories.jsx +++ b/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 = () => ( - {episodes.map(episode => ( + {episodes.map((episode) => ( ))}