Merge pull request #49 from wpmudev/enhance/post

🐛 fix(react-post): Add component to Storybook.
wpmudev · Mar 19, 2021 · fea8f5c · fea8f5c
2 parents 69c3699 + 71a6168
commit fea8f5c
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 12 deletions.
diff --git a/packages/react-post/docs/react-post.stories.js b/packages/react-post/docs/react-post.stories.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Post } from '../lib/react-post';
+
+export default {
+    title: 'Components/Post',
+    component: Post
+}
+
+const Template = args => {
+    return (
+        <div style={ { width: '100%', maxWidth: '300px' } }>
+            <Post {...args} />
+        </div>
+    );
+};
+
+export const primary = Template.bind({});
+primary.storyName = 'Side Image';
+primary.args = {
+    image: 'https://www.wpexplorer.com/wp-content/uploads/amazing_fb_ad.png',
+    title: 'Post Title',
+    excerpt: '<p>Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus.</p>',
+    time: '5'
+};
+primary.argTypes = {};
+
+export const secondary = Template.bind({});
+secondary.storyName = 'Banner Image';
+secondary.args = {
+    ...primary.args,
+    banner: true
+};
+secondary.argTypes = {};
diff --git a/packages/react-post/lib/post.js → packages/react-post/lib/react-post.js b/packages/react-post/lib/post.js → packages/react-post/lib/react-post.js
@@ -258,17 +258,21 @@ export class Post extends Component {
 
 		let PostImage = ""; // Empty.
 
-		if (error) {
-			PostImage = error.message;
-		} else if (!isLoaded) {
-			PostImage = (
-				<p style={ { textAlign: 'center' } }>
-					<span className="sui-icon-loader sui-loading" aria-hidden="true"></span>
-					<span className="sui-screen-reader-text">Image is loading</span>
-				</p>
-			);
+		if ( this.props.image ) {
+			PostImage = <FeaturedImage src={this.props.image} alt="" {...this.props} />;
 		} else {
-			PostImage = <FeaturedImage src={media} {...this.props} />;
+			if (error) {
+				PostImage = error.message;
+			} else if (!isLoaded) {
+				PostImage = (
+					<p style={ { textAlign: 'center' } }>
+						<span className="sui-icon-loader sui-loading" aria-hidden="true"></span>
+						<span className="sui-screen-reader-text">Image is loading</span>
+					</p>
+				);
+			} else {
+				PostImage = <FeaturedImage src={media} {...this.props} />;
+			}
 		}
 
 		if (this.props.banner) {

diff --git a/packages/react-post/package.json b/packages/react-post/package.json
@@ -14,7 +14,7 @@
   "license": "GPL-3.0",
   "main": "dist/react-post.cjs.js",
   "module": "dist/react-post.esm.js",
-  "src": "lib/post.js",
+  "src": "lib/react-post.js",
   "directories": {
     "lib": "lib",
     "test": "__tests__"
@@ -26,7 +26,7 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/wpmudev/shared-ui-react.git",
-    "directory": "packages/post"
+    "directory": "packages/react-post"
   },
   "scripts": {
     "build": "sui-builder",