5e677daac1
* wip - <PodcastArticle /> component.
* Added filler user avatar for other article types.
* Added <LoadingArticle /> component.
* wip
* wip on <Article /> component.
* Added <Article /> component to barrel file.
* Deleted assets from dummy storybook assets folder.
* Updated podcast article story avatar.
* More work on <Article /> component.
* Refactoring Storybook stories.
* Refactored so main component is just the <Article /> component.
* Added a missing video article property.
* Some refactoring of <Article /> component.
* Added Storybook knobs addon.
* Now <Article /> component supports an isBookmarked prop.
* Fixed podcast Storybook story.
* Made the knobs Storybook addon the first tab
* Added more <Article /> Storybook stories.
* More <Article /> component tweaks.
* Added publish time to <Article /> component stories.
* Made the timeAgo function compatible with Preact.
* Added loading="lazy" attribute to <img /> in <Article /> component.
* Added <Article /> Storybook story for past published date.
* Fixed publish date for <Article /> story data.
* Scrapped random avatars.
* Added snapshots for <Article /> component.
* Added snapshots for <LoadingArticle /> component.
* Now test article entities are shared.
* Fixed some wording of Storybook stories.
* Breaking up Article.jsx to make codeclimate happy.
* Now <Article /> component receives icon props.
* Added knobs for <Article /> icon props.
* Added *.stories.jsx to codeclimate exclusion list.
* Added **/*.stories.jsx to codeclimate exclusion list.
* Alright now we have the good glob for excluding Storybook from codeclimate 😆
* Added org headline changes from low hanging fruit PR.
* Updated <Article /> snapshot for org headline.
170 lines
6 KiB
JavaScript
170 lines
6 KiB
JavaScript
import { h } from 'preact';
|
|
import { storiesOf } from '@storybook/react';
|
|
import { withKnobs, object, text, boolean } from '@storybook/addon-knobs/react';
|
|
import { Article } from '..';
|
|
import {
|
|
article,
|
|
articleWithOrganization,
|
|
articleWithSnippetResult,
|
|
articleWithReadingTimeGreaterThan1,
|
|
articleWithReactions,
|
|
videoArticle,
|
|
articleWithComments,
|
|
podcastArticle,
|
|
podcastEpisodeArticle,
|
|
userArticle,
|
|
assetPath,
|
|
} from '../__tests__/utilities/articleUtilities';
|
|
import { articleDecorator } from './articleDecorator';
|
|
|
|
import '../../../assets/stylesheets/articles.scss';
|
|
|
|
const ICONS = {
|
|
REACTIONS_ICON: assetPath('reactions-stack.png'),
|
|
COMMENTS_ICON: assetPath('comments-bubble.png'),
|
|
VIDEO_ICON: assetPath('video-camera.svg'),
|
|
};
|
|
|
|
storiesOf('Components/Article/Standard', module)
|
|
.addDecorator(withKnobs)
|
|
.addDecorator(articleDecorator)
|
|
.add('Default', () => (
|
|
<Article
|
|
reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
|
|
commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
|
|
videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
|
|
isBookmarked={boolean('isBookmarked', false)}
|
|
article={object('article', article)}
|
|
currentTag={text('currentTag', 'javascript')}
|
|
/>
|
|
))
|
|
.add('With Organization', () => (
|
|
<Article
|
|
reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
|
|
commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
|
|
videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
|
|
isBookmarked={boolean('isBookmarked', false)}
|
|
article={object('article', articleWithOrganization)}
|
|
currentTag={text('currentTag', 'javascript')}
|
|
/>
|
|
))
|
|
.add('Wth Flare Tag', () => (
|
|
<Article
|
|
reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
|
|
commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
|
|
videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
|
|
isBookmarked={boolean('isBookmarked', false)}
|
|
article={object('article', article)}
|
|
currentTag={text('currentTag')}
|
|
/>
|
|
))
|
|
.add('Wth Snippet Result', () => (
|
|
<Article
|
|
reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
|
|
commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
|
|
videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
|
|
isBookmarked={boolean('isBookmarked', false)}
|
|
article={object('article', articleWithSnippetResult)}
|
|
currentTag={text('currentTag')}
|
|
/>
|
|
))
|
|
.add('Wth Reading Time', () => (
|
|
<Article
|
|
reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
|
|
commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
|
|
videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
|
|
isBookmarked={boolean('isBookmarked', false)}
|
|
article={object('article', articleWithReadingTimeGreaterThan1)}
|
|
currentTag={text('currentTag')}
|
|
/>
|
|
))
|
|
.add('Wth Reactions', () => (
|
|
<Article
|
|
reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
|
|
commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
|
|
videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
|
|
isBookmarked={boolean('isBookmarked', false)}
|
|
article={object('article', articleWithReactions)}
|
|
currentTag={text('currentTag')}
|
|
/>
|
|
))
|
|
.add('With Comments', () => (
|
|
<Article
|
|
reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
|
|
commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
|
|
videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
|
|
isBookmarked={boolean('isBookmarked', false)}
|
|
article={object('article', articleWithComments)}
|
|
currentTag={text('currentTag')}
|
|
/>
|
|
))
|
|
.add('Is on Reading List', () => (
|
|
<Article
|
|
reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
|
|
commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
|
|
videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
|
|
isBookmarked={boolean('isBookmarked', true)}
|
|
article={object('article', articleWithComments)}
|
|
currentTag={text('currentTag')}
|
|
/>
|
|
));
|
|
|
|
storiesOf('Components/Article/Video', module)
|
|
.addDecorator(withKnobs)
|
|
.addDecorator(articleDecorator)
|
|
.add('Default', () => (
|
|
<Article
|
|
reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
|
|
commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
|
|
videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
|
|
isBookmarked={boolean('isBookmarked', false)}
|
|
article={object('article', videoArticle)}
|
|
currentTag={text('currentTag', 'javascript')}
|
|
/>
|
|
))
|
|
.add('Video Article and Flare Tag', () => (
|
|
<Article
|
|
reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
|
|
commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
|
|
videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
|
|
isBookmarked={boolean('isBookmarked', false)}
|
|
article={object('article', videoArticle)}
|
|
currentTag={text('currentTag')}
|
|
/>
|
|
));
|
|
|
|
storiesOf('Components/Article/Podcast', module)
|
|
.addDecorator(withKnobs)
|
|
.addDecorator(articleDecorator)
|
|
.add('Default', () => (
|
|
<Article
|
|
reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
|
|
commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
|
|
videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
|
|
isBookmarked={boolean('isBookmarked', false)}
|
|
article={object('article', podcastArticle)}
|
|
currentTag={text('currentTag')}
|
|
/>
|
|
))
|
|
.add('Podcast Episode', () => (
|
|
<Article
|
|
reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
|
|
commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
|
|
videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
|
|
isBookmarked={boolean('isBookmarked', false)}
|
|
article={object('article', podcastEpisodeArticle)}
|
|
currentTag={text('currentTag')}
|
|
/>
|
|
));
|
|
|
|
storiesOf('Components/Article/User', module)
|
|
.addDecorator(withKnobs)
|
|
.addDecorator(articleDecorator)
|
|
.add('Default', () => (
|
|
<Article
|
|
reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
|
|
commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
|
|
videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
|
|
article={object('article', userArticle)}
|
|
/>
|
|
));
|